/* ═══════════════════════════════════════════════════════
   DRACU v2 — two threads on parchment and ink
   Ink, parchment, ember. Text colours are checked at 7:1 in both themes.
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant';
  src: url('/dracu/assets/fonts/Cormorant.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/dracu/assets/fonts/Cormorant-Italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  --paper:    #f6f1e6;
  --card:     #fbf8f0;
  --surface:  #ece3cf;
  --stage:    #efe7d4;
  --stone:    #b9aa8a;

  --ink:      #1d1710;
  --ink-2:    #3a3025;
  --ink-3:    #4f4436;
  --ink-4:    #54483a;

  --accent:   #7a1d1d;
  --dragon:   #164d30;
  --devil:    #8a1717;
  --name:     #43347e;
  --amber:    #664300;

  --focus:    #2d6a8f;
  --border:   rgba(29,23,16,.16);
  --line-soft: rgba(29,23,16,.28);

  --bar-h:    2.75rem;
  --pad:      clamp(1rem, 4vw, 2rem);
  --measure:  38rem;
  --stage-h:  clamp(15rem, 44svh, 26rem);

  --font-display: 'Cormorant', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Georgia', 'Times New Roman', serif;
}

[data-theme="dark"] {
  --paper:    #12100c;
  --card:     #1a1610;
  --surface:  #231d14;
  --stage:    #17130e;
  --stone:    #4a3f2d;

  --ink:      #f2eadb;
  --ink-2:    #ddd4c0;
  --ink-3:    #c9bfa8;
  --ink-4:    #b8ad95;

  --accent:   #e8a994;
  --dragon:   #86d3a8;
  --devil:    #f29a9a;
  --name:     #c3b6f4;
  --amber:    #e6b95e;

  --focus:    #7cc0e0;
  --border:   rgba(242,234,219,.16);
  --line-soft: rgba(242,234,219,.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #12100c; --card: #1a1610; --surface: #231d14; --stage: #17130e; --stone: #4a3f2d;
    --ink:      #f2eadb; --ink-2: #ddd4c0; --ink-3: #c9bfa8; --ink-4: #b8ad95;
    --accent:   #e8a994; --dragon: #86d3a8; --devil: #f29a9a; --name: #c3b6f4; --amber: #e6b95e;
    --focus:    #7cc0e0; --border: rgba(242,234,219,.16); --line-soft: rgba(242,234,219,.3);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); }
body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + .22vw, 1.17rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }
em[lang], i[lang] { font-style: italic; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* ── Topbar ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: .5rem;
  height: var(--bar-h);
  padding: 0 clamp(.75rem, 2vw, 1.25rem);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600; letter-spacing: .02em;
}
.topbar .home { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.topbar .home:hover { color: var(--ink); }
.topbar .glyph { color: var(--accent); flex: none; }
.topnav { display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { color: var(--ink-3); text-decoration: none; white-space: nowrap; padding: .35rem .55rem; border-radius: 4px; }
.topnav a:hover, .topnav a[aria-current="true"] { color: var(--ink); background: var(--surface); }
.spacer { flex: 1; }
.chip {
  font-family: var(--font-body); font-size: .8rem; font-weight: 400;
  color: var(--ink-2); text-decoration: none; padding: .25rem .6rem;
  border: 1px solid var(--line-soft); border-radius: 999px; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 50%;
  color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }
@media (pointer: coarse) { .icon-btn { width: 2.75rem; height: 2.75rem; } .chip { padding: .55rem .8rem; } }
@media (max-width: 36rem) { .topbar .home span { display: none; } .topnav a { padding: .35rem .4rem; font-size: .88rem; } }

/* the serpent that rides the hairline as the page scrolls */
.progress { position: fixed; top: var(--bar-h); left: 0; right: 0; height: 2px; z-index: 99; pointer-events: none; }
.progress .bar { position: absolute; inset: 0; background: linear-gradient(90deg, var(--dragon), var(--amber), var(--devil)); transform-origin: 0 50%; transform: scaleX(0); }
.progress .pg-head { position: absolute; left: 0; top: -6px; fill: var(--accent); color: var(--accent); will-change: transform; }
.progress .pg-head .tongue { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.progress .pg-head .eye { fill: var(--paper); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Reading rail (wide screens) ────────────────────── */
.rail { display: none; }
@media (min-width: 96rem) {
  .rail { display: flex; flex-direction: column; gap: .15rem; position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 90;
    font-family: var(--font-display); font-size: .85rem; font-weight: 600; letter-spacing: .03em; }
  .rail a { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; color: var(--ink-4); text-decoration: none; padding: .3rem .5rem; border-radius: 4px; }
  .rail a:hover { color: var(--ink); }
  .rail a[aria-current="true"] { color: var(--ink); }
  .rail a[aria-current="true"] i { background: var(--accent); }
  .rail i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone); display: block; flex: none; }
}

