/* Generated by scripts/build-css.py from the approved prototype's
   own partials. Do not edit this file — edit the partial and run
   the script, or the server and the prototype start to drift. */

/* ---- 01-tokens.html ---- */
/* =====================================================================
   SALSSKY — "ASCENT"
   The page begins blindfolded and comes into light. That is the book's
   first chapter and it is also the site's structure: a dark, painted
   opening that gives way to a lit reading room.
   ===================================================================== */
:root{
  --f-display:"Instrument Serif",ui-serif,Georgia,serif;
  --f-read:"Literata",ui-serif,Georgia,serif;
  --f-ui:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-meta:"Martian Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* Display is set BIG and tight — this is the one place the page raises
     its voice. Everything else stays quiet. */
  --t-hero:clamp(2.75rem,2rem + 4.6vw,6.5rem);
  --t-h1:clamp(2.25rem,1.7rem + 2.6vw,4rem);
  --t-h2:clamp(1.75rem,1.4rem + 1.7vw,2.875rem);
  --t-h3:clamp(1.25rem,1.13rem + .6vw,1.625rem);
  --t-lead:clamp(1.1875rem,1.08rem + .5vw,1.4375rem);
  --t-read:clamp(1.0625rem,1rem + .38vw,1.1875rem);
  --t-ui:.9375rem; --t-small:.8125rem; --t-meta:.75rem;

  --lh-hero:.94; --lh-display:1.04; --lh-read:1.68; --lh-ui:1.55;
  --tr-display:-.028em; --tr-meta:.16em;
  --measure:63ch; --measure-narrow:44ch;

  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;
  --s-6:2rem;--s-7:3rem;--s-8:4.5rem;--s-9:7rem;--s-10:10rem;

  /* Motion is weighted, not snappy. A held beat is a design decision. */
  --e-silk:cubic-bezier(.16,1,.3,1);
  --e-weight:cubic-bezier(.65,.05,.15,1);
  --d-touch:180ms; --d-settle:420ms; --d-scene:760ms; --d-breath:1400ms;

  --r-1:2px; --r-2:4px; --r-3:10px; --r-pill:999px;
  --z-grain:95; --z-chrome:60; --z-veil:80; --z-horizon:70;
}

/* ---------- DAY: the reading room ---------- */
:root,[data-theme="light"]{
  color-scheme:light;
  --canvas:#EDEEEA; --surface:#F5F6F3; --sunk:#E2E5E0; --deep:#D6DAD4;
  --line:#D3D7D0; --line-2:#BEC4BA;
  /* --ink-3 was #666D70. At 12px — which is where it is nearly always
     used: meta labels, chips, the Studio rail — that measured 4.14:1
     over --sunk and 3.7:1 over --deep, under the 4.5:1 a person with
     ordinary reading difficulty needs. Six points darker clears every
     ground the design puts it on and is not a visible change of tone. */
  --ink:#13171B; --ink-2:#4B5257; --ink-3:#60676A;
  --accent:#00786A; --accent-2:#005C51; --accent-soft:rgba(0,120,106,.10);
  /* Small accent text sitting ON an accent-tinted chip. The accent itself
     measured 3.7–4.3:1 there — the tint lifts the ground just enough to
     fail. This is the same hue, one step darker, and it clears 5.5:1. */
  --accent-ink:#005C51;
  --accent-line:rgba(0,120,106,.26); --on-accent:#fff;
  --signal:#5B4BD6; --signal-soft:rgba(91,75,214,.10);
  /* Illumination is warm and is never used as a UI accent — it is light,
     not a brand colour. This is what keeps it off the black-and-gold path. */
  --lamp:#F6E7C6; --lamp-core:rgba(246,231,198,.55); --lamp-edge:rgba(246,231,198,0);
  --grain-op:.055; --vig:.16;
  --shadow-1:0 1px 2px rgba(19,23,27,.05);
  --shadow-2:0 3px 14px rgba(19,23,27,.08);
  --shadow-3:0 24px 60px rgba(19,23,27,.13);
  --atmos:#2E6E63; --atmos-str:.05;
  /* The chapter's atmosphere colour used as TEXT rather than as a wash.
     The atmospheres are picked to sit on a pale ground; on the night
     ground the same colour measured 2.2–3.2:1 for the chapter labels,
     the scene numbers and the ornaments. Light mode uses it unchanged. */
  --ch-ink:var(--ch,var(--accent));
}
/* ---------- NIGHT: the mountain ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0C1014; --surface:#141920; --sunk:#1A2028; --deep:#222932;
  --line:#262E37; --line-2:#37414C;
  --ink:#E8E6E1; --ink-2:#A6ACA9; --ink-3:#818A8C;
  --accent:#4FD6BC; --accent-2:#83EBD5; --accent-soft:rgba(79,214,188,.11);
  --accent-ink:#83EBD5;
  --accent-line:rgba(79,214,188,.28); --on-accent:#080C0F;
  --signal:#9B8CFF; --signal-soft:rgba(155,140,255,.13);
  --lamp:#FFE9C0; --lamp-core:rgba(255,233,192,.13); --lamp-edge:rgba(255,233,192,0);
  --grain-op:.075; --vig:.42;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 18px rgba(0,0,0,.5);
  --shadow-3:0 30px 70px rgba(0,0,0,.62);
  --atmos:#2E6E63; --atmos-str:.09;
  --ch-ink:color-mix(in srgb,var(--ch,var(--accent)) 42%,#E8E6E1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --canvas:#0C1014; --surface:#141920; --sunk:#1A2028; --deep:#222932;
  --line:#262E37; --line-2:#37414C;
  --ink:#E8E6E1; --ink-2:#A6ACA9; --ink-3:#818A8C;
  --accent:#4FD6BC; --accent-2:#83EBD5; --accent-soft:rgba(79,214,188,.11);
  --accent-ink:#83EBD5;
  --accent-line:rgba(79,214,188,.28); --on-accent:#080C0F;
  --signal:#9B8CFF; --signal-soft:rgba(155,140,255,.13);
  --lamp:#FFE9C0; --lamp-core:rgba(255,233,192,.13); --lamp-edge:rgba(255,233,192,0);
  --grain-op:.075; --vig:.42;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 18px rgba(0,0,0,.5);
  --shadow-3:0 30px 70px rgba(0,0,0,.62);
  --atmos:#2E6E63; --atmos-str:.09;
  --ch-ink:color-mix(in srgb,var(--ch,var(--accent)) 42%,#E8E6E1);
}}
:root{--canvas-solid:color-mix(in srgb,var(--atmos) calc(var(--atmos-str)*100%),var(--canvas))}

/* A scope that is always night, whatever the theme — used by the hero and
   the video room, where the artwork is painted dark and a light UI would
   fight it. */
.night{
  color-scheme:dark;
  --canvas:#0C1014; --surface:#141920; --sunk:#1A2028; --deep:#222932;
  --line:#262E37; --line-2:#37414C;
  --ink:#E8E6E1; --ink-2:#A6ACA9; --ink-3:#818A8C;
  --accent:#4FD6BC; --accent-2:#83EBD5; --accent-soft:rgba(79,214,188,.11);
  --accent-ink:#83EBD5;
  --accent-line:rgba(79,214,188,.28); --on-accent:#080C0F;
  --lamp:#FFE9C0; --lamp-core:rgba(255,233,192,.14); --lamp-edge:rgba(255,233,192,0);
  --canvas-solid:#0C1014; --vig:.42;
  color:var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-ui);
  font-size:var(--t-ui);line-height:var(--lh-ui);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color var(--d-breath) var(--e-silk),color var(--d-breath) var(--e-silk)}

/* ---- Film grain. The single cheapest thing that kills the
        "generated by a page builder" smell. Sits over everything. ---- */
#grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  background-image:var(--grain-img);background-size:128px 128px;
  opacity:var(--grain-op);mix-blend-mode:overlay}
/* ---- Vignette: one light source means the corners fall away. ---- */
#vignette{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  background:radial-gradient(120% 85% at 50% 38%,transparent 42%,rgba(0,0,0,var(--vig)) 100%);
  transition:background var(--d-breath) var(--e-silk)}

h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
.display{font-family:var(--f-display);font-weight:400;letter-spacing:var(--tr-display);
  line-height:var(--lh-display)}
.display em{font-style:italic}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--accent);border-radius:var(--r-2)}
::selection{background:var(--accent-soft);color:var(--ink)}
img{max-width:100%;display:block}

.meta{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:100%;max-width:78rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}
.wrap--tight{max-width:60rem}
.sp{flex:1}
.row{display:flex;align-items:center;gap:var(--s-3)}
.row--wrap{flex-wrap:wrap}
.scroll-x{overflow-x:auto}

/* Deliberately imperfect weight on press — a small settle, not a linear blink. */
.btn{--bg:transparent;--fg:var(--ink);--bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-ui);font-size:var(--t-ui);font-weight:500;letter-spacing:.005em;
  padding:.7rem 1.15rem;min-height:2.75rem;border-radius:var(--r-3);
  border:1px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;
  white-space:nowrap;overflow:hidden;
  transition:background-color var(--d-settle) var(--e-silk),
             border-color var(--d-settle) var(--e-silk),
             color var(--d-settle) var(--e-silk),
             transform var(--d-touch) var(--e-weight),
             box-shadow var(--d-settle) var(--e-silk)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.994)}
.btn--primary{--bg:var(--accent);--fg:var(--on-accent);--bd:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,var(--shadow-2)}
.btn--primary:hover{--bg:var(--accent-2);--bd:var(--accent-2)}
.btn--outline:hover{--bg:var(--accent-soft);--bd:var(--accent);--fg:var(--accent)}
.btn--ghost{--bd:transparent;--fg:var(--ink-2)}
.btn--ghost:hover{--bg:var(--sunk);--fg:var(--ink)}
.btn--signal{--bg:var(--signal);--fg:var(--on-signal,#fff);--bd:var(--signal)}
.btn--lg{min-height:3.375rem;padding:.9rem 1.75rem;font-size:1.0625rem}
.btn--sm{min-height:2.125rem;padding:.4rem .8rem;font-size:var(--t-small)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

.tag{display:inline-flex;align-items:center;gap:var(--s-1);font-family:var(--f-meta);
  font-size:var(--t-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;
  padding:.25rem .55rem;border-radius:var(--r-1);border:1px solid var(--line);
  background:var(--sunk);color:var(--ink-2)}
.tag--accent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.tag--signal{background:var(--signal-soft);color:var(--signal);border-color:transparent}
.tag--free{background:transparent;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---- 02-css-landing.html ---- */
/* ===================== CHROME ===================== */
.horizon{position:fixed;top:0;left:0;right:0;height:1px;z-index:var(--z-horizon);
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.horizon__fill{height:100%;width:0%;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--lamp) 100%);
  box-shadow:0 0 14px -1px var(--accent);transition:width 140ms linear}

.chrome{position:fixed;top:0;left:0;right:0;z-index:var(--z-chrome);
  display:flex;align-items:center;gap:var(--s-4);height:4rem;
  padding-inline:clamp(1.25rem,4vw,3.5rem);
  transition:background-color var(--d-scene) var(--e-silk),
             backdrop-filter var(--d-scene) var(--e-silk),
             border-color var(--d-scene) var(--e-silk);
  border-bottom:1px solid transparent}
.chrome[data-over-art="true"]{color:#E8E6E1}
.chrome[data-over-art="true"] .burger span{background:#E8E6E1}
.chrome[data-over-art="true"] .navl a,.chrome[data-over-art="true"] .tg button{color:rgba(232,230,225,.72)}
.chrome[data-over-art="true"] .navl a:hover,.chrome[data-over-art="true"] .tg button:hover{color:#F2F0EB}
.chrome[data-over-art="true"] .tg{border-color:rgba(232,230,225,.22);background:rgba(12,16,20,.4)}
.chrome[data-over-art="true"] .tg button[aria-pressed="true"]{background:rgba(232,230,225,.14);color:#F2F0EB}
.chrome[data-over-art="true"] .brand{color:#F2F0EB}
.chrome[data-over-art="true"] .btn{--fg:#E8E6E1;--bd:rgba(232,230,225,.34)}
.chrome[data-over-art="true"] .btn:hover{--bg:rgba(232,230,225,.1);--fg:#F2F0EB}
.chrome[data-lifted="true"]{
  background:color-mix(in srgb,var(--canvas-solid) 72%,transparent);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink)}
.brand svg{height:1.5rem;width:auto}
.brand .mk{height:1.3rem;color:var(--accent)}
.navl{display:none;gap:var(--s-5);margin-left:var(--s-4)}
/* Below the desktop breakpoint the links and the theme switch move into a
   sheet, because a row of nine controls at 390px is not navigation. */
.burger{display:grid;gap:5px;width:2.5rem;height:2.5rem;place-content:center;cursor:pointer;
  margin-left:auto;order:9}
.burger span{display:block;width:1.15rem;height:1.5px;background:currentColor;
  transition:transform var(--d-settle) var(--e-silk),opacity var(--d-settle) var(--e-silk)}
.chrome[data-open="true"] .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.chrome[data-open="true"] .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media(min-width:62rem){.burger{display:none}}
.sheet{position:fixed;inset:4rem 0 0 0;z-index:55;padding:var(--s-6) clamp(1.25rem,5vw,2rem) var(--s-8);
  background:color-mix(in srgb,var(--canvas-solid) 96%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-direction:column;gap:var(--s-6);overflow-y:auto}
.sheet[hidden]{display:none}
.sheet nav{display:grid;gap:var(--s-2)}
.sheet nav a{font-family:var(--f-display);font-size:1.75rem;letter-spacing:var(--tr-display);
  padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.sheet nav a:last-child{border-bottom:0}
.sheet__foot{margin-top:auto;display:flex;justify-content:flex-start}
.sheet .tg button{height:2.25rem;padding:0 1rem;font-size:.625rem}
@media(min-width:62rem){.navl{display:flex}}
.navl a{font-size:var(--t-small);color:var(--ink-2);position:relative;padding-block:.35rem;
  transition:color var(--d-settle) var(--e-silk)}
.navl a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right var(--d-scene) var(--e-silk)}
.navl a:hover{color:var(--ink)}
.navl a:hover::after,.navl a[aria-current]::after{right:0}
.chrome > .tg{display:none}
@media(min-width:62rem){.chrome > .tg{display:inline-flex}}
.tg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--sunk) 70%,transparent)}
.tg button{cursor:pointer;height:1.6rem;padding:0 .55rem;border-radius:var(--r-pill);
  color:var(--ink-3);font-family:var(--f-meta);font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;transition:all var(--d-settle) var(--e-silk)}
.tg button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.tg button:hover{color:var(--ink)}

/* ===================== HERO — THE DARK ===================== */
.hero{position:relative;min-height:min(94vh,54rem);display:flex;align-items:flex-end;
  padding-block:8rem var(--s-8);overflow:hidden;isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-2;background:#0A0D11}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;
  transform:scale(1.06);will-change:transform;
  filter:saturate(.92) contrast(1.05)}
/* One light source, upper-left, the way the painting is lit. */
.hero__light{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 40% at 26% 12%,rgba(255,233,192,.16),transparent 70%),
    linear-gradient(180deg,rgba(10,13,17,.55) 0%,rgba(10,13,17,.1) 34%,rgba(10,13,17,.82) 78%,#0A0D11 100%)}
.hero__inner{position:relative;width:100%;display:grid;gap:var(--s-6)}
@media(min-width:64rem){.hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;gap:var(--s-8)}}
.hero__eyebrow{display:flex;align-items:center;gap:.7rem;color:rgba(232,230,225,.62)}
.hero__eyebrow::before{content:"";width:2.5rem;height:1px;background:currentColor;opacity:.5}
.hero h1{font-family:var(--f-display);font-size:var(--t-hero);line-height:var(--lh-hero);
  letter-spacing:-.035em;color:#F2F0EB;max-width:14ch;margin:var(--s-5) 0 var(--s-5);
  text-shadow:0 2px 40px rgba(0,0,0,.55)}
.hero h1 em{font-style:italic;color:#FFE9C0}
.hero__sub{font-family:var(--f-read);font-size:var(--t-lead);line-height:1.55;
  color:rgba(232,230,225,.8);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero__facts{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);
  padding-top:var(--s-5);border-top:1px solid rgba(232,230,225,.14)}
.hero__facts div{display:flex;flex-direction:column;gap:.15rem}
.hero__facts b{font-family:var(--f-display);font-size:1.75rem;color:#F2F0EB;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.hero__facts span{color:rgba(232,230,225,.5)}
.hero__scroll{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.45rem;color:rgba(232,230,225,.45)}
.hero__scroll i{width:1px;height:2.25rem;background:linear-gradient(180deg,transparent,currentColor);
  animation:drop 2.8s var(--e-silk) infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ===================== SECTIONS ===================== */
.sec{position:relative;padding-block:var(--s-9)}
.sec--sunk{background:var(--sunk)}
.sec__label{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--s-5)}
.sec__label::before{content:"";width:1.75rem;height:1px;background:var(--accent);opacity:.8}
.sec h2{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  line-height:var(--lh-display);max-width:20ch}
.sec__lede{color:var(--ink-2);max-width:56ch;line-height:1.7;margin-top:var(--s-4);font-size:1.0625rem}
/* Asymmetric by default — the content sits off the centre line. */
.offset{display:grid;gap:var(--s-6)}
@media(min-width:64rem){
  .offset{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:start}
  .offset--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .offset--indent{padding-left:8%}
}

/* Torn panels: irregular clip paths instead of the rounded-rectangle card. */
.torn{position:relative;background:var(--surface);padding:clamp(1.5rem,4vw,3rem);
  clip-path:polygon(0% 1.2%,2.2% .2%,46% 0%,74% .9%,100% 0%,99.4% 42%,100% 76%,99% 100%,
    62% 99.2%,28% 100%,.6% 99%,.2% 58%,1% 24%)}
.torn--b{clip-path:polygon(.8% 0%,38% 1%,71% 0%,100% .8%,99.2% 36%,100% 68%,99% 100%,
    66% 99%,31% 100%,0% 99.2%,.9% 62%,0% 28%)}
.torn--c{clip-path:polygon(0% .6%,33% 0%,68% 1.1%,100% .3%,99% 44%,100% 79%,98.8% 100%,
    58% 99.4%,24% 100%,1% 99.3%,0% 55%,.7% 21%)}

/* The opening — cinematic first lines */
.firstlines{font-family:var(--f-read);max-width:var(--measure);font-size:var(--t-lead);
  line-height:1.72;color:var(--ink)}
.firstlines p+p{margin-top:var(--s-5)}
.firstlines .tap{font-family:var(--f-meta);font-size:1rem;letter-spacing:.5em;
  color:var(--ink-3);text-transform:uppercase;margin-top:var(--s-6);display:block}

/* Three ways in */
.ways{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media(min-width:56rem){.ways{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}
.way{position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-6) var(--s-5);background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow-1);
  transition:transform var(--d-scene) var(--e-silk),box-shadow var(--d-scene) var(--e-silk)}
.way:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.way__n{font-family:var(--f-display);font-size:2.75rem;line-height:1;color:var(--ink-3);opacity:.4}
.way h3{font-family:var(--f-display);font-size:var(--t-h3)}
.way p{color:var(--ink-2);line-height:1.65;font-size:var(--t-small);flex:1}
.way__foot{padding-top:var(--s-3);border-top:1px solid var(--line)}

/* The Seven — chapter ladder */
.ladder{margin-top:var(--s-7);border-top:1px solid var(--line)}
.rung{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:var(--s-4);
  align-items:baseline;padding:var(--s-5) var(--s-2);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background-color var(--d-scene) var(--e-silk),padding-left var(--d-scene) var(--e-silk)}
.rung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ch);transform:scaleY(0);transform-origin:top;
  transition:transform var(--d-scene) var(--e-silk)}
.rung:hover{background:color-mix(in srgb,var(--ch) 5%,transparent);padding-left:var(--s-4)}
.rung:hover::before{transform:scaleY(1)}
.rung__n{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);color:var(--ch-ink)}
.rung__t{font-family:var(--f-display);font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);
  letter-spacing:-.02em;line-height:1.15}
.rung__d{color:var(--ink-3);font-size:var(--t-small);margin-top:.35rem;font-family:var(--f-ui)}
.rung__r{text-align:right;white-space:nowrap}

/* Reading-room showcase */
.showcase{position:relative;margin-top:var(--s-7);padding:clamp(1.5rem,5vw,4rem) 0;
  background:var(--surface);overflow:hidden}
.showcase__lamp{position:absolute;left:50%;top:0;width:min(90%,46rem);height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 46% at 50% 34%,var(--lamp-core),var(--lamp-edge) 72%)}
.showcase__inner{position:relative}

/* Pricing */
.passage{display:grid;gap:var(--s-4);margin-top:var(--s-7);align-items:stretch}
@media(min-width:56rem){.passage{grid-template-columns:repeat(3,1fr)}}
.fare{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-5);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--d-scene) var(--e-silk),transform var(--d-scene) var(--e-silk)}
.fare:hover{transform:translateY(-3px)}
.fare--pick{border-color:var(--accent);box-shadow:var(--shadow-2);position:relative}
.fare--pick::before{content:"";display:none;position:absolute;top:-.55rem;left:var(--s-5);
  font-family:var(--f-meta);font-size:.5625rem;letter-spacing:.14em;background:var(--accent);
  color:var(--on-accent);padding:.2rem .5rem}
.fare h3{font-family:var(--f-display);font-size:var(--t-h3)}
.fare__price{display:flex;align-items:baseline;gap:.5rem;font-variant-numeric:tabular-nums}
.fare__price b{font-family:var(--f-display);font-size:3rem;line-height:1;letter-spacing:-.03em}
.fare__price s{color:var(--ink-3);font-size:1rem}
.fare__price em{font-style:normal;color:var(--ink-3);font-size:var(--t-small)}
.fare ul{display:grid;gap:var(--s-2);flex:1}
.fare li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-small);
  color:var(--ink-2);line-height:1.55}
.fare li b{color:var(--ink);font-weight:600}
.tick{flex:0 0 1rem;margin-top:.16rem;color:var(--accent)}
.tick--off{color:var(--ink-3);opacity:.55}
.circle{margin-top:var(--s-5);padding:var(--s-6) var(--s-5);border:1px solid var(--line-2);
  display:grid;gap:var(--s-4);background:var(--sunk)}
@media(min-width:56rem){.circle{grid-template-columns:minmax(0,1fr) auto;align-items:center}}

/* Molt / FAQ */
.molt{border-left:2px solid var(--accent);padding-left:var(--s-5);max-width:58ch}
.molt p+p{margin-top:var(--s-4)}
.faq{border-top:1px solid var(--line);margin-top:var(--s-6)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:var(--s-5) var(--s-2);font-family:var(--f-display);
  font-size:var(--t-h3);list-style:none;display:flex;justify-content:space-between;
  gap:var(--s-4);align-items:center;transition:color var(--d-settle) var(--e-silk)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";width:.7rem;height:.7rem;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-25%);transition:transform var(--d-scene) var(--e-silk)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-25%)}
.faq .a{padding:0 var(--s-2) var(--s-6);color:var(--ink-2);line-height:1.75;max-width:62ch}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:var(--s-8)}
.foot__grid{display:grid;gap:var(--s-6)}
@media(min-width:56rem){.foot__grid{grid-template-columns:2.2fr 1fr 1fr 1fr}}
/* The footer's column labels are h2 now, so that a page's outline runs
   h1 -> h2 with no gap for a screen reader to fall into. They look
   exactly as they did. */
.foot h2{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:var(--s-3)}
.foot ul{display:grid;gap:var(--s-2)}
.foot a{font-size:var(--t-small);color:var(--ink-2)}
.foot a:hover{color:var(--accent)}

/* Cookie bar + prototype flag */
/* A consent bar is a legal requirement, not a design opportunity. It sits
   at the very bottom edge, spans the width, and never covers the page's
   own action — the body gains padding while it is up. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-veil);
  padding:var(--s-4) clamp(1rem,4vw,2rem) calc(var(--s-4) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);display:grid;gap:var(--s-3);
  box-shadow:0 -10px 30px rgba(19,23,27,.07)}
@media(min-width:46rem){.cookies{grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:var(--s-6);padding-inline:clamp(1.5rem,4vw,3.5rem)}}
.cookies p{font-size:var(--t-small);color:var(--ink-2);line-height:1.6}
.flag{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:var(--z-horizon);
  font-family:var(--f-meta);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;border:1px solid var(--signal);color:var(--signal);
  background:var(--signal-soft);pointer-events:none}

#read,#film,#editions,#faq,#note,#close,.sceneid{scroll-margin-top:5.5rem}
body{padding-bottom:0;transition:padding-bottom var(--d-settle) var(--e-silk)}
body[data-dock="true"]{padding-bottom:4.5rem}
body[data-cookie="true"]{padding-bottom:9.5rem}
@media(min-width:900px){ body[data-dock="true"]{padding-bottom:0} }

/* =====================================================================
   READER-FIRST LANDING  ·  added for the Ascent rebuild
   The page opens in type, not photography: text paints in the first
   frame, an image never blocks it. Chapter One then runs inline — the
   visitor is reading the book before they have decided to.
   ===================================================================== */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--on-accent);padding:.7rem 1rem;border-radius:var(--r-2);font-size:var(--t-small)}
.skip:focus{left:.75rem;top:.75rem}
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-2)}

.chrome__cta{display:none}
@media(min-width:900px){ .chrome__cta{display:inline-flex} }

