/* Reverie — gallery styles. Identity: docs/identity.md.
   Calm frame, ND-readable; the art keeps its own colour. Texture lives on chrome, never behind the poem. */

/* --- self-hosted fonts (OFL). Drop the woff2 in fonts/ — see fonts/README.md.
   Until then the stacks fall back to system faces. --- */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper: #E8E5DC;     /* warm grey-white ground — dimmer than #F2F2EE, less glare (ND comfort) */
  --ink:   #1E1E1C;     /* near-black, ~15:1 on paper */
  --spot:  #E8641A;     /* marker-orange — accent only */
  --soft:  #6b6b64;     /* muted ink for small/secondary */
  --hair:  rgba(30, 30, 28, .16);
  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow Bold", "Impact", system-ui, sans-serif;
  --body:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --poem:    "Spectral", Georgia, "Times New Roman", serif;   /* the poem face — literary serif */
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --measure: 34rem;
  /* frame-only dark mode hooks (see docs/specs/dark-mode.md). Light defaults here; the dark
     block re-declares paper/ink + these few so chrome flips without touching any piece. */
  --grain-blend:   multiply;            /* dark: screen, so grain lifts off charcoal */
  --grain-opacity: .055;
  --title-shadow:  1px 0 0 currentColor;/* photocopy edge on light; dark: none */
  --fig-bg:        rgba(255, 255, 255, .6);
  --fig-bd:        var(--ink);
}

* { box-sizing: border-box; }

/* visually hidden, available to screen readers (document structure without a visible title) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }

/* smooth SPA-like page turns without leaving static files — cross-document view transitions */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
/* the art dissolves gently into the next page's image — a calm, slightly longer cross-fade */
::view-transition-old(art), ::view-transition-new(art) { animation-duration: .75s; animation-timing-function: ease-in-out; }
/* the plinth's motion⇄still swap dissolves quicker than the slower page-open art transition */
:root.vt-fast::view-transition-old(art), :root.vt-fast::view-transition-new(art) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: .01em;            /* ND: a touch of tracking */
  text-align: left;                 /* ND: never justified */
  -webkit-font-smoothing: antialiased;
}

/* faint page grain — subliminal paper tooth, on the chrome, behind nothing read */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 9999;
}

a { color: var(--spot); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; border-radius: 1px; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1.1rem, 5vw, 1.75rem) 4rem;
}

/* --- running masthead (small, every page) --- */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 1.4rem;
}
.masthead a.name {
  font-family: var(--display);
  font-size: 1.95rem; line-height: 1; letter-spacing: .015em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  text-shadow: .4px 0 0 currentColor;   /* over-inked photocopy edge */
}
.masthead .no { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--spot); }

/* --- big home title: Bebas + halftone band + toner-fleck --- */
.hero { position: relative; padding: .5rem .6rem 1.2rem; margin: 0 -.6rem 1.2rem; }
.hero::before {                       /* halftone dot screen, in the spot */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(var(--spot) 36%, transparent 40%);
  background-size: 7px 7px; opacity: .2;
}
.hero h1 {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 2rem + 9vw, 6rem); line-height: .9; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink);
}
.hero h1::after {                      /* toner-fleck over the glyphs */
  content: ""; position: absolute; inset: -5% -3%; z-index: 2;
  background-image: var(--grain); background-size: 80px 80px;
  mix-blend-mode: screen; opacity: .55; pointer-events: none;
}
.tagline { margin: .3rem 0 0; color: var(--soft); font-size: 1rem; }

/* the unexpected-red halftone underline on the REVERIE wordmark (wrap it in .wm); scales by em */
.wm { position: relative; display: inline-block; }
.wm::after {
  content: ""; display: none; position: absolute; left: 0; right: 0; bottom: -.2em; height: .14em;
  background: radial-gradient(var(--wm-line, var(--spot)) 24%, transparent 28%); background-size: .15em .15em;
}
/* the underline only shows on a piece's own themed page, pulling that page's accent (no red identity mark) */
body.soak, body.night { --wm-line: var(--spot); }
body.soak .wm::after, body.night .wm::after { display: block; }

