/* 024 (layout version; manuscript 023 unchanged): the stacked page-2 cards are bounded (rail + gutter + 22rem card, centred) instead of stretching
   across medium windows, and the five-across row starts at 1600 px (below it the columns squeezed the notes); from 480 px the stacked heading /
   context / question centre with the group. Card text centring, question spacing and the hand motion unchanged.
   023: layout unchanged from the delivered 022 (the manuscript lost chapter 14; nothing here depends on it).
   022: page 2 note text centred horizontally and vertically inside the five equal boxes; the whole question group (premise, continuation, thoughts,
   cue) farther below the cards (desktop + 64-96 px, stacked layouts + 24-40 px). Everything else as 021.
   021: AI COEXISTENCE on one line on wide screens (real glyph fit, clear of the doorway; AI / COEXISTENCE where the width requires it); page 2 with a
   short context note and five EQUAL note boxes (same width and height in every layout; the tallest note sets the shared height; no hover / selection
   state); the question continuation smaller with more air above it, thoughts slightly smaller; the AGI / ASI reading note before the introduction;
   the ending's explanatory sentences balanced line by line.
   019: the approved name AI / COEXISTENCE as a two-line block (COEXISTENCE kept whole on its own line; on narrow screens its size follows the
   width), the approved subtitle as the one opening description; page 2 question with a descending hierarchy (opening premise largest, continuation
   slightly smaller, two thought lines in the reading face); the ending (two outcome sentences, locked block, postscript) centred on the door's axis;
   #fg = soft darkening above the hands and below the text (src/background.js).
   018: title as a two-line block (THE SYMBIOTIC / ASCENT; three lines on phones); page 2 with short notes in weighted columns, the new question and its
   supporting line; stacked notes also below 1100 px width (reflow); the postscript gap is set by src/background.js from the measured text and hands.
   017: trajectory notes larger with more separation; the ending (locked block, hands layer, postscript after the passage); the credit line.
   015 layout and typography (editable; 014 + opening spacing, continuation cues, trajectory notes). All reading text is in normal document flow; the artwork is a fixed canvas behind it
   (src/background.js); the presentation scrim over the artwork is set in src/settings.js -> scrim. */
:root {
  --bg: #060605;                 /* the frames' own void = the dark reading surface */
  --ink: #f1ece2;                /* headings: warm white */
  --text: #e4ded2;               /* manifesto body: warm white */
  --soft: #c9c3b7;               /* supporting text, sources */
  --accent: #a3d48f;             /* green: opening lead, SYMBIOSIS, links */
  --line: rgba(241, 236, 226, .42);
  --rule: rgba(241, 236, 226, .16);
  --display: "D-DIN Condensed", "Bahnschrift Condensed", "Bahnschrift SemiBold Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --read: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;   /* normal-width reading font */
  /* reading sizes: phone (< 700 px wide) */
  --body: 20px; --h2: 27px; --lead: 22px; --label: 18px; --support: 18px; --pad: 22px; --cue: 20px; --note: 18px;
  --col: calc(var(--body) * 32.5);   /* manifesto column; verified against characters per line in review (?diag=1) */
}
@media (min-width: 700px)  { :root { --body: 22px; --h2: 30px; --lead: 26px; --label: 20px; --support: 19px; --pad: 40px; --cue: 22px; --note: 19px; } }
@media (min-width: 1100px) { :root { --body: 24px; --h2: 34px; --lead: 30px; --label: 22px; --support: 20px; --pad: 6vw; --cue: 24px; --note: 19px; } }

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
html.rm { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--text); font: 400 var(--body)/1.6 var(--read); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(163, 212, 143, .38); color: #fff; }
#bg { position: fixed; left: 0; top: 0; display: block; z-index: 0; }
#fg { position: fixed; left: 0; top: 0; display: block; z-index: 0; pointer-events: none; }   /* 019: after #hands in the document = above the hands, below the text */
main { position: relative; z-index: 1; }
h1, h2, h3, h4, p, ol, ul, blockquote { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; }
.title, .title2, .q1, .q2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.title, .title2, .lede, .sub, .q1, .q2 { text-wrap: balance; }

