/* ============================================================
   AI & Consciousness — design system: CRITICAL APPARATUS
   ------------------------------------------------------------
   An apparatus criticus is the band of small type carrying
   everything that points OUTSIDE the text — variants, sources,
   the editor's doubts. It is also a set of instruments aimed at
   something you cannot observe directly. Both meanings are the
   site's argument, so the margin apparatus is the design.

   The rule that governs every choice below:
     body prose is ink on paper and NEVER carries an accent;
     everything reaching outside the essay lives in the
     apparatus — mono, small, tracked, accented.

   TWO semantic accents, deliberately (see specs/design.md and
   the design judge's round-1 observation #1 — do not "correct"
   this back to one):
     --c-apparatus  what the essay leans on
     --c-counter    the opposing case the brief's rule V3
                    requires of every essay: the red pen in the
                    margin. Never used for emphasis.

   House rules that survive any redesign: tokens on :root, dark
   re-declared under .dark, reading surface never pure white,
   ink never pure black.
   ============================================================ */

:root {
  /* ——— ground: a twentieth-century quarterly's stock, warm but grey-leaning ——— */
  --c-bg:        #F4F0E7;  /* page */
  --c-surface:   #EAE5D8;  /* apparatus blocks, register rows, counter-case ground */
  --c-ink:       #1F2320;  /* body prose — warm near-black with a green cast */
  --c-muted:     #5E645C;  /* deks, captions, disclosure line */
  --c-rule:      #D5CFC0;  /* hairlines */

  /* ——— semantic accents: meaning only, never decoration ——— */
  --c-apparatus: #2F6F63;  /* verdigris — anchor work, citations, register, pager */
  --c-counter:   #9C3B2E;  /* oxblood — the opposing case (rule V3) */

  /* aliases the template's structural rules expect */
  --c-accent:      var(--c-apparatus);
  --c-accent-soft: #24564C;

  /* ——— type ——— */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "Spectral", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-ui:      "IBM Plex Mono", ui-monospace, monospace;

  /* ——— measure ——— */
  --measure: 34rem;        /* ~66ch of Spectral at the body size */
  --rail:    15rem;        /* the apparatus rail beside it */
  --gutter:  3.25rem;
  --page:    76rem;

  /* tiled feTurbulence grain, opacity baked into the rect — never a fixed overlay */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Dark = the same reading room after hours, re-lit. Not an inversion:
   the ground keeps its green cast, the accents brighten rather than flip. */
html.dark {
  --c-bg:        #141715;
  --c-surface:   #20261F;
  --c-ink:       #E7E3D7;
  --c-muted:     #98A096;
  --c-rule:      #2C312D;
  --c-apparatus: #79C4B0;
  --c-counter:   #E28C74;
  --c-accent-soft: #9BD8C7;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* short pages (the 404) otherwise leave the footer floating mid-viewport */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg);
  background-image: var(--grain);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

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

/* the one authored focus state: same accent as every other "you are here" signal */
:focus-visible { outline: 2px solid var(--c-apparatus); outline-offset: 3px; }

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

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

/* The apparatus voice: mono, small, tracked, uppercase. Never below 11px —
   at that size the muted ink still clears AA (5.4:1 on the page ground,
   4.8:1 on the surface; judge obs. #2). */
.slug {
  font-family: var(--font-mono);
  font-size: 0.6875rem;   /* 11px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-apparatus);
}
.slug--muted   { color: var(--c-muted); }
.slug--counter { color: var(--c-counter); }

/* a slug used as a standalone return link (the 404) */
.backlink { display: block; margin-top: 2rem; }

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

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

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.85rem 1.5rem;
  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.3rem; }

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

.navlink {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted); text-decoration: none;
}
.navlink:hover { color: var(--c-apparatus); }
.navlink[aria-current] { color: var(--c-ink); }

.masthead__burger { display: none; }

.theme-toggle {
  position: relative;
  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-muted);
}
/* invisible hit-area extender: the drawn ring stays 2.1rem, the target reaches 44px */
.theme-toggle::after { content: ""; position: absolute; inset: -0.35rem; border-radius: 999px; }
.theme-toggle:hover { color: var(--c-apparatus); border-color: var(--c-apparatus); }
.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; position: relative;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--c-ink); }
  /* same trick as the theme toggle: drawn glyph unchanged, target ≥44px */
  .masthead__burger::after { content: ""; position: absolute; inset: -0.55rem -0.35rem; }
  .masthead__links {
    display: none; position: absolute; right: 1rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.35rem;
    background: var(--c-surface); border: 1px solid var(--c-rule);
    border-radius: 2px; padding: 1rem 1.25rem; z-index: 20;
  }
  .masthead__links .navlink { padding: 0.45rem 0; }
  .masthead__right { gap: 0.6rem; }
  .masthead__links.is-open { display: flex; }
}

/* ---------- home ---------- */