/* ---------- sticky action, mobile ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:.7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform var(--d-settle) var(--e-silk)}
.dock[data-on="true"]{transform:none}
.dock[hidden]{display:none}
.dock__t{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3)}
@media(min-width:900px){ .dock{display:none} }

/* ---------- the opener: type only ---------- */
.opener{padding-block:clamp(5.5rem,16vw,9rem) clamp(2rem,6vw,3.5rem);position:relative}
.opener__id{display:flex;flex-direction:column;gap:.35rem;margin-bottom:clamp(1.5rem,5vw,2.25rem)}
.opener__id b{font-family:var(--f-display);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);
  letter-spacing:.02em;font-weight:400;line-height:1}
.opener__id span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3)}
.opener .hookline{font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,1.5rem + 5.4vw,5rem);line-height:1.02;letter-spacing:var(--tr-display);
  max-width:17ch;text-wrap:balance;margin:0}
.opener .hookline em{font-style:italic;color:var(--accent)}
.opener__id{margin:0 0 clamp(1.5rem,5vw,2.25rem)}
.opener__sub{font-family:var(--f-read);font-size:var(--t-lead);line-height:1.55;
  color:var(--ink-2);max-width:38ch;margin-top:clamp(1.25rem,4vw,1.75rem)}
.opener__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
  margin-top:clamp(1.75rem,5vw,2.5rem)}
.opener__act .note{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.opener__facts{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);margin-top:clamp(2rem,6vw,3rem);
  padding-top:var(--s-4);border-top:1px solid var(--line)}
.opener__facts div{display:flex;flex-direction:column;gap:.1rem}
.opener__facts b{font-family:var(--f-display);font-size:1.375rem;font-weight:400;line-height:1}
.opener__facts span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- returning reader ---------- */
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);
  margin-top:var(--s-5);padding:.85rem 1.1rem;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--r-2);max-width:44rem}
.resume p{margin:0;font-size:var(--t-small);color:var(--ink-2)}
.resume b{color:var(--ink);font-weight:600}

/* ---------- Chapter One, inline ---------- */
.readinline{padding-bottom:var(--s-8)}
.sceneid{max-width:var(--measure);margin-inline:auto;padding-block:clamp(2.5rem,8vw,4rem) var(--s-5);
  text-align:center;display:grid;gap:.6rem;justify-items:center}
.sceneid .n{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3)}
.sceneid .t{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display);
  line-height:1.15;text-wrap:balance;max-width:22ch}
.sceneid .orn{color:var(--accent);opacity:.55;font-size:.8rem;letter-spacing:.4em}
.sceneid .rule{width:3.5rem;height:1px;background:var(--line-2)}

.page{max-width:var(--measure);margin-inline:auto;font-family:var(--f-read);
  font-size:var(--t-read);line-height:var(--lh-read);color:var(--ink);
  hanging-punctuation:first last}
.page p+p{margin-top:1.35em}
.page p.drop::first-letter{float:left;font-family:var(--f-display);font-size:3.3em;
  line-height:.84;padding:.06em .09em 0 0;color:var(--ink)}
.page em{font-style:italic}

/* an image is a breath between scenes, never a blocker at the top */
.breath{margin-block:clamp(2.5rem,8vw,4.5rem);position:relative}
.breath img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--sunk)}
.breath figcaption{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);margin-top:.6rem;
  max-width:78rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}

/* ---------- a passage worth sending to someone ---------- */
.pull{max-width:var(--measure);margin:clamp(2.5rem,7vw,3.5rem) auto;
  padding:clamp(1.5rem,5vw,2.25rem);background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 var(--r-2) var(--r-2) 0}
.pull blockquote{margin:0;font-family:var(--f-read);font-size:var(--t-lead);line-height:1.6;
  font-style:italic;color:var(--ink)}
.pull__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.pull__foot span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- the ask ---------- */
.gate{border-top:1px solid var(--line);background:var(--sunk);padding-block:var(--s-8)}
.gate__in{max-width:44rem;margin-inline:auto}
.gate h2{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  line-height:1.1;text-wrap:balance}
.gate p{color:var(--ink-2);line-height:1.7;margin-top:var(--s-4)}
.field{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.field input{flex:1 1 11rem;min-width:0;min-height:3.25rem;padding:0 1rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2)}
.field input::placeholder{color:var(--ink-3)}
.field .btn{min-height:3.25rem;flex:0 0 auto;white-space:nowrap}
.field__note{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.08em;
  color:var(--ink-3);margin-top:var(--s-3);text-transform:uppercase}
.said{margin-top:var(--s-4);padding:.9rem 1.1rem;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--r-2);font-size:var(--t-small);color:var(--ink)}

/* ---------- editions ---------- */
.fares{display:grid;gap:var(--s-4);margin-top:var(--s-7)}
@media(min-width:760px){ .fares{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1120px){ .fares{grid-template-columns:repeat(4,1fr);gap:var(--s-3)} }
.fare{display:flex;flex-direction:column;gap:var(--s-3);padding:clamp(1.25rem,3vw,1.75rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3)}
.fare--pick{border-color:var(--accent);box-shadow:var(--shadow-2)}
.fare h3{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.fare__price{display:flex;align-items:baseline;gap:.5rem;font-family:var(--f-display)}
.fare__price b{font-size:2.25rem;font-weight:400;line-height:1}
.fare__price s{color:var(--ink-3);font-size:1rem}
.fare ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;flex:1}
.fare li{display:flex;gap:.55rem;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.fare li svg{flex:none;margin-top:.15rem}
.fare__tag{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--accent)}
.regional{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-small);
  line-height:1.75;color:var(--ink-3)}

/* ---------- story page ---------- */
.thread{max-width:var(--measure);margin-inline:auto}
.thread p{color:var(--ink-2);line-height:1.75;margin-top:var(--s-4)}
.thread p.first{color:var(--ink);font-family:var(--f-read);font-size:var(--t-lead);line-height:1.6}
.thread blockquote{margin:var(--s-5) 0 0;padding-left:var(--s-4);border-left:2px solid var(--accent-line);
  font-family:var(--f-read);font-style:italic;color:var(--ink);line-height:1.6}
.thread figure{margin:var(--s-6) 0 0;width:min(100%,52rem);margin-inline:auto}
.thread figure img{width:100%;height:auto;display:block;border-radius:var(--r-2);background:var(--sunk)}
.thread figcaption{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);margin-top:.55rem}

@media(prefers-reduced-motion:reduce){
  .dock{transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* =====================================================================
   THE SELLING HOME PAGE
   The art carries the hook, the type paints first, the offer is visible
   without scrolling past the book. Reading and buying are both served
   in the first screen and a half.
   ===================================================================== */
.stage{position:relative;min-height:min(86svh,44rem);display:flex;align-items:flex-end;
  padding-block:clamp(5rem,15vw,8rem) clamp(1.75rem,5vw,3rem);overflow:hidden;isolation:isolate}
.stage__art{position:absolute;inset:0;z-index:-2;background:#0A0D11}
.stage__art img{width:100%;height:100%;object-fit:cover;object-position:52% 18%}
/* The ultrawide crop is nearly the shape of the box, so cover leaves only
   a little to pan — enough to move the figure off the left third, where
   the headline lives. He walks above the words rather than behind them. */
@media(min-width:900px){.stage__art img{object-position:25% 8%}}
.stage__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,14,.62) 0%,rgba(8,11,14,.26) 34%,rgba(8,11,14,.72) 78%,rgba(8,11,14,.92) 100%)}
.stage__in{position:relative;width:100%;color:#F2F0EB}
.stage__id{display:block;font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:rgba(242,240,235,.68);margin-bottom:var(--s-4)}
.stage h1{font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(2.05rem,1.15rem + 4.6vw,4.75rem);line-height:1.02;letter-spacing:var(--tr-display);
  max-width:19ch;text-wrap:balance;color:#FBFAF7;text-shadow:0 1px 40px rgba(0,0,0,.4)}
.stage h1 em{font-style:italic;color:#FFE9C0}
.stage__sub{font-family:var(--f-read);font-size:clamp(1rem,.95rem + .35vw,1.3125rem);line-height:1.5;
  color:rgba(242,240,235,.88);max-width:44ch;margin-top:clamp(.9rem,3vw,1.4rem)}
.stage__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:clamp(1.25rem,4vw,2rem)}
@media(max-width:520px){.stage__cta .btn{flex:1 1 100%;justify-content:center}}
.stage__cta .btn--outline{--fg:#F2F0EB;--bd:rgba(242,240,235,.4)}
.stage__cta .btn--outline:hover{--bg:rgba(242,240,235,.12);--fg:#fff;--bd:rgba(242,240,235,.6)}
.stage__facts{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:clamp(1.5rem,4vw,2rem);
  font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,240,235,.62)}
.stage__facts b{color:#F2F0EB;font-weight:500}

/* the offer, visible before anyone has scrolled past the book */
/* An inverted panel in BOTH themes. It used to take its ground from
   --ink, which flips to near-white at night — so the night rendering was
   near-white text on a near-white panel. The night palette's own values
   are named here so the panel stays inverted whichever theme is on. */
.offer{background:#13171B;color:#F2F0EB;padding-block:var(--s-5)}
.offer__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6)}
.offer__row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:baseline}
.offer__row span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,240,235,.62)}
.offer__row span b{font-family:var(--f-display);font-size:1.05rem;letter-spacing:0;
  text-transform:none;color:#F2F0EB;font-weight:400;margin-right:.35rem}
.offer__row span.free b{color:var(--accent-on-dark,#7FE3CE)}
/* Muted text ON the inverted panel. The light theme's --ink-2 measured
   2.27:1 here; this is the same relationship the other way up. */
.offer__p{color:rgba(242,240,235,.82);line-height:1.7}
.offer .btn--outline{--fg:#F2F0EB;--bd:rgba(242,240,235,.42)}
.offer .btn--outline:hover{--bg:rgba(242,240,235,.12);--fg:#fff}

/* the world, in four frames */
.gal{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
@media(min-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-2);background:var(--sunk)}
.gal img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform var(--d-scene) var(--e-silk)}
.gal figure:hover img{transform:scale(1.03)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem .9rem .8rem;
  font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:#F2F0EB;background:linear-gradient(180deg,rgba(8,11,14,0),rgba(8,11,14,.82))}

/* the opening, shown not described */
.opening{max-width:var(--measure);margin-inline:auto}
.opening .fade{position:relative}
.opening .fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9rem;
  background:linear-gradient(180deg,transparent,var(--canvas));pointer-events:none}
.opening__act{text-align:center;margin-top:calc(-1 * var(--s-5));position:relative}

/* one theme control, not three */
.tbtn{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:2.25rem;height:2.25rem;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  transition:color var(--d-touch),border-color var(--d-touch),background var(--d-touch)}
.tbtn:hover{color:var(--ink);border-color:var(--line-2)}
.tbtn[data-auto="true"]::after{content:"";position:absolute;right:.34rem;bottom:.34rem;
  width:4px;height:4px;border-radius:50%;background:var(--accent)}
.chrome[data-over-art="true"] .tbtn{color:rgba(232,230,225,.78);border-color:rgba(232,230,225,.28)}
.chrome[data-over-art="true"] .tbtn:hover{color:#F2F0EB;border-color:rgba(232,230,225,.5)}
.sheet__foot .tbtn{width:2.6rem;height:2.6rem}

/* =====================================================================
   VARIANT C — the reel. Full-bleed frames, one idea each, thumb-driven.
   ===================================================================== */
.reel{--frm-h:100svh}
.frm{position:relative;min-height:min(92svh,50rem);display:flex;align-items:flex-end;
  padding-block:clamp(4rem,12vw,7rem) clamp(2rem,7vw,4rem);overflow:hidden;isolation:isolate}
.frm--first{min-height:min(96svh,52rem)}
.frm__art{position:absolute;inset:0;z-index:-2;background:#0A0D11}
.frm__art img{width:100%;height:100%;object-fit:cover;object-position:52% 22%}
.frm--first .frm__art img{object-position:52% 14%}
@media(min-width:900px){.frm--first .frm__art img{object-position:25% 8%}}
.frm__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,14,.58) 0%,rgba(8,11,14,.18) 30%,rgba(8,11,14,.74) 76%,rgba(8,11,14,.94) 100%)}
.frm__in{position:relative;width:100%;color:#F2F0EB}
.frm__k{display:block;font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:rgba(242,240,235,.66);margin-bottom:var(--s-4)}
.frm__l{font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(2.1rem,1.2rem + 4.8vw,4.5rem);line-height:1.02;letter-spacing:var(--tr-display);
  color:#FBFAF7;max-width:18ch;text-shadow:0 1px 40px rgba(0,0,0,.4)}
.frm__s{font-family:var(--f-read);font-size:clamp(1rem,.95rem + .35vw,1.25rem);line-height:1.55;
  color:rgba(242,240,235,.86);max-width:40ch;margin-top:var(--s-4)}
.frm__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:clamp(1.25rem,4vw,2rem)}
.frm__cta .btn--outline{--fg:#F2F0EB;--bd:rgba(242,240,235,.4)}
.frm__cta .btn--outline:hover{--bg:rgba(242,240,235,.12);--fg:#fff}
@media(max-width:520px){.frm__cta .btn{flex:1 1 100%;justify-content:center}}
.frm__hint{display:block;margin-top:var(--s-5);font-family:var(--f-meta);font-size:var(--t-meta);
  /* .45 measured about 1:1 against the hero behind it — a hint nobody with
     ordinary reading difficulty could find. Still quiet, now legible. */
  letter-spacing:.3em;text-transform:uppercase;color:rgba(242,240,235,.78);
  text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* ---------- frame crop tuning + quote frame ---------- */
.frm--ant .frm__art img{object-position:50% 46%}
@media(min-width:900px){.frm--ant .frm__art img{object-position:50% 30%}}
.frm--quote{min-height:min(78svh,42rem);align-items:center}
.frm--quote .frm__art img{object-position:50% 42%}
.frm__veil--deep{background:linear-gradient(180deg,rgba(8,11,14,.72),rgba(8,11,14,.62) 45%,rgba(8,11,14,.86))}
.frm__q{font-family:var(--f-display);font-weight:400;font-style:italic;margin:0;color:#FBFAF7;
  font-size:clamp(1.55rem,1rem + 2.6vw,3.05rem);line-height:1.22;max-width:24ch;
  text-shadow:0 1px 40px rgba(0,0,0,.5)}
.frm__cite{display:block;margin-top:var(--s-5);font-family:var(--f-meta);font-size:var(--t-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;color:rgba(242,240,235,.62)}

/* ---------- three doors ---------- */
.doors{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media(min-width:760px){.doors{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}}
.doors > div{padding-top:var(--s-4);border-top:2px solid var(--accent-line)}
.doors__n{display:block;font-family:var(--f-display);font-size:var(--t-h3);margin-bottom:.4rem}
.doors p{color:var(--ink-2);line-height:1.7;font-size:var(--t-small);margin:0}

/* ---------- the film row ---------- */
.filmrow{display:grid;gap:var(--s-6);align-items:center}
@media(min-width:900px){.filmrow{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-7)}}
.filmthumb{position:relative;margin:0;border-radius:var(--r-3);overflow:hidden;background:var(--sunk)}
.filmthumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  object-position:50% 40%}
.filmplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;
  border-radius:50%;border:1px solid rgba(250,250,248,.7);background:rgba(10,13,17,.28);
  backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center;
  transition:background var(--d-touch),transform var(--d-touch)}
.filmplay::before{content:"";border-left:15px solid rgba(250,250,248,.95);
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:5px}
.filmplay:hover{background:rgba(10,13,17,.5);transform:translate(-50%,-50%) scale(1.05)}
.filmthumb figcaption{position:absolute;left:0;bottom:0;padding:.9rem 1rem;
  font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;
  color:#F2F0EB;background:linear-gradient(180deg,rgba(8,11,14,0),rgba(8,11,14,.8))}
.filmsay h2{margin-top:.2rem}
.filmsay p{color:var(--ink-2);line-height:1.7;margin-top:var(--s-4)}

/* ---------- editions ---------- */
.billtg{display:inline-flex;padding:2px;gap:2px;border:0;border-radius:var(--r-pill);
  background:var(--sunk);flex:0 0 auto}
.billtg button{cursor:pointer;border:0;background:transparent;border-radius:var(--r-pill);
  padding:.34rem .7rem;font:inherit;font-size:.75rem;color:var(--ink-3);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem}
.billtg button i{font-style:normal;color:var(--accent);font-size:.8125rem;
  font-family:var(--f-meta);letter-spacing:.06em}
.billtg button[aria-pressed="true"]{background:var(--canvas);color:var(--ink);box-shadow:var(--shadow-1)}
.fare__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.fare__save{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:2px;white-space:nowrap}
.fare__price i{font-style:normal;font-family:var(--f-ui);font-size:var(--t-small);color:var(--ink-3)}
.fare__line{color:var(--ink-2);font-size:var(--t-small);line-height:1.6;margin:0}
.fineline{margin-top:var(--s-5);font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:2}
.circle{margin-top:var(--s-6);padding:clamp(1.5rem,4vw,2.25rem);border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--surface);display:grid;gap:var(--s-5)}
@media(min-width:860px){.circle{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-7);align-items:center}}
.circle h3{margin:.4rem 0 0;font-size:var(--t-h3)}
.circle p{color:var(--ink-2);line-height:1.7;font-size:var(--t-small);margin-top:var(--s-3)}
.circle__act{display:grid;gap:var(--s-3);align-content:center}

/* ---------- the door: last screen ---------- */
.door{padding-block:clamp(4.5rem,12vw,8rem);text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, var(--lamp-core) 0%, transparent 62%), var(--sunk)}
.door__l{font-family:var(--f-display);font-size:clamp(1.9rem,1.2rem + 3.4vw,3.5rem);line-height:1.16;
  margin:0 auto;max-width:20ch;letter-spacing:var(--tr-display)}
.door__l em{font-style:italic;color:var(--accent)}
.door__s{color:var(--ink-2);line-height:1.7;max-width:46ch;margin:var(--s-5) auto var(--s-6)}
.door__mark{margin-top:clamp(3rem,9vw,5rem);font-family:var(--f-display);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);line-height:1.35;color:var(--ink)}
.door__mark span{display:block;margin-top:.35rem;font-family:var(--f-ui);font-size:var(--t-small);
  color:var(--ink-3);letter-spacing:.01em}

/* =====================================================================
   MOBILE TYPOGRAPHY PASS
   Small type is a desktop luxury. Below 760px every supporting size
   steps up, mono labels stop being tiny uppercase, and reading text
   gets the size it needs on a phone held at arm's length.
   ===================================================================== */
@media (max-width:760px){
  :root{
    --t-ui:1rem;
    --t-small:.9375rem;
    --t-meta:.75rem;
    --t-read:1.125rem;
    --t-lead:1.1875rem;
    --tr-meta:.12em;
    --measure:38ch;
  }
  body{font-size:1rem;line-height:1.6}
  .frm__s{font-size:1.125rem;line-height:1.6;max-width:34ch}
  .frm__k{font-size:.75rem;letter-spacing:.14em}
  .frm__hint{font-size:.75rem}
  .frm__q{font-size:clamp(1.5rem,1rem + 3.6vw,2.2rem);line-height:1.28;max-width:20ch}
  .frm__cite{font-size:.75rem}
  .sec__lede{font-size:1.0625rem;line-height:1.7}
  .doors p{font-size:1rem;line-height:1.65}
  .doors__n{font-size:1.375rem}
  .page{font-size:1.125rem;line-height:1.72}
  .sceneid .n{font-size:.75rem;letter-spacing:.22em}
  .sceneid .t{font-size:1.375rem}
  .filmsay p{font-size:1.0625rem;line-height:1.7}
  .field input,.field .btn{font-size:1.0625rem;min-height:3.5rem}
  .field__note{font-size:.8125rem;letter-spacing:.04em;text-transform:none}
  .fare h3{font-size:1.5rem}
  .fare__tag{font-size:.75rem;letter-spacing:.1em}
  .fare li{font-size:1rem;line-height:1.55}
  .fare__line{font-size:1rem;line-height:1.6}
  .fare__price b{font-size:2.5rem}
  .fare__price i{font-size:1rem}
  .fare .meta{font-size:.75rem}
  .billtg button{font-size:.875rem;padding:.6rem .85rem;min-height:2.75rem}
  .billtg button i{font-size:.875rem}
  /* every control a thumb can reach is at least 44px tall */
  .brand{min-height:2.75rem;display:inline-flex;align-items:center}
  .burger,.tbtn{width:2.75rem;height:2.75rem}
  .btn--sm,.chrome .btn--sm,a.btn--sm{min-height:2.75rem!important;padding-inline:.9rem}
  .foot ul a{display:inline-flex;align-items:center;min-height:2.75rem}
  /* the reading rail and every remaining control clear 44px on a phone */
  .rail button,.rail a,.roomnav a,.roomnav button,.pane a,.pane button,
  .fare .btn,.circle .btn,.epstabs a{min-height:2.75rem}
  .rail{gap:.25rem}
  .rail button{width:2.75rem;height:2.75rem}
  .foot h2{margin-bottom:.25rem}
  .circle h3{font-size:1.5rem}
  .circle p{font-size:1rem;line-height:1.7}
  /* a legal micro-line in uppercase mono is unreadable on a phone */
  .fineline{font-family:var(--f-ui);font-size:.875rem;letter-spacing:0;text-transform:none;
    line-height:1.75;color:var(--ink-3)}
  .faq summary{font-size:1.1875rem;padding-block:var(--s-4)}
  .faq .a{font-size:1rem;line-height:1.75}
  .door__s{font-size:1.0625rem;line-height:1.7}
  .door__mark{font-size:1.375rem}
  .door__mark span{font-size:.9375rem}
  .opening__act .meta{font-size:.75rem}
  .meta{font-size:.75rem}
  .btn{min-height:3rem;font-size:1rem}
  .btn--lg{min-height:3.5rem;font-size:1.0625rem}
  .btn--sm{min-height:2.5rem;font-size:.9375rem}
  .navl a,.sheet nav a{font-size:1.5rem}
  .dock__t{font-size:.75rem}
  .cookies{padding:var(--s-3) 1rem calc(var(--s-3) + env(safe-area-inset-bottom));gap:var(--s-2)}
  .cookies p{font-size:.875rem;line-height:1.5;margin:0}
  .cookies .row{display:flex;gap:var(--s-2)}
  .cookies .row .btn{flex:1 1 auto;justify-content:center;min-height:2.6rem;font-size:.9375rem}
  body[data-cookie="true"]{padding-bottom:11rem}
}

/* ---------- episodes ---------- */
.epstabs{display:flex;gap:.4rem;overflow-x:auto;margin-top:var(--s-6);padding-bottom:.4rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.epstabs::-webkit-scrollbar{display:none}
.epstabs a{flex:0 0 auto;padding:.55rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--t-small);color:var(--ink-2);white-space:nowrap;min-height:2.75rem;display:inline-flex;align-items:center}
.epstabs a[aria-selected="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.eps4{display:grid;gap:var(--s-4);margin-top:var(--s-6);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.eps4{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.eps4{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}}
.ep{display:flex;flex-direction:column;gap:.5rem}
.ep__shot{position:relative;border-radius:var(--r-2);overflow:hidden;background:var(--sunk);aspect-ratio:16/9}
.ep__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-scene) var(--e-silk)}
.ep:hover .ep__shot img{transform:scale(1.04)}
.ep__grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,14,.1),rgba(8,11,14,.62))}
.ep--locked .ep__shot img{filter:grayscale(.5) brightness(.7)}
.ep__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2.75rem;height:2.75rem;
  border-radius:50%;border:1px solid rgba(250,250,248,.75);background:rgba(10,13,17,.3);cursor:pointer;
  display:grid;place-items:center}
.ep__play::before{content:"";border-left:11px solid rgba(250,250,248,.95);
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ep__lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(250,250,248,.8)}
.ep__no{position:absolute;left:.6rem;top:.6rem;font-family:var(--f-meta);font-size:.75rem;
  letter-spacing:.1em;color:rgba(250,250,248,.85)}
.ep__tag{position:absolute;right:.6rem;top:.6rem;font-family:var(--f-meta);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px;
  background:var(--accent);color:var(--on-accent)}
.ep h3{font-family:var(--f-display);font-size:1.0625rem;font-weight:400;line-height:1.2;margin:0}
.epnote{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);max-width:44rem}
.epnote p{color:var(--ink-2);line-height:1.7}
.fare__early{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);padding:3px 7px;border-radius:2px;margin-left:.4rem;
  align-self:center}
.fare__price s{color:var(--ink-3);font-size:1rem;margin-left:.3rem}
@media(max-width:760px){ .ep h3{font-size:1rem} .epstabs a{font-size:.9375rem} }

/* ---- 03-css-reader.html ---- */
/* =====================================================================
   THE READING ROOM
   This is the product. Everything else exists to get someone here.
   The page is a lit room, not a document: one warm light falls on the
   column, the rest of the surface falls away, and the type is set the
   way the printed edition is set — drop cap, roman scene numeral, the
   diamond ornament.
   ===================================================================== */
.room{position:relative;min-height:100dvh;padding-block:6.5rem var(--s-10);overflow:clip}

/* The lamp. Fixed, so it stays with the reader rather than scrolling away. */
.room__lamp{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 38% at 50% 44%,var(--lamp-core),var(--lamp-edge) 70%);
  transition:opacity var(--d-breath) var(--e-silk)}
