/* ============================================================
   THE NECESSARY STAGE — design system: THE AGITPROP STAGE
   ------------------------------------------------------------
   Two propaganda machines share one wall. The nineteenth
   century speaks in poster ink on unbleached stock — the red
   wedge, the heavy rule, the halftone crowd. The twenty-first
   speaks from a screen — flat, cool, teal-lit, always dark.
   One condensed poster letter shouts for both sides; only the
   ink and the surface change. The referee (chips, flags, the
   register) wears neither century's color: ochre and ink only.
   Century semantics are the most breakable rule: red/teal only
   ever mean centuries; one teal VERBATIM chip is a bug.
   House rules that survive any redesign:
   - tokens on :root, dark variant re-declares them under .dark
   - reading surface never pure white, ink never pure black
   - accents carry meaning; --screen-* never swaps with theme
   ============================================================ */

:root {
  /* surfaces & ink */
  --paper:    #F2EEE3;  /* unbleached poster stock */
  --paper-2:  #E8E1CF;  /* pasted-over layer, boxes, programme ground */
  --ink:      #1A1714;  /* poster black */
  --muted:    #6C6353;  /* weathered impression */
  --rule:     #C9BFA6;  /* hairlines */
  /* century inks */
  --red:      #A6261A;  /* 1848 text ink — the century of steam speaking */
  --wedge:    #C22F1F;  /* 1848 display ink — the wedge, poster lines, numerals */
  --teal:     #106878;  /* 2036 text ink on paper — the century of compute */
  --flag:     #7A5E24;  /* the referee: claim-flags, RENDERED, caveats */
  /* the screen — the 21st century's material; intrinsically lit, never themed */
  --screen:      #101418;
  --screen-ink:  #E6EEF0;
  --screen-teal: #57B7C9;
  --screen-mut:  #8FA6AD;
  /* template aliases (structural CSS below reads these) */
  --c-bg: var(--paper);
  --c-surface: var(--paper-2);
  --c-ink: var(--ink);
  --c-muted: var(--muted);
  --c-rule: var(--rule);
  --c-accent: var(--red);
  --c-accent-soft: var(--wedge);
  /* type */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Spectral", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, monospace;
  /* layout */
  --measure: 39rem;     /* ~68 characters of Spectral at 18px */
  --page: 72rem;
}

html.dark {
  --paper:    #16130E;  /* the hall after the demo, posters still up */
  --paper-2:  #211C12;
  --ink:      #EDE5D2;
  --muted:    #A2977E;
  --rule:     #413A2A;
  --red:      #E8735C;
  --wedge:    #D9503A;
  --teal:     #58B0C0;
  --flag:     #C9A75B;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Seat the footer at the bottom on short pages — without this, a 404 at
     800px tall ends with the colophon mid-viewport and bare paper below. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

body > main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  /* Anton — the poster condensed: one weight (400), always uppercase */
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  text-wrap: balance;
}

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-ink); text-decoration-thickness: 2px; }

code, pre, .data { font-family: var(--font-mono); font-size: 0.9em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-accent); color: var(--c-bg); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 10; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--c-rule); }

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand { text-decoration: none; color: var(--c-ink); }
.brand__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

.masthead__right { display: flex; align-items: center; gap: 1.4rem; }
.masthead__links { display: flex; align-items: center; gap: 1.1rem; }
.masthead__actions { display: flex; align-items: center; gap: 0.6rem; }

.navlink {
  font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--c-ink); text-decoration: none;
}
.navlink:hover { color: var(--c-accent); }

.masthead__burger { display: none; }

.theme-toggle {
  background: none; border: 1px solid var(--c-rule); border-radius: 999px;
  width: 2.1rem; height: 2.1rem; padding: 0.35rem; cursor: pointer; color: var(--c-ink);
}
.theme-toggle svg { width: 100%; height: 100%; }
.theme-toggle__moon { display: none; }
html.dark .theme-toggle__sun { display: none; }
html.dark .theme-toggle__moon { display: block; }

