/* ==========================================================================
   SudoNews — page composition
   Sections are "movements": loud, quiet, loud, medium, very loud, medium,
   quiet. Nothing here is a card on a background.
   ========================================================================== */

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(9px);
  -webkit-backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.mast.is-stuck{ border-bottom-color:var(--ink-22) }
.mast__in{
  height:var(--mast);max-width:var(--max);margin-inline:auto;
  padding-inline:var(--margin);
  display:flex;align-items:center;gap:1.4rem;
}
.wordmark{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 24;
  font-size:1.42rem;letter-spacing:-.035em;text-decoration:none;line-height:1;
  display:inline-flex;align-items:center;
  /* the glyphs are 23px tall; the link needs a thumb-sized box around them */
  min-height:44px;
}
.wordmark__s{color:var(--ink)}
.wordmark__n{color:var(--product)}
.wordmark--lg{font-size:clamp(2.2rem,4.6vw,3.4rem);min-height:0}

.mast__date{ margin-left:auto;margin-right:auto;white-space:nowrap }
.mast__nav{ display:flex;gap:1.5rem;margin-left:auto }
.mast__nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-70);position:relative;padding-block:.3rem;
}
.mast__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease);
}
.mast__nav a:hover,.mast__nav a:focus-visible{color:var(--ink)}
.mast__nav a:hover::after,.mast__nav a:focus-visible::after{transform:scaleX(1)}

.mast__toggle{
  display:none;margin-left:auto;background:0;border:0;cursor:pointer;
  align-items:center;gap:.55rem;padding:.4rem 0;
}
.mast__toggle-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.mast__toggle-bars{display:grid;gap:4px;width:20px}
.mast__toggle-bars i{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.mast__toggle[aria-expanded="true"] .mast__toggle-bars i:first-child{transform:translateY(2.75px) rotate(9deg)}
.mast__toggle[aria-expanded="true"] .mast__toggle-bars i:last-child{transform:translateY(-2.75px) rotate(-9deg)}

.mast__progress{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:transparent}
.mast__progress i{display:block;height:100%;width:0;background:var(--signal);transform-origin:left}

.sheet{
  position:fixed;inset:var(--mast) 0 auto 0;z-index:199;
  background:var(--paper);border-bottom:1px solid var(--ink-22);
  padding:1rem var(--margin) 1.6rem;
}
.sheet__nav{display:grid;gap:.15rem}
.sheet__nav a{
  display:flex;align-items:baseline;gap:.9rem;text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;
  padding:.5rem 0;border-bottom:1px solid var(--ink-10);
}
.sheet__nav a:last-child{border-bottom:0}

@media (max-width:860px){
  .mast__nav{display:none}
  .mast__toggle{display:inline-flex}
  .mast__date{display:none}
}

/* ── 01 · the fold ────────────────────────────────────────────────────── */
.fold{
  padding-top:calc(var(--mast) + clamp(2rem,7vh,5.5rem));
  padding-bottom:1.5rem;
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:clip;
}
.fold__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;flex:1;
}
.fold__kicker{display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(1rem,2.6vh,1.9rem)}
.fold__h1{ display:grid;gap:.02em;margin-bottom:clamp(1.1rem,2.6vh,1.8rem);
  font-size:clamp(2.6rem,6.6vw,5.9rem) }
.fold__h1 .reg{ width:max-content;max-width:100% }
.fold__h1-last{ color:var(--product) }
.fold__dek{ max-width:34ch;margin-bottom:clamp(1.4rem,3.4vh,2.4rem) }
.fold__act{ display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap }
.fold__note{ max-width:22ch }

.fold__foot{ padding-bottom:.2rem }
.fold__foot-in{ display:flex;align-items:center;justify-content:space-between;padding-top:.75rem }
.fold__cue{ width:1px;height:22px;background:var(--ink-22);position:relative;overflow:hidden }
.fold__cue i{
  position:absolute;inset:0;background:var(--signal);
  animation:cue 2.3s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){ .fold__cue i{animation:none;background:var(--ink-22)} }

