@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.68; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; }
a { color:inherit; }

/* ---------- Stripe bands ---------- */
.band { height:34px; --stripe-w:26px; }
.band--thin { height:14px; --stripe-w:18px; opacity:.9; }

/* ---------- Masthead: a title page, not a product header ---------- */
.masthead { text-align:center; padding:3rem var(--gutter) 0; }
.wordmark a { text-decoration:none; color:inherit; }
.wordmark { max-width:none; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:var(--track-eyebrow); text-transform:uppercase; margin:0; }
.masthead .byline { max-width:none; font-family:var(--display); font-style:italic; font-size:.95rem; color:var(--ink-faint); margin:.45rem 0 0; letter-spacing:.02em; }
.masthead .rule { width:clamp(120px,18vw,200px); height:1px; background:var(--rule); border:0; margin:2rem auto 1.5rem; }

nav.chapters { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem clamp(1.4rem,4vw,3rem); padding:0 var(--gutter) 2.75rem; }
nav.chapters a { font-family:var(--display); font-size:.9rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; padding:.35rem 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s; }
nav.chapters a:hover { color:var(--ink); }
nav.chapters a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- Page frame ---------- */
main { max-width:1220px; margin-inline:auto; padding: clamp(2.5rem,6vw,5rem) var(--gutter) var(--section); }
.pagehead { margin-bottom: clamp(2.5rem,6vw,4.5rem); }
.eyebrow { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.78rem; color:var(--ink-faint); margin:0 0 1.5rem; }
h1 { font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:var(--track-display); font-size:clamp(1.8rem,5vw,3rem); margin:0 0 .5rem; line-height:1.12; }
h2 { font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:var(--track-display); font-size:clamp(1.4rem,3.4vw,2.1rem); margin:0 0 .4rem; line-height:1.15; }
h3 { font-family:var(--display); font-weight:400; font-size:1.45rem; letter-spacing:.06em; margin:0 0 .5rem; }
.sub { font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.35rem); color:var(--ink-soft); margin:0; }
p { max-width:var(--measure); }
.note { font-size:.9rem; color:var(--ink-faint); font-style:italic; }

/* ---------- Map ---------- */
.chart { background:var(--parchment); border:1px solid var(--sepia); padding:.65rem; }
.chart svg { display:block; width:100%; height:auto; }
.pin { cursor:pointer; }
.pin circle { fill:var(--cream-warm); stroke:var(--sepia-deep); stroke-width:1.6; transition:.2s; }
.pin:hover circle, .pin:focus-visible circle { fill:var(--ink); stroke:var(--ink); }
.pin text { font-family:var(--display); font-size:15px; letter-spacing:.14em; text-transform:uppercase; fill:var(--sepia-deep); }
.pin:hover text { fill:var(--ink); }

.layout { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:1080px){ .layout { grid-template-columns:1.55fr 1fr; align-items:start; } }
.drawer { background:var(--cream-warm); border:1px solid var(--rule); border-top:3px solid var(--ink); padding:2rem 1.75rem; }
.drawer .eyebrow { margin-bottom:.9rem; }
.in-book { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--rule); font-style:italic; color:var(--ink-soft); }
.sources { margin-top:1.4rem; font-size:.82rem; color:var(--ink-faint); }

/* ---------- Glossary ---------- */
.gloss-cat { margin-bottom:clamp(3rem,7vw,5rem); }
.gloss-cat > h2 { margin-bottom:1.75rem; }
.gloss { max-width:52rem; border-top:1px solid var(--ink); }
.entry { padding:1.6rem 0; border-bottom:1px solid var(--rule); }
.entry h3 { font-size:1.35rem; letter-spacing:.05em; margin-bottom:.35rem; }
.entry__def { margin:0; }

/* The honesty flag. Collapsed by default so the glossary stays a reference,
   open in one click, and always labelled for what it is. */
.caveat { margin-top:1.1rem; }
.caveat > summary { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; list-style:none;
  font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.74rem;
  color:var(--ink-faint); padding:.3rem 0; transition:color .16s; }
.caveat > summary::-webkit-details-marker { display:none; }
.caveat > summary::before { content:""; width:9px; height:9px; border-left:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(-45deg) translate(1px,-1px); transition:transform .2s; }
.caveat[open] > summary::before { transform:rotate(135deg) translate(-2px,2px); }
.caveat > summary:hover { color:var(--ink); }
.caveat[open] > summary { color:var(--ink); margin-bottom:.4rem; }
.caveat__body { background:var(--cream-warm); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1.15rem 1.35rem; }
.caveat__body p { margin:0 0 .85rem; font-size:.95rem; color:var(--ink-soft); max-width:none; }
.caveat__body p:last-child { margin-bottom:0; }