@media (max-width: 40rem) {
  .masthead__burger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--c-ink); }
  .masthead__links {
    display: none; position: absolute; right: 1rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.8rem;
    background: var(--c-surface); border: 1px solid var(--c-rule);
    border-radius: 6px; padding: 1rem 1.25rem; z-index: 20;
  }
  .masthead__links.is-open { display: flex; }
  /* the toggle and burger stay side by side and always visible */
  .masthead__right { gap: 0.6rem; }
}

/* ---------- content ---------- */

.hero { max-width: var(--measure); margin: 3.5rem auto 1rem; padding: 0 1.25rem; }
.hero__title { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 0.5rem; }
.hero__dek { color: var(--c-muted); font-size: 1.15rem; margin: 0; }

.prose { max-width: var(--measure); margin: 2rem auto 4rem; padding: 0 1.25rem; }
.prose h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  /* pasted-over layer + poster bar — the system has no side-tab borders */
  margin: 1.5rem 0; padding: 0.9rem 1.2rem;
  background: var(--paper-2); border-top: 4px solid var(--ink); font-style: italic;
}
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border-bottom: 1px solid var(--c-rule); padding: 0.4rem 0.6rem; text-align: left; }
.prose th { font-family: var(--font-ui); font-size: 0.85rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--c-rule); margin-top: 2rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 2rem 1.25rem 2.5rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--c-muted);
}
.colophon__title { font-family: var(--font-display); color: var(--c-ink); margin: 0 0 0.5rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.colophon__links a { color: var(--c-muted); }
.colophon__foot { margin-top: 1.25rem; }

/* ============================================================
   The Agitprop Stage — apparatus (from design.html, the frozen
   stage-2 spec). Century semantics: red/wedge = 1848 speaking,
   teal/screen = the 21st, ochre = the referee. No side-tabs.
   ============================================================ */

/* poster grain baked into the ground (never a fixed overlay) */
body {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/><feColorMatrix values="0 0 0 0 0.32 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 0.06 0"/></filter><rect width="280" height="280" filter="url(%23g)"/></svg>');
}

.mono { font-family: var(--font-mono); }

/* ---------- home: the stagehead (wedge + curve masthead) ---------- */

.stagehead { position: relative; padding: 3.5rem 0 2.5rem; overflow: hidden;
  max-width: var(--page); margin: 0 auto; }
.stagehead .geo { position: absolute; inset: 0; pointer-events: none; }
.stagehead .geo .wedge {
  position: absolute; left: 0; bottom: -4%; width: 30%; height: 112%;
  background: var(--wedge);
  clip-path: polygon(42% 100%, 98% 100%, 58% 0);
  opacity: .92;
}
.stagehead .geo svg.curve { position: absolute; right: 0; bottom: 6%; width: 58%; height: 82%; }
.stagehead .inner { position: relative; margin-left: clamp(1.5rem, 16%, 11rem); padding-right: 1.25rem; }
.stagehead h1 { font-size: clamp(3rem, 10.5vw, 6rem); margin: 0; }
.stagehead h1 .l { display: inline-block; background: var(--c-bg); padding: .02em .14em .04em; }
.stagehead h1 .n2 { color: var(--wedge); }
.stagehead .sub { font-style: italic; font-size: 1.25rem; color: var(--c-muted); margin: .9rem 0 0; max-width: 32rem; }
.stagehead .sub .l { display: inline-block; background: var(--c-bg); padding: .05em .5em .1em; }

.band {
  max-width: var(--page); margin: 2.2rem auto; padding: .5rem 1.25rem;
  border-top: 3px solid var(--c-ink); border-bottom: 1px solid var(--c-ink);
  display: flex; gap: 1rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.band .y { color: var(--red); } .band .y2 { color: var(--teal); }

.twist { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
.twist .lede { font-size: 1.2rem; }
.twist .lede strong { color: var(--red); font-weight: 600; }

/* ---------- programme (the eight acts) ---------- */

.programme { max-width: 44rem; margin: 2.6rem auto 3rem; padding: 1rem 1.25rem 0;
  border-top: 8px solid var(--c-ink); }
.programme h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.programme h2 .d2 { color: var(--wedge); }
.programme ol { list-style: none; margin: 0; padding: 0; }
.programme li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0 1.1rem;
  align-items: baseline; padding: .62rem 0; border-top: 1px solid var(--c-rule); }
.programme .act { font-family: var(--font-display); font-size: 1.35rem; color: var(--wedge);
  line-height: 1; text-transform: uppercase; }
.programme .t { font-weight: 600; font-size: 1.08rem; }
.programme .t a { color: var(--c-ink); text-decoration: none; }
.programme .t a:hover { color: var(--red); text-decoration: underline; }
.programme .d { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--c-muted); text-align: right; }
@media (max-width: 560px) {
  .programme li { grid-template-columns: 3.4rem 1fr; }
  .programme .d { grid-column: 2; text-align: left; margin-top: .1rem; }
}

/* ---------- essay head: the act numeral block ---------- */

.acthead { display: flex; gap: 1.4rem; align-items: flex-start; margin: 3rem 0 1.4rem; }
.acthead .num {
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1;
  color: var(--paper); background: var(--wedge);
  padding: .35rem .55rem .25rem; min-width: 4.2rem; text-align: center; }
html.dark .acthead .num { color: #16130E; }
.acthead .hgroup h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); margin: 0; }
.acthead .meta { font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin: .5rem 0 0; }