/* ── Hero ───────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  max-width: 78rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) var(--pad) clamp(2rem, 5vw, 4rem);
  min-height: calc(100svh - var(--bar-h));
}
.hero-text { min-width: 0; }
.kicker { font-family: var(--font-display); font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.7rem, 1.4rem + 5.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.h1-colon { color: var(--ink-3); }
.h1-sub { display: block; margin-top: .45rem; font-size: clamp(1.45rem, 1rem + 1.8vw, 2.5rem); font-weight: 500; font-style: italic; color: var(--ink-2); letter-spacing: 0; line-height: 1.1; }
.deck { margin-top: 1.4rem; max-width: 36rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem); color: var(--ink-2); }
.hero .share { margin-top: 1.4rem; --sr-ink: var(--ink-2); --sr-acc: var(--accent); --sr-line: var(--line-soft); --sr-ok: var(--ink-2); }
.cue { margin-top: 1.4rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.cue a { text-decoration: none; display: inline-block; padding: .4rem 0; }
.cue a span { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.fig { margin: 0; }
.fig img { border-radius: .4rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.18); }
.fig figcaption { font-size: .85rem; line-height: 1.5; color: var(--ink-3); margin-top: .7rem; }
.fig figcaption .cr { display: block; margin-top: .25rem; color: var(--ink-4); font-size: .8rem; }
.hero .fig img { max-height: calc(100svh - var(--bar-h) - 7rem); width: auto; margin-inline: auto; }
@media (max-width: 56rem) {
  .hero { display: block; min-height: 0; }
  .hero .fig { margin-top: 1.8rem; }
  .hero .fig img { max-height: 58svh; width: 100%; object-fit: cover; object-position: 50% 28%; }
}

/* ── Story scenes ───────────────────────────────────── */
.story { position: relative; padding-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--border); }
.story-head { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad); }
.story h2, .block h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 700; line-height: 1.08; text-wrap: balance; }
.story h2 .anchor, .block h2 .anchor { color: inherit; text-decoration: none; }
.story h2 .anchor:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lede { margin-top: 1rem; color: var(--ink-2); font-size: 1.1rem; }
.legend { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .92rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.legend .dot { width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; display: inline-block; }
.legend .m-dragon .dot { color: var(--dragon); } .legend .m-devil .dot { color: var(--devil); } .legend .m-name .dot { color: var(--name); }
.legend .sw { width: 1.8rem; height: 0; border-top: 4px solid var(--name); display: inline-block; }
.legend .sw-dash { border-top-style: dashed; }
.tbl { margin-top: 1.1rem; }
.tbl summary { cursor: pointer; color: var(--accent); font-size: .95rem; padding: .4rem 0; }
.tbl table { margin-top: .6rem; }
.cognates { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cognates caption { text-align: left; color: var(--ink-3); font-size: .85rem; padding-bottom: .5rem; }
.cognates th, .cognates td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); }
.cognates thead th { color: var(--ink-3); font-weight: 400; font-size: .82rem; }
.cognates tr.hl th, .cognates tr.hl td { color: var(--devil); font-weight: 700; }

.story-grid { max-width: 78rem; margin: 1.5rem auto 0; padding: 0 var(--pad); }
.steps { list-style: none; padding: 0; margin: 0; }
.stage-wrap { display: none; }

/* with scripts: stage pinned beside the steps */
.js .story-grid { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.js .stage-wrap { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar-h) + .75rem); height: calc(100svh - var(--bar-h) - 1.5rem); max-height: 54rem; min-height: 21rem; align-self: start; }
.js .steps { grid-column: 1; grid-row: 1; }
.stage {
  position: relative; height: 100%; overflow: hidden; container-type: size;
  background: var(--stage); border: 1px solid var(--border); border-radius: .8rem;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%);
}

.step { scroll-margin-top: calc(var(--bar-h) + 6svh); }
.js .step { min-height: 82svh; padding-block: 8svh 6svh; }
.js .step:last-child { min-height: 100svh; }
.js #s-verse, .js #s-meet { min-height: 150svh; }
.js .step.fig-step { min-height: 95svh; }