.sources { margin-top:1.1rem; font-size:.8rem; color:var(--ink-faint); max-width:none; }
.sources a { color:inherit; text-decoration-color:var(--rule); text-underline-offset:2px; }
.sources a:hover { color:var(--ink); }

/* ---------- Characters ---------- */
.gallery-status { margin:0 0 clamp(2rem,4vw,3rem); }
.house { margin-bottom:clamp(3rem,7vw,5rem); }
.house > h2 { margin-bottom:1.75rem; padding-bottom:.9rem; border-bottom:1px solid var(--ink); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2.25rem 1.75rem; }
.card figure { margin:0; aspect-ratio:3/4; background:var(--cream-warm); border:1px solid var(--rule); display:grid; place-items:center; position:relative; overflow:hidden; }
.card figure img { width:100%; height:100%; object-fit:cover; display:block; }
.card h3 { font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.92rem; font-weight:400; margin:.9rem 0 .25rem; }
.card p { font-size:.88rem; color:var(--ink-soft); margin:0; line-height:1.5; max-width:none; }

/* ---------- The Drama: an episode ledger ---------- */
.ledger { max-width:56rem; border-top:1px solid var(--ink); }
.ep { display:grid; grid-template-columns:3.2rem 1fr; gap:0 1.4rem; padding:1.5rem 0; border-bottom:1px solid var(--rule); align-items:start; }
@media (min-width:720px){ .ep { grid-template-columns:3.2rem 1fr auto; align-items:center; } }
.ep__no { font-family:var(--display); font-size:1.5rem; color:var(--ink-faint); letter-spacing:.06em; }
.ep__still { display:none; width:74px; height:132px; background:var(--cream-warm); border:1px solid var(--rule); position:relative; overflow:hidden; }
@media (min-width:720px){ .ep__still { display:block; margin:0 auto; } }
.ep__still::after { content:""; position:absolute; inset:6px; border:1px solid var(--rule); }
.ep__still img { width:100%; height:100%; object-fit:cover; }
.ep__body h4 { font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.95rem; font-weight:400; margin:0 0 .3rem; }
.ep__body p { font-size:.9rem; color:var(--ink-soft); margin:0; max-width:32rem; }
.ep__status { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.72rem; color:var(--ink-faint); white-space:nowrap; padding-top:.7rem; }
@media (min-width:720px){ .ep__status { padding-top:0; text-align:right; } }
.ep--live .ep__no { color:var(--ink); }
.playbill { font-style:italic; color:var(--ink-soft); margin:0 0 2.5rem; }

/* ---------- Platform marks: engraved, never brand-coloured ---------- */
.watch { display:flex; gap:1rem; align-items:center; justify-content:flex-start; }
@media (min-width:720px){ .watch { justify-content:flex-end; } }
.watch a { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--rule); color:var(--ink-faint); transition:color .18s, border-color .18s, background .18s; }
.watch a:hover, .watch a:focus-visible { color:var(--cream); border-color:var(--ink); background:var(--ink); }
.watch svg { width:19px; height:19px; display:block; }
.watch svg * { vector-effect:non-scaling-stroke; }

/* ---------- Book ---------- */
.book { display:grid; gap:2.5rem; align-items:start; }
@media (min-width:760px){ .book { grid-template-columns:230px 1fr; gap:3.5rem; } }
.book img { width:100%; display:block; border:1px solid var(--rule); }
.btn { display:inline-block; margin-top:1.8rem; font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.82rem; padding:.95rem 2.2rem; border:1px solid var(--ink); color:var(--ink); text-decoration:none; }
.btn:hover { background:var(--ink); color:var(--cream); }
.btn[aria-disabled] { border-color:var(--rule); color:var(--ink-faint); pointer-events:none; }

/* ---------- Feedback + footer ---------- */
.feedback { background:var(--cream-warm); border-top:1px solid var(--rule); padding:3rem var(--gutter); }
.feedback p { max-width:44rem; margin:0 auto; text-align:center; font-style:italic; color:var(--ink-soft); }
.feedback .watch { justify-content:center; margin-top:1.75rem; }
footer { padding:2rem var(--gutter) 3rem; text-align:center; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--display); }