.standfirst { font-size: 1.22rem; font-style: italic; color: var(--c-muted); line-height: 1.55; }

/* ---------- plates (guarded; no placeholder ships) ---------- */

.plate { margin: 2rem 0; border: 2px solid var(--c-ink); background: var(--paper-2); }
.plate img { display: block; width: 100%; aspect-ratio: 2/1; height: auto; object-fit: cover; }
.plate figcaption { font-size: .9rem; font-style: italic; color: var(--c-muted);
  padding: .55rem .8rem; border-top: 1px solid var(--c-rule); }

/* ---------- quote-class chips — the referee's ink ---------- */

.tag { font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; padding: .1em .5em; border: 1.5px solid currentColor;
  text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.tag.verbatim { color: var(--c-ink); }
.tag.rendered, .tag.forecast { color: var(--flag); }
a.tag:hover { background: var(--paper-2); }
.class-key { font-family: var(--font-mono); font-size: .72rem; color: var(--flag);
  margin: 1.2rem 0; padding: .4rem 0; border-top: 1px solid var(--c-rule); }
.class-key a { color: var(--flag); }

/* ---------- poster lines — the speaking century's material ---------- */

.poster { margin: 2.6rem -1rem; padding: 2rem 1.6rem 1.7rem; background: var(--screen);
  clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); }
.poster .line { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.9rem, 5.6vw, 3.1rem); line-height: 1.02; color: var(--screen-teal);
  margin: 0; text-align: center; }
.poster .attr { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--screen-mut); margin: 1rem 0 0; text-align: center; }
.poster .attr .tag { color: var(--screen-ink); }
.poster .attr a { color: var(--screen-mut); }
.poster--paper { background: var(--paper-2); }
.poster--paper .line { color: var(--wedge); }
.poster--paper .attr { color: var(--c-muted); }
.poster--paper .attr .tag { color: var(--c-ink); }
.poster--paper .attr a { color: var(--c-muted); }
@media (max-width: 560px) { .poster { margin: 2.2rem 0; } }

/* ---------- dialogue — speakers keep century ink; no side-tabs ---------- */

.dialogue { margin: 1.8rem 0; }
.dialogue .turn { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0 1rem;
  padding: .7rem 0; border-top: 1px solid var(--c-rule); }