/* the press sheet ------------------------------------------------------- */
.fold__sheet{ position:relative;display:grid;place-items:center;align-content:center }
.psheet{
  position:relative;width:min(100%,340px);aspect-ratio:3/4;
  filter:drop-shadow(0 24px 44px #16161626);
}
.psheet__plate{
  position:absolute;inset:0;width:100%;height:100%;
  will-change:transform;
}
/* the paper is its own layer; every ink sits on top of it and multiplies,
   which is the only way the red and blue can actually be seen */
.psheet__paper{
  position:absolute;inset:0;background:var(--paper);
  outline:1px solid var(--ink-22);z-index:0;
}
.psheet__plate--k{ z-index:3;color:var(--ink);mix-blend-mode:multiply }
.psheet__plate--s{ z-index:2;color:var(--signal);mix-blend-mode:multiply }
.psheet__plate--p{ z-index:1;color:var(--product);mix-blend-mode:multiply }

.psheet__reg{ position:absolute;width:19px;height:19px;color:var(--ink-45);z-index:4 }
.psheet__reg--tl{ top:-11px;left:-11px }
.psheet__reg--br{ bottom:-11px;right:-11px }

.psheet__key{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem 1.4rem;font-size:.6rem;letter-spacing:.1em;
}
.psheet__key span{ display:inline-flex;align-items:center;gap:.4rem }
.psheet__key i{ width:9px;height:9px;background:var(--c);flex:none }

@media (max-width:900px){
  .fold{min-height:auto;padding-bottom:2.4rem}
  .fold__grid{grid-template-columns:1fr;gap:2.4rem}
  .fold__sheet{height:min(46vh,340px);order:-1}
  .psheet__paper{width:min(74%,250px)}
  .fold__dek{max-width:none}
}

/* ── shared: the drawn underline, used wherever a word is marked ─────── */
.mark-wrap{ position:relative;display:inline-block;white-space:nowrap }
.mark--under{
  position:absolute;left:-3%;width:106%;top:.86em;height:.3em;
  color:var(--signal);
}

/* ── 04/06 · spreads ──────────────────────────────────────────────────── */
.spread{ padding-block:clamp(4.5rem,13vh,9rem) }
.spread__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center;
}
/* the phone is much taller than the copy; cap it so the row does not
   stretch into a lake of empty paper */
.shot__frame img{ max-height:min(74vh,660px);width:auto;margin-inline:auto }
.spread--flip .spread__grid{ direction:rtl }
.spread--flip .spread__grid > *{ direction:ltr }
.spread__text .headline{ margin:.6rem 0 1.2rem }
.spread__text .dek{ max-width:38ch }

.notes{ margin-top:1.8rem;display:grid;gap:.05rem;max-width:46ch }
.notes li{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;
  padding:.72rem 0;border-top:1px solid var(--ink-10);
  font-size:.92rem;color:var(--ink-70);
}
.notes li:last-child{ border-bottom:1px solid var(--ink-10) }
.notes__k{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);padding-top:.22em;
}
@media (max-width:560px){
  .notes li{grid-template-columns:1fr;gap:.2rem}
}

/* product shots — framed like plates, never like floating cards */
.shot{ position:relative;margin:0 }
.shot__frame{
  position:relative;background:var(--paper-3);
  outline:1.5px solid var(--ink);
}
.shot__frame img{ width:100%;height:auto;display:block;mix-blend-mode:normal }
.shot__cap{ margin-top:1.5rem;max-width:34ch }
.shot__lead{
  position:absolute;width:110px;height:62px;left:-64px;top:22%;color:var(--signal);
  display:none;
}
@media (min-width:1080px){ .shot__lead{display:block} }

.shot--home .shot__frame{ max-width:390px;margin-inline:auto }
.shot--pair{ position:relative;padding-bottom:2rem }
.shot--pair .shot__frame{ max-width:330px }
.shot__frame--back{ margin-left:0 }
.shot__frame--front{
  position:absolute;right:0;top:16%;width:62%;max-width:250px;
  outline:1.5px solid var(--product);
  box-shadow:-14px 0 40px -26px #161616a6;
}
.shot--pair .shot__cap{ margin-top:1.2rem }
@media (max-width:900px){
  .spread__grid{grid-template-columns:1fr;gap:2.4rem}
  .spread--flip .spread__grid{direction:ltr}
  .shot--pair .shot__frame{max-width:64%}
  .shot__frame--front{top:22%;width:52%}
}