.card {
  --lane: var(--name);
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--lane);
  border-radius: .5rem; padding: 1.15rem 1.3rem 1.25rem;
  transition: box-shadow .3s, transform .3s;
}

.m-dragon .card { --lane: var(--dragon); } .m-devil .card { --lane: var(--devil); } .m-name .card { --lane: var(--name); }
.card.is-recon { border-left-style: dashed; }
.card h3 { display: grid; gap: .1rem; margin-bottom: .75rem; font-family: var(--font-display); font-weight: 600; line-height: 1.1; }
.card .era { font-family: var(--font-body); font-size: .76rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card .form { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 700; color: var(--lane); overflow-wrap: anywhere; }
.card .form sub { font-size: .55em; }
.card .gloss { font-style: italic; font-weight: 500; font-size: 1.22rem; color: var(--ink-2); }
.card p + p { margin-top: .75rem; }
.card .recon-line { margin: 0 0 .7rem; }
.tag-recon { display: inline-block; font-family: var(--font-body); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--name); border: 1px dashed var(--name); border-radius: 999px; padding: .1rem .6rem; }
.psrc { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .85rem; line-height: 1.55; color: var(--ink-3); overflow-wrap: anywhere; }
.psrc a { color: var(--ink-2); }
.card blockquote { margin: 1rem 0 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--name); font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--ink); }
.card .next { margin-top: 1rem; font-size: .95rem; }
.card .next span { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; display: block; }
.card .fig { margin-top: 1rem; }
.card .fig img { width: 100%; max-height: 22rem; object-fit: cover; object-position: 50% 30%; }

.js .step:not(.on) .card { transform: translateX(-5px); }
.js .step.on .card { box-shadow: 0 0 0 2px var(--lane), 0 .7rem 2rem rgba(0,0,0,.14); }

