/* ==========================================================================
   YEAR2525.XYZ — base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Toggling which <main> is hidden changes the document's height by tens
   of thousands of pixels in one frame. Left to itself, the browser's
   scroll-anchoring heuristic "corrects" for that shift by silently
   re-adjusting scrollY to whatever it thinks preserves the old visual
   position — overriding an explicit scrollTo(0,0) and landing the page
   somewhere arbitrary in the newly-shown timeline. This is exactly the
   kind of full-page mode swap that heuristic isn't meant for. */
html, body { overflow-anchor: none; }

:root {
  --bg: #0b0c10;
  --bg2: #111319;
  --fg: #eef1f6;
  --muted: #9aa3b2;
  --accent: #5ee6c8;
  --accent2: #e65e9c;
  --border: rgba(255,255,255,0.12);
  --font-body: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;
  --radius: 10px;
  --maxw: 880px;
  --transition-era: background-color .9s ease, color .9s ease, border-color .9s ease;
}

html { scroll-behavior: smooth; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  transition: var(--transition-era);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
code { font-family: var(--font-mono); background: rgba(255,255,255,0.08); padding: .1em .4em; border-radius: 4px; }

::selection { background: var(--accent); color: #05070a; }

/* ---------------------------- header ---------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: linear-gradient(to bottom, rgba(11,12,16,0.92), rgba(11,12,16,0));
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .02em;
  font-size: .95rem;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.logo .dot { color: var(--accent); }

.year-counter {
  font-family: var(--font-mono);
  font-size: .75rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: .2rem .65rem;
  cursor: default;
  opacity: .55;
  transition: opacity .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  user-select: none;
}
.year-counter:hover, .year-counter:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
}
.year-counter.armed { animation: pulse-year 1.4s ease-in-out infinite; }
@keyframes pulse-year { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.header-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
  flex: none;
}
.header-btn:hover, .header-btn:focus-visible, .header-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.header-btn-icon { width: 16px; height: 16px; flex: none; }

.dotnav {
  margin-left: auto;
  display: none;
  gap: .5rem;
  align-items: center;
}
.dotnav a {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease;
}
.dotnav a:hover { transform: scale(1.15); border-color: var(--accent); }
.dotnav a.active { border-color: var(--accent); }
.dotnav-icon {
  width: 13px; height: 13px;
  flex: none;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .3s ease;
}
.dotnav a.active .dotnav-icon, .dotnav a:hover .dotnav-icon { color: var(--accent); }
.dotnav a::after {
  content: attr(data-label);
  position: absolute;
  top: 50%; right: 130%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: .7rem;
  white-space: nowrap;
  background: var(--bg2);
  color: var(--fg);
  padding: .25rem .55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dotnav a:hover::after { opacity: 1; }

@media (min-width: 860px) {
  .dotnav { display: flex; }
}
body[data-mode="past"] .dotnav { display: none; }

/* ---------------------------- presenter mode ---------------------------- */

.presenter-controls {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .5rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font-family: var(--font-mono);
  font-size: .8rem;
  transition: var(--transition-era);
}
.presenter-controls button {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.presenter-controls button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.presenter-controls button:disabled { opacity: .35; cursor: default; }
.presenter-counter { color: var(--muted); min-width: 4.5em; text-align: center; user-select: none; }

.presenter-exit {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 200;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.presenter-exit:hover { color: var(--accent); border-color: var(--accent); }

body.presenter-mode { overflow: hidden; }
body.presenter-mode .site-footer { display: none; }
body.presenter-mode .dotnav { display: none !important; }
body.presenter-mode .year-counter { cursor: default; }

body.presenter-mode #forward-timeline,
body.presenter-mode #past-timeline {
  display: block !important;
}
body.presenter-mode .era,
body.presenter-mode .past,
body.presenter-mode .past-intro {
  display: none !important;
}
body.presenter-mode .era.presenter-current,
body.presenter-mode .past.presenter-current,
body.presenter-mode .past-intro.presenter-current {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  border-bottom: none;
  /* Normally a section just sits on the body's background in the flow.
     Once both <main>s collapse to zero height behind a fixed slide, the
     footer moves up to y=0 and shows through the slide's transparent
     padding — so the current slide needs its own opaque background. */
  background: var(--bg);
}
/* Centered content taller than the viewport overflows equally above and
   below, making the true top unreachable via scrollTop=0. Slides are
   short enough now (one subsection or card at a time) that this is rare,
   so default to centered — JS measures each slide after it's shown and
   adds .presenter-overflow only when it genuinely doesn't fit, rather
   than top-aligning everything unconditionally. .era is a row-direction
   flex container (its vertical axis is the cross axis: align-items);
   .past/.past-intro are column-direction (vertical axis is the main
   axis: justify-content) — same fix, different property per axis. */
body.presenter-mode .era.presenter-current.presenter-overflow { align-items: flex-start !important; }
body.presenter-mode .past.presenter-current.presenter-overflow,
body.presenter-mode .past-intro.presenter-current.presenter-overflow { justify-content: flex-start !important; }

/* A single reusable slide for the per-subsection breakdown of a forward
   era (title / Civilisation / Successor / Technology / Example /
   Intelligence / Day-in-life / Creation / Historical Importance) — its
   content is swapped in per slide rather than cloning 90 static sections. */
#presenter-virtual-slide { text-align: left; }
.presenter-sub { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.presenter-sub-title { text-align: left; }
.presenter-sub-title .era-icon { width: 3rem; height: 3rem; margin-bottom: 1.5rem; }
.presenter-sub-title .era-art { max-width: 100%; height: clamp(180px, 30vw, 320px); margin: 1.5rem 0 0; }
.presenter-sub-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--accent2);
  margin-bottom: .7em;
}
.presenter-sub-body {
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  line-height: 1.65;
  max-width: 38em;
}
.presenter-sub-card { max-width: 42em; margin: 0 auto; }
.presenter-sub-card .callout,
.presenter-sub-card .example-card,
.presenter-sub-card .historical-note {
  font-size: 1.1rem;
  margin-bottom: 0;
}
.presenter-sub-card .day-in-life { border-top: none; padding-top: 0; margin-top: 0; font-size: 1.1rem; }

body.presenter-mode .era.presenter-current.presenter-widget-only > .era-inner > *:not(.interactive-block):not(.changelog) {
  display: none !important;
}
body.presenter-mode .era.presenter-current.presenter-widget-only > .era-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
body.presenter-mode .presenter-widget-only .interactive-block { font-size: 1.05rem; }

/* ---------------------------- era layout ---------------------------- */

.era {
  min-height: 100vh;
  padding: 7rem 1.5rem 5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: var(--transition-era);
}

.era-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.era-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--accent);
  margin-bottom: .75rem;
}