/* the ask line — a drawn question reaching for a story */

.isnot{
  border-left:2px solid var(--signal);padding:.2rem 0 .2rem 1.1rem;max-width:42ch;
}
.isnot .slug{ margin-bottom:.4rem;color:var(--signal) }

/* ── 05 · flash (dark) ────────────────────────────────────────────────── */
.flash{ position:relative;height:250vh }
.flash__pin{ position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:clip }
.flash__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;width:100%;
}
.flash__text .headline{ margin:.6rem 0 1.2rem }
.flash__text .headline em{ font-style:italic;color:var(--signal) }
.flash__text .dek{ max-width:32ch }
.flash__honest{
  margin-top:1.6rem;max-width:38ch;font-size:.9rem;
  border-top:1px solid #f0ece32e;padding-top:1rem;
}
.flash__strip{ position:relative;display:grid;justify-items:center;gap:1.2rem }
.flash__frame{
  margin:0;width:min(100%,300px);position:relative;
  outline:1.5px solid #f0ece33d;background:#000;
}
.flash__frame img{ width:100%;height:auto }
.flash__meter{ display:flex;align-items:center;gap:.8rem;width:min(100%,300px) }
.flash__bar{ flex:1;height:2px;background:#f0ece32e;position:relative }
.flash__bar i{ position:absolute;inset:0;width:0;background:var(--signal) }
@media (max-width:900px){
  .flash{height:auto}
  .flash__pin{position:static;height:auto;padding-block:clamp(4rem,11vh,7rem)}
  .flash__in{grid-template-columns:1fr;gap:2.4rem}
  .flash__strip{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .flash{height:auto}
  .flash__pin{position:static;height:auto;padding-block:6rem}
}

/* ── 07 · ledger ──────────────────────────────────────────────────────── */
.ledger{ padding-block:clamp(4.5rem,13vh,9rem);background:var(--paper-2) }
.ledger__head{ max-width:40ch;margin-bottom:clamp(2rem,5vh,3.4rem) }
.ledger__head .headline{ margin:.6rem 0 1.1rem }
.ledger__grid{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ledger__shot{ margin:0 }
.ledger__shot .shot__frame{ max-width:300px }

.terms{ display:grid }
.terms__row{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1.4rem;
  padding:1rem 0;border-top:1px solid var(--ink-22);
}
.terms__row:last-child{ border-bottom:1px solid var(--ink-22) }
.terms dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);padding-top:.3em;
}
.terms dd{ margin:0;color:var(--ink-70);font-size:.96rem }
.terms dd em{ font-style:normal;color:var(--ink);font-weight:600 }
.fig{
  font-family:var(--serif);font-weight:600;font-size:1.25em;color:var(--ink);
  font-variant-numeric:lining-nums;
}
.eq{ color:var(--signal);padding-inline:.15em }
.ledger__foot{ margin-top:1.8rem }
@media (max-width:900px){
  .ledger__grid{grid-template-columns:1fr;gap:2.2rem}
  .ledger__shot .shot__frame{max-width:230px}
  .terms__row{grid-template-columns:1fr;gap:.25rem}
}

/* ── 08 · get ─────────────────────────────────────────────────────────── */
.get{ padding-block:clamp(4.5rem,13vh,9rem) }
.get__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.get__h{ display:grid;margin:.6rem 0 1.2rem;font-size:clamp(2.5rem,6.4vw,5.4rem) }
.get__h .reg{ width:max-content;max-width:100% }
.get__type .dek{ max-width:30ch;margin-bottom:2rem }

.listing{ display:grid;margin-top:.4rem }
.listing > div{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1.4rem;
  padding:.95rem 0;border-top:1px solid var(--ink-22);
}
.listing > div:last-child{ border-bottom:1px solid var(--ink-22) }
.listing dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding-top:.3em;
}
.listing dd{ margin:0;color:var(--ink-70);font-size:.96rem }
.listing__hedge{
  display:block;margin-top:.3rem;font-family:var(--mono);font-size:.68rem;
  color:var(--ink-45);line-height:1.5;
}
.stars{ display:inline-block;width:20px;height:17px;color:var(--signal);vertical-align:-3px;margin-right:.3rem }
.stars .mark{ position:static;width:100%;height:100% }
@media (max-width:900px){
  .get__in{grid-template-columns:1fr;gap:2.4rem}
  .listing > div{grid-template-columns:1fr;gap:.25rem}
}