.room > *{position:relative;z-index:1}

/* ---- Scene title card: held for a beat before the prose ---- */
.card{max-width:var(--measure);margin:0 auto var(--s-9);text-align:center}
.card__rule{width:5.5rem;height:1px;background:var(--ch,var(--accent));margin:0 auto;opacity:.7}
.card__ch{margin:var(--s-4) 0 var(--s-2)}
.card__title{font-family:var(--f-display);font-size:clamp(1.75rem,1.4rem + 1.8vw,3rem);
  letter-spacing:-.02em;line-height:1.08;margin-block:var(--s-3)}
.card__scene{font-family:var(--f-display);font-style:italic;font-size:1.25rem;color:var(--ink-2)}
.card__orn{display:block;margin:var(--s-5) auto 0;color:var(--ch-ink);font-size:.75rem;
  letter-spacing:1.2em;text-indent:1.2em}
.card__meta{margin-top:var(--s-4)}

/* ---- The column ---- */
.prose{font-family:var(--f-read);font-size:var(--t-read);line-height:var(--lh-read);
  max-width:var(--measure);margin-inline:auto;color:var(--ink-2);
  font-variant-numeric:oldstyle-nums proportional-nums;
  hanging-punctuation:first last;
  font-size:calc(var(--t-read) * var(--zoom,1))}
.prose p{margin:0;transition:color var(--d-breath) var(--e-silk),
  text-shadow var(--d-breath) var(--e-silk)}
.prose p + p{margin-top:1.15em;text-indent:1.6em}
/* Everything is legible at rest. The band under the lamp simply comes
   fully up — nothing is hidden waiting for a scroll event. */
.prose p.lit{color:var(--ink)}

/* Drop cap, exactly as the printed edition sets it. */
.prose p:first-of-type{text-indent:0}
.prose p:first-of-type::first-letter{
  font-family:var(--f-display);float:left;font-size:3.9em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--ink);}
.prose p:first-of-type::first-line{font-variant-caps:small-caps;letter-spacing:.015em}

.prose .beat{text-align:center;font-family:var(--f-meta);font-size:.8em;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3);
  margin-block:2em;text-indent:0}
.prose .break{display:block;text-align:center;color:var(--ch-ink);
  margin-block:2.2em;letter-spacing:1em;text-indent:1em;font-size:.7em;opacity:.75}

/* ---- Reader rail: the controls, quiet until wanted ---- */
.rail{position:fixed;right:clamp(.75rem,2vw,1.5rem);top:50%;transform:translateY(-50%);
  z-index:var(--z-chrome);display:flex;flex-direction:column;gap:.35rem;padding:.4rem;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-pill);
  opacity:.72;transition:opacity var(--d-scene) var(--e-silk)}
.rail:hover,.rail:focus-within{opacity:1}
@media(max-width:52rem){.rail{top:auto;bottom:1rem;right:50%;transform:translateX(50%);
  flex-direction:row;border-radius:var(--r-pill);opacity:.9}}
.rail button{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:var(--ink-2);transition:all var(--d-settle) var(--e-silk)}
.rail button:hover{background:var(--sunk);color:var(--ink)}
.rail button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.rail hr{border:0;height:1px;background:var(--line);margin:.15rem .35rem}
@media(max-width:52rem){.rail hr{width:1px;height:auto;margin:.35rem .15rem}}

/* ---- Scene navigation ---- */
.roomnav{max-width:var(--measure);margin:var(--s-9) auto 0;padding-top:var(--s-5);
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-4)}
.roomnav a{display:grid;gap:.2rem;max-width:46%;color:var(--ink-2);
  transition:color var(--d-settle) var(--e-silk)}
.roomnav a:hover{color:var(--accent)}
.roomnav a:last-child{text-align:right}
.roomnav b{font-family:var(--f-display);font-size:1.0625rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* ---- The threshold: paid content dissolves rather than stops ---- */
.veil{height:14rem;margin-top:-6rem;pointer-events:none;position:relative;z-index:2;
  background:linear-gradient(to bottom,transparent,
    color-mix(in srgb,var(--canvas-solid) 88%,transparent) 58%,var(--canvas-solid))}
.gate{max-width:var(--measure);margin-inline:auto;text-align:center;position:relative;z-index:2}
.gate h2{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  margin-block:var(--s-4) var(--s-4);line-height:1.06}
.gate p{color:var(--ink-2);line-height:1.7;max-width:48ch;margin-inline:auto}
.gate__cta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}

/* ===================== CONTENTS ===================== */
.contents{padding-block:6.5rem var(--s-9)}
.chgroup{margin-bottom:var(--s-8)}
.chgroup__head{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-2)}
.chgroup__head h3{font-family:var(--f-display);font-size:var(--t-h3)}
.srow{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:var(--s-4);
  align-items:baseline;padding:.7rem var(--s-2);border-bottom:1px solid var(--line);
  cursor:pointer;position:relative;
  transition:background-color var(--d-settle) var(--e-silk),padding-left var(--d-settle) var(--e-silk)}
.srow:hover{background:color-mix(in srgb,var(--ch) 5%,transparent);padding-left:var(--s-4)}
.srow__n{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3)}
.srow__t{font-family:var(--f-read);font-size:1rem;color:var(--ink)}
.srow[data-locked="true"] .srow__t{color:var(--ink-3)}
.srow__r{display:flex;gap:var(--s-2);align-items:center}

/* ===================== VIDEO ROOM ===================== */
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0D11;
  display:grid;place-items:center;isolation:isolate}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.8) contrast(1.06)}
.screen__grade{position:absolute;inset:0;
  background:radial-gradient(60% 50% at 30% 20%,rgba(255,233,192,.14),transparent 70%),
             linear-gradient(180deg,rgba(10,13,17,.3),rgba(10,13,17,.85))}
.screen__play{position:relative;width:4.5rem;height:4.5rem;border-radius:50%;
  border:1px solid rgba(232,230,225,.35);color:#F2F0EB;display:grid;place-items:center;
  cursor:pointer;background:rgba(10,13,17,.35);backdrop-filter:blur(6px);
  transition:all var(--d-settle) var(--e-silk)}
.screen__play:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.05)}
.screen__tag{position:absolute;top:var(--s-4);left:var(--s-4);z-index:2}
.screen__len{position:absolute;right:var(--s-4);bottom:var(--s-4);z-index:2;
  color:rgba(232,230,225,.7)}
.eps{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
@media(min-width:56rem){.eps{grid-template-columns:repeat(2,1fr)}}

/* ===================== PANES (auth, checkout, account) ===================== */
.pane{max-width:27rem;margin:7rem auto var(--s-9);display:grid;gap:var(--s-5)}
.pane--wide{max-width:46rem}
.pane h1{font-family:var(--f-display);font-size:var(--t-h1);letter-spacing:var(--tr-display);
  line-height:1.05}
.field{display:grid;gap:var(--s-2)}
.field label{font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.input{width:100%;padding:.7rem .85rem;min-height:2.75rem;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-3);color:var(--ink);font:inherit;
  transition:border-color var(--d-settle) var(--e-silk),box-shadow var(--d-settle) var(--e-silk)}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.oauth{display:grid;gap:var(--s-3)}
.oauth .btn{justify-content:flex-start;gap:var(--s-3)}
.divider{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-3)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.panel{background:var(--surface);border:1px solid var(--line);padding:var(--s-5)}
.srow2{display:flex;justify-content:space-between;gap:var(--s-4);padding:.6rem 0;
  border-bottom:1px solid var(--line);font-size:var(--t-small)}
.srow2:last-child{border-bottom:0;font-size:1rem;font-weight:600;padding-top:var(--s-4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.notice{padding:var(--s-4);background:var(--accent-soft);border:1px solid var(--accent-line);
  font-size:var(--t-small);line-height:1.6}
.notice--warn{background:var(--signal-soft);border-color:transparent}

/* ===================== LEGAL ===================== */
.legal{max-width:44rem;margin-inline:auto;padding-block:6.5rem var(--s-9)}
.legal h1{font-family:var(--f-display);font-size:var(--t-h1);letter-spacing:var(--tr-display);
  line-height:1.05;margin-bottom:var(--s-3)}
.legal h2{font-family:var(--f-display);font-size:var(--t-h3);margin:var(--s-6) 0 var(--s-3)}
.legal p,.legal li{color:var(--ink-2);line-height:1.75;max-width:64ch}
.legal p+p{margin-top:var(--s-3)}
.legal ul{display:grid;gap:var(--s-2);margin-top:var(--s-3);padding-left:var(--s-4);list-style:disc}

/* ===================== ADMIN PREVIEW ===================== */
.admin{padding-block:6.5rem var(--s-9)}
.kpis{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
@media(min-width:52rem){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{padding:var(--s-5);background:var(--surface);border:1px solid var(--line);display:grid;gap:.35rem}
.kpi b{font-family:var(--f-display);font-size:2.25rem;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.kpi .delta{font-size:var(--t-small);color:var(--accent)}
.bars{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.bar{display:grid;grid-template-columns:9rem minmax(0,1fr) 3.5rem;gap:var(--s-4);align-items:center;
  font-size:var(--t-small)}
.bar__t{height:.5rem;background:var(--sunk);overflow:hidden}
.bar__f{height:100%;background:linear-gradient(90deg,var(--ch),var(--accent))}
.bar__v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.adminwarn{margin-top:var(--s-6)}

/* ---- 03b-css-phase1.html ---- */
/* =====================================================================
   PHASE 1 — the components V8 did not yet have.
   Written in V8's own language: same tokens, same weights, same beats.
   Nothing here restyles anything that already existed.
   ===================================================================== */

/* ---- the test switcher: above the chrome, in the flow ---- */
.tswitch{position:relative;z-index:calc(var(--z-chrome) + 1);display:flex;align-items:center;
  gap:var(--s-2);padding:.2rem clamp(1.25rem,4vw,3.5rem);background:var(--ink);color:var(--canvas)}
.tswitch[hidden]{display:none}
.tswitch b{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;opacity:.7;flex:none}
.tswitch select{flex:1;min-width:0;background:transparent;border:0;color:inherit;cursor:pointer;
  font-family:var(--f-meta);font-size:var(--t-meta);min-height:2.75rem;padding:0 var(--s-2)}
.tswitch select option{color:#13171B;background:#fff}
.tswitch button{flex:none;min-height:2.75rem;min-width:2.75rem;border:0;background:transparent;
  color:inherit;cursor:pointer;opacity:.7;font-family:var(--f-meta);font-size:var(--t-meta)}
.tswitch button:hover{opacity:1}
body:has(.tswitch:not([hidden])) .chrome{top:3.15rem}

/* ---- the account control ---- */
.me{position:relative;display:inline-flex}
.me__btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:2.75rem;
  padding:0 var(--s-2) 0 .25rem;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-pill);color:inherit}
.me__btn:hover{background:var(--sunk)}
.chrome[data-over-art="true"] .me__btn:hover{background:rgba(232,230,225,.12)}
.av{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-family:var(--f-ui);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em}
.me__n{display:none;font-size:var(--t-small);max-width:8rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media (min-width:34rem){.me__n{display:block}}
.menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:15rem;z-index:var(--z-veil);
  display:grid;padding:var(--s-2);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--shadow-3);color:var(--ink)}
.menu[hidden]{display:none}
.menu__hd{display:grid;gap:.2rem;padding:var(--s-3);margin:calc(var(--s-2) * -1) calc(var(--s-2) * -1) var(--s-2);
  border-bottom:1px solid var(--line)}
.menu__hd b{font-size:var(--t-ui);font-weight:600}
.menu__hd i{font-style:normal;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu__hd .tag{justify-self:start;margin-top:.3rem}
.menu__hr{height:1px;background:var(--line);margin:var(--s-2) 0}
.menu a,.menu button{display:flex;align-items:center;min-height:2.75rem;padding:0 var(--s-3);
  border:0;background:transparent;border-radius:var(--r-2);font-size:var(--t-small);
  color:var(--ink-2);cursor:pointer;text-align:left;width:100%}
.menu a:hover,.menu button:hover{background:var(--sunk);color:var(--ink)}

/* ---- the Studio ---- */
.sresume{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-6);
  border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-3)}
.sresume h2{line-height:1.08}
.sresume .btn{margin-top:var(--s-2)}

.climb{border-top:1px solid var(--line)}
.climb__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding-bottom:var(--s-3)}
.crung{display:grid;grid-template-columns:2.5rem 6.5rem minmax(0,1fr) 3.25rem;gap:var(--s-4);
  align-items:center;padding:var(--s-4) var(--s-2);border-bottom:1px solid var(--line)}
.crung__r{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3)}
.crung__t{font-size:var(--t-small);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.crung__d{height:.4rem;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.crung__d i{display:block;height:100%;background:var(--ch);border-radius:var(--r-pill);
  transition:width var(--d-scene) var(--e-silk)}
.crung__n{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums}
@media (max-width:32rem){
  .crung{grid-template-columns:2.25rem minmax(0,1fr) 3.25rem}
  .crung__t{display:none}
}

.testers{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
@media (min-width:30rem){.testers{grid-template-columns:1fr 1fr}}

/* ---- the episode player: nothing loads until it is tapped ---- */
.vplay{position:fixed;inset:0;z-index:var(--z-veil);display:grid;
  grid-template-rows:auto 1fr auto;background:rgba(6,9,12,.96)}
.vplay[hidden]{display:none}
.vplay__h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);
  color:#E8E6E1}
.vplay__h b{flex:1;font-size:var(--t-small);font-weight:600}
.vplay__x{min-height:2.75rem;min-width:2.75rem;border:0;background:transparent;color:inherit;
  cursor:pointer;border-radius:var(--r-pill);opacity:.75;font-size:1.1rem}
.vplay__x:hover{opacity:1;background:rgba(232,230,225,.12)}
.vplay__b{display:grid;place-items:center;padding:0 var(--s-4);min-height:0}
.vplay video{width:100%;max-height:100%;border-radius:var(--r-3);background:#000}
.vplay__f{padding:var(--s-3) var(--s-5) var(--s-5);text-align:center;
  font-family:var(--f-meta);font-size:var(--t-meta);color:rgba(232,230,225,.6)}
.vplay__f a{text-decoration:underline}

/* ---- the footer, in columns ---- */
.foot__say{max-width:30ch}
.foot__say p{font-size:var(--t-small);color:var(--ink-2);line-height:1.65;margin-top:var(--s-3)}
.foot__st{font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-2);margin-top:var(--s-3)}
.foot__col h4{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s-2)}
.foot__col a{display:flex;align-items:center;min-height:2.75rem;font-size:var(--t-small);
  color:var(--ink-2)}
.foot__col a:hover{color:var(--ink)}

.me__n{max-width:min(8rem,28vw);white-space:nowrap;text-overflow:ellipsis}
.crow__l b,.dtable td{overflow-wrap:anywhere}
.cookie__more{text-decoration:underline;display:inline-block;padding:.6rem .2rem;
  margin:-.6rem -.2rem;min-height:44px;line-height:1.9}

/* V8's own note beside these controls reads "every control a thumb can reach
   is at least 44px tall". They are 44 tall and 35 wide; this finishes the
   rule it already set for itself. Nothing else about them changes. */
.rail button,.rail a{min-width:2.75rem}
/* A link standing on its own line is a control, not prose — it gets a
   thumb-sized target without changing how it reads. */
.backlink{text-decoration:underline;display:inline-flex;align-items:center;min-height:2.75rem}
/* =====================================================================
   THE CONSOLE — one two-column shell, used by the reader's settings and
   by the desk. Left rail names the sections; right panel is rows of
   label and control. Same pattern people already know.
   ===================================================================== */
.con{display:grid;gap:var(--s-6);margin:7rem 0 var(--s-9)}
@media (min-width:60rem){.con{grid-template-columns:15rem minmax(0,1fr);gap:var(--s-8);align-items:start}}
.con__head{grid-column:1/-1}
.con__head h1{font-family:var(--f-display);font-size:var(--t-h1);letter-spacing:var(--tr-display);
  line-height:1.05}
.con__head p{color:var(--ink-2);margin-top:.5rem;font-size:var(--t-small)}

.conav{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);padding-bottom:var(--s-2)}
.conav::-webkit-scrollbar{display:none}
@media (min-width:60rem){
  .conav{flex-direction:column;overflow:visible;border-bottom:0;padding-bottom:0;
    position:sticky;top:7rem}
}
.conav a{display:flex;align-items:center;gap:var(--s-3);min-height:2.75rem;flex:none;
  padding:0 var(--s-3);border-radius:var(--r-2);font-size:var(--t-small);color:var(--ink-2);
  white-space:nowrap}
.conav a:hover{background:var(--sunk);color:var(--ink)}
.conav a[aria-current="page"]{background:var(--sunk);color:var(--ink);font-weight:600}
.conav a i{width:.375rem;height:.375rem;border-radius:50%;background:var(--accent);
  flex:none;opacity:0}
.conav a[aria-current="page"] i{opacity:1}
.conav__h{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);padding:var(--s-4) var(--s-3) var(--s-2);display:none}
@media (min-width:60rem){.conav__h{display:block}}

.cbody{display:grid;gap:var(--s-7);min-width:0}
.cbody > *,.cbody > * > *{min-width:0}
.cgroup > h2{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display);
  margin-bottom:var(--s-2)}
.cgroup > p{color:var(--ink-2);font-size:var(--t-small);line-height:1.65;margin-bottom:var(--s-4)}

/* one row: what it is on the left, the control on the right */
.crow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3) var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow__l{flex:1 1 14rem;min-width:0}
/* Direct children only. These style the row's own label and note; a
   <b> or a <span> written INSIDE a note is ordinary inline emphasis,
   and turning it into a block broke a sentence across three lines. */
.crow__l > b{display:block;font-size:var(--t-ui);font-weight:500}
.crow__l > span{display:block;font-size:var(--t-small);color:var(--ink-3);line-height:1.6;margin-top:.2rem}
.crow__c{flex:0 1 auto;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  justify-content:flex-end}
.crow__v{font-size:var(--t-small);color:var(--ink-2);text-align:right}
.crow .input{width:auto;min-width:14rem;max-width:100%}
.crow--danger b{color:var(--signal)}

/* a segmented control, V8's toggle idiom */
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--sunk);border-radius:var(--r-3);
  border:1px solid var(--line)}
.seg button{min-height:2.75rem;padding:0 var(--s-4);border-radius:var(--r-2);border:0;
  background:transparent;color:var(--ink-2);cursor:pointer;font-size:var(--t-small)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow-1)}

/* ---- the desk ---- */
.dgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-3);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:56rem){.dgrid{grid-template-columns:repeat(4,1fr)}}
.dkpi{background:var(--surface);padding:var(--s-5);display:grid;gap:.3rem}
.dkpi span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3)}
.dkpi b{font-family:var(--f-display);font-size:2rem;line-height:1;letter-spacing:var(--tr-display);
  font-variant-numeric:tabular-nums}
.dkpi em{font-style:normal;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3)}

.dtable{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.dtable table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.dtable th,.dtable td{text-align:left;padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);
  white-space:nowrap;vertical-align:top}
/* When a table is wider than its box it scrolls, and it now says so: the
   soft edge appears only while there is more to the right, and goes when
   you reach the end. Without it a column cut off at the edge reads as a
   broken page rather than as something to scroll. `local` is what makes
   the shadow move with the content; `scroll` pins the cover over it. */
.dtable{
  background-image:
    linear-gradient(to right, var(--surface), var(--surface)),
    linear-gradient(to left,  var(--surface), var(--surface)),
    linear-gradient(to right, rgba(10,12,14,.14), rgba(10,12,14,0)),
    linear-gradient(to left,  rgba(10,12,14,.14), rgba(10,12,14,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, .875rem 100%, .875rem 100%;
  background-attachment: local, local, scroll, scroll;
}
/* The column holding a single control takes only what it needs. */
.dtable td:last-child .btn{white-space:nowrap}
.dtable td:last-child{padding-left:var(--s-3);padding-right:var(--s-3)}

/* Only tables whose last column is a sentence — an audit reason, a
   check's detail. This used to apply to every table, so a last column
   holding one small button was given an 18rem minimum, which pushed the
   whole table past its container and cut the button in half. */
.dtable--prose td:last-child{white-space:normal;min-width:18rem;color:var(--ink-2)}
@media (max-width:55.99rem){.dtable--prose td:last-child{min-width:14rem}}
/* The desk is tables, not settings rows, so its body takes more of the
   width than a settings page's does. */
@media (min-width:60rem){.con--desk{grid-template-columns:12.5rem minmax(0,1fr)}}
.dtable thead th{border-top:0;font-family:var(--f-meta);font-size:var(--t-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-3);font-weight:400}
.dtable td.n{text-align:right;font-variant-numeric:tabular-nums}
.dtable tbody tr:hover td{background:var(--sunk)}
.dempty{padding:var(--s-8) var(--s-4);text-align:center;color:var(--ink-3);font-size:var(--t-small)}

.me__n{max-width:min(8rem,28vw);white-space:nowrap;text-overflow:ellipsis}
.crow__l b,.dtable td{overflow-wrap:anywhere}
.cookie__more{text-decoration:underline;display:inline-block;padding:.6rem .2rem;
  margin:-.6rem -.2rem;min-height:44px;line-height:1.9}

/* V8's own note beside these controls reads "every control a thumb can reach
   is at least 44px tall". They are 44 tall and 35 wide; this finishes the
   rule it already set for itself. Nothing else about them changes. */
.rail button,.rail a{min-width:2.75rem}
/* A link standing on its own line is a control, not prose — it gets a
   thumb-sized target without changing how it reads. */
.backlink{text-decoration:underline;display:inline-flex;align-items:center;min-height:2.75rem}

/* The hero is a <picture> now — three crops of one painting, chosen by
   viewport shape. <picture> is an inline wrapper with no box worth
   having, so display:contents lets the image inside go on answering to
   the art container's own rules and nothing about the layout changes. */
.stage__art picture,.frm__art picture,.marquee__art picture{display:contents}

/* ---- 03c-css-doors.html ---- */
/* =====================================================================
   THE SIX DOORS — bottom bar on a phone, left rail on a wide screen.
   Built from V8's own tokens; no new colours, no new type.
   ===================================================================== */
.stu{display:grid;gap:var(--s-6);margin:7rem 0 var(--s-9);padding-bottom:5.5rem}
@media (min-width:62rem){
  .stu{grid-template-columns:13.5rem minmax(0,1fr);gap:var(--s-8);align-items:start;
    padding-bottom:var(--s-8)}
}
.stu__head{grid-column:1/-1}
.stu__head h1{font-family:var(--f-display);font-size:var(--t-h1);letter-spacing:var(--tr-display);
  line-height:1.02;margin:.55rem 0 0;max-width:16ch}
.stu__head .sec__lede{margin-top:.7rem;max-width:52ch}
.stu__body{display:grid;gap:var(--s-7);min-width:0}
.stu__body > *,.stu__body > * > *{min-width:0}
.stu__sec > h2{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display);
  margin-bottom:var(--s-4)}

/* ---- the rail / bar ---- */
.sdock{position:fixed;left:0;right:0;bottom:0;z-index:85;
  display:flex;justify-content:space-around;gap:2px;
  padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
.sdoor{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.4rem .12rem;border-radius:var(--r-2);text-decoration:none;color:var(--ink-3);
  min-height:2.75rem;position:relative}
.sdoor svg{width:1.3rem;height:1.3rem;flex:none}
/* 12px is the floor for anything a person has to read, and a navigation
   label is something a person has to read. */
.sdoor span{font-family:var(--f-ui);font-size:.75rem;line-height:1.2;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sdoor[aria-current="page"]{color:var(--accent)}
.sdoor--shut{opacity:.55}
/* On the narrowest phones the six labels need every pixel. Nothing is
   truncated and nothing drops below 12px — the gutters give way instead. */
@media (max-width:24rem){
  .sdock{gap:0;padding-inline:.15rem}
  .sdoor{padding-inline:.05rem}
  .sdoor span{letter-spacing:-.012em}
}
.sdoor__lock{position:absolute;top:.3rem;right:50%;transform:translateX(1.1rem);
  font-style:normal;font-size:1.1rem;line-height:0;color:var(--ink-3)}
@media (min-width:62rem){
  .sdock{position:sticky;top:5.5rem;left:auto;right:auto;bottom:auto;z-index:1;
    flex-direction:column;justify-content:flex-start;gap:var(--s-1);
    padding:0;background:none;backdrop-filter:none;border-top:0}
  .sdoor{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--s-3);
    padding:.6rem var(--s-3);border-radius:var(--r-3)}
  .sdoor span{font-family:var(--f-ui);font-size:var(--t-ui);letter-spacing:0;text-transform:none}
  .sdoor:hover{background:var(--sunk);color:var(--ink)}
  .sdoor[aria-current="page"]{background:var(--sunk);color:var(--ink);font-weight:600}
  .sdoor__lock{position:static;transform:none;margin-left:auto;font-size:.9rem;line-height:1}
}

/* ---- continue ---- */
.cont{display:grid;gap:.4rem;padding:clamp(1.25rem,4vw,2rem);border-radius:var(--r-3);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ch,var(--accent));
  text-decoration:none;color:inherit;box-shadow:var(--shadow-1)}
.cont:hover{box-shadow:var(--shadow-2)}
.cont__k{color:var(--ch-ink)}
.cont__t{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  line-height:1.06;max-width:18ch}
.cont__m{color:var(--ink-2)}
.cont__go{justify-self:start;margin-top:var(--s-3)}

/* ---- up next ---- */
.upnext{display:grid;border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface);overflow:hidden}
.up{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);text-decoration:none;color:inherit;min-height:3.6rem}
.up:first-child{border-top:0}
.up:hover{background:var(--sunk)}
.up__k{flex:none;width:4rem;color:var(--ink-3)}
.up__b{flex:1;min-width:0}
.up__b b{display:block;font-weight:500;font-size:var(--t-ui)}
.up__b span{display:block;font-size:var(--t-small);color:var(--ink-3);margin-top:.1rem}
.up__go{flex:none;color:var(--accent)}