.era-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 1rem;
  color: var(--accent);
}

.era-title {
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  margin-bottom: .3em;
  letter-spacing: -0.01em;
}

.era-tagline {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 42em;
  margin-bottom: 2.5rem;
}

.era-art {
  width: 100%;
  max-width: 640px;
  height: clamp(140px, 24vw, 220px);
  margin: 0 0 2.5rem;
  color: var(--accent);
  transition: var(--transition-era);
}
.era-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 600px) {
  .era-art { height: clamp(110px, 40vw, 160px); margin-bottom: 2rem; }
}

.era-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 880px) {
  .era-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.era-col h3 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent2);
  margin-top: 1.6em;
}
.era-col h3:first-child { margin-top: 0; }
.era-col p { color: var(--fg); opacity: .92; }

.callout, .example-card, .historical-note {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,0.02);
}
.callout h4, .example-card h4, .historical-note h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .6em;
}
.example-card h4 span { color: var(--fg); text-transform: none; letter-spacing: 0; font-weight: 700; }
.day-in-life { font-style: italic; opacity: .9; border-top: 1px dashed var(--border); padding-top: 1em; margin-top: 1em; }
.historical-note { background: rgba(94,230,200,0.05); border-color: rgba(94,230,200,0.25); }

.fragment-list { display: flex; flex-direction: column; gap: .4em; font-family: var(--font-mono); font-size: .85rem; }
.fragment-list span { display: block; opacity: .9; }

/* ---------------------------- interactive blocks ---------------------------- */

