/* ==========================================================================
   The Treatment Tapes — site stylesheet
   Consumes tapes-tokens.css. Nothing here defines a raw colour, radius,
   duration or type step; every value comes from a token.

   Order:  1 base · 2 utilities · 3 chrome · 4 shared blocks
           5 home · 6 episode · 7 index & article · 8 motion
   ========================================================================== */

/* ---------------------------------------------------------------- 1 base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--steel-deep);
  font-family:var(--ui);font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  margin:0;font-family:var(--disp);font-weight:300;color:var(--ink);
  letter-spacing:-.022em;line-height:1.08;text-wrap:balance;
  font-variant-ligatures:none;
}
p{margin:0}
figure{margin:0}   /* the UA default is 1em 40px, which ate 80px of the hero portrait */
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--powder);color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-family:var(--label);font-weight:460;font-size:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;
}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------------------------------------------------------- 2 utilities */
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--measure)}

/* the paper grain — a page-level texture, never per-section */
.grain{position:relative}
.grain::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--grain-opacity);background-image:var(--grain);
}
.grain>*{position:relative;z-index:1}

/* the micro-label: a rust tick, then tracked mono. The brand's signature. */
.lab{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--label);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--steel);
}
.lab::before{content:'';width:18px;height:2px;background:var(--rust);flex:none}
.lab--bare::before{display:none}
.lab--center{justify-content:center}
.lab--ink{color:var(--on-ink-mute)}

.mono{font-family:var(--label-figures);font-weight:460;font-variant-numeric:tabular-nums}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* buttons — sharp rectangles. The deliberate break from TeleTonicMD's pills. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ui);font-size:.71875rem;font-weight:600;
  letter-spacing:var(--track-btn);text-transform:uppercase;
  padding:14px 24px;border-radius:var(--r-lg);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:80ms}
.btn svg{width:14px;height:14px;flex:none}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--navy);color:var(--paper)}
.btn--line{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink);background:rgba(17,28,46,.045)}
.btn--pale{background:var(--paper);color:var(--ink)}
.btn--pale:hover{background:var(--card)}
.btn--ghost-ink{border-color:var(--line-ink-str);color:var(--on-ink)}
.btn--ghost-ink:hover{border-color:var(--on-ink);background:rgba(242,246,250,.07)}
.btn--sm{padding:10px 16px;font-size:.6875rem}
/* 320px is the narrowest width this site supports, and it is narrower than
   every current phone. Only there do the buttons give up some padding, so
   nothing changes on a real device. */
@media (max-width:359px){.btn{padding-left:16px;padding-right:16px}}

/* the quiet text link, with the parent brand's underline behaviour */
.tlink{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-sm);font-weight:600;color:var(--navy);
  border-bottom:1px solid rgba(28,53,87,.28);padding-bottom:2px;
  transition:color var(--d-fast) ease,border-color var(--d-fast) ease;
}
.tlink:hover{color:var(--rust);border-bottom-color:var(--rust)}
.tlink svg{width:14px;height:14px}

/* tags and chips */
.tag{
  display:inline-block;font-family:var(--label);font-size:var(--t-label);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--rust-tint);color:var(--rust);border:1px solid var(--rust-pale);
}
.tag--ink{background:rgba(154,78,51,.2);color:var(--rust-ink);border-color:rgba(154,78,51,.45)}
.tag--quiet{background:transparent;color:var(--steel);border-color:var(--line-strong)}

/* section heads */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.head h2{font-size:var(--t-h2);margin-top:16px}
.head p.deck{font-size:var(--t-body);line-height:1.72;color:var(--steel-deep);max-width:48ch;margin-top:12px}

/* ------------------------------------------------------------- 3 chrome */
.notice{
  background:var(--sand);border-bottom:1px solid var(--sand-line);
  font-family:var(--label);font-weight:460;font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sand-text);
}
.notice .wrap{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;padding-block:9px}
.notice b{color:var(--sand-label);font-weight:500}
@media (max-width:640px){.notice{font-size:.59375rem;letter-spacing:.1em}.notice b{display:none}}

.hdr{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
}
.hdr .wrap{height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2.4vw,26px)}
/* The masthead lockup is option C, "Noir" (design/logos/options), in the
   header since 27 Sep 2026 while the owner chooses between the four: the
   cassette, the name, and the copper tape running out of the head opening,
   along the cassette's foot and into a short strand of DNA that leads into
   the tagline. tools/lockup.py writes both halves from the board's own
   drawing: the ART as cached files, one <picture> per ground, and the TYPE
   into header.html as live <text> pinned to the board's positions with
   textLength, so the name, the strand and the tagline finish on one vertical
   whatever the browser's metrics. Both fill the same box, so they cannot drift
   apart: the lockup scales as one piece or not at all.
   Colours: the art carries its own; the type takes --lk-name / --lk-tag,
   which sky.css re-grounds over the homepage sky (with the dark art). */
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.brand .lockup{position:relative;display:block;flex:none;width:317.78px;max-width:100%;
  aspect-ratio:317.78/45.44;--lk-name:var(--ink);--lk-tag:var(--steel)}
.lk-art,.lk-art img,.lk-type{position:absolute;inset:0;display:block;width:100%;height:100%}
.lk-art--dark,.lk-type--phone{display:none}
.lk-type{overflow:visible}
.lk-type text{letter-spacing:0;word-spacing:0;font-kerning:normal;text-transform:none;text-rendering:geometricPrecision}
.lk-name{font-family:var(--disp);font-weight:300;fill:var(--lk-name);transition:fill var(--d-fast) ease}
.lk-tag{font-family:var(--label);font-weight:500;fill:var(--lk-tag)}
.brand:hover .lockup{--lk-name:var(--navy)}
/* The phone lockup is its own drawing, not the desktop one shrunk: the
   tagline is relatively larger and the lines heavier, so it still reads at a
   20px name, and it keeps the tagline the old header dropped below 700px.
   At 244px it fits beside the nav toggle from 360px up; below that
   max-width lets the whole lockup give way (0.94x at 320px). */
@media (max-width:700px){
  .brand .lockup{width:244.33px;aspect-ratio:244.33/36.8}
  .lk-type--desk{display:none}
  .lk-type--phone{display:block}
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.2vw,26px)}
/* :not(.btn) matters. The header CTA is <a class="btn btn--solid btn--sm">, so
   an unscoped `.nav a` (0,1,1) outranks `.btn--solid` (0,1,0) and repaints the
   button's label --steel-deep on its own --ink ground: 2.14:1, on every page,
   on the site's primary call to action. Hover was worse at 2.07:1. Keep every
   .nav a rule below scoped away from buttons. */
.nav a:not(.btn){font-size:.8125rem;font-weight:500;color:var(--steel-deep);transition:color var(--d-fast) ease}
.nav a:not(.btn):hover{color:var(--rust)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink);font-weight:600}
.hdr .btn{margin-left:4px}
/* flex:none because the lockup is the part of the bar that gives way at 320px;
   the toggle keeps its 40px target. */