/* ── Lane scene (SVG threads + specimen) ────────────── */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-dragon { stop-color: var(--dragon); } .g-amber { stop-color: var(--amber); } .g-devil { stop-color: var(--devil); } .g-name { stop-color: var(--name); }
.ln-ghost { fill: none; stroke: var(--ink-4); stroke-opacity: .4; stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.ln { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ln-a { stroke: url(#la-grad); }
.ln-b { stroke: var(--name); }
.ln-b.dash, .ln-bridge { stroke-dasharray: 2 11; stroke-width: 5; }
.ln-bridge.top { stroke: var(--devil); } .ln-bridge.bot { stroke: var(--name); }
.bridge { transition: opacity .4s; }
.lane-label { font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-3); }
.scene.meeting .lane-label { opacity: 0; }
.lane-label { transition: opacity .3s; }
.nd { cursor: pointer; transition: opacity .3s; }
.nd .ring { fill: var(--stage); stroke-width: 4; transition: transform .3s; transform-box: fill-box; transform-origin: center; }
.nd.k-dragon .ring { stroke: var(--dragon); } .nd.k-devil .ring { stroke: var(--devil); } .nd.k-name .ring { stroke: var(--name); }
.nd.recon .ring { stroke-dasharray: 3 3; }
.nd.todo { opacity: .5; }
.nd.cur .ring { transform: scale(1.35); fill: var(--paper); }
.nd .lab { font-family: var(--font-display); font-weight: 700; font-size: 17px; fill: var(--ink); text-anchor: middle; }
.nd .sub { font-family: var(--font-body); font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.nd.cur .lab { fill: var(--ink); }
.nd .hit { fill: transparent; }
.hd { transition: fill .3s; fill: var(--dragon); }
.hd.k-dragon { fill: var(--dragon); } .hd.k-devil { fill: var(--devil); } .hd.k-name { fill: var(--name); } .hd.k-amber { fill: var(--amber); }
.hd { stroke: var(--stage); stroke-width: 1.2; stroke-linejoin: round; } .hd .eye { fill: #fff; stroke: none; } .hd .tongue { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hd.k-dragon { color: var(--dragon); } .hd.k-devil { color: var(--devil); } .hd.k-name { color: var(--name); } .hd.k-amber { color: var(--amber); }

.spec { position: absolute; left: 50%; top: 50%; width: 92%; text-align: center; transform: translate(-50%, -46%); opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; --lane: var(--name); }
.spec.on { opacity: 1; transform: translate(-50%, -50%); }
.spec.m-dragon { --lane: var(--dragon); } .spec.m-devil { --lane: var(--devil); } .spec.m-name { --lane: var(--name); }
.spec .era { display: block; font-size: clamp(.7rem, 2.2cqmin, .8rem); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2em; }
.spec .form { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 12cqmin, 6.2rem); line-height: 1; color: var(--lane); white-space: nowrap; }
.spec .gloss { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 3.4cqmin, 1.6rem); color: var(--ink-2); margin-top: .25em; }
.spec .vl { display: block; margin: .3em 0; opacity: .38; transition: opacity .3s, transform .3s; }
.spec .vl .la { display: block; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(1.5rem, 7.2cqmin, 3.4rem); line-height: 1.05; color: var(--ink); }
.spec .vl .tr { display: block; font-size: clamp(.85rem, 2.6cqmin, 1.15rem); color: var(--ink-3); }
.spec .vl.lit { opacity: 1; transform: scale(1.04); }
.spec .vl.lit .la { color: var(--lane); }
.spec .vl:nth-child(2).lit .la { color: var(--amber); }
.spec .vl:nth-child(3).lit .la { color: var(--devil); }
.spec.meet { width: 96%; }
.spec.meet .w { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.55em; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 14cqmin, 6.6rem); line-height: 1; white-space: nowrap; will-change: transform; }
.spec.meet .w1 { color: var(--name); }
.spec.meet .w2 { color: var(--devil); }
.spec.meet .w sub { font-size: .38em; vertical-align: baseline; position: relative; top: .3em; }
.spec.meet.merged .w2 { color: transparent; -webkit-text-stroke: 3px var(--devil); }
.spec.meet.merged .w sub { opacity: 0; }
.spec.meet .t { position: absolute; left: 0; right: 0; font-size: clamp(.78rem, 2.4cqmin, .95rem); color: var(--ink-2); }
.spec.meet .t1 { color: var(--name); } .spec.meet .t2 { color: var(--devil); }
.spec.meet .cap { padding: .1em .5em; background: var(--stage); position: absolute; left: 0; right: 0; bottom: -4.6em; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 3.8cqmin, 1.7rem); color: var(--ink); opacity: 0; transition: opacity .4s; }
.spec.meet.merged .cap { opacity: 1; }
.spec.meet.merged .t { opacity: 0; }

@container (max-height: 26rem) {
  .spec .vl .la { font-size: clamp(1.15rem, 6.4cqmin, 2rem); }
  .spec .vl { margin: .15em 0; }
  .spec .vl:not(.lit) .tr { display: none; }
  .spec .era { display: none; }
}

/* ── Family scene ───────────────────────────────────── */
.fam { list-style: none; margin: 0; padding: clamp(.6rem, 2.4cqh, 1.4rem) clamp(.6rem, 2.6cqw, 1.3rem); height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(.15rem, .9cqh, .5rem); }
.fam-root { display: flex; align-items: baseline; gap: .8rem; padding: 0 .3rem .4rem 1rem; border-bottom: 2px solid var(--line-soft); margin-bottom: .2rem; }
.fam-root .f { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(1.7rem, 7cqmin, 3.2rem); line-height: 1; color: var(--dragon); }
.fam-root .s { font-style: italic; color: var(--ink-2); font-size: clamp(.85rem, 2.6cqmin, 1.15rem); }
.fr { --c: var(--ink-3); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1.5fr); align-items: baseline; gap: .15rem .6rem;
  padding: clamp(.12rem, .7cqh, .4rem) .6rem clamp(.12rem, .7cqh, .4rem) .9rem; border-left: 5px solid var(--c); border-radius: .3rem;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  opacity: 0; transform: translateX(14px); transition: opacity .45s, transform .45s, box-shadow .3s; }
.fr.s-dragon { --c: var(--dragon); } .fr.s-devil { --c: var(--devil); } .fr.s-spirit { --c: var(--amber); }
.fr.s-unknown { --c: var(--ink-3); border-left-style: dashed; }
.fr .l { font-size: clamp(.78rem, 2.6cqh, 1.15rem); color: var(--ink-2); line-height: 1.2; }
.fr .f { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 4.4cqh, 2.2rem); line-height: 1.1; color: var(--c); }
.fr .f-none { color: var(--ink-4); }
.fr .s { font-size: clamp(.78rem, 2.6cqh, 1.15rem); color: var(--ink-2); line-height: 1.2; display: flex; align-items: baseline; gap: .4rem; }
.fr .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); flex: none; transform: translateY(.02rem); }
.fr.show { opacity: 1; transform: none; }
.fr.show.dim { opacity: .72; }
.fr.show.hl { box-shadow: 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
@container (max-width: 30rem) { .fr { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); } }