/* ---------- Page transition: a turned page, not a jump ---------- */
@media (prefers-reduced-motion: no-preference) {
  main, .pagehead { animation: settle .42s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes settle { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
}

/* ---------- Small screens: most traffic arrives here from a video link,
     so the masthead must not eat the first screen before any content. ---------- */
@media (max-width:719px) {
  .masthead { padding-top:1.75rem; }
  .masthead .byline { font-size:.85rem; margin-top:.3rem; }
  .masthead .rule { margin:1.1rem auto .9rem; width:96px; }
  nav.chapters { gap:.3rem 1.25rem; padding-bottom:1.5rem; }
  nav.chapters a { font-size:.78rem; letter-spacing:.16em; padding:.25rem 0; }
  main { padding-top:1.75rem; }
  .playbill { margin-bottom:1.75rem; }
  .band { height:22px; --stripe-w:18px; }
}

/* ---------- Chart: pins and reference table ---------- */
.chartwrap { min-width:0; }
.chart__svg { display:block; width:100%; height:auto; }
.pin { cursor:pointer; }
.pin__dot { fill:var(--cream-warm); stroke:var(--sepia-deep); stroke-width:1.3; transition:fill .18s, stroke .18s; }
.pin__num { font-family:var(--display); font-size:13px; fill:var(--sepia-deep); letter-spacing:.02em; transition:fill .18s; }
.pin__label { font-family:var(--display); font-size:13px; letter-spacing:.16em; text-transform:uppercase; fill:var(--sepia-deep); transition:fill .18s; }
.pin__leader { stroke:var(--sepia); stroke-width:.7; opacity:.62; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot, .pin.is-active .pin__dot { fill:var(--ink); stroke:var(--ink); }
.pin:hover .pin__num, .pin:focus-visible .pin__num, .pin.is-active .pin__num { fill:var(--cream); }
.pin:hover .pin__label, .pin.is-active .pin__label { fill:var(--ink); }
.pin:focus { outline:none; }
.pin:focus-visible .pin__label { fill:var(--ink); }

.chartfoot { margin-top:1.1rem; }
.chartfoot__note { font-size:.78rem; color:var(--ink-faint); font-style:italic; max-width:none; margin:0 0 1.2rem; }
.chartfoot__note a { color:inherit; }
.refs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.1rem 1.5rem; border-top:1px solid var(--rule); }
.ref { display:flex; gap:.85rem; align-items:baseline; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); padding:.65rem .2rem; cursor:pointer; font:inherit; color:var(--ink-soft); transition:color .16s; }
.ref:hover, .ref.is-active { color:var(--ink); }
.ref__n { font-family:var(--display); font-size:.95rem; color:var(--ink-faint); min-width:1ch; }
.ref.is-active .ref__n { color:var(--ink); }
.ref__t { font-family:var(--display); font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; }
.drawer h2 { font-size:clamp(1.3rem,2.6vw,1.75rem); margin-bottom:.9rem; }

/* ---------- Glossary category filter ---------- */
.gloss-filter { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 clamp(2.5rem,5vw,3.5rem); }
.gloss-filter__btn { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow);
  font-size:.74rem; padding:.6rem 1.25rem; border:1px solid var(--rule); background:none; color:var(--ink-faint);
  cursor:pointer; transition:color .16s, border-color .16s, background .16s; }
.gloss-filter__btn:hover { color:var(--ink); border-color:var(--ink-faint); }
.gloss-filter__btn.is-on { color:var(--cream); background:var(--ink); border-color:var(--ink); }

/* ---------- The language note: a standing editorial statement, not an entry ---------- */
.langnote { max-width:44rem; margin:0 0 clamp(3rem,7vw,4.5rem); padding:clamp(1.75rem,4vw,2.5rem) clamp(1.5rem,4vw,2.5rem);
  background:var(--cream-warm); border-top:3px solid var(--ink); border-bottom:1px solid var(--rule); }
.langnote h2 { font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:var(--track-display); margin-bottom:1.1rem; }
.langnote p { font-size:.97rem; color:var(--ink-soft); max-width:none; margin:0 0 .9rem; }
.langnote p:first-of-type { font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ink); margin-bottom:1.2rem; }
.langnote p:last-child { margin-bottom:0; }

/* ---------- Incidental cast: a list, not empty frames ---------- */
.cast { margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0 2.75rem; border-top:1px solid var(--rule); }
.cast > div { padding:1.05rem 0; border-bottom:1px solid var(--rule); }
.cast dt { font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.92rem; margin-bottom:.22rem; }
.cast dd { margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.55; max-width:none; }
.house .grid + .cast { margin-top:2.25rem; }