/* ---- the climb ---- */
.climb{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-3);overflow:hidden}
/* The climb's own ground is a shade darker than the page, which drops
   --ink-3 at 12px to 3.95:1. One step up the ink scale, only here. */
.climb .meta,.climb__h .meta{color:var(--ink-2)}
.crung{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  background:var(--surface);text-decoration:none;color:inherit;min-height:3.25rem}
.crung:hover{background:var(--sunk)}
.crung__n{flex:none;width:1.4rem;color:var(--ch-ink)}
.crung__t{flex:1 1 8rem;min-width:0;font-size:var(--t-ui);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.crung__b{flex:1 1 5rem;min-width:3rem;height:.36rem;border-radius:99px;background:var(--sunk);
  overflow:hidden}
.crung__b i{display:block;height:100%;background:var(--ch)}
.crung__v{flex:none;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---- figures ---- */
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-3);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:56rem){.figs{grid-template-columns:repeat(4,1fr)}}
.figs > *{min-width:0}
.fig{background:var(--surface);padding:var(--s-5);display:grid;gap:.25rem}
.fig b{font-family:var(--f-display);font-size:1.9rem;line-height:1;letter-spacing:var(--tr-display);
  font-variant-numeric:tabular-nums}
.fig em{font-style:normal;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3);
  line-height:1.5}

/* ---- filters ---- */
.filters{display:flex;gap:var(--s-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-small);
  color:var(--ink-2);text-decoration:none;background:var(--surface)}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}

/* ---- the scene list ---- */
.chgrp + .chgrp{margin-top:var(--s-6)}
.chgrp h3{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display);
  margin-bottom:var(--s-3);display:grid;gap:.15rem}
.chgrp h3 .meta{color:var(--ch-ink)}
.slist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface);overflow:hidden}
.slist li{border-top:1px solid var(--line)}
.slist li:first-child{border-top:0}
.slist a,.slist span.slist--x,.slist > li > span{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);min-height:3rem;text-decoration:none;color:inherit}
.slist a:hover{background:var(--sunk)}
.slist__n{flex:none;width:1.6rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.slist__t{flex:1;min-width:0;font-size:var(--t-ui)}
.slist__m{flex:none;color:var(--ink-3);white-space:nowrap}
.slist li.is-done .slist__t{color:var(--ink-2)}
.slist li > span{opacity:.6}

/* ---- a shut door ---- */
.shut{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);
  padding:clamp(1.5rem,5vw,3rem);display:grid;gap:var(--s-3);justify-items:start}
.shut h2{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  line-height:1.06;max-width:18ch}
.shut p{color:var(--ink-2);max-width:46ch}
.shut .row{margin-top:var(--s-3)}

/* ---- listen stub ---- */
.lstub{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-3);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.lstub > *{min-width:0}
.lstub__row{background:var(--surface);padding:var(--s-5);display:grid;gap:.25rem}
.lstub__row b{font-family:var(--f-display);font-size:1.7rem;line-height:1}
.lstub__row em{font-style:normal;font-family:var(--f-meta);font-size:var(--t-meta);color:var(--ink-3)}

/* ---- episodes ---- */
.epgrid{display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.epgrid > *{min-width:0}
.epc{display:flex;flex-direction:column;gap:.35rem}
.epc__shot{position:relative;border-radius:var(--r-3);overflow:hidden;background:var(--sunk);
  aspect-ratio:16/9}
.epc__shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.epc--live .epc__shot img{filter:none}
.epc__play{position:absolute;inset:0;margin:auto;width:3.25rem;height:3.25rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);background:rgba(10,12,14,.45);cursor:pointer}
.epc__play::after{content:"";position:absolute;left:calc(50% - .3rem);top:50%;
  transform:translateY(-50%);border-left:.75rem solid #fff;border-top:.5rem solid transparent;
  border-bottom:.5rem solid transparent}
.epc__tag{position:absolute;left:.5rem;bottom:.5rem;padding:.2rem .5rem;border-radius:var(--r-pill);
  background:rgba(10,12,14,.62);color:#F2F0EB}
.epc h3{font-family:var(--f-display);font-size:1.15rem;letter-spacing:var(--tr-display);line-height:1.15}
.epc > .meta{color:var(--ink-3)}
.epc__read{color:var(--accent);text-decoration:none;margin-top:.1rem}
.epc__read:hover{text-decoration:underline}

/* ---- passages ---- */
.pass{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.pass li{border:1px solid var(--line);border-left:3px solid var(--ch,var(--accent));
  border-radius:var(--r-3);background:var(--surface);padding:var(--s-5);display:grid;gap:var(--s-3)}
.pass blockquote{margin:0;font-family:var(--f-read);font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pass .meta{color:var(--ink-3)}
.pass__act{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* ---- the circle ---- */
.cir{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.cir > *{min-width:0}
.cir__c{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);
  padding:var(--s-5);display:grid;gap:var(--s-2);align-content:start}
.cir__c h3{font-family:var(--f-display);font-size:1.3rem;letter-spacing:var(--tr-display)}
.cir__c p{color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.cir__c .meta{color:var(--ink-3);line-height:1.6}
.cir__c .btn,.cir__c .crow__v{justify-self:start;margin-top:var(--s-2)}

/* The consent bar and the doors both want the foot of a phone screen.
   The doors are navigation the reader needs; the bar is temporary, so
   the bar sits above them rather than over them. */
body:has(.sdock) .cookies{bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}
@media (min-width:62rem){body:has(.sdock) .cookies{bottom:0}}
/* The reading dock and the doors never appear together, but if a future
   view shows both, the doors win the foot of the screen. */
.sdock + .dock,.dock ~ .sdock{bottom:0}

/* ---- 03d-css-stage.html ---- */
/* =====================================================================
   THE FILM — a billboard and shelves that scroll.
   Built from V8's tokens. Every class name checked against V8 first.
   ===================================================================== */
.film{padding-bottom:var(--s-9)}
.film__lede{margin:var(--s-7) auto var(--s-8)}
.film__lede p{max-width:56ch;color:var(--ink-2);font-size:var(--t-read);line-height:1.72}

/* ---- the billboard ---- */
.marquee{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(78svh,40rem);padding-block:clamp(6rem,16vw,9rem) clamp(2rem,6vw,3.5rem)}
.marquee__art{position:absolute;inset:0;z-index:-2;background:#0A0D11}
.marquee__art img{width:100%;height:100%;object-fit:cover;object-position:52% 16%}
/* Same reframing as the landing hero: with the ultrawide crop there is
   only a little to pan, and it is spent moving the figure clear of the
   episode title rather than leaving a billboard of empty cliff. */
@media (min-width:60rem){.marquee__art img{object-position:25% 12%}}
.marquee__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,14,.72) 0%,rgba(8,11,14,.30) 34%,
    rgba(8,11,14,.78) 76%,rgba(8,11,14,.95) 100%)}
@media (min-width:60rem){
  .marquee__veil{background:
    linear-gradient(90deg,rgba(8,11,14,.90) 0%,rgba(8,11,14,.62) 42%,rgba(8,11,14,.12) 78%),
    linear-gradient(180deg,rgba(8,11,14,.55) 0%,rgba(8,11,14,0) 40%,rgba(8,11,14,.85) 100%)}
}
.marquee__in{position:relative;width:100%;color:#F2F0EB;display:grid;gap:var(--s-3);
  justify-items:start;max-width:78rem}
.marquee__k{color:rgba(242,240,235,.72)}
.marquee__t{font-family:var(--f-display);font-size:var(--t-hero);line-height:var(--lh-hero);
  letter-spacing:var(--tr-display);max-width:14ch;margin:0}
.marquee__s{max-width:44ch;color:rgba(242,240,235,.86);line-height:1.7;font-size:var(--t-read)}
.marquee__cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3)}
.marquee__note{color:rgba(242,240,235,.6);max-width:44ch;line-height:1.7;margin-top:var(--s-2)}

/* ---- a shelf ---- */
.shelf{margin-block:clamp(2.75rem,7vw,4.5rem)}
.shelf__h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;margin-bottom:var(--s-4)}
.shelf__h .meta{color:var(--ch-ink)}
.shelf__h h2{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display);
  line-height:1.1;margin-top:.15rem}
.shelf__n{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* The first card sits directly under the season title; the row bleeds off
   the right edge, which is what says "there is more this way". */
.shelf__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  padding-left:calc(max(0px,(100vw - 78rem) / 2) + clamp(1.25rem,4vw,3.5rem));
  padding-right:clamp(1.25rem,4vw,3.5rem);
  /* Snap aligns to the scrollport, not the padding box, so without this the
     browser pulls the first card flush to the window edge. */
  scroll-padding-left:calc(max(0px,(100vw - 78rem) / 2) + clamp(1.25rem,4vw,3.5rem));
  padding-block:.25rem var(--s-2)}
.shelf__row::after{content:"";flex:0 0 clamp(1.25rem,4vw,3.5rem)}
.shelf__scroll::-webkit-scrollbar{display:none}
.shelf__row{display:flex;gap:var(--s-4);width:max-content;max-width:none}
/* One and a half cards on a phone: the half is what tells a thumb it scrolls.
   Three across from a laptop, which is what was asked for. */
.rcard{flex:0 0 min(72vw,17rem);scroll-snap-align:start;display:flex;flex-direction:column;
  gap:.4rem;cursor:default}
@media (min-width:48rem){.rcard{flex-basis:min(38vw,20rem)}}
/* Three across from a laptop: the shelf is 78rem wide inside its gutters,
   two 1rem gaps between three cards. */
@media (min-width:72rem){.rcard{flex-basis:calc((min(78rem, 100vw - 2 * min(3.5rem, 5vw)) - 2rem) / 3)}}
.rcard__shot{position:relative;border-radius:var(--r-3);overflow:hidden;background:var(--sunk);
  aspect-ratio:16/9;box-shadow:var(--shadow-1)}
.rcard__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--e-silk),filter 400ms var(--e-silk);filter:saturate(.55) brightness(.82)}
.rcard--live .rcard__shot img{filter:none}
.rcard--live{cursor:pointer}
.rcard--live:hover .rcard__shot img,.rcard--live:focus-visible .rcard__shot img{transform:scale(1.035)}
.rcard__play{position:absolute;inset:0;margin:auto;width:3.5rem;height:3.5rem;border-radius:50%;
  border:1px solid rgba(242,240,235,.55);background:rgba(10,12,14,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.rcard__play::after{content:"";position:absolute;left:calc(50% - .28rem);top:50%;
  transform:translateY(-50%);border-left:.8rem solid #F2F0EB;
  border-top:.52rem solid transparent;border-bottom:.52rem solid transparent}
.rcard__tag{position:absolute;left:.55rem;bottom:.55rem;padding:.22rem .5rem;
  border-radius:var(--r-pill);background:rgba(10,12,14,.68);color:#F2F0EB;letter-spacing:.08em}
.rcard--live .rcard__tag{background:var(--accent);color:var(--on-accent)}
.rcard__no{position:absolute;right:.55rem;top:.55rem;color:rgba(242,240,235,.78);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.rcard__t{font-family:var(--f-display);font-size:1.12rem;letter-spacing:var(--tr-display);
  line-height:1.2;margin-top:.15rem}
.rcard--live .rcard__t{color:var(--ink)}
.rcard:not(.rcard--live) .rcard__t{color:var(--ink-2)}
.rcard__m{color:var(--ink-3)}
.rcard:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-3)}
@media (prefers-reduced-motion:reduce){.rcard__shot img{transition:none}}

/* =====================================================================
   LISTEN — the text is the record sleeve; the bar is the deck.
   ===================================================================== */
.lsn{padding:7rem 0 9rem}
.lsn__head{margin-bottom:var(--s-6)}
.lsn__head h1{font-family:var(--f-display);font-size:var(--t-h1);line-height:1.04;
  letter-spacing:var(--tr-display);margin:.5rem 0 0}
.lsn__head .sec__lede{margin-top:var(--s-3);max-width:48ch}
.lsn__now{margin:var(--s-6) 0 var(--s-5);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line);display:grid;gap:.25rem}
.lsn__now h2{font-family:var(--f-display);font-size:var(--t-h3);letter-spacing:var(--tr-display)}
.lsn__now .meta{color:var(--ink-3)}
.lsn__text{font-family:var(--f-read);font-size:1.0625rem;line-height:1.85;color:var(--ink-3);
  display:grid;gap:var(--s-4);max-width:38rem}
/* The line being read lifts; everything else steps back. That contrast IS
   the feature — it is what makes a voice feel like it is in the room. */
.lsn__p{transition:color 420ms var(--e-silk),opacity 420ms var(--e-silk);color:var(--ink-2)}
/* Before anything is playing this is simply a scene, read normally. The
   moment a voice starts, the rest of the page steps back so the lit line
   is the only thing in the room. */
.lsn__text.is-live .lsn__p{opacity:.5}
.lsn__text.is-live .lsn__p.is-done{opacity:.32}
.lsn__text.is-live .lsn__p.is-now{color:var(--ink);opacity:1}
.lsn__p.is-now{position:relative}
.lsn__text.is-live .lsn__p.is-now::before{content:"";position:absolute;left:-1.15rem;top:.45em;bottom:.35em;
  width:2px;border-radius:2px;background:var(--accent);opacity:.9}
@media (prefers-reduced-motion:reduce){.lsn__p{transition:none}}

/* ---- the deck ---- */
.lbar{position:fixed;left:0;right:0;bottom:0;z-index:86;
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.lbar__in{max-width:78rem;margin:0 auto;
  padding:0 min(clamp(1.25rem,4vw,3.5rem),5vw) var(--s-3)}
.lbar__track{height:3px;background:var(--sunk);margin:0 calc(-1 * min(clamp(1.25rem,4vw,3.5rem),5vw));
  overflow:hidden}
.lbar__track i{display:block;height:100%;width:0;background:var(--accent);
  transition:width 420ms var(--e-silk)}
.lbar__row{display:flex;align-items:center;gap:var(--s-3);padding-top:var(--s-2);
  flex-wrap:wrap;min-width:0}
.lbar__b,.lbar__play{display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);border-radius:50%;cursor:pointer;color:var(--ink);flex:none}
.lbar__b{width:2.75rem;height:2.75rem}
.lbar__play{width:3.25rem;height:3.25rem;background:var(--accent);color:var(--on-accent);
  border-color:var(--accent)}
.lbar__b svg,.lbar__play svg{width:1.25rem;height:1.25rem}
.lbar__b:hover{border-color:var(--line-2)}
.lbar__meta{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.lbar__sp{flex:1 1 auto;min-width:0}
.lbar__sel{display:flex;align-items:center;gap:.4rem;flex:none;min-width:0}
.lbar__sel .meta{color:var(--ink-3);white-space:nowrap}
.lbar__sel select{min-height:2.75rem;max-width:16rem;padding:0 .5rem;border-radius:var(--r-2);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--f-ui);font-size:var(--t-small)}
.lbar__opts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  padding-top:var(--s-2);margin-top:var(--s-2)}
.lbar__more{display:none}
/* On a phone the deck is one row. Scene, speed and sleep live behind the
   chevron, because a player that eats half the screen is not a player. */
@media (max-width:47.99rem){
  .lbar__more{display:grid}
  .lbar__more svg{transition:transform 260ms var(--e-silk)}
  .lbar__more[aria-expanded="true"] svg{transform:rotate(180deg)}
  .lbar__opts{display:none;gap:var(--s-3)}
  .lbar__opts[data-open="1"]{display:grid}
  .lbar__sel{display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:center;gap:var(--s-3)}
  .lbar__sel select{max-width:none;width:100%}
  .lbar__meta{font-size:var(--t-meta)}
}
@media (prefers-reduced-motion:reduce){.lbar__more svg{transition:none}}
/* the consent bar never sits on the deck */
body:has(.lbar) .cookies{bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}

/* The same shelf, inside the Studio's content column. */
.shelf--in{margin-block:var(--s-6)}
.shelf--in .shelf__h{margin-bottom:var(--s-3)}
.shelf__scroll--in{padding-left:0;padding-right:0;scroll-padding-left:0;
  margin-inline:0;overflow-x:auto}
.shelf__scroll--in .rcard{flex:0 0 min(72vw,15rem)}
@media (min-width:62rem){.shelf__scroll--in .rcard{flex-basis:min(30vw,14rem)}}

/* A file that is still a development stand-in is labelled as one. The mark
   is drawn from the data, so it disappears by itself when a real file is
   uploaded — nobody has to remember to delete a sentence. */
.rcard__samp{position:absolute;left:.55rem;bottom:2.3rem;padding:.18rem .45rem;border-radius:var(--r-1);
  background:rgba(12,16,20,.78);color:rgba(242,240,235,.88);border:1px solid rgba(242,240,235,.3);
  font-size:.75rem;letter-spacing:.06em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ---- 03e-css-players.html ---- */
/* =====================================================================
   THE VIDEO PLAYER — its own controls, because a bare browser player
   is not a product. Always dark: a screening room, whatever the theme.
   ===================================================================== */
/* A hidden overlay that still covers the page swallows every click behind
   it. This is the rule that stops that. */
#vplay[hidden]{display:none!important}
#vplay{position:fixed;inset:0;z-index:120;background:rgba(6,8,10,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:clamp(.5rem,3vw,2rem)}
/* Four rows: title, picture, controls, footnote. The picture takes what
   is left and no more, so the footnote is never pushed off a short
   screen — the video letterboxes instead of the chrome disappearing. */
.vp{width:min(74rem,100%);max-height:100%;display:grid;gap:0;color:#F2F0EB;
  grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);
  background:#0B0E11;border:1px solid rgba(242,240,235,.14);border-radius:var(--r-3);
  overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.vp__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-bottom:1px solid rgba(242,240,235,.12);font-size:var(--t-small)}
.vp__head b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp__x{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;
  background:transparent;color:rgba(242,240,235,.8);cursor:pointer;border-radius:50%}