.interactive-block {
  margin-top: 2.5rem;
  border-radius: var(--radius);
  border: 1px dashed var(--accent);
  padding: 1.5rem;
  background: rgba(94,230,200,0.04);
}
.interactive-label { font-family: var(--font-display); font-size: .95rem; margin-bottom: 1rem; }
.interactive-label strong { color: var(--accent); }
.widget-surface {
  min-height: 220px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-surface canvas { display: block; width: 100%; height: 100%; }
.interactive-hint { font-size: .8rem; color: var(--muted); margin-top: .75rem; margin-bottom: 0; }

.cg-controls button:disabled { opacity: .35; cursor: default; }
.cg-controls button:not(:disabled):hover { border-color: var(--accent); }

.changelog {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ---------------------------- per-era themes (forward) ---------------------------- */

body[data-era="present"] {
  --bg: #f7f6f2; --bg2: #ffffff; --fg: #1a1c20; --muted: #6b7280;
  --accent: #2563eb; --accent2: #db2777; --border: rgba(0,0,0,0.1);
  --font-body: Georgia, "Times New Roman", serif;
}
body[data-era="present"] .site-header { background: linear-gradient(to bottom, rgba(247,246,242,0.92), rgba(247,246,242,0)); }
body[data-era="present"] code { background: rgba(0,0,0,0.06); }

body[data-era="2525"] {
  --bg: #0e1420; --bg2: #131b2b; --fg: #e8edf7; --muted: #8b96ac;
  --accent: #7dd3fc; --accent2: #c084fc; --border: rgba(255,255,255,0.12);
}

body[data-era="3535"] {
  --bg: #0c1710; --bg2: #12211a; --fg: #e7f3ea; --muted: #86a390;
  --accent: #6ee7b7; --accent2: #a3e635; --border: rgba(255,255,255,0.1);
}

body[data-era="4545"] {
  --bg: #14100a; --bg2: #1d1710; --fg: #f2ead9; --muted: #a8977a;
  --accent: #f0b429; --accent2: #f97316; --border: rgba(255,255,255,0.12);
}

body[data-era="5555"] {
  --bg: #120a18; --bg2: #1a0f22; --fg: #f1e8fb; --muted: #a68fc2;
  --accent: #d8b4fe; --accent2: #f472b6; --border: rgba(255,255,255,0.12);
}

body[data-era="6565"] {
  --bg: #0a1412; --bg2: #0f1e1a; --fg: #e6f2ee; --muted: #7fa89c;
  --accent: #2dd4bf; --accent2: #84cc16; --border: rgba(255,255,255,0.1);
}

body[data-era="7510"] {
  --bg: #0a0a12; --bg2: #12121e; --fg: #ece9f7; --muted: #8d87ad;
  --accent: #a78bfa; --accent2: #facc15; --border: rgba(255,255,255,0.12);
  --font-body: "Iowan Old Style", Georgia, serif;
}

body[data-era="8525"] {
  --bg: #06121c; --bg2: #0a1c2b; --fg: #e2eef7; --muted: #7594ab;
  --accent: #38bdf8; --accent2: #94a3b8; --border: rgba(255,255,255,0.1);
}

body[data-era="9595"] {
  --bg: #050506; --bg2: #0a0a0c; --fg: #e8e8ee; --muted: #6f6f7c;
  --accent: #ffffff; --accent2: #b8b8ff; --border: rgba(255,255,255,0.08);
  --font-body: var(--font-mono);
}
body[data-era="9595"] .era-tagline,
body[data-era="9595"] .era-col p { letter-spacing: .01em; }

body[data-era="beyond"] {
  --bg: #08090b; --bg2: #0d0e11; --fg: #dcdfe6; --muted: #7a8090;
  --accent: #c9cdd6; --accent2: #8b8f99; --border: rgba(255,255,255,0.1);
  --font-body: "Iowan Old Style", Georgia, serif;
}

.era-outro { border-bottom: none; }
.museum-text { max-width: 60ch; }
.museum-text .thesis { font-size: 1.3rem; font-family: var(--font-display); border-left: 3px solid var(--accent); padding-left: 1em; margin: 1.6em 0; }
.museum-text .return-hint { color: var(--muted); font-style: italic; }

/* ==========================================================================
   PAST LIGHTCONE
   ========================================================================== */

body[data-mode="past"] { --transition-era: background-color .5s ease, color .5s ease, border-color .5s ease; }

.past-intro {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 1.5rem 4rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.past {
  min-height: 100vh;
  padding: 6rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--border);
  transition: var(--transition-era);
}
.past h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: .3em; }
.past-icon { display: block; width: 2.25rem; height: 2.25rem; margin: 0 auto 1rem; color: var(--accent); }
.past-date { display: block; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); font-weight: 400; letter-spacing: .05em; margin-top: -.1rem; margin-bottom: 1.4rem; }
.past p { max-width: 56ch; }
.past-caption { font-size: .85rem; color: var(--muted); font-style: italic; }

/* regressing visual language, oldest → newest as we go further back */

