/* A Mind's I — web edition.
   Layout: one book column (the print measure, scaled to the screen) with a
   margin column for notes on wide screens; the home page opens on the cover,
   the book's black-and-honey-gold threshold, and turns to the cream page.
   Type follows 06-layout/preamble.tex: Source Serif 4 text, its Display cut
   for titles, IBM Plex Sans for apparatus, IBM Plex Mono for model output. */

:root {
  --paper: #f5efe1;      /* cream stock */
  --paper-2: #ece4d2;    /* raised surfaces: contents panel, note sheet */
  --ink: #1d1a15;
  --ink-2: #625a4c;      /* apparatus: authors, sources, notes */
  --rule: #d5c9b2;
  --accent: #82580a;     /* honey gold, darkened to read on cream */
  --night: #090a0c;      /* the cover ground (cover-recolor.py) */
  --gold: #f2c45a;       /* the cover's honey gold */
  --gold-2: #b8954a;
  --link: currentColor;  /* body-text links; gold in the slate palette */
  --paper-cover: #f7f1e3; /* the near-white of "mind's" on the cover */

  --serif: "AMI Serif", "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --display: "AMI Display", "AMI Serif", "Source Serif 4", Georgia, serif;
  --sans: "AMI Sans", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "AMI Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --measure: 34em;
  --note-w: 15.5rem;
  --gutter: 1.25rem;
  --head-h: 2.75rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0f11; --paper-2: #18191c; --ink: #e8e1d1; --ink-2: #a49c8c;
    --rule: #34322d; --accent: #f2c45a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0f11; --paper-2: #18191c; --ink: #e8e1d1; --ink-2: #a49c8c;
  --rule: #34322d; --accent: #f2c45a; color-scheme: dark;
}

/* palettes the reader picks in the contents panel; they come after the OS-driven
   blocks above, so an explicit choice wins. Slate after wiki.chadnet.org
   (darkslategray ground, white text, gold links): 8.9:1 text, 6.4:1 links. */
:root[data-palette="cream"] {
  --paper: #f5efe1; --paper-2: #ece4d2; --ink: #1d1a15; --ink-2: #625a4c;
  --rule: #d5c9b2; --accent: #82580a; --link: currentColor; color-scheme: light;
}
:root[data-palette="night"] {
  --paper: #0e0f11; --paper-2: #18191c; --ink: #e8e1d1; --ink-2: #a49c8c;
  --rule: #34322d; --accent: #f2c45a; --link: currentColor; color-scheme: dark;
}
:root[data-palette="slate"] {
  --paper: #2f4f4f; --paper-2: #284444; --ink: #f4f0e7; --ink-2: #c3cfcb;
  --rule: #4f6d6d; --accent: #ffd700; --gold-2: #d9b44a; --link: #ffd700; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.96rem + 0.42vw, 1.25rem);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 0.06em;
    text-underline-offset: 0.17em; text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--paper); padding: 0.5rem 1rem; font-family: var(--sans); font-size: 0.8rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------- running head */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: 0.7rem; color: var(--ink-2);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  transition: transform 0.28s ease;
}
.head.is-hidden { transform: translateY(-100%); }
.head-book { text-decoration: none; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.head-title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
              font-size: 0.78rem; opacity: 0; transition: opacity 0.2s; }
.head.show-title .head-title { opacity: 1; }
.head-toc { font: inherit; color: inherit; background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
            letter-spacing: 0.16em; text-transform: uppercase; }
.head-toc:hover, .head-book:hover { color: var(--ink); }

.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 21; pointer-events: none; }
.progress-fill { display: block; height: 100%; background: var(--accent); width: 0; }
.progress .tick { position: absolute; top: 0; width: 2px; height: 100%; background: var(--paper); }

/* ---------------------------------------------------------- reading column */
main { padding: calc(var(--head-h) + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.piece, .turn, .part-divider { max-width: var(--measure); margin-inline: auto; }
/* The column stays centred on every page, notes or not, so it doesn't jump
   sideways at a page turn (editor, 2026-10-05; it used to shift left on pages
   with notes). Sidenotes hang in the right margin only where a centred 34em
   column (680px at the 20px cap) + 2.5rem gap + 15.5rem note + gutter fit:
   1320px (book.js matches it); narrower screens use the note sheet. */

.opener { padding-top: clamp(3.5rem, 15vh, 9rem); margin-bottom: 2.6em; }
.kicker { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--ink-2); margin: 0 0 1.4rem; }
.kicker a { text-decoration: none; }
.kicker a:hover { color: var(--ink); }
.title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
         line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 0.7rem; text-wrap: balance; }
