/* ============================================================
   ELIZA (1966) · Critical Code Studies · ELIZA Archaeology
   Aesthetic: the IBM 7094 / CTSS console. A darkened machine
   room; warm line-printer paper white on console charcoal; a
   bank of indicator lamps in the 7094 palette (the book-cover
   coral doubles as the lamp red); a teletype where the person
   types lower case and ELIZA answers in CAPITALS.
   Companion to the CCS readings of SHRDLU (1968-70) and
   Spacewar! (1962); the component system is shared with those.
   ============================================================ */

:root {
  --bg:        #14161b;          /* console charcoal (component "dark" token) */
  --bg-2:      #1b1e25;
  --steel:     #464f59;          /* the consistent 7094 steel page background */
  --steel-head:#353c44;          /* slightly darker steel for the sticky header */
  --panel:     rgba(232, 228, 218, 0.035);
  --line:      rgba(232, 228, 218, 0.18);
  --line-soft: rgba(232, 228, 218, 0.10);
  --ink:       #e8e3d7;          /* body text, line-printer white */
  --ink-dim:   #9a9c95;
  --bright:    #faf7ef;          /* headings */
  /* the IBM 7094 console-lamp palette; the red is the book cover coral */
  --lamp-red:   #e1542e;
  --lamp-amber: #f0a83a;
  --lamp-green: #59c08a;
  --lamp-blue:  #4d92e0;
  --lamp-white: #f4efe3;
  --beam:      #ec6a42;          /* default link / accent (coral) */
  --eliza:     #ef6f44;          /* the machine's voice (coral phosphor) */
  --you:       #efb44e;          /* the person's voice (amber) */
  --paper:     #d9cfbc;          /* teletype paper */
  --glow:      0 0 6px rgba(236, 106, 66, 0.5), 0 0 14px rgba(236, 106, 66, 0.22);
  --glow-soft: 0 0 5px rgba(250, 247, 239, 0.25);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --wrap: 920px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(232,228,218,0.020) 1px, transparent 1px) 0 0 / 100% 2.4rem,
    var(--steel);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint vignette */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: radial-gradient(ellipse 92% 78% at 50% 42%, transparent 58%, rgba(0,0,0,0.5) 100%);
}

.wrap { width: min(var(--wrap), 92vw); margin: 0 auto; }
section[id], [id]:target { scroll-margin-top: 92px; }

/* ---------- links ---------- */
a { color: var(--beam); text-decoration: none; }
a:hover { color: var(--bright); text-shadow: var(--glow); }
.content a { border-bottom: 1px solid var(--line); }
.content a:hover { border-bottom-color: var(--beam); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 8000;
  backdrop-filter: blur(3px);
  background: linear-gradient(to bottom, rgba(53,60,68,0.95), rgba(53,60,68,0.7));
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 1rem; position: relative;
}
.brand { display: flex; align-items: center; gap: 0.7rem; border: 0 !important; }
.brand > svg { width: 30px; height: 30px; }
.brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32rem; line-height: 1.1; }
.brand-text { font-family: var(--mono); font-weight: 800; letter-spacing: 3px; color: var(--bright); font-size: 1.05rem; display: flex; }
.brand-wordmark { display: block; height: 0.92rem; width: auto; color: var(--bright); }
.brand-tagline { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; color: var(--ink-dim); text-transform: uppercase; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--line); color: var(--beam);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 13px; border-radius: 3px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--beam); color: var(--bright); text-shadow: var(--glow); }
.nav-toggle .bars { font-size: 0.95rem; line-height: 1; }

/* ---------- nav: mobile-first hamburger panel ---------- */
.site-nav {
  position: absolute; top: calc(100% + 7px); right: 0;
  display: none; flex-direction: column;
  min-width: 220px; max-width: min(300px, 90vw); padding: 0.4rem 0;
  background: rgba(23,26,32,0.985); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.8px; text-transform: uppercase;
}
.site-nav.open { display: flex; }
.nav-group { position: static; display: flex; flex-direction: column; }
.nav-top {
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ink-dim); padding: 0.6rem 1.2rem; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%;
}
.nav-top:hover, .nav-top:focus-visible { color: var(--beam); text-shadow: var(--glow); background: rgba(236,106,66,0.08); outline: none; }
.nav-top .caret { font-size: 0.7em; opacity: 0.7; transition: transform 0.15s ease; }
.nav-top[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-menu { display: none; flex-direction: column; background: rgba(236,106,66,0.05); }
.nav-menu.open { display: flex; }
.nav-menu a { color: var(--ink-dim); border: 0; padding: 0.5rem 1.2rem 0.5rem 2rem; text-decoration: none; }
.nav-menu a:hover { color: var(--beam); text-shadow: var(--glow); background: rgba(236,106,66,0.08); }

/* ---------- nav: desktop horizontal bar ---------- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 0.1rem;
    min-width: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .nav-group { position: relative; display: inline-block; }
  .nav-top { width: auto; justify-content: center; padding: 0.55rem 0.7rem; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; margin-top: 0; min-width: 190px;
    background: rgba(23,26,32,0.985); border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6); padding: 0.3rem 0; z-index: 9000;
  }
  .nav-group:focus-within .nav-menu, .nav-menu.open { display: flex; }
  .nav-menu a { padding: 0.5rem 1.1rem; white-space: nowrap; }
  .site-nav > .nav-group:last-of-type .nav-menu { left: auto; right: 0; }
}

/* ---------- hero: the teletype + lamp console ---------- */
.hero { position: relative; min-height: 84vh; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
/* the hero as a 1960s desk: the recovered source on a sheet of fanfold paper, behind the console panel */
.hero-paper { position: absolute; inset: 0; z-index: 0; background: var(--paper); overflow: hidden; opacity: 0.13; }
/* the sprocket holes live on the scrolling layer, so the whole sheet feeds up with the code */
.hero-source {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: rgba(20,13,9,0.42);
  white-space: pre; margin: 0; padding: 1.6rem 2.9rem;
  background-image: radial-gradient(circle at center, var(--bg) 0 3.4px, rgba(20,13,9,0.6) 3.4px 4.3px, transparent 4.6px), radial-gradient(circle at center, var(--bg) 0 3.4px, rgba(20,13,9,0.6) 3.4px 4.3px, transparent 4.6px);
  background-size: 22px 26px, 22px 26px; background-repeat: repeat-y, repeat-y; background-position: 0 0, 100% 0;
  animation: heroScroll 900s linear infinite;
}
@keyframes heroScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-source { animation: none; } }
.hero-inner { position: relative; z-index: 2; padding: 2.4vh 0; width: 100%; }
/* the hero content sits in a darkened panel so it reads cleanly over the drifting
   source code; on wider screens it is anchored to the right, leaving the recovered
   source visible (and unobscured) on the left. */
.hero-panel {
  background: linear-gradient(135deg, rgba(18,20,25,0.62), rgba(18,20,25,0.40));
  border: 1px solid var(--line-soft); border-radius: 9px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.3rem, 3.5vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.4rem);
  backdrop-filter: blur(3px); max-width: 660px; margin: 0 auto;
}
.hero-panel .boot { margin-top: 0; margin-bottom: 0.9rem; }