/* ---------------- OPENING: text dominant, spread through the central-left area (015: operator footprint, reference/operator_015_a/d) ---------------- */
/* HERO: headline at the top, introduction and continuation cue distributed over the first screen by auto margins (the free space is shared,
   so the copy no longer clusters under the headline); type sizes as 014 */
.hero { min-height: 100vh; min-height: 100svh; padding: 11vh var(--pad) 7vh 9vw; display: flex; }
.hero .col { max-width: min(70vw, 1340px); display: flex; flex-direction: column; flex: 1 1 auto; }
.title { font-size: max(56px, min(11.3vw, 24vh)); line-height: .88; letter-spacing: .005em; color: var(--ink); white-space: nowrap; }   /* 021: one line on wide screens; src/background.js fits the real glyphs (fitTitle) */
.title .l1, .title .l2 { display: inline; white-space: nowrap; }
.title.one .l1, .title.one .l2 { display: inline; }   /* AI COEXISTENCE */
.title.two .l1, .title.two .l2 { display: block; }    /* AI / COEXISTENCE: the same letter size, close lines; COEXISTENCE is never split */
.intro { margin-top: auto; padding-top: clamp(28px, 6vh, 80px); }
.lede { max-width: 22em; font: 600 max(var(--lead), min(2vw, 3.6vh))/1.3 var(--read); color: var(--accent); }   /* 019: the approved subtitle, the one opening description */
.hero .cue { margin-top: auto; padding-top: clamp(28px, 6vh, 80px); }