.author { font-family: var(--sans); font-weight: 500; font-size: 0.86rem; margin: 0 0 0.35rem; }
.translator { font-weight: 400; color: var(--ink-2); }
.deck { font-style: italic; margin: 0.5rem 0 0; }
.source { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); margin: 1.1rem 0 0; overflow-wrap: anywhere; }
.source a { text-decoration-color: var(--rule); }

/* body text: indented paragraphs, no space between, as in print */
.body { position: relative; }
.body p { margin: 0; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.body p + p { text-indent: 1.5em; }
@media (min-width: 700px) {
  /* quotations stay ragged: short justified lines in a narrower block opened wide gaps */
  .body > p, .body .dlg p { text-align: justify; }
}
.body h2, .body h3, .body h4, .body h5 { font-family: var(--sans); font-weight: 500; line-height: 1.25;
  text-wrap: balance; hyphens: manual; letter-spacing: -0.005em; }
/* a clear scale above the text (editor, 2026-10-07: subheads had been set at or
   below body size and barely registered). Above each, one blank line of body
   text (1.6em of the body, so 1.6 / the heading's size in its own em; editor:
   "it should just be a normal line down"). */
.body h2 { font-size: 1.36em; margin: calc(1.6em / 1.36) 0 0.5em; }
.body h3 { font-size: 1.2em; margin: calc(1.6em / 1.2) 0 0.45em; }
.body h4, .body h5 { font-size: 1.04em; margin: calc(1.6em / 1.04) 0 0.4em; color: var(--ink-2); }
/* the Introduction's theme headings: centred and largest. A heading straight
   after another belongs to it, so it sits close underneath (the theme heading
   and its first subhead had 40px between them, as much as a section gap). */
.body h2.theme { font-size: 1.55em; text-align: center; margin: 1.9em 0 0.65em; letter-spacing: -0.01em; }
.body :is(h2, h3, h4) + :is(h3, h4, h5) { margin-top: 0.5em; }
.body > :is(h2, h3, h4):first-child { margin-top: 0; }
.body ul, .body ol { margin: 0.7em 0 0.9em; padding-left: 1.5em; }
.body li { margin: 0.25em 0; }
.body li > p + p { text-indent: 0; margin-top: 0.4em; }
.body blockquote { margin: 1em 0 1em 1.5em; font-size: 0.94em; }
.body blockquote p + p { text-indent: 1.5em; }
.body .epigraph { margin: 1em 0 1.4em 1.5em; font-size: 0.94em; }
.body .epigraph p { text-align: left; }
.body .epigraph.full-size { font-size: 1em; margin-right: 1.5em; }
.body .attribution, .body p.attribution { display: block; text-align: right; font-family: var(--sans); font-size: 0.82em; color: var(--ink-2); margin: 0.4em 0 1em; text-indent: 0; }
.body hr.section-break { border: 0; height: auto; margin: 1.8em 0; text-align: center; }
.body hr.section-break::after { content: "*\2003*\2003*"; color: var(--ink-2); font-size: 0.9em; }
.body div.major-break { margin: 2.6em 0 1.6em; text-align: center; }
.body div.major-break::after { content: "*\2003*\2003*"; color: var(--ink-2); font-size: 0.9em; }
.body strong { font-weight: 600; }
.body .smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
.body .underline { text-decoration: underline; }
.body sup, .body sub { line-height: 0; }
.body code { font-family: var(--mono); font-size: 0.84em; }
.body pre { font-family: var(--mono); font-size: 0.76em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
            margin: 1.1em 0; padding: 0 0 0 1.1em; border-left: 1px solid var(--rule); }
.body pre code { font-size: inherit; }
/* a paragraph set wholly in inline code (Simulators' spliced-in GPT-3 text) */
.body .code-para { margin: 0.9em 0; }
.body .code-para p { text-align: left; hyphens: none; -webkit-hyphens: none; text-indent: 0; line-height: 1.7; }
.body math { font-size: 1.05em; }
.body math[display="block"] { margin: 0.8em 0; overflow-x: auto; overflow-y: hidden; }

/* the model's voice: Plex Mono, straight quotes, ragged, never hyphenated */
.body .model-output { font-family: var(--mono); font-size: 0.82em; line-height: 1.65; margin: 1.4em 0;
  padding-left: 1.15em; border-left: 2px solid var(--gold-2); }
.body .model-output p { text-align: left; hyphens: none; -webkit-hyphens: none; text-wrap: wrap; }
.body .model-output p + p { text-indent: 0; margin-top: 0.85em; }
.body .model-output li { margin: 0.15em 0; }
.body .model-output blockquote { font-size: 1em; }

/* dialogue (Anima Labs) */
.body .dlg { margin: 1.15em 0; }
.body .dlg + .dlg { margin-top: 1.4em; }
.body .speaker { font-family: var(--sans); font-weight: 500; font-size: 0.66em; letter-spacing: 0.14em; text-transform: uppercase;
                 color: var(--ink-2); margin: 0 0 0.3em; text-indent: 0; text-align: left; }
.body .speaker + p { text-indent: 0; }
.body .action { font-style: italic; color: var(--ink-2); margin: 1em 0; }
.body .action p { text-indent: 0; }

/* documentary fragments (Lena) */
.body .document { margin: 1.3em 0; padding: 0.95em 1.15em; border: 1px solid var(--rule); font-size: 0.93em; }
.body .document p + p { text-indent: 0; margin-top: 0.6em; }
.body .document > :first-child { margin-top: 0; }
.body .meta { font-family: var(--mono); font-size: 0.82em; color: var(--ink-2); }
.body .editorial { font-family: var(--sans); font-size: 0.82em; color: var(--ink-2); }
.body div.editorial { margin: 2.6em auto 2em; max-width: 30em; text-align: center; font-size: 0.86em; }
.body div.editorial p { text-indent: 0; text-align: center; }
/* the Conclusion's "A I": flush paragraphs with space between, centred italic refrains */
.body .counterpoint p { text-indent: 0; margin: 0 0 0.7em; }
.body .counterpoint .refrain p { text-align: center; }

/* figures, in colour (print is greyscale only by constraint) */
.body .fig { margin: 1.8em 0; }
.body .fig img { display: block; margin: 0 auto; max-height: 85vh; width: auto; }
.body .fig a { display: block; }
.body figcaption { margin-top: 0.6em; font-style: italic; font-size: 0.9em; color: var(--ink-2); line-height: 1.45; }
.body figure:not(.fig) { margin: 1.8em 0; }
.body p img { vertical-align: middle; }

.table-wrap { overflow-x: auto; margin: 1.4em 0; }
.body table { border-collapse: collapse; font-family: var(--sans); font-size: 0.74em; line-height: 1.4; min-width: 100%; }
.body th, .body td { text-align: left; vertical-align: top; padding: 0.45em 0.7em 0.45em 0; border-bottom: 1px solid var(--rule); }
.body th { font-weight: 500; border-bottom-color: var(--ink-2); }

/* contrapuntal poem (Author's Notes): two voices side by side, a shared word
   between them; centred, rule-less, at quotation size, like print */
.body .flush p { text-indent: 0; }   /* label-like lead-ins ("And:") */
.body .contrapuntal .table-wrap { margin: 1.4em 0; }
.body .contrapuntal table { font-family: inherit; font-size: 0.94em; line-height: 1.45; min-width: 0; width: auto; margin: 0 auto; }
.body .contrapuntal thead { display: none; }
.body .contrapuntal td { border: 0; padding: 0 0.8em; white-space: nowrap; }
.body .contrapuntal td:empty { padding: 0; }
/* phones: lines wrap inside their column (rows stay paired) rather than scroll */
@media (max-width: 600px) {
  .body .contrapuntal table { font-size: 0.84em; }
  .body .contrapuntal td { white-space: normal; padding: 0 0.45em; }
  .body .contrapuntal td:first-child { padding-left: 0; }
}

.credit { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-2); margin: 2.5em 0 0; line-height: 1.5; }