.navtoggle{
  display:none;margin-left:auto;width:40px;height:40px;flex:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--ink);cursor:pointer;
}
.navtoggle svg{width:18px;height:18px}
.navtoggle .x{display:none}
.navtoggle[aria-expanded="true"] .x{display:block}
.navtoggle[aria-expanded="true"] .m{display:none}
@media (max-width:900px){
  .navtoggle{display:inline-flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card);padding:6px var(--gutter) 18px;
  }
  .nav[hidden]{display:none}
  /* Closed from the first frame. The drawer used to be shut by tapes.js,
     which is deferred and runs after the whole document has parsed -- so on a
     slow phone connection the menu painted OPEN over the page until then.
     .js-nav is set by one line in <head>, before anything paints, and is its
     own class rather than a swap of .no-js, which the reveals depend on. If
     tapes.js never runs, nothing could open a closed menu, so the same line
     takes the class back off at load and the drawer is simply open, as it
     always was without JavaScript. */
  .js-nav .navtoggle[aria-expanded="false"] ~ .nav{display:none}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
  .nav .btn{margin:16px 0 0;width:100%}
}

/* masthead meta strip — the publication signal under the header */

/* footer */
.ftr{background:var(--ink);color:var(--on-ink-mute);padding:clamp(2.75rem,5.5vw,4.5rem) 0 1.875rem;margin-top:auto}
/* The ambience pill is fixed bottom-left (ambience.css: 14px in, 34px tall,
   above the home indicator where there is one). Below ~1400px the footer's
   last line starts left of the pill's right edge, so at full scroll the pill
   sat on top of it -- measured on a 393px phone, pill 612-646 over the line at
   614-630. Lift the last line clear of it; at 1400 and up the column starts
   well to the right of the pill and the padding is what it always was. */
@media (max-width:1399.98px){
  .ftr{padding-bottom:max(1.875rem, calc(3.75rem + env(safe-area-inset-bottom)))}
}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));gap:clamp(1.5rem,4vw,2.875rem)}
@media (max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.ftr-grid{grid-template-columns:1fr}}
.ftr h2{font-family:var(--label);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--on-ink-faint);margin-bottom:16px}
.ftr li{margin-bottom:10px}
.ftr a{font-size:var(--t-sm);color:var(--on-ink-body);transition:color var(--d-fast) ease}
.ftr a:hover{color:var(--on-ink)}
/* The cover art stands where the 28px mark + wordmark lockup used to. The
   artwork already carries the show's name, so the text lockup was saying it
   twice; the name still appears as text in .ftr-btm's copyright line, so
   nothing is lost to a crawler or a screen reader.
   13.75rem = 220px, above the 200px floor where this drawing's constellation
   stops resolving. That floor was MEASURED on the illustration itself by
   rendering it at 120/160/200/240/280 -- an earlier 120px figure came from the
   vector mark's trail stars and does not apply to her artwork, whose stars are
   finer.
   No frame and no ground of its own: the artwork's ink is the same --ink the
   footer sits on, so it joins the footer seamlessly and its own hairline
   supplies the edge. */
.ftr-art{display:block;width:min(13.75rem,100%);height:auto;border-radius:var(--r-sm)}
.ftr-blurb{font-size:.84375rem;line-height:1.65;color:var(--on-ink-faint);margin-top:14px;max-width:34ch}
.ftr-btm{
  margin-top:clamp(2rem,4.5vw,3.25rem);padding-top:20px;border-top:1px solid var(--line-ink);
  display:flex;justify-content:space-between;gap:10px 26px;flex-wrap:wrap;
  font-family:var(--label);font-weight:460;font-size:.59375rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-ink-faint);
}
.ftr-btm a{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:var(--on-ink-mute)}

/* Page shell: footer down on short pages, header sticky on long ones.
   html carries the definite height that body's min-height:100% resolves
   against. body must NOT get one: a definite height on the flex container
   caps the sticky containing block at one viewport while its children
   overflow it, so .hdr stuck for one screen and then scrolled away for good.
   min-height grows with content; height does not. */
html{height:100%}
body{display:flex;flex-direction:column;min-height:100%}
main{flex:1 0 auto}

/* ------------------------------------------------------ 4 shared blocks */

/* newsletter — the single warm surface on the site */
.news{background:var(--sand);border-top:1px solid var(--sand-line);border-bottom:1px solid var(--sand-line);
  padding:clamp(2.75rem,6vw,5rem) 0}
.news-in{max-width:40rem;margin:0 auto;text-align:center;padding:0 var(--gutter)}
.news .lab{color:var(--sand-label);justify-content:center}
.news h2{font-size:clamp(1.6875rem,3.2vw,2.5rem);margin:18px 0 14px}
.news p{font-size:.96875rem;line-height:1.7;color:var(--sand-text);max-width:46ch;margin:0 auto}
.news form{display:flex;gap:14px;margin:30px auto 0;max-width:29rem;align-items:flex-end}
.news label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.news input{
  flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--sand-line);
  padding:11px 2px;font-family:var(--ui);font-size:.96875rem;color:var(--ink);
  outline:none;transition:border-color var(--d-fast) ease;
}
.news input::placeholder{color:var(--sand-label)}
.news input:focus{border-bottom-color:var(--rust)}
.news .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.news small{display:block;margin-top:22px;font-family:var(--label);font-weight:460;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand-label);line-height:1.8}
.news .msg{margin-top:18px;font-size:.90625rem;color:var(--sand-text);min-height:1.4em}
@media (max-width:520px){.news form{flex-direction:column;align-items:stretch}}

/* platform grid */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(1.75rem,4vw,2.75rem)}
.plat{background:var(--card);padding:22px 20px;display:flex;align-items:center;gap:14px;
  transition:background-color var(--d-base) var(--ease)}
.plat:hover{background:var(--paper)}
.plat:hover .plat-ic{color:var(--rust);border-color:var(--rust-pale)}
.plat-ic{flex:none;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  transition:color var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.plat-ic svg{width:19px;height:19px}
.plat b{display:block;font-size:.90625rem;font-weight:550;color:var(--ink);line-height:1.3}
.plat span{display:block;font-family:var(--label);font-weight:460;font-size:var(--t-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);margin-top:4px}

/* player — one component, used on the dark band and on paper */
.player{display:flex;align-items:center;gap:16px}
.play{
  flex:none;width:52px;height:52px;border-radius:var(--r-round);
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color var(--d-base) var(--ease),border-color var(--d-base) var(--ease),
             color var(--d-base) var(--ease);
}
.play svg{width:15px;height:15px;margin-left:2px}
.play .pause{display:none}
.play[aria-pressed="true"] .pause{display:block;margin-left:0}
.play[aria-pressed="true"] .tri{display:none}
.play:hover{background:var(--rust);border-color:var(--rust);color:var(--card)}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:38px;min-width:0}
.wave i{flex:1;background:var(--line-strong);border-radius:1px;display:block;
  transition:background-color var(--d-fast) linear}