.vp__x:hover{background:rgba(242,240,235,.12);color:#F2F0EB}
.vp__x svg{width:1.15rem;height:1.15rem}

/* 16:9 by preference, but never taller than the room left over once the
   title, the controls and the footnote have had theirs. The picture then
   letterboxes inside the black, which is what a player is meant to do. */
.vp__stage{position:relative;background:#000;aspect-ratio:16/9;display:grid;place-items:center;
  align-self:center;justify-self:center;min-height:0;
  width:100%;width:min(100%, (100vh - 18rem) * 16 / 9);
  width:min(100%, (100dvh - 18rem) * 16 / 9);
  max-height:calc(100vh - 18rem);max-height:calc(100dvh - 18rem)}
/* Pinned to the stage rather than sized by it: a grid row measured from
   the video's own frame would grow past the cap we just set. */
.vp__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;background:#000;cursor:pointer}
.vp__big{position:absolute;width:5rem;height:5rem;border-radius:50%;border:1px solid rgba(242,240,235,.5);
  background:rgba(10,12,14,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer;
  transition:transform 260ms var(--e-silk),opacity 220ms var(--e-silk)}
.vp__big::after{content:"";position:absolute;left:calc(50% - .38rem);top:50%;transform:translateY(-50%);
  border-left:1.25rem solid #F2F0EB;border-top:.8rem solid transparent;border-bottom:.8rem solid transparent}
.vp__big:hover{transform:scale(1.06)}
.vp__spin{position:absolute;width:2.5rem;height:2.5rem;border-radius:50%;
  border:2px solid rgba(242,240,235,.25);border-top-color:#F2F0EB;animation:vpspin 800ms linear infinite}
@keyframes vpspin{to{transform:rotate(360deg)}}

.vp__bar{background:#0B0E11;transition:opacity 240ms var(--e-silk)}
.vp[data-ui="0"] .vp__bar{opacity:.15}
.vp[data-ui="0"] .vp__stage video{cursor:none}
.vp__track{position:relative;height:1.1rem;display:flex;align-items:center;cursor:pointer}
.vp__track::before{content:"";position:absolute;left:0;right:0;height:3px;
  background:rgba(242,240,235,.18)}
.vp__buf,.vp__fill{position:absolute;left:0;height:3px;border-radius:2px}
.vp__buf{background:rgba(242,240,235,.32)}
.vp__fill{background:var(--accent)}
.vp__knob{position:absolute;top:50%;width:.7rem;height:.7rem;border-radius:50%;background:#F2F0EB;
  transform:translate(-50%,-50%);opacity:0;transition:opacity 180ms var(--e-silk)}
.vp__track:hover .vp__knob,.vp__track:focus-visible .vp__knob{opacity:1}
.vp__track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* An explicit width, so a child asking for a full line gets the bar's
   width rather than inflating the bar to fit itself. */
.vp__row{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4) var(--s-3);
  flex-wrap:wrap;min-width:0;width:100%;box-sizing:border-box}
.vp__b{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:rgba(242,240,235,.85);cursor:pointer}
.vp__b:hover{background:rgba(242,240,235,.12);color:#F2F0EB}
.vp__b svg{width:1.3rem;height:1.3rem}
.vp__t{color:rgba(242,240,235,.72);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.vp__vol{width:5.5rem;flex:none;accent-color:var(--accent);background:transparent}
.vp__sp{flex:1 1 auto;min-width:0}
.vp__sel{display:flex;align-items:center;gap:.4rem;flex:none}
.vp__sel .meta{color:rgba(242,240,235,.6)}
/* The browser's own select is a light OS widget; inside a dark screening
   room it reads as a hole in the picture. Draw our own chevron. */
.vp__sel select{min-height:2.75rem;padding:0 2rem 0 .65rem;border-radius:var(--r-2);
  border:1px solid rgba(242,240,235,.22);background:#12161A;color:#F2F0EB;
  font-family:var(--f-ui);font-size:var(--t-small);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:.85rem}
.vp__sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vp__sel option{background:#12161A;color:#F2F0EB}
.vp__foot{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);border-top:1px solid rgba(242,240,235,.12);
  font-size:var(--t-small);color:rgba(242,240,235,.7)}
.vp__foot a{color:var(--accent-2,#7FE3CE);text-decoration:underline;
  display:inline-flex;align-items:center;min-height:2.75rem}
.vp__keys{margin-left:auto;color:rgba(242,240,235,.45);letter-spacing:.06em}
@media (max-width:47.99rem){
  .vp__vol{display:none}
  .vp__keys{display:none}
  .vp__sel .meta{display:none}
  /* Everything on one row on a phone: the speed box gives up its width
     first, so play, time, mute, picture-in-picture and full screen stay
     together instead of wrapping onto a second line. */
  /* Six controls at a thumb-sized 44px do not fit across a phone. Rather
     than shrink them below what a thumb can hit, speed steps down to its
     own line and the controls that matter keep the first one. */
  .vp__row{gap:.2rem;padding-left:var(--s-3);padding-right:var(--s-3)}
  .vp__t{font-size:var(--t-meta);padding:0 .15rem}
  .vp__sel{order:9;flex:0 0 100%;justify-content:flex-start;padding-top:.35rem}
  .vp__sel .meta{display:inline;letter-spacing:.08em}
  .vp__sel select{width:5rem}
  .vp__foot{padding-left:var(--s-3);padding-right:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){
  .vp__big,.vp__bar,.vp__knob{transition:none}
  .vp__spin{animation-duration:2s}
}

/* ---- the listening deck, with a buffer line like a real player ----
   The line itself stays hair-thin, but a thumb needs somewhere to land:
   the track is a 1.15rem tall grab zone with the line drawn through the
   middle of it, so scrubbing works on a phone without a fat bar. */
.lbar__track{position:relative;height:1.15rem;background:none;overflow:visible;
  cursor:pointer;touch-action:none;display:block}
.lbar__track::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:3px;margin-top:-1.5px;background:var(--sunk)}
.lbar__track i{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:0;display:block}
#lbar-buf{background:var(--line-2);opacity:.7;transition:none}
#lbar-fill{background:var(--accent)}
.lbar__track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* A link sitting alone in a table cell is a target, not prose: give it
   the same 44px a button gets, without changing how it reads. */
.dtable td > a:only-child{display:inline-flex;align-items:center;min-height:2.75rem}
/* Scene to scene. On a wide deck it sits at the end of the option row;
   on a phone the options stack, so it takes the label column too and
   reads as one more line in the list. */
/* The play-on switch: a real switch, because "carry on into the next
   scene" is a state, not an action. */
.lbar__sel--sw{gap:var(--s-3)}
.lbar__sw{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;
  background:none;cursor:pointer;padding:0}
.lbar__sw i{display:block;width:2.4rem;height:1.4rem;border-radius:var(--r-pill);
  background:var(--sunk);border:1px solid var(--line-2);position:relative;
  transition:background-color var(--d-settle) var(--e-silk),border-color var(--d-settle) var(--e-silk)}
.lbar__sw i::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;
  border-radius:50%;background:var(--ink-3);
  transition:transform var(--d-settle) var(--e-silk),background-color var(--d-settle) var(--e-silk)}
.lbar__sw[aria-checked="true"] i{background:var(--accent-soft);border-color:var(--accent)}
.lbar__sw[aria-checked="true"] i::after{transform:translateX(1rem);background:var(--accent)}
.lbar__sw:focus-visible i{outline:2px solid var(--accent);outline-offset:2px}
.lbar__next{padding-top:var(--s-2);color:var(--ink-3);font-size:.75rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar__step{display:flex;gap:var(--s-2);align-items:center}
@media (max-width:47.99rem){
  /* Indented to the same column the selects start in, so the two arrows
     sit under the scene list they move through — no second caption
     repeating a word that is already on the line above. */
  .lbar__step{padding-left:calc(4rem + var(--s-3));gap:var(--s-3);margin-top:calc(-1 * var(--s-1))}
}
/* New copy meets the 12px floor on its own account rather than inheriting
   the smaller meta size the rest of the design uses. */
.vp__sample{flex-basis:100%;font-family:var(--f-meta);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(242,240,235,.55)}
/* The headline states the finished shape; this states where it has got to.
   Both true, and the second one moves on its own as files arrive. */
.lsn__count{margin-top:var(--s-2);color:var(--ink-3);font-size:.75rem;letter-spacing:.08em}
.notice--ok{border-left:3px solid var(--accent)}

/* ---- 03f-css-marks.html ---- */
/* =====================================================================
   HIGHLIGHTS, NOTES, AND THE SELECTION BAR
   Four inks, all mixed from colours V8 already owns: the reading accent,
   the signal violet, the lamp, and the chapter's own altitude. A mark has
   to survive both themes and never fight the prose, so each one is a wash
   under the words plus a firmer line beneath — colour carries the meaning,
   the underline carries it again for anyone who cannot see the colour.
   ===================================================================== */
.hl{background:none;color:inherit;border-radius:2px;padding:.02em 0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:pointer;
  transition:background-color var(--d-settle) var(--e-silk)}
.hl--a{background:color-mix(in srgb,var(--accent) 18%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 60%,transparent)}
.hl--s{background:color-mix(in srgb,var(--signal) 18%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--signal) 60%,transparent)}
.hl--l{background:color-mix(in srgb,var(--lamp) 42%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--lamp) 92%,transparent)}
.hl--c{background:color-mix(in srgb,var(--ch,var(--accent)) 18%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ch,var(--accent)) 60%,transparent)}
.hl:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.hl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A mark carrying a note says so without opening it. */
.hl--noted::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.18em;
  vertical-align:.42em;border-radius:50%;background:currentColor;opacity:.55}

/* ---- the bar over a selection ---- */
#selbar[hidden]{display:none!important}
#selbar{position:fixed;z-index:110;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--shadow-3);
  padding:.35rem;animation:selin 180ms var(--e-silk)}
@keyframes selin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.selbar__row{display:flex;align-items:center;gap:.25rem}
.selbar__ink{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;position:relative;background:transparent}
.selbar__ink::after{content:"";position:absolute;inset:.55rem;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.selbar__ink--a::after{background:var(--accent)}
.selbar__ink--s::after{background:var(--signal)}
.selbar__ink--l::after{background:var(--lamp)}
.selbar__ink--c::after{background:var(--ch,var(--accent))}
.selbar__ink:hover{background:var(--sunk)}
.selbar__ink[aria-pressed="true"]{border-color:var(--ink-2);background:var(--sunk)}
.selbar__ink[aria-pressed="true"]::after{inset:.42rem}
.selbar__sp{width:1px;height:1.5rem;background:var(--line);margin:0 .2rem}
.selbar__b{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;
  border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.selbar__b:hover{background:var(--sunk);color:var(--ink)}
.selbar__b svg{width:1.2rem;height:1.2rem}
.selbar__b--off:hover{color:var(--signal)}
/* A selection that runs across two paragraphs is explained, not ignored. */
.selbar__say{padding:.4rem .7rem;font-size:var(--t-small);color:var(--ink-2);max-width:22rem}

/* ---- the note sheet ---- */
#notesheet[hidden]{display:none!important}
#notesheet{position:fixed;inset:0;z-index:130;background:rgba(6,8,10,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:end center;padding:0}
@media (min-width:48rem){#notesheet{place-items:center;padding:2rem}}
.nsheet{width:min(34rem,100%);background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;
  padding:var(--s-5) clamp(1rem,4vw,1.5rem) calc(var(--s-5) + env(safe-area-inset-bottom));
  display:grid;gap:var(--s-4);box-shadow:var(--shadow-3);
  animation:nsin 260ms var(--e-silk)}
@media (min-width:48rem){.nsheet{border-radius:var(--r-3);padding-bottom:var(--s-5)}}
@keyframes nsin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nsheet__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.nsheet__h b{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.nsheet__x{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--ink-2);cursor:pointer}
.nsheet__x:hover{background:var(--sunk);color:var(--ink)}
.nsheet__x svg{width:1.15rem;height:1.15rem}
.nsheet__q{margin:0;padding-left:var(--s-4);border-left:2px solid var(--accent);
  font-family:var(--f-read);font-style:italic;line-height:1.6;color:var(--ink)}
.nsheet textarea{width:100%;font:inherit;font-family:var(--f-read);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--canvas);border:1px solid var(--line-2);
  border-radius:var(--r-2);padding:.75rem;resize:vertical;min-height:7rem}
.nsheet textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nsheet__f{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ---- the quiet confirmation ---- */
#toast[hidden]{display:none!important}
#toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:125;max-width:calc(100vw - 2rem);
  padding:.7rem 1.1rem;border-radius:var(--r-pill);background:var(--ink);color:var(--canvas);
  font-size:var(--t-small);box-shadow:var(--shadow-3);animation:selin 200ms var(--e-silk)}

@media (prefers-reduced-motion:reduce){
  #selbar,.nsheet,#toast{animation:none}
  .hl{transition:none}
}

/* =====================================================================
   MY PASSAGES
   The kept lines, grouped by chapter. Each one carries the colour it was
   kept in on its left edge — the same four inks as the reading room, so a
   line looks the same here as it did in the book.
   ===================================================================== */
.passgrp{margin-top:var(--s-7)}
.passgrp:first-of-type{margin-top:var(--s-5)}
.passgrp__h{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400;
  display:grid;gap:.2rem;margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.passgrp__h .meta{color:var(--ch,var(--ink-3))}
.pass__i{border-left-color:var(--accent)!important}
.pass__i--a{border-left-color:var(--accent)!important}
.pass__i--s{border-left-color:var(--signal)!important}
.pass__i--l{border-left-color:color-mix(in srgb,var(--lamp) 80%,var(--line-2))!important}
.pass__i--c{border-left-color:var(--ch,var(--accent))!important}
.pass__note{margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4);border-radius:var(--r-2);
  background:var(--sunk);color:var(--ink-2);font-size:var(--t-small);line-height:1.65;
  white-space:pre-wrap;overflow-wrap:anywhere}
.pass__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}

/* the count on a filter chip */
/* New copy holds the 12px floor rather than inheriting V8's smaller meta. */
.passgrp__h .meta,.pass__f .meta{font-size:.75rem;letter-spacing:.08em}
.chip__n{font-style:normal;font-family:var(--f-meta);font-size:.75rem;
  margin-left:.35rem;opacity:.7;font-variant-numeric:tabular-nums}

/* searching what you kept */
.passfind{display:flex;gap:var(--s-3);align-items:center;margin:var(--s-5) 0 var(--s-4)}
.passfind input{flex:1 1 12rem;min-width:0;min-height:2.75rem;padding:0 .9rem;font:inherit;
  font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-2)}
.passfind input::placeholder{color:var(--ink-3)}
.passfind input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- 03g-css-gloss.html ---- */
/* =====================================================================
   THE GLOSSARY
   A term in the prose must not shout. It reads as ordinary text with a
   hairline under it — the same treatment a printed book gives a term in
   its own index. It only announces itself on hover, focus, or a tap.
   ===================================================================== */
/* A term in a sentence is an inline target — WCAG's 2.5.8 exception covers
   it, the same as any link in a paragraph. Even so, the padding/negative
   margin pair grows the area a thumb can hit without moving a single line
   of type. */
.gl{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:.3em .1em;margin:-.3em -.1em;
  border-bottom:1px dotted color-mix(in srgb,var(--ink) 38%,transparent);
  text-align:inherit;line-height:inherit;
  transition:background-color var(--d-settle) var(--e-silk),
             border-color var(--d-settle) var(--e-silk)}
.gl:hover{background:var(--accent-soft);border-bottom-color:var(--accent)}
.gl:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Inside a mark the reader made, the dotted rule would fight the highlight's
   own underline — so it steps back and lets the highlight lead. */
.hl .gl{border-bottom-color:transparent}
.hl .gl:hover{background:none;border-bottom-color:color-mix(in srgb,var(--ink) 45%,transparent)}

#glosspanel[hidden]{display:none!important}
#glosspanel{position:fixed;inset:0;z-index:128;background:rgba(6,8,10,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:end center}
@media (min-width:48rem){#glosspanel{place-items:center;padding:2rem}}
.gpanel{width:min(30rem,100%);background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;
  padding:var(--s-5) clamp(1rem,4vw,1.5rem) calc(var(--s-5) + env(safe-area-inset-bottom));
  display:grid;gap:var(--s-4);box-shadow:var(--shadow-3);
  animation:gpin 240ms var(--e-silk)}
@media (min-width:48rem){.gpanel{border-radius:var(--r-3);padding-bottom:var(--s-5)}}
@keyframes gpin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gpanel__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.gpanel__h .meta{display:block;color:var(--ink-3);margin-bottom:.15rem;font-size:.75rem}
.gpanel__h b{font-size:var(--t-h3);font-weight:400}
.gpanel__x{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;
  border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.gpanel__x:hover{background:var(--sunk);color:var(--ink)}
.gpanel__x svg{width:1.15rem;height:1.15rem}
.gpanel p{font-family:var(--f-read);font-size:1.0625rem;line-height:1.7;color:var(--ink);margin:0}
.gpanel__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.gpanel__f .meta{font-size:.75rem;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){.gpanel{animation:none}.gl{transition:none}}

/* =====================================================================
   SEARCH INSIDE THE BOOK
   ===================================================================== */
.find{padding-block:clamp(4.5rem,12vw,7rem) var(--s-9)}
.find__h{max-width:44rem}
.find__h h1{font-size:var(--t-h1);margin-top:var(--s-3)}
.findbar{display:flex;gap:var(--s-3);margin:var(--s-6) 0 var(--s-3);flex-wrap:wrap}
.findbar input{flex:1 1 16rem;min-width:0;min-height:3.25rem;padding:0 1rem;font:inherit;
  font-size:1.0625rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-2)}
.findbar input::placeholder{color:var(--ink-3)}
.findbar input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.findbar .btn{min-height:3.25rem;flex:0 0 auto}
.findscope{color:var(--ink-3);margin-bottom:var(--s-6);font-size:.75rem;line-height:1.7}
.findcount{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s-5)}

.findgrp{margin-top:var(--s-7)}
.findgrp:first-of-type{margin-top:0}
.findgrp__h{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400;display:grid;gap:.2rem;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.findgrp__h .meta{color:var(--ch,var(--ink-3));font-size:.75rem}
.findsc{margin-bottom:var(--s-5)}
.findsc__t{display:inline-block;font-family:var(--f-display);font-size:1.15rem;
  color:var(--ink);margin-bottom:var(--s-2);border-bottom:1px solid transparent;
  min-height:2.75rem;line-height:2.75rem}
.findsc__t:hover{border-bottom-color:var(--accent);color:var(--accent)}
.findsc__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.findsc__l li{border-left:2px solid var(--ch,var(--accent));padding-left:var(--s-4)}
.findsc__l a{display:block;padding:.55rem 0;font-family:var(--f-read);font-size:1rem;
  line-height:1.65;color:var(--ink-2)}
.findsc__l a:hover{color:var(--ink)}
/* The match itself: the one thing the eye should land on first. */
.findsc__l b{font-weight:600;color:var(--ink);background:var(--accent-soft);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:2px;padding:.02em 0}
.findlink{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:var(--s-4)}

/* What was not searched: disclosed, folded, never hidden. */
.findshut{margin-top:var(--s-8);border-top:1px solid var(--line);padding-top:var(--s-5)}
.findshut summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;
  align-items:baseline;min-height:2.75rem;color:var(--ink-2);font-size:var(--t-small);
  line-height:1.7;max-width:60ch}
.findshut summary::-webkit-details-marker{display:none}
.findshut summary b{color:var(--ink);font-weight:600}
.findshut summary span{color:var(--accent);border-bottom:1px solid currentColor}
.findshut[open] summary span::after{content:" (hide)"}
.findshut__b{margin-top:var(--s-4)}
.findshut__l{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;
  grid-template-columns:1fr;max-height:22rem;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-3);background:var(--surface)}
@media (min-width:48rem){.findshut__l{grid-template-columns:repeat(2,1fr);gap:.15rem var(--s-5)}}
.findshut__l li{display:flex;gap:var(--s-3);align-items:baseline;padding:.3rem 0;
  font-size:var(--t-small);color:var(--ink-2)}
.findshut__l .meta{flex:0 0 3rem;color:var(--ink-3);font-size:.75rem}
.findshut__f{margin-top:var(--s-4);font-size:var(--t-small);color:var(--ink-2);
  line-height:1.7;max-width:56ch}
.findshut__f a{color:var(--accent);border-bottom:1px solid currentColor;
  display:inline-flex;align-items:center;min-height:2.75rem}

/* ---- 03h-css-read.html ---- */
/* =====================================================================
   THE READING SURFACE — four themes, scoped to the room
   These redefine V8's tokens INSIDE .room only. The chrome, the footer
   and every other page keep the site theme, because choosing to read in
   sepia is not the same as choosing to browse in sepia.
   ===================================================================== */
[data-rt="day"]{
  --canvas:#EDEEEA;--surface:#F5F6F3;--sunk:#E2E5E0;--line:#D3D7D0;--line-2:#BEC4BA;
  --ink:#13171B;--ink-2:#4B5257;--ink-3:#666D70;
  --canvas-solid:#EDEEEA;color:var(--ink);background:var(--canvas)}
[data-rt="sepia"]{
  color-scheme:light;
  --canvas:#F2E9D8;--surface:#F7F0E2;--sunk:#E9DEC7;--line:#DCCFB4;--line-2:#C9B994;
  --ink:#33291B;--ink-2:#5C4E3A;--ink-3:#786954;
  --accent:#8A5A2B;--accent-2:#6E4720;--accent-soft:rgba(138,90,43,.12);
  --accent-line:rgba(138,90,43,.3);--on-accent:#FFF8EC;
  --lamp:#F7E2B8;--lamp-core:rgba(247,226,184,.5);--lamp-edge:rgba(247,226,184,0);
  --canvas-solid:#F2E9D8;color:var(--ink);background:var(--canvas)}
[data-rt="night"]{
  color-scheme:dark;
  --canvas:#0C1014;--surface:#141920;--sunk:#1A2028;--line:#262E37;--line-2:#37414C;
  --ink:#E8E6E1;--ink-2:#A6ACA9;--ink-3:#818A8C;
  --accent:#4FD6BC;--accent-2:#83EBD5;--accent-soft:rgba(79,214,188,.11);
  --accent-line:rgba(79,214,188,.28);--on-accent:#080C0F;
  --lamp:#FFE9C0;--lamp-core:rgba(255,233,192,.13);--lamp-edge:rgba(255,233,192,0);
  --canvas-solid:#0C1014;color:var(--ink);background:var(--canvas)}
[data-rt="ink"]{
  color-scheme:dark;
  --canvas:#000;--surface:#0A0A0B;--sunk:#131315;--line:#232326;--line-2:#3A3A3F;
  --ink:#F4F4F2;--ink-2:#B8B8B6;--ink-3:#8E8E8C;
  --accent:#6FE3CB;--accent-2:#9BF0DF;--accent-soft:rgba(111,227,203,.12);
  --accent-line:rgba(111,227,203,.32);--on-accent:#000;
  --lamp:#FFE9C0;--lamp-core:rgba(255,233,192,.08);--lamp-edge:rgba(255,233,192,0);
  --canvas-solid:#000;color:var(--ink);background:var(--canvas)}
/* Ink means ink: the room's own lamp glow would only muddy true black. */
[data-rt="ink"] .room__lamp{display:none}
/* A chosen reading theme paints its own ground, so the page behind it
   does not show through at the edges of a short scene. */
.room[data-rt="sepia"],.room[data-rt="night"],.room[data-rt="ink"],[data-rt="day"]{
  min-height:100vh}

/* ---- line spacing and column width ---- */
.room[data-rs="snug"] .prose{line-height:1.5}
.room[data-rs="normal"] .prose{line-height:var(--lh-read)}
.room[data-rs="loose"] .prose{line-height:1.9}
.room[data-rw="narrow"] .prose,.room[data-rw="narrow"] .page{max-width:48ch}
.room[data-rw="normal"] .prose,.room[data-rw="normal"] .page{max-width:var(--measure)}
.room[data-rw="wide"] .prose,.room[data-rw="wide"] .page{max-width:76ch}

/* =====================================================================
   THE READING SETTINGS SHEET
   ===================================================================== */
#readset[hidden]{display:none!important}
#readset{position:fixed;inset:0;z-index:126;background:rgba(6,8,10,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:end center}
@media (min-width:48rem){#readset{place-items:center;padding:2rem}}
.rset{width:min(30rem,100%);background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;
  padding:var(--s-5) clamp(1rem,4vw,1.5rem) calc(var(--s-5) + env(safe-area-inset-bottom));
  display:grid;gap:var(--s-5);box-shadow:var(--shadow-3);animation:rsin 240ms var(--e-silk)}
@media (min-width:48rem){.rset{border-radius:var(--r-3);padding-bottom:var(--s-5)}}
@keyframes rsin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rset__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.rset__h b{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.rset__x{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--ink-2);cursor:pointer}
.rset__x:hover{background:var(--sunk);color:var(--ink)}
.rset__x svg{width:1.15rem;height:1.15rem}
.rset__g{display:grid;gap:var(--s-3)}
.rset__g .meta{color:var(--ink-3);font-size:.75rem}
.rset__row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.rset__b{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 .85rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--canvas);
  color:var(--ink-2);cursor:pointer;font:inherit;font-size:var(--t-small)}
.rset__b:hover{border-color:var(--ink-3);color:var(--ink)}
.rset__b.is-on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.rset__b small{font-size:.7em}
.rset__b b{font-size:1.2em;font-weight:400}
.rset__val{font-family:var(--f-meta);font-size:.75rem;color:var(--ink-3);
  min-width:3.2rem;text-align:center;font-variant-numeric:tabular-nums}
/* The theme swatch shows the actual ground each theme paints. */
.rset__sw{width:.9rem;height:.9rem;border-radius:50%;flex:none;
  border:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.rset__sw--auto{background:linear-gradient(135deg,#EDEEEA 0 50%,#0C1014 50% 100%)}
.rset__sw--day{background:#EDEEEA}
.rset__sw--sepia{background:#F2E9D8}
.rset__sw--night{background:#0C1014}
.rset__sw--ink{background:#000}
.rset__note{line-height:1.7;color:var(--ink-3);font-size:.75rem}

/* ---- reading life ---- */
.life{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-5)}
@media (min-width:56rem){.life{grid-template-columns:repeat(4,minmax(0,1fr))}}
.life__c{padding:var(--s-5) var(--s-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);display:grid;gap:.3rem;align-content:start}
.life__v{font-family:var(--f-display);font-size:2rem;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.life__k{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.life__s{font-size:var(--t-small);color:var(--ink-2);line-height:1.55}

@media (prefers-reduced-motion:reduce){.rset{animation:none}}

/* =====================================================================
   WATCH — progress, the list, and the end of an episode
   ===================================================================== */
.rcard__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(10,12,14,.45)}
.rcard__bar i{display:block;height:100%;background:var(--accent)}
/* A progress bar takes the bottom edge, so the badges step up out of it
   rather than sitting half-covered. */
.rcard--prog .rcard__tag,.rcard--prog .rcard__in{bottom:.85rem}
.rcard__in{position:absolute;right:.55rem;bottom:.55rem;width:1.5rem;height:1.5rem;
  display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.rcard__in svg{width:.85rem;height:.85rem}
/* A reader's own rows lead, and are marked as theirs. */
.shelf--mine .shelf__h .meta{color:var(--accent)}

.vpend{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  background:linear-gradient(180deg,rgba(6,8,10,.72),rgba(6,8,10,.92));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:clamp(1rem,4vw,2rem);animation:vpein 320ms var(--e-silk)}
@keyframes vpein{from{opacity:0}to{opacity:1}}
.vpend__in{max-width:34rem;text-align:center;display:grid;gap:var(--s-3);color:#F2F0EB}
.vpend__in .meta{color:rgba(242,240,235,.6);font-size:.75rem}
.vpend__in h3{font-family:var(--f-display);font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);
  font-weight:400;line-height:1.15}
.vpend__in p{color:rgba(242,240,235,.78);line-height:1.65;font-size:var(--t-small);margin:0}
.vpend__t b{font-variant-numeric:tabular-nums;font-size:1.15em}
.vpend__a{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-3)}
.vpend__a .btn--ghost{--fg:rgba(242,240,235,.8)}
.vpend__a .btn--ghost:hover{--bg:rgba(242,240,235,.14);--fg:#fff}
.vpend__a .btn--outline{--fg:#F2F0EB;--bd:rgba(242,240,235,.4)}
.vpend__a .btn--outline:hover{--bg:rgba(242,240,235,.12);--fg:#fff}
@media (prefers-reduced-motion:reduce){.vpend{animation:none}}

/* =====================================================================
   CHANGING AN EDITION — money, so it reads like a receipt, not a pitch
   ===================================================================== */
.plan{padding-block:clamp(4.5rem,12vw,7rem) var(--s-9);max-width:46rem}
.plan h1{font-size:var(--t-h1);margin-top:var(--s-3)}
.plan .sec__lede{margin-bottom:var(--s-6)}
.plan__sum{display:grid;gap:var(--s-3);margin:var(--s-6) 0}
@media (min-width:40rem){.plan__sum{grid-template-columns:1fr 1fr;gap:var(--s-4)}}
.plan__r{padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface);display:grid;gap:.25rem}
.plan__r .meta{color:var(--ink-3);font-size:.75rem}
.plan__r b{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.plan__r span:last-child{color:var(--ink-2);font-size:var(--t-small)}
.plan__t{width:100%;border-collapse:collapse;margin:var(--s-5) 0;font-size:var(--t-small)}
.plan__t td{padding:var(--s-3) 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.plan__t td:last-child{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink)}
.plan__due td{border-bottom:0;border-top:1px solid var(--line-2);padding-top:var(--s-4);
  font-size:1.05rem;color:var(--ink)}
.plan__note{color:var(--ink-2);line-height:1.75;font-size:var(--t-small);max-width:56ch}
.plan__act{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);align-items:center}
.plan__list{display:grid;gap:var(--s-3);margin:var(--s-6) 0}
.plan__o{display:grid;gap:.2rem;padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--surface);position:relative;
  transition:border-color var(--d-settle) var(--e-silk),transform var(--d-settle) var(--e-silk)}
a.plan__o:hover{border-color:var(--accent);transform:translateY(-1px)}
.plan__o b{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.plan__o .meta{color:var(--ink-3);font-size:.75rem}
.plan__o--now{border-color:var(--accent-line);background:var(--accent-soft)}
.plan__p{position:absolute;right:var(--s-5);top:var(--s-4);color:var(--ink-2);
  font-size:var(--t-small);font-variant-numeric:tabular-nums}
@media (max-width:32rem){.plan__p{position:static;margin-top:.3rem}}

/* =====================================================================
   THE ROOMS AND ASK THE BOOK
   ===================================================================== */
.room__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.room__i > a,.room__i > span{display:grid;gap:.2rem;padding:var(--s-4) var(--s-5);
  border:1px solid var(--line);border-left:3px solid var(--ch,var(--accent));
  border-radius:var(--r-3);background:var(--surface);
  transition:border-color var(--d-settle) var(--e-silk),transform var(--d-settle) var(--e-silk)}
.room__i > a:hover{transform:translateY(-1px);border-color:var(--ch,var(--accent))}
.room__i b{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.room__i .meta{color:var(--ink-3);font-size:.75rem}
/* A closed room is visibly present and visibly not open. It is never
   removed from the list — a reader should know the rooms exist. */
.room__i.is-shut > span{opacity:.55;border-left-style:dashed;background:transparent}
.room__n{color:var(--ink-2)}

.post{display:grid;gap:var(--s-3);padding:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.post textarea{width:100%;font:inherit;font-family:var(--f-read);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--canvas);border:1px solid var(--line-2);
  border-radius:var(--r-2);padding:.7rem;resize:vertical}
.post textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.post__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.post__f .meta{color:var(--ink-3);font-size:.75rem;max-width:40ch;line-height:1.6}
.post__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.post__i{padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface)}
.post__h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.post__h b{font-size:var(--t-small)}
.post__h .meta{color:var(--ink-3);font-size:.75rem}
.post__h .btn{margin-left:auto}
.post__i p{font-family:var(--f-read);line-height:1.7;color:var(--ink);margin:0;
  white-space:pre-wrap;overflow-wrap:anywhere}

/* The Studio body is a grid with a generous gap between sections. Any
   margin these blocks carry lands ON TOP of that gap, which is where the
   loose column of air between the backlink, the box and the results came
   from. Inside a door they contribute no margin of their own. */
.stu__body > .backlink,.stu__body > .askbar,.stu__body > .findscope,
.stu__body > .findcount,.stu__body > .post,.stu__body > .room__l,
.stu__body > .ask__l,.stu__body > .post__l,.stu__body > .notice{margin:0}
/* The pieces of one search belong together, not spread across the page:
   the box, what was searched, and the count read as a single unit. */
.stu__body{gap:var(--s-6)}
.askbar + .findscope{margin-top:calc(-1 * var(--s-5))}
.findscope + .findcount,.findscope + .notice{margin-top:calc(-1 * var(--s-4))}
.backlink + .askbar,.backlink + .post,.backlink + .notice{margin-top:calc(-1 * var(--s-3))}

.askbar{display:grid;gap:var(--s-3)}
@media (min-width:40rem){.askbar{grid-template-columns:1fr auto;align-items:end}}
.askbar textarea{width:100%;font:inherit;font-size:1.0625rem;line-height:1.5;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2);
  padding:.7rem .9rem;resize:vertical}
.askbar textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.askbar .btn{min-height:3.25rem}
.ask__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.ask__i{padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-left:3px solid var(--ch,var(--accent));border-radius:var(--r-3);background:var(--surface)}
.ask__i p{font-family:var(--f-read);font-size:1.0625rem;line-height:1.7;color:var(--ink);margin:0}
.ask__i b{font-weight:600;background:var(--accent-soft);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 55%,transparent);border-radius:2px}
.ask__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.ask__f .meta{color:var(--ink-3);font-size:.75rem}

/* The reading face. Atkinson Hyperlegible is set very slightly smaller and
   with a touch more line height than Literata, because its letterforms are
   wider — matched so that switching face does not also change how much of
   the scene fits on a screen. */
.room[data-rf="hyper"]{
  --f-read:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --lh-read:1.72;
}
.room[data-rf="hyper"] .page{font-size:calc(var(--t-read) * .97);letter-spacing:.002em}

/* ---- 03i-css-together.html ---- */
/* =====================================================================
   ALONGSIDE
   Company, not noise. The toggle is a quiet circle at the edge of the
   screen; the panel is a column that sits beside the words on a desk and
   a sheet that rises on a phone. Neither ever covers what is being read.
   ===================================================================== */
.togbtn[hidden]{display:none!important}
.togbtn{position:fixed;right:clamp(.75rem,2vw,1.25rem);
  bottom:calc(clamp(.75rem,2vw,1.25rem) + env(safe-area-inset-bottom));
  z-index:112;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:color var(--d-settle) var(--e-silk),border-color var(--d-settle) var(--e-silk),
             transform var(--d-touch) var(--e-weight)}
.togbtn:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
.togbtn[aria-expanded="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.togbtn svg{width:1.35rem;height:1.35rem}
/* On a phone the panel is a sheet across the bottom, so the floating
   button would land on its Send. The sheet has its own close, so the
   button steps aside while it is open. */
@media (max-width:61.99rem){
  body[data-tog="1"] .togbtn{display:none}
}
/* Bottom right at every size. The reading rail owns the vertical centre
   of the right edge, and a floating button parked on top of it is how a
   reader loses the contents control. */
@media (min-width:62rem){.togbtn{right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem)}}

/* An open panel must not sit on top of the words. On a wide screen the
   page gives up the width the panel takes, so the column of prose moves
   out from under it rather than being covered by it. */
@media (min-width:62rem){
  body[data-tog="1"] .room .wrap,
  body[data-tog="1"] .lsn,
  body[data-tog="1"] .stu{padding-right:calc(min(24rem,32vw) + 3rem);
    transition:padding-right var(--d-settle) var(--e-silk)}
  body[data-tog="1"] .rail{right:calc(min(24rem,32vw) + 2rem)}
  body[data-tog="1"] .togbtn{right:calc(min(24rem,32vw) + 2rem)}
}
@media (prefers-reduced-motion:reduce){
  body[data-tog="1"] .room .wrap,body[data-tog="1"] .lsn,body[data-tog="1"] .stu{transition:none}
}

#together[hidden]{display:none!important}
#together{position:fixed;z-index:111;inset:auto 0 0 0;
  max-height:min(72vh,34rem);display:grid}
@media (min-width:62rem){
  #together{inset:4rem clamp(.75rem,2vw,1.25rem) auto auto;width:min(24rem,32vw);
    max-height:calc(100vh - 8rem)}
}
.tog{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-3);overflow:hidden;
  animation:togin 260ms var(--e-silk)}
@media (min-width:62rem){.tog{border-radius:var(--r-3)}}
@keyframes togin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tog__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--line)}
.tog__h .meta{display:block;color:var(--ink-3);font-size:.75rem;margin-bottom:.1rem}
.tog__h b{font-family:var(--f-display);font-size:1.15rem;font-weight:400}
.tog__x{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;
  border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.tog__x:hover{background:var(--sunk);color:var(--ink)}
.tog__x svg{width:1.1rem;height:1.1rem}
.tog__who{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--sunk)}
.tog__who .meta{color:var(--ink-3);font-size:.75rem;line-height:1.6}
.tog__p{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.tog__p li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-small)}
.tog__pn{font-weight:500;color:var(--ink)}
.tog__p .meta{margin-left:auto;font-size:.75rem}
.av--sm{width:1.6rem;height:1.6rem;font-size:.7rem;flex:none}
.tog__b{overflow-y:auto;padding:var(--s-4);display:grid;gap:var(--s-4);align-content:start;
  -webkit-overflow-scrolling:touch}
.tog__empty{margin:0;color:var(--ink-3);font-size:var(--t-small);line-height:1.7}
.tog__empty b{color:var(--ink-2)}
.tog__m{display:grid;gap:.35rem}
.tog__mh{display:flex;align-items:center;gap:var(--s-2)}
.tog__mh b{font-size:var(--t-small)}
.tog__mh .meta{font-size:.75rem;color:var(--ink-3)}
.tog__mute{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:.75rem;text-decoration:underline;min-height:2.75rem;padding:0 .25rem}
.tog__mute:hover{color:var(--signal)}
.tog__m p{margin:0;font-family:var(--f-read);font-size:1rem;line-height:1.6;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.tog__m.is-mine p{color:var(--ink-2)}
.tog__f{display:flex;gap:var(--s-2);align-items:flex-end;padding:var(--s-3) var(--s-4)
  calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.tog__f textarea{flex:1;min-width:0;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-2);
  padding:.6rem .7rem;resize:none;max-height:6rem}
.tog__f textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tog__note{margin:0;padding:var(--s-4);border-top:1px solid var(--line);
  color:var(--ink-2);font-size:var(--t-small);line-height:1.65}
/* Over an episode the panel has to sit above the player's own chrome. */
#vplay:not([hidden]) ~ #together,#vplay:not([hidden]) ~ .togbtn{z-index:132}
/* =====================================================================
   SIGNALS
   A short rule in the margin, heavier where more people stopped. Not a
   number beside every paragraph — that would turn a novel into a
   scoreboard. The count appears only when a reader asks for it.
   ===================================================================== */
.prose > p{position:relative}
.sig{position:absolute;left:-1.6rem;top:.45em;width:1.1rem;height:1.9em;padding:0;border:0;
  background:none;cursor:pointer;display:none;align-items:flex-start;justify-content:center}
@media (min-width:52rem){.sig{display:flex}}
.sig i{display:block;width:2px;height:100%;border-radius:1px;
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  transition:background-color var(--d-settle) var(--e-silk),width var(--d-settle) var(--e-silk)}
.sig[data-band="2"] i{background:color-mix(in srgb,var(--accent) 52%,transparent);width:3px}
.sig[data-band="3"] i{background:color-mix(in srgb,var(--accent) 76%,transparent);width:3px}
.sig__n{position:absolute;left:-.4rem;top:-1.5em;transform:translateX(-100%);
  font-family:var(--f-meta);font-size:.75rem;color:var(--ink-3);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity var(--d-settle) var(--e-silk)}
.sig:hover i,.sig:focus-visible i{background:var(--accent);width:3px}
.sig:hover .sig__n,.sig:focus-visible .sig__n{opacity:1}
.sig:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* On a phone there is no margin to put it in, so it sits under the words
   as a line of quiet text rather than crowding the measure. */
@media (max-width:51.99rem){
  .sig{display:flex;position:static;width:auto;height:auto;margin-top:.4rem;
    align-items:center;justify-content:flex-start;gap:.4rem}
  .sig i{width:1.25rem;height:2px}
  .sig__n{position:static;transform:none;opacity:1}
  .sig__n::after{content:" others kept a line here"}
}

/* ---- where readers stop ---- */
.loved{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-4)}
.loved li{padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-left:3px solid var(--ch,var(--accent));border-radius:var(--r-3);background:var(--surface)}
.loved blockquote{margin:0;font-family:var(--f-read);font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.loved__f{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-4);
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.loved__f .meta{color:var(--ink-3);font-size:.75rem}
.loved__n{margin-left:auto;color:var(--accent)!important}

/* =====================================================================
   COMPANIONS
   No profile cards. A name, a chapter, how long they have been reading —
   anything more and this becomes a product for meeting people rather
   than for reading a book together.
   ===================================================================== */
.cmp__l{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3)}
.cmp__c{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface)}
.cmp__i{display:grid;gap:.15rem;min-width:0;flex:1 1 12rem}
.cmp__i b{font-size:1rem}
.cmp__i .meta{color:var(--ink-3);font-size:.75rem}
.cmp__a{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-left:auto}
.cmp__h{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.cmp__h b{display:block;font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.cmp__h .meta{color:var(--ink-3);font-size:.75rem}

.cmp__t{list-style:none;margin:var(--s-5) 0;padding:0;display:grid;gap:var(--s-4)}
.cmp__m{padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface)}
.cmp__m.is-mine{background:var(--sunk)}
.cmp__mh{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);margin-bottom:.4rem}
.cmp__mh b{font-size:var(--t-small)}
.cmp__mh .meta{color:var(--ink-3);font-size:.75rem}
.cmp__m p{margin:0;font-family:var(--f-read);line-height:1.65;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
/* A message from further ahead arrives closed. The reader opens it, or
   does not — which is the only way to make "please avoid spoilers"
   something other than a hope. */
.cmp__m.is-ahead{border-left:3px solid var(--signal)}
.cmp__fold summary{cursor:pointer;list-style:none;color:var(--signal);font-size:var(--t-small);
  min-height:2.75rem;display:flex;align-items:center;line-height:1.5}
.cmp__fold summary::-webkit-details-marker{display:none}
.cmp__fold[open] summary{margin-bottom:.4rem;color:var(--ink-3)}
.cmp__fold p{margin:0}

.cmp__f{display:grid;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--surface)}
.cmp__f textarea{width:100%;font:inherit;font-family:var(--f-read);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--canvas);border:1px solid var(--line-2);
  border-radius:var(--r-2);padding:.7rem;resize:vertical}
.cmp__f textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cmp__ff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.cmp__ff .meta{color:var(--ink-3);font-size:.75rem;max-width:46ch;line-height:1.6}

/* ---- the two things a new account has to agree to ---- */
.checkrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);
  align-items:start;margin-top:var(--s-4);cursor:pointer;text-transform:none;letter-spacing:0}
.checkrow input{width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:var(--accent);
  cursor:pointer;flex:none}
.checkrow > span{font-size:var(--t-small);line-height:1.6;color:var(--ink)}
.checkrow i{display:block;font-style:normal;margin-top:.25rem;color:var(--ink-3);
  font-size:.75rem;line-height:1.65}
.checkrow a{text-decoration:underline}
/* The whole row is the target, so the box itself never has to be hit. */
.checkrow{min-height:2.75rem;padding:.25rem 0}

@media (prefers-reduced-motion:reduce){.tog{animation:none}.togbtn{transition:none}}

/* ---- 03j-css-help.html ---- */
/* =====================================================================
   HELP
   Deliberately unlike Alongside. That one is warm and sits beside the
   words; this one is a utility — square-shouldered, plainly a tool, and
   it never appears while someone is inside a scene.
   ===================================================================== */
.helpbtn[hidden]{display:none!important}
.helpbtn{position:fixed;right:clamp(.75rem,2vw,1.25rem);
  bottom:calc(clamp(.75rem,2vw,1.25rem) + env(safe-area-inset-bottom));
  z-index:112;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:color var(--d-settle) var(--e-silk),border-color var(--d-settle) var(--e-silk),
             transform var(--d-touch) var(--e-weight)}
.helpbtn:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
.helpbtn[aria-expanded="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.helpbtn svg{width:1.4rem;height:1.4rem}
@media (min-width:62rem){.helpbtn{right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem)}}
@media (max-width:61.99rem){body[data-help="1"] .helpbtn{display:none}}
body[data-cookie="true"] .helpbtn{bottom:calc(6rem + env(safe-area-inset-bottom))}

#helppanel[hidden]{display:none!important}
/* The panel is a fixed box with a ceiling, and the conversation scrolls
   inside it. minmax(0,1fr) is what forces that: without it the grid row
   takes its content's height and a long conversation pushes the composer
   and the way out to a person off the bottom of a phone. */
#helppanel{position:fixed;z-index:113;inset:auto 0 0 0;max-height:min(78vh,38rem);
  display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
@media (min-width:48rem){
  #helppanel{inset:auto clamp(1rem,3vw,2rem) calc(4.5rem + clamp(1rem,3vw,2rem)) auto;
    width:min(25rem,40vw);max-height:min(70vh,36rem)}
}
.help{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-3);overflow:hidden;
  animation:helpin 240ms var(--e-silk)}