.hero {
  max-width: var(--page); margin: 0 auto; padding: 4.5rem 1.5rem 2.5rem;
  border-bottom: 2px solid var(--c-ink);
}
.hero__kicker { display: block; margin-bottom: 1.35rem; }
.hero__title {
  margin: 0; font-size: clamp(2.9rem, 7.5vw, 5.25rem); line-height: 0.95;
  letter-spacing: -0.012em;
}
.hero__title em { font-style: italic; color: var(--c-apparatus); }
.hero__dek {
  max-width: 38rem; margin: 1.6rem 0 0;
  font-size: 1.14rem; line-height: 1.6; color: var(--c-muted);
}
.hero__dek strong { color: var(--c-ink); font-weight: 600; }

/* the essay index — the archetype's TOC role */
.index {
  max-width: var(--page); margin: 0 auto; padding: 0 1.5rem 4rem;
  border-top: 1px solid var(--c-rule);
}
.entry {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 15rem;
  gap: 0 var(--gutter);
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--c-rule);
}
.entry__num {
  font-family: var(--font-display); font-size: 1.55rem; line-height: 1;
  color: var(--c-apparatus);
}
.entry h2 { margin: 0 0 0.3rem; font-size: 1.9rem; line-height: 1.1; }
.entry h2 a { color: inherit; text-decoration: none; }
.entry h2 a:hover { color: var(--c-apparatus); }
.entry__dek { margin: 0; color: var(--c-muted); font-size: 0.98rem; line-height: 1.55; }
.entry__start { display: block; margin-top: 0.6rem; }
.entry__anchor {
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6;
  color: var(--c-muted); border-left: 2px solid var(--c-apparatus);
  padding-left: 0.85rem; align-self: start; margin: 0.35rem 0 0;
}
.entry__anchor b {
  display: block; font-weight: 500; color: var(--c-apparatus);
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem;
  margin-bottom: 0.3rem;
}
.entry__anchor i { font-style: italic; }

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

.prose { max-width: var(--measure); margin: 2.5rem auto 4rem; padding: 0 1.5rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1.2rem; }
.prose h2 { font-size: 1.75rem; margin: 2.6rem 0 0.9rem; }
.prose > p { margin: 0 0 1.25rem; }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 2px solid var(--c-apparatus); color: var(--c-muted); font-style: italic;
}
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td {
  border-bottom: 1px solid var(--c-rule); padding: 0.5rem 0.6rem; text-align: left;
}
.prose th {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-apparatus);
}

/* ---------- the essay: a reading measure with an apparatus rail ---------- */

.essay {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  gap: 0 var(--gutter);
  justify-content: center;
  padding: 3.5rem 1.5rem 0;
}
.essay__head {
  grid-column: 1 / -1; width: 100%;
  max-width: calc(var(--rail) + var(--gutter) + var(--measure));
  margin: 0 auto 2.75rem;
}
.essay__num {
  font-family: var(--font-display); font-size: 1.25rem;
  color: var(--c-apparatus); letter-spacing: 0.1em;
}
.essay__head h1 {
  margin: 0.5rem 0 0.7rem; font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.01em;
}
.essay__dek {
  margin: 0; max-width: 34rem; font-size: 1.14rem; color: var(--c-muted); line-height: 1.55;
}
.essay__rule { margin-top: 2rem; height: 1px; background: var(--c-rule); }

/* The apparatus stays alongside the prose it belongs to. Sticky rather than
   fixed: fixed layers seam-band in the shots harness's stitched captures. */
.rail { grid-column: 1; position: sticky; top: 2rem; align-self: start; }
.rail > * + * { margin-top: 2.25rem; }
.anchor {
  border-top: 2px solid var(--c-apparatus); padding-top: 0.75rem; margin: 0;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.65; color: var(--c-muted);
}
.anchor b {
  display: block; font-weight: 500; color: var(--c-apparatus); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.55rem;
}
.anchor .work { display: block; color: var(--c-ink); font-style: italic; }
.rail__note {
  margin: 0; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.7;
  color: var(--c-muted); border-top: 1px solid var(--c-rule); padding-top: 0.7rem;
}

/* Sections list — the archetype's TOC, in the apparatus rather than the prose */
.toc { border-top: 1px solid var(--c-rule); padding-top: 0.7rem; }
.toc summary {
  display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-apparatus);
  margin-bottom: 0.6rem; cursor: pointer; list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; }
.toc details[open] summary::after { content: " −"; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 0.5rem; }
.toc a {
  font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.45;
  color: var(--c-muted); text-decoration: none; display: block;
  border-left: 2px solid transparent; padding-left: 0.7rem; margin-left: -0.7rem;
}
.toc a:hover { color: var(--c-apparatus); }
.toc a.is-current { color: var(--c-ink); border-left-color: var(--c-apparatus); }
.toc a.is-counter { color: var(--c-counter); }
.toc a.is-counter.is-current { border-left-color: var(--c-counter); }

.essay__body { grid-column: 2; }
.essay__body > p { margin: 0 0 1.25rem; }
.essay__body > p:first-of-type::first-letter {
  font-family: var(--font-display); float: left;
  font-size: 4.15rem; line-height: 0.78; padding: 0.06em 0.09em 0 0; color: var(--c-ink);
}
.essay__body h2 { font-size: 1.75rem; margin: 2.6rem 0 0.9rem; }