.wave i.on{background:var(--rust)}
.ptime{font-family:var(--label-figures);font-weight:460;font-size:.6875rem;letter-spacing:.08em;color:var(--steel);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* the same player, inverted for the dark band */
.on-ink .play{border-color:var(--line-ink-str);color:var(--on-ink)}
.on-ink .play:hover{background:var(--rust);border-color:var(--rust);color:var(--on-ink)}
.on-ink .wave i{background:rgba(198,223,242,.34)}
.on-ink .wave i.on{background:var(--rust-ink)}
.on-ink .ptime{color:var(--on-ink-mute)}

/* --------------------------------------------------------------- 5 home */
.hero{padding:clamp(2.5rem,5.5vw,4.5rem) 0 0}
@media (max-width:900px){
  /* .hdr is position:sticky and measures 71px at EVERY width, while this hero's
     top padding resolves to 48px at 390px and 54px at 768px -- so its first
     child, the .lab line above the h1, rests under the bar and is clipped.
     Nothing to do with the artwork; it was simply noticed while the artwork
     briefly lived here. */
  .hero--film{padding-top:5.5rem}
}
.hero h1{font-size:var(--t-display);font-weight:200;line-height:.94;letter-spacing:-.038em;margin:22px 0 0}
.hero h1 em{font-style:italic;font-weight:300;color:var(--navy)}
.hero-dek{font-family:var(--disp);font-weight:300;font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  line-height:1.55;color:var(--steel-deep);max-width:52ch;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------------------------------------------------- the film hero
   A full-bleed looping tape, with the headline over it. The scrim is not
   decoration: measured against the brightest frame, the headline area sits at
   luminance 0.45, which is 2.09:1 for white text — unreadable. The gradient
   below is weighted left, where the type is, and thins to the right so the
   tape itself stays visible. Re-measure if the clip is ever re-graded. */
.hero--film{
  position:relative;isolation:isolate;background:var(--ink);
  display:flex;align-items:center;
  min-height:clamp(30rem,74vh,44rem);
  padding-block:clamp(3rem,7vw,5.5rem);overflow:hidden;
}
.hero-film{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block}
.hero-film::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,
      rgba(17,28,46,.94) 0%, rgba(17,28,46,.91) 30%, rgba(17,28,46,.72) 52%,
      rgba(17,28,46,.44) 72%, rgba(17,28,46,.34) 100%),
    /* Opaque ink for the first few percent, then let go. The constellation
       sky above ends on exactly this colour, so the photograph has to emerge
       FROM it rather than start at it: before this ramp existed the top edge
       of the cassette frame cut a hard horizontal line across the right half
       of the page — measured at 1440px, 17,28,46 above the boundary against
       70,79,93 one pixel below it.

       The emergence is now slower, and smooth. The ramp above let 20% of the
       photograph through by 11% of the way down, and the top of that frame
       is its brightest part -- the lit edge of the reel -- so a bright band
       rose 60-80px under the boundary and turned the seam into a dark line
       between two light ones. Held near-opaque a little longer, then eased,
       the photograph comes up out of the ground instead. From 44% down this
       is the ramp it always was. */
    linear-gradient(to bottom,
      rgba(17,28,46,1)    0%,   rgba(17,28,46,.995) 3%,
      rgba(17,28,46,.975) 7%,   rgba(17,28,46,.93)  11%,
      rgba(17,28,46,.85) 15.5%, rgba(17,28,46,.74)  20%,
      rgba(17,28,46,.60)  25%,  rgba(17,28,46,.46) 30.5%,
      rgba(17,28,46,.34) 36.5%, rgba(17,28,46,.22)  44%,
      rgba(17,28,46,.62) 100%);
}
@media (max-width:880px){
  /* Nowhere to hide type on a narrow screen — the scrim goes even across. */
  .hero-film::after{
    /* The same slower, smooth emergence from the ground; from 45% down,
       unchanged. */
    background:linear-gradient(to bottom,
      rgba(17,28,46,1)    0%,  rgba(17,28,46,.99)  4%,
      rgba(17,28,46,.965) 8.5%, rgba(17,28,46,.925) 13%,
      rgba(17,28,46,.88)  18%, rgba(17,28,46,.845) 25%,
      rgba(17,28,46,.815) 34%, rgba(17,28,46,.80)  45%,
      rgba(17,28,46,.90) 100%);
  }
}
.hero-film-in{position:relative;z-index:1;width:100%}
.hero--film h1{color:var(--on-ink);font-size:var(--t-display);font-weight:200;
  line-height:.94;letter-spacing:-.038em;margin:22px 0 0;max-width:14ch}
.hero--film h1 em{font-style:italic;font-weight:300;color:var(--paper-alt)}
.hero--film .lab{color:var(--on-ink-mute)}
.hero--film .lab::before{background:var(--rust-ink)}
.hero--film .hero-dek{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.62;
  color:var(--on-ink-body);max-width:46ch;margin-top:26px;
  padding-top:26px;border-top:1px solid var(--line-ink-str);
}
.hero--film .btn--solid{background:var(--paper);color:var(--ink)}
.hero--film .btn--solid:hover{background:var(--paper-alt);color:var(--ink)}
.hero--film .btn--line{color:var(--on-ink);border-color:var(--line-ink-str)}
.hero--film .btn--line:hover{border-color:var(--on-ink);background:rgba(242,246,250,.08)}

/* The stats rule moved out of the hero onto the linen, so it keeps the
   hairline-on-paper treatment it was designed for rather than being restyled
   for a dark ground. */
.hero-stats{background:var(--paper);padding-block:clamp(.75rem,1.8vw,1.5rem)}
.hero-stats .stats{margin-top:0;border-top:0;border-bottom:0}

/* No video for anyone who asked for less motion, and none on a connection
   that would rather not. Both fall back to the poster frame, which is frame
   one of the loop, so the still and the video agree exactly. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-film{background:var(--ink) url(/assets/video/hero-tape-poster.jpg) center/cover no-repeat}
}
html.save-data .hero-video{display:none}
html.save-data .hero-film{
  background:var(--ink) url(/assets/video/hero-tape-poster.jpg) center/cover no-repeat;
}

/* the file card — a cool duotone portrait in a hard rectangle.
   The stamp needs z-index: the img carries a filter, which makes it a stacking
   context painted in the same layer as the absolutely-positioned stamp. The img
   comes second in the DOM, so without this the photo paints over the stamp and
   "Fig. 01" is invisible — which it silently was from launch until Sept 2026. */
.file{border:1px solid var(--line);background:var(--card);padding:11px}
.file-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.file-img img{width:100%;height:100%;object-fit:cover;object-position:52% 16%;
  filter:grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.45) contrast(1.1) brightness(1.02)}
.file-stamp{position:absolute;z-index:1;top:10px;left:10px;font-family:var(--label);font-size:.5625rem;
  font-weight:550;letter-spacing:.16em;color:var(--rust);background:color-mix(in srgb, var(--paper) 94%, transparent);
  padding:4px 7px;border-radius:var(--r-sm)}
.file figcaption{font-family:var(--label);font-weight:460;font-size:.59375rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);line-height:1.7;padding:11px 2px 2px;border-top:1px solid var(--line);margin-top:11px}
.file figcaption b{color:var(--ink);font-weight:500;display:block}

/* Listen & watch: the show artwork beside the platform grid.
   The artwork is the owner's illustration and it is the only image on this site
   that must NOT be art-directed. .file-img crops 4:5 and .file-img img lays a
   duotone over it -- together they cropped "The Treatment" off both edges and
   then recoloured what survived. This block MUST stay below those two rules:
   .file-img--sq img and .file-img img have the same specificity, so source
   order is the only thing deciding it. Above .plats, where this first went, it
   silently lost. */