@media (min-width:48rem){.help{border-radius:var(--r-3)}}
@keyframes helpin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.help__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4);border-bottom:1px solid var(--line)}
.help__h .meta{display:block;color:var(--ink-3);font-size:.75rem;margin-bottom:.1rem}
.help__h b{font-family:var(--f-display);font-size:1.2rem;font-weight:400}
.help__x{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;
  border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.help__x:hover{background:var(--sunk);color:var(--ink)}
.help__x svg{width:1.1rem;height:1.1rem}
.help__b{overflow-y:auto;padding:var(--s-4);display:grid;gap:var(--s-4);align-content:start}
.help__note{margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.7}
.help__s{display:grid;gap:var(--s-2)}
.help__q{text-align:left;font:inherit;font-size:var(--t-small);line-height:1.5;
  padding:.65rem .8rem;min-height:2.75rem;border:1px solid var(--line-2);border-radius:var(--r-2);
  background:var(--canvas);color:var(--ink);cursor:pointer}
.help__q:hover{border-color:var(--accent);color:var(--accent)}
.help__m{display:grid;gap:.25rem}
.help__m .meta{color:var(--ink-3);font-size:.75rem}
.help__m p{margin:0;font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.help__m--you p{padding:.6rem .8rem;border-radius:var(--r-2);background:var(--sunk);color:var(--ink)}
.help__m--bot p{color:var(--ink)}
.help__think{color:var(--ink-3)!important;font-style:italic}
.help__fb{display:grid;gap:var(--s-3)}
.help__fb > div{display:grid;gap:.15rem;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.help__fb b{font-size:var(--t-small)}
.help__fb span{font-size:var(--t-small);color:var(--ink-2);line-height:1.6}
.help__f{display:flex;gap:var(--s-2);align-items:flex-end;padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--line)}
.help__f textarea{flex:1;min-width:0;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-2);
  padding:.6rem .7rem;resize:none;max-height:6rem}
.help__f textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* The way out to a person is always on screen, never buried. */
.help__foot{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4)
  calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:var(--sunk)}
.help__foot .meta{color:var(--ink-3);font-size:.75rem;line-height:1.6}
.help__mail{color:var(--accent);font-size:var(--t-small);text-decoration:underline;
  display:inline-flex;align-items:center;min-height:2.75rem}
@media (prefers-reduced-motion:reduce){.help{animation:none}.helpbtn{transition:none}}

/* ---- 03k-css-cms.html ---- */
/* =====================================================================
   THE CMS
   An editor is a working surface, not a page to admire: dense, quiet,
   and unmistakable about what has been touched and what has not. It
   borrows the desk's own type and spacing and adds nothing decorative.
   ===================================================================== */
.cms__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--s-5) 0 var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.cms__tab{position:relative;cursor:pointer;font:inherit;font-size:var(--t-small);
  padding:.45rem .8rem;min-height:2.75rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.45rem;
  transition:border-color var(--d-settle) var(--e-silk),color var(--d-settle) var(--e-silk),
             background-color var(--d-settle) var(--e-silk)}
.cms__tab:hover{border-color:var(--ink-3);color:var(--ink)}
.cms__tab[aria-current="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
/* Nothing in this editor goes under 12px. Small type is a desktop
   luxury and the desk is opened on a phone too. */
.cms__badge{font-family:var(--f-meta);font-size:.75rem;font-style:normal;line-height:1;
  padding:.2rem .35rem;border-radius:var(--r-1);background:var(--signal);color:#fff}

.cms{display:grid;gap:var(--s-5)}
.cms__head{display:grid;gap:.5rem;padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.cms__head h2{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400}
.cms__head p{color:var(--ink-2);font-size:var(--t-small);line-height:1.7;max-width:64ch}
.cms__where{color:var(--ink-3)}
.cms__where .meta{font-size:.75rem}
.cms__where a{color:var(--accent);text-decoration:underline}
.cms__h{font-family:var(--f-meta);font-size:.75rem;letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
  margin:var(--s-4) 0 calc(-1 * var(--s-2));padding-top:var(--s-4);
  border-top:1px solid var(--line)}

/* ---- one field ---- */
.cms__f{display:grid;gap:.4rem;padding-left:var(--s-4);border-left:2px solid transparent;
  transition:border-color var(--d-settle) var(--e-silk)}
.cms__f.is-changed{border-left-color:var(--signal)}
.cms__l{display:flex;align-items:center;gap:.45rem;font-weight:600;font-size:var(--t-small)}
.cms__dot{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.cms__n{margin:0;color:var(--ink-3);font-size:var(--t-small);line-height:1.6;max-width:64ch}
.cms__n b{color:var(--ink-2)}
.cms input[type="text"],.cms input[type="number"],.cms textarea{
  width:100%;min-width:0;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-2);
  padding:.55rem .7rem;min-height:2.75rem}
.cms textarea{resize:vertical;font-family:var(--f-read);line-height:1.6}
.cms input:focus-visible,.cms textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cms__num{display:inline-flex;align-items:center;gap:.4rem;max-width:11rem}
.cms__num i{font-style:normal;color:var(--ink-3);font-family:var(--f-meta);font-size:var(--t-small)}
.cms__reads{display:block;color:var(--ink-3);font-size:var(--t-small);line-height:1.6;
  font-style:italic}

/* ---- repeatables ---- */
.cms__rep{display:grid;gap:var(--s-3)}
.cms__it{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.cms__it input[type="text"]{flex:1 1 12rem}
.cms__col{display:grid;gap:var(--s-3);padding:var(--s-4);background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--r-2)}
.cms__col .cms__rep{padding-left:var(--s-4);border-left:1px solid var(--line-2)}
.cms__mv{display:inline-flex;gap:.2rem;flex:none}
.cms__mv button{width:2.75rem;height:2.75rem;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);
  color:var(--ink-2);font-size:1rem;line-height:1}
.cms__mv button:hover:not([disabled]){color:var(--ink);border-color:var(--ink-3)}
.cms__mv button[disabled]{opacity:.35;cursor:default}
.cms__rm:hover:not([disabled]){color:var(--signal)!important;border-color:var(--signal)!important}
.cms__tick{width:2.75rem;height:2.75rem;flex:none;cursor:pointer;border-radius:var(--r-2);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);
  font-size:.95rem;line-height:1}
.cms__tick.is-on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

/* ---- the tokens ---- */
.cms__tok{margin-top:var(--s-5);border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--surface)}
.cms__tok summary{cursor:pointer;padding:var(--s-4);font-weight:600;font-size:var(--t-small);
  min-height:2.75rem;display:flex;align-items:center}
.cms__tok > p,.cms__tok > .cms__n{margin:0;padding:0 var(--s-4) var(--s-4);
  color:var(--ink-2);font-size:var(--t-small);line-height:1.7;max-width:70ch}
.cms__toks{display:grid;gap:.4rem;padding:0 var(--s-4) var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.cms__tokb{display:flex;align-items:baseline;gap:.5rem;cursor:pointer;text-align:left;
  padding:.5rem .6rem;min-height:2.75rem;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--canvas)}
.cms__tokb:hover{border-color:var(--accent)}
.cms__tokb code{font-family:var(--f-meta);font-size:.75rem;color:var(--accent)}
.cms__tokb span{color:var(--ink-3);font-size:var(--t-small);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- version history ---- */
.cms__rev{display:grid;gap:var(--s-3);padding:var(--s-4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-2)}
.cms__revh{display:flex;flex-wrap:wrap;gap:.3rem var(--s-4);align-items:baseline;
  justify-content:space-between}
.cms__diff{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.cms__diff li{display:grid;gap:.15rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.cms__diff code{font-family:var(--f-meta);font-size:.75rem;color:var(--ink-3)}
.cms__was,.cms__now{font-size:var(--t-small);line-height:1.5;padding-left:1.1rem;position:relative}
.cms__was{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.cms__was::before{content:"−";position:absolute;left:0;text-decoration:none;display:inline-block}
.cms__now{color:var(--ink)}
.cms__now::before{content:"+";position:absolute;left:0;color:var(--accent)}

/* ---- the save bar ---- */
body[data-cmsbar="1"]{padding-bottom:7rem}
/* The save bar owns the bottom of the screen while there is work in it.
   The help launcher sits in that corner and would cover the Save button,
   and an editor part-way through a change is not the person who needs to
   ask what the site is. */
body[data-cmsbar="1"] .helpbtn{display:none}
.cmsbar{position:fixed;left:0;right:0;bottom:0;z-index:59;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding:var(--s-3) clamp(1rem,4vw,2.5rem) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);box-shadow:0 -10px 30px rgba(19,23,27,.09)}
.cmsbar__n{font-size:var(--t-small);color:var(--ink-2);white-space:nowrap}
.cmsbar__n b{color:var(--signal);font-weight:600}
.cmsbar input{flex:1 1 12rem;min-width:0;font:inherit;font-size:var(--t-small);
  min-height:2.75rem;padding:.5rem .7rem;color:var(--ink);background:var(--canvas);
  border:1px solid var(--line-2);border-radius:var(--r-2)}
@media (max-width:46rem){
  .cmsbar{gap:.5rem}
  .cmsbar__n{flex:1 1 100%}
}

/* =====================================================================
   THE MANUSCRIPT
   A list of scenes is read down the page, so it stays a list: one line
   each, the state on the right, and the editor opening in place rather
   than taking you somewhere else and losing your place in the chapter.
   ===================================================================== */
.ms{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden;margin-top:var(--s-4)}
.ms__row{background:var(--surface)}
.ms__row.is-open{background:var(--canvas)}
.ms__open{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto auto;gap:var(--s-3);
  align-items:center;width:100%;text-align:left;cursor:pointer;border:0;background:none;
  padding:.8rem var(--s-4);min-height:3.25rem;color:var(--ink)}
.ms__open:hover{background:var(--sunk)}
.ms__n{font-family:var(--f-meta);font-size:.75rem;color:var(--ink-3);letter-spacing:.08em}
.ms__t{font-family:var(--f-display);font-size:1.0625rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.ms__m{font-family:var(--f-meta);font-size:.75rem;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media (max-width:46rem){
  .ms__open{grid-template-columns:3rem minmax(0,1fr);row-gap:.35rem}
  .ms__m,.ms__open .chip{grid-column:2}
}
.chip--free{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
.chip--paid{color:var(--ink-3);background:var(--sunk);border:1px solid var(--line-2)}
.chip--out{color:var(--signal);background:var(--signal-soft);border:1px solid transparent}
.ms__open .chip{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r-1);white-space:nowrap}
.ms__edit{display:grid;gap:var(--s-5);padding:var(--s-5) var(--s-4) var(--s-6);
  border-top:1px solid var(--line)}
.ms__prose{font-family:var(--f-read)!important;font-size:1.0625rem!important;
  line-height:1.7!important;min-height:20rem}

/* the free boundary — the most consequential number on the site */
/* One column, always. A two-column version collapsed the moment the note
   beside the number grew — and a control this consequential is not the
   place to be clever about layout. */
.ms__gate{display:grid;gap:var(--s-4);padding:var(--s-5);margin-top:var(--s-4);
  background:var(--sunk);border:1px solid var(--line-2);border-radius:var(--r-2)}
.ms__gatel b{display:block;font-size:1.0625rem;margin-bottom:.3rem}
.ms__gatel span{color:var(--ink-2);font-size:var(--t-small);line-height:1.7;
  display:block;max-width:60ch}
.ms__gatec{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--s-4)}
.ms__gatec .cms__num{flex:none}
.ms__gatec .cms__reads{flex:1 1 20rem;min-width:0;font-style:normal;color:var(--ink-2)}
.ms__io{display:flex;flex-wrap:wrap;gap:var(--s-3);padding:0 var(--s-4) var(--s-4)}
.ms__io label{cursor:pointer}
.ms__impn{margin:0 var(--s-4) var(--s-4);padding:var(--s-4);border-radius:var(--r-2);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  font-size:var(--t-small);line-height:1.7;color:var(--ink)}
.ms__impn code{font-family:var(--f-meta);font-size:.75rem}

/* ---- the audio and video libraries ---- */
.md__have{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-4);background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r-2)}
.md__have > div{flex:1 1 16rem;min-width:0;display:grid;gap:.25rem}
.md__have b{font-size:1rem;overflow-wrap:anywhere}
.md__have .meta{color:var(--ink-3)}
.md__have .cms__n{margin-top:.35rem}
.md__poster{flex:0 0 auto;width:12.5rem;max-width:100%;height:auto;border-radius:var(--r-2);
  border:1px solid var(--line-2);display:block;background:var(--deep)}
/* A row of five states does not belong on one line on a phone. */
.seg--wrap{flex-wrap:wrap}
.seg--wrap button{flex:0 1 auto}
/* A control that cannot be used has to look it. The production state is
   fixed once an episode can actually play — what it says then is
   "Released", and no setting here changes that. */
.seg button[disabled]{opacity:.4;cursor:default}

/* =====================================================================
   MODERATION
   A queue is read one item at a time and acted on, so each report is a
   card with the words in the middle of it — the thing being judged is
   the thing that should be largest.
   ===================================================================== */
.mod__c{display:grid;gap:var(--s-3);padding:var(--s-5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-2)}
.mod__ch{display:flex;flex-wrap:wrap;gap:.5rem var(--s-4);align-items:center;
  justify-content:space-between}
.mod__ch .chip{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r-1)}
.mod__q{margin:0;padding:var(--s-4);background:var(--sunk);border-left:2px solid var(--line-2);
  border-radius:0 var(--r-2) var(--r-2) 0;font-family:var(--f-read);font-size:1.0625rem;
  line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.mod__meta{margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.7}
.mod__meta b{color:var(--ink)}
.mod__acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mod__why{display:grid;gap:var(--s-3);padding:var(--s-4);background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--r-2)}
.mod__why input{width:100%;font:inherit;font-size:1rem;min-height:2.75rem;
  padding:.55rem .7rem;color:var(--ink);background:var(--canvas);
  border:1px solid var(--line-2);border-radius:var(--r-2)}
.mod__log{display:grid;gap:.15rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.mod__log b{font-size:var(--t-small)}
.mod__log span:last-child{color:var(--ink-2);font-size:var(--t-small);line-height:1.6}

/* the author's one voice, and the marker a removal leaves */
.mod__badge{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.1rem .4rem;border-radius:var(--r-1);
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.mod__gone p{color:var(--ink-2)!important;font-style:italic}
.mod__gone{opacity:.9}
/* the reason picker, inside the reading panel */
.mod__why .btn{justify-content:flex-start;text-align:left}

/* the image library's row: the picture is the label */
.imgrow{grid-template-columns:4.5rem minmax(0,1fr) auto auto!important}
.imgrow__t{width:4.5rem;height:3rem;object-fit:cover;border-radius:var(--r-1);
  background:var(--deep);border:1px solid var(--line)}
@media (max-width:46rem){
  .imgrow{grid-template-columns:4.5rem minmax(0,1fr)!important}
  .imgrow .ms__m,.imgrow .chip{grid-column:2}
}

/* ---- 03l-css-social.html ---- */
/* ---- the community ------------------------------------------------------ */
.ava{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:var(--r-pill);font-family:var(--f-ui);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  background:hsl(var(--h) 34% 88%);color:hsl(var(--h) 46% 24%);
  border:1px solid hsl(var(--h) 30% 78%)}
[data-theme="dark"] .ava{background:hsl(var(--h) 28% 22%);color:hsl(var(--h) 55% 82%);
  border-color:hsl(var(--h) 24% 32%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ava{
  background:hsl(var(--h) 28% 22%);color:hsl(var(--h) 55% 82%);border-color:hsl(var(--h) 24% 32%)}}
.ava--sm{width:1.875rem;height:1.875rem;font-size:.75rem}
.ava--lg{width:3.25rem;height:3.25rem;font-size:1rem}
.ava--xl{width:4.5rem;height:4.5rem;font-size:1.375rem}

.callout{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-3);
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--ink-2);
  max-width:60ch;line-height:1.6}
.callout b{color:var(--ink)}
.callout--quiet{border-color:var(--line);background:var(--sunk)}
.callout__acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}

.composer{margin-top:var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:var(--s-4);max-width:44rem}
.composer__top{display:flex;gap:var(--s-3);align-items:flex-start}
.composer textarea{flex:1;font:inherit;font-family:var(--f-ui);padding:.6rem .7rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--canvas);
  color:var(--ink);resize:vertical;min-height:4.5rem}