.dialogue .who { font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding-top: .35rem; }
.dialogue .who.c21 { color: var(--teal); } .dialogue .who.c19 { color: var(--red); }
.dialogue .turn p { margin: 0; }
@media (max-width: 560px) {
  .dialogue .turn { grid-template-columns: 1fr; }
  .dialogue .who { padding-top: 0; }
}

/* ---------- boxed aside + claim-flag — the referee ---------- */

.box { margin: 2.2rem 0; background: var(--paper-2); border-top: 6px solid var(--flag);
  padding: 1.2rem 1.5rem; }
.box .box-kicker { font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--flag); margin: 0 0 .5rem; }
.box p { margin: .5rem 0; font-size: 1rem; }

.claim-flag { font-family: var(--font-mono); font-size: .75rem; line-height: 1.55;
  color: var(--flag); margin: 1.8rem 0; padding-top: .5rem; border-top: 3px double var(--flag); }
.claim-flag a { color: var(--flag); }

/* ---------- the double bill — two materials, one wall ---------- */

.double-bill { display: grid; grid-template-columns: 1fr 1fr; margin: 2.4rem 0;
  border: 2px solid var(--c-ink); }
.bill { padding: 1.7rem 1.5rem 1.4rem; }
.bill .b-head { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem;
  letter-spacing: .03em; margin: 0 0 1rem; }
.bill blockquote { margin: 0; padding: 0; background: none; border: none;
  font-size: 1.12rem; font-style: italic; line-height: 1.55; }
.bill .cite { font-family: var(--font-mono); font-size: .72rem; font-style: normal;
  letter-spacing: .04em; margin-top: 1rem; display: block; }
.bill.c19 { background: var(--paper-2); border-top: 8px solid var(--wedge); }
.bill.c19 .b-head { color: var(--red); }
.bill.c19 .cite { color: var(--c-muted); }
.bill.c19 .cite a { color: var(--c-muted); }
.bill.c21 { background: var(--screen); color: var(--screen-ink);
  border-top: 8px solid var(--screen-teal); }
.bill.c21 .b-head { color: var(--screen-teal); }
.bill.c21 .cite { color: var(--screen-mut); }
.bill.c21 .cite a { color: var(--screen-mut); }
.bill.c21 blockquote { font-family: var(--font-mono); font-style: normal;
  font-size: .98rem; line-height: 1.6; }
@media (max-width: 640px) {
  .double-bill { grid-template-columns: 1fr; }
  .bill.c19 { border-top: 8px solid var(--wedge); }
  .bill.c21 { border-top: 8px solid var(--screen-teal); }
}

/* ---------- the register (sources page + in-essay strips) ---------- */

.register .row { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem;
  padding: .6rem 0; border-top: 1px solid var(--c-rule); }
.register .row:target { background: var(--paper-2); }
.register .cls { font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; align-self: baseline; }
.register .cls.v { color: var(--c-ink); } .register .cls.r { color: var(--flag); }
.register .q { font-size: .98rem; }
.register .src { grid-column: 2; font-family: var(--font-mono); font-size: .72rem;
  color: var(--c-muted); }
.register .src a { color: var(--c-muted); }
.register h2 { font-size: 1.4rem; margin: 2.2rem 0 .3rem; }
@media (max-width: 560px) {
  .register .row { grid-template-columns: 1fr; }
  .register .src { grid-column: 1; }
}

/* ---------- essay prev/next: the programme rail ---------- */

.actnav { max-width: var(--measure); margin: 3rem auto 0; padding: 1rem 1.25rem 0;
  border-top: 8px solid var(--c-ink);
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }
.actnav a { color: var(--c-ink); text-decoration: none; }
.actnav a:hover { color: var(--red); }
.actnav .next { text-align: right; margin-left: auto; }

/* essays are prose plus full-bleed-ish apparatus */
.essay-body { max-width: var(--measure); margin: 0 auto 3rem; padding: 0 1.25rem; }
.essay-body > p { max-width: var(--measure); }

/* ---------- motion & print floor (non-negotiable) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .colophon, .theme-toggle, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}