/* --- a piece: one quiet page --- */
.art { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 1px; }
figure.art-fig { margin: 0 0 1.6rem; }
figure.art-fig figcaption { margin-top: .5rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

/* triptych / sequence — a video reshaped to stills; separate responsive images (motion-art.md) */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 0 0 2.6rem; }
.triptych img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 1px; }
@media (max-width: 30rem) { .triptych { grid-template-columns: 1fr; gap: .7rem; max-width: 21rem; } }

/* motion bonus — opt-in, still by default; reduced-motion users never see it (motion-art.md) */
details.motion { margin: 1.4rem 0 0; }
details.motion > summary { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spot); cursor: pointer; list-style: none; }
details.motion > summary::-webkit-details-marker { display: none; }
details.motion > summary::before { content: "▸ "; }
details.motion[open] > summary::before { content: "▾ "; }
details.motion img { display: block; width: 100%; max-width: 26rem; height: auto; margin-top: .7rem; border: 1px solid var(--hair); border-radius: 1px; }
@media (prefers-reduced-motion: reduce) { details.motion { display: none; } }

.piece-title {
  position: relative; width: fit-content; margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 4vw, 3.4rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink);
}
.piece-title::after {                  /* toner-fleck title treatment */
  content: ""; position: absolute; inset: -5% -3%;
  background-image: var(--grain); background-size: 80px 80px;
  mix-blend-mode: screen; opacity: .55; pointer-events: none;
}

/* the poem — on flat paper, no texture, the ND floor */
.poem {
  margin: 0; max-width: 30rem;
  font-family: var(--poem);
  font-size: 1.45rem; line-height: 1.7;     /* the heart — it leads; no title competes */
  white-space: pre-wrap;             /* honour the poem's own line breaks */
  font-feature-settings: "onum" 1, "liga" 1;   /* old-style figures + ligatures */
  text-wrap: pretty;
}
/* flush-and-hang: a runover line indents under its poem-line (Chicago 13.25) */
.poem .ln { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.poem:has(.ln) { white-space: normal; }   /* line-spans handle breaks; no pre-wrap needed */

/* the poem walks right across the edition (the leaves indent per page, set inline) */

/* the together page centres its text, but the poem stays left-aligned with itself */
.together { text-align: center; }
.together .poem, .together .prompt { display: inline-block; text-align: left; }
.together .reveal { text-align: left; }   /* full-width block below the centred poem, content left */


/* the reveal — least weight */
.prompt { margin: 2.2rem 0 0; max-width: 28rem; font-size: .82rem; line-height: 1.5; color: var(--soft); }
.prompt .label { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spot); display: block; margin-bottom: .25rem; }

/* behind-the-scenes — a quiet, opt-in disclosure: prompt · made-with · note. Hidden by default
   (the page stays the poem). Adapts to a piece's world via the night overrides below. */