/* --- the hero panel as an IBM 7094 console face (vector, no photos) --- */
.hero-panel.console {
  background: linear-gradient(157deg, #4d5862 0%, #3c454e 50%, #333b43 100%);
  border: 3px solid #c6bca3; border-radius: 7px; padding: 0; max-width: 690px;
  backdrop-filter: none; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10),
              inset 0 0 26px rgba(0,0,0,0.45), 0 20px 55px rgba(0,0,0,0.5);
}
.console-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
  padding: 0.55rem 0.95rem; background: linear-gradient(#23282e, #1a1f24);
  border-bottom: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
}
.lamp-row { display: flex; gap: 7px; }
.lamp { width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2f35, #14171b 70%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.04); }
.lamp.on { background: radial-gradient(circle at 40% 35%, #ffd27a, #e8862f 65%, #b5571a 100%);
  box-shadow: 0 0 6px rgba(239,140,60,0.8), inset 0 0 1px #fff; }
.lamp.on.amber { background: radial-gradient(circle at 40% 35%, #ffe6a0, #f0b53a 65%, #b5851a 100%);
  box-shadow: 0 0 6px rgba(240,181,58,0.8); }
.lamp.on.red { background: radial-gradient(circle at 40% 35%, #ff9a7a, #ef4a2a 65%, #b51a1a 100%);
  box-shadow: 0 0 6px rgba(239,74,42,0.85); }
.lamp.on:nth-child(1)  { animation: lampFlick 3.7s steps(1) infinite; }
.lamp.on:nth-child(7)  { animation: lampFlick 2.9s steps(1) infinite 0.6s; }
.lamp.on:nth-child(11) { animation: lampFlick 4.3s steps(1) infinite 1.1s; }
@keyframes lampFlick { 0%,92%,100% { opacity: 1; } 94% { opacity: 0.25; } 96% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lamp { animation: none !important; } }
/* nameplate: cream outlined "7094" + engraved caps, like the console rail */
.nameplate { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.np-num {
  color: transparent; -webkit-text-stroke: 1.3px #e6dfc9;
  font-family: var(--mono); font-weight: 800; font-size: 1.2rem; letter-spacing: 4px; line-height: 1;
}
.np-sys {
  color: #d8d0bd; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 3px; text-transform: uppercase;
}
/* console face: alternating grey vertical stripes, like the indicator panels */
.console-face {
  padding: clamp(1rem,2vw,1.35rem) clamp(1.3rem,3.5vw,2.6rem) clamp(1.1rem,2.4vw,1.5rem);
  background: repeating-linear-gradient(90deg, #39424b 0 60px, #434d57 60px 120px);
}
.console-face .boot { margin-top: 0; margin-bottom: 0.55rem; }
.console-top { display: flex; gap: 1.4rem; align-items: stretch; }
.face-titles { flex: 1 1 auto; min-width: 0; }
.face-titles .tagline { margin-bottom: 0; }
/* the right-hand control column: red indicator, cream label strip, lit button, switches */
.control-column {
  flex: 0 0 74px; display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: #d6d0be; border: 1px solid #b3ab92; border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.45);
}
.ctl {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 6px/1.18 var(--mono); letter-spacing: 0.3px; padding: 2px;
  border: 1px solid rgba(0,0,0,0.35); border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ctl.power    { background: linear-gradient(#e85a2a, #c5421a); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
.ctl.power.on { background: linear-gradient(#ff7d31, #e0531c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 10px rgba(255,110,40,0.7);
  animation: litPulse 4s ease-in-out infinite; }
.ctl.chk      { background: linear-gradient(#dadb72, #c4c75c); color: #37310f; }
.ctl.off      { background: linear-gradient(#23262b, #101216); color: #e3ddcb; text-shadow: 0 1px 1px rgba(0,0,0,0.6); }
button.ctl { -webkit-appearance: none; appearance: none; cursor: pointer; }
button.ctl.power:active { box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }

/* POWER off: a dark veil falls over the site, but the real POWER button is lifted
   above it, glowing, so it stays bright and clickable to power back up. */
.power-veil { position: fixed; inset: 0; background: #050608; opacity: 0; transition: opacity 0.8s ease; z-index: 9000; pointer-events: none; }
.power-veil.on { opacity: 0.93; pointer-events: auto; }
html.powered-off .hero-paper { z-index: -1; }
html.powered-off .hero-inner { z-index: auto; }
html.powered-off #power-btn {
  position: relative; z-index: 9001;
  box-shadow: 0 0 0 1px rgba(255,180,150,0.9), 0 0 24px 6px rgba(255,90,40,0.85);
  animation: litPulse 1.4s ease-in-out infinite;
}

/* "WHAT IS THIS?" modal */
.modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 5vw; background: rgba(5,6,8,0.82); }
.modal[hidden] { display: none; }
.modal-box {
  position: relative; max-width: 600px; max-height: 90vh; overflow: auto;
  background: var(--paper); color: #20180f; border: 3px solid #c6bca3; border-radius: 6px;
  padding: 1.3rem 1.7rem 1.1rem; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.modal-box h2 { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 1.15rem; }
.modal-box p { margin: 0 0 0.65rem; line-height: 1.45; font-size: 0.96rem; }
.modal-cue { font-family: var(--mono); font-size: 0.82rem; color: #8a5a1f; margin-top: 0.9rem; }
.modal-src { margin-bottom: 0; margin-top: 0.4rem; }
.modal-src a { font-family: var(--mono); font-size: 0.8rem; color: #8a5a1f; }
.modal-close { position: absolute; top: 0.4rem; right: 0.7rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #6c6757; cursor: pointer; }
.modal-close:hover { color: #20180f; }
@keyframes litPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
@media (prefers-reduced-motion: reduce) { .ctl.power.on { animation: none; } }

/* --- 7094 indicator register display (TRAP/SIMULATE/SENSE + instruction bits) --- */
.register {
  margin-top: 0.95rem; padding: 0.55rem 0.85rem 0.6rem;
  background: linear-gradient(#2c323a, #232a31);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 26px, transparent 26px 52px);
  border: 1px solid rgba(0,0,0,0.5); border-radius: 4px; box-shadow: inset 0 0 16px rgba(0,0,0,0.6);
}
.reg-row { display: flex; align-items: flex-end; gap: 3px; }
.reg-row + .reg-row { margin-top: 0.55rem; }
.reg-status { flex-wrap: wrap; }
.reg-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.reg-stat > b, .reg-bit > b { font: 700 5px/1.15 var(--mono); letter-spacing: 0.4px; color: #b3bac2; text-transform: uppercase; text-align: center; }
.reg-stat > b { min-height: 13px; display: flex; align-items: flex-end; }
.reg-bit { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; }
.reg-bit > b { color: #969ea7; }
.reg-div { width: 1px; align-self: stretch; background: rgba(255,255,255,0.16); margin: 0 4px; }
.reg-gap { flex: 1 1 auto; min-width: 8px; }
.sense-lamps { display: flex; gap: 5px; }
.sense-lamps .reg-bit { flex: 0 0 auto; }
.reg-bits { display: block; }
.reg-bits .reg-caption { display: block; text-align: center; font: 700 7px/1 var(--mono); letter-spacing: 6px; color: rgba(200,206,214,0.45); text-transform: uppercase; margin-bottom: 5px; }
.reg-bits .bit-row { display: flex; align-items: flex-end; gap: 3px; }
.rl { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 40% 35%, #5a4c26, #29230f 72%);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.1s; }
.rl.on { background: radial-gradient(circle at 40% 35%, #ffe49a, #f0b53a 60%, #b5851a 100%);
  box-shadow: 0 0 5px rgba(240,181,58,0.8), inset 0 0 1px #fff; }
.rl.blink { opacity: 0.2; }
@media (max-width: 680px) {
  .console-top { flex-direction: column; }
  .control-column { display: none; }
}
/* console buttons: chunky cream rocker switches in a dark housing rail */
.console .hero-actions {
  margin-top: 1rem; gap: 20px; padding: 11px 26px 13px;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-around; width: 100%;
  /* cream 7094 toggle panel, stretched across the console face */
  background: linear-gradient(#c9c2ae, #d6d0bd);
  border: 1px solid #b1a98f; border-radius: 5px;
  /* recessed into the console face (inset, not raised) */
  box-shadow: inset 0 5px 9px rgba(0,0,0,0.32), inset 0 -2px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,0.25);
}
/* a labelled 7094 rocker switch: label above, a left/right rocker below
   (mechanics adapted from DannyFeliz/vue-rocker-switch, restyled grey/cream) */
.rocker-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; border: 0; }
.rk-label { font: 700 0.66rem/1.15 var(--mono); letter-spacing: 1.2px; color: #3a3526; text-transform: uppercase; text-align: center; }
.rocker {
  display: inline-block; position: relative; font-size: 9px; font-weight: bold; text-align: center;
  text-transform: uppercase; color: #4a4636; width: 7em; height: 4em; overflow: hidden;
  border-bottom: 0.5em solid #c9c2ad; box-sizing: border-box;
  font-family: var(--mono); cursor: pointer; -webkit-user-select: none; user-select: none;
}
.rocker::before {
  content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0;
  background: #6c6757; border: 0.5em solid #c9c2ad; border-bottom: 0;
}
.rocker .switch-left, .rocker .switch-right {
  position: absolute; display: flex; align-items: center; justify-content: center;
  height: 2.5em; width: 3em; transition: 0.18s;
}
.rocker .switch-left { height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background: #c8c2b0; color: #4a4636; transform: rotate(15deg) skewX(15deg); }
.rocker .switch-right { right: 0.5em; bottom: 0; background: #8d8876; color: #f3efe2; }
.rocker .switch-left::before, .rocker .switch-right::before {
  content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em; background: #b3ad9a; transform: skewY(-65deg);
}
.rocker .switch-left::before { left: -0.4em; }
.rocker .switch-right::before { right: -0.375em; background: transparent; transform: skewY(65deg); }
/* toggled ON: left half rocks down/forward */
.rocker.on .switch-left { background: #efe9d8; color: #2a2620; bottom: 0; left: 0.5em; height: 2.5em; width: 3em; transform: rotate(0) skewX(0); }
.rocker.on .switch-left::before { background: transparent; width: 3.0833em; }
.rocker.on .switch-left + .switch-right { background: #c8c2b0; color: #4a4636; bottom: 0.4em; right: 0.8em; height: 2.4em; width: 2.75em; transform: rotate(-15deg) skewX(-15deg); }
.rocker.on .switch-left + .switch-right::before { background: #b3ad9a; }
@media (min-width: 900px) {
  .hero .wrap { display: flex; justify-content: center; }
}
.boot { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 3px; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 1.4rem; }
.cursor { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em; background: var(--eliza); box-shadow: 0 0 8px var(--eliza); animation: blink 1.06s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.hero h1 {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 0.95;
  margin: 0; letter-spacing: 1px; color: var(--bright);
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.hero h1.wm { line-height: 1; text-shadow: none; }
.hero-wordmark { display: block; height: clamp(2.3rem, 8vw, 4rem); width: auto; color: var(--bright); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero .sub { font-family: var(--mono); font-size: clamp(0.85rem, 2.2vw, 1.05rem); letter-spacing: 2px; color: var(--ink); margin-top: 0.4rem; text-transform: uppercase; }
.hero .tagline { max-width: 52ch; margin-top: 0.9rem; font-size: 1.0rem; line-height: 1.42; color: var(--ink); }
.hero-actions { margin-top: 2.2rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero-actions .btn { padding: 0.6rem 1rem; font-size: 0.72rem; letter-spacing: 1px; }

/* the lamp bank (IBM 7094 indicator panel) */
.lampbank {
  display: flex; gap: 0.5rem; align-items: center; margin: 1.8rem 0 0;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line-soft); border-radius: 4px;
  background: rgba(0,0,0,0.35); width: max-content; max-width: 100%; flex-wrap: wrap;
}
.lampbank .lab { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin-right: 0.4rem; }
.lamp { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 2px rgba(0,0,0,0.6); transition: background 0.12s ease, box-shadow 0.12s ease; }
.lamp.on { background: var(--lamp-amber); box-shadow: 0 0 7px var(--lamp-amber), 0 0 2px #fff inset; }
.lamp.r.on { background: var(--lamp-red);  box-shadow: 0 0 7px var(--lamp-red), 0 0 2px #fff inset; }
.lamp.g.on { background: var(--lamp-green);box-shadow: 0 0 7px var(--lamp-green), 0 0 2px #fff inset; }
.lamp.b.on { background: var(--lamp-blue); box-shadow: 0 0 7px var(--lamp-blue), 0 0 2px #fff inset; }

/* the foreground teletype feed in the hero */
.tt {
  margin-top: 1.6rem; font-family: var(--mono); font-size: clamp(0.64rem, 1.5vw, 0.76rem); line-height: 1.5;
  max-width: 60ch; height: 9em; overflow: hidden;
  /* a reading window: older lines fade out as they scroll up past the top edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 2.4em, #000 100%);
}
.tt-line { margin: 0.1rem 0; white-space: pre-wrap; }
.tt-line.you { color: #3f7d59; }
.tt-line.sh  { color: #57a878; text-transform: uppercase; text-shadow: 0 0 4px rgba(87,168,120,0.25); }
.tt-cursor { display: inline-block; width: 0.5em; height: 1em; vertical-align: -0.12em; background: #57a878; box-shadow: 0 0 6px rgba(87,168,120,0.5); margin-left: 1px; animation: blink 1.06s steps(1) infinite; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 0.8rem 1.5rem; border: 1px solid var(--beam); color: var(--beam);
  background: rgba(236,106,66,0.06); border-radius: 2px; transition: all 0.18s ease; cursor: pointer;
}
.btn:hover { background: var(--beam); color: var(--bg); box-shadow: var(--glow); }
.btn.ghost { border-color: var(--line); color: var(--ink-dim); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); color: var(--bright); background: rgba(232,228,218,0.05); box-shadow: none; }
/* the playback control for the canned 1966 dialogue: green, to set it apart from
   the coral "you drive it" actions (Trace it, Step) and avoid misclicks */
.btn.play { border-color: var(--lamp-green); color: var(--lamp-green); background: rgba(89,192,138,0.08); }
.btn.play:hover { background: var(--lamp-green); color: var(--bg); box-shadow: 0 0 6px rgba(89,192,138,0.5), 0 0 14px rgba(89,192,138,0.25); }

/* ---------- content ---------- */
.content { padding: 5rem 0; }
section.block { margin: 0 auto 5rem; }
section.block:last-child { margin-bottom: 0; }

.kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--beam); margin-bottom: 0.9rem; display: block; }

h1.page { font-family: var(--mono); font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); color: var(--bright); letter-spacing: 0px; margin: 0 0 1.4rem; }
h2 { font-family: var(--mono); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--bright); letter-spacing: -0.3px; margin: 0 0 1.2rem; }
h3 { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--bright); letter-spacing: 0.4px; margin: 0 0 0.5rem; }
.lede p { font-size: 1.28rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.content p { max-width: 68ch; }
.content p + p { margin-top: 1.1rem; }
.content ul, .content ol { max-width: 66ch; }
.content li { margin: 0.35rem 0; }

/* rule with a small lamp motif */
.rule { display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0; color: var(--ink-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 2px; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(to right, transparent, var(--line), transparent); }

/* card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.card {
  border: 1px solid var(--line-soft); background: var(--panel);
  padding: 1.4rem; border-radius: 3px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}
.card:hover { border-color: var(--beam); box-shadow: inset 0 0 30px rgba(236,106,66,0.05), var(--glow); transform: translateY(-2px); }
.card .obj { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 0.6rem; }
.card p { font-size: 0.95rem; color: var(--ink); margin: 0; max-width: none; }
.card h3 a { border: 0; }
.card.r { border-top: 2px solid var(--lamp-red); }
.card.g { border-top: 2px solid var(--lamp-green); }
.card.b { border-top: 2px solid var(--lamp-blue); }
.card.y { border-top: 2px solid var(--lamp-amber); }

/* ---------- the dialogue / teletype transcript ---------- */
.dialogue {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.5;
  background: rgba(0,0,0,0.42); border: 1px solid var(--line-soft); border-left: 2px solid var(--eliza);
  padding: 1.3rem 1.4rem; border-radius: 3px; margin-top: 1.5rem; overflow-x: auto;
}
.turn { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.4rem 0.8rem; padding: 0.18rem 0; }
.turn .who { text-align: right; font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; padding-top: 0.18rem; user-select: none; }
.turn.person .who { color: var(--you); }
.turn.eliza .who { color: var(--eliza); }
.turn.person .msg { color: var(--ink); }
.turn.eliza .msg { color: var(--eliza); text-transform: uppercase; text-shadow: 0 0 5px rgba(239,111,68,0.3); }
.turn .stage { color: var(--ink-dim); font-style: normal; opacity: 0.7; }
.dialogue .gap { height: 0.5rem; }

/* method list */
.method { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.method li { padding-left: 2.4rem; position: relative; }
.method li::before { content: attr(data-n); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--lamp-amber); border: 1px solid var(--line); border-radius: 50%; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; }
.method b { color: var(--bright); font-family: var(--mono); font-weight: 700; font-size: 0.95rem; }

/* CTA */
.cta { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(236,106,66,0.07), rgba(236,106,66,0.01)); padding: 2.6rem; border-radius: 4px; text-align: center; }
.cta h2 { margin-bottom: 0.6rem; }
.cta p { margin: 0 auto 1.6rem; }

/* book-cover homage: black text on coral */
.cover-note { clear: both; background: var(--lamp-red); color: #140d09; border-radius: 4px; padding: 2.2rem 2.4rem; margin-top: 1.6rem; }
/* home book promo: the cover render beside the text, no box (its drop-shadow gives depth) */
.book-promo { display: flex; gap: 2.4rem; align-items: center; flex-wrap: wrap; margin: 2.2rem 0; }
.book-promo-img { flex: 0 0 auto; width: 210px; max-width: 100%; display: block; }
.book-promo-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55)); }
.book-promo-text { flex: 1 1 320px; }
.book-promo-text .kicker { color: var(--beam); margin-bottom: 0.7rem; }
.book-promo-text h2 { color: var(--bright); margin-bottom: 0.6rem; }
.book-promo-text p { color: var(--ink); max-width: 56ch; }
.book-promo-text a { color: var(--beam); border-bottom: 1px solid rgba(236,106,66,0.4); font-family: var(--mono); font-size: 0.85rem; }
.book-promo-text a:hover { color: var(--bright); }
@media (max-width: 600px) { .book-promo-img { width: 170px; margin: 0 auto; } }
.cover-note .kicker { color: #140d09; opacity: 0.75; }
.cover-note h2 { color: #140d09; }
.cover-note p { color: #1c120c; max-width: 60ch; }
.cover-note a { color: #140d09; border-bottom: 1px solid rgba(20,13,9,0.4); font-family: var(--mono); font-size: 0.85rem; }
.cover-note a:hover { color: #000; text-shadow: none; }
/* a quieter variant: a bordered box rather than a solid red panel, so it does
   not compete with the (red) book cover beside it */
.cover-note.muted { clear: both; background: none; border: 0; border-left: 2px solid var(--lamp-red); border-radius: 0; padding: 0.1rem 0 0.1rem 1.4rem; margin: 1.8rem 0; color: var(--ink); }
.cover-note.muted .kicker { color: var(--beam); opacity: 1; }
.cover-note.muted h2 { color: var(--bright); }
.cover-note.muted p { color: var(--ink); }
.cover-note.muted a { color: var(--beam); border-bottom-color: rgba(236,106,66,0.4); }
.cover-note.muted a:hover { color: var(--bright); }

/* further reading */
.reading ul { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.reading li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.reading li::before { content: "› "; color: var(--beam); font-family: var(--mono); }
.reading h3 { margin-top: 2rem; color: var(--beam); }
.reading p, .reading li { font-size: 0.95rem; }

/* inline link rows */
.links { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.65rem; }
.links li { padding-left: 1.3rem; position: relative; }
.links li::before { content: "→"; position: absolute; left: 0; color: var(--beam); font-family: var(--mono); }
.links .meta { color: var(--ink-dim); font-size: 0.9rem; }

/* callout */
/* ruled aside (no box): a left rule + small label, instead of a card */
.callout { border-left: 2px solid var(--lamp-amber); background: none; padding: 0.1rem 0 0.1rem 1.4rem; border-radius: 0; margin: 1.8rem 0; }
.callout .kicker { color: var(--lamp-amber); }
.callout p { margin: 0; max-width: 70ch; }
.callout p + p { margin-top: 0.8rem; }

/* pull quote */
.pull { border-left: 3px solid var(--eliza); padding: 0.4rem 0 0.4rem 1.4rem; margin: 1.8rem 0; font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--bright); max-width: 60ch; }
.pull cite { display: block; font-family: var(--mono); font-style: normal; font-size: 0.72rem; letter-spacing: 1px; color: var(--ink-dim); margin-top: 0.7rem; text-transform: uppercase; }

/* stat strip */

/* ---------- people grid ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.person-card { border: 1px solid var(--line-soft); background: var(--panel); border-radius: 3px; padding: 1.5rem; border-top: 2px solid var(--lamp-red); }
.person-card .name { font-family: var(--mono); font-weight: 700; color: var(--bright); font-size: 1.05rem; margin: 0 0 0.2rem; }
.person-card .role { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--lamp-amber); margin-bottom: 0.7rem; }
.person-card p { font-size: 0.92rem; margin: 0; max-width: none; color: var(--ink); }
.person-card:nth-child(4n+2) { border-top-color: var(--lamp-amber); }
.person-card:nth-child(4n+3) { border-top-color: var(--lamp-green); }
.person-card:nth-child(4n+4) { border-top-color: var(--lamp-blue); }

/* affiliation logos, presented as a CTSS terminal printout on archival paper: a
   warm parchment plate (echoing the teletype-paper motif) headed by a LISTF
   command line, with the logos set in mix-blend-mode: multiply so their white
   backgrounds melt into the paper and only the marks remain. */
/* reusable fanfold (continuous-form) plate: archival paper with tractor-feed holes */
.fanfold { position: relative; isolation: isolate; background: var(--paper); border-radius: 3px; padding: 1.3rem 2.9rem 1.7rem; margin-top: 1.6rem; box-shadow: 0 14px 38px rgba(0,0,0,0.5); }
.fanfold::before, .fanfold::after, .listing::before, .listing::after, .paper::before, .paper::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; z-index: 1; background-color: var(--paper); background-image: radial-gradient(circle at center, var(--bg) 0 3.4px, rgba(20,13,9,0.18) 3.4px 4.3px, transparent 4.6px); background-size: 22px 26px; background-repeat: repeat-y; background-position: center 11px; }
.fanfold::before, .listing::before, .paper::before { left: 0; border-right: 1px dashed rgba(20,13,9,0.22); }
.fanfold::after, .listing::after, .paper::after { right: 0; border-left: 1px dashed rgba(20,13,9,0.22); }
.fanfold-cmd { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.5px; color: #3a2f24; margin-bottom: 1.4rem; }
.fanfold-cmd .cmd-line { white-space: pre-wrap; }
.fanfold-foot { margin-top: 1.3rem; margin-bottom: 0; }
/* optional ASCII banner at the top of a plate */
.ff-banner { font-family: var(--mono); font-size: 0.62rem; line-height: 1.15; color: #2c2318; margin: 0 0 1rem; white-space: pre; overflow-x: auto; }
/* slot for hand-drawn overlays: doodles, arrows, flowcharts (supply your own SVG) */
.ff-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ff-underlay { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.ff-underlay img, .ff-underlay svg { position: absolute; }
.ff-overlay svg, .ff-overlay img { position: absolute; }
/* --- aesthetic variants (opts.age / sprockets / stain / edge) --- */
.fanfold.aged { background-color: #d3c6a8; background-image: radial-gradient(rgba(120,90,40,0.05) 1px, transparent 1.4px); background-size: 7px 7px; }
.fanfold.damaged { background-color: #cabd99; background-image: radial-gradient(circle at 18% 84%, rgba(90,55,20,0.18), transparent 22%), radial-gradient(circle at 92% 12%, rgba(90,55,20,0.13), transparent 18%), radial-gradient(rgba(110,80,35,0.06) 1px, transparent 1.4px); background-size: auto, auto, 6px 6px; color: #3a3020; }
.fanfold.no-sprockets, .fanfold.torn { padding-left: 1.7rem; padding-right: 1.7rem; }
.fanfold.no-sprockets::before, .fanfold.no-sprockets::after, .fanfold.torn::before, .fanfold.torn::after { display: none; }
.fanfold.torn { clip-path: polygon(0% 0%, 100% 0%, 99% 7%, 100% 14%, 98.5% 21%, 100% 28%, 99% 35%, 100% 42%, 98.5% 49%, 100% 56%, 99% 63%, 100% 70%, 98.5% 77%, 100% 84%, 99% 91%, 100% 98%, 100% 100%, 0% 100%, 1% 91%, 0% 84%, 1.5% 77%, 0% 70%, 1% 63%, 0% 56%, 1.5% 49%, 0% 42%, 1% 35%, 0% 28%, 1.5% 21%, 0% 14%, 1% 7%); }
.fanfold.ripped { clip-path: polygon(0 0, 100% 0, 100% 95%, 96% 99%, 92% 95%, 88% 99%, 84% 95%, 80% 99%, 76% 95%, 72% 99%, 68% 95%, 64% 99%, 60% 95%, 56% 99%, 52% 95%, 48% 99%, 44% 95%, 40% 99%, 36% 95%, 32% 99%, 28% 95%, 24% 99%, 20% 95%, 16% 99%, 12% 95%, 8% 99%, 4% 95%, 0 99%); }
/* coffee ring: the PNG multiplied into the paper, with a paper veil over it to keep it faint */
.fanfold.coffee { background-image: linear-gradient(rgba(217,207,188,0.55), rgba(217,207,188,0.55)), url(../images/coffee-ring.png); background-repeat: no-repeat, no-repeat; background-position: 86% 14%, 86% 14%; background-size: 120px auto, 120px auto; background-blend-mode: normal, multiply; }
.fanfold.coffee-small { background-size: 85px auto, 85px auto; }
.fanfold.coffee-large { background-size: 170px auto, 170px auto; }
.fanfold.coffee-tl { background-position: 14% 14%, 14% 14%; }
.fanfold.coffee-tr { background-position: 86% 14%, 86% 14%; }
.fanfold.coffee-bl { background-position: 14% 86%, 14% 86%; }
.fanfold.coffee-br { background-position: 86% 86%, 86% 86%; }
.fanfold.burned { box-shadow: inset 0 0 26px rgba(38,16,4,0.55), inset 0 0 72px rgba(38,16,4,0.22), 0 14px 38px rgba(0,0,0,0.5); }
/* a code listing printed on the fanfold paper (dark ink) */
.fanfold-listing { font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: #2c2318; white-space: pre; overflow-x: auto; margin: 0; }
/* a directory-style index of sections on the fanfold paper (replaces the card grid) */
.index-list { margin-top: 0.2rem; }
.content a.index-row { border-bottom: 0; }
.index-row { display: block; padding: 1rem 0; border-top: 1px dashed rgba(20,13,9,0.2); text-decoration: none; }
.index-row:first-child { border-top: 0; padding-top: 0.3rem; }
.index-row .ix-obj { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.2px; text-transform: uppercase; color: #6b5942; margin-bottom: 0.2rem; }
.index-row .ix-ttl { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: #221a12; }
.index-row .ix-desc { display: block; font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; color: #2c2318; margin-top: 0.25rem; max-width: 72ch; }
.index-row:hover .ix-ttl { text-decoration: underline; text-underline-offset: 2px; }

/* TEAM-ELIZA as a vertical line-printer listing on the fanfold paper */
.team-row { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 0; border-top: 1px dashed rgba(20,13,9,0.2); }
.team-row:first-child { border-top: 0; padding-top: 0.5rem; }
.team-photo { flex: 0 0 auto; width: 94px; height: 118px; border: 1px solid rgba(20,13,9,0.45); background: #cfc4ad; position: relative; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.4) brightness(1.05); mix-blend-mode: multiply; }
/* faint horizontal line-printer banding over an actual photo */
.team-photo:not(.empty)::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(20,13,9,0.16) 0 1px, transparent 1px 3px); pointer-events: none; }
/* placeholder: a dithered field with a small caption, until a photo is dropped in */
.team-photo.empty { display: flex; align-items: center; justify-content: center; background-image: radial-gradient(rgba(20,13,9,0.32) 1px, transparent 1.4px); background-size: 5px 5px; }
.team-photo.empty span { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 1px; color: #3a2f24; background: var(--paper); padding: 0.15rem 0.4rem; }
.team-info { flex: 1 1 auto; min-width: 0; }
.team-info .name { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: #221a12; margin: 0 0 0.2rem; }
.team-info .role { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: #5a4a36; margin: 0 0 0.6rem; }
.team-info .bio { font-size: 0.9rem; line-height: 1.5; color: #2c2318; margin: 0; max-width: 62ch; }
.plate-body { font-size: 0.92rem; line-height: 1.55; color: #2c2318; margin: 0; max-width: 72ch; }
@media (max-width: 560px) { .team-row { gap: 1rem; } .team-photo { width: 76px; height: 96px; } }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1.9rem 2.6rem; }
.logo { display: inline-flex; align-items: center; justify-content: center; height: 54px; }
.logo img { max-height: 100%; max-width: 170px; width: auto; height: auto; display: block; object-fit: contain; mix-blend-mode: multiply; filter: saturate(0.9); transition: filter 0.15s ease, transform 0.15s ease; }
.logo:hover img { filter: saturate(1); transform: translateY(-2px); }

/* ---------- blog index + posts ---------- */
.posts { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0; }
.posts li { border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; }
.posts .no { font-family: var(--mono); color: var(--ink-dim); font-size: 0.85rem; padding-top: 0.15rem; }
.posts h3 { margin: 0 0 0.2rem; }
.posts h3 a { border: 0; }
.posts .meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-dim); }
.post-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); margin: -0.6rem 0 2rem; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; border-top: 1px solid var(--line-soft); padding-top: 1.4rem; font-family: var(--mono); font-size: 0.8rem; }
.note { border: 1px solid var(--line-soft); border-left: 3px solid var(--lamp-blue); background: rgba(77,146,224,0.06); padding: 1rem 1.3rem; border-radius: 3px; margin: 1.5rem 0; font-size: 0.9rem; }
.note .kicker { color: var(--lamp-blue); }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.timeline li { position: relative; padding: 0 0 1.6rem 2.2rem; border-left: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 0.35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--lamp-red); box-shadow: 0 0 7px var(--lamp-red); }
.timeline .yr { font-family: var(--mono); font-weight: 700; color: var(--bright); font-size: 0.95rem; }
.timeline .vh { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--lamp-amber); margin-left: 0.6rem; }
.timeline p { margin: 0.3rem 0 0; font-size: 0.95rem; max-width: 62ch; }

/* ---------- talks, grouped by year ---------- */
.yeargroup { font-family: var(--mono); color: var(--lamp-amber); font-size: 1.25rem; letter-spacing: 3px; margin: 2.4rem 0 0; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line-soft); }
.talklist { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.talklist li { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.talklist li:last-child { border-bottom: 0; }
.talklist .who { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--lamp-amber); margin-bottom: 0.25rem; }
.talklist .ttl { display: block; color: var(--bright); font-size: 1.02rem; line-height: 1.45; max-width: 70ch; }
.talklist .ttl a { border-bottom: 1px solid rgba(236,106,66,0.4); }
.talklist .meta { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.5px; color: var(--ink-dim); margin-top: 0.3rem; }

/* ---------- contacts ---------- */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.contact { border: 1px solid var(--line-soft); padding: 1.3rem 1.4rem; border-radius: 3px; background: var(--panel); }
.contact .role { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.contact .name { font-family: var(--mono); color: var(--bright); font-size: 1.02rem; margin: 0.3rem 0; }
.contact .aff { font-size: 0.9rem; color: var(--ink); }
.contact a { font-family: var(--mono); font-size: 0.82rem; }
@media (max-width: 620px) { .contacts { grid-template-columns: 1fr; } }

/* ---------- bibliography ---------- */
.bib .ref { font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; padding-left: 1.7rem; text-indent: -1.7rem; margin: 0 0 0.75rem; max-width: 74ch; color: var(--ink); }
.bib h3 { margin-top: 2.2rem; color: var(--beam); }
.bib .ref a { border-bottom: 1px solid var(--line-soft); word-break: break-word; }
.bib .ref a:hover { border-bottom-color: var(--beam); }
/* bibliography printed on the fanfold paper: dark ink instead of the dark-bg palette */
.fanfold .bib h3 { color: #221a12; margin-top: 2rem; }
.fanfold .bib h3:first-child { margin-top: 0; }
.fanfold .bib .ref { color: #2c2318; }
.fanfold .bib .ref a { color: #2c2318; border-bottom-color: rgba(20,13,9,0.3); }
.fanfold .bib .ref a:hover { border-bottom-color: #221a12; }

/* ---------- code listing ---------- */
/* small code snippets: a torn strip of fanfold paper (sprocket holes, dark ink) */
.listing {
  position: relative;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.55;
  background: var(--paper); color: #2c2318;
  padding: 1.1rem 2.6rem; border-radius: 3px; overflow-x: auto; margin: 1.6rem 0;
  white-space: pre; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.listing .com { color: #6b5942; }
.listing .kw { color: #2f4f7a; }
.listing .str { color: #8a5a1f; }
.listing .lbl { color: #2f6b45; }
.listing .seq { color: rgba(20,13,9,0.4); }

/* ---------- figures (archive images) ---------- */
.figure { margin: 2rem 0 0; }
.figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line-soft); border-radius: 4px;
  opacity: 0.88; filter: grayscale(0.25) contrast(0.95); transition: opacity 0.3s ease, filter 0.3s ease; }
.figure:hover img { opacity: 1; filter: none; }

/* 1960s VDU / phosphor treatment for archive photos: green monochrome, scanlines,
   a faint screen glow and curvature. (Plain figures, e.g. the book cover, keep
   true colour.) */
.vdu { position: relative; display: block; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 5px; background: #060a07; }
.vdu img { display: block; width: 100%; height: auto; border: 0; border-radius: 0;
  filter: grayscale(0.55) sepia(0.35) hue-rotate(62deg) saturate(1.25) brightness(0.98) contrast(1.03); }
.vdu::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 3px, rgba(0,0,0,0.10) 4px); }
.vdu::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4); }
@media (prefers-reduced-motion: no-preference) { .vdu img { transition: filter 0.3s ease; } }
.figure figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.3px; color: var(--ink-dim); margin-top: 0.6rem; line-height: 1.55; max-width: 64ch; }
.figure.portrait { max-width: 300px; }
.figure.half { max-width: 330px; }
@media (max-width: 600px) { .figure.half { max-width: 100%; } }

/* embedded ELIZA (Anthony Hay's, via iframe) */
.eliza-embed { margin-top: 1.4rem; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #050806; box-shadow: 0 10px 36px rgba(0,0,0,0.45), inset 0 0 60px rgba(0,0,0,0.55); }
.eliza-embed iframe { display: block; width: 100%; height: 560px; border: 0; background: #050806; }
@media (max-width: 600px) { .eliza-embed iframe { height: 460px; } }
@media (min-width: 760px) {
  .figure.portrait { float: right; max-width: 260px; margin: 0.4rem 0 1.2rem 1.8rem; }
}

/* ---------- step-by-step trace demo (how.html) ---------- */
.trace-bar { display: flex; gap: 0.7rem; margin-top: 1.6rem; flex-wrap: wrap; }
.trace-input { flex: 1; min-width: 220px; background: #0d0f13; border: 1px solid var(--line); border-radius: 4px; color: var(--you); font-family: var(--mono); font-size: 0.95rem; padding: 0.7rem 1rem; outline: none; }
.trace-input:focus { border-color: var(--beam); }
.trace-egs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
/* the 1966-conversation player sits apart from the demo box: its own zone, set
   off with a divider and a label so it does not read as another nav button */
.play-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.play-lab { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.trace-egs-lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }

/* the machine display: one step at a time in a stable framed "screen", advanced
   with Back / Step controls. No scrolling, no jumpy reveal. */
/* a slight green tinge so the demo reads as kin to Hay's green-screen ELIZA */
.demo { margin-top: 1.8rem; border: 1px solid rgba(89,192,138,0.42); border-radius: 6px; background: #06210f; overflow: hidden; box-shadow: inset 0 0 70px rgba(0,0,0,0.4), inset 0 0 40px rgba(89,192,138,0.2); }
.demo-stage { background: linear-gradient(180deg, rgba(89,192,138,0.08), rgba(89,192,138,0)); }
.demo-ctx { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.02); }
.demo-ctx .trace-input { flex: 1 1 20rem; min-width: 0; background: rgba(0,0,0,0.42); border: 1px solid rgba(89,192,138,0.35); border-radius: 3px; color: var(--you); font-family: var(--mono); font-size: 0.9rem; padding: 0.45rem 0.7rem; outline: none; }
.demo-ctx .trace-input:focus { border-color: var(--lamp-green); }
.demo-ctx .btn { padding: 0.42rem 0.85rem; font-size: 0.64rem; }
.demo-ctx .ctx-kw { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.demo-ctx .lab { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.demo-ctx .val { font-family: var(--mono); font-size: 0.85rem; color: var(--you); }
.demo-ctx .val.key { color: var(--eliza); }
/* the memory queue: a full-width bar under the input line, set on a darker
   ground so it reads as a distinct register (ELIZA's stored phrases) */
.demo-mem { background: #03100a; border-bottom: 1px solid rgba(89,192,138,0.16); padding: 0.55rem 1.2rem; display: flex; gap: 1.2rem; align-items: stretch; }
.mem-left, .mem-right { flex: 1 1 50%; min-width: 0; overflow: hidden; }
.mem-right { display: flex; flex-direction: column; min-height: 0; }
.demo-mem .mlab { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lamp-green); text-decoration: underline; text-underline-offset: 3px; }
.demo-mem ol { list-style: none; margin: 0.3rem 0 0; padding: 0 0 0 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.demo-mem li { font-family: var(--mono); font-size: 0.58rem; line-height: 1.1; color: var(--ink-dim); display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.demo-mem li > span:last-child { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-mem .mn { color: var(--lamp-green); min-width: 0.9rem; text-align: right; flex: 0 0 auto; }
.demo-mem li.slot-empty { opacity: 0.4; }
.demo-mem li.flash { border-radius: 3px; animation: memflash 0.7s ease-out 3; }
@keyframes memflash {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(240,168,58,0.38); box-shadow: 0 0 10px rgba(240,168,58,0.45); }
}
.demo-mem li.flash .mn, .demo-mem li.flash > span:last-child { color: var(--bright); }
/* the running conversation, filling its panel as fanfold paper; the sprocket
   holes are a local-attachment background so they scroll up WITH the text */
.mem-convo { position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background-color: var(--paper); color: #2c2318; border-radius: 3px; padding: 0.55rem 1.6rem;
  background-image:
    radial-gradient(circle at center, var(--bg) 0 3px, rgba(20,13,9,0.18) 3px 3.8px, transparent 4.1px),
    radial-gradient(circle at center, var(--bg) 0 3px, rgba(20,13,9,0.18) 3px 3.8px, transparent 4.1px);
  background-repeat: repeat-y, repeat-y; background-position: 0 0, 100% 0; background-size: 18px 24px, 18px 24px;
  background-attachment: local, local;
  box-shadow: inset 0 0 0 1px rgba(20,13,9,0.08), 0 6px 18px rgba(0,0,0,0.4); }
.mem-convo .cline { font-family: var(--mono); font-size: 0.58rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.mem-convo .you { color: #8a5a1f; }
.mem-convo .eliza { color: #2c2318; text-transform: uppercase; }
.mem-convo .cline.typing::after { content: "\258B"; margin-left: 1px; color: #2c2318; animation: elblink 1s step-end infinite; }
@keyframes elblink { 50% { opacity: 0; } }
/* fixed-height screen: it does not resize as you step, and it is sized to sit
   inside a normal browser window. Each step is auto-scaled to fit (see fitCard
   in trace.js); the zoom buttons let you enlarge or shrink the panel content. */
.demo-stage { position: relative; padding: 1.3rem 1.3rem; height: clamp(16rem, 50vh, 26rem); overflow: auto; }
.stage-card { width: 100%; opacity: 0; transition: opacity 0.22s ease; transform-origin: top left; }
.stage-card.in { opacity: 1; }
.demo-zoom { display: inline-flex; flex-direction: column; align-items: center; gap: 0.18rem; margin-left: 0.7rem; padding-left: 0.9rem; border-left: 1px solid var(--line-soft); }
.demo-zoom .zlab { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.demo-zoom .zbtns { display: inline-flex; gap: 0.3rem; }
.zbtn { font-family: var(--mono); font-size: 0.95rem; line-height: 1; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink-dim); background: transparent; border-radius: 3px; cursor: pointer; }
.zbtn:hover { border-color: var(--ink); color: var(--bright); }
.stage-head { font-family: var(--mono); font-weight: 700; color: var(--bright); font-size: 1rem; letter-spacing: 0.3px; display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem; }
.stage-n { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--lamp-amber); color: var(--lamp-amber); font-family: var(--mono); font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(240,168,58,0.3); }
.stage-card.final .stage-n { border-color: var(--lamp-red); color: var(--lamp-red); box-shadow: 0 0 8px rgba(225,84,46,0.4); }
.demo-prog { display: flex; gap: 4px; padding: 0 1.2rem; }
.demo-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-soft); transition: background 0.2s ease; }
.demo-prog i.done { background: rgba(240,168,58,0.45); }
.demo-prog i.on { background: var(--lamp-amber); }
.demo-nav { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.2rem 1rem; background: #03100a; border-top: 1px solid rgba(89,192,138,0.14); }
.demo-prog { padding-top: 0.6rem; }
.demo-nav .btn { padding: 0.55rem 1rem; font-size: 0.72rem; }
.demo-nav .btn:disabled { opacity: 0.35; cursor: default; }
.demo-nav .spacer { margin-left: auto; }
.demo-nav .count { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); }
.snote { font-size: 0.95rem; color: var(--ink); max-width: 64ch; margin: 0 0 1rem; }

.srow { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.6rem 0.9rem; align-items: start; margin: 0.5rem 0; }
.srow-lab { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); padding-top: 0.45rem; text-align: right; }
.srow-box { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { font-family: var(--mono); font-size: 0.72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0.22rem 0.48rem; color: var(--ink); background: rgba(232,228,218,0.03); position: relative; }
.chip.plain { color: var(--ink-dim); opacity: 0.75; }
.chip.key { color: var(--lamp-red); border-color: var(--lamp-red); box-shadow: 0 0 8px rgba(225,84,46,0.18); }
.chip.win { box-shadow: 0 0 10px rgba(225,84,46,0.35); }
.chip.delim { border-style: dashed; }
.chip-badge { font-size: 0.58rem; margin-left: 0.45rem; padding: 0.05em 0.35em; border-radius: 3px; background: var(--ink-dim); color: var(--bg); letter-spacing: 0.5px; }
.swin { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); margin: 0.7rem 0 0; }

.pat { font-family: var(--mono); font-size: 0.72rem; border: 1px dashed var(--line); border-radius: 4px; padding: 0.22rem 0.48rem; color: var(--ink); }
.pat.any { color: var(--ink-dim); font-style: italic; }
.pat.set { color: var(--lamp-blue); border-color: var(--lamp-blue); }
.comp { font-family: var(--mono); font-size: 0.72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0.22rem 0.48rem 0.22rem 0.24rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; }
.comp-n { font-size: 0.56rem; width: 1.15rem; height: 1.15rem; border-radius: 3px; color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.comp-empty { color: var(--ink-dim); }
.tslot { font-family: var(--mono); font-size: 0.7rem; border: 1px solid var(--line); border-radius: 4px; padding: 0.22rem 0.44rem; }
.tword { font-family: var(--mono); font-size: 0.74rem; color: var(--bright); padding: 0.22rem 0.18rem; }

/* the demo's conversation output, printed on fanfold paper */
.paper { position: relative; isolation: isolate; font-family: var(--mono); font-size: 0.92rem; background: var(--paper); border-radius: 3px; padding: 0.85rem 2.6rem; color: #2c2318; margin-top: 0.6rem; box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
.paper .who { display: inline-block; font-size: 0.6rem; letter-spacing: 1.5px; margin-right: 0.8rem; color: #6b5942; }
.paper .who.you { color: #8a5a1f; }
.paper.out .who.eliza { color: #b5462a; }
.paper.out { color: #3a2f24; text-transform: uppercase; }
.defer { font-size: 0.98rem; color: var(--ink); }
.defer .arrow { color: var(--lamp-red); }
.defer-rule { font-family: var(--mono); font-size: 0.82rem; color: rgba(232,228,218,0.42); margin: 0.1rem 0 0.7rem; letter-spacing: 0.3px; }
.defer-resp { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.08rem 1.2rem; max-width: 64ch; }
.defer-resp li { font-family: var(--mono); font-size: 0.82rem; line-height: 1.25; color: var(--lamp-green); padding-left: 0.9rem; position: relative; }
.defer-resp li::before { content: "\203A"; position: absolute; left: 0; color: var(--ink-dim); }
.memnote { font-size: 0.95rem; color: var(--ink); border-left: 3px solid var(--lamp-amber); background: rgba(240,168,58,0.05); padding: 0.8rem 1.1rem; border-radius: 3px; max-width: 66ch; }
.debunk { font-size: 1.05rem; color: var(--bright); border-top: 1px solid var(--line-soft); margin-top: 1.4rem; padding-top: 1.2rem; max-width: 64ch; }

@media (max-width: 560px) { .srow { grid-template-columns: 1fr; } .srow-lab { text-align: left; padding-top: 0; } }

/* ---------- the DOCTOR dictionary (dictionary.html, dict.js) ---------- */
.dict-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.dict-input { flex: 1; min-width: 240px; background: #0d0f13; border: 1px solid var(--line); border-radius: 4px; color: var(--you); font-family: var(--mono); font-size: 0.95rem; padding: 0.7rem 1rem; outline: none; }
.dict-input:focus { border-color: var(--beam); }
.dict-count { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); }
.dict-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.6rem; }
.dict-key { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.5px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 3px; padding: 0.3rem 0.6rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: border-color 0.12s, color 0.12s; }
.dict-key:hover { border-color: var(--beam); color: var(--bright); }
.dict-key.on { border-color: var(--lamp-red); color: var(--lamp-red); background: rgba(225,84,46,0.08); }
.dict-key-mark { color: var(--ink-dim); font-size: 0.78rem; }
.dict-card { border: 1px solid var(--line-soft); border-top: 2px solid var(--lamp-red); background: var(--panel); border-radius: 3px; padding: 1.3rem 1.5rem; }
.dict-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.dict-kw { font-family: var(--mono); font-size: 1.35rem; letter-spacing: 1px; color: var(--bright); }
.dict-badge { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.12rem 0.55rem; }
.dict-badge.rank { color: var(--lamp-red); border-color: rgba(225,84,46,0.5); }
.dict-badge.mem { color: var(--lamp-amber); border-color: rgba(240,168,58,0.5); }
.dict-badge.sub { color: var(--lamp-blue); border-color: rgba(77,146,224,0.5); text-transform: none; }
.dict-badge.tag { color: var(--lamp-green); border-color: rgba(89,192,138,0.5); }
.dict-note { font-size: 0.92rem; color: var(--ink); max-width: 66ch; margin: 0.2rem 0 1rem; }
.dict-rule { border-top: 1px solid var(--line-soft); padding-top: 0.9rem; margin-top: 0.9rem; }
.dict-rule:first-of-type { border-top: 0; padding-top: 0; margin-top: 0.6rem; }
.dict-rule-lab { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.4rem; }
.dict-rl { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); margin-right: 0.5rem; }
.dict-decomp { font-size: 0.85rem; margin-bottom: 0.5rem; }
.dict-decomp code { font-family: var(--mono); font-size: 0.78rem; color: var(--lamp-amber); background: rgba(240,168,58,0.07); padding: 0.1em 0.4em; border-radius: 3px; }
.dict-reasm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.4rem; }
.dict-reasm li { font-family: var(--mono); font-size: 0.74rem; color: var(--lamp-green); padding-left: 0.9rem; position: relative; }
.dict-reasm li::before { content: "\203A"; position: absolute; left: 0; color: var(--ink-dim); }
.dict-reasm li.is-link { padding-left: 0; }
.dict-reasm li.is-link::before { content: ""; }
.dict-jump { font-family: var(--mono); font-size: 0.74rem; color: var(--lamp-red); background: none; border: 0; border-bottom: 1px dashed rgba(225,84,46,0.5); cursor: pointer; padding: 0; }
.dict-jump:hover { color: var(--bright); }
.dict-raw { margin-top: 1.1rem; }
.dict-raw summary { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; }
.dict-raw pre.listing { margin-top: 0.6rem; }
@media (max-width: 560px) { .dict-reasm { grid-template-columns: 1fr; } }

/* ---------- markdown-rendered blog post content ---------- */
#post pre, .content pre:not(.listing):not(.fanfold-listing) {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.55;
  background: rgba(0,0,0,0.5); border: 1px solid var(--line-soft); border-left: 2px solid var(--lamp-blue);
  padding: 1.2rem 1.3rem; border-radius: 3px; overflow-x: auto; color: var(--ink); margin: 1.5rem 0;
}
#post pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
#post code, .content p code, .content li code {
  font-family: var(--mono); font-size: 0.88em; background: rgba(232,228,218,0.08);
  padding: 0.08em 0.35em; border-radius: 3px; color: var(--bright);
}
#post blockquote {
  border-left: 3px solid var(--lamp-amber); margin: 1.5rem 0; padding: 0.3rem 0 0.3rem 1.3rem;
  color: var(--bright); font-style: italic;
}
#post blockquote p { max-width: 62ch; }
#post h4 { font-family: var(--mono); color: var(--beam); font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; margin: 2.2rem 0 0.8rem; }
#post ul, #post ol { max-width: 66ch; }
#post p { max-width: 68ch; }
#post p + p { margin-top: 1.1rem; }
#post a { border-bottom: 1px solid var(--line); }
#post a:hover { border-bottom-color: var(--beam); }

/* ---------- live ELIZA terminal (Try ELIZA + easter-egg overlay) ---------- */
/* green phosphor screen (homage to Anthony Hay's ELIZA terminal) */
.eliza-term {
  position: relative;
  font-family: var(--mono); font-size: 0.9rem; line-height: 1.5;
  background: #03140b; border: 1px solid #16321f; border-radius: 16px;
  margin-top: 1.6rem; display: flex; flex-direction: column; overflow: hidden;
  color: #5cf08a; box-shadow: 0 0 30px rgba(60,210,120,0.10), 0 12px 44px rgba(0,0,0,0.55);
}
/* CRT scanlines, behind the text */
.eliza-term::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.11) 2px 3px); }
/* VDU haze: a soft phosphor bloom and curved-screen vignette over the glass */
.eliza-term::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 16px; background: radial-gradient(130% 115% at 50% 42%, rgba(120,245,160,0.05) 0%, transparent 44%, rgba(0,10,4,0.5) 100%); box-shadow: inset 0 0 38px rgba(0,0,0,0.45); }
.eliza-term .bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid #16321f; background: rgba(60,210,120,0.04); }
.eliza-term .bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #1f5a38; box-shadow: 0 0 6px rgba(60,210,120,0.4); }
.eliza-term .bar .dot.a { background: #2f7a4d; box-shadow: 0 0 6px rgba(60,210,120,0.5); }
.eliza-term .bar .dot.g { background: #5cf08a; box-shadow: 0 0 7px rgba(95,240,138,0.7); }
.eliza-term .bar .ttl { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: #4a8f63; margin-left: 0.4rem; }
.eliza-log { position: relative; z-index: 2; padding: 1.1rem 1.2rem; min-height: 16rem; max-height: 48vh; overflow-y: auto; }
.eliza-log .l { margin: 0.15rem 0; white-space: pre-wrap; word-break: break-word; }
.eliza-log .l.bot { color: #7bf59b; text-transform: uppercase; text-shadow: 0 0 4px rgba(95,240,138,0.4); }
.eliza-log .l.usr { color: #4fbf7a; }
.eliza-log .l.sys { color: #3f7a55; font-size: 0.82rem; }
.eliza-input { position: relative; z-index: 2; display: flex; border-top: 1px solid #16321f; }
.eliza-input .prompt { padding: 0.7rem 0.4rem 0.7rem 1rem; color: #7bf59b; }
.eliza-input input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: var(--mono); font-size: 0.9rem; color: #5cf08a; caret-color: #7bf59b; padding: 0.7rem 1rem 0.7rem 0.2rem;
}
.eliza-input input::placeholder { color: #3f7a55; }

/* easter-egg overlay */
.egg-overlay { position: fixed; inset: 0; z-index: 12000; background: rgba(8,9,12,0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.egg-overlay .eliza-term { width: min(720px, 96vw); margin: 0; }
.egg-embed { width: min(880px, 96vw); height: min(80vh, 660px); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #050806; box-shadow: 0 18px 50px rgba(0,0,0,0.65); }
.egg-embed iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.egg-close { position: absolute; top: 1.4rem; right: 1.6rem; background: rgba(20,22,27,0.9); border: 1px solid var(--line); color: var(--ink-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 3px; cursor: pointer; z-index: 1; }
.egg-close:hover { border-color: var(--beam); color: var(--bright); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 1.4rem 0; margin-top: 2.5rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.5px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer a { color: var(--ink-dim); border: 0; }
.site-footer a:hover { color: var(--beam); }
.micro { font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.4px; line-height: 1.5; }
.micro a { color: var(--ink-dim); border: 0; }
.micro a:hover { color: var(--beam); }

@media (max-width: 620px) {
  .brand-tagline { display: none; }
  .content { padding: 0; }
  section.block, article.block { padding: 2.6rem 0; }
  .turn { grid-template-columns: 3.4rem 1fr; }
  /* fanfold/listing: smaller type + tighter margins so wide listings mostly fit;
     any overflow scrolls cleanly behind the (now opaque) sprocket margins */
  .listing { font-size: 0.6rem; padding: 1rem 1.9rem; }
  .fanfold { padding-left: 1.9rem; padding-right: 1.9rem; }
  .fanfold-listing { font-size: 0.6rem; }
}