.listen{display:grid;grid-template-columns:14rem minmax(0,1fr);
  gap:clamp(1.5rem,4vw,2.75rem);align-items:start;margin-top:26px}
.file-img--sq{aspect-ratio:1/1;background:var(--ink)}
.file-img--sq img{object-fit:contain;object-position:50% 50%;filter:none}
/* .plats draws its hairlines as a 1px gap over a --line ground, so an empty
   cell is not empty -- it is a solid grey block. Six tiles therefore need a
   column count that divides six; auto-fit chose four in this narrower column
   and left two of them showing. Its top margin is for the full-width layout
   and here it just breaks the top alignment with the artwork. */
.listen .plats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
@media (max-width:1040px){.listen .plats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.listen{grid-template-columns:1fr;gap:1.75rem}
  .file--art{max-width:14rem}
  .listen .plats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.listen .plats{grid-template-columns:1fr}}

/* the stat rule */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:clamp(2.25rem,5vw,4rem)}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:20px 22px 20px 0;border-right:1px solid var(--line)}
.stats>.stat:last-child{border-right:0}
@media (max-width:720px){
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.stat b{display:block;font-family:var(--label);font-weight:460;font-size:clamp(1.375rem,2.6vw,1.875rem);
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.stat b small{font-size:.5em;letter-spacing:.06em}
.stat span{display:block;margin-top:9px;font-family:var(--label);font-weight:460;font-size:.59375rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}

/* the one dark band — the newest episode is the heaviest object on the page */
.band{background:var(--ink);color:var(--on-ink-body);padding:clamp(2.5rem,6vw,4.875rem) 0}
.band h2,.band h3{color:var(--on-ink)}
.plate h3,.plate h4{color:var(--on-ink)}
.band-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.75rem,5vw,3.875rem);align-items:start;margin-top:26px}
/* minmax(0,1fr), not 1fr. A bare 1fr is minmax(auto,1fr) and the auto floor
   is min-content, so the plate could not shrink below the longest word it
   contained: at 320px it sat at 328 inside a 284 track and scrolled the
   page. The two-column rule above already says minmax(0,...) for exactly
   this reason; the single-column fallback had been left bare. */
@media (max-width:880px){.band-grid{grid-template-columns:minmax(0,1fr)}}

/* the case plate — episode artwork, generated from number + title alone */
.plate{
  border:1px solid var(--line-ink-str);padding:clamp(1.5rem,3.4vw,2.125rem);
  background:linear-gradient(160deg,rgba(198,217,232,.06),rgba(198,217,232,0));
  aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-between;
}
/* The artwork variant is OPT-IN, and used on the homepage's featured band only.
   The episode pages keep the plain plate: the owner asked for the artwork on
   the featured card and then, seeing it in the episode rail, asked for that one
   back exactly as it was -- "i liked the plain version there". So the base rule
   above is untouched and this modifier carries the difference.
   It releases the 1:1 aspect, because a square plate holding a square picture
   plus the number and the title cannot fit its own contents. No border on the
   image: it already has a hairline frame drawn 5% inside its edge and .plate has
   one too, so a third rectangle made three concentric boxes. */
.plate--art{aspect-ratio:auto;justify-content:flex-start;
  gap:clamp(1.25rem,2.6vw,1.75rem)}
/* A flex item's default min-width is auto, so the plate was sized by the
   min-content width of the longest word inside it rather than by its column.
   At 320px that pushed it to 328 and scrolled the page. min-width:0 lets it
   shrink; overflow-wrap lets the word break instead of setting the floor. */
.plate,.plate>div,.plate .vr,.plate .vr div{min-width:0}
.plate,.plate dd,.plate dt,.plate h3{overflow-wrap:anywhere}
.plate--art .plate-art{display:block;width:100%;height:auto}
.plate--art>div:last-child{margin-top:auto}
.plate-no{font-family:var(--label);font-weight:410;font-size:clamp(3.25rem,8vw,5.75rem);
  color:var(--on-ink);letter-spacing:-.04em;line-height:.85;font-variant-numeric:tabular-nums}
.plate-no sup{font-size:.26em;vertical-align:super;letter-spacing:.18em;color:var(--rust-ink);
  font-weight:500;margin-right:6px}
.plate h3{font-family:var(--disp);font-size:clamp(1.4375rem,2.7vw,2rem);font-weight:300;line-height:1.12}
.plate-rule{width:44px;height:2px;background:var(--rust-ink);margin-bottom:16px}
.plate-sub{font-family:var(--label);font-weight:460;font-size:.59375rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--on-ink-faint);margin-top:14px}

/* claim / evidence / verdict — the spine of every episode */
.vr{border-top:1px solid var(--line-ink)}
.vr>div{display:grid;grid-template-columns:7.375rem minmax(0,1fr);gap:22px;padding:17px 0;
  border-bottom:1px solid var(--line-ink)}
@media (max-width:560px){.vr>div{grid-template-columns:1fr;gap:5px}}
.vr dt{font-family:var(--label);font-size:.59375rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--on-ink-faint);padding-top:4px}
.vr dd{margin:0;font-size:.9375rem;line-height:1.62;color:var(--on-ink-body)}
.vr dd b{color:var(--on-ink);font-weight:600}
.vr dd p{margin:0}
.vr dd p+p{margin-top:.7em}
.vr dd .tag{margin-bottom:9px}
/* the same spine on paper, for the episode page */
.vr--paper{border-top-color:var(--line)}
.vr--paper>div{border-bottom-color:var(--line)}
.vr--paper dt{color:var(--steel)}
.vr--paper dd{color:var(--steel-deep)}
.vr--paper dd b{color:var(--ink)}

.band .player{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-ink)}

/* the index table — the archive, and the format that scales to 100 episodes */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-family:var(--label);font-size:.59375rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--steel);
  padding:0 14px 12px 0;border-bottom:1px solid var(--line-strong)}
.tbl td{padding:18px 14px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;
  font-size:var(--t-sm);line-height:1.55;color:var(--steel-deep)}
.tbl tbody tr{transition:background-color var(--d-fast) ease}
.tbl tbody tr:hover{background:rgba(198,223,242,.46)}
.tbl .c-no{font-family:var(--label-figures);font-weight:460;font-size:.75rem;color:var(--rust);
  font-variant-numeric:tabular-nums;white-space:nowrap;width:4rem;padding-top:20px}
.tbl .c-ti a{font-family:var(--disp);font-size:1.1875rem;font-weight:400;color:var(--ink);
  letter-spacing:-.012em;line-height:1.25;display:block;transition:color var(--d-fast) ease}
.tbl tbody tr:hover .c-ti a{color:var(--navy)}
.tbl .c-ti span{display:block;font-family:var(--ui);font-size:.84375rem;color:var(--steel);
  letter-spacing:0;margin-top:5px;line-height:1.5}
.tbl .c-num{font-family:var(--label-figures);font-weight:460;font-size:.78125rem;font-variant-numeric:tabular-nums;
  color:var(--steel-deep);white-space:nowrap}