/* ── colophon ─────────────────────────────────────────────────────────── */
.colophon{ padding-block:clamp(2.5rem,6vh,4rem) clamp(2rem,5vh,3rem);background:var(--paper) }
.colophon__grid{
  display:grid;grid-template-columns:1.3fr .8fr .9fr 1.5fr;
  gap:clamp(1.6rem,3.2vw,3rem);padding-top:clamp(1.8rem,4vh,2.8rem);
}
.colophon__tag{ margin-top:.7rem;max-width:24ch }
.colophon__col ul{ display:grid;gap:.55rem;margin-top:.85rem;list-style:none;padding:0 }
.colophon__col .caption{ display:block;margin-top:.12rem }
.colophon__addr{ margin-top:1.1rem;max-width:40ch;line-height:1.6 }
.colophon__legal{
  margin-top:clamp(2rem,5vh,3rem);padding-top:1.2rem;border-top:1px solid var(--ink-10);
  display:grid;gap:.5rem;
}
.colophon__legal .caption{ max-width:72ch }
@media (max-width:980px){
  .colophon__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .colophon__col--wide{grid-column:1/-1}
}
@media (max-width:560px){
  .colophon__grid{grid-template-columns:1fr}
}


/* ── polish pass ───────────────────────────────────────────────────────── */

/* anchors must not land under the fixed masthead */
[id]{ scroll-margin-top:calc(var(--mast) + 18px) }

/* the masthead is paper, but over the dark plate it has to invert or it
   reads as a light bar slicing the black */
