/* =========================================================
   HELLSPLAT TERMINAL MACHINE — CLEANED SAFE CSS
   Generated from uploaded style.css.
   Safe cleanup: historical layout kept, late iterative overrides consolidated.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=VT323&display=swap');

/* Local font hooks for preservation / archive.org.
   Drop matching .woff2 files into assets/fonts/.
   If files are absent, browser falls back to the existing Google/system stack. */
@font-face {
  font-family: "VT323 Local";
  src:
    url("../fonts/VT323-Regular.woff2") format("woff2"),
    url("../fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans Mono Local";
  src:
    url("../fonts/DejaVuSansMono.woff2") format("woff2"),
    url("../fonts/DejaVuSansMono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Liberation Mono Local";
  src:
    url("../fonts/LiberationMono-Regular.woff2") format("woff2"),
    url("../fonts/LiberationMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* HELLSPLAT TERMINAL / INDUSTRIAL PIXEL DRAFT */
:root {
  --void: #070707;
  --black: #0b0908;
  --stone: #181412;
  --stone-2: #241e1a;
  --rust: #5e3421;
  --rust-light: #a25c32;
  --phosphor: #aecf89;
  --phosphor-bright: #e2f0b5;
  --amber: #d99d45;
  --blood: #772d27;
  --line: #514238;
  --screen: #09110d;
  --screen-2: #0e1812;
  --shadow: rgba(0,0,0,.72);
  --pixel: "Courier New", "Lucida Console", monospace;
}

* { box-sizing: border-box; }
html { background: var(--void); }

body {
  margin: 0;
  min-height: 100vh;
  color: #cec1ad;
  font-family: var(--pixel);
  background:
    radial-gradient(circle at 50% -12%, rgba(112,49,31,.22), transparent 31rem),
    radial-gradient(circle at 50% 25%, #181311, #080707 62%),
    var(--void);
  image-rendering: pixelated;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(208,174,126,.055) 1px, transparent 1px),
    linear-gradient(135deg, rgba(0,0,0,.14) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.14) 75%, transparent 75%);
  background-size: 3px 3px, 8px 8px;
  opacity: .52;
}

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.site-frame {
  position: relative;
  width: min(1140px, calc(100% - 18px));
  margin: 14px auto 28px;
  padding: 8px;
  border: 2px solid #3a302b;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 12%),
    repeating-linear-gradient(135deg, #181412 0 3px, #15110f 3px 6px);
  box-shadow: 0 0 0 2px #080706, 0 16px 46px rgba(0,0,0,.8);
}

.legacy-header {
  min-height: 150px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 14px;
  padding: 5px 0 0;
  background:
    radial-gradient(ellipse at bottom center, rgba(72,28,27,.25), transparent 58%),
    #090808;
  border: 1px solid #29211e;
  overflow: hidden;
}

.torch {
  width: 72px;
  height: auto;
  image-rendering: pixelated;
  opacity: .94;
}

.identity { text-align: center; padding-bottom: 16px; }
.site-logo { width: min(510px, 60vw); max-width: 100%; display: block; }
.tagline {
  margin: 8px 0 0;
  color: #9c7a55;
  letter-spacing: .18em;
  font-size: 11px;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 7px 0;
  padding: 5px;
  border: 1px solid #3b302b;
  background: #0c0a09;
}

.site-nav a {
  padding: 9px 14px;
  color: #b19370;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: .05em;
  background: linear-gradient(#231e1b, #161210);
  border: 1px solid #332922;
}

.site-nav a:hover, .site-nav a.active {
  color: #f0c77d;
  border-color: #8f5130;
  background: linear-gradient(#37231a, #191311);
  text-shadow: 0 0 10px rgba(217,157,69,.45);
}

.columns {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) 106px;
  gap: 9px;
}

.button-rack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 9px 5px;
  border: 1px solid #3d322c;
  background: #0d0b0a;
}

.button-rack h2 {
  width: 100%;
  margin: 0 0 6px;
  padding: 5px 2px;
  color: var(--amber);
  text-align: center;
  font-size: 12px;
  letter-spacing: .12em;
  border-bottom: 1px dotted #55402f;
}

.button-rack img {
  width: 88px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid rgba(130,104,77,.28);
}

.counter {
  margin-top: auto;
  width: 88px;
  padding: 7px 3px;
  color: #816c56;
  text-align: center;
  font-size: 10px;
  border: 1px inset #40342d;
  background: #080706;
}
.counter strong { display: block; color: var(--phosphor); font-size: 15px; letter-spacing: .12em; }

.console {
  min-width: 0;
  border: 2px solid #42362f;
  background: repeating-linear-gradient(135deg, #221c19, #221c19 3px, #1a1614 3px, #1a1614 6px);
  padding: 7px;
  box-shadow: inset 0 0 0 2px #0c0a09;
}

.console-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 8px;
  color: #9a8066;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .09em;
}
.console-top .mode { margin-left: auto; font-size: 10px; color: #735540; }
.screw {
  display: inline-block;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid #050505;
  background: radial-gradient(circle, #695a50 0 22%, #2a2421 23% 70%, #0b0908);
}

.terminal-screen {
  position: relative;
  min-height: 0;
  padding: clamp(16px, 3vw, 31px);
  overflow: hidden;
  color: var(--phosphor);
  border: 3px inset #2d2822;
  background:
    radial-gradient(circle at center, rgba(88,115,62,.12), transparent 54%),
    repeating-linear-gradient(0deg, rgba(187,219,140,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--screen-2), var(--screen));
  box-shadow: inset 0 0 65px rgba(0,0,0,.92), inset 0 0 16px rgba(166,198,128,.08);
}

.terminal-screen::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.52));
  z-index: 10;
}

.boot-overlay {
  position: absolute;
  inset: clamp(16px, 3vw, 31px);
  z-index: 4;
  color: var(--phosphor-bright);
  background: transparent;
  transition: opacity .16s linear;
}
.boot-overlay.is-gone { opacity: 0; pointer-events: none; }
.boot-overlay[hidden] { display: none !important; }

.boot-output {
  display: inline;
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.75;
  text-shadow: 0 0 9px rgba(174,207,137,.45);
}
.cursor {
  display: inline-block;
  width: 9px; height: 17px;
  vertical-align: -3px;
  margin-left: 4px;
  background: var(--phosphor-bright);
  animation: blink .65s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.print-surface {
  position: relative;
  min-height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.print-surface.is-running, .print-surface.is-ready { opacity: 1; }
.print-surface.is-ready { pointer-events: auto; }

.print-head {
  display: none;
  position: absolute;
  z-index: 9;
  left: 0; right: 0;
  height: 16px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(225,240,181,.42) 5px 7px),
    linear-gradient(90deg, transparent, rgba(225,240,181,.16), transparent);
  border-top: 1px solid rgba(225,240,181,.30);
  filter: drop-shadow(0 0 5px rgba(225,240,181,.28));
}
.print-surface.is-running .print-head { display: block; }

.module { position: relative; }
.command { margin: 0 0 4px; color: #7a9867; }
.access {
  margin: 9px 0 27px;
  color: var(--phosphor-bright);
  font-weight: bold;
  letter-spacing: .16em;
}
.file-id {
  display: inline-block;
  color: var(--amber);
  margin-bottom: 9px;
  font-size: 12px;
  letter-spacing: .15em;
}
.entry-header, .section-header { margin-bottom: 27px; }
.entry-header h1, .section-header h1 {
  margin: 0;
  color: var(--phosphor-bright);
  font-size: clamp(21px, 3.3vw, 36px);
  line-height: 1.25;
  text-shadow: 0 0 15px rgba(174,207,137,.18);
}
.signature { color: #8b7359; margin: 10px 0 0; }

.terminal-block {
  border: 1px solid #45503a;
  background: rgba(6,11,8,.48);
  padding: 14px 15px;
  margin: 18px 0;
}
.block-title {
  color: var(--amber);
  border-bottom: 1px dashed #4c4638;
  padding-bottom: 7px;
  margin-bottom: 11px;
  font-size: 12px;
  letter-spacing: .1em;
}
.terminal-block h2 { color: var(--phosphor-bright); font-size: 19px; margin: 0 0 8px; }
.terminal-block p { margin: 0; line-height: 1.65; }

.terminal-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 22px;
}
.module-tile {
  display: block;
  padding: 13px;
  color: var(--phosphor);
  text-decoration: none;
  border: 1px solid #48553c;
  background: #0b120e;
}
.module-tile:hover { color: var(--phosphor-bright); border-color: #879f67; background: #111b14; }
.tile-code { display: block; color: var(--amber); font-size: 12px; margin-bottom: 9px; }
.module-tile strong { display: block; }
.module-tile small { color: #76876b; }

.post-list { display: grid; gap: 14px; }
.post-card {
  padding: 14px 15px;
  border: 1px solid #44503b;
  background: rgba(8,14,10,.52);
}
.post-data { margin: 0 0 8px; color: var(--amber); font-size: 12px; letter-spacing: .08em; }
.post-card h2 { margin: 0 0 8px; font-size: 19px; }
.post-card h2 a, .open-link { color: var(--phosphor-bright); }
.post-card p { line-height: 1.55; }
.open-link { font-size: 13px; text-decoration: none; }

.post-body { line-height: 1.72; color: #c2d4a3; }
.post-body h2 { color: var(--amber); margin-top: 28px; }
.post-body code { padding: 1px 5px; color: var(--phosphor-bright); background: #162016; }
.post-body blockquote {
  padding: 13px 16px;
  margin: 18px 0;
  border-left: 3px solid var(--amber);
  color: var(--phosphor-bright);
  background: #0c120e;
}

.guest-form {
  display: grid;
  gap: 14px;
  max-width: 540px;
}
.guest-form label { display: grid; gap: 6px; color: var(--amber); font-size: 13px; }
.guest-form input, .guest-form textarea, .guest-form button {
  font: inherit;
  color: var(--phosphor-bright);
  border: 1px solid #4b593e;
  background: #080d0a;
  padding: 10px;
}
.guest-form textarea { min-height: 110px; }
.guest-form button {
  width: fit-content;
  color: var(--black);
  font-weight: bold;
  background: var(--amber);
  border-color: #be8441;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px 4px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #8b7a67;
}
.copyright-symbol {
  display: inline-block;
  transform: scaleY(0.60);
  transform-origin: center;
  letter-spacing: 0;
  font-size: 1.1em;
  vertical-align: -0.03em;
}
@media (max-width: 760px) {
  .torch { width: 46px; }
  .legacy-header { min-height: 100px; }
  .identity { padding-bottom: 10px; }
  .tagline { letter-spacing: .09em; }
  .columns { display: flex; flex-direction: column; }
  .console { order: 1; }
  .button-rack { order: 2; min-height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .button-rack.right { order: 3; }
  .button-rack h2 { width: 100%; }
  .terminal-screen { min-height: 0; padding: 16px; }
  .terminal-grid { grid-template-columns: 1fr; }
  .console-top .mode { display: none; }
}

/* V2: compact retro-page height and reliable dot-matrix reveal */
.columns {
  align-items: start;
}

.button-rack {
  align-self: start;
}

.terminal-screen {
  padding-bottom: clamp(16px, 3vw, 31px);
}

.print-surface {
  position: relative;
  min-height: 1px;
}

.matrix-curtain {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}

.matrix-row-cover {
  position: absolute;
  left: 0;
  right: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(8, 16, 12, .995) 0 3px,
      rgba(7, 14, 10, .995) 3px 6px
    );
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
}

.print-head {
  height: 13px;
  background:
    repeating-linear-gradient(90deg, rgba(225,240,181,.42) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, transparent, rgba(217,157,69,.22), transparent);
  border-top: 1px solid rgba(225,240,181,.26);
  border-bottom: 1px dotted rgba(217,157,69,.20);
}

.site-footer {
  margin-top: 7px;
  padding: 8px 8px 4px;
  border-top: 1px dotted #382e28;
}

.site-footer .founded {
  color: #8f704f;
}

@media (max-width: 760px) {
  .columns { align-items: stretch; }
}

/* GUESTBOOK / TRANSMISSION LOG */
.guestbook-module .guest-form {
  margin-bottom: 32px;
}

.transmission-log {
  border-top: 1px dashed #4c4638;
  padding-top: 20px;
}
.transmission-titleline {
  white-space: nowrap;
}

.transmission-titleline span {
  color: #8f7654;
}
.latest-transmission.no-thumbnail {
  display: block;
}
.log-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 15px;
}

.log-header .file-id {
  margin-bottom: 5px;
}

.log-header h2 {
  margin: 0;
  color: var(--phosphor-bright);
  font-size: clamp(18px, 2.3vw, 23px);
}

.log-count {
  margin: 0;
  color: var(--amber);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: right;
}

.guest-entries {
  display: grid;
  gap: 10px;
}

.guest-entry {
  padding: 11px 13px 12px;
  border: 1px solid #3b4937;
  background:
    linear-gradient(90deg, rgba(174,207,137,.035), transparent 44%),
    rgba(7,12,9,.62);
}

.guest-entry header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--amber);
  font-size: 12px;
  letter-spacing: .06em;
}

.guest-entry header strong {
  color: var(--phosphor-bright);
}

.guest-entry p {
  margin: 0;
  line-height: 1.55;
  color: #bdcea1;
}

.log-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px dotted #3b352d;
  font-size: 13px;
}

.log-pagination a {
  color: var(--phosphor-bright);
  text-decoration: none;
}

.log-pagination a:hover {
  color: var(--amber);
}

.log-pagination .disabled {
  color: #4e5548;
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-numbers .current {
  color: var(--amber);
}

@media (max-width: 620px) {
  .log-header {
    display: block;
  }
  .log-count {
    margin-top: 9px;
    text-align: left;
  }
  .log-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =========================================================
   V4 // DUAL CRT MACHINE LAYOUT
   Upper identity monitor + data cable + lower content monitor.
========================================================= */

.legacy-header { display: none; }

.aux-console {
  border: 2px solid #42362f;
  padding: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 12%),
    repeating-linear-gradient(135deg, #221c19, #221c19 3px, #1a1614 3px, #1a1614 6px);
  box-shadow: inset 0 0 0 2px #0c0a09;
}

.aux-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 4px 9px 8px;
  color: #987d62;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .11em;
}

.status-led {
  color: var(--amber);
  font-size: 10px;
  margin-left: auto;
  text-shadow: 0 0 8px rgba(217,157,69,.45);
}

.aux-screen {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2.8vw, 27px);
  min-height: clamp(220px, 29vw, 320px);
  border: 3px inset #2d2822;
  color: var(--phosphor);
  background:
    radial-gradient(circle at center, rgba(88,115,62,.15), transparent 58%),
    repeating-linear-gradient(0deg, rgba(187,219,140,.038) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--screen-2), var(--screen));
  box-shadow: inset 0 0 68px rgba(0,0,0,.94), inset 0 0 16px rgba(166,198,128,.09);
}

.aux-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(ellipse at center, transparent 51%, rgba(0,0,0,.54));
}

.brand-boot-overlay {
  position: absolute;
  inset: clamp(16px, 2.8vw, 27px);
  z-index: 5;
  color: var(--phosphor-bright);
  transition: opacity .17s linear;
}
.brand-boot-overlay.is-gone { opacity: 0; pointer-events: none; }
.brand-boot-overlay[hidden] { display: none !important; }

.brand-surface {
  position: relative;
  opacity: 0;
  z-index: 2;
  text-align: center;
}
.brand-surface.is-running,
.brand-surface.is-ready { opacity: 1; }

.ascii-logo {
  display: block;
  margin: 0 auto 14px;
  overflow: hidden;
  white-space: pre;
  color: var(--phosphor-bright);
  font: bold clamp(5.8px, .98vw, 11.5px)/1.03 "Courier New", monospace;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(174,207,137,.48), 1px 0 rgba(217,157,69,.18);
  /* V5: glitch is triggered in short pulses by JavaScript only. */
}

@keyframes logoGlitch {
  0%, 91%, 100% { transform: translateX(0); filter: none; }
  92% { transform: translateX(1px); filter: brightness(1.25); }
  93% { transform: translateX(-2px); text-shadow: 2px 0 #a25c32, -2px 0 #aecf89; }
  94% { transform: translateX(0); filter: none; }
}

.twain-quote {
  margin: 0 auto 4px;
  max-width: 76ch;
  color: var(--phosphor-bright);
  font-size: clamp(12px, 1.48vw, 15px);
  letter-spacing: .04em;
  text-shadow: 0 0 7px rgba(174,207,137,.3);
}

.twain-credit {
  margin: 0 0 15px;
  color: var(--amber);
  font-size: 13px;
}

.node-status {
  display: flex;
  justify-content: center;
  gap: clamp(11px, 4vw, 34px);
  flex-wrap: wrap;
  color: #789765;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.brand-print-head {
  display: none;
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(225,240,181,.4) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, transparent, rgba(217,157,69,.18), transparent);
  border-top: 1px solid rgba(225,240,181,.25);
  filter: drop-shadow(0 0 5px rgba(225,240,181,.26));
}

.data-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 40px;
  position: relative;
}

.data-plate {
  position: relative;
  z-index: 2;
  padding: 7px 17px 6px;
  color: #a88459;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .16em;
  border: 2px solid #3c3028;
  background: linear-gradient(#241d19, #120f0d);
  box-shadow: inset 0 0 0 1px #0c0a09;
}

.data-plate i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 7px;
  border-radius: 50%;
  background: #d27632;
  box-shadow: 0 0 5px rgba(226,121,45,.8);
  animation: linkPulse 1.65s steps(1) infinite;
}
.data-plate i:nth-child(2) { animation-delay: .36s; }
.data-plate i:nth-child(3) { animation-delay: .72s; }

@keyframes linkPulse {
  0%, 34% { opacity: .26; }
  35%, 61% { opacity: 1; }
  62%, 100% { opacity: .33; }
}

.cable {
  width: min(160px, 21vw);
  height: 24px;
  border-bottom: 7px ridge #25201d;
  background:
    repeating-linear-gradient(90deg, #0b0a09 0 6px, #2a2521 6px 9px, #0b0a09 9px 15px);
  box-shadow: 0 4px 0 #060505, inset 0 2px rgba(130,104,77,.16);
}
.cable-left { border-radius: 0 0 0 18px; }
.cable-right { border-radius: 0 0 18px 0; }

.content-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px;
  align-items: start;
  gap: 9px;
}

.content-columns .console { grid-column: 1; }
.content-columns .button-rack { grid-column: 2; }

.button-rack.right {
  min-height: 0;
  height: max-content;
}

.button-rack.right img {
  margin-bottom: 1px;
}

.terminal-screen {
  min-height: 0;
}

.home-header {
  margin-bottom: 23px;
}

.home-header h1 {
  font-size: clamp(22px, 3.2vw, 34px);
}

.bottom-buttons {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 8px;
  margin-top: 9px;
  border: 1px solid #3d322c;
  background: #0d0b0a;
}

.bottom-buttons a {
  min-height: 47px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 5px 3px;
  color: #a78b69;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  line-height: 1.17;
  letter-spacing: .07em;
  border: 1px solid #40342d;
  background: linear-gradient(#211c19, #100e0d);
}

.bottom-buttons a strong {
  color: var(--amber);
  font-size: 12px;
}

.bottom-buttons a:hover {
  border-color: #8f5130;
  color: var(--phosphor-bright);
  background: #17130f;
}

.site-footer {
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
  padding: 11px 8px 7px;
  border: 1px solid #362c27;
  background: #0d0b0a;
  color: #ae8452;
}

@media (max-width: 860px) {
  .ascii-logo { font-size: clamp(4px, 1.28vw, 8px); }
  .bottom-buttons { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  .content-columns { display: flex; flex-direction: column; }
  .content-columns .console { order: 1; width: 100%; }
  .content-columns .button-rack { order: 2; width: 100%; }
  .button-rack.right { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .button-rack.right h2 { width: 100%; }
  .data-link { height: 33px; }
  .cable { width: 23vw; }
  .bottom-buttons { grid-template-columns: repeat(2, 1fr); }
  .aux-screen { min-height: 190px; padding: 14px 9px; }
  .twain-quote { font-size: 11px; }
}

/* =========================================================
   V5 // TIGHTER FRAME + CLEANER UPPER MONITOR
========================================================= */

/* Return to the tighter proportions of the earlier concept. */
.site-frame {
  width: min(980px, calc(100% - 18px));
}

/* The identity display should wrap its content, not create a large empty chamber. */
.aux-console {
  padding: 5px;
}

.aux-topbar {
  padding: 3px 8px 6px;
  font-size: 10px;
  gap: 10px;
}

.aux-screen {
  min-height: 0;
  padding: 12px 16px 11px;
}

.brand-boot-overlay {
  inset: 12px 16px 11px;
  min-height: 106px;
}

.brand-surface {
  min-height: 0;
}

.ascii-logo {
  margin: 0 auto 8px;
  font-size: clamp(5px, .90vw, 8.7px);
  line-height: 1;
  font-variant-ligatures: none;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  transform: none;
  filter: none;
  animation: none;
  /* Clean centered glow only; no permanent coloured offset/double image. */
  text-shadow: 0 0 7px rgba(174,207,137,.36);
}

/* Glitch exists only during a short deliberate JS-triggered burst. */
.ascii-logo.glitch-pulse {
  animation: logoPulseClean 125ms steps(2, end) 1;
}

@keyframes logoPulseClean {
  0%   { transform: translateX(0); filter: none; text-shadow: 0 0 7px rgba(174,207,137,.36); }
  33%  { transform: translateX(1px); filter: brightness(1.18); text-shadow: -1px 0 rgba(217,157,69,.60), 1px 0 rgba(174,207,137,.72); }
  66%  { transform: translateX(-1px); filter: brightness(.92); text-shadow: 1px 0 rgba(217,157,69,.45), -1px 0 rgba(174,207,137,.66); }
  100% { transform: translateX(0); filter: none; text-shadow: 0 0 7px rgba(174,207,137,.36); }
}

.twain-quote {
  margin: 0 auto 2px;
  font-size: clamp(11px, 1.28vw, 13px);
  line-height: 1.35;
}

.twain-credit {
  margin: 0 0 8px;
  font-size: 11px;
}

.node-status {
  gap: clamp(9px, 3vw, 23px);
  font-size: 9px;
  line-height: 1.2;
}

.brand-print-head {
  height: 10px;
}

.data-link {
  height: 32px;
}

.data-plate {
  padding: 5px 13px 4px;
  font-size: 9px;
}

.cable {
  height: 19px;
  border-bottom-width: 5px;
}

.site-nav a {
  padding: 8px 11px;
  font-size: 12px;
}

.content-columns {
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 7px;
}

.button-rack {
  padding: 7px 4px;
  gap: 6px;
}

.button-rack img {
  width: 88px;
}

.console {
  padding: 5px;
}

.console-top {
  padding: 4px 8px 6px;
  font-size: 10px;
}

.terminal-screen {
  padding: clamp(14px, 2.5vw, 24px);
}

.bottom-buttons {
  gap: 5px;
  padding: 6px;
}

.bottom-buttons a {
  min-height: 42px;
  font-size: 9px;
}

.bottom-buttons a strong {
  font-size: 10px;
}

.site-footer {
  padding: 8px 7px 5px;
  font-size: 10px;
  gap: 7px;
}

@media (max-width: 760px) {
  .site-frame { width: min(100% - 10px, 980px); }
  .ascii-logo { font-size: clamp(3.2px, 1.18vw, 6px); }
  .aux-screen { padding: 10px 6px 9px; }
  .brand-boot-overlay { inset: 10px 6px 9px; min-height: 96px; }
  .node-status { display: none; }
}

/* =========================================================
   V6 // ASCII-FIXED BRAND, HARDWARE CABLE & REAL BUTTON TRAY
========================================================= */

/* ASCII only: no Unicode box-drawing glyphs, no fallback-font misalignment. */
.ascii-logo {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 9px;
  font-family: "Courier New", "Liberation Mono Local", "Liberation Mono", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: clamp(7px, 1.14vw, 11px);
  font-weight: bold;
  font-variant-ligatures: none;
  letter-spacing: 0;
  line-height: 1.04;
  text-align: left;
  white-space: pre;
  overflow: visible;
}

/* Commodore-like red power LED beside ONLINE. */
.status-led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c58a76;
  text-shadow: none;
}
.status-led i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #29110d;
  background: radial-gradient(circle at 35% 30%, #ffd0a2 0 10%, #e34b32 17% 43%, #721c17 58% 100%);
  box-shadow: 0 0 2px #ff704d, 0 0 8px rgba(217,48,34,.8), inset 0 -1px 1px rgba(0,0,0,.5);
}

/* Replace straight decorative bars with a routed cable harness and plugs. */
.data-link {
  height: 56px;
  position: relative;
  overflow: visible;
}
.data-link .cable { display: none; }

.cable-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 64px;
  overflow: visible;
}
.port-shell, .plug-shell {
  fill: #221b17;
  stroke: #59483b;
  stroke-width: 2px;
}
.cable-shadow, .down-cable-shadow {
  fill: none;
  stroke: #050505;
  stroke-width: 13px;
  stroke-linecap: round;
}
.cable-wire, .down-cable {
  fill: none;
  stroke: #161412;
  stroke-width: 9px;
  stroke-linecap: round;
}
.cable-rib {
  fill: none;
  stroke: rgba(131,109,89,.50);
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-dasharray: 2.5 5.5;
}
.down-cable-shadow { stroke-width: 12px; }
.down-cable { stroke-width: 8px; }

.data-plate {
  z-index: 3;
  margin-top: 25px;
}

/* Actual graphic badges at the bottom, not imitation HTML buttons. */
.bottom-buttons { display: none; }

.bottom-banner-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 48px;
  margin-top: 8px;
  padding: 7px 11px;
  border: 1px solid #3d322c;
  background:
    linear-gradient(#15110f, #0b0908),
    repeating-linear-gradient(135deg, #221c19 0 3px, #161210 3px 6px);
}
.tray-label {
  color: #806548;
  font-size: 10px;
  letter-spacing: .14em;
}
.tray-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tray-buttons img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  border: 1px solid rgba(130,104,77,.33);
}

@media (max-width: 760px) {
  .ascii-logo { font-size: clamp(4.2px, 1.31vw, 7px); }
  .data-link { height: 48px; }
  .cable-svg { height: 55px; }
  .bottom-banner-tray { flex-direction: column; gap: 6px; }
}

/* =========================================================
   V7 // ORIGINAL VECTOR LOGO + NAVBAR-WRAPPING WIRE HARNESS
========================================================= */

body {
  font-family: "Pixelify Sans", "Courier New", monospace;
  font-size: 18px;
  letter-spacing: .015em;
}

.ascii-logo,
.data-link,
.cable-svg {
  display: none !important;
}

/* Original block-art logo is now vector paths; it cannot fall back to another font. */
.ascii-logo-svg {
  display: block;
  width: min(690px, 94%);
  height: auto;
  margin: 0 auto 8px;
  filter: drop-shadow(0 0 7px rgba(174,207,137,.40));
  transform: translateX(0);
}

.ascii-logo-svg.glitch-pulse {
  animation: vectorLogoPulse 128ms steps(2, end) 1;
}

@keyframes vectorLogoPulse {
  0% { transform: translateX(0); filter: drop-shadow(0 0 7px rgba(174,207,137,.40)); }
  35% { transform: translateX(1px); filter: drop-shadow(-1px 0 rgba(217,157,69,.55)) drop-shadow(1px 0 rgba(174,207,137,.6)); }
  70% { transform: translateX(-1px); filter: drop-shadow(1px 0 rgba(217,157,69,.45)) drop-shadow(-1px 0 rgba(174,207,137,.65)); }
  100% { transform: translateX(0); filter: drop-shadow(0 0 7px rgba(174,207,137,.40)); }
}

.aux-screen {
  padding-bottom: 10px;
}

.twain-quote,
.twain-credit,
.node-status,
.aux-topbar,
.console-top,
.site-footer,
.tray-label {
  font-family: "Pixelify Sans", "Courier New", monospace;
}

.twain-quote {
  font-size: clamp(15px, 1.65vw, 17px);
}

.twain-credit {
  font-size: 15px;
}

.node-status {
  font-size: 13px;
}

.link-harness {
  position: relative;
  min-height: 104px;
  margin: -1px 0 0;
  padding: 31px 40px 29px;
}

.harness-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 104px;
  overflow: visible;
  pointer-events: none;
}

.harness-svg .socket {
  fill: #15110f;
  stroke: #665346;
  stroke-width: 2;
}

.harness-svg .wire-shadow {
  fill: none;
  stroke: rgba(0,0,0,.95);
  stroke-width: 13;
  stroke-linecap: round;
}

.harness-svg .wire-main {
  fill: none;
  stroke: #211c19;
  stroke-width: 9;
  stroke-linecap: round;
}

.harness-svg .wire-rib {
  fill: none;
  stroke: #705542;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1.5 6;
  opacity: .52;
}

.harness-svg .cable-signal {
  fill: #c7432e;
  filter: drop-shadow(0 0 5px rgba(224,64,42,.95));
}

.harness-svg .delayed {
  fill: #d2883d;
  filter: drop-shadow(0 0 5px rgba(217,157,69,.88));
}

.link-harness .site-nav {
  position: relative;
  z-index: 2;
  margin: 0;
  border-color: #44352d;
  box-shadow: inset 0 0 0 1px #080706;
}

.site-nav a,
.preview-nav button {
  font-family: "Pixelify Sans", "Courier New", monospace;
  font-size: 16px;
}

.command,
.access,
.file-id,
.post-data,
.log-count,
.open-link,
.tile-code {
  font-family: "Pixelify Sans", "Courier New", monospace;
  letter-spacing: .07em;
}

.terminal-screen {
  font-size: 18px;
}

.terminal-block p,
.post-card p,
.post-body,
.guest-entry p {
  line-height: 1.48;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .ascii-logo-svg { width: 98%; margin-bottom: 6px; }
  .link-harness { min-height: auto; padding: 20px 9px 17px; }
  .harness-svg { display: none; }
  .site-nav a, .preview-nav button { font-size: 14px; }
  .node-status { font-size: 11px; }
}

/* =========================================================
   V8 // CENTRED HARNESS + READABLE TRUE TERMINAL TYPOGRAPHY
========================================================= */

/*
  VT323: terminal display/chrome.
  IBM Plex Mono: long copy, Polish blog content, forms and guestbook messages.
*/
body {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0;
}

.site-nav a,
.preview-nav button,
.aux-topbar,
.console-top,
.status-led,
.command,
.access,
.file-id,
.block-title,
.post-data,
.log-count,
.open-link,
.tile-code,
.tray-label,
.site-footer,
.node-status,
.guest-form label,
.guest-form button {
  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  letter-spacing: .04em;
}

.site-nav a,
.preview-nav button {
  font-size: 24px;
  line-height: 1;
}

.aux-topbar,
.console-top {
  font-size: 18px;
}

.status-led {
  font-size: 18px;
}

.command {
  font-size: 22px;
}

.file-id,
.post-data,
.block-title,
.log-count,
.open-link,
.tile-code {
  font-size: 19px;
}

.site-footer,
.tray-label,
.node-status {
  font-size: 17px;
}

h1, h2, h3,
.section-header h1,
.entry-header h1,
.terminal-block h2,
.post-card h2 {
  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  letter-spacing: .035em;
  font-weight: 400;
}

.section-header h1,
.entry-header h1 {
  font-size: clamp(33px, 4.4vw, 48px);
}

.terminal-block h2,
.post-card h2,
.log-header h2 {
  font-size: 29px;
}

.twain-quote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: clamp(11px, 1.18vw, 13px);
  letter-spacing: 0;
}

.twain-credit {
  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 20px;
}

.terminal-block p,
.post-card p,
.post-body,
.guest-entry p,
.guest-form input,
.guest-form textarea {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* No permanent logo glitch while the alignment issue is still under review. */
.ascii-logo-svg,
.ascii-logo-svg.glitch-pulse {
  animation: none !important;
  transform: none !important;
}

/* Central harness: both wires are equally positioned behind the navbar. */
.link-harness {
  min-height: 104px;
  margin: -1px 0 0;
  padding: 31px 40px 29px;
  position: relative;
}

.harness-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 104px;
  overflow: visible;
  pointer-events: none;
}

.harness-svg .socket {
  fill: #100e0d;
  stroke: #493a31;
  stroke-width: 2;
}

.harness-svg .wire-shadow {
  fill: none;
  stroke: rgba(0,0,0,.92);
  stroke-width: 13;
  stroke-linecap: round;
}

.harness-svg .wire-main {
  fill: none;
  stroke: url(#wire-metal);
  stroke-width: 9;
  stroke-linecap: round;
}

.harness-svg .wire-highlight {
  fill: none;
  stroke: rgba(192,126,67,.23);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.harness-svg .signal-trail,
.harness-svg .signal-core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 11 89;
  animation-duration: 2.35s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.harness-svg .signal-trail {
  stroke: rgba(184,64,39,.68);
  stroke-width: 7;
  filter: url(#signal-glow);
}

.harness-svg .signal-core {
  stroke: rgba(230,119,69,.73);
  stroke-width: 2.2;
  filter: url(#signal-glow);
}

.harness-svg .down {
  animation-name: cableSignalDown;
}

.harness-svg .up {
  animation-name: cableSignalUp;
}

@keyframes cableSignalDown {
  from { stroke-dashoffset: 100; opacity: .08; }
  12% { opacity: .8; }
  88% { opacity: .75; }
  to { stroke-dashoffset: 0; opacity: .08; }
}

@keyframes cableSignalUp {
  from { stroke-dashoffset: 0; opacity: .08; }
  12% { opacity: .75; }
  88% { opacity: .8; }
  to { stroke-dashoffset: 100; opacity: .08; }
}

.link-harness .site-nav {
  position: relative;
  z-index: 3;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(18,14,12,.96), rgba(8,7,6,.98));
}

@media (max-width: 760px) {
  body { font-size: 13px; }
  .link-harness { min-height: auto; padding: 13px 7px; }
  .harness-svg { display: none; }
  .site-nav a, .preview-nav button { font-size: 20px; }
  .section-header h1, .entry-header h1 { font-size: 35px; }
}

/* =========================================================
   V9 // NAV FITS CONTENT, WIRES TOUCH SCREEN, POLISH FIX
========================================================= */

/* More reliable Polish coverage in content areas. */
body,
.terminal-block p,
.post-card p,
.post-body,
.guest-entry p,
.guest-form input,
.guest-form textarea,
.twain-quote {
  font-family: "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", "IBM Plex Mono", "Courier New", monospace;
}

/* UI can stay terminal-like while content remains readable. */
.site-nav a,
.preview-nav button,
.aux-topbar,
.console-top,
.status-led,
.command,
.access,
.file-id,
.block-title,
.post-data,
.log-count,
.open-link,
.tile-code,
.tray-label,
.site-footer,
.node-status,
.guest-form label,
.guest-form button,
.section-header h1,
.entry-header h1,
.terminal-block h2,
.post-card h2,
.log-header h2,
.twain-credit {
  font-family: "VT323 Local", "VT323", "Courier New", monospace;
}

/* Navbar background should hug its contents rather than stretch the full row. */
.link-harness {
  min-height: 108px;
  margin: -1px 0 -11px;
  padding: 28px 0 20px;
  position: relative;
  overflow: visible;
}

.link-harness .site-nav {
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 5px;
  justify-content: center;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
}

/* Wires now really meet the lower screen area. */
.harness-svg {
  height: 118px;
  z-index: 1;
}

.harness-svg .grommet {
  fill: #0b0908;
  stroke: #40342d;
  stroke-width: 1.6;
}

.harness-svg .wire-shadow {
  stroke-width: 13;
}

.harness-svg .wire-main {
  stroke: url(#wire-metal);
  stroke-width: 9;
}

.harness-svg .wire-highlight {
  stroke: rgba(233,176,106,.20);
  stroke-width: 1.4;
}

.harness-svg .signal-trail,
.harness-svg .signal-core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 18 82;
  animation-duration: 2.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.harness-svg .signal-trail {
  stroke: rgba(205,88,58,.42);
  stroke-width: 9.5;
  filter: url(#signal-glow);
}

.harness-svg .signal-core {
  stroke: rgba(255,179,109,.42);
  stroke-width: 3.2;
  filter: url(#signal-glow);
}

.content-columns {
  position: relative;
  z-index: 2;
}

.console {
  position: relative;
  z-index: 2;
}

/* Slightly nudge bottom-tray spacing up after the harness overlap. */
.bottom-banner-tray {
  margin-top: 6px;
}

/* Responsive fallback: hide harness on narrow view to avoid awkward overlap. */
@media (max-width: 760px) {
  .link-harness {
    min-height: auto;
    margin: 0;
    padding: 12px 0 10px;
  }
  .link-harness .site-nav {
    max-width: calc(100% - 8px);
  }
}

/* =========================================================
   V10 // LOWER MONITOR ENTRY PORTS + UTF-8 POST FIX UI
========================================================= */

/* The short loading notice on the content monitor is system text,
   intentionally rougher and smaller than readable article text. */
.main-load-overlay .boot-output {
  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: .045em;
  color: #94b37a;
  text-shadow: 0 0 6px rgba(148,179,122,.34);
  text-transform: uppercase;
}

.main-load-overlay .cursor {
  width: 7px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -1px;
  background: #94b37a;
}

/* Align the wire bridge with the large terminal monitor.
   The 107px right rack no longer affects cable alignment. */
.link-harness {
  width: calc(100% - 107px);
  margin-left: 0;
  margin-right: auto;
  margin-bottom: -12px;
}

/* The lower monitor owns the same entry holes as the upper display. */
.console {
  position: relative;
  overflow: visible;
}

.lower-cable-entry {
  position: absolute;
  z-index: 12;
  top: -6px;
  left: 50%;
  display: flex;
  gap: 28px;
  transform: translateX(-50%);
  pointer-events: none;
}

.lower-cable-entry span {
  display: block;
  width: 15px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #050504 0 40%, #130f0d 42% 61%, #4b3b31 63% 79%, #0b0908 80%);
  box-shadow:
    0 -1px 0 rgba(175,119,66,.20),
    0 2px 3px rgba(0,0,0,.72);
}

/* Let the cable end remain visible immediately above the lower holes. */
.harness-svg {
  height: 119px;
  overflow: visible;
}

/* Because the harness is now the width of the main screen, these centred
   paths meet the centred lower-entry holes reliably. */
.content-columns {
  margin-top: 0;
}

/* Strongly preserve readable UTF-8 content in actual article copy. */
.post-body,
.post-body p,
.post-body li,
.post-body blockquote,
.guest-entry p {
  font-family: "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", "IBM Plex Mono", monospace;
  font-feature-settings: "liga" 0;
}

@media (max-width: 760px) {
  .link-harness {
    width: 100%;
    margin-bottom: 0;
  }

  .lower-cable-entry {
    display: none;
  }
}

/* =========================================================
   V11 // LOWER CABLE ENTRY MATCHES UPPER ENTRY
========================================================= */

/* Make the lower entry look like the top one:
   visible cable segment + same dark grommet ring. */
.lower-cable-entry {
  top: -9px;
  gap: 28px;
}

.lower-cable-entry span {
  position: relative;
  width: 15px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #050504 0 40%, #130f0d 42% 61%, #4b3b31 63% 79%, #0b0908 80%);
  box-shadow:
    0 -1px 0 rgba(175,119,66,.20),
    0 2px 3px rgba(0,0,0,.72);
}

/* cable stub above the lower grommet */
.lower-cable-entry span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: 9px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 6px 6px 3px 3px;
  background:
    linear-gradient(
      90deg,
      #070706 0%,
      #2a211d 18%,
      #7b4a2b 45%,
      #c0874d 58%,
      #3a2a22 72%,
      #070706 100%
    );
  box-shadow:
    0 0 0 1px rgba(0,0,0,.42),
    0 3px 4px rgba(0,0,0,.55);
}

/* a small shadow cap so the cable feels seated in the bezel */
.lower-cable-entry span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 56%;
  width: 13px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(.2px);
}

/* Slightly reveal the cable endpoints from the harness so they visually
   meet the lower grommets instead of disappearing underneath the console. */
.link-harness {
  margin-bottom: -8px;
}

.harness-svg {
  height: 123px;
}

/* Keep mobile clean */
@media (max-width: 760px) {
  .lower-cable-entry span::before,
  .lower-cable-entry span::after {
    display: none;
  }
}

/* =========================================================
   V12 // LOWER GROMMETS MATCH TOP STYLE
========================================================= */

/* Bottom entries should not have a full visible outline.
   Instead, mimic the top look: dark aperture with only subtle
   side definition and a slight 3D bevel. */
.lower-cable-entry span {
  overflow: visible;
  background:
    radial-gradient(ellipse at center, #040404 0 42%, #0f0c0a 44% 70%, #0a0807 72% 100%);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.62);
}

/* remove the artificial full contour */
.lower-cable-entry span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg,
      rgba(76,60,49,.00) 0%,
      rgba(76,60,49,.65) 12%,
      rgba(76,60,49,.18) 18%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 70%,
      rgba(76,60,49,.18) 82%,
      rgba(76,60,49,.65) 88%,
      rgba(76,60,49,.00) 100%);
  box-shadow: none;
  filter: blur(.1px);
  pointer-events: none;
}

/* keep the small cable stub but soften the seat into the bezel */
.lower-cable-entry span::before {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.38),
    0 2px 4px rgba(0,0,0,.46);
}

/* =========================================================
   V13 // USE THE SAME SVG ENTRY AT TOP AND BOTTOM
========================================================= */

/* The custom lower entry created the illusion of a second cable.
   Hide it and use the same SVG grommet language as the upper entry. */
.lower-cable-entry {
  display: none !important;
}

/* Let the harness SVG visually bridge into the lower monitor. */
.link-harness {
  overflow: visible;
  margin-bottom: -14px;
}

.harness-svg {
  height: 126px;
  z-index: 4;
}

/* Keep the navbar above the wires, but allow the lower part of the SVG
   to sit over the console bezel so the same entry style is visible there. */
.link-harness .site-nav {
  position: relative;
  z-index: 5;
}

.content-columns,
.console {
  position: relative;
  z-index: 2;
}

/* Top and bottom entries should be the same component visually. */
.harness-svg .top-grommet,
.harness-svg .bottom-grommet {
  fill: #0b0908;
  stroke: #40342d;
  stroke-width: 1.6;
}

/* Slightly stronger side definition for the lower entry so it reads like
   the same 3D pass-through hole seen at the top. */
.harness-svg .bottom-grommet {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Extend the visual cable a touch lower so it clearly enters the bottom port. */
.harness-svg .wire-shadow {
  stroke-linecap: round;
}
.harness-svg .wire-main,
.harness-svg .wire-highlight,
.harness-svg .signal-trail,
.harness-svg .signal-core {
  stroke-linecap: round;
}

/* Mobile: keep previous simplified behavior. */
@media (max-width: 760px) {
  .link-harness {
    margin-bottom: 0;
  }
}

/* =========================================================
   V14 // SHORTER CABLE + ONE-TIME UPPER SCREEN BOOT
========================================================= */

.link-harness {
  min-height: 102px;
  margin-bottom: -10px;
  padding: 28px 0 16px;
}

.harness-svg {
  height: 114px;
}

@media (max-width: 760px) {
  .link-harness {
    min-height: auto;
    margin-bottom: 0;
    padding: 12px 0 10px;
  }
}

/* =========================================================
   V16 // UNIFIED LOWER MONITOR TYPOGRAPHY
========================================================= */

/* The lower loading monitor and the real monitor content now use the
   same terminal face. If VT323 lacks a Polish glyph in a browser, the
   fallback stack will only cover that glyph. */
.main-load-overlay .boot-output,
.terminal-screen,
.terminal-block,
.terminal-block p,
.terminal-block li,
.post-card,
.post-card p,
.post-card li,
.post-body,
.post-body p,
.post-body li,
.post-body blockquote,
.guest-entry,
.guest-entry p,
.guest-form input,
.guest-form textarea,
.pagination,
.read-more {
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", "IBM Plex Mono", "Courier New", monospace;
}

/* Article/content text needs to be bigger with VT323, otherwise it feels
   too thin and artificially compressed. */
.terminal-screen {
  font-size: 22px;
}

.terminal-block p,
.terminal-block li,
.post-card p,
.post-card li,
.post-body,
.post-body p,
.post-body li,
.post-body blockquote,
.guest-entry p {
  font-size: 22px;
  line-height: 1.34;
  letter-spacing: .015em;
}

/* Keep system/chrome labels slightly more compact. */
.command,
.file-id,
.post-data,
.log-count,
.open-link,
.tile-code,
.block-title {
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", monospace;
}

.main-load-overlay .boot-output {
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: .045em;
}

/* Forms need a little extra size because VT323 is narrow. */
.guest-form input,
.guest-form textarea {
  font-size: 22px;
  line-height: 1.25;
}

/* Headings stay strongly terminal, but align better with the body now. */
.entry-header h1,
.section-header h1,
.terminal-block h2,
.post-card h2,
.log-header h2 {
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-weight: 400;
}

@media (max-width: 760px) {
  .terminal-screen,
  .terminal-block p,
  .terminal-block li,
  .post-card p,
  .post-card li,
  .post-body,
  .post-body p,
  .post-body li,
  .post-body blockquote,
  .guest-entry p,
  .guest-form input,
  .guest-form textarea {
    font-size: 19px;
  }
}

/* =========================================================
   V17 // BLOG PAGINATION, TRANSMISSIONS, ARCHIVE MAP
========================================================= */

.latest-transmission .open-link {
  display: inline-block;
  margin-top: 12px;
}

.transmission-body {
  margin-top: 10px;
  border-top: 1px dashed rgba(143, 114, 78, .42);
  padding-top: 8px;
}

.archive-pagination {
  margin-top: 14px;
}

.archive-tree {
  border: 1px solid #342b25;
  background:
    linear-gradient(180deg, rgba(12,16,12,.72), rgba(6,7,6,.92)),
    repeating-linear-gradient(0deg, rgba(143, 114, 78, .035) 0 1px, transparent 1px 4px);
  padding: 18px 20px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.42);
}

.archive-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.archive-tree ul ul {
  margin-top: 6px;
  padding-left: 26px;
  border-left: 1px dashed rgba(138, 113, 77, .32);
}

.archive-tree li {
  position: relative;
  margin: 7px 0;
  color: #a9be91;
}

.archive-tree li::before {
  content: "├── ";
  color: #7a6d4b;
}

.archive-tree > ul > li:last-child::before,
.archive-tree li:last-child::before {
  content: "└── ";
}

.archive-tree a,
.archive-tree span {
  color: #b9d29b;
  text-decoration: none;
}

.archive-tree a:hover {
  color: var(--amber);
  text-shadow: 0 0 7px rgba(217,157,69,.45);
}

.archive-tree .branch {
  color: #d09a5f;
}

.transmissions-module .post-card h2,
.archive-map-module .section-header h1 {
  color: var(--phosphor-bright);
}

/* The extra Archive Map button makes the nav wider; keep it compact. */
.site-nav a,
.preview-nav button {
  padding-left: 10px;
  padding-right: 10px;
}

/* =========================================================
   V18 // MOBILE COMPATIBILITY SYSTEM NOTICE
========================================================= */

.mobile-system-notice {
  display: none;
}

@media (max-width: 760px) {
  .mobile-system-notice {
    display: block;
    margin: 0 0 14px;
    padding: 10px 11px;
    border: 1px solid rgba(174, 132, 76, .48);
    background:
      linear-gradient(180deg, rgba(39, 28, 18, .78), rgba(12, 10, 8, .88)),
      repeating-linear-gradient(90deg, rgba(217,157,69,.04) 0 1px, transparent 1px 5px);
    color: #d6b06d;
    box-shadow:
      inset 0 0 18px rgba(0,0,0,.42),
      0 0 12px rgba(217,157,69,.08);
    font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", monospace;
    font-size: 18px;
    line-height: 1.14;
    letter-spacing: .035em;
    text-shadow: 0 0 6px rgba(217,157,69,.22);
  }

  .mobile-system-notice strong {
    display: block;
    color: #f0c577;
    font-weight: 400;
    margin-bottom: 4px;
  }

  .mobile-system-notice span {
    display: block;
  }

  .mobile-system-notice::before {
    content: "[ COMPAT MODE ]";
    display: block;
    float: right;
    color: #8c6d48;
    font-size: 15px;
    letter-spacing: .08em;
    margin-left: 8px;
  }
}

/* =========================================================
   V19 // OPTIONAL POST/UPDATE THUMBNAILS + ABOUT AVATAR
========================================================= */

.has-thumbnail {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.post-thumb,
.transmission-thumb,
.terminal-image,
.avatar-frame {
  border: 1px solid #3e342c;
  background:
    linear-gradient(180deg, rgba(18,22,16,.92), rgba(7,9,7,.96)),
    repeating-linear-gradient(0deg, rgba(174,132,76,.045) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.5),
    0 0 10px rgba(174,132,76,.08);
}

.post-thumb {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.post-thumb img,
.transmission-thumb img,
.terminal-image img,
.avatar-frame img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: saturate(.82) contrast(1.04);
}

.post-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.post-card-copy {
  min-width: 0;
}

.terminal-image {
  margin: 14px 0 18px;
  padding: 7px;
}

.terminal-image figcaption,
.avatar-frame figcaption {
  margin-top: 6px;
  color: #8f7654;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 17px;
  letter-spacing: .06em;
  text-align: center;
}

.latest-transmission {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.latest-transmission .transmission-thumb {
  margin: 0;
  padding: 5px;
}

.latest-transmission .transmission-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about-card {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  border: 1px solid #342b25;
  background:
    linear-gradient(180deg, rgba(12,16,12,.72), rgba(6,7,6,.92));
  padding: 18px;
}

.avatar-frame {
  margin: 0;
  padding: 8px;
}

.about-copy p {
  margin-top: 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 16px 0 0;
}

.profile-grid div {
  border: 1px dashed rgba(143, 118, 84, .35);
  padding: 8px;
  background: rgba(0,0,0,.18);
}

.profile-grid dt {
  color: #d09a5f;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 18px;
}

.profile-grid dd {
  margin: 0;
  color: #b9d29b;
}

@media (max-width: 760px) {
  .has-thumbnail,
  .latest-transmission,
  .about-card,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .post-thumb {
    max-width: 180px;
  }

  .latest-transmission .transmission-thumb,
  .avatar-frame {
    max-width: 220px;
  }
}

/* =========================================================
   V20 // SOUNDTRACK + GAMES TXT ARCHIVES
========================================================= */

.hall-of-fame {
  margin: 16px 0 18px;
  border: 1px solid #3b312a;
  background:
    linear-gradient(180deg, rgba(18,20,14,.84), rgba(7,8,6,.95)),
    repeating-linear-gradient(90deg, rgba(174,132,76,.035) 0 1px, transparent 1px 6px);
  box-shadow: inset 0 0 24px rgba(0,0,0,.48);
  padding: 12px;
  overflow: hidden;
}

.cover-marquee {
  overflow: hidden;
  margin-top: 10px;
  border-top: 1px dashed rgba(143, 118, 84, .35);
  border-bottom: 1px dashed rgba(143, 118, 84, .35);
  padding: 10px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.cover-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: coverMarquee 32s linear infinite;
}

.cover-marquee:hover .cover-track {
  animation-play-state: paused;
}

.cover-tile {
  flex: 0 0 auto;
  width: 96px;
  margin: 0;
  border: 1px solid rgba(132, 103, 71, .55);
  background: #080a07;
  padding: 5px;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.45),
    0 0 8px rgba(174,132,76,.08);
}

.cover-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@keyframes coverMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.archive-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.archive-controls button {
  border: 1px solid #3a3128;
  background: linear-gradient(#17130f, #0b0908);
  color: #d09a5f;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 20px;
  padding: 5px 9px;
  cursor: pointer;
}

.archive-controls button:hover {
  color: #f0c577;
  border-color: #6a5338;
}

.year-archive {
  display: grid;
  gap: 9px;
}

.year-panel {
  border: 1px solid #332b24;
  background:
    linear-gradient(180deg, rgba(13,17,12,.82), rgba(7,8,6,.95));
  box-shadow: inset 0 0 18px rgba(0,0,0,.38);
}

.year-panel summary {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.year-panel summary::-webkit-details-marker {
  display: none;
}

.year-panel summary:hover {
  background: rgba(217,157,69,.055);
}

.year-label {
  color: #f0c577;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 24px;
}

.year-count,
.year-action {
  color: #9eb787;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 20px;
}

.year-action {
  color: #8f7654;
}

.year-panel[open] .year-action {
  color: #d09a5f;
}

.year-panel[open] .year-action::before {
  content: "[ CLOSE ]";
  font-size: 0;
}

.year-panel[open] .year-action {
  font-size: 0;
}

.year-panel[open] .year-action::before {
  font-size: 20px;
}

.plain-entry-list {
  list-style: none;
  margin: 0;
  padding: 4px 13px 13px;
  border-top: 1px dashed rgba(143, 118, 84, .28);
}

.plain-entry-list li {
  position: relative;
  padding: 4px 0 4px 18px;
  color: #b9d29b;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", monospace;
  font-size: 23px;
  line-height: 1.14;
}

.plain-entry-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #d09a5f;
}

@media (max-width: 760px) {
  .cover-tile {
    width: 76px;
  }

  .cover-track {
    animation-duration: 24s;
  }

  .year-panel summary {
    grid-template-columns: 72px 1fr;
  }

  .year-action {
    grid-column: 1 / -1;
  }

  .plain-entry-list li {
    font-size: 20px;
  }
}

/* =========================================================
   V21 // ARCHIVE-FRIENDLY PASS + HOF ORDERING/ASPECT
========================================================= */

/* Soundtrack album covers stay square. */
.soundtrack-module .cover-tile img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Game covers keep their natural box-art proportions. */
.games-module .cover-tile {
  width: 92px;
}

.games-module .cover-tile img {
  aspect-ratio: auto;
  height: 132px;
  object-fit: contain;
  background: #050605;
}

.preservation-link {
  margin-top: 6px;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 17px;
}

.preservation-link a {
  color: #8f7654;
  text-decoration: none;
}

.preservation-link a:hover {
  color: #d09a5f;
}

@media (max-width: 760px) {
  .games-module .cover-tile {
    width: 74px;
  }

  .games-module .cover-tile img {
    height: 106px;
  }
}

/* =========================================================
   V22 // VISIBLE PRESERVATION MODE LINK IN FOOTER/PREVIEW
========================================================= */

.site-footer .preservation-link {
  display: block;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed rgba(143, 118, 84, .35);
}

.site-footer .preservation-link a {
  color: #d09a5f;
  text-decoration: none;
  letter-spacing: .08em;
}

.site-footer .preservation-link a:hover {
  color: #f0c577;
  text-shadow: 0 0 7px rgba(217,157,69,.42);
}

/* =========================================================
   V23 // CLEANER PUBLIC ARCHIVE MAP
========================================================= */

.clean-archive-tree .branch > small {
  display: block;
  margin: 2px 0 4px 28px;
  color: #7f7358;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 18px;
  letter-spacing: .03em;
}

.clean-archive-tree ul ul {
  margin-bottom: 10px;
}

.clean-archive-tree li {
  margin: 9px 0;
}

.clean-archive-tree li li {
  margin: 5px 0;
}

.clean-archive-tree a {
  cursor: pointer;
}

.clean-archive-tree .branch > a {
  color: #d09a5f;
}

.clean-archive-tree .branch > a:hover {
  color: #f0c577;
}

/* =========================================================
   V24 // COMPACT ARCHIVE MAP + RESTORED TOP QUOTE STYLE
========================================================= */

/* Keep Archive Map as a short public index, not a long directory dump. */
.clean-archive-tree .branch > ul {
  max-width: 100%;
}

.clean-archive-tree .branch > small::before {
  content: "// ";
  color: #5f523e;
}

/* Restore the quote as a deliberate terminal caption, not body-copy mono. */
.twain-quote {
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    "Liberation Mono Local",
    "Liberation Mono",
    "Courier New",
    monospace !important;
  font-size: clamp(18px, 1.95vw, 24px) !important;
  line-height: 1.02 !important;
  letter-spacing: .045em !important;
  color: #d4e5a5 !important;
  text-shadow:
    0 0 5px rgba(174, 207, 137, .34),
    0 0 14px rgba(174, 207, 137, .12) !important;
}

.twain-credit {
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    monospace !important;
  font-size: 20px !important;
  letter-spacing: .06em !important;
  color: #a98d5d !important;
}

@media (max-width: 760px) {
  .twain-quote {
    font-size: 17px !important;
  }
}

/* =========================================================
   V26 // ABOUT PAGE DIACRITICS WITHOUT LOSING TERMINAL LOOK
========================================================= */

/*
  V25 fixed Polish characters too aggressively and made ABOUT ME look too standard.
  This restores the same terminal-style text feeling used elsewhere.
  If a local VT323 file lacks Polish glyphs, the browser can still fall back per glyph.
*/

.about-copy,
.about-copy p,
.about-copy li,
.profile-grid dd {
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    "Liberation Mono Local",
    "Liberation Mono",
    "IBM Plex Mono",
    "Courier New",
    monospace !important;
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: .015em;
}

.about-copy code {
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    monospace !important;
  font-size: .95em;
  color: #d09a5f;
}

.about-module .block-title,
.profile-grid dt,
.avatar-frame figcaption {
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    monospace !important;
}

/* =========================================================
   V27 // BLOG/UPDATE CARD WITHOUT THUMBNAIL FIX
========================================================= */

/*
  Cards without image metadata should not keep the thumbnail grid.
  Otherwise the text starts in the second column and leaves an empty hole.
*/

.post-card.no-thumbnail {
  display: block;
}

.post-card.no-thumbnail .post-card-copy {
  width: 100%;
}

/* =========================================================
   CURRENT // PAGINATION
   Cleaned from the old V28 block.
========================================================= */

.pagination-label {
  color: #8f7654;
  font-family:
    "VT323 Local",
    "VT323",
    "DejaVu Sans Mono Local",
    "DejaVu Sans Mono",
    monospace;
  letter-spacing: .08em;
  margin: 14px 0 4px;
}

.pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.pagination a,
.pagination span {
  border: 1px solid #3a3128;
  background: linear-gradient(#17130f, #0b0908);
  color: #d09a5f;
  text-decoration: none;
  padding: 4px 8px;
}

.pagination a:hover {
  color: #f0c577;
  border-color: #6a5338;
}

/* =========================================================
   CURRENT // DESKTOP LOWER-SCREEN TYPOGRAPHY
   Replaces old V28 + V29 + V30 iterative blocks.
   Mobile is intentionally untouched.
========================================================= */

@media (min-width: 761px) {
  .main-monitor .print-surface,
  .main-monitor .module,
  .main-monitor .module p,
  .main-monitor .post-body,
  .main-monitor .post-body p,
  .main-monitor .transmission-body,
  .main-monitor .transmission-body p,
  .main-monitor .plain-entry-list li,
  .main-monitor .archive-tree,
  .main-monitor .archive-tree li,
  .main-monitor .about-copy,
  .main-monitor .about-copy p,
  .main-monitor .profile-grid dd {
    font-size: 17px;
    line-height: 1.05;
  }

  .main-monitor .section-header h1 {
    font-size: clamp(28px, 3.35vw, 43px);
    line-height: 0.98;
  }

  .main-monitor .post-card h2,
  .main-monitor .latest-transmission h2 {
    font-size: 23px;
    line-height: 1.0;
  }

  .main-monitor .post-data,
  .main-monitor .block-title,
  .main-monitor .file-id,
  .main-monitor .signature,
  .main-monitor .command,
  .main-monitor .year-count,
  .main-monitor .year-action,
  .main-monitor .pagination,
  .main-monitor .pagination-label,
  .main-monitor .open-link {
    font-size: 16px;
    line-height: 1.03;
  }

  .main-monitor .year-label {
    font-size: 19px;
  }

  .main-monitor .profile-grid dt,
  .main-monitor .terminal-image figcaption,
  .main-monitor .avatar-frame figcaption {
    font-size: 15px;
  }

  .main-monitor .transmission-card,
  .main-monitor .post-card {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .main-monitor .transmission-body {
    margin-top: 0.35em;
    line-height: 1.04;
  }

  .main-monitor .transmission-body p {
    margin-top: 0.18em;
    margin-bottom: 0.18em;
    line-height: 1.04;
  }

  .main-monitor .transmission-body p + p {
    margin-top: 0.28em;
  }

  .main-monitor .transmission-card > .post-card-copy > p {
    margin-top: 0.22em;
    margin-bottom: 0.22em;
  }

  .main-monitor .post-body p {
    margin-top: 0.28em;
    margin-bottom: 0.28em;
    line-height: 1.05;
  }

  .main-monitor .post-body p + p {
    margin-top: 0.38em;
  }
}

/* =========================================================
   CURRENT // HOMEPAGE LATEST TRANSMISSION
   Final compact layout. Fixes old empty-thumbnail/grid wrapping issue.
========================================================= */

@media (min-width: 761px) {
  .latest-transmission,
  .latest-transmission.no-thumbnail {
    display: block !important;
    grid-template-columns: none !important;
    padding: 10px 14px !important;
  }

  .latest-transmission .transmission-copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .latest-transmission .block-title {
    display: block;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .latest-transmission h2 {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 21px !important;
    line-height: 1.02 !important;
    margin: 0 0 8px !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    color: #d4e5a5;
  }

  .latest-transmission p {
    font-size: 16px !important;
    line-height: 1.08 !important;
    margin: 0 0 8px !important;
    max-width: 60ch;
  }

  .latest-transmission .open-link {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap;
  }
}

/* =========================================================
   CURRENT // HALL OF FAME COVERS
   Softer effect + consistent cover sizing.
========================================================= */

.soundtrack-module .hall-of-fame,
.games-module .hall-of-fame {
  background:
    linear-gradient(180deg, rgba(18,20,14,.82), rgba(7,8,6,.94));
}

.soundtrack-module .cover-tile,
.games-module .cover-tile {
  background: rgba(5, 6, 5, .92);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.35),
    0 0 6px rgba(174,132,76,.06);
}

.soundtrack-module .cover-tile img,
.games-module .cover-tile img {
  filter: saturate(.95) contrast(1.02);
}

.soundtrack-module .cover-marquee,
.games-module .cover-marquee {
  mask-image: none;
}

@media (min-width: 761px) {
  .soundtrack-module .cover-tile {
    width: 132px;
    padding: 6px;
  }

  .soundtrack-module .cover-tile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
  }

  .games-module .cover-tile {
    width: 118px;
    padding: 6px;
  }

  .games-module .cover-tile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: top center;
    background: #050605;
  }
}

/* =========================================================
   OPTION A FIX // ACTUAL DOM CLASSES
   Use this at the very end of style.css.
   Does not touch upper screen, navbar or footer.
========================================================= */

/* ---------------------------------------------------------
   1) Soundtrack/Games: expanded list entries only.
   Year headers are restored/kept larger than the entries.
--------------------------------------------------------- */

@media (min-width: 761px) {
  .terminal-screen .soundtrack-module .year-panel summary .year-label,
  .terminal-screen .games-module .year-panel summary .year-label {
    font-size: 23px !important;
    line-height: 1 !important;
  }

  .terminal-screen .soundtrack-module .year-panel summary .year-count,
  .terminal-screen .soundtrack-module .year-panel summary .year-action,
  .terminal-screen .games-module .year-panel summary .year-count,
  .terminal-screen .games-module .year-panel summary .year-action {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .terminal-screen .soundtrack-module .year-panel .plain-entry-list li,
  .terminal-screen .games-module .year-panel .plain-entry-list li {
    font-size: 17px !important;
    line-height: 1.08 !important;
    letter-spacing: .015em !important;
  }
}

/* ---------------------------------------------------------
   2) HOME / index.php:
   Latest Transmission stays wide, but behaves visually like
   a large module-tile, matching Hellsplog / Guestbook / Archive Map.
   Actual home class is .page-home, not .home-module.
--------------------------------------------------------- */

@media (min-width: 761px) {
  .terminal-screen .page-home .latest-transmission {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    padding: 13px !important;
    margin: 0 0 12px !important;
    color: var(--phosphor) !important;
    text-decoration: none !important;
    border: 1px solid #48553c !important;
    background: #0b120e !important;
    box-shadow: none !important;
  }

  .terminal-screen .page-home .latest-transmission .transmission-thumb {
    display: none !important;
  }

  .terminal-screen .page-home .latest-transmission .transmission-copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .terminal-screen .page-home .latest-transmission .block-title {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 9px !important;
    color: var(--amber) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    white-space: normal !important;
  }

  .terminal-screen .page-home .latest-transmission h2 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 5px !important;
    color: var(--phosphor-bright) !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .terminal-screen .page-home .latest-transmission p {
    display: block !important;
    margin: 0 0 5px !important;
    max-width: none !important;
    color: #76876b !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .terminal-screen .page-home .latest-transmission .open-link {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    color: var(--phosphor-bright) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .terminal-screen .page-home .latest-transmission .open-link:hover {
    color: var(--amber) !important;
  }
}

/* ---------------------------------------------------------
   3) HOME grid tiles:
   Keep Hellsplog / Guestbook / Archive Map as the visual reference.
   This block only makes their typography explicit, so Latest can match it.
--------------------------------------------------------- */

@media (min-width: 761px) {
  .terminal-screen .page-home .module-tile {
    padding: 13px !important;
    border: 1px solid #48553c !important;
    background: #0b120e !important;
  }

  .terminal-screen .page-home .module-tile .tile-code {
    color: var(--amber) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin-bottom: 9px !important;
    letter-spacing: .07em !important;
  }

  .terminal-screen .page-home .module-tile strong {
    color: var(--phosphor-bright) !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  .terminal-screen .page-home .module-tile small {
    color: #76876b !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
  }
}

/* ---------------------------------------------------------
   4) Blog list adopts Updates/Transmissions card rhythm.
   Updates page remains the reference.
--------------------------------------------------------- */

@media (min-width: 761px) {
  .terminal-screen .post-list {
    display: grid;
    gap: 14px;
  }

  .terminal-screen .post-card {
    padding: 11px 13px 12px;
    border: 1px solid #44503b;
    background: rgba(8,14,10,.52);
  }

  .terminal-screen .post-card.has-thumbnail {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
  }

  .terminal-screen .post-card.no-thumbnail {
    display: block;
  }

  .terminal-screen .post-data {
    margin: 0 0 7px;
    color: var(--amber);
    font-size: 16px !important;
    line-height: 1.03 !important;
    letter-spacing: .08em;
  }

  .terminal-screen .post-card h2 {
    margin: 0 0 7px;
    color: var(--phosphor-bright);
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400;
  }

  .terminal-screen .post-card h2 a {
    color: var(--phosphor-bright);
    text-decoration: none;
  }

  .terminal-screen .post-card h2 a:hover {
    color: var(--amber);
  }

  .terminal-screen .post-card p {
    margin-top: 0.22em;
    margin-bottom: 0.22em;
    color: var(--phosphor);
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  .terminal-screen .post-card .open-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 16px !important;
    line-height: 1.03 !important;
    white-space: nowrap;
  }

  .terminal-screen .transmission-body {
    margin-top: 0.55em;
    border-top: 1px dashed rgba(143, 114, 78, .42);
    padding-top: 0.45em;
  }

  .terminal-screen .transmission-body p {
    margin-top: 0.18em;
    margin-bottom: 0.18em;
    line-height: 1.08 !important;
  }
}
/* Latest Transmission link should look like module-tile small text */

@media (min-width: 761px) {
  .terminal-screen .page-home .latest-transmission .open-link {
    display: inline-block !important;
    margin-top: 0 !important;
    color: #76876b !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .terminal-screen .page-home .latest-transmission .open-link:hover {
    color: var(--amber) !important;
    text-shadow: 0 0 7px rgba(217,157,69,.45);
  }
}
/* WEBRACK // right-side buttons in two columns */

@media (min-width: 761px) {
  .content-columns {
    grid-template-columns: minmax(0, 1fr) 204px;
  }

  .button-rack.right {
    width: 204px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .button-rack.right .webrack-buttons {
    display: grid;
    grid-template-columns: repeat(2, 86px);
    gap: 6px;
    justify-content: center;
    align-items: start;
  }

  .button-rack.right .webrack-buttons img {
    display: block;
    width: 86px !important;
    height: 34px !important;
    max-width: none !important;
    object-fit: fill;
    image-rendering: pixelated;
  }
}
/* WEBRACK // bottom software buttons marquee */

.software-marquee-tray {
  overflow: hidden;
}

.software-marquee {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.software-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: softwareMarquee 32s linear infinite;
}

.software-marquee:hover .software-track {
  animation-play-state: paused;
}

.software-track img {
  display: block;
  flex: 0 0 auto;
  width: 86px !important;
  height: 34px !important;
  max-width: none !important;
  object-fit: fill;
  image-rendering: pixelated;
  border: 1px solid rgba(130,104,77,.33);
}

@keyframes softwareMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 760px) {
  .button-rack.right .webrack-buttons {
    display: grid;
    grid-template-columns: repeat(2, 86px);
    gap: 6px;
    justify-content: center;
  }

  .button-rack.right .webrack-buttons img {
    width: 86px !important;
    height: 34px !important;
    max-width: none !important;
    object-fit: fill;
    image-rendering: pixelated;
  }
}
.content-columns {
  grid-template-columns: minmax(0, 1fr) 198px;
}

.button-rack.right {
  width: 198px;
}
/* =========================================================
   CURRENT // DECADE ARCHIVE FOR SOUNDTRACK
   Replaces old duplicated archive-decade/txt-year-section overrides.
   Uses the original .year-panel visual scale for the new decade renderer.
========================================================= */

.decade-archive {
  display: grid;
  gap: 9px;
}

.archive-decade,
.txt-year-section {
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid #332b24;
  background:
    linear-gradient(180deg, rgba(13,17,12,.82), rgba(7,8,6,.95));
  box-shadow: inset 0 0 18px rgba(0,0,0,.38);
}

.archive-decade-current {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.archive-decade-header,
.archive-decade-current > summary {
  display: none;
}

.archive-decade-years {
  display: grid;
  gap: 9px;
  margin-top: 0;
  padding: 0;
}

.archive-decade > summary,
.txt-year-section > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
}

.archive-decade > summary::-webkit-details-marker,
.txt-year-section > summary::-webkit-details-marker {
  display: none;
}

.archive-decade > summary::before,
.txt-year-section > summary::before {
  content: none !important;
}

.archive-decade > summary:hover,
.txt-year-section > summary:hover {
  background: rgba(217,157,69,.055);
}

.archive-decade > summary strong,
.txt-year-section > summary strong {
  color: #f0c577;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.archive-decade-tracks,
.archive-decade-years-count,
.archive-decade-count,
.txt-year-section > summary span {
  color: #9eb787;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.archive-decade-years-count,
.archive-decade-count {
  color: #76876b;
}

.archive-decade > summary::after,
.txt-year-section > summary::after {
  content: "[ OPEN ]";
  color: #8f7654;
  justify-self: end;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", monospace;
  font-size: 20px;
  line-height: 1;
}

.archive-decade[open] > summary::after,
.txt-year-section[open] > summary::after {
  content: "[ CLOSE ]";
  color: #d09a5f;
}

.txt-year-items {
  list-style: none;
  margin: 0;
  padding: 4px 13px 13px;
  border-top: 1px dashed rgba(143, 118, 84, .28);
}

.txt-year-items li {
  position: relative;
  padding: 4px 0 4px 18px;
  color: #b9d29b;
  font-family: "VT323 Local", "VT323", "DejaVu Sans Mono Local", "DejaVu Sans Mono", "Liberation Mono Local", "Liberation Mono", monospace;
  font-size: 23px;
  line-height: 1.14;
}

.txt-year-items li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #d09a5f;
}

@media (max-width: 760px) {
  .archive-decade > summary,
  .txt-year-section > summary {
    grid-template-columns: 72px 1fr;
  }

  .archive-decade > summary::after,
  .txt-year-section > summary::after {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .txt-year-items li {
    font-size: 20px;
  }
}
/* Fix decade rows: keep [ OPEN ] on the right side */

.soundtrack-module .archive-decade-collapsed > summary {
  display: grid;
  grid-template-columns: 100px 150px 1fr 90px;
  align-items: center;
  gap: 12px;
}

.soundtrack-module .archive-decade-collapsed > summary strong {
  grid-column: 1;
  grid-row: 1;
}

.soundtrack-module .archive-decade-collapsed .archive-decade-tracks {
  grid-column: 2;
  grid-row: 1;
}

.soundtrack-module .archive-decade-collapsed .archive-decade-years-count,
.soundtrack-module .archive-decade-collapsed .archive-decade-count {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.soundtrack-module .archive-decade-collapsed > summary::after {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}
.soundtrack-module .archive-decade-years-count {
  display: none;
}

.soundtrack-module .archive-decade-collapsed > summary {
  grid-template-columns: 100px 150px 1fr 90px;
}
.soundtrack-module .archive-decade-collapsed[open] > .archive-decade-years {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(143, 118, 84, .28);
}
/* Unified soundtrack archive spacing */

.soundtrack-module .decade-archive,
.soundtrack-module .archive-decade-years {
  gap: 10px;
}

.soundtrack-module .txt-year-section,
.soundtrack-module .archive-decade {
  margin: 0;
}

.soundtrack-module .archive-decade-collapsed[open] > .archive-decade-years {
  margin-top: 10px;
}

/* =========================================================
   BLOG MARKDOWN IMAGES
   Supports: ![Alt](assets/media/blog/image.jpg "Optional caption")
========================================================= */

.post-body .md-image {
  display: table;
  width: auto;
  max-width: 100%;

  margin: 22px auto;
  padding: 6px;

  border: 1px solid rgba(160, 104, 53, 0.45);
  background: rgba(2, 8, 5, 0.78);
}

.post-body .md-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;

  object-fit: contain;
  image-rendering: auto;
}

.post-body .md-image figcaption {
  display: table-caption;
  caption-side: bottom;

  margin-top: 7px;
  color: #8f7654;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 760px) {
  .post-body .md-image {
    margin: 18px auto;
    padding: 5px;
  }

  .post-body .md-image img {
    max-height: none;
  }

  .post-body .md-image figcaption {
    font-size: 18px;
  }
}
.node-status.terminal-idle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0;

  text-align: center;
  color: #789765;
}

.node-status.terminal-idle .terminal-prompt {
  display: inline-block;
}

.node-status.terminal-idle .terminal-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: terminalCursorBlink .85s steps(1, end) infinite;
}

@keyframes terminalCursorBlink {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}
/* =========================================================
   V24 // COMPACT TEXT FOOTER
   Final footer override. Keep at the very end of style.css.
========================================================= */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  width: 100%;
  min-height: 0;
  height: auto;

  margin-top: 6px;
  padding: 5px 8px 4px;

  border: 1px solid #362c27;
  background: #0d0b0a;
  color: #ae8452;

  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: .04em;
}

.site-footer > * {
  margin-top: 0;
  margin-bottom: 0;
}

.site-footer p,
.site-footer .footer-text {
  margin: 0;
  line-height: 1.05;
}

.site-footer .preservation-link {
  flex-basis: 100%;
  margin-top: 4px;
  padding-top: 4px;
}
/* =========================================================
   footer easteregg
========================================================= */
.footer-easteregg {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;

  font-size: 0;
  line-height: 0;

  background: #1b1512;
  border: 1px solid #4a3322;
  box-shadow: inset 1px 1px 0 rgba(255, 170, 80, 0.25);

  vertical-align: middle;
  opacity: 0.55;
}

.footer-easteregg:hover,
.footer-easteregg:focus {
  background: #ae8452;
  border-color: #f0b35f;
  opacity: 1;
}

.archive-tree .archive-tool > a {
  color: #d6a15f;
}

.archive-tree .archive-tool small {
  color: #8f7654;
}

.archive-tree .archive-tool ul a {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;

  border: 1px solid #4a3322;
  background: #15100d;
  color: #c89557;

  font-size: 0.95em;
  text-decoration: none;
}

.archive-tree .archive-tool ul a:hover,
.archive-tree .archive-tool ul a:focus {
  border-color: #ae8452;
  background: #211711;
  color: #f0b35f;
}


/* =========================================================
   FINAL // WEBRACK BUTTON NORMALIZER
   Locks all 86x34 web buttons to the same visual box.
   Fixes files with unusual native canvas/proportions.
========================================================= */

@media (min-width: 761px) {
  .content-columns {
    grid-template-columns: minmax(0, 1fr) 198px;
  }

  .button-rack.right {
    width: 198px;
  }

  .button-rack.right .webrack-buttons {
    display: grid;
    grid-template-columns: repeat(2, 86px);
    gap: 6px;
    justify-content: center;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .button-rack.right .webrack-buttons {
    display: grid;
    grid-template-columns: repeat(2, 86px);
    gap: 6px;
    justify-content: center;
    align-items: start;
  }
}

.button-rack.right .webrack-buttons img,
.button-rack.right .webrack-software img,
.software-track img {
  display: block !important;
  flex: 0 0 auto !important;

  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;

  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: fill !important;
  box-sizing: border-box !important;
  image-rendering: pixelated !important;
}

/* =========================================================
   FINAL // CRT EFFECT ONLY INSIDE SCREENS
   Remove global page-wide noise from buttons/racks/layout.
========================================================= */

/* Kill global overlays that affect buttons, footer and page chrome */
body::before,
.page-noise {
  display: none !important;
}

/* Keep screen-specific CRT layering only inside actual displays */
.terminal-screen,
.aux-screen {
  position: relative;
  isolation: isolate;
}

/* Optional extra scanlines only on screens */
.terminal-screen::before,
.aux-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(187, 219, 140, .045) 0 1px,
      transparent 1px 3px
    );

  mix-blend-mode: screen;
  opacity: .75;
}
/* =========================================================
   ABOUT // AVATAR + PERSONAL BANNER
========================================================= */

.about-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  min-width: 0;
}

.about-archive-banner {
  display: block;
  width: 100%;
  max-width: 230px;

  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;
}

.about-archive-banner img {
  display: block;
  width: 100%;
  height: auto;

  border: 1px solid #3b3028;
  background: #090706;
  padding: 3px;

  box-sizing: border-box;
}
/* =========================================================
   WEBRACK // CLICKABLE BUTTON LINKS
========================================================= */

.button-rack.right .webrack-buttons a,
.software-track a {
  display: block;
  flex: 0 0 auto;

  width: 86px;
  height: 34px;

  margin: 0;
  padding: 0;

  text-decoration: none;
}

.button-rack.right .webrack-buttons a img,
.software-track a img {
  display: block;
}
/* =========================================================
   GUESTBOOK // SUBMIT COOLDOWN
========================================================= */

.guest-form button[disabled],
.guest-form button.is-sending {
  opacity: .65;
  cursor: wait;
  filter: grayscale(.25);
}
/* =========================================================
   HOME // TILE PREVIEWS MATCH LATEST TRANSMISSION
========================================================= */

.terminal-grid .module-tile.module-tile-preview {
  display: block;

  padding: 11px 13px 10px;

  border: 1px solid rgba(174, 132, 82, 0.45);
  background: rgba(3, 14, 9, 0.72);

  text-decoration: none;
}

.terminal-grid .module-tile.module-tile-preview .tile-code {
  display: block;

  margin: 0 0 8px;

  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 18px;
  line-height: 1;

  color: #d2a04f;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-grid .module-tile.module-tile-preview .tile-preview-line {
  display: block;

  margin: 0 0 9px;

  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 24px;
  line-height: 1.05;

  color: #d8e7b1;
  letter-spacing: 0.02em;
}

.terminal-grid .module-tile.module-tile-preview .tile-preview-line span {
  color: #8f7654;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.terminal-grid .module-tile.module-tile-preview .tile-action {
  display: block;

  margin: 0;

  font-family: "VT323 Local", "VT323", "Courier New", monospace;
  font-size: 18px;
  line-height: 1;

  color: #7f936a;
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.terminal-grid .module-tile.module-tile-preview .tile-action::before {
  content: "[ ";
}

.terminal-grid .module-tile.module-tile-preview .tile-action::after {
  content: " ]";
}

.terminal-grid .module-tile.module-tile-preview:hover .tile-action,
.terminal-grid .module-tile.module-tile-preview:focus .tile-action {
  color: #b9d08e;
}
/* =========================================================
   HOME // MINI TRANSMISSION TILES
   Blog + Guestbook use same typography as latest transmission.
========================================================= */

.terminal-screen .page-home .home-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.terminal-screen .page-home .home-mini-transmission {
  display: block !important;

  margin: 0 !important;
  padding: 12px 13px 13px !important;

  border: 1px solid rgba(174, 132, 82, 0.38) !important;
  background: rgba(3, 14, 9, 0.72) !important;

  text-decoration: none !important;
}

.terminal-screen .page-home .home-mini-transmission .transmission-copy {
  display: block !important;
  min-width: 0 !important;
}

.terminal-screen .page-home .home-mini-transmission .transmission-titleline {
  margin: 0 0 8px !important;
}

.terminal-screen .page-home .home-mini-transmission h2 {
  margin: 0 0 10px !important;
}

.terminal-screen .page-home .home-mini-transmission .open-link {
  display: inline-block !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* hover całego kafelka ma działać jak hover linka */
.terminal-screen .page-home .home-mini-transmission:hover .open-link,
.terminal-screen .page-home .home-mini-transmission:focus .open-link,
.terminal-screen .page-home .home-mini-transmission:focus-visible .open-link {
  color: var(--amber) !important;
  text-shadow: 0 0 7px rgba(217,157,69,.45) !important;
}

@media (max-width: 760px) {
  .terminal-screen .page-home .home-mini-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HOME // MINI TILE EXCERPT COLOR
========================================================= */

.terminal-screen .page-home .home-mini-transmission .home-mini-excerpt,
.terminal-screen .page-home .home-mini-transmission:hover .home-mini-excerpt,
.terminal-screen .page-home .home-mini-transmission:focus .home-mini-excerpt,
.terminal-screen .page-home .home-mini-transmission:focus-visible .home-mini-excerpt {
  display: block !important;

  margin: 0 0 10px !important;

  font-family: "VT323 Local", "VT323", "Courier New", monospace !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;

  color: #8f7654 !important;

  letter-spacing: 0.03em !important;
  text-transform: none !important;
  text-shadow: none !important;
}