body[data-past="modern-web"] { --bg:#f5f6fa; --fg:#14161c; --muted:#6b7280; --accent:#7c5cff; --border: rgba(0,0,0,.1); --font-display: -apple-system, sans-serif; }
body[data-past="iphone"] { --bg: linear-gradient(#dfe7f0,#c9d6e6); --bg:#dbe4ef; --fg:#22262e; --muted:#5b6675; --accent:#c98a3e; --border: rgba(0,0,0,.15); }
body[data-past="iphone"] .past { background: linear-gradient(#e9edf2,#c3cedb); }

body[data-past="xp"] { --bg:#3a6ea5; --fg:#ffffff; --muted:#dbe9fb; --accent:#ffde59; --border: rgba(255,255,255,.4); --font-body: Tahoma, Verdana, sans-serif; --font-display: Tahoma, Verdana, sans-serif; }
body[data-past="xp"] .past { background: linear-gradient(#5b8fd6 0%, #3a6ea5 40%, #2f5d8f 100%); }
body[data-past="xp"] h2 { text-shadow: 1px 1px 0 rgba(0,0,0,.35); }

body[data-past="win95"] { --bg:#c0c0c0; --fg:#000000; --muted:#333333; --accent:#000080; --border:#808080; --font-body: "Segoe UI", Tahoma, sans-serif; --font-display: "Segoe UI", Tahoma, sans-serif; }
body[data-past="win95"] .past { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #808080; }
body[data-past="win95"] h2 { color: #000080; }

.win95-window {
  width: 100%; max-width: 300px; margin: 1.4rem auto 0; text-align: left;
  background: #c0c0c0; color: #000;
  box-shadow: inset -1px -1px 0 #0a0a0a, inset 1px 1px 0 #dfdfdf, inset -2px -2px 0 #808080, inset 2px 2px 0 #fff;
  font-family: "Segoe UI", Tahoma, sans-serif;
}
.win95-titlebar {
  background: linear-gradient(90deg, #08216b, #1084d0 65%, #a5cef7);
  color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .02em;
  padding: .25rem .35rem; display: flex; align-items: center; justify-content: space-between;
}
.win95-window-btns { display: flex; gap: 2px; }
.win95-window-btns span {
  width: 15px; height: 13px; background: #c0c0c0; color: #000;
  font-size: .6rem; line-height: 13px; text-align: center;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
}
.win95-window-body {
  padding: .65rem .7rem; font-family: "Courier New", monospace; font-size: .78rem; color: #000;
}

body[data-past="zxspectrum"] { --bg:#c9c4b6; --fg:#241f18; --muted:#6b6558; --accent:#cc1414; --border:#8a8374; --font-body: Georgia, serif; --font-display: Georgia, serif; }
body[data-past="zxspectrum"] .past { background: linear-gradient(#d4d0c2, #c9c4b6); }
.zx-loading-strip {
  width: 200px; height: 14px; margin: 1.4rem auto 0; border-radius: 2px;
  box-shadow: 0 0 0 2px #241f18;
  animation: zx-flicker 1.4s steps(1) infinite;
}
@keyframes zx-flicker {
  0%   { background: #000000; }
  14%  { background: #0000d7; }
  28%  { background: #d70000; }
  42%  { background: #d700d7; }
  57%  { background: #009900; }
  71%  { background: #00a7a7; }
  85%  { background: #b7b700; }
  100% { background: #000000; }
}

body[data-past="system7"] { --bg:#ffffff; --fg:#000000; --muted:#555555; --accent:#000000; --border:#000000; --font-body: "Chicago", "Helvetica Neue", Helvetica, sans-serif; --font-display: "Chicago", "Helvetica Neue", Helvetica, sans-serif; }
body[data-past="system7"] .past { background: repeating-linear-gradient(45deg,#fff,#fff 2px,#f0f0f0 2px,#f0f0f0 4px); }

body[data-past="msdos"], body[data-past="terminal"] { --bg:#000000; --fg:#33ff66; --muted:#1f9c44; --accent:#33ff66; --border:#1f9c44; --font-body: var(--font-mono); --font-display: var(--font-mono); }
body[data-past="msdos"] .past, body[data-past="terminal"] .past {
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.35) 3px),
    #000;
}
body[data-past="terminal"] h2, body[data-past="msdos"] h2 { text-shadow: 0 0 6px currentColor; }

body[data-past="hacker80s"] { --bg:#000000; --fg:#00ff41; --muted:#0aa62e; --accent:#00ff41; --border:#0aa62e; --font-body: var(--font-mono); --font-display: var(--font-mono); }
body[data-past="hacker80s"] .past { background: #000; }
body[data-past="hacker80s"] h2 { text-shadow: 0 0 8px currentColor; }

body[data-past="mainframe"] { --bg:#1a1206; --fg:#ffb000; --muted:#a9691d; --accent:#ffb000; --border:#a9691d; --font-body: var(--font-mono); --font-display: var(--font-mono); }

body[data-past="punchcard"] { --bg:#e9dcb5; --fg:#2b2416; --muted:#6b5c3e; --accent:#7a5c2e; --border:#b8a06a; --font-body: "Courier New", monospace; --font-display: "Courier New", monospace; }

body[data-past="papertape"] { --bg:#efe6cf; --fg:#33291a; --muted:#7a6b4a; --accent:#8a6b2e; --border:#c9b789; --font-body: "Courier New", monospace; --font-display: "Courier New", monospace; }

body[data-past="mechanical"] { --bg:#2b1d12; --fg:#e8dcc4; --muted:#a4906c; --accent:#c9a24b; --border:#5a4326; --font-body: Georgia, serif; --font-display: Georgia, serif; }

body[data-past="jacquard"] { --bg:#2a1f2e; --fg:#f2e6f0; --muted:#b79cc0; --accent:#d88fd0; --border:#6b4f73; }
body[data-past="jacquard"] .past { background: repeating-linear-gradient(90deg, #35283a, #35283a 6px, #2a1f2e 6px, #2a1f2e 12px); }

body[data-past="babbage"] { --bg:#1c1712; --fg:#e9dcc0; --muted:#a08e6a; --accent:#c9a24b; --border:#4a3d28; --font-body: Georgia, serif; }

body[data-past="astronomical"] { --bg:#0a0e1e; --fg:#e6e9f5; --muted:#7a83a8; --accent:#f2d675; --border:#2a3260; }
body[data-past="astronomical"] .past { background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent); background-color: #0a0e1e; }

body[data-past="abacus"] { --bg:#3a2a1a; --fg:#f0e0c0; --muted:#b39568; --accent:#d4a24e; --border:#6b4d2a; --font-body: Georgia, serif; }

body[data-past="claytablet"] { --bg:#8a6a45; --fg:#2b1d0f; --muted:#4a3620; --accent:#3b2a16; --border:#6b4e2e; --font-body: Georgia, serif; }

body[data-past="tally"] { --bg:#c9b899; --fg:#2b2416; --muted:#5c4f37; --accent:#3b3120; --border:#a4926e; --font-body: Georgia, serif; }

body[data-past="knotrope"] { --bg:#5a3a24; --fg:#f0e4cc; --muted:#c2a578; --accent:#e0b878; --border:#7a5636; --font-body: Georgia, serif; }

body[data-past="memorypalace"] { --bg:#241a12; --fg:#f2e6d2; --muted:#b89870; --accent:#e6b366; --border:#4a3520; --font-body: "Iowan Old Style", Georgia, serif; }

body[data-past="language"] { --bg:#0b0e18; --fg:#e6e9f2; --muted:#7a83a0; --accent:#f2d675; --border:#252d48; --font-body: Georgia, serif; }

body[data-past="fire"] { --bg:#170e08; --fg:#ffdcb0; --muted:#c78a4a; --accent:#ff8a3d; --border:#4a2c14; --font-body: Georgia, serif; }
body[data-past="fire"] .past { background: radial-gradient(circle at 50% 60%, rgba(255,138,61,.18), rgba(23,14,8,0) 60%), #170e08; animation: flicker 4s ease-in-out infinite; }
@keyframes flicker { 0%,100% { filter: brightness(1); } 45% { filter: brightness(1.08); } 60% { filter: brightness(.95); } }

body[data-past="presymbolic"] { --bg:#050403; --fg:#c9c2b8; --muted:#6b6459; --accent:#8a8074; --border:#2a2620; --font-body: Georgia, serif; }

/* widgets specific to past-lightcone */
.dos-terminal, .punchcard-widget, .abacus-widget {
  width: 100%; max-width: 560px;
  margin: 1.5rem auto 0;
  border-radius: 6px;
  min-height: 180px;
}

.dos-terminal {
  background: #000;
  border: 2px solid #1f9c44;
  padding: 1rem;
  text-align: left;
  font-family: var(--font-mono);
  color: #33ff66;
}
.dos-terminal .dos-output { white-space: pre-wrap; min-height: 100px; margin-bottom: .5rem; }
.dos-terminal .dos-line { display: flex; gap: .4em; }
.dos-terminal input {
  background: transparent; border: none; color: #33ff66; font-family: var(--font-mono);
  font-size: 1rem; flex: 1; outline: none;
}

.punchcard-widget, .abacus-widget { background: rgba(0,0,0,0.06); border: 1px solid var(--border); }

/* ---------------------------- footer ---------------------------- */

.site-footer {
  padding: 3rem 1.5rem;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ---------------------------- utility ---------------------------- */

[hidden] { display: none !important; }

@media (max-width: 600px) {
  .era { padding: 6rem 1.1rem 3.5rem; }
  .example-card, .callout, .historical-note { padding: 1.1rem; }
}