/* links out are links: no marker needed beyond the underline */
a.ext { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- notes */
.footnote-ref { text-decoration: none; font-family: var(--sans); font-size: 0.72em; color: var(--accent);
                padding: 0 0.12em; vertical-align: super; line-height: 0; }
.footnote-ref sup { font-size: 1em; vertical-align: baseline; }
.body a:not(.footnote-ref):not(.footnote-back) { color: var(--link); }
.footnote-ref.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 2px; }
section.footnotes { margin-top: 3.2em; padding-top: 1.2em; border-top: 1px solid var(--rule); font-size: 0.86em; color: var(--ink-2); }
section.footnotes hr { display: none; }
section.footnotes ol { padding-left: 1.4em; margin: 0; }
section.footnotes li { margin: 0 0 0.7em; }
section.footnotes li p { text-indent: 0; text-align: left; }
.footnote-back { text-decoration: none; font-family: var(--sans); }

.sidenote { position: absolute; left: calc(100% + 2.5rem); width: var(--note-w); font-size: 0.74rem; line-height: 1.5;
            color: var(--ink-2); font-family: var(--serif); text-align: left; text-indent: 0; }
.sidenote p { margin: 0 0 0.4em; text-indent: 0 !important; text-align: left !important; hyphens: manual; }
.sidenote .sn-num { font-family: var(--sans); color: var(--accent); margin-right: 0.35em; font-size: 0.9em; }
.sidenote ul, .sidenote ol { padding-left: 1.2em; margin: 0.3em 0; }
.sidenote.is-active { color: var(--ink); }
.has-sidenotes section.footnotes { display: none; }