.tbl .c-num.is-latest{color:var(--rust)}
.tbl .c-num.is-soon{color:var(--steel)}
@media (max-width:760px){.tbl .col-hide{display:none}}

/* the method — a real four-step sequence, so the numbering means something */
/* --board always overrides this, so the base is only ever a fallback --
   but it was ice, and ice is not a ground on this site any more. */
.method{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2.75rem,6vw,5.25rem) 0}
.method-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.625rem,5vw,3.75rem);align-items:end}
@media (max-width:880px){.method-top{grid-template-columns:1fr;gap:1.25rem}}
.method-top h2{font-size:var(--t-h2);margin:16px 0 0;max-width:18ch}
.method-top p{font-size:var(--t-body);line-height:1.72;color:var(--steel-deep);max-width:52ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(1.875rem,4vw,3rem)}
@media (max-width:840px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);padding:clamp(1.375rem,2.6vw,1.875rem)}
.step-n{font-family:var(--label);font-size:.625rem;font-weight:500;letter-spacing:.19em;
  color:var(--rust);display:block;margin-bottom:16px}
.step h3{font-family:var(--disp);font-size:1.25rem;font-weight:400;margin-bottom:9px}
.step p{font-size:.875rem;line-height:1.62;color:var(--steel)}

/* host quote */
.host{display:grid;grid-template-columns:10.625rem minmax(0,1fr);gap:clamp(1.375rem,4vw,2.75rem);
  align-items:start;margin-top:clamp(2.125rem,4.4vw,3.5rem);padding-top:clamp(1.875rem,4vw,2.75rem);
  border-top:1px solid var(--line-strong)}
@media (max-width:640px){.host{grid-template-columns:1fr;gap:1.25rem}}
.host-img{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:var(--navy);max-width:10.625rem}
.host-img img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  filter:grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.4) contrast(1.14) brightness(.94)}
.host blockquote{margin:0;font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(1.1875rem,2.2vw,1.625rem);line-height:1.44;color:var(--ink);max-width:34ch}
.host cite{display:block;margin-top:18px;font-style:normal;font-family:var(--label);font-weight:460;font-size:.625rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}
.host cite b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------ 6 episode */
.ep-head{padding:clamp(2rem,4.5vw,3.25rem) 0 0}
.ep-head h1{font-size:clamp(2.125rem,5.4vw,4rem);font-weight:200;letter-spacing:-.035em;
  line-height:1;margin:18px 0 0}
.ep-sub{font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(1.0625rem,1.9vw,1.4375rem);line-height:1.45;color:var(--navy);margin-top:16px;max-width:40ch}
.ep-meta{display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:26px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--label);font-weight:460;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.ep-meta b{color:var(--ink);font-weight:500}

.ep-body{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;
  gap:clamp(2rem,5vw,4rem);align-items:start;padding:clamp(2rem,4.5vw,3.25rem) 0 0}
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), and that auto
   floor is min-content, so the column refuses to go narrower than its
   widest unbreakable child and the whole page scrolls sideways. Measured
   at 374px against a 320px viewport on every episode page. Same trap as
   .band-grid. */
@media (max-width:940px){.ep-body{grid-template-columns:minmax(0,1fr)}}
.ep-rail{position:sticky;top:calc(var(--header-h) + 1.75rem);display:grid;gap:1.5rem}
@media (max-width:940px){.ep-rail{position:static;order:-1}}
.rail-box{border:1px solid var(--line);background:var(--card);padding:20px}
.rail-box h2{font-family:var(--label);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.rail-box .plate{aspect-ratio:1/1;background:var(--ink);border-color:var(--ink);padding:20px}
.rail-links{display:grid;gap:9px}
.rail-links a{display:flex;align-items:center;gap:10px;font-size:.84375rem;font-weight:500;
  color:var(--steel-deep);transition:color var(--d-fast) ease}
.rail-links a:hover{color:var(--rust)}
.rail-links svg{width:16px;height:16px;color:var(--navy);flex:none}
.rail-links a:hover svg{color:var(--rust)}

/* the paper player on an episode page */
.ep-player{border:1px solid var(--line);background:var(--card);padding:20px 22px}
.ep-player .player{margin:0}

/* show notes prose */
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--t-h3);margin:2.5rem 0 .875rem;scroll-margin-top:calc(var(--header-h) + 1.25rem)}
.prose h3{font-size:var(--t-h4);font-weight:400;margin:1.875rem 0 .625rem}
.prose p{margin:0 0 1.25rem;font-size:var(--t-body);line-height:1.78;color:var(--steel-deep)}
.prose>p:first-child{margin-top:0}
.prose>p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1.375rem;padding-left:1.25rem;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.5rem 0;font-size:var(--t-body);line-height:1.72;color:var(--steel-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a:not(.btn):not(.tlink){color:var(--navy);border-bottom:1px solid rgba(28,53,87,.28);
  transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.prose a:not(.btn):not(.tlink):hover{color:var(--rust);border-bottom-color:var(--rust)}
/* the drop cap, inherited from site.css and recoloured */
.dropcap::first-letter{font-family:var(--disp);font-weight:300;color:var(--rust);
  float:left;font-size:3.5em;line-height:.82;padding:.04em .1em 0 0}
/* the pull quote, inherited and re-ruled */
.pull{margin:2.25rem 0;padding:2px 0 2px 1.5rem;border-left:2px solid var(--rust)}
.pull p{font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(1.1875rem,2.2vw,1.5rem);line-height:1.48;color:var(--ink);margin:0}
.pull cite{display:block;margin-top:.75rem;font-style:normal;font-family:var(--label);font-weight:460;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
/* quiet note panel */
.note{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--powder);
  padding:1.125rem 1.375rem;margin:1.75rem 0;font-size:.9375rem;line-height:1.7}
.note p:last-child{margin-bottom:0}
.note--warn{border-left-color:var(--rust);background:var(--rust-tint)}

/* Footnote markers in the body. A long-form episode cites forty papers, and a
   claim without a number beside it is an assertion. Superscript, rust, and a
   jump to the list rather than a per-item anchor: the list is read as a list. */
.prose .fn{font-family:var(--label);font-weight:460;font-size:.625rem;font-variant-numeric:tabular-nums;
  vertical-align:super;line-height:0;margin-left:2px;padding:0 1px;
  color:var(--rust);border-bottom:0}
.prose .fn::before{content:"["}
.prose .fn::after{content:"]"}
.prose .fn:hover{color:var(--navy);border-bottom:0}

/* the source list — numbered, because a citation list is a sequence */
.sources{counter-reset:src;margin-top:1rem}
.sources li{counter-increment:src;display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.6;color:var(--steel-deep)}
.sources li:last-child{border-bottom:1px solid var(--line)}
.sources li::before{content:counter(src,decimal-leading-zero);font-family:var(--label-figures);font-weight:460;
  font-size:.6875rem;color:var(--rust);padding-top:3px;font-variant-numeric:tabular-nums}
.sources cite{font-style:normal;color:var(--ink);font-weight:600;display:block}
.sources span{display:block;margin-top:3px;font-family:var(--label);font-weight:460;font-size:.625rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--steel)}
/* A DOI is a machine token with no break opportunities in it, and at 320px
   one is wider than the column. Breaking it anywhere is what every journal
   site does, and is better than scrolling the page sideways. */
.sources a{color:var(--navy);border-bottom:1px solid rgba(28,53,87,.28);
  overflow-wrap:anywhere}
.sources a:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* transcript */
.transcript{border:1px solid var(--line);background:var(--card);margin-top:1.5rem}
.transcript>summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-family:var(--label);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink);
}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary svg{width:14px;height:14px;color:var(--rust);transition:transform var(--d-base) var(--ease)}
.transcript[open]>summary svg{transform:rotate(90deg)}
.transcript>summary span{margin-left:auto;color:var(--steel);font-weight:400}
.transcript-body{padding:4px 20px 20px;border-top:1px solid var(--line)}
.tline{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:14px;padding:9px 0;
  font-size:.90625rem;line-height:1.7;color:var(--steel-deep)}