.mast.is-dark{
  background:color-mix(in srgb,var(--black) 82%,transparent);
  border-bottom-color:#f0ece32e;
}
.mast.is-dark .wordmark__s{ color:var(--chalk) }
.mast.is-dark .wordmark__n{ color:#7ea0ff }
.mast.is-dark .mast__date,
.mast.is-dark .mast__nav a{ color:#f0ece38f }
.mast.is-dark .mast__nav a:hover{ color:var(--chalk) }
.mast.is-dark .mast__toggle{ color:var(--chalk) }
.mast.is-dark .mast__toggle-bars i{ background:var(--chalk) }

/* Flash: a strip of frames, one of them the one you are watching */
.flash__in{ grid-template-columns:minmax(0,.92fr) minmax(0,.78fr);gap:clamp(2rem,4vw,4rem) }
.filmstrip{
  display:grid;grid-auto-flow:column;gap:5px;width:min(100%,300px);margin-bottom:.2rem;
}
.filmstrip i{
  height:26px;background:#f0ece31f;position:relative;
  transition:background .3s var(--ease);
}
.filmstrip i.is-cur{ background:var(--signal) }
.filmstrip i.is-cur::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--signal);
}
.flash__meter{ color:#f0ece3cc }
.flash__meter .folio{ color:#f0ece38a;font-size:.68rem }
.flash__bar{ height:3px;background:#f0ece324 }
.flash__honest{ max-width:34ch }

/* tall product shots were stretching rows into lakes of paper */
.spread__grid,.ledger__grid{ align-items:center }
.ledger__grid{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr) }
.get__in{ align-items:center }

/* Sudo: the pair had an absolutely-positioned front plate that escaped the
   column. Make it a two-track grid instead — it overlaps by design, not by
   accident. */
.shot--pair{ display:grid;grid-template-columns:repeat(12,1fr);padding-bottom:0 }
.shot--pair .shot__frame{ max-width:none;margin:0 }
.shot__frame--back{ grid-column:1/9;grid-row:1;z-index:1 }
.shot__frame--front{
  position:static;width:auto;max-width:none;grid-column:6/13;grid-row:1;
  align-self:center;z-index:2;
}
.shot--pair .shot__cap{ grid-column:1/-1;grid-row:2;margin-top:1.4rem }
@media (max-width:900px){
  .shot--pair .shot__frame{ max-width:none }
  .shot__frame--back{ grid-column:1/8 }
  .shot__frame--front{ grid-column:7/13 }
}

/* the paired shot needs its own image rule — the global max-height was
   letting the back plate grow wider than its grid track and bleed left */
.shot--pair .shot__frame img{ width:100%;height:auto;max-height:none;margin:0 }
.shot--pair{ max-width:560px }
.shot__frame--front{ box-shadow:-18px 0 48px -28px #161616b3 }

/* ══ mobile is composed, not shrunk ═════════════════════════════════════ */
@media (max-width:860px){
  /* the fold leads with the sentence. The sheet is evidence, and evidence
     comes after the claim. */
  .fold{ padding-top:calc(var(--mast) + 1.6rem);padding-bottom:2rem }
  .fold__sheet{ order:2;height:auto;margin-top:.4rem }
  .fold__grid{ gap:1.9rem }
  .fold__h1{ font-size:clamp(2.55rem,10.4vw,3.6rem) }
  .fold__kicker{ margin-bottom:1rem }
  .fold__kicker span{ max-width:22ch;line-height:1.5 }
  .fold__dek{ font-size:1.05rem }
  .fold__act{ gap:1rem;align-items:flex-start }
  .fold__note{ max-width:none;font-size:.66rem }
  .psheet{ width:min(78%,240px) }
  .psheet__key{ justify-content:flex-start;margin-top:1.1rem;gap:.35rem .9rem }
  .fold__foot{ display:none }

  /* claim, then evidence, in every pinned section too */


  .flash__in{ gap:2rem }
  .filmstrip{ width:min(100%,240px);margin-inline:auto }
  .flash__frame,.flash__meter{ width:min(100%,240px) }

  .shot--home .shot__frame{ max-width:250px }
  .ledger__shot .shot__frame{ max-width:220px }
  .shot--pair{ max-width:none }
  .shot__lead{ display:none }

  .get__h{ font-size:clamp(2.4rem,10vw,3.4rem) }
  .colophon__addr{ max-width:none }
}

@media (max-width:430px){
  .fold__h1{ font-size:clamp(2.3rem,10vw,3rem) }
  .headline{ font-size:clamp(1.85rem,7.4vw,2.4rem) }
  .notes li,.terms__row,.listing > div{ padding-block:.85rem }
  .psheet{ width:min(84%,225px) }
}

@media (max-width:860px){
  /* the crosshair fought the three-line kicker for space */
  .fold__kicker .regmark{ display:none }
  .fold__kicker{ align-items:flex-start }
  .psheet{ width:min(88%,262px) }
}

/* a small reproduction gets a coarser screen — otherwise the colour plates
   turn the line work to moire the moment they go out of register */
.fp-lite{ display:none }
@media (max-width:900px){
  .fp-full{ display:none }
  .fp-lite{ display:block }
}
/* the tablet has room for a proper sheet; don't shrink it to phone size */
@media (min-width:601px) and (max-width:900px){
  .psheet{ width:min(58%,400px) }
  .fp-full{ display:block }
  .fp-lite{ display:none }
}

/* ── an editor's mark on the one number that needs one ─────────────────── */
/* The rating is 5.0 from five ratings. Ringing the sample size and writing
   "five people" in the margin is what a sub would do to a proof — it makes the
   honesty a design decision rather than a footnote nobody reads. */
.ringed{ position:relative;display:inline-block }
.mark--ring{
  position:absolute;left:50%;top:54%;
  /* the global img,svg,video{max-width:100%} would otherwise clamp this to the
     width of the single digit it is drawn around */
  width:54px;max-width:none;height:34px;
  transform:translate(-50%,-50%);
  color:var(--signal);pointer-events:none;
}