.note-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-height: min(55vh, 28rem); overflow-y: auto;
  background: var(--paper-2); border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--night) 18%, transparent);
  padding: 1rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.92rem; line-height: 1.55;
  transform: translateY(105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.note-sheet.is-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
.note-sheet-inner { max-width: var(--measure); margin: 0 auto; }
.note-sheet-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem;
                  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.note-sheet button { font: inherit; color: inherit; background: none; border: 0; padding: 0.4rem 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.note-sheet p { margin: 0 0 0.5em; }
.note-sheet .footnote-back { display: none; }

/* ---------------------------------------------------------- page turn */
/* previous on the left, next on the right (editor, 2026-10-07); next is the
   larger of the two. On a phone they stack: next first, still set right. */
.turn { margin-top: 3.75rem; margin-bottom: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.6rem 2.5rem; align-items: start; }
.turn-prev, .turn-next { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; min-width: 0; }
.turn-prev { grid-column: 1; grid-row: 1; }
.turn-next { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
.turn-label { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.turn-title { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.12; text-wrap: balance; }
.turn-next:hover .turn-title, .turn-prev:hover .turn-prev-title { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }
.turn-author { font-family: var(--sans); font-weight: 500; font-size: 0.82rem; }
.turn-meta { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-2); }
.turn-prev-title { font-family: var(--sans); font-size: 0.9rem; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.turn-prev:hover .turn-prev-title { color: var(--ink); }
@media (max-width: 560px) {
  .turn { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .turn-next { grid-column: 1; grid-row: 1; }
  .turn-prev { grid-column: 1; grid-row: 2; }
}

/* ---------------------------------------------------------- part pages */
.part-divider { padding-top: clamp(5rem, 24vh, 14rem); min-height: 62vh; }
.part-divider .kicker { margin-bottom: 1.6rem; }
.part-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.3rem);
              line-height: 1.06; letter-spacing: -0.014em; margin: 0 0 3rem; text-wrap: balance; }
.part-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.part-list li { border-bottom: 1px solid var(--rule); }
.part-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; text-decoration: none; }
.pl-title { min-width: 0; }
.pl-author { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-2); text-align: right; flex-shrink: 0; max-width: 45%; }
.part-list a:hover .pl-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.17em; text-decoration-thickness: 0.06em; }

/* ---------------------------------------------------------- ASCII drawings */
.drawing { max-width: 64rem; margin: 0 auto; padding-top: clamp(3rem, 10vh, 6rem); container-type: inline-size; }
.ascii { margin: 0; }
.ascii pre { font-family: var(--mono); margin: 0 auto; width: max-content; max-width: 100%;
  font-size: min(0.86rem, calc(100cqi / (var(--cols) * 0.6)));
  line-height: 1.18; white-space: pre; color: var(--ink); overflow: hidden; }