/* ── Stoker scene ───────────────────────────────────── */
.stk { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 5cqmin, 2.4rem); text-align: center; }
.stk > div { grid-area: 1 / 1; opacity: 0; transition: opacity .45s; max-width: 100%; }
.stk > div.on { opacity: 1; }
.stk .tag { font-size: clamp(.72rem, 2.2cqmin, .85rem); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1em; }
.stk .q { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 8.4cqmin, 3.7rem); line-height: 1.12; color: var(--ink); text-wrap: balance; }
.stk .q .w { opacity: .12; transition: opacity .35s; }
.stk .q .w.on { opacity: 1; }
.stk .q .dev { color: var(--devil); background: linear-gradient(var(--devil), var(--devil)) 0 100% / 0 3px no-repeat; transition: background-size .6s; }
.stk .q .dev.on { background-size: 100% 3px; }
.stk .nt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 9cqmin, 4rem); line-height: 1.15; }
.stk .nt .a { display: block; color: var(--ink-3); position: relative; opacity: .35; transition: opacity .4s; }
.stk .nt .a.on { opacity: 1; }
.stk .nt .a::after { content: ""; position: absolute; left: 0; top: 52%; height: 3px; width: 0; background: var(--devil); transition: width .5s; }
.stk .nt .a.cut::after { width: 100%; }
.stk .nt .b { display: block; color: var(--name); opacity: 0; transition: opacity .5s; }
.stk .nt .b.on { opacity: 1; }
.stk .nt .y { display: block; font-size: .4em; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); margin-top: .6em; }
.stk .dr { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 17cqmin, 7.4rem); line-height: 1; color: var(--name); transition: color .8s; }
.stk .dr.red { color: var(--devil); }
.stk .dr-sub { margin-top: .8em; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 3.8cqmin, 1.7rem); color: var(--ink-2); }

/* ── Sources, footer ────────────────────────────────── */
.block { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--border); }
.block .wrap, .wrap { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad); }
.src-tier { font-family: var(--font-display); font-size: 1.4rem; margin: 1.8rem 0 .5rem; }
.srcs { padding-left: 1.2rem; font-size: .95rem; color: var(--ink-2); overflow-wrap: anywhere; }
.srcs li + li { margin-top: .5rem; }
.foot { border-top: 1px solid var(--border); padding: 2rem var(--pad) 3rem; text-align: center; font-size: .9rem; color: var(--ink-3); }
.foot p + p { margin-top: .3rem; }
.missing { padding: 4rem var(--pad); }
.missing h1 { font-family: var(--font-display); font-size: 3rem; }

/* ── Phones and narrow windows: the stage pins on top ─ */
@media (max-width: 56rem) {
  :root { --stage-h: clamp(15rem, 40svh, 26rem); }
  .js .story-grid { display: block; padding: 0; margin-top: 1.2rem; }
  .js .stage-wrap { position: sticky; top: var(--bar-h); height: var(--stage-h); max-height: none; min-height: 0; z-index: 6; background: var(--paper); border-bottom: 1px solid var(--border); }
  #romance { --stage-h: clamp(19rem, 54svh, 30rem); }
  #stoker { --stage-h: clamp(13rem, 38svh, 22rem); }
  .js .stage { border-radius: 0; border-width: 0; }
  .step { scroll-margin-top: calc(var(--bar-h) + var(--stage-h) + .8rem); }
  .js .step { min-height: 66svh; padding: 3svh var(--pad) 4svh; }
  .js #s-verse, .js #s-meet { min-height: 130svh; }
  .js .step:last-child { min-height: 90svh; }
  .card { padding: 1rem 1.05rem 1.1rem; }
  .card .fig img { max-height: 15rem; }
}
@media (max-height: 34rem) and (min-width: 56.01rem) { .js .step { min-height: 110svh; } }

/* ── Motion preferences, print, no scripts ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .topbar, .rail, .icon-btn, .progress, .stage-wrap, .cue { display: none; }
  body { font-size: 11pt; }
  .step { break-inside: avoid; min-height: 0 !important; padding: 0 0 1rem !important; }
}

/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}