.reveal { margin: 2.2rem 0 0; border-top: 1px solid var(--hair); padding-top: 1rem; }
.reveal > summary { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--spot); cursor: pointer; list-style: none; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::before { content: "▸ "; }
.reveal[open] > summary::before { content: "▾ "; }
.reveal .rbody { margin-top: 1rem; max-width: 30rem; }
.reveal .rl { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: .35rem; }
.reveal .rprompt { font-family: var(--poem); font-size: .98rem; line-height: 1.55; color: var(--ink); margin: 0 0 1.1rem; }
.reveal .rsrc { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.reveal .rsrc li { font-family: var(--body); font-size: .82rem; color: var(--soft); padding: .35rem 0; border-top: 1px solid var(--hair); }
.reveal .rsrc .g { font-family: var(--mono); font-size: .54rem; background: var(--spot); color: #1E1E1C; padding: 1px 5px; border-radius: 2px; margin-right: .5rem; }
.reveal .rnote { font-family: var(--poem); font-style: italic; font-size: .95rem; color: var(--soft); margin: 0; }
/* on a night piece, lift the reveal text + hairlines off the dark ground (mirrors the .poem/.prompt pattern) */
body.night .reveal, body.night .reveal .rsrc li { border-color: rgba(255, 255, 255, .12); }
body.night .reveal .rprompt { color: var(--ink-light, #d8d2c8); }
body.night .reveal .rl, body.night .reveal .rsrc li, body.night .reveal .rnote { color: var(--soft-light, #b6afa9); }

/* halftone divider — chrome only */
.rule { height: 7px; margin: 2rem 0; background-image: radial-gradient(var(--ink) 1.1px, transparent 1.5px); background-size: 6px 6px; opacity: .4; }

/* pager */
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.pager a { text-decoration: none; }
.pager .disabled { color: var(--hair); }

/* --- contents (home) --- */
.contents { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.contents li { border-top: 1px solid var(--hair); }
.contents li:last-child { border-bottom: 1px solid var(--hair); }
.contents a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .9rem .1rem; text-decoration: none; color: var(--ink); }
.contents a:hover .t, .contents a:focus-visible .t { text-decoration: underline; text-decoration-color: var(--spot); }
.contents .t { font-family: var(--display); font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; }
.contents .n { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--soft); }

.empty { margin: 1.6rem 0; padding: 1.4rem 0; color: var(--soft); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* the art's colour soaks each leaf — a different depth per page (A→D), as a fixed overlay
   that fades in on every page turn. Poem stays legible; ink + paper unchanged underneath. */
.wash { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-attachment: fixed; view-transition-name: wash; }
.wash--a { background: radial-gradient(120% 58% at 50% -8%, rgba(223,93,49,.18), transparent 62%), radial-gradient(120% 58% at 50% 108%, rgba(90,97,152,.16), transparent 62%); }
.wash--b { background: radial-gradient(120% 58% at 50% -8%, rgba(223,93,49,.34), transparent 62%), radial-gradient(120% 58% at 50% 108%, rgba(90,97,152,.32), transparent 62%); }
.wash--c { background: radial-gradient(120% 58% at 50% -8%, rgba(223,93,49,.54), transparent 64%), radial-gradient(120% 58% at 50% 108%, rgba(90,97,152,.48), transparent 64%); }
.wash--d { background: linear-gradient(176deg, rgba(223,93,49,.32) 0%, rgba(223,93,49,.10) 38%, rgba(90,97,152,.12) 62%, rgba(90,97,152,.30) 100%); }

/* the cover lists editions as colour fields — each edition's palette + style bleeds through its card;
   no artwork is shown, just enough to scan. Per card: set --c1/--c2/--spot inline; add .night for dark editions. */
.shelf { margin: 2.6rem 0 0; display: flex; flex-direction: column; gap: 1.1rem; }
.edition {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 6rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--hair); border-radius: 2px;
  text-decoration: none; color: var(--ink);
}
.edition::before {   /* the edition's colour bleeds through the card */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(125% 165% at 0% 0%, color-mix(in srgb, var(--c1) 42%, var(--paper)), transparent 62%),
    radial-gradient(135% 150% at 100% 100%, color-mix(in srgb, var(--c2) 38%, var(--paper)), transparent 60%),
    var(--paper);
}
.edition .t { font-family: var(--poem); font-size: 1.55rem; line-height: 1.25; color: inherit; }
.edition .n { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--soft); white-space: nowrap; }
.edition:hover .t, .edition:focus-visible .t { text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: .18em; }
.edition:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }

/* dark editions bleed on a night ground, light ink, with their own flecks */
.edition.night { color: var(--ink-light, #ECE7E2); border-color: rgba(255, 255, 255, .14); }
.edition.night::before {
  background:
    radial-gradient(125% 150% at 0% 0%, var(--c1), transparent 60%),
    radial-gradient(135% 150% at 100% 120%, var(--c2), transparent 58%),
    #120a1a;
}
.edition.night::after {   /* gold/green flecks, echoing the edition */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(var(--fleck-a, #D6A94B) 1px, transparent 1.4px),
    radial-gradient(var(--fleck-b, #4C9676) 1px, transparent 1.4px);
  background-size: 64px 64px, 50px 50px; background-position: 0 0, 30px 38px;
}
.edition.night .n { color: #b6afa9; }

/* ─── the research section — papers as ledgers: what the machine did | the finding | what the hand did ─── */
.rmast { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.2rem; border-bottom: 1px solid var(--hair); margin-bottom: 1.6rem; }
.rmast .name { font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.rmast .sec { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--spot); text-decoration: none; }
.rmast .sec:hover { text-decoration: underline; }
.rtitle { font-family: var(--display); font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem); line-height: .95; text-transform: uppercase; margin: 0 0 .3rem; text-align: center; }
.dek { font-family: var(--poem); font-style: italic; font-size: 1.2rem; color: var(--soft); margin: 0 0 2rem; text-align: center; }

.ledger { display: grid; grid-template-columns: 1fr minmax(8rem, 11rem) 1fr; align-items: stretch; }
.ledger .col { padding: .3rem 1.7rem 1rem; }
.ledger .colh { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--spot); margin-bottom: .9rem; }
.ledger .col p { font-family: var(--poem); font-size: 1.02rem; line-height: 1.6; margin: 0 0 .9rem; }
.ledger .machine { text-align: right; border-right: 1px solid var(--hair); }
.ledger .hand { text-align: left; border-left: 1px solid var(--hair); }
.ledger .spine { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .5rem .4rem; }
.ledger .findlbl { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: .5rem; }
.ledger .find { font-family: var(--display); font-size: clamp(1.7rem, 1rem + 2.6vw, 2.5rem); line-height: .92; text-transform: uppercase; color: var(--spot); }
.ledger .findwhy { font-family: var(--poem); font-style: italic; font-size: .9rem; color: var(--soft); margin-top: .6rem; }
.ledger .fig { margin: .4rem 0 0; }
.ledger .fig .row { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin: .28rem 0; font-family: var(--body); font-size: .8rem; }
.ledger .fig .bar { height: .42rem; background: var(--spot); border-radius: 1px; }
.ledger .fig b { font-family: var(--mono); width: .9rem; text-align: right; }
@media (max-width: 44rem) { .ledger { grid-template-columns: 1fr; } .ledger .col, .ledger .spine { text-align: left; align-items: flex-start; border: 0 !important; border-top: 1px solid var(--hair) !important; padding: 1.2rem 0; } .ledger .fig .row { justify-content: flex-start; } }

.rsrc { border-top: 1px solid var(--hair); margin-top: 1.8rem; padding-top: 1rem; font-family: var(--body); font-size: .82rem; color: var(--soft); text-align: center; }
.rsrc .g { font-family: var(--mono); font-size: .58rem; background: var(--spot); color: #1E1E1C; padding: 1px 5px; border-radius: 2px; }

/* a paper's sources — a graded, linked list */
.srclbl { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--spot); display: block; margin: 2rem 0 .5rem; text-align: center; }
.srclist { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; }
.srclist li { font-family: var(--body); font-size: .92rem; color: var(--soft); padding: .5rem 0; border-top: 1px solid var(--hair); }
.srclist .g { font-family: var(--mono); font-size: .58rem; background: var(--spot); color: #1E1E1C; padding: 1px 5px; border-radius: 2px; margin-right: .55rem; }
.srclist a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: .15em; }
.srclist a:hover, .srclist a:focus-visible { color: var(--spot); }

/* the research papers, fully zined — chrome only; the prose stays clean */
.rmast { position: relative; border-bottom: 0; margin: 0 -.6rem 1.4rem; padding: .6rem .6rem 1.3rem; }
.rmast::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -2; background: radial-gradient(var(--spot) 38%, transparent 42%); background-size: 7px 7px; opacity: .24; }
.rmast::after { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background-image: var(--grain); background-size: 80px 80px; mix-blend-mode: multiply; opacity: .18; pointer-events: none; }
.rmast .name, .rmast .sec { position: relative; z-index: 1; }
.rmast .name { text-shadow: .5px 0 0 currentColor; }
.rtitle { position: relative; width: fit-content; margin-left: auto; margin-right: auto; text-shadow: var(--title-shadow); }
.rtitle::after { content: ""; position: absolute; inset: -7% -4%; background-image: var(--grain); background-size: 70px 70px; mix-blend-mode: screen; opacity: .6; pointer-events: none; }
.dek::after, .srclbl::before { content: ""; display: block; height: 11px; background: radial-gradient(var(--spot) 1.5px, transparent 1.9px); background-size: 7px 7px; opacity: .55; }
.dek::after { margin-top: 1.5rem; }
.srclbl::before { margin-bottom: 1.2rem; }
.ledger .colh { display: inline-block; border: 1.5px solid var(--spot); padding: 3px 8px; transform: rotate(-2.5deg); }
.ledger .hand .colh { transform: rotate(2.5deg); }
.ledger .fig { border: 1.5px solid var(--fig-bd); box-shadow: 4px 4px 0 var(--spot); transform: rotate(-1.2deg); background: var(--fig-bg); padding: .7rem .9rem; }
.ledger .find { border-top: 3px solid var(--spot); border-bottom: 3px solid var(--spot); padding: .45rem 0; text-shadow: .6px 0 0 currentColor; }

/* research index — a scannable list of papers */
.papers { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.8rem; }
.paper-link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-decoration: none; color: var(--ink); border: 1px solid var(--hair); border-radius: 2px; padding: 1.2rem 1.3rem; }
.paper-link .pt { font-family: var(--poem); font-size: 1.3rem; }
.paper-link .pf { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--spot); white-space: nowrap; }
.paper-link:hover .pt, .paper-link:focus-visible .pt { text-decoration: underline; text-decoration-color: var(--spot); }
.upcoming { margin-top: 1.6rem; font-family: var(--body); font-size: .82rem; line-height: 1.7; color: var(--soft); }
.upcoming b { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spot); display: block; margin-bottom: .3rem; }

/* a quiet link from the cover to the research section */
.ed-more { margin-top: 1.6rem; text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.ed-more a { color: var(--spot); text-decoration: none; }
.ed-more a:hover, .ed-more a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }

/* ─── a piece may choose a night ground over paper (colours set per piece) ─── */
body.night {
  background: radial-gradient(135% 75% at 50% -5%, var(--ground-1, #2c1a3a) 0%, var(--ground-2, #160b20) 64%, var(--ground-3, #0a060e) 100%);
  color: var(--ink-light, #ECE7E2);
}
body.night .masthead a.name,
body.night .colophon b { color: var(--ink-light, #F1ECE6); }
body.night .poem { color: var(--ink-light, #F3EFEA); }
body.night .prompt, body.night .colophon { color: var(--soft-light, #b6afa9); }
body.night .pager .marker { color: var(--soft-light, #b6afa9); }

/* scattered flecks — two sparse dot-screens (gold + green here), a calm risograph dusting */
.flecks {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; background-attachment: fixed;
  opacity: var(--fleck-opacity, .6);
  background-image:
    radial-gradient(var(--fleck-a, #D6A94B) 1.2px, transparent 1.6px),
    radial-gradient(var(--fleck-b, #4C9676) 1.1px, transparent 1.6px);
  background-size: 90px 90px, 70px 70px;
  background-position: 0 0, 42px 56px;
}

/* a leaf laid out as portrait-beside-line (stacks on narrow screens) */
.leafrow { display: flex; gap: 1.6rem; align-items: center; margin: clamp(1.6rem, 6vw, 3rem) 0 2rem; }
.leafrow img {
  display: block; width: 100%; max-width: 15rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  border-radius: 1px; transform: rotate(-0.6deg); flex: 0 0 auto;
  view-transition-name: art;   /* the portrait dissolves into the next leaf's frame */
}
.leafrow .poem { margin: 0; }

/* a centred plate — image above, the poem centred on its longest line (image-led single page) */
figure.plate-c { margin: clamp(1.6rem, 5vw, 2.8rem) auto 2rem; width: fit-content; max-width: 100%; }
figure.plate-c img {
  display: block; width: 100%; max-width: 17rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  border-radius: 1px; transform: rotate(-0.6deg); view-transition-name: art;
}
.poemwrap { width: fit-content; max-width: 100%; margin-inline: auto; }   /* centre on the longest line */
.poemwrap .poem { font-size: 1.35rem; line-height: 1.7; }   /* set as prose — reads like a page */
/* drop cap — sunk initial. Float method (works everywhere, incl. Firefox) as the base… */
.poem.illuminated::first-letter {
  color: var(--spot); float: left; font-size: 2.9em; line-height: .82; margin: .02em .32em 0 0;
}
/* …upgraded to the proper sunk initial where supported (Chrome/Safari) — exact baseline alignment, contained in the text box */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .poem.illuminated::first-letter {
    float: none; font-size: inherit; line-height: 1; margin: 0 .32em 0 0;
    -webkit-initial-letter: 2; initial-letter: 2;
  }
}
/* a single-page piece fills the height — art + poem centred between masthead and footer */
.stage { min-height: 100dvh; display: flex; flex-direction: column; }
.stage .middle { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; }
.stage .middle figure.plate-c { margin-block: 0 2rem; }
.stage .endmatter { flex: 0 0 auto; }
/* mobile: keep image and poem on the same centred axis (poemwrap stays fit-content, just smaller) */
@media (max-width: 34rem) {
  /* narrow screens: let the flex column shrink to the viewport (min-width:auto would keep it
     content-wide and overflow), and drop the centre-on-longest-line so the poem wraps to fit */
  .stage .middle, .poemwrap { min-width: 0; }
  .poemwrap { width: auto; max-width: 100%; }
  .poemwrap .poem { font-size: 1.15rem; max-width: 100%; }
  figure.plate-c img { max-width: 13.5rem; }
}

.leafrow.plate { gap: 1.9rem; align-items: center; }
.leafrow.plate img { max-width: 18.5rem; }
.leafrow.plate .poem { font-size: 1.4rem; line-height: 1.6; max-width: 30rem; }
@media (max-width: 34rem) { .leafrow { flex-direction: column; align-items: flex-start; } .leafrow img { max-width: 13rem; } }
/* the plate needs the wide measure to sit side-by-side — stack it sooner, before the poem cramps */
@media (max-width: 51rem) {
  .leafrow.plate { flex-direction: column; align-items: flex-start; }
  .leafrow.plate img { max-width: 16rem; }
  .leafrow.plate .poem { max-width: 30rem; }
}

/* colophon — the small human touch */
footer.colophon { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); font-size: .78rem; line-height: 1.6; color: var(--soft); }
footer.colophon b { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ─── zine page treatment (chrome only; the poem stays pristine on flat paper) ─── */

/* photocopy edge-burn — felt page wear toward the margins */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 48%, transparent 58%, rgba(30, 30, 28, .07) 100%);
}
body::after { opacity: .07; }   /* a touch more paper tooth */

/* masthead as a photocopied band — halftone dot screen + toner-fleck */
.masthead { position: relative; padding: .55rem .6rem 1.5rem; margin: 0 -.6rem 1.7rem; }
.masthead::before {             /* halftone, marker-orange */
  content: ""; position: absolute; inset: 0 -100vw; z-index: 0;
  background-image: radial-gradient(var(--spot) 36%, transparent 40%);
  background-size: 7px 7px; opacity: .15;
}
.masthead::after {              /* toner band — run-through-a-copier */
  content: ""; position: absolute; inset: 0 -100vw; z-index: 0;
  background-image: var(--grain); background-size: 90px 90px;
  mix-blend-mode: multiply; opacity: .14; pointer-events: none;
}
.masthead a.name, .masthead .no { position: relative; z-index: 1; }
.masthead a.name { display: inline-block; }
.masthead a.name::after {       /* toner-fleck over the wordmark glyphs */
  content: ""; position: absolute; inset: -8% -5%;
  background-image: var(--grain); background-size: 70px 70px;
  mix-blend-mode: screen; opacity: .62; pointer-events: none;
}

/* triptych as taped-in photocopied panels — cut-and-paste delight, a hand-placed micro-tilt */
.triptych { gap: 1.1rem; }
.frame { all: unset; display: block; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.frame:focus-visible { outline: 2px solid var(--spot); outline-offset: 4px; border-radius: 1px; }
.frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  border: 1px solid rgba(30, 30, 28, .55);
  box-shadow: 0 1px 3px rgba(30, 30, 28, .14);
  background: var(--paper); border-radius: 1px;
}
.frame:nth-child(1) img { transform: rotate(-0.8deg); }
.frame:nth-child(2) img { transform: rotate( 0.5deg); }
.frame:nth-child(3) img { transform: rotate(-0.4deg); }

/* one panel enlarges to fill the column; the others give way — no motion, an instant swap */
.triptych.has-open { grid-template-columns: 1fr; gap: 0; }
.triptych.has-open .frame:not(.is-open) { display: none; }
.frame.is-open { cursor: zoom-out; }
.frame.is-open img { transform: none; }

/* the divider — a marker-orange halftone mark, a little hand-done */
.rule { height: 9px; background-image: radial-gradient(var(--spot) 1.3px, transparent 1.7px); background-size: 7px 7px; opacity: .5; }

/* an edition leaf — one image, one line, a single breath; the page turns through them */
figure.solo { margin: clamp(1.2rem, 5vw, 2.6rem) 0 2rem; }
figure.solo img {
  display: block; width: 100%; max-width: 29rem; height: auto; aspect-ratio: 1 / 1; margin: 0 auto;
  border: 1px solid rgba(30, 30, 28, .55); box-shadow: 0 2px 6px rgba(30, 30, 28, .14);
  background: var(--paper); border-radius: 1px; transform: rotate(-0.5deg);
  view-transition-name: art;   /* dissolves into the next leaf's image on page turn */
}
/* empty leaf (the turn): reserve the image's footprint so the line keeps its place */
figure.solo .ghost { display: block; width: min(100%, 29rem); aspect-ratio: 1 / 1; margin: 0 auto; }
.pager .marker { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.together-label { font-family: var(--display); font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; color: var(--spot); margin: 0 0 1.1rem; }

/* ─── frame-only dark mode (docs/specs/dark-mode.md) ───────────────────────────
   The room dims to neutral charcoal; the pieces keep their authored world.
   Scope: every frame body EXCEPT a piece's own world (.soak = Pity, .night = Sanctuary),
   which carry their own --paper. Two triggers share one set of values:
     • auto    — @media (prefers-color-scheme: dark), unless the reader forced light
     • forced  — html[data-theme="dark"] (the quiet toggle; persisted in localStorage)
   Keep the value lists below identical. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
  html:not([data-theme="light"]) body:not(.soak):not(.night) {
    --paper: #121212; --ink: #E8E5DC; --soft: #979390; --hair: rgba(255, 255, 255, .12);
    --grain-blend: screen; --grain-opacity: .045; --title-shadow: none;
    --fig-bg: rgba(255, 255, 255, .05); --fig-bd: rgba(255, 255, 255, .4);
  }
  html:not([data-theme="light"]) body:not(.soak):not(.night)::after { opacity: .045; }
  html:not([data-theme="light"]) body:not(.soak):not(.night)::before { display: none; }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body:not(.soak):not(.night) {
  --paper: #121212; --ink: #E8E5DC; --soft: #979390; --hair: rgba(255, 255, 255, .12);
  --grain-blend: screen; --grain-opacity: .045; --title-shadow: none;
  --fig-bg: rgba(255, 255, 255, .05); --fig-bd: rgba(255, 255, 255, .4);
}
html[data-theme="dark"] body:not(.soak):not(.night)::after { opacity: .045; }
html[data-theme="dark"] body:not(.soak):not(.night)::before { display: none; }

/* the quiet toggle — a single peripheral mark, JS-created (absent when JS is off; auto still holds).
   ◑ auto (adaptive) · ○ light · ● dark */
.theme-toggle {
  position: fixed; top: .7rem; right: .8rem; z-index: 10000;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--body); font-size: 1.05rem; line-height: 1;
  color: var(--soft); opacity: .55; padding: .4rem; border-radius: 50%;
  transition: opacity .2s, color .2s;
}
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; color: var(--spot); }
.theme-toggle:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* ─── the listening plinth (docs/specs/sound-and-plinth.md) ─────────────────────
   A piece shown as poem + still + two calm, opt-in controls (Motion, Sound), both OFF by default.
   The controls are revealed by JS (no JS → the still is a complete, silent piece; nothing autoplays).
   The art keeps its own colour; texture never touches it. */
figure.plinth { margin: clamp(1.6rem, 5vw, 2.8rem) auto 2rem; width: fit-content; max-width: 100%; text-align: center; }
figure.plinth .plinth-art {
  display: block; width: 100%; max-width: 30rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-inline: auto;                              /* centre the image block within the figure */
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  border-radius: 1px; transform: rotate(-0.5deg); view-transition-name: art;
}
.plinth-cap { margin: .7rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }

/* the two controls — flex row of calm, labelled buttons; hidden entirely until JS reveals them */
.plinth-controls[hidden] { display: none; }
.plinth-controls { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; align-items: center; margin-top: 1.1rem; }
.plinth-btn {
  appearance: none; cursor: pointer;
  min-width: 8.5rem; text-align: center;                            /* even width — pressed swap never shifts them */
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--soft); background: transparent;
  border: 1.5px solid var(--hair); border-radius: 2px; padding: .5rem .95rem;
  transition: color .2s, background-color .2s, border-color .2s;
}
.plinth-btn::before { content: "▸ "; }                              /* off — a quiet play affordance */
.plinth-btn[aria-pressed="true"] { color: var(--spot); border-color: var(--spot); background: color-mix(in srgb, var(--spot) 10%, transparent); }
.plinth-btn[aria-pressed="true"]::before { content: "▪ "; }        /* on — a soft lift, not a fill */

/* sound playing — a small, calm equalizer, JS-injected into the Sound pill; shown only while it plays.
   Three soft bars drifting at slightly different rates, so it breathes rather than loops mechanically.
   Under reduced-motion it holds still. When it shows, it stands in for the static ▪ glyph. */
.plinth-btn[data-role="sound"][aria-pressed="true"]::before { content: ""; }
.plinth-btn .eq { display: none; align-items: flex-end; gap: 2px; height: .72em; margin-right: .55em; vertical-align: -.06em; }
.plinth-btn[aria-pressed="true"] .eq { display: inline-flex; }
.plinth-btn .eq i { display: block; width: 2.5px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.32); }
.plinth-btn[aria-pressed="true"] .eq i:nth-child(1) { animation: eq-a 1.7s ease-in-out infinite; }
.plinth-btn[aria-pressed="true"] .eq i:nth-child(2) { animation: eq-b 2.1s ease-in-out infinite .3s; }
.plinth-btn[aria-pressed="true"] .eq i:nth-child(3) { animation: eq-a 1.5s ease-in-out infinite .6s; }
@keyframes eq-a { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes eq-b { 0%, 100% { transform: scaleY(.5); } 45% { transform: scaleY(.85); } }
@media (prefers-reduced-motion: reduce) { .plinth-btn .eq i { animation: none !important; transform: scaleY(.6); } }

/* the volume level — halftone dots after the Sound pill (JS-injected); a meter, lit low→high.
   Shown only while sound plays; tap to set, arrow keys to nudge. */
.sound-wrap { position: relative; display: inline-flex; }        /* anchor for the out-of-flow level dots */
.vdots { position: absolute; left: calc(100% + .7rem); top: 50%; transform: translateY(-50%); display: inline-flex; gap: 5px; align-items: center; }
.vdots[hidden] { display: none; }
.vdot { appearance: none; cursor: pointer; padding: 0; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--soft); background: transparent; transition: background-color .2s, border-color .2s; }
.vdot.on { background: var(--spot); border-color: var(--spot); }
.vdot:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }
body.night .vdot { border-color: var(--soft-light, #b6afa9); }
body.night .vdot.on { background: var(--spot); border-color: var(--spot); }
@media (prefers-reduced-motion: reduce) { .vdot { transition: none; } }
.plinth-btn:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }
.plinth-note { width: 100%; margin: .1rem 0 0; font-family: var(--mono); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
/* reduced-motion never offers the motion loop (JS also removes the button); sound is off-by-default */
@media (prefers-reduced-motion: reduce) { .plinth-btn { transition: none; } .plinth-btn[data-role="motion"] { display: none; } }
/* on a night piece, lift the controls + caption off the dark ground */
body.night .plinth-btn { color: var(--soft-light, #b6afa9); border-color: rgba(255, 255, 255, .22); }
body.night .plinth-btn[aria-pressed="true"] { color: var(--spot); border-color: var(--spot); background: color-mix(in srgb, var(--spot) 14%, transparent); }
body.night .plinth-note, body.night .plinth-cap { color: var(--soft-light, #b6afa9); }
@media (max-width: 34rem) { figure.plinth .plinth-art { max-width: 22rem; } }