.composer__foot{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-3);flex-wrap:wrap}
.upto{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);color:var(--ink-3)}
.upto select{font:inherit;font-size:var(--t-small);min-height:2.75rem;padding:.3rem .5rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--canvas);color:var(--ink)}
.composer__note{margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-3);line-height:1.5}

.tabs{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);
  border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a[role=tab]{display:inline-flex;align-items:center;min-height:2.875rem;
  color:var(--ink-3);font-size:var(--t-ui);white-space:nowrap}
.tabs a[role=tab]:hover{color:var(--ink)}
.tabs a[aria-selected]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}

.feed{margin-top:var(--s-5);display:grid;gap:var(--s-4);max-width:44rem}
.post{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);
  padding:var(--s-4) var(--s-5)}
.post__head{display:flex;gap:var(--s-3);align-items:center}
.post__name{display:block}
.post__meta{display:block;font-family:var(--f-meta);font-size:.75rem;
  letter-spacing:.06em;color:var(--ink-3);margin-top:.1rem}
.post__at{color:var(--accent)}
.post__body{margin-top:var(--s-3);color:var(--ink);line-height:1.65;white-space:pre-wrap}
.post__acts{display:flex;gap:var(--s-4);margin-top:var(--s-4);flex-wrap:wrap;align-items:center}
.pact{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;cursor:pointer;
  font-size:var(--t-small);color:var(--ink-3);background:none;border:0}
.pact:hover{color:var(--accent)}
.pact[aria-pressed=true]{color:var(--accent)}

.post--veiled{background:var(--sunk);border-style:dashed}
.veil{margin-top:var(--s-3)}
.veil__t{font-family:var(--f-meta);font-size:.75rem;letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--warn,#9A6209)}
.veil__b{margin-top:.4rem;color:var(--ink-2);font-size:var(--t-small);line-height:1.55;max-width:48ch}
.veil .btn{margin-top:var(--s-3)}

.replies{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3);
  display:grid;gap:var(--s-3)}
.reply{display:flex;gap:var(--s-3);align-items:flex-start}
.reply p{margin-top:.2rem;color:var(--ink-2);line-height:1.6}
.replybox{display:flex;gap:var(--s-2);margin-top:var(--s-3);align-items:flex-start}
.replybox textarea{flex:1;font:inherit;font-family:var(--f-ui);padding:.5rem .6rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--canvas);
  color:var(--ink);resize:vertical}

.people{margin-top:var(--s-5);display:grid;gap:var(--s-4)}
@media(min-width:44rem){.people{grid-template-columns:1fr 1fr}}
.pcard{display:flex;gap:var(--s-4);border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:var(--s-4)}
.pcard__b{flex:1;min-width:0}
.pcard__b p{margin-top:.4rem;color:var(--ink-2);font-size:var(--t-small);line-height:1.5}
.pcard__f{display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-3);flex-wrap:wrap}

.profile{display:flex;gap:var(--s-5);align-items:flex-start;margin-top:var(--s-5);flex-wrap:wrap}
.profile__n{font-size:var(--t-h2);letter-spacing:var(--tr-display)}
.profile__bio{margin-top:var(--s-3);color:var(--ink-2);max-width:52ch;line-height:1.6}
.profile__f{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-3);flex-wrap:wrap}
.profile__a{display:flex;gap:var(--s-2);margin-top:var(--s-4);flex-wrap:wrap}

.convs{margin-top:var(--s-5);display:grid;gap:var(--s-2);max-width:40rem}
.conv{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);min-height:4rem}
.conv:hover{border-color:var(--line-2)}
.conv>div{flex:1;min-width:0}
.conv__last{color:var(--ink-3);font-size:var(--t-small);margin-top:.15rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convhead{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-4)}
.convhead__w{display:flex;gap:var(--s-3);align-items:center;min-height:2.75rem}
.msgs{margin-top:var(--s-5);display:grid;gap:var(--s-3);max-width:40rem}
.msg{justify-self:start;max-width:80%;padding:.7rem .9rem;border-radius:var(--r-3);
  background:var(--surface);border:1px solid var(--line)}
.msg--mine{justify-self:end;background:var(--accent-soft);border-color:var(--accent-line)}
.msg p{color:var(--ink);line-height:1.55;white-space:pre-wrap}
.msg .post__meta{margin-top:.35rem}
.msgbox{display:flex;gap:var(--s-2);margin-top:var(--s-4);max-width:40rem;align-items:flex-start}
.msgbox textarea{flex:1;font:inherit;font-family:var(--f-ui);padding:.6rem .7rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);resize:vertical}
.empty{padding:var(--s-6);border:1px dashed var(--line-2);border-radius:var(--r-3);
  text-align:center;color:var(--ink-2);max-width:44rem}
.empty p+p{margin-top:.5rem;font-size:var(--t-small);color:var(--ink-3)}
.feed__split{margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--ink-3);line-height:1.5;max-width:52ch}
.feed:empty{display:none}

/* A post its author can still see after the desk took it down. Quieter
   than a live post, and plainly not in anybody else's feed. */
.post--gone{opacity:.9;border-style:dashed}
.post--gone .veil__t{color:var(--warn)}

/* ---- 03m-css-help.html ---- */
/* The panel's surface. The previous assistant painted its own background on an
   inner wrapper; this one paints the panel itself, so the panel is never a
   sheet of transparent text over the artwork behind it. */
#helppanel{display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-3);overflow:hidden;
  animation:hdin 220ms var(--e-silk)}
@media (min-width:48rem){#helppanel{border-radius:var(--r-3)}}
@keyframes hdin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#helppanel{animation:none}}

/* ---- the help centre ---------------------------------------------------- */
.hd__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-3);
  border-bottom:1px solid var(--line);flex:none}
.hd__head b{display:block;font-family:var(--f-display);font-size:1.125rem;letter-spacing:-.01em;
  margin-top:.15rem}
.hd__head .btn{margin-left:auto}
.hd__body{overflow-y:auto;padding:var(--s-4);display:grid;gap:var(--s-4);min-height:0}
.hd__search{display:flex;gap:var(--s-2);align-items:center}
.hd__search input{flex:1;min-width:0;font:inherit;min-height:2.75rem;padding:.5rem .7rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--canvas);color:var(--ink)}
.hd__search--page{max-width:34rem;margin-top:var(--s-5)}
.hd__search--page input{min-height:3rem}
.hd__note{font-size:var(--t-small);color:var(--ink-3);line-height:1.5}
.hd__note--none{color:var(--ink-2)}
.hd__list{display:grid;border-top:1px solid var(--line)}
.hd__list--page{margin-top:var(--s-5);max-width:var(--measure)}
.hdq{border-bottom:1px solid var(--line)}
.hdq summary{display:flex;align-items:center;gap:var(--s-3);cursor:pointer;list-style:none;
  padding:var(--s-3) 0;min-height:2.75rem;font-size:var(--t-ui);line-height:1.45}
.hd__list--page .hdq summary{font-size:1.0625rem;padding:var(--s-4) 0;min-height:3rem}
.hdq summary::-webkit-details-marker{display:none}
.hdq summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-size:1.15rem;flex:none;
  transition:transform var(--d-settle) var(--e-silk)}
.hdq[open] summary::after{transform:rotate(45deg)}
.hdq summary:hover{color:var(--accent)}
.hdq__a{padding:0 0 var(--s-4);color:var(--ink-2);line-height:1.65;font-size:var(--t-small)}
.hd__list--page .hdq__a{font-size:var(--t-ui);max-width:62ch}
.hdq__a p+p{margin-top:.85em}
.hdq__a b{color:var(--ink)}
.hdq__a a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  display:inline-flex;align-items:center;min-height:2.75rem}
.hd__ask{display:grid;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--sunk)}
.hd__ask p{font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.hd__ask input,.hd__ask textarea{font:inherit;font-family:var(--f-ui);min-height:2.75rem;
  padding:.5rem .7rem;border-radius:var(--r-2);border:1px solid var(--line-2);
  background:var(--canvas);color:var(--ink);resize:vertical}
.hd__ask button{justify-self:start}
.hd__err{color:var(--ink);background:rgba(180,60,50,.1);border:1px solid rgba(180,60,50,.3);
  padding:.5rem .7rem;border-radius:var(--r-2);font-size:var(--t-small)}
.hd__ok{padding:var(--s-4);border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--r-3);font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.hd__ok b{color:var(--ink)}
.hd__ok p{margin-top:.4rem}
.hd__foot{font-size:var(--t-small);color:var(--ink-3)}
.hd__foot a{color:var(--accent)}
.hd__askpage{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line);
  max-width:36rem}
.hd__askpage h2{font-size:var(--t-h3);letter-spacing:var(--tr-display)}
.hd__askpage>p{margin-top:var(--s-3);color:var(--ink-2);line-height:1.6}
.hd__askpage .hd__ask{margin-top:var(--s-5)}

/* ---- the support queue in the desk ---- */
.sreq{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);
  padding:var(--s-4);margin-bottom:var(--s-3)}
.sreq--done{opacity:.62}
.sreq__h{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.sreq__ref{font-family:var(--f-meta);font-size:.75rem;letter-spacing:.1em;color:var(--accent)}
.sreq__m{margin-top:var(--s-3);white-space:pre-wrap;color:var(--ink);line-height:1.6;
  border-left:2px solid var(--line-2);padding-left:var(--s-4)}
.sreq__f{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-4);flex-wrap:wrap}
/* ---- legal pages ---- */
.legal-lede{font-size:var(--t-lead);line-height:1.65;color:var(--ink);max-width:60ch;
  padding-bottom:var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-5)}
.legal-gap{padding:var(--s-4) var(--s-5);border:1px solid var(--warn-line,rgba(154,98,9,.3));
  background:var(--warn-soft,rgba(154,98,9,.08));border-radius:var(--r-3);line-height:1.6}
.legal-table{overflow-x:auto;margin:var(--s-4) 0;border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--surface)}
.legal-table table{border-collapse:collapse;width:100%;font-size:var(--t-small);min-width:32rem}
.legal-table th,.legal-table td{text-align:left;padding:.55rem .75rem;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.legal-table th{font-family:var(--f-meta);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--sunk);
  white-space:nowrap}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table code{font-family:var(--f-meta);font-size:.75rem}

/* ---- 03n-css-readers.html ---- */
/* ===== READER MANAGEMENT — the desk acting on an account ================
   A warning colour the design system did not have yet: used only where a
   control removes access or removes a record, so it never appears twice
   on a screen for the same reason. Defined in all four theme states. */
:root,[data-theme="light"]{
  --warn:#8A3B14; --warn-soft:rgba(138,59,20,.09); --warn-line:rgba(138,59,20,.28);
}
[data-theme="dark"]{
  --warn:#F0A47A; --warn-soft:rgba(240,164,122,.12); --warn-line:rgba(240,164,122,.30);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --warn:#F0A47A; --warn-soft:rgba(240,164,122,.12); --warn-line:rgba(240,164,122,.30);
}}
.night{--warn:#F0A47A; --warn-soft:rgba(240,164,122,.12); --warn-line:rgba(240,164,122,.30)}

.tag--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.btn--danger{--bg:var(--warn-soft);--fg:var(--warn);--bd:var(--warn-line)}
.btn--danger:hover{--bg:var(--warn);--fg:var(--canvas);--bd:var(--warn)}

/* the filter bar above the table */
.rmbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-end;
  margin:var(--s-4) 0 var(--s-3)}
.rmbar__f{display:flex;flex-direction:column;gap:.25rem;min-width:9rem}
.rmbar__f>span{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.rmbar input,.rmbar select{min-height:2.75rem;padding:.45rem .7rem;border-radius:var(--r-2);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--t-small)}
.rmbar input:focus-visible,.rmbar select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the state of an account, said in words before any control is offered */
.rmnote{border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r-2);background:var(--sunk);padding:var(--s-4);
  margin:0 0 var(--s-4);font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.rmnote b{color:var(--ink)}
.rmnote--warn{border-left-color:var(--warn);background:var(--warn-soft)}
.rmnote--warn b{color:var(--warn)}

/* the question asked before anything is written */
.rmask{border:1px solid var(--accent-line);border-radius:var(--r-2);
  background:var(--accent-soft);padding:var(--s-4);margin:0 0 var(--s-4)}
.rmask>b{display:block;font-size:var(--t-body);margin-bottom:.35rem}
.rmask p{margin:0 0 var(--s-3);font-size:var(--t-small);color:var(--ink-2);
  line-height:1.6;max-width:60ch}
.rmask__l{display:block;font-family:var(--f-meta);font-size:var(--t-meta);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.rmask input{width:100%;max-width:34rem;min-height:2.75rem;padding:.5rem .7rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--t-small)}
.rmask input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rmask__b{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}

/* everything held about one reader */
.rmexp textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-2);
  background:var(--sunk);color:var(--ink);padding:var(--s-4);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;
  line-height:1.6;resize:vertical}
.rmexp textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the pickers that sit inside a row's control column */
.crow__v select{min-height:2.75rem;padding:.4rem .6rem;border-radius:var(--r-2);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--t-small)}
.crow__v select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:47.99rem){
  .crow__v{text-align:left}
  .rmbar__f{min-width:100%}
}

/* A figure that lines up in a column, and the bar beside it. Used on the
   desk's "where they stop" table, where the shape of the fall matters
   more than any single number in it. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.bar1{display:inline-block;vertical-align:middle;width:5.5rem;height:6px;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.bar1 i{display:block;height:100%;background:var(--accent);border-radius:3px}
@media (max-width:47.99rem){ .bar1{width:3.5rem} }

/* The desk's own section list. Thirteen entries is too many for the
   sliding strip the six-entry settings nav uses: on a phone the last
   seven would sit off the side behind a hidden scrollbar. These wrap,
   and keep their group headings, so nothing is hidden behind a gesture. */
.conav--wide{flex-wrap:wrap;overflow:visible}
.conav--wide .conav__h{display:block;width:100%;margin:var(--s-2) 0 0}
.conav--wide .conav__h:first-child{margin-top:0}

/* ---- 03o-css-modfeed.html ---- */
/* ===== REPORTING, ON THE FEED =========================================
   The report control is deliberately the quietest thing on a post. It has
   to be findable and it must never look like an invitation. */
.pact--rep{color:var(--ink-3)}
.pact--rep:hover{color:var(--warn)}
.srep{grid-column:1/-1;flex-basis:100%;margin-top:var(--s-3);padding:var(--s-4);
  border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:var(--r-2)}
.srep__t{margin:0 0 var(--s-3);font-weight:600;color:var(--ink)}
.srep__b{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.srep__n{margin:var(--s-3) 0 0;font-size:var(--t-small);color:var(--ink-2);
  line-height:1.55;max-width:52ch}
.reply__a{margin-top:.35rem}

/* ===== WHAT A REMOVAL LEAVES ==========================================
   Everyone else sees nothing at all. Its author sees this, and only its
   author — which is the whole of the promise the rules page makes. */
.post--gone{border-style:dashed;background:var(--sunk)}
.gone__t{margin:0;font-family:var(--f-meta);font-size:var(--t-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--warn)}
.gone__b{margin:.4rem 0 0;color:var(--ink-2);font-size:var(--t-small);
  line-height:1.6;max-width:54ch}
.gone__b a{color:var(--accent)}
.reply--gone p,.msg--gone p{color:var(--ink-3);font-size:var(--t-small);
  font-style:italic;line-height:1.55}
.msg--gone{background:var(--sunk);border-style:dashed}

/* A grid item is as wide as its widest child unless it is told not to be.
   Adding a fourth control to the row of post actions was enough to push
   the whole feed past the edge of a phone. */
.feed>*,.post,.post__acts,.reply,.reply>div{min-width:0}
.post__meta,.post__body{overflow-wrap:anywhere}
.convhead__n{font-size:1.0625rem;font-weight:600;margin:0;line-height:1.3}

/* what is waiting, by the place it came from */
.modsurf{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.modsurf__i{display:inline-flex;align-items:baseline;gap:.4rem;padding:.35rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--sunk);
  font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.modsurf__i b{font-family:var(--f-ui);font-size:var(--t-ui);letter-spacing:0;color:var(--ink-2)}
.modsurf__i.is-on{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.modsurf__i.is-on b{color:var(--warn)}

/* the queue card now names the surface a report came from */
.mod__ch .tag{flex:none}

/* ---- 03p-css-stripe.html ---- */
/* ===== PAYMENTS =========================================================
   A price ID is a string nobody reads for meaning — it is compared,
   character by character, against what Stripe shows. So it is set in a
   monospaced face and allowed to break anywhere rather than pushing the
   table off the side of a phone. */
.stcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-1);
  padding:.12rem .35rem;overflow-wrap:anywhere;color:var(--ink)}
.stpick{width:100%;max-width:34rem;min-height:2.75rem;padding:.5rem .7rem;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--canvas);
  color:var(--ink);font:inherit;font-size:var(--t-ui)}
.stpick:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cms__f input[data-cms^="settings.price"],
.cms__f input[data-cms^="settings.stripePk"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem}

/* ===== A BLOCKER FOUND WHILE TESTING ==================================
   The cookie notice and the CMS save bar are both fixed to the bottom of
   the window, and the notice sits at a higher layer. Anyone who had not
   yet answered the notice could see "Save and publish" and could not
   press it: the notice was in front of it. Nothing in the whole CMS
   could be saved.

   They stack now. The save bar comes forward while there is unsaved
   work, and the notice steps up to sit above it rather than over it. */
.cmsbar{z-index:calc(var(--z-veil) + 1)}
body[data-cmsbar="1"] .cookies{bottom:5.25rem}
body[data-cmsbar="1"]{padding-bottom:13rem}
@media (max-width:46rem){
  body[data-cmsbar="1"] .cookies{bottom:8.5rem}
  body[data-cmsbar="1"]{padding-bottom:18rem}
}

/* The error log's last column holds a route and a name, not a row of
   buttons, so it does not want the 18rem the desk's tables reserve for
   controls — that reservation was pushing the table off the screen. */
.errtable .dtable td{white-space:normal;overflow-wrap:anywhere}
.errtable .dtable td:last-child{min-width:0}
.errtable .dtable table{min-width:0}
.errtable .dtable td:first-child{white-space:nowrap}
.errtable .stcode{display:inline-block;max-width:100%}


/* ===== A READER'S OWN SETTINGS, ON A PHONE ==============================
   The controls in a settings row sit in the right-hand column, which has
   no width of its own. A range slider and the wider selects were pushing
   that column past the edge of the screen. */
.crow__c .input,.crow__c select,.crow__c input,.crow__c textarea{max-width:100%;box-sizing:border-box}
.crow__c{min-width:0}
@media (max-width:47.99rem){
  .crow{grid-template-columns:1fr}
  .crow__c{width:100%}
  .crow__c .input{width:100%}
}

/* ===== THE FOUR INKS, BY THE NAMES THE DATABASE STORES =================
   The prototype's four colours were keyed a/s/l/c in the page and
   gold/sea/rose/ash in the database. Two vocabularies for one thing is a
   mapping layer waiting to be got wrong, so the stored names win and the
   rules below answer to them. The originals stay, because the prototype
   still uses them. */
.pass__i--gold{border-left-color:var(--accent)!important}
.pass__i--sea{border-left-color:var(--signal)!important}
.pass__i--rose{border-left-color:color-mix(in srgb,var(--lamp) 80%,var(--line-2))!important}
.pass__i--ash{border-left-color:var(--ch,var(--accent))!important}

/* The four highlights, under the names the database stores. The a/s/l/c
   rules above stay, because the prototype still uses them. */
.hl--gold{background:color-mix(in srgb,var(--accent) 18%,transparent);
  box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--accent) 10%,transparent)}
.hl--sea{background:color-mix(in srgb,var(--signal) 18%,transparent);
  box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--signal) 10%,transparent)}
.hl--rose{background:color-mix(in srgb,var(--lamp) 42%,transparent)}
.hl--ash{background:color-mix(in srgb,var(--ch,var(--accent)) 18%,transparent)}

/* The bar that meets a selection. It is deliberately quiet: four words,
   four colours, and nothing that looks like an advertisement. */
#selbar{position:absolute;z-index:120;display:flex;align-items:center;gap:var(--s-2);
  padding:.4rem .55rem;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-2)}
#selbar[hidden]{display:none!important}
#selbar form{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.selbar__t{color:var(--ink-3);padding-left:.2rem}
.selbar__i{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;
  padding:0 .6rem;border:1px solid transparent;border-radius:var(--r-pill);
  background:none;color:var(--ink-2);font:inherit;font-size:var(--t-small);cursor:pointer}
.selbar__i:hover{border-color:var(--line-2);color:var(--ink)}
.selbar__i i{width:.7rem;height:.7rem;border-radius:2px;display:inline-block}
.selbar__i[data-ink=gold] i{background:var(--accent)}
.selbar__i[data-ink=sea] i{background:var(--signal)}
.selbar__i[data-ink=rose] i{background:var(--lamp)}
.selbar__i[data-ink=ash] i{background:var(--ch,var(--accent))}
.roomkept{margin-top:var(--s-5);text-align:center;color:var(--ink-3)}
.roomkept a{color:var(--accent)}