.tline time{font-family:var(--label-figures);font-weight:460;font-size:.6875rem;color:var(--steel);
  font-variant-numeric:tabular-nums;padding-top:4px}
.tline b{color:var(--ink);font-weight:600}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.25rem,5vw,3.5rem)}
@media (max-width:600px){.pager{grid-template-columns:1fr}}
.pager a,.pager span{background:var(--card);padding:20px 22px;display:block;
  transition:background-color var(--d-base) var(--ease)}
.pager a:hover{background:var(--paper)}
.pager .k{font-family:var(--label);font-weight:460;font-size:.59375rem;letter-spacing:.17em;text-transform:uppercase;color:var(--rust)}
.pager .t{font-family:var(--disp);font-size:1.125rem;font-weight:400;color:var(--ink);margin-top:7px;line-height:1.25}
.pager .next{text-align:right}
.pager span .k{color:var(--steel)}
.pager span .t{color:var(--steel)}

/* --------------------------------------------------- 7 index & article */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2rem);
  padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.filters button{
  font-family:var(--label);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--steel);
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease);
}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tbl tr[hidden]{display:none}
.empty{padding:2.5rem 0;font-family:var(--label);font-weight:460;font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)}

.article{padding:clamp(2.25rem,5vw,3.75rem) 0 clamp(2.5rem,6vw,4.5rem)}
.article-head{max-width:var(--measure);margin:0 0 clamp(1.75rem,4vw,2.75rem)}
.article-head h1{font-size:clamp(2.125rem,5.2vw,3.75rem);font-weight:200;letter-spacing:-.034em;
  line-height:1.02;margin:18px 0 0}