/* continuation cues: real anchors in document flow (to page 2 #trajectories, to the manifesto); no animation */
.cue a { font: 600 var(--cue)/1.4 var(--read); color: var(--accent); text-decoration: underline 1px rgba(163, 212, 143, .55); text-underline-offset: .28em; }   /* inline: the arrow stays with the last word when the cue wraps */
.cue a:hover, .cue a:focus-visible { color: #c6eab5; text-decoration-color: #c6eab5; }
.cue a:focus-visible { outline: 2px solid rgba(198, 234, 181, .7); outline-offset: 6px; border-radius: 2px; }
.cue .arrow { font-weight: 500; margin-left: .2em; text-decoration: none; display: inline-block; }
.cue .nw { white-space: nowrap; }   /* the arrow stays with the last word */

/* PAGE 2 (#trajectories): centred composition in the central area, clear of the doorway; each label carries a visible note */
.traj { margin-left: 4vw; width: min(88vw, 1700px); padding-top: 5.5vh; text-align: center; --pgap: clamp(14px, 1.15vw, 22px); }
.title2 { font-size: max(48px, min(6.6vw, 12vh)); line-height: .95; letter-spacing: .01em; color: var(--ink); }
.sub { margin-top: .55em; font: 500 var(--lead)/1.3 var(--read); color: var(--ink); }
.context { margin: .7em auto 0; max-width: 40em; font: 400 max(18px, min(1.05vw, 2.2vh))/1.45 var(--read); color: var(--soft); text-wrap: balance; }   /* 021: the one context note near the cards */
/* 021: five EQUAL columns; grid rows stretch every card to the tallest note, so all five boxes share width and height (they grow together at zoom) */
.paths { list-style: none; padding: 0; margin: 1.5em auto 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pgap); position: relative; font-size: var(--label); color: var(--ink); }
.paths::before { content: ""; position: absolute; left: calc((100% - 4 * var(--pgap)) / 10); right: calc((100% - 4 * var(--pgap)) / 10); top: .3em; height: 1px; background: var(--line); }   /* first to last dot; each dot centred over its own column */
.paths li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65em; }
.paths li::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ink); position: relative; }
.paths .label { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.paths li.sym .label { color: var(--accent); }
.paths li.sym::before { background: var(--accent); }
/* 022: every line centred horizontally and the whole line group centred vertically in its box (a column flexbox; equal top / bottom and left / right
   insets), so a two-line note (EXTINCTION) sits in the middle of the shared height; the shared font size is kept */
.paths .note { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: .35em; padding: .75em .85em; font: 400 var(--note)/1.5 var(--read); letter-spacing: 0; text-transform: none; text-align: center; color: var(--text);
               background: rgba(241, 236, 226, .055); border: 1px solid rgba(241, 236, 226, .13); border-radius: 8px; }   /* 021: static boxes (no hover lift: nothing to choose) */
.paths .note { flex: 1 1 auto; text-wrap: pretty; }   /* equal-height boxes in a row; no one-word last lines */
.paths .note .ln, .q3 .ln { display: block; text-wrap: balance; }   /* 018: the preferred line breaks; a line that does not fit wraps (balanced), never truncated */
.paths li.sym .note { border-color: rgba(163, 212, 143, .34); }
/* 022: the whole question group (premise, continuation, thoughts, cue) farther below the cards: + 8 % of the height on desktop, kept within 64-96 px
   (72 px at 1920 x 901, 86 px at 1920 x 1080); the stacked layouts below add 24-40 px instead */
.question { margin-top: calc(max(30px, 4.2vh) + clamp(64px, 8vh, 96px)); }
/* 021 hierarchy: the opening premise largest; the continuation smaller (about 0.73 of it, 76 px at 1920 x 1080) with about 20 px more air above
   it than 019; the two thoughts in the reading face, slightly smaller than 019 (31 px at 1920 x 1080) */
.q1 { display: block; font-size: max(40px, min(5.4vw, 10.4vh)); line-height: 1.0; letter-spacing: .012em; color: var(--ink); }
.q2 { display: block; margin-top: .42em; font-size: max(30px, min(3.95vw, 7.6vh)); line-height: 1.0; letter-spacing: .012em; color: var(--text); }
.q3 { display: block; margin-top: .6em; font: 400 max(20px, min(1.62vw, 3.2vh))/1.42 var(--read); color: var(--text); }
.traj .cue { margin-top: max(28px, 3.8vh); }
/* ---------------- READING: one centred column for the manifesto, the ending and the sources ---------------- */
.manifesto, .closing, .sources { width: min(var(--col), calc(100% - 2 * var(--pad))); margin-left: auto; margin-right: auto; text-align: left; }
.manifesto { margin-top: 30vh; font-size: var(--body); line-height: 1.6; color: var(--text); }
.manifesto p { margin: 0 0 1.05em; }
.manifesto strong { font-weight: 600; color: var(--ink); }
.manifesto h2 { margin: 2.1em 0 .75em; font: 600 var(--h2)/1.22 var(--read); letter-spacing: .005em; color: var(--ink); }
.manifesto h2#m-title { margin: 0 0 .35em; font: 700 max(48px, min(5.6vw, 10vh))/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.manifesto h3 { margin: 0 0 .9em; font: 500 calc(var(--h2) * .9)/1.3 var(--read); color: var(--ink); }
.manifesto h4 { margin: 0 0 1.4em; font: 500 calc(var(--body) * 1.08)/1.45 var(--read); color: var(--soft); }
.manifesto blockquote { margin: 1.5em 0 1.6em; padding: .1em 0 .1em .9em; border-left: 2px solid rgba(163, 212, 143, .7); font-size: 1.12em; line-height: 1.45; color: var(--ink); }
.manifesto blockquote strong { font-weight: 600; }
.manifesto ul { margin: 0 0 1.05em; padding-left: 1.2em; }
.manifesto li { margin: .15em 0; }
.manifesto hr { border: 0; height: 1px; width: 6em; margin: 2.6em 0 0; background: var(--rule); }
.manifesto p.outcome { text-align: center; text-wrap: balance; }   /* 019: the two outcome sentences open the centred ending */
/* 021: the AGI / ASI reading note (COPY_021.json), once, before the introduction, outside the numbered chapters; normal flow, selectable */
.manifesto .reading-note { margin: 2em 0 2.6em; padding: 1.05em 1.3em 1.1em; border: 1px solid var(--rule); border-left: 2px solid rgba(163, 212, 143, .55); border-radius: 6px;
                           background: rgba(241, 236, 226, .025); font-size: max(18px, calc(var(--body) * .84)); line-height: 1.5; color: var(--text); }
.reading-note .rn-title { margin: 0 0 .5em; font: 600 1em/1.3 var(--read); letter-spacing: .02em; color: var(--ink); }
.reading-note dl { margin: 0; }
.reading-note dt { margin: .6em 0 0; font-weight: 600; color: var(--ink); }
.reading-note dd { margin: .1em 0 0; }
.reading-note .rn-close { margin: .85em 0 0; color: var(--soft); }

/* 017 ENDING: the locked block (the manifesto's own last four lines, mounted once), then the passage between the hands, then the postscript.
   The postscript's top margin is the passage: it enters while the hands leave (src/settings.js ending, src/background.js). The hands are a
   separate decorative layer (#hands) above the background canvas and below all text; a soft dark text shadow keeps the lines readable over it. */
.closing { margin-top: 12vh; text-align: center; }   /* 019: the ending is centred on the door's axis (the column's centre line; src/background.js puts the light there) */
.ending, .postscript { text-shadow: 0 0 .4em rgba(6, 6, 5, .85), 0 0 1.4em rgba(6, 6, 5, .55); }
.hands { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.hands .hand { position: absolute; left: 0; top: 0; max-width: none; height: auto; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
.e1, .e2, .p1, .p2 { font: 700 max(34px, min(3.9vw, 7vh))/1.02 var(--display); letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.e2, .p2 { margin-top: .3em; }
.e2 { color: var(--accent); }
.e3, .p3 { margin-top: 1em; font: 400 calc(var(--body) * 1.08)/1.55 var(--read); color: var(--text); text-wrap: balance; }
.e3 .ln { display: block; text-wrap: balance; }   /* 021: each sentence balanced on its own ("... long-term / strategy available to all of us.") */
.e3 .nw { white-space: nowrap; }                  /* "long-term" is never broken after its hyphen */
.postscript { margin-top: 22vh; }   /* fallback without script; src/background.js sets the measured gap */

/* Sources and a note on certainty (from the manifesto source); owner / licence / footer wording are not bound */
.sources { margin-top: 14vh; padding: 5vh 0 10vh; border-top: 1px solid var(--rule); font-size: var(--support); line-height: 1.6; color: var(--soft); }
.sources h2 { margin: 0 0 .9em; font: 600 calc(var(--h2) * .82)/1.25 var(--read); color: var(--ink); }
.sources h3 { margin: 2.4em 0 .8em; font: 600 calc(var(--h2) * .72)/1.25 var(--read); color: var(--ink); }
.sources h4 { margin: 1.7em 0 .45em; font: 600 1.05em/1.4 var(--read); color: var(--text); }
.sources p { margin: 0 0 .9em; }
.sources strong { font-weight: 600; color: var(--text); }
.sources a { overflow-wrap: anywhere; }
.sources hr { border: 0; height: 1px; margin: 2.4em 0; background: var(--rule); }
/* 017 credit: the last line, set apart from the source attribution (no licence or rights wording) */
.credit-line { margin-top: 4.5em; padding-top: 1.6em; border-top: 1px solid var(--rule); }
.credit { margin: 0; font: 500 16px/1.5 var(--read); letter-spacing: .02em; color: var(--soft); }

/* landscape phones (short and wide) */
@media (max-height: 520px) and (min-aspect-ratio: 6/5) {
  .traj { margin-left: 4vw; width: 78vw; }
  .paths { letter-spacing: .03em; }
}

/* NARROW opening (portrait / near-square): full-width stacked opening; the artwork is the whole frame as a band at the foot */
@media (max-aspect-ratio: 6/5) {
  .hero { display: block; min-height: 0; padding: 7vh var(--pad) 2vh; }   /* phones: copy, then the cue, then the trajectories directly (no empty gap) */
  .intro { margin-top: 0; padding-top: 4.5vh; }
  .hero .cue { margin-top: 0; padding-top: 4.5vh; }
  .hero .col { max-width: none; }
  .title { font-size: max(40px, min(calc((100vw - 2 * var(--pad)) / 4.75), 11vh)); line-height: .88; }   /* 019: COEXISTENCE (4.64 em) fills the width, never split */
  .title .l1, .title .l2 { display: block; }   /* 021: AI / COEXISTENCE by default here; fitTitle chooses one line where the real glyphs fit large enough */
  .lede { margin-top: .85em; }
  .title2 { font-size: max(40px, min(12.5vw, 7.4vh)); }
  .q1 { font-size: max(32px, min(11vw, 5.4vh)); }
  .q2 { margin-top: .35em; font-size: max(26px, min(8.4vw, 4.1vh)); }
  .q3 { font-size: max(20px, min(5.4vw, 2.6vh)); }
  .manifesto { margin-top: 26vh; }
}

/* diagnostics (?diag=1 only): never part of the presentation */
#hud { position: fixed; right: 10px; bottom: 10px; z-index: 9; max-width: calc(100vw - 20px); font: 12px/1.45 ui-monospace, Consolas, monospace; color: #cfd6c8;
       background: rgba(0, 0, 0, .8); padding: 7px 10px; border-radius: 6px; white-space: pre; overflow: hidden; pointer-events: none; }

/* 019: tablets (portrait, >= 600 px wide): the same two lines, height-limited */
@media (max-aspect-ratio: 6/5) and (min-width: 600px) {
  .title { font-size: max(48px, min(15.5vw, 11vh, calc((100vw - 2 * var(--pad)) / 4.75))); }
}
/* 018: page 2 as a stacked list on portrait screens and below 1100 px width (e.g. 200 % zoom of a 1920 px window): the page-2 frame */
@media (max-aspect-ratio: 6/5), (max-width: 1099px) {
  .traj { margin: 0; width: auto; padding: 5vh var(--pad) 0; text-align: left; }
  .context { margin-left: 0; }
  .question { margin-top: calc(max(30px, 4.2vh) + clamp(24px, 4vh, 40px)); }   /* 022: + 4 % of the height, within 24-40 px */
  .traj .cue { margin-top: 2.2em; }
}
/* 024: the CARD ARRANGEMENT stacks up to 1599 px. Five equal columns keep the accepted lines only from about 1600 px (measured: 1600-1880 px wide
   windows give 3,3,3,2,4 lines, 1920 gives 3,3,3,2,3; at 1100-1560 px the 182-260 px columns wrapped the notes to 4-7 lines, e.g. 5,4,6,3,7 at
   1100). Between 1100 and 1599 px the rest of page 2 keeps its desktop frame (centred, desktop question spacing).
   021: one column; grid-auto-rows 1fr makes every row as tall as the tallest, and each note box fills its row: equal width and height.
   024: the rail + card group is BOUNDED and centred: at most the rail (.6em) + its gutter (.9em) + a 22rem card (352 px at the normal root size), and
   only narrower where the content area is (phones). 023 had width: auto here, so the single 1fr column, the li's 1fr card column and the note's
   width: 100% stretched every card across the whole section (772 px at an 882 px wide window). */
@media (max-aspect-ratio: 6/5), (max-width: 1599px) {
  .paths { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; width: 100%; max-width: calc(1.5em + 22rem); margin: 1.4em auto 0; gap: 1.5em; }
  .paths::before { content: none; }
  .paths li { display: grid; grid-template-columns: .6em 1fr; grid-template-rows: auto 1fr; column-gap: .9em; row-gap: .4em; align-items: start; text-align: left; }
  .paths li::before { grid-column: 1; grid-row: 1; margin-top: .32em; }
  .paths li:not(:last-child)::after { content: ""; position: absolute; left: .3em; top: 1.2em; bottom: -1.5em; width: 1px; background: var(--line); }
  .paths .label { grid-column: 2; grid-row: 1; }
  .paths .note { grid-column: 2; grid-row: 2; margin-top: 0; align-self: stretch; }
}
/* 024: where the stacked page is wider than the bounded group (from 480 px), the heading, context note and question are centred with it, as on
   desktop; phones (narrower) keep the left-aligned stack, where the group fills the content width anyway. Labels stay beside their rail points. */
@media (max-aspect-ratio: 6/5) and (min-width: 480px), (max-width: 1099px) and (min-width: 480px) {
  .traj { text-align: center; }
  .context { margin-left: auto; }
}