.pull {
  margin: 2.4rem 0; padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 2px solid var(--c-apparatus);
  font-family: var(--font-display); font-size: 1.62rem; line-height: 1.28; color: var(--c-ink);
}

/* rule V3 made structurally visible: an essay that skips it shows up in a screenshot */
.counter {
  margin: 2.75rem 0; padding: 1.5rem 1.6rem;
  background: var(--c-surface); border-left: 3px solid var(--c-counter);
}
.counter h2 {
  margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.6875rem;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-counter);
}
.counter p { margin: 0 0 0.9rem; }
.counter p:last-child { margin-bottom: 0; }

/* ---------- the source register ---------- */

.sources { margin-top: 3rem; border-top: 1px solid var(--c-rule); padding-top: 1rem; }
.sources h2, .register-head {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-apparatus); margin: 0 0 0.9rem;
}
.register {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.735rem; line-height: 1.6;
}
.register li {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--c-rule); color: var(--c-muted);
}
.register li:last-child { border-bottom: 0; }
.register a { overflow-wrap: anywhere; }
.register .n { color: var(--c-apparatus); }
.register i { font-style: italic; color: var(--c-ink); }
.register--full li { grid-template-columns: 2.4rem 1fr; padding: 0.75rem 0; }

/* the Pairs page: register rows carrying a topic, an anchor, and a crowding marker.
   Its own container — the two-column row needs more room than the reading measure. */
.pairs {
  max-width: calc(var(--rail) + var(--gutter) + var(--measure));
  margin: 1rem auto 4rem; padding: 0 1.5rem;
}
.pairs--intro { margin: 2.5rem auto 1rem; }
.pairs--intro h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.5rem 0 1.2rem; }
.pairs--intro p { max-width: var(--measure); margin: 0; }
.pair {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0 var(--gutter);
  padding: 1.4rem 0; border-bottom: 1px solid var(--c-rule); align-items: baseline;
}
.pair h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.pair p { margin: 0; color: var(--c-muted); font-size: 0.98rem; line-height: 1.55; }
.pair__anchor {
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; color: var(--c-muted);
  border-left: 2px solid var(--c-apparatus); padding-left: 0.85rem;
}
.pair__anchor i { font-style: italic; }
.crowded {
  display: inline-block; margin-top: 0.55rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-counter);
  border: 1px solid var(--c-counter); border-radius: 2px; padding: 0.15rem 0.45rem;
}
.pair .crowded-note { margin-top: 0.55rem; }

/* ---------- the disclosure block ---------- */

.disclosure {
  margin: 2rem 0; padding: 1.35rem 1.5rem;
  border: 1px solid var(--c-apparatus); border-left-width: 3px; background: var(--c-surface);
}
.disclosure b {
  display: block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-apparatus);
  margin-bottom: 0.6rem;
}
.disclosure p { margin: 0; font-size: 0.99rem; line-height: 1.6; }

/* ---------- pager ---------- */

.pager {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 3.25rem; padding: 1rem 0 0; border-top: 2px solid var(--c-ink);
  font-family: var(--font-mono); font-size: 0.72rem;
}
.pager a { text-decoration: none; display: block; max-width: 17rem; }
.pager .dir {
  display: block; font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.35rem;
}
.pager .ttl { color: var(--c-ink); }
.pager a:hover .ttl { color: var(--c-apparatus); }
.pager .next { text-align: right; }

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

.colophon { border-top: 1px solid var(--c-rule); margin-top: 3rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 2rem 1.5rem 2.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.7; color: var(--c-muted);
}
.colophon__title {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--c-ink); margin: 0 0 0.6rem;
}
.colophon__links {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.colophon__links a { color: var(--c-muted); text-decoration: none; }
.colophon__links a:hover { color: var(--c-apparatus); }
.colophon__foot { margin-top: 1.25rem; }
/* the AI-authorship line — present on every page, per the brief's rule V9 */
.colophon__disclosure {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--c-rule); color: var(--c-muted);
}

/* ---------- narrow: the rail collapses ABOVE the prose, in reading order ---------- */

@media (max-width: 62rem) {
  .entry { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1.25rem; }
  .entry__anchor { grid-column: 2; margin-top: 0.85rem; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair__anchor { margin-top: 0.85rem; }
  .essay { grid-template-columns: minmax(0, 1fr); }
  /* On narrow the margin must not become a toll gate: the anchor and the
     sections list stay ahead of the prose, the two boilerplate notes drop
     below it. display:contents lifts the rail's children into the grid so
     `order` can redistribute them; reading (DOM) order is unchanged. */
  .rail { display: contents; }
  .essay__body { grid-column: 1; order: 3; margin-top: 2rem; }
  .anchor { order: 1; }
  .toc { order: 2; margin-top: 1.4rem; }
  .rail__note { order: 4; margin-top: 1.4rem; }
  .rail__note + .rail__note { margin-top: 0.9rem; }
  .pager { order: 5; }
  .pull { font-size: 1.4rem; }
}

/* ---------- 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, .theme-toggle, .skip-link, .pager { display: none; }
  body { background: #fff; color: #000; background-image: none; }
  .counter, .disclosure { border-left: 3px solid #000; background: none; }
}