.ascii figcaption { margin: 2rem auto 0; max-width: var(--measure); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.74rem; color: var(--ink-2); }
.ascii-title { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.ascii-page .turn { margin-top: 4rem; }
.ascii-scroll { overflow-x: auto; }
.ascii.is-zoomed pre { font-size: 0.66rem; max-width: none; margin: 0; }
.ascii-zoom { font: inherit; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; }
.ascii-zoom[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------- comic */
.comic { display: flex; flex-direction: column; gap: 2.6rem; }
.comic-page { display: flex; flex-direction: column; gap: 0.45rem; }
.comic-row { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
.comic-row img { display: block; width: 100%; border: 1px solid var(--ink); background: var(--night); }
@media (min-width: 560px) { .comic-row.n2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kind-comic { max-width: 46rem; } .kind-comic .opener { max-width: var(--measure); } }

/* ---------------------------------------------------------- sources */
.source-list { list-style: none; padding: 0; margin: 1.4em 0; font-size: 0.9em; }
.source-list li { padding-left: 1.4em; text-indent: -1.4em; margin: 0 0 0.75em; }
.s-title { font-style: italic; }
.s-url { font-family: var(--mono); font-size: 0.78em; }

/* ---------------------------------------------------------- contents (panel and home page) */
.contents { list-style: none; margin: 0; padding: 0; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents a { text-decoration: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.32rem 0; }
.c-title { min-width: 0; }
.c-author { font-family: var(--sans); font-size: 0.7em; color: var(--ink-2); margin-left: 0.35em; white-space: nowrap; }
.c-min { font-family: var(--sans); font-size: 0.68rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-drawing .c-title { font-style: italic; }
.c-part { margin-top: 1.5rem; }
.c-part-head { flex-direction: column; gap: 0.15rem !important; align-items: flex-start !important; border-bottom: 1px solid var(--ink-2); padding-bottom: 0.35rem !important; margin-bottom: 0.25rem; }
.c-roman { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.c-part-title { font-family: var(--sans); font-weight: 500; font-size: 0.9rem; }
.c-end { margin-top: 1.5rem; }
.contents a:hover .c-title, .contents a:hover .c-part-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.17em; text-decoration-thickness: 0.06em; }
.is-here > a .c-title, a.is-here .c-part-title { color: var(--accent); }
.is-here > a .c-title::before { content: "▸ "; font-size: 0.7em; vertical-align: 0.1em; }

/* the contents panel */
dialog.toc { margin: 0 0 0 auto; padding: 0; border: 0; height: 100%; max-height: 100%; width: min(28rem, 100%); max-width: 100%;
  background: var(--paper-2); color: var(--ink); box-shadow: -12px 0 40px color-mix(in srgb, var(--night) 22%, transparent); }
dialog.toc::backdrop { background: color-mix(in srgb, var(--night) 40%, transparent); }
dialog.toc[open] { animation: slidein 0.22s ease; }
@keyframes slidein { from { transform: translateX(30%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.toc-inner { padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 1rem; }
.toc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.toc-label, .toc-close { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.toc-close { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; }
.toc-close:hover { color: var(--ink); }
.toc-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
            font-family: var(--sans); font-size: 0.78rem; }
.theme-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.theme-switch button { font: inherit; font-size: 0.72rem; color: var(--ink-2); background: none; border: 0; padding: 0.3rem 0.7rem; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------- home: cover */
.home main { padding: 0; }
.cover {
  background: var(--night); color: var(--gold);
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(3rem + env(safe-area-inset-top, 0px)) var(--gutter) 3rem; gap: 0;
  container-type: inline-size;
}
/* set like the print cover: DejaVu Sans Mono, small, open leading; "mind's" in Source Serif semibold italic */
.poem { font-family: "AMI Cover", "DejaVu Sans Mono", Menlo, monospace; color: var(--gold); line-height: 1.95; }
.poem-wide { font-size: min(0.84rem, calc((100cqi - 1rem) / (var(--cols) * 0.602))); }
.poem-wide .pl { display: block; white-space: pre; }
.poem-wide .pm { display: inline-block; width: calc(6 * 0.602em); text-align: center; white-space: pre; }
.poem .pm b, .poem-narrow .pm { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--paper-cover); letter-spacing: 0; }
.poem-wide .pm b { font-size: 1.32em; line-height: 0; }
.poem-narrow { display: none; }
.cover-sub { font-family: "AMI Cover", "DejaVu Sans Mono", Menlo, monospace; font-size: 0.72rem; margin: clamp(3rem, 11vh, 6rem) 0 0; text-align: center; color: var(--gold); }
.cover-author { font-family: "AMI Cover", "DejaVu Sans Mono", Menlo, monospace; font-size: 0.72rem; margin: clamp(2.5rem, 8vh, 4.5rem) 0 0; text-align: center; line-height: 1.75; color: var(--gold); }
.cover-actions { margin-top: clamp(3rem, 10vh, 5.5rem); display: flex; gap: 0.75rem 1.75rem; flex-wrap: wrap; justify-content: center;
                 font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cover-actions a { color: var(--gold); text-decoration: none; padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.cover-actions a:hover { border-bottom-color: var(--gold); }
.cover-actions a.cover-resume { color: var(--paper-cover); }

@media (max-width: 640px) {
  .poem-wide { display: none; }
  .poem-narrow { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; }
  .poem-narrow pre { margin: 0; font: inherit; font-size: min(0.84rem, calc((100cqi - 0.5rem) / (38 * 0.602))); line-height: 1.85; white-space: pre; }
  .poem-narrow .pm { margin: 0.2rem 0; font-size: 1.45rem; }
}

/* poem: the voices answer each other, line by line */
@media (prefers-reduced-motion: no-preference) {
  .poem-wide .pa, .poem-wide .pi { animation: voice 0.6s ease both; }
  .poem-wide .pa { animation-delay: calc(var(--i) * 0.11s + 0.1s); }
  .poem-wide .pi { animation-delay: calc(var(--i) * 0.11s + 0.32s); }
  .poem-wide .pm b { animation: voice 1.2s ease 1.9s both; }
  .cover-sub, .cover-author, .cover-actions { animation: voice 0.9s ease 2.2s both; }
  .poem-narrow > * { animation: voice 0.9s ease both; }
  .poem-narrow .pm { animation-delay: 0.5s; }
  .poem-narrow .pi { animation-delay: 0.9s; }
}
@keyframes voice { from { opacity: 0.08; } to { opacity: 1; } }

/* ---------------------------------------------------------- home: title page, contents */
.front { max-width: var(--measure); margin: 0 auto; padding: clamp(4rem, 12vh, 7rem) var(--gutter) 1rem; display: flex; flex-direction: column; gap: clamp(2rem, 6vh, 3.5rem); }
.titlepage { text-align: center; }
.tp-title { font-family: var(--display); font-variant-caps: small-caps; letter-spacing: 0.1em; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin: 0; }
.tp-sub { font-style: italic; margin: 0.6rem 0 0; }
.tp-by { font-family: var(--sans); font-size: 0.78rem; margin: 2.6rem 0 0; color: var(--ink-2); }
/* the dedication is deliberately tiny and faint: there for whoever looks closely */
.dedication { font-style: italic; font-size: 0.45rem; letter-spacing: 0.04em; line-height: 1.5; margin: 0 auto; width: max-content; max-width: 100%; opacity: 0.3; }
.epigraph-page { margin: 0 auto; max-width: 24em; font-style: italic; }
.epigraph-page p { margin: 0; }
.epigraph-page footer { font-style: normal; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-2); text-align: right; margin-top: 0.6rem; }
.contents-page { max-width: calc(var(--measure) - 4em); margin: 0 auto; padding: clamp(4rem, 12vh, 7rem) var(--gutter) 5rem; }
.contents-page h2 { font-family: var(--sans); font-weight: 500; font-size: 1.05rem; margin: 0 0 1.6rem; }
.colophon { margin-top: 3.5rem; font-family: var(--sans); font-size: 0.74rem; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 520px) {
  .c-author { display: block; margin-left: 0; white-space: normal; }
  .pl-author { max-width: 40%; }
}
@media print {
  .head, .progress, .turn, dialog, .note-sheet { display: none !important; }
}