/* the rail, on the server's own markup */
.rail__b{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
  color:var(--ink-3)}
.rail__b:hover{background:var(--sunk);color:var(--ink)}

/* search */
.findbar{display:flex;gap:var(--s-3);margin-top:var(--s-5);max-width:40rem;flex-wrap:wrap}
.findbar input{flex:1 1 16rem;min-width:0;min-height:2.75rem;padding:.6rem .8rem;font:inherit;
  border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.findcount{margin-top:var(--s-5)}
.hits{margin-top:var(--s-4);display:grid;gap:var(--s-4);max-width:44rem;padding:0;list-style:none}
.hit{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);
  padding:var(--s-4) var(--s-5)}
.hit--shut{background:var(--sunk);border-style:dashed}
.hit__w{display:block}
.hit__t{display:block;font-family:var(--f-display);font-size:var(--t-h3);font-weight:400;
  letter-spacing:var(--tr-display);margin-top:.15rem}
.hit__f{margin-top:var(--s-3);font-family:var(--f-read);line-height:1.7;color:var(--ink-2)}
.hit__f b{color:var(--ink);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.hit__shut{margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-3);line-height:1.6}

/* The period switch became a form so it works without JavaScript. A form
   is a block by default and would have thrown the card's header out. */
form.billtg{margin:0;display:inline-flex}

/* The composer's "discusses up to" chooser lists every scene the reader
   has reached, and its widest option was setting the select's width —
   which pushed the whole feed off the side of a phone. */
.upto{min-width:0;flex:1 1 12rem}
.upto select{min-width:0;max-width:100%;flex:1 1 auto;text-overflow:ellipsis}
@media (max-width:47.99rem){
  .upto{flex-basis:100%}
  .composer__foot{flex-wrap:wrap}
}

/* ---- design/server.css (this repository) ---- */
/* =====================================================================
   RULES THAT BELONG TO THE SERVER, NOT TO THE PROTOTYPE.
   Appended last by scripts/build-css.py.

   Everything above this line in app.css is generated from the approved
   prototype's own partials, byte for byte, so the two cannot drift. This
   file is for the handful of rules that exist because the server does
   something the prototype never did — and it is kept small on purpose.
   A rule that belongs to the design belongs in the design.
   ===================================================================== */

/* The consent notice reserves its own height while it is up. Painted
   with the first frame and pinned to the bottom, it sat over the front
   page's second button on a phone: the first thing a stranger saw of
   this site was a bar covering a control. */
body[data-ck-open="1"] { --ck-h: 9.5rem; padding-bottom: var(--ck-h); }
@media (min-width: 46rem) { body[data-ck-open="1"] { --ck-h: 6rem; } }

/* Padding on the body moves the END of the document, which is no help
   to a hero that is a screen tall and lays its words along the bottom
   edge — the notice still sat over the second button. So the first
   frame gives up the same height from its own bottom while the notice
   is up, and the words move with it. */
body[data-ck-open="1"] .frm--first { padding-bottom: calc(clamp(2rem,7vw,4rem) + var(--ck-h)); }
/* Same for the reading room's own bottom bar and the studio doors: any
   screen that pins something to the bottom of the viewport. */
body[data-ck-open="1"] .rmbar, body[data-ck-open="1"] .lbar { bottom: var(--ck-h); }
body[data-ck-open="1"] .cookies { animation: ck-rise 320ms var(--e-silk) both; }
@keyframes ck-rise { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body[data-ck-open="1"] .cookies { animation: none; }
}

/* The Journal and The World reuse the card grid the About page uses.
   A card whose title is a link should not look like a paragraph with a
   link in it. */
.way h3 a { color: inherit; text-decoration: none; }
.way h3 a:hover { color: var(--accent); }
.way h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The desk's writing screens use the CMS field styles outside a .cms
   block in one place — the note field in the save bar — and the file
   input needs to be legible rather than the browser's default grey. */
.cms input[type="file"], .input[type="file"] { padding: .45rem .5rem; }

/* A player sitting in a settings row should fill the room it is given
   rather than the browser's default 300px. */
.crow audio { width: 100%; }

/* A picture on a post. Capped so a tall photograph cannot push the
   conversation off the screen, and given the same corner as everything
   else it sits beside. */
.post__pic { display: block; margin-top: var(--s-3); }
.post__pic img {
  width: 100%; height: auto; max-height: 32rem; object-fit: cover;
  border-radius: var(--r-3); background: var(--sunk);
  border: 1px solid var(--line);
}
.composer__pic { margin-top: var(--s-3); }
.composer__pic summary {
  cursor: pointer; font-size: var(--t-small); color: var(--ink-2);
  min-height: 2.75rem; display: flex; align-items: center;
}
.composer__pic[open] summary { margin-bottom: var(--s-3); }

/* ══════════════════════════════════════════════════════════════════════
   GIVING THE BOOK TO SOMEBODY ELSE

   The gift screens, and the handful of form pieces they share with the
   pages that were already here — /forgot, /reset and now /redeem all
   used .formwrap and .hint, and neither had ever been given a rule. A
   class that exists in the markup and nowhere in the stylesheet is not a
   neutral omission: it is a page that looks unfinished on a phone.
   ══════════════════════════════════════════════════════════════════════ */

.formwrap {
  width: 100%; max-width: 28rem;
  margin: clamp(2.5rem, 8vw, 5rem) auto clamp(3rem, 10vw, 6rem);
  padding: 0 var(--s-4, 1.25rem);
}
.formwrap h1 { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
.formwrap > p { color: var(--ink-2); margin: 0 0 var(--s-4); }
.formwrap .formfoot {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--ink-2);
}

/* The sentence under a field that says what it is for. Quiet, and never
   between the label and the box it describes. */
.hint {
  display: block; margin-top: .4rem;
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
}

.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.plainlist li { padding-left: 1.1rem; position: relative; color: var(--ink-2); }
.plainlist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent);
}

/* Any wide table gets its own sideways scroll rather than pushing the
   page out. A desk read on a laptop in a café is a real place. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── the gift form ──────────────────────────────────────────────────── */

.giftform { max-width: 40rem; margin-top: var(--s-5); }
.giftset {
  border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--s-4); margin: 0 0 var(--s-4);
}
.giftset legend {
  padding: 0 .5rem; font-size: var(--t-small); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.giftpicks { display: grid; gap: var(--s-3); }

/* A choice you make by pressing the whole card, not by hitting a nine
   pixel circle. The circle is still there and still the control — it is
   the accessible one — the card is simply the label wrapped round it. */
.giftpick, .giftwhen { display: block; cursor: pointer; }
.giftpick input, .giftwhen input { position: absolute; opacity: 0; pointer-events: none; }
.giftpick__b, .giftwhen > span {
  display: block; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--sunk);
  transition: border-color 160ms var(--e-silk), background 160ms var(--e-silk);
}
.giftwhen { margin-bottom: var(--s-3); }
.giftpick__b b, .giftwhen b { display: block; }
.giftpick__b i, .giftwhen i {
  display: block; font-style: normal; color: var(--ink-2);
  font-size: var(--t-small); margin-top: .15rem;
}
.giftpick__b span { display: block; color: var(--ink-2); font-size: var(--t-small); margin-top: .3rem; }
.giftpick:hover .giftpick__b, .giftwhen:hover > span { border-color: var(--ink-2); }
.giftpick input:checked + .giftpick__b,
.giftwhen input:checked + span {
  border-color: var(--accent); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Pressing Tab must show where you are, on the card and not on a hidden
   input nobody can see. */
.giftpick input:focus-visible + .giftpick__b,
.giftwhen input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.giftform textarea {
  width: 100%; min-height: 5.5rem; resize: vertical;
  font: inherit; color: inherit;
  padding: .7rem .8rem;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-2);
}
.giftform textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.giftfacts { margin-top: var(--s-6); max-width: 40rem; }
.giftfacts h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.giftfacts .fineline { margin-top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  .giftpick__b, .giftwhen > span { transition: none; }
}

/* On a wide screen the promise sits beside the form rather than a
   thousand pixels below it, where somebody deciding whether to buy a
   present for a person they like would have to scroll past the payment
   button to find out what the present is. Below that width it goes back
   under, in the order it reads. */
.giftlay { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 62rem) {
  .giftlay { grid-template-columns: minmax(0, 40rem) minmax(0, 24rem); gap: var(--s-6); }
  .giftfacts { margin-top: var(--s-5); position: sticky; top: 6rem; }
}

/* `.field` is display:flex, and a display rule beats the browser's own
   `[hidden] { display: none }` — so hiding a field with el.hidden did
   nothing at all and the date box sat there under "Send it to them now"
   asking a question nobody had been asked. Say it once, loudly, for the
   two fields on this form that come and go. */
.giftform [hidden] { display: none !important; }

/* The radios inside the choice cards are taken out of the flow. Without a
   positioned parent they are positioned against the page instead, which
   stacks every one of them in the same invisible spot in a corner. */
.giftpick, .giftwhen { position: relative; }

/* The label is what a person presses, so it is what must look pressable. */
.giftpick__b, .giftwhen > span { -webkit-tap-highlight-color: transparent; }

/* The gifts table. Five columns on a desk screen that is a thousand
   pixels wide, and the last of them is the only control on the row — so
   it is a fold-away rather than a form sitting open, and every cell
   wraps instead of pushing its neighbours off the right-hand edge. */
.dtable td { vertical-align: top; }
.gnote { display: block; max-width: 26rem; }
.reissue summary {
  cursor: pointer; font-size: var(--t-small); color: var(--ink-2);
  min-height: 2.75rem; display: flex; align-items: center; white-space: nowrap;
}
.reissue[open] summary { color: var(--ink); margin-bottom: var(--s-2, .5rem); }
.reissue form { display: grid; gap: .4rem; min-width: 13rem; }
.reissue .input { min-height: 2.5rem; }
/* A long address is a long word as far as the browser is concerned, and
   one of them widens the whole table until the row's own control is off
   the screen. Let it break. */
.dtable td:nth-child(2) { max-width: 22rem; overflow-wrap: anywhere; }
.gnote { max-width: 22rem; }
.dtable td:nth-child(2) { max-width: 18rem; }
.dtable td:nth-child(4) .meta { display: inline-block; max-width: 13rem; overflow-wrap: anywhere; }
.reissue form { min-width: 11rem; }

/* ══════════════════════════════════════════════════════════════════════
   THE DESK'S VISITOR BARS, AND THE QUESTIONS AT THE FOOT OF AN ESSAY
   ══════════════════════════════════════════════════════════════════════ */

/* A number is a number; a bar is a comparison. On a table of fifteen
   referrers the bar is the whole point — it is what makes the one that
   matters visible without reading fifteen figures. */
.rbar {
  display: block; height: .55rem; border-radius: 999px;
  background: var(--sunk); overflow: hidden;
}
.rbar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent); opacity: .85;
}

/* The questions an essay answers, at the foot of it. Printed for a
   person first — the markup that lets a machine quote them is built from
   these exact words, and an answer that exists only in the markup is the
   one thing in this whole area that gets a site punished. */
.qa { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.qa h2 { font-size: var(--t-h3); margin: 0 0 var(--s-4); }
.qa details {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  cursor: pointer; padding: var(--s-3) 0;
  font-weight: 600; min-height: 2.75rem; display: flex; align-items: center;
}
.qa summary::marker { color: var(--accent); }
.qa details > div { padding: 0 0 var(--s-4); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   AN ESSAY: WHAT IS AROUND IT, AND WHAT IS UNDER IT
   ══════════════════════════════════════════════════════════════════════ */

.essayhead { margin: 0 0 var(--s-4); }

/* A map into a long piece. Under three headings there is nothing to map
   and the markup is not printed at all. */
.toc {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--accent);
  background: var(--sunk);
  border-radius: 0 var(--r-3) var(--r-3) 0;
}
.toc b { display: block; font-size: var(--t-small); letter-spacing: .06em;
         text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.toc li { line-height: 1.4; }
.toc--3 { margin-left: 1rem; font-size: var(--t-small); }
.toc a { color: inherit; text-decoration-color: var(--line); }
.toc a:hover { color: var(--accent); }

/* A heading you can link to. The mark only appears when somebody is
   looking for it. */
.legal h2, .legal h3 { scroll-margin-top: 6rem; }

/* Sharing. Eight plain links and one button — no script from anybody
   else, so nothing here reports that this page was read. */
.share { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.share__r { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-3); }
.share__b {
  font: inherit; font-size: var(--t-small); cursor: pointer;
  padding: .55rem .9rem; min-height: 2.75rem; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-2); text-decoration: none;
}
.share__b:hover { border-color: var(--accent); color: var(--accent); }
.share__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the discussion ──────────────────────────────────────────────────── */

.disc { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.disc > h2 { font-size: var(--t-h3); margin: 0 0 var(--s-4); }

.cmlist { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); }
.cm { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sunk); }
.cm--gone { opacity: .6; }
.cm__h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
/* A comment is plain text, so it must never collapse the spacing a
   person typed — and a pasted address must wrap rather than widen the
   page on a phone. */
.cm__b { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm__f { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--s-3); }
.cm__report { font-size: var(--t-small); color: var(--ink-3); text-decoration: none; }
.cm__report:hover { color: var(--warn); }
.input--sm { min-height: 2.5rem; font-size: var(--t-small); max-width: 16rem; }

.cmform textarea {
  width: 100%; min-height: 6rem; resize: vertical; font: inherit; color: inherit;
  padding: .7rem .8rem; margin-top: .4rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2);
}
.cmform textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmform__f {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-3);
}
.cmform__f .hint { flex: 1 1 18rem; margin: 0; }
.cmjoin {
  padding: var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-3);
  color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}

/* ── the foot of an essay ─────────────────────────────────────────────
   The most valuable person on this site is the stranger who arrived from
   a search and read to the bottom. Until this existed, the bottom of the
   page offered them a footer. */

.essaycta {
  margin-top: var(--s-7); padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--sunk);
}
.essaycta p { margin: 0 0 var(--s-4); color: var(--ink-2); max-width: 46ch; }

.byline {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.byline .meta { display: block; }
.byline p { margin: .3rem 0 0; color: var(--ink-2); max-width: 60ch; }

.nextup { margin-top: var(--s-7); }
.nextup .sec__label { display: block; margin-bottom: var(--s-4); }

/* ── the name on the picture ──────────────────────────────────────────
   Faint, over the reader's own video, and moved by the page's script
   every twenty seconds so it cannot be cropped off or hidden under a
   window in a corner. It never covers a control and never takes a click:
   pointer-events are off, so it is not in the way of anything. */
.vwrap { position: relative; }
.vmark {
  position: absolute; top: 6%; left: 6%;
  pointer-events: none; user-select: none;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: clamp(.6rem, 1.4vw, .78rem);
  letter-spacing: .04em; white-space: nowrap;
  color: rgba(255,255,255,.34);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  transition: top 600ms ease, left 600ms ease;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .vmark { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   WHAT THE SERVER RENDERS THAT THE PROTOTYPE NEVER DID.
   Found by scripts/style-audit.mjs, which walks every page in a real
   browser, collects every class the server actually puts on the page and
   compares it with every class this stylesheet defines. Nine classes were
   being rendered with no rule at all — which is why a row of labels,
   titles and buttons arrived as one unbroken sentence.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- the fixed header, cleared ----------------------------------------
   .chrome is position:fixed, so it is out of the flow and sits over
   whatever begins the page. The prototype could ignore that because every
   one of its screens opened on a painted hero the header floats above.
   The server has pages that do not — Billing, Settings, Help — and on
   those the first heading was drawn straight through the wordmark.
   A page that opens on a hero still gets nothing, deliberately. */
main#view{padding-top:4rem}
main#view[data-hero="true"]{padding-top:0}

/* ---- the three ways in, on the Studio home ----------------------------
   Rendered as .upn/.upn__k/.upn__t/.upn__m; the stylesheet only ever had
   .up/.up__k/.up__b. Nothing matched, so four inline spans ran together
   as "READTHE ECHO OF THE ABYSSCHAPTER 1 · 3 MIN". */
.upn{display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);
  min-height:3.6rem;flex-wrap:wrap}
.upn:first-child{border-top:0}
.upn__k{flex:none;width:4.5rem;color:var(--ink-3);text-transform:uppercase}
.upn__t{flex:1 1 12rem;min-width:0;font-size:var(--t-ui);color:var(--ink)}
.upn__m{flex:none;color:var(--ink-3);white-space:nowrap}
.upn .btn{flex:none;margin-left:auto}
/* On a phone the label keeps its column and the rest stacks under it,
   rather than four things fighting over 390 pixels. */
@media (max-width:34rem){
  .upn{align-items:flex-start;gap:var(--s-2) var(--s-3)}
  .upn__t{flex:1 1 100%;order:2}
  .upn__m{order:3}
  .upn .btn{order:4;margin-left:0}
}

/* ---- section head, lede and actions -----------------------------------
   Used on the community, search and not-found pages. */
.eyebrow{display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--accent);opacity:.8}
h1.sec__h,.sec__h{font-family:var(--f-display);font-size:var(--t-h2);
  letter-spacing:var(--tr-display);line-height:var(--lh-display);max-width:24ch}
.sec__a{display:flex;flex-wrap:wrap;gap:var(--s-3);
  align-items:center;margin-top:var(--s-5)}

/* ---- the wordmark's fallback -----------------------------------------
   Only ever seen if public/brand/logo.svg cannot be read. It says the
   name plainly rather than imitating the drawing. */
.brand__fb{font-family:var(--f-display);font-size:1.1rem;letter-spacing:.06em}

/* ---- the account menu -------------------------------------------------
   The design has carried a styled .menu dropdown since the prototype and
   this server never rendered one: the avatar was a plain link, and there
   was no way to sign out anywhere on the site. It is <details> so it needs
   no script — .menu is position:absolute, so the summary's parent has to
   be the thing it hangs from. */
.me{position:relative}
.me>summary{list-style:none;cursor:pointer}
.me>summary::-webkit-details-marker{display:none}
.me>summary::marker{content:""}
.me[open]>summary{background:var(--sunk)}
.chrome[data-over-art="true"] .me[open]>summary{background:rgba(232,230,225,.12)}
/* A menu inside a fixed header must not be clipped by it. */
.me .menu{position:absolute;right:0;top:calc(100% + .4rem)}

/* ---- the phone menu ---------------------------------------------------
   It used to be a hardcoded list of public pages, so a signed-in reader on
   a phone had no way to reach their own Studio and no way to sign out. It
   is built from the same nav the header uses, plus the doors. */
.sheet__h{font-family:var(--f-meta);font-size:var(--t-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:var(--s-5)}
.sheet nav form{margin-top:var(--s-2)}
.sheet nav button{font-family:var(--f-display);font-size:1.75rem;
  letter-spacing:var(--tr-display);border:0;background:transparent;padding:0;
  color:var(--ink-2);cursor:pointer;text-align:left;min-height:2.75rem}
.sheet nav button:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   RULES THAT WERE WRITTEN AND THEN NEVER SERVED.
   public/css/app.css existed, was maintained, and was linked by nothing:
   every page loads /app.css, which is public/app.css. So .pagetitle,
   .section, .kv, .hero__acts, .plan__fine, .longform, .helpsearch and the
   help accordion had no rules at all on the live site — which is why
   Billing had no space under the header and Help had no accordion.
   Brought across here, into the file that is actually built into the
   stylesheet the browser loads. The orphan is deleted.
   ═══════════════════════════════════════════════════════════════════════ */
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
/* padding-block, NOT the padding shorthand: .section and .wrap sit on the
   same element and a shorthand here sets padding-inline to 0, which took
   the page gutter away and pushed every heading flat against the left
   edge of a phone. */
.section{padding-block:var(--s-8);border-top:1px solid var(--line)}
h1.pagetitle,.section h2{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display)}
.section__lede{margin-top:var(--s-4);color:var(--ink-2);max-width:var(--measure);font-size:var(--t-lead)}
.kv{display:grid;gap:.6rem;margin-top:var(--s-4)}
.kv div{display:flex;justify-content:space-between;gap:var(--s-4);
  border-bottom:1px solid var(--line);padding-bottom:.6rem}
.kv dt{color:var(--ink-3);font-size:var(--t-small)}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.plan__fine{margin-top:var(--s-6);color:var(--ink-3);font-size:var(--t-small);text-align:center}
/* ---- help ---- */
.helpsearch{display:flex;gap:var(--s-3);margin-top:var(--s-5);max-width:34rem}
.helpsearch input{flex:1;font:inherit;min-height:2.875rem;padding:.6rem .8rem;
  border-radius:var(--r-3);border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;gap:var(--s-3);cursor:pointer;
  padding:var(--s-4) 0;min-height:3rem;list-style:none;font-size:1.0625rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-size:1.25rem;
  transition:transform var(--d-settle) var(--e-silk)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--accent)}
.faq__a{padding:0 0 var(--s-5);color:var(--ink-2);line-height:1.65;max-width:60ch}
.faq__a p+p{margin-top:.9em}
.faq__a a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
h1.pagetitle{font-family:var(--f-display);font-size:var(--t-h2);letter-spacing:var(--tr-display);
  line-height:var(--lh-display)}
.longform{margin-top:var(--s-5);max-width:var(--measure);color:var(--ink-2);
  font-family:var(--f-read);font-size:var(--t-read);line-height:var(--lh-read)}
.longform p+p{margin-top:1.2em}
.faq__a a{min-height:2.75rem;align-items:center}
.plan__fine a,.section__lede a,.longform a{display:inline-flex;align-items:center;min-height:2.75rem}
/* ═══════════════════════════════════════════════════════════════════════
   THE TYPOGRAPHIC PASS.
   Measured by scripts/style-audit.py across five kinds of reader at four
   widths. Three things were wrong on every page that is not the reading
   room, and all three are the difference between a site that reads as
   made and one that reads as assembled.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 1 · NOTHING RUNS PAST A COMFORTABLE LINE ------------------------
   435 blocks of prose were running 100 to 128 characters wide — most of
   them on a tablet, where the phone's care (@media max-width:760px) stops
   applying and the desktop's narrow columns have not started. A reader's
   eye loses the start of the next line past about 75 characters; at 128
   it re-reads the same line twice and blames itself.

   63ch is the measure this design already declares for its body copy.
   These blocks are supporting copy, so they take a slightly looser 68 and
   never more. */
:root{--measure-copy:68ch}
.fineline,.field__note,.composer__note,.hit__shut,.plan__fine,
.callout,.notice,.empty,.hint,.frm__hint,.cms__reads,
.panel>p,.pane>p,.doors p,.faq__a,.sec__lede,.section__lede{
  max-width:var(--measure-copy)}
/* A textarea 111 characters wide is a wall to write into as well as to
   read. */
.composer textarea,.field textarea,textarea{max-width:min(100%,var(--measure-copy))}
/* Anything centred keeps its centring while it is capped. */
.fineline,.plan__fine{margin-inline:auto}

/* ---- 2 · A SENTENCE IS NEVER SET IN TRACKED UPPERCASE ----------------
   .fineline and .field__note are the meta face: uppercase, letter-spaced,
   made for three-word labels. They are used for whole sentences — "Cancel
   in one click · Read Chapter One before you pay · Payment handled
   entirely by Stripe · Every price adjusts to the country you read from"
   — set in caps, tracked at 1.08px and 128 characters long.

   The phone stylesheet already undoes this, with a comment saying it is
   unreadable. It is unreadable at every width; the phone is only where it
   was noticed. So the correction moves out of the phone block and applies
   everywhere. Labels keep their tracking; sentences do not. */
.fineline{font-family:var(--f-ui);font-size:.8125rem;letter-spacing:0;
  text-transform:none;line-height:1.7;color:var(--ink-3)}
.field__note,.composer__note{font-family:var(--f-ui);font-size:.8125rem;
  letter-spacing:0;text-transform:none;line-height:1.65}
/* A run of sentences in the meta face on a desk screen, same reason. */
p.meta{letter-spacing:.02em;line-height:1.65}

/* ---- 3 · THE PHONE'S OWN NAVIGATION IS LEGIBLE -----------------------
   The six Studio doors are the whole navigation on a phone, set at 12px
   in --ink-3, which measured 3.3:1 against the dock — under the 4.5:1 a
   reader needs at that size, and this site has a person in it who cannot
   see small grey text. --ink-2 measures 7.4:1 and looks the same to
   somebody who was not struggling.

   A locked door dropped to opacity .55, which took Listen and Watch to
   1.8:1 — invisible, on the two doors most likely to be bought. A door
   that is shut still has to be readable; it is the lock that says it is
   shut, not the fog. */
.sdock .sdoor{color:var(--ink-2)}
.sdock .sdoor--shut{opacity:1;color:var(--ink-3)}
.sdock .sdoor--shut .sdoor__lock{opacity:.9}

/* ---- the last of the long lines ---------------------------------------
   Ninety-two blocks of supporting copy were still running past 88
   characters on a tablet and a wide laptop — bare <p> inside panels, the
   World's notes, the desk's explanations. A paragraph with no class of
   its own is, by definition, running text, and running text has a
   measure. Anything that genuinely wants the full width says so with a
   class and keeps it. */
main#view p:not([class]),
main#view li:not([class]) > p:not([class]),
.faq summary,.faq__item summary{max-width:var(--measure-copy)}

p.meta,.cms__reads{max-width:var(--measure-copy)}