/* A platform with no channel yet: present, clearly not yet live, not a dead link. */
.watch__soon { display:grid; place-items:center; width:38px; height:38px; border:1px dashed var(--rule); color:var(--rule); cursor:default; }
.watch__soon svg { width:19px; height:19px; display:block; }

/* ---------- Episode player: vertical, the shape the films are shot in ---------- */
.ep__player iframe { display:block; width:100%; aspect-ratio:9/16; border:1px solid var(--rule); background:var(--cream-warm); }
.ep__player--tiktok { max-width:250px; }
.ep__player--tiktok .tiktok-embed { margin:0 !important; min-width:0 !important; max-width:100% !important; }
.ep__watch { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.7rem; color:var(--ink-faint); margin:1.1rem 0 .5rem; }
.ep--live .ep__body .watch { justify-content:flex-start; }
/* Narrow: number in its own column, everything else stacked beside it. */
.ep--live { grid-template-columns:3.2rem 1fr; align-items:start; }
.ep--live .ep__player, .ep--live .ep__body { grid-column:2; }
.ep__player { width:100%; max-width:240px; }
@media (min-width:720px){
  .ep--live { grid-template-columns:3.2rem 250px 1fr; }
  .ep--live .ep__player { grid-column:2; }
  .ep--live .ep__body { grid-column:3; }
}

/* Persistent, quiet pre-order: set apart from the chapter nav by a hairline,
   in full ink rather than the nav's faint grey. One click from any page, no banner. */
.chapters__buy { position:relative; font-family:var(--display); font-size:.9rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; padding:.35rem 0 .35rem 0;
  border-bottom:1px solid var(--ink); }
.chapters__buy::before { content:""; position:absolute; left:calc(-1 * clamp(.7rem,2vw,1.5rem)); top:.25rem; bottom:.25rem;
  border-left:1px solid var(--rule); }
.chapters__buy:hover { color:var(--ink-soft); border-bottom-color:var(--ink-soft); }
@media (max-width:719px){ .chapters__buy::before { display:none; } }
.book .btn { margin-top:0; margin-bottom:1.75rem; }
.book__blurb { margin:0; }

/* ---------- Drama primer: what it is, what it isn't, how, why ---------- */
.primer { margin:0 0 1.75rem; max-width:56rem; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--ink); }
@media (min-width:760px){ .primer { grid-template-columns:1fr 1fr; column-gap:3rem; } }
.primer > div { padding:1.25rem 0; border-bottom:1px solid var(--rule); }
.primer dt { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.74rem; color:var(--ink-faint); margin-bottom:.45rem; }
.primer dd { margin:0; font-size:.95rem; color:var(--ink-soft); line-height:1.6; max-width:none; }
.primer__note { font-size:.85rem; font-style:italic; color:var(--ink-faint); margin:0 0 clamp(2.5rem,5vw,3.5rem); max-width:none; }

/* ---------- The shelf: one published book, four to come ---------- */
.series { margin-top:clamp(3.5rem,8vw,5.5rem); }
.series > h2 { margin-bottom:1.1rem; }
.series > p { margin:0 0 2rem; }
.shelf { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; border-top:1px solid var(--ink); max-width:44rem; }
@media (min-width:620px){ .shelf { grid-template-columns:1fr 1fr; column-gap:2.5rem; } }
.shelf__book { display:flex; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--rule); }
.shelf__n { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.7rem; color:var(--ink-faint); min-width:5.5em; }
.shelf__t { font-family:var(--display); font-size:1.02rem; letter-spacing:.04em; }
.shelf__book--soon .shelf__t { color:var(--ink-faint); font-style:italic; letter-spacing:.02em; }

/* ---------- The series shelf, with each book's own colour ---------- */
.series__tagline { font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.4rem); color:var(--ink); margin:0 0 1.75rem; max-width:none; }
.series__layout { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; }
@media (min-width:820px){ .series__layout { grid-template-columns:300px 1fr; gap:3.5rem; } }
.series__plate { margin:0; }
.series__plate img { width:100%; display:block; border:1px solid var(--rule); }
.shelf__book { display:grid; grid-template-columns:3px 6.5em 1fr; gap:0 1rem; align-items:baseline; }
.shelf__rule { display:block; width:3px; height:1em; align-self:center; }
.shelf__n { min-width:0; }
.book__pubdate { font-family:var(--display); text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.74rem; color:var(--ink-faint); margin:0 0 1.5rem; }