.article-lede{font-family:var(--disp);font-weight:300;font-size:clamp(1.0625rem,1.7vw,1.3125rem);
  line-height:1.55;color:var(--steel-deep);margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.article-meta{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:20px;
  font-family:var(--label);font-weight:460;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

/* the fact rail — inherited from the parent brand's bio page */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;max-width:var(--content);margin:0 auto}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.rail{position:sticky;top:calc(var(--header-h) + 1.75rem)}
@media (max-width:900px){.rail{position:static}}
.fact{padding:15px 0;border-bottom:1px solid var(--line)}
.fact:first-of-type{border-top:1px solid var(--line)}
.fact dt{font-family:var(--label);font-size:.59375rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:5px}
.fact dd{margin:0;font-family:var(--disp);font-size:1.0625rem;line-height:1.35;color:var(--ink)}
.rail-rule{width:32px;height:2px;background:var(--rust);margin-top:20px}

/* -------------------------------------------------------------- 8 motion
   One curve, three tiers, and a resting state that is already visible.
   Reveals only enhance an element that is legible without JavaScript. */
/* --reveal-delay is set per element by tapes.js as each batch crosses the
   viewport, so a group cascades top-to-bottom instead of appearing at once.
   It stayed 0ms from launch until Sept 2026 because nothing ever set it. */
.reveal{opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .btn:hover,.btn:active{transform:none}
}

/* ---- print: the source list is the point, so make it printable -------- */
@media print{
  .hdr,.ftr,.news,.plats,.pager,.notice,.ep-rail,.filters,.skip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .band{background:#fff;color:#000;border:1px solid #999}
  .plate,.plate-no,.band h2,.band h3,.vr dd,.vr dt{color:#000}
  a{color:#000;border:0}
  .prose a::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* ------------------------------------------- the method, on navy
   Ice blue was the only saturated ground on the site — every other band is
   ink or linen — so it read as an orphan, and more so once the hero turned
   dark. Navy puts it in the same family as the hero and the footer while
   staying a step lighter than --ink, so the three dark bands are a rhythm
   rather than one long block. The board footage sits behind at low opacity:
   at this strength it is drift and texture, and the generated pseudo-text on
   it is not legible, which is the point. */
.method--board{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy);border-top:0;border-bottom:0;
  margin-top:var(--section-y);
}
/* Except when it follows the Atlas, which is now midnight too.
   The margin used to sit inline in the markup, and with a linen Atlas above
   it that margin read as ordinary breathing room. With a midnight Atlas it
   became a band of paper a hundred-odd pixels tall trapped between two dark
   sections — too thin to be a section, too wide to be a rule, and the owner
   spotted it within minutes of the deploy.

   Two dark sections butting together is the right answer here rather than a
   third ground between them: the board carries a photographic backdrop and
   the Atlas carries a chart, so they are told apart by their contents and not
   by a stripe. The hairline on .atl-home's bottom edge is the seam. */
.atl-home + .method--board{ margin-top:0 }
.board-film{position:absolute;inset:0;z-index:0}
/* The board has to be SEEN. It was opacity:.34 under a navy wash running up to
   .84, which left the evidence wall as a set of vague shapes -- the owner's
   note was "make the blue tint less dark so we can actually see it", and she
   was right: nothing on that board was legible.

   The dial that matters is NOT opacity, and that is the whole lesson here. The
   board holds a near-white sheet of paper, so raising opacity alone raises the
   HIGHLIGHT, and the highlight is what sets the worst-case contrast under the
   body text. Measured over ten frames of the clip, plain opacity .92 with a
   lighter wash took 16px body text to 3.03:1 -- under the 4.5 AA floor, on a
   band that had been at 7.36.

   brightness() with contrast() is the right pair: brightness pulls the paper
   down off white so the ceiling is predictable, contrast puts the separation
   back so the board reads as a board rather than as grey soup. Full opacity
   then costs nothing. Measured across the same ten frames:

       before   body 7.36:1   film detail (stddev) 72.7
       now      body 5.28:1   film detail          83.5

   which is 15% more of the board visible with 17% of headroom still over AA.
   Pushed one stop further the numbers were 84.3 detail at 4.51:1 -- inside the
   floor by a hundredth, which is not a margin, it is a coincidence. */
.board-video{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:1;filter:brightness(.58) contrast(1.22) saturate(.8);
}
.board-film::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(125% 95% at 20% 28%, rgba(28,53,87,.02), rgba(28,53,87,.26) 72%),
    linear-gradient(to bottom, rgba(28,53,87,.26), rgba(28,53,87,0) 44%, rgba(28,53,87,.34));
}
.method-in{position:relative;z-index:1}
.method--board .lab{color:var(--on-ink-mute)}
.method--board .lab::before{background:var(--rust-ink)}
.method--board .method-top h2{color:var(--on-ink)}
.method--board .method-top p{color:var(--on-ink-body)}
.method--board .steps{background:var(--line-ink-str)}
.method--board .host{border-top-color:var(--line-ink-str)}
.method--board blockquote{color:var(--on-ink)}
.method--board cite{color:var(--on-ink-body)}   /* was --on-ink-mute: landed exactly on 4.50:1, no margin */

/* The portrait card, moved out of the hero and given a better job: it sits
   beside her quote, which is where the page asks you to trust the person
   rather than the method. White card on navy reads as a photograph pinned to
   a dark board — the same gesture as the footage behind it. */
.file--host{max-width:16.5rem;flex:none}
@media (max-width:640px){.file--host{max-width:11rem}}

/* ---------------------------------------------- ice as the dark-ground accent
   Rust stays the one editorial accent on light grounds. Ice is its opposite
   number on dark: emphasis, interaction and the show's own voice. They never
   appear on the same ground, so the "one accent per view" rule still holds. */
.hero--film h1 em{color:var(--paper-alt)}
.method--board cite b{color:var(--paper-alt)}
.method--board blockquote::first-letter{color:var(--paper-alt)}
.on-ink a:not(.btn):hover,.ftr a:hover{color:var(--paper-alt)}
.method--board ::selection{background:var(--paper-alt);color:var(--ink)}

/* ---- /sources.html, the working bibliography ---------------------------
   An internal page: noindex, research groundwork, read by one person
   checking what has been verified. Styled enough to be scannable and no
   further — a citation, its identifiers and why it was kept. */
.src-hint{margin:0 0 .5rem;opacity:.72}
.src-list{margin:0 0 1.75rem;padding-left:1.25rem}
.src-list li{margin:0 0 .9rem}
.src-list cite{display:block;font-style:normal}
.src-meta,.src-ids{display:block;font-size:.875rem;opacity:.7}
.src-ids{margin-top:.15rem}
.src-note{margin:.3rem 0 0;font-size:.9375rem;opacity:.85;
          border-left:2px solid currentColor;padding-left:.7rem}

/* The blueprint block on /sources.html. Sits between a topic's one-line hint
   and its citations, because that is the order the work happens in: what we
   think, what an episode would have to say, and what we can prove. */
.brief{margin:.6rem 0 1rem;padding:.75rem .9rem;border-left:2px solid currentColor;
       background:rgba(0,0,0,.02)}
.brief-h{margin:0 0 .4rem;font-size:.75rem;letter-spacing:.08em;
         text-transform:uppercase;opacity:.6}
.brief-spine{margin:0;padding-left:1.1rem}
.brief-spine li{margin:0 0 .3rem}
.brief-def,.brief-v,.brief-gap{margin:.5rem 0 0;font-size:.9375rem}
.brief-gap{opacity:.75}

/* ==========================================================================
   Atlas touchpoints that live OUTSIDE /atlas.html
   The homepage feature and the episode/topic cross-link render on pages
   that do not load atlas.css, so their styles have to be here. Anything
   used only on the atlas page itself stays in atlas.css.
   ========================================================================== */
/* ------------------------------------------------- the homepage feature --- */
/* .band is the MIDNIGHT band and sets light text to match. The atlas
   feature runs on the ice band instead — the site's established alternating
   surface — so every colour .band assigns has to come back down the ink ramp
   or the copy renders light-on-light. */
/* .band is the MIDNIGHT band and sets light text to match. These two run on
   the ice band instead -- the site's established alternating surface -- so
   every colour .band assigns has to come back down the ink ramp or the copy
   renders light-on-light. */
/* ---- the instrument band -------------------------------------------------
   Both of these used to be ice, and ice is no longer a ground anywhere on
   this site. On the home page the Atlas feature lands directly under the
   midnight band carrying the latest investigation, so a pale slab there read
   as a gap in the page rather than as a section; on About, the doctrine band
   is the show's most serious paragraph and it was set on the lightest ground
   the palette has. One answer for both.

   Graphite with a cool undertone: the apparatus, not the sky. The light comes
   from one upper corner, the same radial /atlas.html itself uses, so the
   teaser is made of the page it opens. Two hairlines close it top and bottom
   so the seam against midnight is deliberate rather than accidental.

   The base .band rules already carry the whole dark ramp, so this overrides a
   ground and nothing else -- which is why the old ice version needed six
   rules to put the ink ramp back and this needs none. */
.band--about {
  background: var(--slate);
  background-image:
    radial-gradient(120% 95% at 22% 8%,
                    rgba(198, 217, 232, .075), rgba(198, 217, 232, 0) 62%),
    linear-gradient(180deg, var(--slate) 0%, var(--slate-deep) 100%);
  color: var(--on-ink-body);
  border-top: 1px solid var(--slate-line);
  border-bottom: 1px solid var(--slate-line);
}
.band--about .lab { color: var(--on-ink-mute); }
.band--about .lab::before { background: var(--rust-ink); }
.band--about .lede { color: var(--on-ink-body); }
/* .prose carries its OWN colours -- .prose p is --steel-deep, .prose strong
   is --ink -- and those outrank what .band sets on the container. On a light
   ground that is invisible; on this one it is 1.7:1 and 1.3:1, which is the
   same bug the ice band had in the other direction and is why the whole ramp
   is restated here rather than trusting inheritance.
   A bold inside the doctrine is doing real work -- it is the sentence the
   paragraph exists for -- so it goes to the headline end of the ramp. */
.band--about .prose p,
.band--about .prose li { color: var(--on-ink-body); }
.band--about .prose b,
.band--about .prose strong,
.band--about .prose em { color: var(--on-ink); }
.band--about .prose a:not(.btn):not(.tlink) {
  color: var(--on-ink);
  border-bottom: 1px solid var(--slate-line-str);
}
.band--about .prose a:not(.btn):not(.tlink):hover {
  color: var(--rust-ink);
  border-bottom-color: var(--rust-ink);
}

/* A list whose markers are the show's rust tick rather than a bullet. Used
   for commitments, where each line is a thing we do not do. */
/* .prose ul is (0,2,0) and sets list-style:disc, so a bare .ticks (0,1,0)
   loses and every line renders a bullet AND the rust tick. Scoped to match. */
.ticks, .prose ul.ticks { list-style: none; margin: 1rem 0 0; padding: 0; }
.ticks li, .prose ul.ticks li {
  position: relative;
  padding: 0 0 0 1.6rem;
  margin-bottom: .85rem;
  max-width: 72ch;
}
.ticks li::before, .prose ul.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 9px; height: 2px;
  background: var(--rust);
}
.ticks li b { color: var(--ink); }
/* ------------------------------------------- the home page Atlas section ---
   Midnight, the same navy the sky and the episode plate are set in. The
   section is the show's instrument panel and it is read as one: a chart with
   ten lit cells on a dark ground, directly below the season index.

   It ran on linen for a build and on the instrument graphite for a build
   before that. Navy is the owner's call and it is the palette's own dark --
   no third ground, and the whole --on-ink ramp clears AA on it unchanged. */
.atl-home {
  background: var(--ink);
  color: var(--on-ink-body);
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--line-ink);
}
.atl-home h2 { color: var(--on-ink); }
.atl-home .lab { color: var(--on-ink-mute); }
.atl-home .lab::before { background: var(--rust-ink); }
.atl-home .lede { color: var(--on-ink-body); }
/* The solid button is ink-on-paper by default, which is invisible here. */
.atl-home .btn--solid {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}
.atl-home .btn--solid:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.atl-feat {
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start;
}
.atl-feat-txt h2 { margin: .5rem 0 1.5rem; max-width: 18ch; }
.atl-feat-txt p:last-child { margin: 0; }
.atl-feat-say .lede { margin: .35rem 0 0; max-width: 52ch; }

/* ------------------------------------------------------------- the plate ---
   The homepage Atlas section is the periodic table and nothing else.

   It was a grid of twenty-seven identical cards, one per atlas entry of any
   kind, each with a two-or-three letter "symbol" in the element slot. Giardia
   was captioned Gd, which is gadolinium; Candida was captioned Ca, which is
   calcium. Beyond being wrong, twenty-seven equal rectangles have no shape,
   no hierarchy and no scale, so the section read as a form.

   A periodic table is the opposite on every count. Its silhouette is
   recognisable at any size, its axes mean something, and it states the show's
   actual position -- a hundred and eighteen boxes, ten of them lit -- with no
   caption at all.

   SVG, not a CSS grid like /atlas.html's: this one holds its geometry from
   1180px down to 320px with no horizontal scroller, and it carries halos --
   the same idea as the stars on the map above, inverted for linen, where a
   halo is a pool of tint rather than a glow. */
.atl-plate-wrap { margin-top: clamp(1.6rem, 3.6vw, 2.75rem); }
.ptx { display: block; width: 100%; height: auto; overflow: visible; }

/* uncharted: a hairline box and a symbol at the edge of legibility. Present,
   because the other hundred and eight elements are the scale of the claim. */
.ptx-ghost { fill: none; stroke: rgba(198, 217, 232, .10); stroke-width: 1.5; }
.ptx-ghost-t {
  fill: var(--on-ink-faint); opacity: .42;
  font: 500 30px/1 var(--label);
  letter-spacing: .02em; text-anchor: middle;
}

/* charted. --i is the cell's index in the lighting cascade; the markup sets
   it per cell, and the default here is what a cell gets if it ever does not. */
.ptx-cell { cursor: pointer; --i: 0; }
.ptx-box {
  fill: rgba(198, 217, 232, .065);
  stroke: var(--line-ink-str); stroke-width: 1.6;
  transition: fill var(--d-fast) var(--ease), stroke var(--d-fast) var(--ease);
}
.ptx-halo { fill: url(#ptx-gc); }
.ptx-sym {
  fill: var(--star-dim);
  font: 400 44px/1 var(--disp);
  text-anchor: middle;
}
.ptx-z {
  fill: var(--on-ink-mute); opacity: .85;
  font: 500 15px/1 var(--label);
  letter-spacing: .04em;
}
.ptx-name {
  fill: var(--on-ink-mute);
  font: 500 12px/1 var(--label);
  letter-spacing: .07em; text-transform: uppercase; text-anchor: middle;
}
/* investigated -- the one place the accent appears, exactly as on the map */
.ptx-cell--done .ptx-halo { fill: url(#ptx-g); }
.ptx-cell--done .ptx-box {
  fill: rgba(224, 168, 142, .08);
  stroke: rgba(224, 168, 142, .46);
}
.ptx-cell--done .ptx-sym { fill: var(--rust-ink); }
.ptx-cell--done .ptx-z,
.ptx-cell--done .ptx-name { fill: var(--rust-ink); opacity: .78; }

/* A CSS transform on an SVG child is in USER units, so -7 here is -7 of the
   plate's own 926, which lands at about 4 screen px at a full-width plate and
   scales down with everything else. */
.ptx-cell { transition: transform var(--d-fast) var(--ease); }
.ptx-cell:hover, .ptx-cell:focus-visible { transform: translateY(-7px); }
.ptx-cell:hover .ptx-box { fill: rgba(198, 217, 232, .16); stroke: rgba(198, 217, 232, .5); }
.ptx-cell--done:hover .ptx-box { fill: rgba(224, 168, 142, .18); stroke: var(--rust-ink); }
.ptx-cell:focus-visible { outline: 2px solid var(--rust-ink); outline-offset: 2px; }

/* The cells light one after another rather than all at once, which is the
   same stagger the constellations ink in with. 70ms apart over ten cells is
   0.7s of cascade -- short enough to read as the plate powering up rather
   than as a queue. */
@keyframes ptx-lite {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.atl-plate-wrap.is-in .ptx-cell {
  animation: ptx-lite var(--d-slow) var(--ease) backwards;
  animation-delay: calc(var(--i) * 70ms + 90ms);
}

/* Naming the three tiers, because a colour that means something has to say
   so once. Matches the key under the periodic table on /atlas.html. */
.atl-feat-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px;
  margin: clamp(.9rem, 2.2vw, 1.4rem) 0 0;
  padding-top: clamp(.8rem, 2vw, 1.15rem);
  border-top: 1px solid var(--line-ink);
  font: 500 9.5px/1 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
.atl-feat-key span { display: inline-flex; align-items: center; gap: 6px; }
.atl-feat-key i {
  width: 8px; height: 8px;
  border: 1px solid var(--line-ink-str);
}
.atl-feat-key .k-done { background: var(--rust-ink); border-color: var(--rust-ink); }
.atl-feat-key .k-soon { background: var(--star-dim); border-color: var(--star-dim); }
.atl-feat-key .k-none { background: transparent; }

@media (max-width: 900px) {
  .atl-feat { grid-template-columns: 1fr; gap: 1.1rem; }
  .atl-feat-txt h2 { max-width: none; }
}
/* Below this the plate is under ~640px, a cell is under 35px, and the name
   and the ghost symbols stop being type and start being texture. Dropping
   them leaves the silhouette and the lit cells, which is the whole message. */
@media (max-width: 760px) {
  /* The name and the atomic number both go. The number sits in the cell's
     top-left corner, nine units in, which at this scale is close enough to
     the symbol to read as part of it -- vanadium came out as "23V". */
  .ptx-name, .ptx-z { display: none; }
  .ptx-sym { font-size: 52px; }
}
@media (max-width: 560px) {
  .ptx-ghost-t { display: none; }
  .ptx-ghost { stroke: rgba(198, 217, 232, .13); }
}
@media (prefers-reduced-motion: reduce) {
  .ptx-cell { transition: none; }
  .ptx-cell:hover, .ptx-cell:focus-visible { transform: none; }
  .atl-plate-wrap.is-in .ptx-cell { animation: none; }
}

/* ------------------------------------------------ the cross-link teaser ---
   Dropped onto episode and topic pages. One line, one link, no card. */
.atl-xlink {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: .9rem 1.1rem;
  /* Was --mist. Deep linen instead: the same call-out weight without putting
     a blue ground on an episode page. */
  background: var(--sand);
  border-left: 2px solid var(--rust);
}
.atl-xlink p { margin: 0; font-size: .94rem; color: var(--steel-deep); }
.atl-xlink a { font-weight: 500; white-space: nowrap; }