/* ============================================================================
   PRIMARY — V100
   A design system for a product whose subject is confidence.

   Principles
   1. One voice.      Every size, space, colour and duration comes from a scale.
   2. Tier is form.   Confidence is carried by shape and weight, not decoration.
   3. Motion informs. Nothing moves that is not reporting a state change.
   4. Quiet by default. The record is dense; the interface must not be.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens --*/
:root{
  color-scheme:light;

  /* -- type scale ------------------------------------------------------- */
  --fs-3xs:10.5px;  /* eyebrows, all-caps keys                             */
  --fs-2xs:11.5px;  /* micro-meta, counters                               */
  --fs-xs:12.5px;   /* captions, source lines                             */
  --fs-sm:13.5px;   /* secondary body, UI labels                          */
  --fs-base:15px;   /* interface body                                     */
  --fs-md:16.5px;   /* deks, lead-ins                                     */
  --fs-lg:18px;     /* article body                                       */
  --fs-xl:21px;
  --fs-2xl:26px;
  --fs-3xl:31px;
  --fs-4xl:38px;
  /* the one fluid step: the lead headline, which has the most room to give */
  --fs-lead:clamp(28px,1.6rem + 1.6vw,44px);

  --lh-tight:1.14;  --lh-head:1.24;  --lh-snug:1.38;
  --lh-body:1.55;   --lh-read:1.7;
  --tr-tight:-.024em; --tr-head:-.014em; --tr-snug:-.006em;
  --tr-caps:.085em;

  /* -- spacing (4px base) ----------------------------------------------- */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s7:28px;  --s8:32px;  --s10:40px; --s12:48px;
  --s14:56px; --s16:64px; --s20:80px; --s24:96px;

  /* -- surface + ink ---------------------------------------------------- */
  --page:#FEF0D2;
  --app:#FEF0D2;
  --sunk:#F7E6C1;
  --card:#FFF8E6;
  --raised:#FFF8E6;

  --ink:#131011;
  --ink-2:#645E60;
  --ink-3:#98918F;
  --ink-4:#B6AFAC;

  --line:#E5D2A9;
  --line-2:#EEDFBC;
  --line-3:#F6EBD2;

  /* -- brand ------------------------------------------------------------ */
  --accent:#AE2448;
  --accent-ink:#8E1638;      /* accessible on light surfaces               */
  --accent-soft:#FBF1F4;
  --accent-line:rgba(174,36,72,.24);
  --deep:#4E041E;
  --on-accent:#FFFFFF;

  /* -- the tier ladder --------------------------------------------------
     Four rungs. Each carries three tokens so no tint is ever hand-mixed:
       --tN      the mark      (glyph, dot, rule)
       --tN-ink  the label     (text on a light ground, >=4.5:1)
       --tN-bg   the ground    (tinted surface)
       --tN-ln   the edge      (border on that ground)                     */
  --t1:#A8A29E; --t1-ink:#6E6763; --t1-bg:rgba(168,162,158,.13); --t1-ln:rgba(168,162,158,.34);
  --t2:#C08221; --t2-ink:#8A5B12; --t2-bg:rgba(204,139,42,.13);  --t2-ln:rgba(204,139,42,.34);
  --t3:#3E7BA6; --t3-ink:#2E5F82; --t3-bg:rgba(62,123,166,.11);  --t3-ln:rgba(62,123,166,.30);
  --t4:#2E7D5B; --t4-ink:#236046; --t4-bg:rgba(46,125,91,.11);   --t4-ln:rgba(46,125,91,.30);

  /* -- radius ------------------------------------------------------------ */
  --r-xs:5px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-2xl:26px;
  --r-full:999px;
  --r-im:5px;                                   /* image corners: near-square */

  /* -- elevation ---------------------------------------------------------
     Two-part shadows throughout: a 1px contact edge plus a wide, soft cast.
     Ambient light comes from above, so every cast is offset down.          */
  --sh-1:0 1px 2px rgba(19,16,17,.04);
  --sh-2:0 1px 2px rgba(19,16,17,.04), 0 10px 28px -16px rgba(19,16,17,.12);
  --sh-3:0 1px 2px rgba(19,16,17,.05), 0 14px 32px -14px rgba(19,16,17,.20);
  --sh-4:0 2px 6px rgba(19,16,17,.05), 0 18px 42px -16px rgba(19,16,17,.30);
  --sh-5:0 2px 8px rgba(19,16,17,.06), 0 30px 70px -24px rgba(19,16,17,.45);
  --sh:var(--sh-2);                              /* legacy alias            */
  --sh-lift:var(--sh-4);                         /* was used, never defined */

  /* -- motion -------------------------------------------------------------
     Durations scale with the distance a thing travels. Easings are named for
     what they do, not for their curve.                                     */
  --d-1:120ms;  --d-2:180ms;  --d-3:240ms;
  --d-4:320ms;  --d-5:440ms;  --d-6:620ms;
  --e-out:cubic-bezier(.22,.61,.36,1);      /* enters, reveals              */
  --e-in:cubic-bezier(.55,.06,.68,.19);     /* exits                        */
  --e-inout:cubic-bezier(.65,0,.35,1);      /* moves between two states     */
  --e-glide:cubic-bezier(.32,.72,0,1);      /* sheets, drawers, headers     */
  /* a real spring, sampled — overshoots ~4% then settles. Used for anything
     that should feel picked up rather than faded in.                       */
  --e-spring:linear(
    0,.0055 1.2%,.0217 2.5%,.0873 5.1%,.1962 7.9%,.3372 10.9%,.6449 16.5%,
    .8004 19.4%,.9255 22.3%,1.0217 25.4%,1.0629 27.4%,1.0866 29.5%,
    1.0938 31.7%,1.0862 34.3%,1.0669 37.2%,1.0201 43.5%,1.0021 47.1%,
    .9941 51.2%,.9968 58.6%,1.0011 71.5%,1
  );

  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --disp:"Sentient","Iowan Old Style",Georgia,serif;

  /* -- focus -------------------------------------------------------------- */
  --focus:0 0 0 2px var(--app), 0 0 0 4.5px var(--accent);
  --focus-tight:0 0 0 2.5px var(--accent);

  --measure:74ch;
}

/* ------------------------------------------------------------ dark mode --
   A reading product earns a night surface. The warm base is kept — this is a
   dimmed paper, not an OLED void — and every tier is lifted to hold contrast
   against it.                                                              */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#131110; --app:#16130F; --sunk:#1D1914; --card:#1B1712; --raised:#221D17;
    --ink:#F4F0E8; --ink-2:#ABA49B; --ink-3:#7C756D; --ink-4:#5E5850;
    --line:#302A23; --line-2:#26211B; --line-3:#1F1A15;
    --accent:#E9587C; --accent-ink:#F2839E; --accent-soft:rgba(233,88,124,.13);
    --accent-line:rgba(233,88,124,.30); --deep:#2E0512; --on-accent:#1A0208;
    --t1:#9C958F; --t1-ink:#ADA69F; --t1-bg:rgba(156,149,143,.14); --t1-ln:rgba(156,149,143,.30);
    --t2:#D99B3E; --t2-ink:#E3B067; --t2-bg:rgba(217,155,62,.14);  --t2-ln:rgba(217,155,62,.30);
    --t3:#63A2CC; --t3-ink:#85B8DA; --t3-bg:rgba(99,162,204,.13);  --t3-ln:rgba(99,162,204,.28);
    --t4:#4CA57B; --t4-ink:#6FBB96; --t4-bg:rgba(76,165,123,.13);  --t4-ln:rgba(76,165,123,.28);
    --sh-1:0 1px 2px rgba(0,0,0,.34);
    --sh-2:0 1px 2px rgba(0,0,0,.34), 0 10px 28px -16px rgba(0,0,0,.7);
    --sh-3:0 1px 3px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.75);
    --sh-4:0 2px 8px rgba(0,0,0,.45), 0 18px 42px -16px rgba(0,0,0,.8);
    --sh-5:0 4px 12px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.9);
    --focus:0 0 0 2px var(--app), 0 0 0 4.5px var(--accent);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#131110; --app:#16130F; --sunk:#1D1914; --card:#1B1712; --raised:#221D17;
  --ink:#F4F0E8; --ink-2:#ABA49B; --ink-3:#7C756D; --ink-4:#5E5850;
  --line:#302A23; --line-2:#26211B; --line-3:#1F1A15;
  --accent:#E9587C; --accent-ink:#F2839E; --accent-soft:rgba(233,88,124,.13);
  --accent-line:rgba(233,88,124,.30); --deep:#2E0512; --on-accent:#1A0208;
  --t1:#9C958F; --t1-ink:#ADA69F; --t1-bg:rgba(156,149,143,.14); --t1-ln:rgba(156,149,143,.30);
  --t2:#D99B3E; --t2-ink:#E3B067; --t2-bg:rgba(217,155,62,.14);  --t2-ln:rgba(217,155,62,.30);
  --t3:#63A2CC; --t3-ink:#85B8DA; --t3-bg:rgba(99,162,204,.13);  --t3-ln:rgba(99,162,204,.28);
  --t4:#4CA57B; --t4-ink:#6FBB96; --t4-bg:rgba(76,165,123,.13);  --t4-ln:rgba(76,165,123,.28);
  --sh-1:0 1px 2px rgba(0,0,0,.34);
  --sh-2:0 1px 2px rgba(0,0,0,.34), 0 10px 28px -16px rgba(0,0,0,.7);
  --sh-3:0 1px 3px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.75);
  --sh-4:0 2px 8px rgba(0,0,0,.45), 0 18px 42px -16px rgba(0,0,0,.8);
  --sh-5:0 4px 12px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------- reset ---*/
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--app);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  transition:background-color var(--d-4) var(--e-inout),color var(--d-4) var(--e-inout);
}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}

/* Headlines set in the display face get optical treatment everywhere: balanced
   ragging, hanging punctuation, and true small tracking at large sizes.      */
h1,h2,h3,.stmt,.tbh,.cq2,.tcrow .q,.nbh,.hq,.hq2,.tcard .tq,.rail .rt .a{
  text-wrap:balance;
  -webkit-hyphens:none;hyphens:none;
}
p,.dek,.nbd,.sub{text-wrap:pretty}
.dek,.sub,.bdlead,.because{hanging-punctuation:first last}

/* Numerals in any statistical context are tabular so columns never jitter. */
.amn,.amst,.pc,.pav2,.impc .n,.mbig .n,.tcrow .s,.cs2,.hs,.hs2,.mrow .mv,.tn{
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------- a11y ------*/
/* Nothing in the product relied on a focus ring before V100. Every interactive
   surface now carries one, shaped to the control it sits on.               */
:where(a,button,input,[tabindex]):focus{outline:none}
:where(a,button,input,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--focus);border-radius:var(--r-xs);
  position:relative;z-index:3;
}
.btn:focus-visible,.srclink:focus-visible,.viewall:focus-visible,.tcall:focus-visible,
.sug:focus-visible,.ivlink:focus-visible,.tcarnav button:focus-visible,
.ivmic:focus-visible,.ivsend:focus-visible,.bellbtn:focus-visible,.ft-circle:focus-visible{
  border-radius:var(--r-full);
}
.clcard:focus-visible,.card:focus-visible,.nbcard:focus-visible,.nbfeat:focus-visible,
.tcard:focus-visible,.opt:focus-visible,.cta:focus-visible{border-radius:var(--r-lg)}
.cl:focus-visible{border-radius:3px;box-shadow:var(--focus-tight)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--app);
  padding:var(--s3) var(--s5);border-radius:0 0 var(--r) 0;font-size:var(--fs-sm);font-weight:700}
.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}

/* --------------------------------------------------------- layout ------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:720px}
.narrow2{max-width:760px}

/* --------------------------------------------------- motion primitives ---
   Two reveal mechanics, both driven by IntersectionObserver adding .inview:
     .rise   — content arriving on scroll: 10px up, soft
     .stagger children — grids, where order should read left-to-right
   Anything already on screen at load is revealed immediately by the observer,
   so there is never a blank first paint.                                    */
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.rise{opacity:0}
.rise.inview{animation:riseIn var(--d-5) var(--e-out) both}
.stagger > *{opacity:0}
.stagger.inview > *{animation:riseIn var(--d-5) var(--e-out) both}
.stagger.inview > *:nth-child(1){animation-delay:0ms}
.stagger.inview > *:nth-child(2){animation-delay:55ms}
.stagger.inview > *:nth-child(3){animation-delay:110ms}
.stagger.inview > *:nth-child(4){animation-delay:165ms}
.stagger.inview > *:nth-child(5){animation-delay:200ms}
.stagger.inview > *:nth-child(6){animation-delay:230ms}
.stagger.inview > *:nth-child(7){animation-delay:255ms}
.stagger.inview > *:nth-child(n+8){animation-delay:275ms}

/* Pressable: every control that can be tapped acknowledges the tap. The scale
   is deliberately small — this is a newspaper, not a toy.                   */
.press{transition:transform var(--d-1) var(--e-out)}
.press:active{transform:scale(.975)}

/* ------------------------------------------------- reduced motion --------
   One global switch. Anything that moves is reduced to an opacity change or
   removed; nothing that carries meaning is lost.                            */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rise,.stagger > *{opacity:1!important;transform:none!important}
  .press:active{transform:none}
}

/* ============================ CHROME + OVERLAYS ========================== */

/* ------------------------------------------- demo harness (not shipped) --*/
/* The harness is not part of the product, so it does not follow the product's
   theme — it stays dark in both. Using --ink/--app here inverted it under dark
   mode and rendered the active pills white-on-white. */
.demo{background:#131011;color:#F4F0E8;font-size:var(--fs-xs);
  border-bottom:1px solid rgba(255,255,255,.08)}
.demo .wrap{display:flex;align-items:center;gap:var(--s2);height:46px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.demo .wrap::-webkit-scrollbar{display:none}
.demo .lb{color:rgba(255,255,255,.42);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--fs-3xs);flex:0 0 auto}
.demo button{background:rgba(255,255,255,.09);border:0;color:rgba(255,255,255,.7);
  font-size:var(--fs-xs);font-weight:500;padding:6px var(--s3);border-radius:var(--r-full);
  cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)}
.demo button:hover{background:rgba(255,255,255,.16);color:#fff}
.demo button.on{background:#fff;color:var(--ink);font-weight:700}
.demo .ev{margin-left:auto;flex:0 0 auto}
.demo .vsep{width:1px;height:18px;background:rgba(255,255,255,.16);flex:0 0 auto;margin:0 var(--s1)}
body.v0 .demo [data-as]:not([data-as=""]){display:none}
body.v0 .bellbtn{display:none}

/* ------------------------------------------------------------- header ----*/
.hd{position:sticky;top:0;z-index:22;
  border-top:3px solid var(--accent);border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--app) 88%,transparent);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  transition:transform var(--d-4) var(--e-glide),box-shadow var(--d-3) var(--e-out)}
.hd.away{transform:translateY(calc(-100% - 3px))}
/* travels its own height plus the header's, so it clears the viewport */
.catrow.away{transform:translateY(calc(-100% - var(--hd-h)))}
/* the bars are separated by a rule, not a cast shadow */
.hd.stuck{box-shadow:none;border-bottom-color:var(--line)}
@media (prefers-reduced-transparency:reduce){
  .hd{background:var(--app);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.hdleft{display:flex;align-items:center}
.hd .logo{display:flex;align-items:center;border-radius:var(--r-xs)}
.hd .logo svg{display:block;height:21px;width:auto}
.hd .logo path:first-of-type,.hd .logo path:nth-of-type(2){transition:opacity var(--d-2) var(--e-out)}
.hd .logo:hover path:first-of-type,.hd .logo:hover path:nth-of-type(2){opacity:.78}
/* the wordmark is ink-coloured, so it has to invert with the theme */
:root[data-theme="dark"] .hd .logo path:not(:nth-of-type(-n+2)),
:root[data-theme="dark"] .flogo path:not(:nth-of-type(-n+2)){fill:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hd .logo path:not(:nth-of-type(-n+2)),
  :root:not([data-theme="light"]) .flogo path:not(:nth-of-type(-n+2)){fill:var(--ink)}
}

.hd .desktopnav{display:flex;align-items:center;gap:2px}
.hd .desktopnav a{position:relative;display:flex;align-items:center;height:62px;padding:0 var(--s4);
  font-size:14px;font-weight:500;color:var(--ink-3);
  transition:color var(--d-2) var(--e-out)}
.hd .desktopnav a:hover{color:var(--ink)}
.hd .desktopnav a.on{color:var(--ink);font-weight:700}
.hd .desktopnav a.on::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:-1px;
  height:2px;background:var(--ink);border-radius:2px 2px 0 0;
  animation:navIn var(--d-3) var(--e-out) both}
@keyframes navIn{from{transform:scaleX(.3);opacity:0}to{transform:none;opacity:1}}

.menubtn,.mobilemenu{display:none}

.bellbtn{width:34px;height:34px;margin-left:var(--s1);border-radius:var(--r-full);
  background:transparent;border:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-2);padding:0;position:relative;
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.bellbtn:hover{background:var(--sunk);color:var(--ink)}
.bellbtn:active{transform:scale(.92)}
/* an unread mark that draws the eye once, then stops */
.bellbtn[data-unread]::after{content:"";position:absolute;top:7px;right:8px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--app)}
.bellbtn[data-unread]::before{content:"";position:absolute;top:7px;right:8px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);animation:ping 2.6s var(--e-out) 3}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.6);opacity:0}}

/* theme switch — a single control, two states, no menu */
.themebtn{width:34px;height:34px;border-radius:var(--r-full);background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);padding:0;
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)}
.themebtn:hover{background:var(--sunk);color:var(--ink)}
.themebtn svg{display:block;transition:transform var(--d-5) var(--e-spring)}
.themebtn:active svg{transform:rotate(38deg) scale(.9)}
.themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .sun{display:none}
  :root:not([data-theme="light"]) .themebtn .moon{display:block}
}

/* reading progress — only ever shown on a story, where length is unknown */
.hprog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent);
  width:0;transform-origin:left;z-index:2;opacity:0;
  transition:opacity var(--d-2) var(--e-out)}
body.reading .hprog{opacity:1}

/* ------------------------------------------------------- category bar ----*/
.catrow{border-bottom:1px solid var(--line-2);background:var(--app);position:relative}
.catrow.hide{display:none}
.catrow .wrap{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;
  position:relative;scroll-behavior:smooth}
.catrow .wrap::-webkit-scrollbar{display:none}
.catrow a{position:relative;display:flex;align-items:center;height:46px;padding:0 var(--s4);
  font-size:13px;font-weight:500;color:var(--ink-3);white-space:nowrap;flex:0 0 auto;
  transition:color var(--d-2) var(--e-out)}
.catrow a:first-child{padding-left:0}
.catrow a:hover{color:var(--ink)}
.catrow a.on{color:var(--ink);font-weight:700}
/* one indicator for the whole bar, moved by JS — it slides between tabs
   instead of each tab drawing and discarding its own rule */
.catink{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);border-radius:2px 2px 0 0;
  transition:transform var(--d-4) var(--e-glide),width var(--d-4) var(--e-glide);
  pointer-events:none;will-change:transform,width}
.catink.idle{transition:none}

/* --------------------------------------------------------------- scrim ---*/
.scrim{position:fixed;inset:0;background:rgba(12,10,11,.5);opacity:0;pointer-events:none;
  transition:opacity var(--d-4) var(--e-out);z-index:40;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* --------------------------------------------------------------- sheet ---
   Phone: a bottom sheet that springs up from the edge it was summoned from.
   Desktop: a centred modal that scales in from 98.5%.                       */
.sheet{position:fixed;left:50%;bottom:0;width:min(560px,100%);
  transform:translate(-50%,calc(100% + 40px));
  background:var(--card);border-radius:var(--r-2xl) var(--r-2xl) 0 0;z-index:41;
  max-height:92vh;display:flex;flex-direction:column;
  visibility:hidden;pointer-events:none;
  transition:transform var(--d-5) var(--e-glide),visibility 0s var(--d-5);
  box-shadow:0 -18px 44px -18px rgba(19,16,17,.34)}
.sheet.on{transform:translate(-50%,0);visibility:visible;pointer-events:auto;
  transition:transform var(--d-5) var(--e-glide)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:var(--s3) auto 0;
  flex:0 0 auto;transition:background var(--d-2) var(--e-out)}
.sheet:active .grab{background:var(--ink-4)}
.sheetx{display:none;position:absolute;top:14px;right:16px;z-index:2;width:32px;height:32px;
  border-radius:var(--r-full);background:var(--sunk);border:0;cursor:pointer;color:var(--ink-2);
  font-size:18px;line-height:1;padding:0;
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.sheetx:hover{background:var(--line-2);color:var(--ink)}
.sheetx:active{transform:scale(.9)}

#sheetin{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#sheetin > *{flex:1 1 auto;min-height:0}
.sheet .in{padding:var(--s4) var(--s6) var(--s7);overflow-y:auto;overscroll-behavior:contain;
  min-height:0;scrollbar-width:none}
.sheet .in::-webkit-scrollbar{display:none}
.sheet h2{font-family:var(--disp);font-size:23px;line-height:var(--lh-head);font-weight:300;
  margin:0 0 var(--s2);letter-spacing:var(--tr-head)}
.sheet .sub{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body);margin:0 0 var(--s5)}
.sheet .quote{font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.42;
  margin:0 0 var(--s3);letter-spacing:var(--tr-snug)}
/* sheet content arrives a beat after the surface, so the two reads as one move */
.sheet.on #sheetin > *{animation:fade var(--d-4) var(--e-out) 90ms both}

@media (min-width:721px){
  .sheet{top:50%;bottom:auto;border-radius:var(--r-xl);
    width:min(580px,calc(100vw - 56px));max-height:86vh;
    opacity:0;transform:translate(-50%,-48%) scale(.985);
    transition:transform var(--d-4) var(--e-glide),opacity var(--d-3) var(--e-out),visibility 0s var(--d-4);
    box-shadow:var(--sh-5)}
  .sheet.on{opacity:1;transform:translate(-50%,-50%) scale(1);
    transition:transform var(--d-4) var(--e-spring),opacity var(--d-2) var(--e-out)}
  .grab{display:none}
  .sheetx{display:flex;align-items:center;justify-content:center}
  .sheet .in{padding:var(--s7) var(--s7)}
  .sheet h2,.sheet .quote{padding-right:46px}
  .ivhead{padding:var(--s5) var(--s6) var(--s3)}
  .ivhead .x{display:none}
  .ivbody{padding:var(--s5) var(--s6) var(--s2);max-height:52vh}
  .ivbar{padding:var(--s3) var(--s6) var(--s5)}
}

/* --------------------------------------------------------- share menu ----*/
.sharewrap{position:relative}
.sharemenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4);padding:var(--s2);
  min-width:212px;display:none;transform-origin:top right}
.sharemenu.on{display:block;animation:popIn var(--d-3) var(--e-spring) both}
.sharemenu button{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:transparent;border:0;padding:var(--s3);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--ink);cursor:pointer;
  transition:background var(--d-1) var(--e-out)}
.sharemenu button:hover{background:var(--sunk)}
.sharemenu button .si{color:var(--ink-3);display:flex;flex:0 0 auto}

/* ------------------------------------------------------------- toast -----*/
.toast{position:fixed;left:50%;bottom:var(--s7);z-index:60;visibility:hidden;
  background:var(--ink);color:var(--app);font-size:13px;font-weight:500;
  padding:var(--s3) var(--s5);border-radius:var(--r-full);
  opacity:0;transform:translate(-50%,14px) scale(.96);pointer-events:none;
  max-width:84%;text-align:center;box-shadow:var(--sh-4);
  transition:opacity var(--d-3) var(--e-out),transform var(--d-4) var(--e-spring),visibility 0s var(--d-4)}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}

/* ------------------------------------------------------- back to top -----*/
.totop{position:fixed;right:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));
  z-index:31;width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--line);
  padding:0;background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  color:var(--ink);cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:var(--sh-3);opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity var(--d-3) var(--e-out),transform var(--d-4) var(--e-spring)}
@media (max-width:720px){.totop{display:flex}}
.totop.article{display:flex}
.totop:not(.show){visibility:hidden}
.totop:focus-visible{position:fixed;z-index:31;border-radius:var(--r-full);box-shadow:var(--focus)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop.show:active{transform:scale(.9)}
@media (prefers-reduced-transparency:reduce){
  .totop{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ------------------------------------------------------- events panel ----*/
.evpanel{position:fixed;right:var(--s4);bottom:var(--s4);width:min(320px,calc(100vw - 32px));
  max-height:52vh;background:#131011;color:#F4F0E8;border-radius:var(--r-lg);
  padding:var(--s4);z-index:50;display:none;box-shadow:var(--sh-5);
  overflow-y:auto;scrollbar-width:none;transform-origin:bottom right}
.evpanel::-webkit-scrollbar{display:none}
.evpanel.on{display:block;animation:popIn var(--d-3) var(--e-spring) both}
.evpanel h4{margin:0 0 var(--s1);font-size:var(--fs-xs);font-weight:700}
.evpanel .hint{font-size:var(--fs-2xs);color:rgba(255,255,255,.45);margin-bottom:var(--s3);line-height:1.45}
.evpanel .e{font-size:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.1);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.8);
  word-break:break-word;animation:fade var(--d-3) var(--e-out) both}
.evpanel .e b{color:#F0B8C6;font-weight:700}
.evpanel .none{font-size:12px;color:rgba(255,255,255,.4)}

/* ------------------------------------------------------------- footer ----*/
.ft{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--app) 0%,var(--sunk) 26%,
    color-mix(in srgb,var(--sunk) 78%,var(--line)) 58%,
    color-mix(in srgb,var(--line) 84%,var(--sunk)) 100%)}
.ft .wrap{position:relative;z-index:2;padding:var(--s14) var(--s5) var(--s8)}
  /* the halftone footer plate was removed in v104 */
.ft-main{display:grid;grid-template-columns:260px 1fr;column-gap:110px;align-items:start}
.ft-brand .flogo{display:block;margin-bottom:var(--s5);border-radius:var(--r-xs)}
.ft-brand .flogo svg{display:block;height:26px;width:auto}
.ft-tag{margin:0 0 var(--s5);font-size:14px;line-height:1.63;color:var(--ink-2);max-width:32ch}
.ft-mail{display:inline-block;font-size:14px;line-height:20px;color:var(--accent-ink);
  margin-bottom:var(--s5);border-bottom:1px solid transparent;
  transition:border-color var(--d-2) var(--e-out)}
.ft-mail:hover{border-color:var(--accent-line)}
.ft-social{display:flex;gap:var(--s3);align-items:center}
.ft-circle{width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),transform var(--d-2) var(--e-spring)}
.ft-circle:hover{border-color:var(--ink-3);background:color-mix(in srgb,var(--ink) 5%,transparent);
  transform:translateY(-2px)}
.ft-circle svg{display:block}
.ft-circle svg path{fill:var(--ink-2)}

.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.ft-h{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);line-height:1.5}
.ft-col a,.ft-label{font-size:14px;line-height:20px;color:var(--ink-2)}
.ft-col a{cursor:pointer;
  transition:color var(--d-2) var(--e-out)}
.ft-col a:hover{color:var(--ink)}

.ft-bottom{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.ft-copy{font-size:var(--fs-3xs);line-height:1.5;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}

/* ================================ HOME ================================== */

/* ------------------------------------------------------------- imagery ---
   Every image is a rounded plate with a foot-gradient so white headlines can
   sit on it. Images fade up once decoded rather than snapping in.          */
/* The plate, the shimmer, the foot gradient and the crop are all driven by
   custom properties so a single modifier (.imtr, below) can neutralise them
   for images that carry real transparency. */
.im{position:relative;overflow:hidden;border-radius:var(--r-im);box-shadow:var(--sh-2);
  --im-plate:var(--line-3);--im-shim-a:var(--line-3);--im-shim-b:var(--line-2);
  --im-foot:rgba(12,10,11,.34);
  --im-fit:cover;--im-pos:center 28%;
  background:var(--im-plate);aspect-ratio:16/10;isolation:isolate}
.im img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--im-fit);border:0;
  /* bias the crop toward the top third: news photography puts faces there,
     and a centred crop on a portrait-shaped frame decapitates them */
  object-position:var(--im-pos);
  opacity:0;transition:opacity var(--d-5) var(--e-out),transform var(--d-6) var(--e-out)}
.im>.imratio{display:none}
.im img.ready,.im img[data-ready]{opacity:1}
.im::after{content:"";position:absolute;inset:0;border-radius:var(--r-im);pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,11,0) 45%,var(--im-foot) 100%)}
/* the plate holds a quiet shimmer until the photograph lands */
.im::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--im-shim-a) 30%,var(--im-shim-b) 46%,var(--im-shim-a) 62%);
  background-size:280% 100%;animation:shim 1.5s linear infinite}
.im:has(img.ready)::before,.im:has(img[data-ready])::before{animation:none;opacity:0;
  transition:opacity var(--d-4) var(--e-out)}
@keyframes shim{from{background-position:180% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.im::before{animation:none}}

/* ── Transparent images (alpha channel) ───────────────────────────────────
   A logo or cut-out has no photograph to hide the plate: the warm fill, the
   shimmer and the dark foot wash all read straight through its transparent
   pixels, and the cover-crop clips it at the frame edge. Such an image sits
   on whatever surface surrounds it — page or card, light theme or dark —
   and is shown whole. The server-rendered article route emits this class
   from its Sharp alpha probe; the client sets the same custom properties
   inline (never a runtime class — see adaptArtImages in js/app.js). */
.im.imtr{--im-plate:transparent;--im-shim-a:transparent;--im-shim-b:transparent;
  --im-foot:transparent;
  --im-fit:contain;--im-pos:center;box-shadow:none}
.im.imtr::before{animation:none}

.imchip{position:absolute;z-index:2;left:var(--s3);bottom:var(--s3);
  background:color-mix(in srgb,#fff 93%,transparent);border-radius:var(--r-full);
  padding:5px var(--s3);font-size:var(--fs-2xs);font-weight:700;color:#131011;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* one hover rule for every card that owns an image */
.lead2,.sart,.mini,.card,.tcard,.nbfeat,.nbcard,.hotfeat,.edchoice,.latest .big,.rail,.lead,.heroz .colC{
  transition:opacity var(--d-2) var(--e-out)}
.lead2 .im img,.sart .im img,.mini .im img,.card .im img,.tcard .im img,
.nbfeat .im img,.nbcard .im img,.hotfeat .im img,.edchoice .im img,.latest .big .im img{
  transition:opacity var(--d-5) var(--e-out),transform var(--d-6) var(--e-out)}
.lead2:hover .im img,.sart:hover .im img,.mini:hover .im img,.card:hover .im img,
.tcard:hover .im img,.nbfeat:hover .im img,.nbcard:hover .im img,.hotfeat:hover .im img,
.edchoice:hover .im img,.latest .big:hover .im img{transform:scale(1.04)}
.nbfeat:active .im img,.nbcard:active .im img,.card:active .im img,.tcard:active .im img{
  transform:scale(1.015);transition-duration:var(--d-1)}

/* the shared headline hover: one colour move, everywhere */
.lead:hover h2,.card:hover h2,.lead2:hover h2,.sart:hover h3,.mini:hover h3,
.heroz .colC:hover h2,.rail:hover .rt .a,.tcrow:hover .q,.hotrow:hover .hq2,
.hotfeat:hover .hq,.tcard:hover .tq,.nbfeat:hover .nbh,.nbcard:hover .nbh,
.latest .big:hover h3,.edchoice:hover h3,.prow:hover .pn2,.ccrow:hover .cq2,
.dep:hover .c,.assembled .srow:hover .sa{color:var(--accent-ink)}

/* --------------------------------------------------------- date stamp ---
   ONE treatment for every article date a reader sees — card meta rows, the
   compact latest list, news blocks, the article header, corrections and the
   cited-source list. The casing lives here rather than in the renderers, so
   no surface can be uppercased ad hoc while another stays mixed-case. Sits
   ahead of the surfaces that use it, and it carries the size and ink too:
   every stamp reads at one scale wherever it appears. */
.dstamp{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--ink-4);white-space:nowrap}
/* two hosts carry non-stamp content as well, so their own rules set a larger
   scale; the stamp restates itself against them rather than being weakened. */
.ameta .amt.dstamp,.amv.dstamp,.ahd.dstamp{font-size:var(--fs-2xs);color:var(--ink-4)}

/* ------------------------------------------------------------ date row ---*/
.daterow{display:flex;align-items:baseline;justify-content:space-between;padding:var(--s8) 0 0}
.daterow h1{font-family:var(--disp);font-size:var(--fs-3xl);font-weight:300;margin:0;
  letter-spacing:var(--tr-head)}
.daterow .d{font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------- section head --*/
.secthead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6)}
.secthead .st{font-family:var(--disp);font-size:var(--fs-2xl);font-weight:300;
  letter-spacing:var(--tr-head);color:var(--ink)}
/* the claims track uses .tcarhead, not .secthead — without it here the
   qualifier ran into the title as "Top claimsthis week" */
.secthead .sd,.tcarhead .sd{font-size:var(--fs-xs);color:var(--ink-3);margin-left:var(--s3)}
.secthead .va{font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  transition:color var(--d-2) var(--e-out),gap var(--d-2) var(--e-out)}
.secthead .va:hover{color:var(--accent-ink);gap:9px}
.vamob{display:none}
.sect{font-size:13px;font-weight:700;color:var(--ink-3);margin:var(--s1) 0 var(--s4);
  letter-spacing:.02em}
.kk{font-size:var(--fs-3xs);font-weight:700;color:var(--accent-ink);letter-spacing:var(--tr-caps);
  text-transform:uppercase;margin-bottom:7px}

/* ----------------------------------------------------------- hero zone ---*/
.heropanel{background:var(--app);margin-bottom:var(--s14)}
.heroz{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s12);
  padding:var(--s7) 0 var(--s12);align-items:start}
.lead2{position:sticky;top:84px;cursor:pointer}
.lead2 .im{aspect-ratio:16/10;margin-bottom:var(--s6)}
.lead2 h2{font-family:var(--disp);font-weight:300;font-size:var(--fs-lead);
  line-height:var(--lh-tight);margin:0 0 var(--s4);letter-spacing:var(--tr-tight);
  transition:color var(--d-2) var(--e-out)}
.lead2 .dek{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4);
  max-width:52ch}

.sidestack{min-width:0}
.sart{display:block;padding:0 0 var(--s7);margin-bottom:var(--s7);
  border-bottom:1px solid var(--line-2);cursor:pointer}
.sart:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sart .im{aspect-ratio:16/9;margin-bottom:var(--s4)}
.sart h3{font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.28;
  margin:0 0 var(--s2);letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.sart .dek{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s3)}

.mini{cursor:pointer;margin-bottom:var(--s6)}
.mini:last-child{margin-bottom:0}
.mini .im{aspect-ratio:4/3;margin-bottom:var(--s3);box-shadow:none}
.mini h3{font-family:var(--disp);font-size:17.5px;line-height:1.28;font-weight:300;margin:0;
  letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}

.heroz .colC .im{aspect-ratio:16/10;margin-bottom:var(--s5)}
.heroz .colC h2{font-family:var(--disp);font-size:var(--fs-3xl);line-height:1.2;font-weight:300;
  margin:0 0 var(--s3);letter-spacing:var(--tr-tight)}
.heroz .colC .dek{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)}
.heroz .colC .cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:var(--fs-xs);
  color:var(--ink-3)}
.heroz .colC .cmeta .o{color:var(--ink-2);font-weight:500}

/* legacy lead (category pages) */
.lead{display:grid;grid-template-columns:7fr 5fr;gap:var(--s8);align-items:center;
  padding-bottom:var(--s8);border-bottom:1px solid var(--line-2);margin-bottom:var(--s8);cursor:pointer}
.lead h2{font-family:var(--disp);font-size:33px;line-height:1.18;font-weight:300;
  margin:0 0 var(--s3);letter-spacing:var(--tr-tight)}
.lead .dek{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s4)}
.src{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)}
.src .o{color:var(--ink-2);font-weight:500}
.src .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}

.claimcount{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s3);
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--s2) var(--s3);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;
  font-family:inherit;text-align:left;
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out)}
.claimcount:hover{border-color:var(--ink-4)}
.claimcount b{color:var(--ink);font-weight:700}
.cdots{display:flex;gap:2px;flex:0 0 auto}
.cdots i{width:5px;height:5px;border-radius:50%;display:block}

/* --------------------------------------------------------- top claims ----*/
.topclaims{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.topclaims .tch{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:2px}
.topclaims .tch .a{font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--accent-ink)}
.topclaims .tch .b{font-size:var(--fs-2xs);color:var(--ink-3)}
.tcrow{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer;
  font-family:inherit;color:inherit}
.tcrow:last-of-type{border-bottom:0}
.tcrow .q{display:block;font-family:var(--disp);font-weight:300;font-size:17.5px;line-height:1.34;
  letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.tcrow .s{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);margin-top:var(--s2)}
.tcrow .s i,.hs i,.hs2 i,.cs2 i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto}
.tcall{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--s3);margin-top:var(--s5);font-family:inherit;font-size:13px;font-weight:700;
  color:var(--ink);cursor:pointer;
  transition:border-color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.tcall:hover{border-color:var(--ink-4)}
.tcall:active{transform:scale(.985)}

/* ------------------------------------------------------- claims track ----*/
.tcar{margin-bottom:var(--s14)}
.tcarhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6)}
.tcarhead .st{font-family:var(--disp);font-weight:300;font-size:var(--fs-2xl);
  letter-spacing:var(--tr-head);color:var(--ink)}
.tcarnav{display:flex;gap:var(--s2);flex:0 0 auto}
.tcarnav button{width:38px;height:38px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink);padding:0;
  transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
    opacity var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.tcarnav button:hover:not([disabled]){border-color:var(--ink-4);box-shadow:var(--sh-3)}
.tcarnav button:active:not([disabled]){transform:scale(.92)}
.tcarnav button[disabled]{opacity:.3;cursor:default}
.tcartrack{display:flex;gap:var(--s6);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px;
  margin-right:calc(50% - 50vw);
  /* the track fades at the viewport edge instead of being cut */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%)}
.tcartrack::-webkit-scrollbar{display:none}
.tcard{flex:0 0 clamp(266px,26.5vw,392px);min-width:0;scroll-snap-align:start;cursor:pointer;
  display:flex;flex-direction:column}
.tcard .im{aspect-ratio:16/10;margin-bottom:var(--s4)}
.tcard .tgs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--s3)}
.tg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:var(--r-full);padding:5px var(--s3);font-size:var(--fs-2xs);font-weight:500;
  color:var(--ink-2);background:var(--card);white-space:nowrap}
.tcard .tq{display:block;font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.3;
  letter-spacing:var(--tr-snug);margin-bottom:var(--s3);transition:color var(--d-2) var(--e-out)}
.tcard .tm{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-2xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:auto}
.tcard .tm i{width:3px;height:3px;border-radius:50%;background:var(--ink-4);display:block;flex:0 0 auto}

/* --------------------------------------------------- hot on the internet -*/
.hotsec{margin-bottom:var(--s14);background:var(--deep);padding:var(--s12) 0 var(--s14);color:#fff}
.hotsec .secthead{border-top:0;padding-top:0}
.hotsec .secthead .st{color:#fff}
.hottabs{display:flex;gap:var(--s4);margin:2px 0 var(--s7);overflow-x:auto;scrollbar-width:none}
.hottabs::-webkit-scrollbar{display:none}
.hottab{position:relative;background:transparent;border:0;padding:0 0 var(--s3);cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;
  flex:1 1 0;min-width:72px;text-align:left;color:rgba(255,255,255,.55);
  transition:color var(--d-2) var(--e-out)}
.hottab:hover{color:#fff}
.hottab.on{color:#fff;font-weight:700}
.hottab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  border-radius:var(--r-full);background:rgba(255,255,255,.2)}
.hottab .fill{position:absolute;left:0;bottom:0;height:5px;border-radius:var(--r-full);
  background:#fff;width:0;z-index:1;pointer-events:none}
.hottab.done .fill{width:100%}
.hottab.on .fill{animation:hotfill 8s linear forwards}
.hotsec.hotpaused .hottab.on .fill{animation-play-state:paused}
@keyframes hotfill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.hottab.on .fill{animation:none;width:100%}}

.hotgrid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.hotfeat{padding-right:var(--s8);border-right:1px solid var(--line-2);cursor:pointer}
.hotfeat .im{aspect-ratio:16/10;margin-bottom:var(--s4)}
.hotfeat .hq{font-family:var(--disp);font-weight:300;font-size:22px;line-height:1.32;
  letter-spacing:var(--tr-head);transition:color var(--d-2) var(--e-out)}
.hotfeat .hs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);
  margin-top:var(--s3)}
.hotlist{padding-left:var(--s8);display:flex;flex-direction:column;justify-content:center;gap:var(--s8)}
.hotrow{display:block;width:100%;text-align:left;background:transparent;border:0;padding:0;
  cursor:pointer;font-family:inherit;color:inherit}
.hotrow .hq2{display:block;font-family:var(--disp);font-weight:300;font-size:17.5px;line-height:1.34;
  letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.hotrow .hs2{display:flex;align-items:center;gap:7px;font-size:var(--fs-2xs);color:var(--ink-3);
  margin-top:var(--s2)}

.hotsec .hotfeat{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-im);padding:var(--s4);
  display:flex;flex-direction:column;
  transition:border-color var(--d-3) var(--e-out),background var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out)}
.hotsec .hotfeat:hover,.hotsec .hotrow:hover{border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.055);transform:translateY(-2px)}
.hotsec .hotfeat .im{margin-bottom:var(--s4);aspect-ratio:auto;flex:1;min-height:0}
.hotsec .hotfeat .hq,.hotsec .hotfeat .hs{padding:0 3px}
.hotsec .hotfeat .hs{margin-bottom:2px}
.hotsec .hotgrid{margin-top:var(--s8);gap:var(--s5);height:500px}
.hotsec .hotfeat .hq,.hotsec .hotrow .hq2{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.hotsec .hotlist{display:grid;grid-template-rows:repeat(4,1fr);gap:var(--s3);padding:0;
  justify-content:stretch}
.hotsec .hotrow{display:flex;flex-direction:column;justify-content:center;border-bottom:0;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-im);padding:var(--s4) var(--s5);
  transition:border-color var(--d-3) var(--e-out),background var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out)}
.hotsec .hotrow .hq2{font-size:16.5px}
.hotsec .hotrow .hs2{margin-top:7px}
.hotsec .hq,.hotsec .hq2{color:#fff}
.hotsec .hotfeat:hover .hq,.hotsec .hotrow:hover .hq2{color:#F5C3CF}
.hotsec .hs,.hotsec .hs2{color:rgba(255,255,255,.55)}
.hotsec .hotfeat,.hotsec .hotrow{animation:riseIn var(--d-5) var(--e-out) both}
.hotsec .hotrow:nth-child(1){animation-delay:60ms}
.hotsec .hotrow:nth-child(2){animation-delay:120ms}
.hotsec .hotrow:nth-child(3){animation-delay:180ms}
.hotsec .hotrow:nth-child(4){animation-delay:240ms}

/* ------------------------------------------- people + contribution boxes -*/
.twobox{display:grid;grid-template-columns:1fr 1fr;gap:0;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-im);overflow:hidden;margin-bottom:var(--s12)}
.twobox.one{grid-template-columns:1fr}
.tbox{background:transparent;padding:var(--s7) var(--s7) var(--s8)}
.tbox:first-child{border-right:1px solid var(--line)}
.tbh{font-family:var(--disp);font-weight:300;font-size:var(--fs-xl);line-height:1.25;
  letter-spacing:var(--tr-head);color:var(--ink)}
.tbs{font-size:var(--fs-xs);color:var(--ink-3);line-height:var(--lh-body);margin-top:7px;
  padding-bottom:6px}

.prow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:baseline;
  column-gap:var(--s4);text-align:left;background:transparent;border:0;
  padding:var(--s4) var(--s3);margin:0 calc(var(--s3) * -1);width:calc(100% + var(--s6));
  border-radius:var(--r-sm);cursor:pointer;font-family:inherit;color:inherit;
  transition:background var(--d-2) var(--e-out)}
.prow + .prow,.ccrow + .ccrow{box-shadow:0 -1px 0 var(--line-2)}
.prow:hover,.ccrow:hover{background:var(--sunk);box-shadow:none}
.prow:hover + .prow,.ccrow:hover + .ccrow{box-shadow:none}
.pav2{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);letter-spacing:.04em;
  background:none;width:auto;height:auto;border-radius:0;
  transition:color var(--d-2) var(--e-out)}
.prow:hover .pav2{color:var(--accent-ink)}
.prow .pt{min-width:0;display:block}
.pn2{display:block;font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.35;
  letter-spacing:var(--tr-snug);color:var(--ink);transition:color var(--d-2) var(--e-out)}
.pr2{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s1);line-height:1.4}
.pc{font-size:var(--fs-3xs);font-weight:700;color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;background:none;border:0;padding:0}

.ccrow{display:block;text-align:left;background:transparent;border:0;font-family:inherit;
  color:inherit;padding:var(--s4) var(--s3);margin:0 calc(var(--s3) * -1);
  width:calc(100% + var(--s6));border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--d-2) var(--e-out)}
.cq2{display:block;font-family:var(--disp);font-weight:300;font-size:17px;line-height:1.36;
  letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.cs2{display:flex;align-items:center;gap:7px;font-size:var(--fs-2xs);color:var(--ink-3);margin:var(--s2) 0 0}

/* -------------------------------------------------------- news blocks ----*/
.newsblock{background:transparent;border:1px solid var(--line);border-radius:var(--r-im);
  overflow:hidden;margin-bottom:var(--s14)}
.nbfeat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center;
  padding:var(--s7);cursor:pointer;transition:background var(--d-3) var(--e-out)}
.nbfeat:hover,.nbcard:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.nbfeat .im{aspect-ratio:16/10;box-shadow:none}
.nbrow{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.nbcard{padding:var(--s7);cursor:pointer;min-width:0;border-left:1px solid var(--line);
  display:flex;flex-direction:column;transition:background var(--d-3) var(--e-out)}
.nbcard:first-child{border-left:0}
.nbcard .im{aspect-ratio:16/10;margin-bottom:var(--s5);box-shadow:none}
.nbtx{display:block;min-width:0}
.nbcard .nbtx{display:flex;flex-direction:column;flex:1}
.nbm{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.nbtag{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--accent-line);border-radius:var(--r-full);
  padding:5px var(--s3);line-height:1;white-space:nowrap}
.nbdate{white-space:nowrap}
.nbh{display:block;font-family:var(--disp);font-weight:300;line-height:1.22;
  letter-spacing:var(--tr-head);margin-bottom:var(--s3);transition:color var(--d-2) var(--e-out)}
.nbfeat .nbh{font-size:28px}
.nbcard .nbh{font-size:19.5px;line-height:1.28;letter-spacing:var(--tr-snug);margin-bottom:var(--s3)}
.nbd{display:block;color:var(--ink-2);margin-bottom:var(--s5)}
.nbfeat .nbd{font-size:15px;line-height:1.6}
.nbcard .nbd{font-size:var(--fs-sm);line-height:var(--lh-body);flex:1}
.nbcard .amstats{align-self:flex-start;margin-left:0}
.newsgrid{background:transparent;border:1px solid var(--line);border-radius:var(--r-im);
  overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:var(--s14)}
.newsgrid .nbcard{border-left:1px solid var(--line)}
.newsgrid .nbcard:nth-child(4n+1){border-left:0}
.newsgrid .nbcard:nth-child(n+5){border-top:1px solid var(--line)}

/* --------------------------------------------------------- latest, grid --*/
.latest{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:var(--s14)}
.latest .big{padding-right:var(--s8);border-right:1px solid var(--line-2);cursor:pointer}
.latest .big .im{aspect-ratio:16/10;margin-bottom:var(--s4)}
.latest .big h3{font-family:var(--disp);font-size:22px;line-height:1.24;font-weight:300;
  margin:0 0 var(--s3);letter-spacing:var(--tr-head)}
.latest .big .dek{font-size:14px;line-height:var(--lh-body);color:var(--ink-2);margin:0}
.latest .side{padding-left:var(--s8)}

.rail{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.rail:first-child{padding-top:0}
.rail:last-child{border-bottom:0;padding-bottom:0}
.rail .rth{display:block;width:76px;height:66px;border-radius:var(--r-im);flex:0 0 auto;
  background:var(--line-3);position:relative;overflow:hidden}
.rail .rth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-6) var(--e-out)}
.rail:hover .rth img{transform:scale(1.06)}
.rail .rt{display:block;flex:1;min-width:0}
.rail .rt .a{display:block;font-family:var(--disp);font-size:16px;font-weight:300;line-height:1.28;
  letter-spacing:var(--tr-snug);color:var(--ink);transition:color var(--d-2) var(--e-out)}
.rail .rt .b{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:7px}

.edchoice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center;
  padding-bottom:var(--s14);border-bottom:1px solid var(--line-2);margin-bottom:var(--s14);cursor:pointer}
.edchoice h3{font-family:var(--disp);font-size:var(--fs-2xl);line-height:1.24;font-weight:300;
  margin:0 0 var(--s3);letter-spacing:var(--tr-head)}
.edchoice .dek{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)}
.edchoice .im{aspect-ratio:4/3}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8) var(--s7);margin-bottom:var(--s12)}
.grid.grid2{margin-bottom:var(--s14)}
.card{cursor:pointer;min-width:0}
.card .im{display:block;margin-bottom:var(--s3);min-height:1px}
.card .im>.imratio{display:block;position:relative;width:100%;height:auto}
.card h2{font-family:var(--disp);font-size:18.5px;line-height:1.27;font-weight:300;
  margin:0 0 var(--s2);letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.card .dek{font-size:14px;line-height:1.48;color:var(--ink-2);margin:0 0 var(--s3)}
.card .src{font-size:12px}
.card .claimcount{margin-top:var(--s3);padding:7px var(--s3);font-size:var(--fs-2xs)}

/* ------------------------------------------------- the closing statement -
   v13 composition: the statement sits beside a looping mark rather than under
   a logo chip. The source has a black ground rather than an alpha channel, so
   `screen` drops it into the gradient without a visible box. */
.synth{border:0;border-radius:var(--r-im);
  background:linear-gradient(90deg,#56001E 0%,#921943 100%);
  margin-bottom:var(--s14);box-shadow:none;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:44px;padding:48px 46px;text-align:left}
.synth .stx{position:relative;z-index:1;display:block;flex:1 1 auto;min-width:0;max-width:62ch}
.synthvid{flex:0 0 auto;margin-left:auto;width:clamp(150px,17vw,248px);height:auto;display:block;
  mix-blend-mode:screen;pointer-events:none;user-select:none}
.synth .sa{display:block;font-family:var(--disp);font-weight:300;font-size:25px;line-height:1.3;
  color:#fff;letter-spacing:var(--tr-head);margin-bottom:var(--s4)}
.synth .sb{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.74);margin-top:0;line-height:1.65}
.synth .sb b{color:#fff;font-weight:500}
@media (max-width:900px){
  .synth{gap:var(--s7);padding:36px 30px}
  .synth .stx{max-width:none}
  .synthvid{width:clamp(112px,16vw,160px)}
}

/* ======================= STORY + THE CLAIM SUBSTRATE ==================== */

.art{padding:var(--s7) 0 var(--s24);max-width:790px}
.artto{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6)}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);
  cursor:pointer;background:transparent;border:0;padding:0;
  transition:color var(--d-2) var(--e-out),gap var(--d-2) var(--e-out)}
.backlink:hover{color:var(--ink);gap:10px}
.art .kick{font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);margin-bottom:var(--s3);
  letter-spacing:.04em;text-transform:uppercase}
.art h1{font-family:var(--disp);font-size:var(--fs-4xl);line-height:var(--lh-tight);font-weight:400;
  margin:0 0 var(--s4);letter-spacing:var(--tr-tight)}
.art .dek{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s3);
  max-width:60ch}
.artby{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6)}
.art .byline{font-size:var(--fs-sm);line-height:var(--lh-body);font-weight:700;color:var(--ink);
  margin:0;min-width:0}
.artby .sharewrap{flex:0 0 auto}
.art .hero{margin-bottom:var(--s6)}
figure.hero{margin:0}
.art .hero figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s2)}
/* Article image frame — one frame for the cover and every inline section
   image (the server emits .imcover on both). Full content-column width at a
   fixed 16/9, so the masthead-to-image rhythm never changes between articles
   and no figure down the page is a different width from the one above it.
   Only the fit adapts, and only through the frame's custom properties: .imfit
   contains the image on the plate (scale-down, so a sub-column source is never
   enlarged into blur and an extreme panorama/portrait is never reduced to a
   slice), everything else keeps the top-biased cover crop. */
.art .im.imcover{aspect-ratio:16/9;width:100%}
.art .im.imcover.imfit{--im-fit:scale-down;--im-pos:center}
.art .bimg{margin:var(--s7) 0}
.art .bimg .im{aspect-ratio:16/9}
.art .bimg figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s2)}
/* Two caption registers. An image that is itself evidence keeps the "Source:"
   line, linked out where upstream carries a provenance URL; a decorative image
   carries a plain credit instead, set on its own line and quieter than the
   sentence so it reads as attribution rather than as a claim — and no prose,
   because upstream's caption for decoration is the generation prompt. */
.art figcaption .imsrc{color:var(--ink-3)}
.art figcaption .imsrc a{color:var(--t3-ink);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--t3-ln);text-underline-offset:3px}
.art figcaption.imcred .imcx{display:block;margin-top:3px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);opacity:.8}

/* ------------------------------------------------- how it was assembled --*/
.assembled{border:1px solid var(--line);border-radius:var(--r-im);background:var(--card);
  padding:var(--s4);margin-bottom:var(--s7);box-shadow:var(--sh-2)}
.assembled .srow{display:flex;align-items:center;gap:var(--s3);cursor:pointer}
.assembled .schev{color:var(--ink-3);flex:0 0 auto;display:flex;
  transition:transform var(--d-2) var(--e-out)}
.assembled .srow:hover .schev{transform:translateX(3px)}
.assembled .smark{width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.assembled .stx{flex:1;min-width:0}
.assembled .sa{display:block;font-size:14px;font-weight:700;line-height:1.3;
  transition:color var(--d-2) var(--e-out)}
.assembled .sb{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}
.assembled .snote{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-2);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.assembled .snote b{color:var(--ink);font-weight:700}
.assembled .snote a{color:var(--t3-ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--t3-ln);text-underline-offset:3px}

/* ----------------------------------------------- the verified-layer switch */
.layerrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer}
.layerrow .t{flex:1;min-width:0;display:block}
.layerrow .t .a{display:block;font-size:14px;font-weight:500;line-height:1.35}
.layerrow .t .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px;line-height:1.4}
.sw{width:44px;height:26px;border-radius:var(--r-full);background:var(--line);position:relative;
  flex:0 0 auto;display:block;transition:background var(--d-3) var(--e-out)}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;display:block;box-shadow:0 1px 3px rgba(19,16,17,.3);
  transition:transform var(--d-4) var(--e-spring),width var(--d-2) var(--e-out)}
.layerrow:active .sw i{width:24px}
.layerrow.on .sw{background:var(--accent)}
.layerrow.on .sw i{transform:translateX(18px)}
.layerrow.on:active .sw i{transform:translateX(14px)}

/* ------------------------------------------------------------- legend ----*/
.legend{display:none;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:var(--s4) 0;
  margin-bottom:var(--s7)}
@media (max-width:720px){.legend{display:flex}.art.plain .legend{display:none}}
.legend .ls{display:flex;flex-wrap:wrap;gap:var(--s4)}
.legend .li{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ink-2)}
.legend .li i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto}
.legend .lt{font-size:var(--fs-xs);color:var(--ink-3)}

/* ------------------------------------------------------- article body ----
   Claims are marked with a real underline, not a box-shadow: it skips
   descenders, breaks correctly across lines, and survives text zoom. The two
   uncertain tiers additionally carry a tint, because those are the sentences
   the reader is being asked to help with.                                  */
.art p{font-size:var(--fs-lg);line-height:var(--lh-read);margin:0 0 var(--s5)}
/* section heads inside a piece — deliberately quiet, so they organise the
   read without competing with the headline or the claim underlines */
.art .bsub{font-family:var(--disp);font-size:var(--fs-2xl);line-height:var(--lh-head);
  font-weight:300;letter-spacing:var(--tr-head);color:var(--ink);
  margin:var(--s8) 0 var(--s5);max-width:34ch}
.art .bsub:first-of-type{margin-top:var(--s7)}
/* The rest of what an article body can contain. Published bodies come from
   upstream, so they carry more than paragraphs and subheads: quotes, lists
   and inline links. Without these each falls to a browser default — a list
   set at interface size inside reading copy, a link with no affordance at
   all — so every one is given the design's type. Scoped to the body flow
   (direct children of .art) so the bibliography, the corrections note and
   the page controls keep their own treatment.                             */
.art > blockquote{margin:var(--s6) 0 var(--s6) 0;padding-left:var(--s5);
  border-left:2px solid var(--line);
  font-family:var(--disp);font-size:var(--fs-xl);font-weight:300;
  line-height:var(--lh-head);letter-spacing:var(--tr-head);color:var(--ink)}
.art > blockquote p{font-size:inherit;line-height:inherit;margin:0 0 var(--s3)}
.art > blockquote > :last-child{margin-bottom:0}
.cqt .katex,.art blockquote .katex{color:inherit}
.cqt .katex math[display="block"],.art blockquote .katex math[display="block"]{
  overflow-x:auto;overflow-y:hidden;margin:var(--s3) 0}
.art > ul,.art > ol{font-size:var(--fs-lg);line-height:var(--lh-read);
  margin:0 0 var(--s5);padding-left:var(--s6)}
.art > ul li,.art > ol li{margin:0 0 var(--s2)}
.art > ul ul,.art > ol ol,.art > ul ol,.art > ol ul{margin:var(--s2) 0 0}
.art > ul li::marker,.art > ol li::marker{color:var(--ink-3)}
/* links in reading copy read as the settled tier does elsewhere: an
   underline in its ink, never a colour change alone */
.art > p a,.art > ul a,.art > ol a,.art > blockquote a,.art > .bsub a{
  color:var(--t3-ink);text-decoration:underline;
  text-decoration-color:var(--t3-ln);text-underline-offset:3px;
  transition:text-decoration-color var(--d-2) var(--e-out)}
.art > p a:hover,.art > ul a:hover,.art > ol a:hover,.art > blockquote a:hover{
  text-decoration-color:var(--t3)}
.cl{cursor:pointer;border-radius:3px;padding:1px 0;
  text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  text-decoration-skip-ink:auto;
  transition:background var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)}
.cl[data-t="1"]{text-decoration-color:var(--t1);text-decoration-style:dashed;background:var(--t1-bg)}
.cl[data-t="2"]{text-decoration-color:var(--t2);background:var(--t2-bg)}
/* the two settled tiers carry no tint, so their rule does all the work of
   telling them apart — at --tN-ln both read as the same grey on cream */
.cl[data-t="3"]{text-decoration-color:color-mix(in srgb,var(--t3) 68%,transparent)}
.cl[data-t="4"]{text-decoration-color:color-mix(in srgb,var(--t4) 68%,transparent)}
.cl:hover[data-t="1"]{background:color-mix(in srgb,var(--t1-bg) 60%,var(--t1-ln))}
.cl:hover[data-t="2"]{background:color-mix(in srgb,var(--t2-bg) 60%,var(--t2-ln))}
.cl:hover[data-t="3"]{background:var(--t3-bg);text-decoration-color:var(--t3)}
.cl:hover[data-t="4"]{background:var(--t4-bg);text-decoration-color:var(--t4)}
.cl.mine{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:3px}

/* rail card hover lights its sentence and vice versa — the pair is one object */
.cl.lit[data-t="1"]{background:color-mix(in srgb,var(--t1-bg) 30%,var(--t1-ln));text-decoration-color:var(--t1)}
.cl.lit[data-t="2"]{background:color-mix(in srgb,var(--t2-bg) 30%,var(--t2-ln));text-decoration-color:var(--t2)}
.cl.lit[data-t="3"]{background:color-mix(in srgb,var(--t3-bg) 40%,var(--t3-ln));text-decoration-color:var(--t3)}
.cl.lit[data-t="4"]{background:color-mix(in srgb,var(--t4-bg) 40%,var(--t4-ln));text-decoration-color:var(--t4)}

/* with the layer off the article reads as ordinary prose */
.art.plain .cl{background:none!important;text-decoration-line:none!important;cursor:default}
.art.plain .legend{display:none}
/* the layer toggle is a real state change, so the body acknowledges it */
.art{transition:none}
.art.layerflip p{animation:layerFlip var(--d-5) var(--e-out) both}
@keyframes layerFlip{from{opacity:.55}to{opacity:1}}

.origin{background:var(--sunk);border-radius:var(--r);padding:var(--s4);margin:var(--s8) 0 0}
.origin .k{font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:7px;
  letter-spacing:.05em;text-transform:uppercase}
.origin p{font-size:var(--fs-sm);line-height:1.6;margin:0;color:var(--ink-2)}
.origin .corr+.corr{margin-top:var(--s4)}
.origin a{color:var(--t3-ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--t3-ln);text-underline-offset:3px}

/* --------------------------------------------------------------- CTAs ----*/
.cta{border:1px solid var(--line);border-radius:var(--r-im);background:var(--card);
  box-shadow:var(--sh-2);padding:var(--s6);margin-top:var(--s8)}
.cta h3{font-family:var(--disp);font-size:var(--fs-xl);font-weight:300;margin:0 0 var(--s2);
  line-height:1.3;letter-spacing:var(--tr-head)}
.cta p{font-size:14px;line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s4)}
.cta .row{display:flex;gap:var(--s3);flex-wrap:wrap}

.btn{border:0;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);
  padding:var(--s3) var(--s5);font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px -14px var(--accent);
  transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out),
    filter var(--d-2) var(--e-out)}
.btn:hover{box-shadow:0 14px 30px -14px var(--accent);filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink-4);filter:none}
.btn.dark{background:var(--ink);color:var(--app);box-shadow:none}
.btn.dark:hover{filter:brightness(1.18)}
.btn.sm{padding:9px var(--s4);font-size:var(--fs-xs);box-shadow:none}
.btn.sm.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* ---------------------------------------------------- invited banner -----*/
.invite{background:var(--deep);color:#fff;border-radius:var(--r-im);padding:var(--s5) var(--s6);
  margin:var(--s7) 0 0;position:relative;overflow:hidden}
.invite::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 100% 0%,rgba(240,184,198,.16),transparent 60%)}
.invite > *{position:relative}
.invite .tag{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-2xs);font-weight:700;
  color:#F0B8C6;margin-bottom:var(--s3);letter-spacing:.05em;text-transform:uppercase}
.invite h3{font-family:var(--disp);font-size:22px;line-height:1.3;font-weight:300;margin:0 0 var(--s2)}
.invite p{margin:0 0 var(--s4);font-size:14px;line-height:var(--lh-body);color:rgba(255,255,255,.74)}
.invite .go{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.invite .b{background:#fff;color:var(--deep);border:0;border-radius:var(--r-full);
  padding:var(--s3) var(--s5);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out)}
.invite .b:hover{box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.invite .b:active{transform:scale(.97)}
.invite .l{background:transparent;border:0;color:rgba(255,255,255,.68);font-size:13px;
  cursor:pointer;padding:var(--s3) 2px;text-decoration:underline;text-underline-offset:3px;
  transition:color var(--d-2) var(--e-out)}
.invite .l:hover{color:#fff}

/* ------------------------------------------------- article + claim rail --*/
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s14);align-items:stretch}
.clrail{align-self:stretch;padding-top:var(--s7)}
.bodytop,.artend{display:block;height:0;overflow:hidden}
.sharehold{position:relative}
.railclaims{position:sticky;top:78px;padding-top:0}
.clrail .rh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3)}
.clrail .rh .a{font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--accent-ink)}
.clrail .rh .b{font-size:var(--fs-2xs);color:var(--ink-3)}
/* The stack scrolls on its own inside the sticky column. Its height leaves
   room for the rail heading above and the "All sources" button below, so a
   card is never parked underneath the button, and the bottom of the last card
   clears the fade instead of being eaten by it — the overflow cue is the
   .clfade overlay below, switched off once the stack is scrolled to the end. */
.clwrap{position:relative}
.clstack{max-height:calc(100vh - 225px);overflow-y:auto;scrollbar-width:none;
  margin:0 -4px;padding:4px 4px var(--s5);scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 100%)}
.clstack::-webkit-scrollbar{display:none}
.clfade{position:absolute;left:0;right:0;bottom:0;height:52px;display:block;
  pointer-events:none;opacity:0;transition:opacity var(--d-2) var(--e-out);
  background:linear-gradient(180deg,transparent 0,var(--app) 78%)}
.clfade::after{content:"";position:absolute;left:50%;bottom:9px;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateX(-50%) rotate(45deg)}
.clwrap.more .clfade{opacity:1}
.viewall{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--s3) var(--s4);margin-top:var(--s3);cursor:pointer;font-family:inherit;
  font-size:var(--fs-xs);font-weight:700;color:var(--ink);
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),
    transform var(--d-1) var(--e-out)}
.viewall:hover{border-color:var(--ink-4);background:var(--sunk)}
.viewall:active{transform:scale(.985)}
.viewall .n{color:var(--ink-3);font-weight:500}

/* --------------------------------------------------------- claim card ----
   One flat surface inside a single border: the source's identity, the sentence
   it carries, and — under a hairline — the quiet attribution and citation
   chips. Nothing inside the card changes background; the only colour on it is
   the maroon accent on the kind label and the citation chips.              */
.clcard{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;border-radius:var(--r-im);padding:0;
  margin:0 0 var(--s7);border:1px solid;
  transition:box-shadow var(--d-3) var(--e-out),transform var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out)}
.clcard:last-child{margin-bottom:var(--s1)}
.clcard:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.clcard:active{transform:translateY(0) scale(.995);transition-duration:var(--d-1)}
.clcard .chd{display:flex;align-items:center;gap:var(--s2);padding:var(--s5) var(--s4) var(--s5)}
.clcard .cic{display:flex;flex:0 0 auto}
.clcard .clb{font-size:13px;font-weight:700;letter-spacing:var(--tr-snug);flex:1;min-width:0}
/* The heading is the source's identity: its type label, then the document it
   names, on one line with a single separator. Long titles clamp so a card
   cannot grow taller than the sentence it stands under. */
.clcard .clb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;line-height:1.35}
.clcard .ckl + .clt::before{content:"\00b7";margin:0 5px;color:var(--ink-4)}
.clcard .cat{display:block;margin-top:0;font-size:var(--fs-2xs);line-height:1.4;
  color:var(--ink-3);font-weight:500}
.clcard .cac{font-size:12px;font-weight:700;flex:0 0 auto;opacity:.85;white-space:nowrap}
/* the body is a column so the quiet material — who it was, its numbers and its
   date — gathers under the hairline, whatever order the markup contract puts
   those spans in */
.clcard .cbd{display:flex;flex-direction:column;background:none;
  padding:0 var(--s4) var(--s5)}
.clcard .cqt{order:1}
.clcard .cdv{order:2}
.clcard .cat{order:3}
.clcard .csr{order:4}
.clcard .cqt{display:block;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--ink)}
.clcard .cdv{display:block;height:1px;background:var(--line-2);margin:var(--s3) 0}
.clcard .csr{display:block;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-3)}
.clcard .csr b{color:var(--accent-ink);font-weight:700}
.clcard .cnd{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:16px;height:16px;
  border-radius:50%;display:block;border:4px solid;
  background:var(--tier);border-color:var(--tring)}

.clcard.t1{--tier:var(--t1);--tint:var(--t1-bg);--tline:var(--t1-ln);--tring:var(--app)}
.clcard.t2{--tier:var(--t2);--tint:var(--t2-bg);--tline:var(--t2-ln);--tring:var(--app)}
.clcard.t3{--tier:var(--t3);--tint:var(--t3-bg);--tline:var(--t3-ln);--tring:var(--app)}
.clcard.t4{--tier:var(--t4);--tint:var(--t4-bg);--tline:var(--t4-ln);--tring:var(--app)}
.clcard{background:var(--tint);border-color:var(--tline)}
.clcard .cic,.clcard .clb,.clcard .cac{color:var(--tier)}
.clcard.lit{box-shadow:0 0 0 2px var(--tline),var(--sh-3);transform:translateY(-2px)}
.clcard.mine{box-shadow:0 0 0 2px var(--accent-line)}
.clcard.mine:hover{box-shadow:0 0 0 2px var(--accent),var(--sh-3)}

/* ---------------------------------------------------- source attribution -*/
.srcbar{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line-2)}
.srcbar .sleft{flex:1;min-width:0;display:block}
.srcbadges{display:flex;align-items:center;margin-bottom:var(--s3)}
.srcbadge{width:37px;height:37px;border-radius:var(--r-full);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
  flex:0 0 auto;border:2.5px solid var(--card);margin-left:-11px;background:var(--ink-2);
  position:relative;overflow:hidden;
  transition:transform var(--d-3) var(--e-spring),z-index 0s}
.srcbadges:hover .srcbadge{transform:translateY(-2px)}
.srcbadge .ini{position:relative;z-index:1}
.srcbadge img{position:absolute;inset:0;z-index:2;background:#fff;object-fit:contain;padding:14%;
  width:100%;height:100%;border-radius:var(--r-full)}
/* a contributor's face fills its circle — a logo is inset on white, a person
   is cropped to the disc; the initials stay underneath either way */
.srcbadge img.face{background:transparent;object-fit:cover;padding:0}
.srcbadge:first-child{margin-left:0}
.srcbar .stxt{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:var(--lh-body);min-width:0}
.srcbar .stxt b{color:var(--ink);font-weight:700}
.srcbar .sact{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.srclink{display:inline-flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-full);padding:7px var(--s3);
  font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;
  white-space:nowrap;
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),
    transform var(--d-1) var(--e-out)}
.srclink:hover{border-color:var(--ink-4);background:var(--sunk)}
.srclink:active{transform:scale(.96)}
.srclink .ei{color:var(--ink-3);display:block}
.artby .srclink[data-shareopen]{background:var(--ink);border-color:var(--ink);color:var(--app)}
.artby .srclink[data-shareopen]:hover{filter:brightness(1.2)}

.srow2{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);cursor:pointer;
  transition:background var(--d-2) var(--e-out)}
.srow2:first-of-type{border-top:0}
.srow2 .sb{flex:0 0 auto;margin-top:1px}
.srow2 .st2{flex:1;min-width:0;display:block}
.srow2 .st2 .a{display:block;font-size:14px;font-weight:700;line-height:1.35}
.srow2 .st2 .b{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45;margin-top:3px}
.srow2 .kindtag{font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-full);
  padding:4px 9px;flex:0 0 auto;white-space:nowrap;background:var(--sunk);color:var(--ink-2);margin-top:1px}
.srow2 .kindtag.doc{background:var(--t3-bg);color:var(--t3-ink)}
.srow2 .kindtag.reg{background:var(--t4-bg);color:var(--t4-ink)}
.srow2 .kindtag.ann{background:var(--accent-soft);color:var(--accent-ink)}

/* ------------------------------------------------------- article meta ----*/
.ameta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.ameta .amsrc{display:flex;align-items:center;gap:var(--s2);min-width:0}
.ameta .amsrc .srcbadge{border-width:2.5px;margin-left:-10px}
.ameta .amsrc .srcbadge:first-child{margin-left:0}
/* .ameta .amo (byline / meta text) is declared once, further down with the
   source-pill rules, so the two can never drift apart again */
.ameta .amt{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);flex:0 0 auto}
.sic{display:inline-block;vertical-align:-1.5px;flex:0 0 auto}
.stand .sic,.legend .li .sic,.peekst .sic,.statusdot .sic{display:block}
.amstats{display:inline-flex;align-items:center;gap:var(--s3);flex:0 0 auto;margin-left:auto;
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--s2) var(--s4);transition:border-color var(--d-2) var(--e-out)}
.amstats:hover{border-color:var(--ink-4)}
.amn{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);white-space:nowrap}
.amst{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-3);cursor:default;line-height:1}
.amst svg{display:block;opacity:.9}
.amst.c4{color:var(--t4-ink)}
.amst.ac{color:var(--accent-ink)}
.amstats.inline{background:transparent;border:0;border-radius:0;padding:0;margin-left:0;gap:var(--s3)}
.amstats.inline .statetip{right:auto;left:-4px}
.ameta.sm{gap:var(--s3);margin-top:var(--s3)}
.ameta.sm .amn,.ameta.sm .amo,.ameta.sm .amst{font-size:var(--fs-2xs)}
.ameta.sm .amstats{gap:var(--s3)}
.ameta.sm .amst svg,.ameta.sm .statetip .r svg{width:12px;height:12px}
.ameta.lg{gap:var(--s4);margin-top:var(--s4)}
.ameta.lg .amo{font-size:13px}
.ameta.lg .amst{font-size:var(--fs-sm)}
.ameta.stack{display:block}
.ameta.stack .amrow{display:flex;align-items:center;gap:7px;min-width:0}
.ameta.stack .amd{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.ameta.stack .amt2{white-space:nowrap}
.ameta.stack .amstats{display:inline-flex;margin-left:0;margin-top:var(--s3);
  justify-content:flex-start;gap:var(--s3);padding:7px var(--s3)}
.ameta.stack .statetip{right:auto;left:-4px}

.statetip{position:absolute;bottom:calc(100% + 10px);right:-4px;z-index:6;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);
  box-shadow:var(--sh-4);display:block;white-space:nowrap;opacity:0;visibility:hidden;
  transform:translateY(4px) scale(.97);transform-origin:bottom right;pointer-events:none;
  transition:opacity var(--d-2) var(--e-out),transform var(--d-3) var(--e-spring),visibility 0s var(--d-2)}
.amstats:hover .statetip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.statetip .r{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) 0;font-size:12px;
  font-weight:500;color:var(--ink)}
.statetip .r .sic{display:block}
@media (hover:none){.statetip{display:none}}

/* --------------------------------------------------------- claim list ----*/
.claimsec{margin-top:var(--s10)}
.claimrow{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);cursor:pointer;width:100%;text-align:left;
  background:transparent;border-left:0;border-right:0;border-bottom:0;font-family:inherit;
  color:inherit;transition:background var(--d-2) var(--e-out)}
.claimrow:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent)}
.claimrow .ci{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:7px;display:block}
.claimrow .ct{flex:1;min-width:0}
.claimrow .cx{display:block;font-size:15px;line-height:1.45}
.claimrow .cm{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px}
.claimrow .cgo{font-size:12px;font-weight:700;color:var(--accent-ink);flex:0 0 auto;margin-top:6px;
  white-space:nowrap;transition:transform var(--d-2) var(--e-out)}
.claimrow:hover .cgo{transform:translateX(3px)}

/* ---------------------------------------------- mobile claim toaster -----*/
/* the docked source toaster was removed in v106 */
.sheetclaims{margin-top:var(--s1)}
.sheetclaims .clcard{margin-bottom:var(--s5)}

/* ===================== CLAIM RECORD + TRANSCRIPT ======================== */

.cp{padding:var(--s7) 0 var(--s24)}
.stmt{font-family:var(--disp);font-size:var(--fs-3xl);line-height:var(--lh-head);font-weight:300;
  letter-spacing:var(--tr-tight);margin:var(--s5) 0 var(--s4);max-width:26ch}
.instory{display:flex;align-items:baseline;gap:7px;background:transparent;border:0;padding:0;
  margin:0 0 var(--s6);cursor:pointer;text-align:left;font-size:var(--fs-sm);color:var(--ink-2);
  line-height:1.45;width:100%}
.instory .k{color:var(--ink-3);flex:0 0 auto}
.instory .v{border-bottom:1px solid var(--line);font-weight:500;
  transition:border-color var(--d-2) var(--e-out)}
.instory:hover .v{border-color:var(--ink-3)}

/* ------------------------------------------------------- the tier ladder -*/
.ladder{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s1)}
.ladder .rail{display:flex;align-items:center;flex:0 0 auto}
.ladder .seg{width:26px;height:2px;background:var(--line);display:block;
  transition:background var(--d-3) var(--e-out)}
.ladder .seg.on{background:var(--t4)}
.ladder .seg.broke{background:transparent;
  background-image:linear-gradient(90deg,var(--accent) 55%,transparent 0);
  background-size:5px 2px;opacity:.75}
.ladder .d{width:11px;height:11px;border-radius:50%;border:1.8px solid var(--line);
  background:var(--card);display:block;cursor:pointer;flex:0 0 auto;padding:0;
  transition:background var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-spring)}
.ladder .d:hover{transform:scale(1.25)}
.ladder .d.on{background:var(--t4);border-color:var(--t4)}
.ladder .d.revisited{background:var(--card);border-color:var(--accent);
  box-shadow:0 0 0 2.5px var(--accent-soft)}
.ladder .lab{font-size:var(--fs-xs);font-weight:700;color:var(--ink)}

.sbox{border-radius:var(--r);padding:var(--s5) var(--s5) var(--s4);margin-bottom:var(--s4)}
.sbox.t1{background:var(--t1-bg)} .sbox.t2{background:var(--t2-bg)}
.sbox.t3{background:var(--t3-bg)} .sbox.t4{background:var(--t4-bg)}
.stand{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.stand i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto}
.stand .l1{display:flex;align-items:center;gap:var(--s3)}
.stand .dot{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto}
.stand .st{font-size:15.5px;font-weight:700}
.stand .since{font-size:14px;color:var(--ink-3)}
.stand .spark{margin-left:auto;display:block;flex:0 0 auto}
.stand .dip{display:inline-flex;align-items:center;gap:6px;margin:var(--s2) 0 0 19px;
  background:transparent;border:0;padding:0;cursor:pointer;font-size:var(--fs-sm);
  font-weight:500;color:var(--accent-ink)}
.stand .dip u{text-decoration:none;border-bottom:1px solid var(--accent-line);
  transition:border-color var(--d-2) var(--e-out)}
.stand .dip:hover u{border-color:var(--accent)}
.because{font-size:var(--fs-md);line-height:var(--lh-body);margin:0;color:var(--ink);max-width:60ch}

/* --------------------------------------------------------- impact panel --
   Four metrics, one of which is model retrievals. They are peers, so they get
   identical weight and a shared hairline grid — no card is emphasised.     */
.impact{margin:var(--s6) 0 var(--s2);border:1px solid var(--line);border-radius:var(--r-im);
  background:var(--card);padding:var(--s4);box-shadow:var(--sh-2)}
.imphead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3)}
.imphead .it{font-size:13px;font-weight:700}
.imphead .iw{font-size:var(--fs-2xs);font-weight:500;color:var(--ink-3);white-space:nowrap}
.impgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);
  border-radius:var(--r-im);overflow:hidden}
.impc{background:var(--card);border:0;padding:var(--s3);text-align:left;cursor:pointer;
  font-family:inherit;display:block;color:inherit;min-width:0;
  transition:background var(--d-2) var(--e-out)}
.impc:hover{background:var(--sunk)}
.impc .cv{display:flex;align-items:baseline;gap:1px}
.impc .n{font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1}
.impc .u{font-size:var(--fs-2xs);font-weight:500;color:var(--ink-3)}
.impc .k{display:block;font-size:var(--fs-2xs);color:var(--ink-2);margin-top:5px;line-height:1.3}
.impc .ch{display:block;margin-top:var(--s3);height:22px}
.impc .dl{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3);margin-top:var(--s2)}
.impflag{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line-2);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-2)}
.impflag .fi{flex:0 0 auto;color:var(--accent);margin-top:1px;display:flex}
.impflag b{color:var(--ink);font-weight:700}
.impcmp{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line-2)}
.impcmp .cmpl{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  font-size:var(--fs-2xs);color:var(--ink-3);margin-bottom:7px;line-height:1.35}
.impcmp .cmpl .cr{font-weight:700;color:var(--ink);white-space:nowrap}
.impcmp .cmpbar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.impcmp .cmpbar i{display:block;height:100%;border-radius:3px;background:var(--ink-2);
  animation:barGrow var(--d-6) var(--e-out) both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.impcmp .cmpbar i{transform-origin:left}

/* ------------------------------------------------------- metric sheet ----*/
.mbig{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 2px}
.mbig .n{font-family:var(--disp);font-size:36px;font-weight:300;letter-spacing:-.02em;line-height:1}
.mbig .u{font-size:14px;color:var(--ink-3)}
.mchart{margin:var(--s5) 0 var(--s1)}
.mchart svg{display:block;width:100%;height:auto}
.mxax{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:7px}
.mrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--line-2);font-size:var(--fs-sm)}
.mrow .ml{flex:1;min-width:0;line-height:1.4}
.mrow .ml .sub{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin:2px 0 0;line-height:1.4}
.mrow .mb{width:46px;height:5px;border-radius:3px;background:var(--line-2);flex:0 0 auto;overflow:hidden}
.mrow .mb i{display:block;height:100%;border-radius:3px;transform-origin:left;
  animation:barGrow var(--d-6) var(--e-out) both}
.mrow .mv{font-weight:700;white-space:nowrap;flex:0 0 auto;font-size:13px}
.mnote{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-2);background:var(--sunk);
  border-radius:var(--r);padding:var(--s3);margin-top:var(--s5)}
.mnote b{color:var(--ink);font-weight:700}
.kgroup{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);margin:var(--s5) 0 2px}

/* ------------------------------------------------------------ the record -
   A ledger: one spine, one node per entry, filled where the claim reached a
   rung and dashed where it came back down.                                 */
.cp h3.sec,.txb h3.sec{font-size:13px;font-weight:700;color:var(--ink-3);margin:var(--s8) 0 2px;
  letter-spacing:.03em}
.rec{position:relative;padding-left:var(--s8)}
.rec .spine{position:absolute;left:0;top:0;bottom:0;width:22px}
.rec .spine .line{position:absolute;left:10px;top:24px;bottom:-2px;width:1.5px;background:var(--line)}
.rec:last-of-type .spine .line{display:none}
.rec .spine .d{position:absolute;left:4px;top:16px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);
  transition:transform var(--d-3) var(--e-spring)}
.rec:hover .spine .d{transform:scale(1.15)}
.rec.reached .spine .d{background:var(--t4);border-color:var(--t4)}
.rec.reached .spine .line{background:color-mix(in srgb,var(--t4) 30%,transparent)}
.rec.down .spine .d{background:var(--card);border-color:var(--accent)}
.rec.down .spine .d::after{content:"";position:absolute;left:2.5px;top:2.5px;width:4px;height:4px;
  border-radius:50%;background:var(--accent)}
.rec.down .spine .line{background:transparent;
  background-image:linear-gradient(var(--accent) 55%,transparent 0);background-size:1.5px 7px;opacity:.5}
.rsum{display:flex;align-items:baseline;gap:var(--s2);width:100%;text-align:left;
  background:transparent;border:0;padding:var(--s4) 0;cursor:pointer;
  border-top:1px solid var(--line-2);font-family:inherit;color:inherit}
.rec:first-of-type .rsum{border-top:0}
.rsum .st{font-size:14.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:var(--s1)}
.rec.down .rsum .st{color:var(--accent-ink)}
.rsum .lbl{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis}
.rsum .dt{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;margin-left:auto;flex:0 0 auto}
.rec.open .rsum .lbl{display:none}
.rdet{display:none;padding:0 0 var(--s6)}
.rec.open .rdet{display:block;animation:riseIn var(--d-4) var(--e-out) both}
.rdet .what{font-size:15.5px;line-height:1.6;margin:0 0 var(--s5)}

.plabel{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:var(--s2);
  letter-spacing:.04em;text-transform:uppercase}
.prow3{display:flex;align-items:center;gap:var(--s3)}
.pav3{width:34px;height:34px;border-radius:var(--r-full);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.pav3.big{width:46px;height:46px;font-size:14px}
.ptx3{flex:1;min-width:0;display:block}
.pn3{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.pr3{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4;margin-top:1px}
.pstat{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:var(--lh-body);margin-top:var(--s2)}
.pstat b{color:var(--ink);font-weight:700}
.scorechip{font-size:12px;font-weight:700;background:transparent;border:0;padding:0;
  color:var(--accent-ink);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);
  white-space:nowrap;flex:0 0 auto;font-family:inherit}

.dblock{display:block;margin-top:var(--s5)}
.drow{display:flex;align-items:flex-start;gap:var(--s3);padding:9px 0}
.drow .dic{color:var(--ink-3);flex:0 0 auto;display:flex;margin-top:2px}
.drow .dn{flex:1;font-size:var(--fs-sm);line-height:1.4}
/* sits inline after the document title, so it needs its own left gap —
   without it the two run together as "Octagon statementBusiness Wire" */
.drow .dsrc{display:inline-flex;align-items:center;gap:var(--s1);margin:5px 0 0 7px;font-size:11px;
  font-weight:700;color:var(--t3-ink);background:transparent;border:0;padding:0;cursor:pointer;
  font-family:inherit}
.drow .dtag{font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;flex:0 0 auto;margin-top:2px}
.drow .dtag.p{color:var(--t3-ink)} .drow .dtag.i{color:var(--t4-ink)} .drow .dtag.u{color:var(--ink-3)}
.nodocs{font-size:13px;color:var(--ink-3);margin-top:var(--s4)}
.ivlink{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-full);padding:var(--s3) var(--s4);
  font-size:var(--fs-xs);font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),
    transform var(--d-1) var(--e-out)}
.ivlink:hover{border-color:var(--ink-4);background:var(--sunk)}
.ivlink:active{transform:scale(.97)}

/* ------------------------------------------------------- dependencies ----*/
.depsum{font-size:14px;margin:var(--s3) 0 2px}
.depsum .sep{color:var(--ink-3);margin:0 6px}
.dep{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);cursor:pointer;transition:background var(--d-2) var(--e-out)}
.dep:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.dep .ar{flex:0 0 auto;margin-top:2px;color:var(--ink-3);display:flex;
  transition:transform var(--d-2) var(--e-out)}
.dep:hover .ar{transform:translateX(2px)}
.dep.against .ar{color:var(--accent)}
.dep .tx{flex:1;display:block}
.dep .c{display:block;font-size:14.5px;line-height:1.42;transition:color var(--d-2) var(--e-out)}
.dep .why{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45;margin-top:5px}
.dep .stt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-top:6px}
.dep .stt .sic{display:block}
.peekst{display:flex;align-items:center;gap:var(--s2);margin:2px 0 var(--s3)}
.peekst .n{font-size:14px;font-weight:700}
.peekst .s{font-size:var(--fs-sm);color:var(--ink-3)}

/* ========================== TRANSCRIPT ================================== */
.txb{padding:var(--s7) 0 var(--s20)}
.tx-head{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s3)}
.tx-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--s4)}
.tx-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sunk);
  border-radius:var(--r-full);padding:6px var(--s3);font-size:var(--fs-2xs);font-weight:500;color:var(--ink-2)}
.tx-chip b{font-weight:700;color:var(--ink)}
.tx-consent{display:flex;gap:var(--s3);background:var(--sunk);border-radius:var(--r);
  padding:var(--s3) var(--s4);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-2);
  margin-bottom:var(--s6)}
.tx-consent .ci{flex:0 0 auto;color:var(--ink-3);margin-top:1px;display:flex}
.tx-consent b{color:var(--ink);font-weight:700}
.tx-from{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);
  padding:var(--s4);margin-bottom:var(--s7)}
.tx-from .k{display:block;font-size:11px;font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px}
.tx-from .v{display:block;font-family:var(--disp);font-weight:300;font-size:17px;line-height:1.42}
.tx-from .j{background:transparent;border:0;padding:var(--s3) 0 0;font-size:var(--fs-xs);
  font-weight:700;color:var(--accent-ink);cursor:pointer;font-family:inherit;display:block}
.tx-turn{margin-bottom:var(--s6)}
.tx-turn .q{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);line-height:var(--lh-body);
  margin-bottom:var(--s2)}
.tx-turn .a{font-size:17px;line-height:1.68;max-width:66ch}
.tx-turn .tt{font-size:12px;color:var(--ink-3);margin-top:var(--s2);line-height:var(--lh-body);
  padding-left:var(--s3);border-left:2px solid var(--line)}
.qt{background:var(--accent-soft);border-radius:3px;padding:1px 0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--accent-line);text-decoration-thickness:2px;
  text-underline-offset:4px;text-decoration-skip-ink:auto;
  transition:background var(--d-2) var(--e-out)}
.qt:hover{background:color-mix(in srgb,var(--accent-soft) 40%,var(--accent-line))}
.qt.hit{animation:qtHit 1.8s var(--e-out) both}
@keyframes qtHit{
  0%{background:var(--accent-soft)}
  18%,56%{background:color-mix(in srgb,var(--accent) 26%,transparent)}
  100%{background:var(--accent-soft)}
}
/* struck passages are shown struck — withheld, visibly, not silently removed */
.tx-struck{border-left:2px solid var(--line);padding:var(--s1) 0 var(--s1) var(--s4);
  margin:0 0 var(--s6);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3)}
.tx-struck b{font-weight:700;color:var(--ink-2)}
.tx-yield{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);cursor:pointer;transition:background var(--d-2) var(--e-out)}
.tx-yield:not(.here):hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.tx-yield .yi{flex:0 0 auto;margin-top:var(--s1);display:flex}
.tx-yield .yt{flex:1;min-width:0;display:block}
.tx-yield .yc{display:block;font-size:15px;line-height:1.45}
.tx-yield .ym{display:block;font-size:12px;color:var(--ink-3);margin-top:5px}
.tx-yield.here{cursor:default}
.tx-yield.here .yc{color:var(--ink-3)}

/* ======================= BREAKDOWN + LIST SHEETS ======================== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:var(--s1) 0 0;position:relative}
.tabs .tab{flex:1;min-width:0;background:transparent;border:0;padding:var(--s3) 3px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-3);cursor:pointer;
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:color var(--d-2) var(--e-out)}
.tabs .tab:hover{color:var(--ink-2)}
.tabs .tab .tn{font-size:var(--fs-3xs);font-weight:700;background:var(--sunk);color:var(--ink-3);
  border-radius:var(--r-full);padding:2px 6px;line-height:1.55;
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)}
.tabs .tab.on{color:var(--ink)}
.tabs .tab.on .tn{background:var(--accent-soft);color:var(--accent-ink)}
.tabs .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);border-radius:2px;animation:navIn var(--d-3) var(--e-out) both}
.bdpane{min-height:300px}
.bdpane > *{animation:fade var(--d-3) var(--e-out) both}
.bdlead{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-2);margin:var(--s4) 0 2px}
.bdlead b{color:var(--ink);font-weight:700}
.statusdot{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:700}

.krow{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--line-2);cursor:pointer;width:100%;text-align:left;
  background:transparent;border-left:0;border-right:0;border-bottom:0;font-family:inherit;
  color:inherit;transition:background var(--d-2) var(--e-out)}
.krow:hover,.srcrow:hover,.srow2:hover,.nrow:hover,.cbrow:hover{
  background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.krow .ki{flex:0 0 auto;margin-top:var(--s1);display:flex}
.krow .kt{flex:1;display:block}
.krow .kc{display:block;font-size:14.5px;line-height:1.42}
.krow .km{display:block;font-size:12px;color:var(--ink-3);margin-top:var(--s1)}
.srcrow{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--line-2);cursor:pointer;transition:background var(--d-2) var(--e-out)}
.srcrow .sn{flex:1;min-width:0;font-size:14px;line-height:1.4;display:flex;align-items:baseline;
  gap:5px;flex-wrap:wrap}
.srcrow .sn .sm{display:block;width:100%;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:3px;
  line-height:1.4}
.srcrow .sk{font-size:11px;font-weight:700;border-radius:var(--r-full);padding:var(--s1) 9px;
  flex:0 0 auto;white-space:nowrap}
.srcrow .sk.p{background:var(--t3-bg);color:var(--t3-ink)}
.srcrow .sk.i{background:var(--t4-bg);color:var(--t4-ink)}
.srcrow .sk.c{background:var(--accent-soft);color:var(--accent-ink)}
.cbcard{border-top:1px solid var(--line-2);padding:var(--s5) 0 var(--s4)}
.cbcard:first-of-type{border-top:0}
.cbhead{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);margin:var(--s6) 0 0;
  letter-spacing:.04em;text-transform:uppercase}
.cbclaims{margin-top:var(--s3);display:block}
.cbrow{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) 0;cursor:pointer;
  width:100%;text-align:left;background:transparent;border:0;font-family:inherit;color:inherit;
  border-radius:var(--r-xs);transition:background var(--d-2) var(--e-out)}
.cbrow .ci{flex:0 0 auto;margin-top:var(--s1);display:flex}
.cbrow .ct{flex:1;min-width:0;font-size:var(--fs-sm);line-height:1.42;display:block}

/* ----------------------------------------------------- notifications -----*/
.nrow{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);cursor:pointer;transition:background var(--d-2) var(--e-out)}
.nrow .nic{width:34px;height:34px;border-radius:var(--r-full);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.nrow .ntx{flex:1;display:block}
.nrow .ntx .a{display:block;font-size:14px;font-weight:700;line-height:1.35}
.nrow .ntx .b{display:block;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:3px}
.nrow .ntx .c{display:block;font-size:12px;color:var(--ink-3);margin-top:var(--s1);line-height:1.45}

/* ==================== CONTRIBUTION: THE INTERVIEW ======================= */
/* The single most consequential surface in the product — it is where someone
   decides how much of their name to attach to a fact. It is therefore the
   calmest thing here: no urgency, no progress pressure, nothing that reads
   like a funnel.                                                            */

.frag{display:flex;gap:var(--s3);background:var(--sunk);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.frag .k{font-size:12px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:3px;
  letter-spacing:.04em;text-transform:uppercase}
.frag .v{font-size:var(--fs-sm);line-height:var(--lh-body);display:block;color:var(--ink-2)}

.opt{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);font-size:15px;
  font-weight:500;color:var(--ink);cursor:pointer;margin-bottom:9px;
  transition:border-color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out),
    box-shadow var(--d-2) var(--e-out)}
.opt:hover{border-color:var(--ink-4);box-shadow:var(--sh-2)}
.opt:active{transform:scale(.99)}
.opt .ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--sunk);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.opt .tx{flex:1;min-width:0;display:block}
.opt .tx .a{display:block;line-height:1.35}
.opt .tx .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:400;margin-top:3px;
  line-height:1.45}
.opt.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.opt.primary:hover{filter:brightness(1.05)}
.opt.primary .ico{background:rgba(255,255,255,.18)}
.opt.primary .tx .b{color:rgba(255,255,255,.78)}
.quiet{width:100%;background:transparent;border:0;color:var(--ink-2);padding:var(--s3);
  font-size:var(--fs-sm);font-weight:500;cursor:pointer;border-radius:var(--r-sm);
  transition:color var(--d-2) var(--e-out),background var(--d-2) var(--e-out)}
.quiet:hover{color:var(--ink);background:var(--sunk)}

/* --------------------------------------------------------- chat frame ----*/
.iv{display:flex;flex-direction:column;min-height:0}
.ivhead{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6) var(--s3);
  border-bottom:1px solid var(--line-2);flex:0 0 auto;position:relative}
.ivhead .im2{width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ivhead .t{flex:1;min-width:0}
.ivhead .a{display:block;font-size:14px;font-weight:700;line-height:1.3}
.ivhead .b{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.ivhead .x{background:transparent;border:0;color:var(--ink-3);cursor:pointer;font-size:20px;
  line-height:1;padding:var(--s1) 6px;border-radius:var(--r-full)}
.ivhead .x:hover{color:var(--ink);background:var(--sunk)}
/* how far through, stated plainly and without pressure */
.ivprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--line-2)}
.ivprog i{display:block;height:100%;background:var(--accent);border-radius:0 2px 2px 0;
  transition:width var(--d-5) var(--e-glide)}

.ivbody{flex:1;overflow-y:auto;padding:var(--s5) var(--s6) var(--s2);scrollbar-width:none;
  min-height:260px;max-height:56vh;overscroll-behavior:contain}
.ivbody::-webkit-scrollbar{display:none}
.ivctx{background:var(--sunk);border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s5)}
.ivctx .k{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);margin-bottom:5px;
  letter-spacing:.04em;text-transform:uppercase}
.ivctx .v{display:block;font-family:var(--disp);font-weight:300;font-size:16px;line-height:1.42}

.bq{max-width:90%;margin-bottom:var(--s5);animation:riseIn var(--d-4) var(--e-out) both}
.bq .who{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);margin-bottom:6px;
  letter-spacing:.06em}
.bq .tx{display:block;font-size:16px;line-height:var(--lh-body)}
.ba{max-width:84%;margin:0 0 var(--s5) auto;background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:16px 16px 4px 16px;padding:var(--s3) var(--s4);
  font-size:15px;line-height:var(--lh-body);animation:riseIn var(--d-3) var(--e-out) both}
.typing{display:inline-flex;gap:var(--s1);padding:var(--s1) 0 var(--s5)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:block;
  animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}

.chips-sug{display:flex;flex-wrap:wrap;gap:var(--s2);margin:-6px 0 var(--s5)}
.sug{background:transparent;border:1px solid var(--line);border-radius:var(--r-full);
  padding:9px var(--s3);font-size:13px;color:var(--ink-2);cursor:pointer;
  animation:popIn var(--d-4) var(--e-spring) both;
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)}
.chips-sug .sug:nth-child(1){animation-delay:40ms}
.chips-sug .sug:nth-child(2){animation-delay:90ms}
.chips-sug .sug:nth-child(3){animation-delay:140ms}
.chips-sug .sug:nth-child(n+4){animation-delay:180ms}
.sug:hover{border-color:var(--ink-4);background:var(--sunk);color:var(--ink)}
.sug:active{transform:scale(.96)}

.ivbar{padding:var(--s3) var(--s5) var(--s5);background:var(--card);
  border-top:1px solid var(--line-2);display:flex;align-items:center;gap:9px;flex:0 0 auto}
.ivbar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-full);padding:var(--s3) var(--s4);font-family:inherit;font-size:15px;
  color:var(--ink);outline:none;
  transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)}
.ivbar input::placeholder{color:var(--ink-3)}
.ivbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ivmic,.ivsend{width:46px;height:46px;flex:0 0 auto;border-radius:var(--r-full);border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform var(--d-1) var(--e-out),background var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out)}
.ivmic:active,.ivsend:active:not([disabled]){transform:scale(.92)}
.ivmic{background:var(--sunk);color:var(--ink)}
.ivmic.rec{background:var(--accent);color:var(--on-accent);animation:recPulse 1.6s var(--e-inout) infinite}
@keyframes recPulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-line)}
  50%{box-shadow:0 0 0 8px transparent}
}
.ivsend{background:var(--ink);color:var(--app)}
.ivsend[disabled]{background:var(--line);color:var(--ink-3);cursor:default}

/* ------------------------------------------------------------- consent ---
   Four levels, in descending order of what they publish. The pseudonymous cap
   is a real architectural constraint, so it is stated on the option itself
   rather than buried in a footnote.                                        */
.consent{margin-top:var(--s1)}
.cline{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s3);
  margin:0 calc(var(--s3) * -1);border-top:1px solid var(--line-2);cursor:pointer;
  border-radius:var(--r-sm);transition:background var(--d-2) var(--e-out)}
.cline:hover{background:var(--sunk)}
.cline .rad{width:19px;height:19px;border-radius:50%;border:1.8px solid var(--line);flex:0 0 auto;
  margin-top:2px;position:relative;background:var(--card);
  transition:border-color var(--d-2) var(--e-out)}
.cline .rad::after{content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--accent);transform:scale(0);
  transition:transform var(--d-3) var(--e-spring)}
.cline.on .rad{border-color:var(--accent)}
.cline.on .rad::after{transform:scale(1)}
.cline .t{display:block;min-width:0}
.cline .t .a{display:block;font-size:14.5px;font-weight:700;line-height:1.35}
.cline .t .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}

/* --------------------------------------------------------- v0 ask box ----*/
.v0ask{border-top:1px solid var(--line-2);margin-top:var(--s5);padding-top:var(--s5)}
.v0ask .qa{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.v0ask .qb{display:block;font-size:13px;color:var(--ink-2);line-height:var(--lh-body);margin-top:6px}
.v0row{display:flex;gap:9px;margin-top:var(--s4)}
.v0row input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-full);padding:var(--s3) var(--s4);font-family:inherit;font-size:14.5px;
  color:var(--ink);outline:none;
  transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)}
.v0row input::placeholder{color:var(--ink-3)}
.v0row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.v0ask.bad .v0row input{border-color:var(--accent)}
.v0ask.bad .v0row{animation:shake var(--d-5) var(--e-out) both}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}52%{transform:translateX(4px)}78%{transform:translateX(-2px)}
}
.v0ask .err{display:none;font-size:var(--fs-xs);color:var(--accent-ink);margin-top:var(--s3)}
.v0ask.bad .err{display:block;animation:fade var(--d-2) var(--e-out) both}
.v0done .da{display:block;font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.35}
.v0done .db{display:block;font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body);margin-top:7px}
.v0done .db b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------ receipt + steps --*/
.tick{width:52px;height:52px;border-radius:var(--r-full);background:var(--t4-bg);display:flex;
  align-items:center;justify-content:center;color:var(--t4);margin:0 0 var(--s4);
  animation:tickIn var(--d-6) var(--e-spring) both}
@keyframes tickIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.steps .s{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line-2);
  font-size:14px;line-height:var(--lh-body);animation:riseIn var(--d-4) var(--e-out) both}
.steps .s:first-child{border-top:0}
.steps .s:nth-child(1){animation-delay:60ms}
.steps .s:nth-child(2){animation-delay:120ms}
.steps .s:nth-child(3){animation-delay:180ms}
.steps .s:nth-child(4){animation-delay:240ms}
.steps .s .n{width:22px;height:22px;border-radius:var(--r-full);background:var(--sunk);
  color:var(--ink-2);font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;margin-top:1px}
.steps .s .tt{flex:1}
.steps .s .tt b{font-weight:700}
.steps .s .tt span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .twobox{grid-template-columns:1fr}
  .tbox:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .topclaims{padding:0}
  .ft-main{grid-template-columns:1fr;row-gap:var(--s10)}
  .ft-tag{max-width:46ch}
  .artgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .clrail{max-width:none;padding-top:0;margin-top:var(--s2)}
  .sharehold{height:auto!important}
  .railclaims{position:static;padding-top:0}
  .clstack{max-height:none;overflow:visible;margin:0;padding:0 0 var(--s3);
    -webkit-mask-image:none;mask-image:none}
  /* stacked under the body, the rail scrolls with the page — nothing overflows,
     so there is nothing to cue */
  .clfade{display:none}
  .clcard{margin-bottom:var(--s6);transform:none!important}
  .clcard .chd{padding:var(--s5) var(--s4) var(--s5)}
  .clcard .cbd{padding:0 var(--s4) var(--s5)}
  .clcard .cqt{font-size:15px}
  .nbfeat{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6)}
  .nbrow{grid-template-columns:1fr}
  .nbrow .nbcard{border-left:0;border-top:1px solid var(--line)}
  .nbrow .nbcard:first-child{border-top:0}
  .nbcard{padding:var(--s6)}
  .newsgrid{grid-template-columns:repeat(2,1fr)}
  .newsgrid .nbcard{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .newsgrid .nbcard:nth-child(2n+1){border-left:0}
  .newsgrid .nbcard:nth-child(-n+2){border-top:0}
  .heroz{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--s8)}
  .sart h3{font-size:18px}
  .tcard{flex:0 0 clamp(240px,38vw,320px)}
  .impgrid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .wrap{padding:0 var(--s4)}
  .hd .wrap{height:56px}
  .hd .logo svg{height:19px}
  .hd .desktopnav>a{display:none}
  .hd .desktopnav .searchbtn{margin-left:0}
  .menubtn{display:flex;width:34px;height:34px;border:0;border-radius:var(--r-full);
    padding:8px;background:transparent;color:var(--ink);cursor:pointer;
    flex-direction:column;justify-content:center;gap:4px}
  .menubtn:hover{background:var(--sunk)}
  .menubtn span{display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor;
    transition:transform var(--d-3) var(--e-out),opacity var(--d-2) var(--e-out)}
  .menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .mobilemenu{display:block;position:absolute;top:100%;left:0;right:0;background:var(--app);
    max-height:calc(100vh - var(--hd-h));overflow-y:auto;
    border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(19,16,17,.55)}
  .mobilemenu[hidden]{display:none}
  .mobilenav{display:block;padding:var(--s3) var(--s4) var(--s5)}
  .mobilemain,.mobilecats{display:flex;flex-direction:column;align-items:stretch}
  .mobilemain{padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
  .mobilecats{padding-top:var(--s3)}
  .mobilenav a{display:block;padding:10px var(--s2);border-radius:var(--r-xs);
    color:var(--ink-2);font-size:15px;font-weight:500;text-align:left}
  .mobilenav a:hover{background:var(--sunk);color:var(--ink)}
  .mobilenav a.on{background:var(--sunk);color:var(--ink);font-weight:700}
  .mobilenav a.on::before{content:"";display:inline-block;width:6px;height:6px;
    margin:0 10px 2px 0;border-radius:50%;background:var(--accent)}
  .catrow{display:none!important}
  body.reading .hd.mobile-away{transform:translateY(calc(-100% - 3px))}
  .daterow{padding:var(--s6) 0 0}
  .daterow h1{font-size:var(--fs-2xl)}
  .heropanel{margin-bottom:var(--s10)}
  .heroz{grid-template-columns:1fr;gap:0;padding:var(--s6) 0 var(--s8)}
  .lead2{position:static;padding-bottom:var(--s7);margin-bottom:var(--s7);
    border-bottom:1px solid var(--line)}
  .lead2 .dek{font-size:15px}
  .sidestack{border-left:0;padding-left:0}
  .sart{padding-bottom:var(--s6);margin-bottom:var(--s6)}
  .sart h3{font-size:20px}
  .tcar{margin-bottom:var(--s10)}
  .tcarhead{margin-bottom:var(--s5)}
  .tcarhead .st{font-size:22px}
  .tcarnav{display:none}
  .tcard{flex:0 0 78%}
  .tcartrack{-webkit-mask-image:none;mask-image:none}
  .latest{grid-template-columns:1fr;margin-bottom:var(--s10)}
  .latest .big{padding-right:0;border-right:0;padding-bottom:var(--s6);margin-bottom:6px;
    border-bottom:1px solid var(--line-2)}
  .latest .side{padding-left:0}
  .edchoice{grid-template-columns:1fr;gap:var(--s5);padding-bottom:var(--s10);margin-bottom:var(--s10)}
  .edchoice .imwrap{order:-1}
  .edchoice h3{font-size:22px}
  .grid{grid-template-columns:1fr;gap:var(--s8);margin-bottom:var(--s10)}
  .grid.grid2{margin-bottom:var(--s10)}
  .newsblock,.newsgrid{margin-bottom:var(--s10)}
  .nbfeat{padding:var(--s5)} .nbcard{padding:var(--s5)}
  .newsgrid{grid-template-columns:1fr}
  .newsgrid .nbcard{border-left:0;border-top:1px solid var(--line)}
  .newsgrid .nbcard:first-child{border-top:0}
  .nbfeat .nbh{font-size:23px}
  .secthead{margin-bottom:var(--s5)}
  .secthead .st{font-size:22px}
  .secthead .va{display:none}
  .vamob{display:block;width:100%;margin:calc(var(--s6) * -1) 0 var(--s10);padding:var(--s3);
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);
    font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink);cursor:pointer;
    text-align:center}
  .vamob:active{background:var(--sunk);transform:scale(.99)}
  .hotsec{margin-bottom:var(--s10);padding:var(--s6) 0 var(--s7)}
  .hottabs{margin:0 0 var(--s5);gap:var(--s3)}
  .hottab{font-size:var(--fs-xs)}
  .hotgrid{grid-template-columns:1fr}
  .hotfeat{padding-right:0;border-right:0;padding-bottom:var(--s3);margin-bottom:var(--s1)}
  .hotfeat .hq{font-size:19px}
  .hotlist{padding-left:0}
  .hotsec .hotgrid{height:auto;margin-top:var(--s6)}
  .hotsec .hotfeat .im{aspect-ratio:16/10;flex:none}
  .hotsec .hotlist{grid-template-rows:none;gap:var(--s3);padding-left:0}
  .twobox{margin-bottom:var(--s10)}
  .tbox{padding:var(--s5) var(--s5) var(--s6)}
  .prow{grid-template-columns:22px minmax(0,1fr);column-gap:var(--s3)}
  .prow .pc{grid-column:2;margin-top:6px}
  .pn2{font-size:15.5px}
  .synth{margin-bottom:var(--s10);flex-direction:column-reverse;align-items:flex-start;
    gap:var(--s5);padding:26px 20px 28px}
  .synth .stx{max-width:none}
  .synthvid{width:104px;margin-left:0}
  .synth .sa{font-size:18.5px;margin-bottom:var(--s3)}
  .synth .sb{font-size:var(--fs-xs);line-height:1.62}
  .ameta .amstats{margin-left:0}
  .art{padding:var(--s5) 0 var(--s20)}
  .art h1{font-size:27px;line-height:1.2}
  .art .dek{font-size:16px}
  .art p{font-size:17px;line-height:1.65}
  .invite{padding:var(--s5)}
  .invite h3{font-size:19px}
  .cp{padding:var(--s5) 0 var(--s20)}
  .stmt{font-size:25px;line-height:1.26}
  .impgrid{grid-template-columns:1fr}
  .ladder .seg{width:18px}
  .txb{padding:var(--s5) 0 var(--s16)}
  .tx-turn .a{font-size:16px}
  .rsum{flex-wrap:wrap}
  .rsum .dt{margin-left:0;width:100%;margin-top:3px}
  .sheet{border-radius:var(--r-xl) var(--r-xl) 0 0}
  .sheet .in{padding:var(--s4) var(--s5) var(--s6)}
  .ivhead{padding:var(--s3) var(--s5)}
  .ivbody{padding:var(--s4) var(--s5) 6px;max-height:48vh}
  .evpanel{right:var(--s3);left:var(--s3);width:auto;bottom:var(--s3)}
  .ft .wrap{padding:var(--s10) var(--s4) var(--s8)}
  .ft-cols{grid-template-columns:repeat(2,1fr);gap:var(--s7)}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  /* iOS zooms any input under 16px on focus */
  .v0row input,.ivbar input{font-size:16px}
}


/* ======================== SOURCE-FIRST SURFACES ========================= */

/* --------------------------------------------------- the USP block -------
   Sized so the statement lands but the first story still breaks the fold. */
.usp{border-bottom:1px solid var(--line);background:var(--app)}
.usp .uspin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s12);padding:var(--s8) 0 var(--s7);align-items:start}
.uspeye{margin:0 0 var(--s3);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.usph{margin:0 0 var(--s4);font-family:var(--disp);font-weight:300;
  font-size:clamp(26px,1.2rem + 1.5vw,38px);line-height:1.12;
  letter-spacing:var(--tr-tight);max-width:17ch}
.uspd{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);max-width:56ch}
.uspproof{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0}
.uspproof li{display:flex;gap:var(--s4);padding:var(--s3) 0;
  border-top:1px solid var(--line-2)}
.uspproof li:first-child{border-top:0;padding-top:0}
.uspproof .pn{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-4);
  letter-spacing:.06em;padding-top:3px;font-variant-numeric:tabular-nums}
.uspproof .pt{display:block;min-width:0}
.uspproof .pt b{display:block;font-size:14px;font-weight:700;line-height:1.35}
.uspproof .pt span{display:block;font-size:var(--fs-xs);line-height:1.5;
  color:var(--ink-2);margin-top:2px}

/* the hand-off from "what this is" to "what to read" */
.sectlabel{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s7) 0 var(--s5)}
.sectlabel .sl{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)}
.sectlabel .sr{font-size:var(--fs-xs);color:var(--ink-3)}

/* ------------------------------------------------ publication metadata ---*/
.artmeta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);align-items:flex-start;
  padding:var(--s4) 0;margin-bottom:var(--s6);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.amitem{display:block;min-width:0}
.amk{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.amv{display:block;font-size:var(--fs-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.amlink{display:inline-flex;align-items:center;gap:var(--s2);background:transparent;
  border:0;padding:0;font-family:inherit;font-size:var(--fs-sm);font-weight:700;
  color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:color var(--d-2) var(--e-out)}
.amlink:hover{color:var(--accent-ink)}
.amlink .amb{display:inline-flex;align-items:center}
.amlink .srcbadge{width:22px;height:22px;font-size:9px;border-width:2px;margin-left:-7px}
.amlink .srcbadge:first-child{margin-left:2px}

/* -------------------------------------------------- cited sentences ------
   v0 marks provenance, not confidence: one neutral rule for "this rests on a
   document", plus the number of the document it rests on. */
.cl{cursor:pointer;border-radius:3px;padding:1px 0;
  text-decoration-line:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px;text-decoration-skip-ink:auto;
  text-decoration-color:color-mix(in srgb,var(--ink-4) 70%,transparent);
  transition:background var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)}
.cl:hover,.cl.lit{background:var(--accent-soft);text-decoration-color:var(--accent)}
/* the gap is left of the marker, never inside it: a marker set tight against
   the full stop reads as one token ("12" after "cases."), so 4px of margin
   separates punctuation from number or tag while the padding keeps the tap
   target wider than the glyph */
.cite{font-size:.62em;font-weight:700;line-height:0;vertical-align:super;
  margin-left:4px;padding:0 2px;color:var(--accent-ink);cursor:pointer;
  font-variant-numeric:tabular-nums;text-decoration:none}
.cl:hover .cite,.cite:hover{text-decoration:underline;text-underline-offset:2px}
.art.plain .cite{display:none}

/* ------------------------------------------------------- source cards ----*/
.clcard{background:var(--card);border-color:var(--line)}
.clcard .chd{gap:var(--s2);padding:var(--s5) var(--s4) var(--s5)}
.clcard .chd .srcbadge{width:24px;height:24px;font-size:9px;border-width:2px;margin-left:0}
.clcard .clb{color:var(--ink);font-size:var(--fs-xs);font-weight:700}
.clcard .ckl{color:var(--accent-ink)}
.clcard .cbd{background:none}
/* the quiet last row: attribution and chips under the hairline, never a
   second surface and never a second hue */
.clcard .csr{display:flex;align-items:center;gap:var(--s2);color:var(--ink-3);
  margin-top:6px;padding-right:0;border-left:0}
.clcard .cnum{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-3xs);
  font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto}
.clcard.lit,.clcard:hover{box-shadow:0 0 0 2px var(--accent-line),var(--sh-3)}

/* the track's source chip carries the outlet mark */
.tcard .tg .srcbadge{width:18px;height:18px;font-size:8px;border-width:1.5px;margin:0 5px 0 -2px}

/* --------------------------------------------------- the references ------
   A bibliography, set the way a publication sets one. */
.refs{margin:var(--s14) 0 0;padding-top:var(--s8);border-top:2px solid var(--ink)}
.refhead{margin-bottom:var(--s6)}
.refh{margin:0 0 var(--s2);font-family:var(--disp);font-weight:300;
  font-size:var(--fs-2xl);letter-spacing:var(--tr-head)}
.refl{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;max-width:56ch}
.reflist{list-style:none;margin:0;padding:0;counter-reset:ref}
.refitem{display:flex;gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--line-2);
  border-radius:var(--r-xs);transition:background var(--d-3) var(--e-out)}
.refitem:first-child{border-top:0}
.refitem.hit{animation:refHit 1.8s var(--e-out) both}
@keyframes refHit{
  0%{background:transparent}
  14%,52%{background:var(--accent-soft)}
  100%{background:transparent}
}
.refn{flex:0 0 auto;width:26px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:2px}
.refb{display:block;min-width:0;flex:1}
.refmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.refmeta .srcbadge{width:24px;height:24px;font-size:9px;border-width:2px;margin-left:0}
.refo{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.refkind{font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-full);
  padding:3px 9px;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.refkind.doc{background:var(--t3-bg);color:var(--t3-ink)}
.refkind.reg{background:var(--t4-bg);color:var(--t4-ink)}
.refkind.ann{background:var(--accent-soft);color:var(--accent-ink)}
.refd{font-size:var(--fs-xs);color:var(--ink-3)}
.reft{display:block;font-size:var(--fs-md);line-height:1.45;color:var(--ink);
  margin-bottom:var(--s3);max-width:62ch}
.refu{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;
  color:var(--accent-ink);border-bottom:1px solid var(--accent-line);padding-bottom:1px;
  transition:border-color var(--d-2) var(--e-out)}
.refu:hover{border-color:var(--accent)}
.refu svg{display:block}
.refnu{font-size:var(--fs-xs);color:var(--ink-3);font-style:italic}

/* --------------------------------------------------- article history ----
   What changed after publication, shown rather than absorbed. Dates stay in
   the muted greys the rest of the page uses for metadata; the alert red is
   reserved for corrections, so it never appears on a routine update. */
.corrbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
  margin:var(--s5) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.corrbar .cbt{font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)}
/* a button in the SPA, a plain anchor on the server-rendered page (where the
   URL is a real path, so #arthist can do the scrolling natively) — both read
   as the same link */
.corrbar .cbl{background:transparent;border:0;padding:0;font-family:inherit;
  font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);cursor:pointer;
  text-decoration:none;
  border-bottom:1px solid var(--accent-line);
  transition:border-color var(--d-2) var(--e-out)}
.corrbar .cbl:hover{border-color:var(--accent)}

/* the banner links here with a bare #arthist on the server-rendered page, so
   the jump has to clear the sticky header the way the About panes do */
.arthist{margin:var(--s10) 0 0;padding-top:var(--s6);border-top:1px solid var(--line-2);
  scroll-margin-top:calc(var(--hd-h) + 20px)}
.ahh{margin:0 0 var(--s2);font-family:var(--disp);font-weight:300;
  font-size:var(--fs-2xl);letter-spacing:var(--tr-head)}
.ahlist{list-style:none;margin:0;padding:0}
/* one spine, one node per entry — the same ledger a claim's record draws,
   because the history is the record at story scale */
.ahitem{position:relative;padding:var(--s5) var(--s2) var(--s6) 34px;
  font-size:var(--fs-sm);line-height:1.55;border-bottom:1px solid var(--line-2)}
.ahitem:last-child{border-bottom:0;padding-bottom:var(--s3)}
.ahitem::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1.5px;
  background:var(--line)}
.ahitem:first-child::before{top:24px}
.ahitem:last-child::before{bottom:auto;height:56px}
.ahitem::after{content:"";position:absolute;left:4px;top:24px;width:13px;height:13px;
  border-radius:50%;background:var(--card);border:2px solid var(--line)}
.ahitem.corr::after{background:var(--accent);border-color:var(--accent)}
.ahitem.hit{animation:refHit 1.8s var(--e-out) both}
.ahtop{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.ahk{font-weight:700;color:var(--ink);font-size:var(--fs-md)}
.ahk.corr{color:var(--accent-ink)}
.ahd{flex:0 0 auto;color:var(--ink-3);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.ahgoto{flex:0 0 auto;margin-left:auto;background:transparent;border:0;padding:0;
  font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink);
  cursor:pointer;border-bottom:1px solid transparent}
.ahgoto:hover{border-color:var(--accent)}
.arthist .ahn{margin:var(--s3) 0 0;max-width:600px;font-size:var(--fs-md);
  line-height:1.6;color:var(--ink)}
/* the corrected sentence as it now reads — a quote, so it is set like one;
   the old figure stays legible under its strike */
.ahchange{margin-top:var(--s4);background:var(--sunk);border-radius:var(--r-sm);
  padding:var(--s4) var(--s5)}
.ahcl{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--ink-3)}
.arthist .ahcx{margin:var(--s3) 0 0;font-family:var(--disp);font-weight:300;
  font-size:17.5px;line-height:1.5;color:var(--ink);max-width:56ch}
.ahcx del{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.ahcx ins{text-decoration:none;border-bottom:2px solid var(--accent)}
.ahcs{display:block;margin-top:var(--s3);font-size:var(--fs-xs);color:var(--ink-2)}
.ahwho{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3)}
.ahwt{min-width:0}
.ahwn{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.ahwn .ahwd{font-weight:500;color:var(--ink-3)}
/* the descriptor is the article's own wording about the person, so its length
   is not ours to choose: it wraps to two lines and clips there rather than
   pushing the avatar row apart. Absent entirely on a contributor the article
   never describes, the name line stands alone — the row is centred, so nothing
   collapses. */
.ahwr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2);
  margin-top:3px;max-width:60ch;overflow-wrap:break-word}
/* the same sentence needs a third line once the column is a phone's wide */
@media (max-width:720px){.ahwr{-webkit-line-clamp:3}}
.ahline{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--ink-2)}
.ahline b{color:var(--ink);font-weight:700}
/* the document link sits inside a sentence here, so it dresses as a link,
   not as the doc-row chip */
.ahline .dsrc{display:inline-flex;align-items:baseline;gap:var(--s1);font-size:inherit;
  font-weight:700;color:var(--t3-ink);background:transparent;border:0;padding:0;cursor:pointer;
  font-family:inherit}
.ahline .dsrc:hover{text-decoration:underline;text-underline-offset:3px}
.ahline .dsrc svg{align-self:center}
/* the jump's landing flash — box-shadow so it reads even with the source
   layer toggled off, where sentence backgrounds are suppressed */
@keyframes clHit{
  0%,100%{box-shadow:none;background:transparent}
  14%,52%{box-shadow:0 0 0 3px var(--accent-soft);background:var(--accent-soft)}
}
.cl.hit{animation:clHit 1.8s var(--e-out) both}

/* the inline marker: the citation's shape, in words */
.cite.corr{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.02em;margin-left:4px}
/* a source behind a corrected claim says so in its date line */
.clcard .csr.corr{color:var(--accent-ink);font-weight:700}

/* ── contributions ───────────────────────────────────────────────────────
   A contribution is not a fault in the reporting, so it never borrows the
   alert red a correction owns: the banner sits in the sunk tint, and the
   marker and dates speak in the third accent the source layer already uses
   for people who went on the record. */
.corrbar.contrib{background:var(--sunk);border-color:var(--line)}
.corrbar.contrib .cbt{color:var(--ink)}
.corrbar.contrib .cbl{color:var(--t3-ink);border-bottom-color:var(--line)}
.corrbar.contrib .cbl:hover{border-color:var(--t3-ink)}
.cite.contrib{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.02em;
  margin-left:4px;color:var(--t3-ink);cursor:pointer}
.ahitem.contrib::after{background:var(--t3-ink);border-color:var(--t3-ink)}
/* the jump sits in the panel's footer line here, next to the source number,
   because a grouped entry has one panel per contributed sentence */
.ahitem.contrib .ahgoto{color:var(--t3-ink);margin-left:var(--s2);font-size:inherit}
.ahitem.contrib .ahgoto:hover{border-color:var(--t3-ink)}
.ahitem.contrib .ahchange + .ahchange{margin-top:var(--s3)}
/* no per-contributor colour arrives with the data, so the avatar takes the
   neutral ink rather than inventing one */
.arthist .pav3{background:var(--ink-2);color:var(--card)}
/* a contributor's photo — from their payload or a committed local asset —
   is drawn over the initials inside the same circle, so a photo that fails to
   load reveals the letters rather than an empty disc, and nothing moves */
.pav3{position:relative;overflow:hidden}
.pav3 img.face{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;border-radius:inherit;
  border:1px solid var(--line);box-sizing:border-box;background:var(--card)}
/* a contributor's portrait, when upstream sends one, takes the initials' place
   in the byline block: same square, cropped to it, same typographic size */
.ahwho .pav3.ahpor{overflow:hidden;background:var(--line)}
.ahwho .pav3.ahpor img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:center top;border-radius:inherit}
/* a source that is somebody's contribution says so where the date goes */
.refd.contrib,.clcard .csr.contrib{color:var(--t3-ink);font-weight:700}

@media (max-width:1080px){
  .usp .uspin{grid-template-columns:1fr;gap:var(--s10);padding:var(--s12) 0 var(--s10)}
  .usph{max-width:22ch}
}
@media (max-width:720px){
  .usp .uspin{gap:var(--s8);padding:var(--s10) 0 var(--s8)}
  .usph{max-width:none}
  .uspd{font-size:15px}
  .sectlabel{padding:var(--s8) 0 var(--s5)}
  .artmeta{gap:var(--s4) var(--s6)}
  .refs{margin-top:var(--s10)}
  .refitem{gap:var(--s3)}
  .refn{width:20px}
  .reft{font-size:15px}
}

/* ================= FRONT PAGE — three columns ========================== */
/* lead | two stacked | a headline-only LATEST rail, divided by hairlines  */
.heroz{grid-template-columns:minmax(0,1.75fr) minmax(0,1.15fr) minmax(0,.95fr);gap:0}
.heroz > .lead2{padding-right:var(--s8)}
/* The three lead stories carry a full-width picture, so their date stamp is
   pushed to the far end of the meta row: it then sits flush with the right
   edge of the image above it instead of trailing the source pill. */
.heroz .lead2 .ameta .amt,.heroz .lead2 .ameta .amt2,
.heroz .sidestack .ameta .amt,.heroz .sidestack .ameta .amt2{margin-left:auto}
.heroz > .sidestack{padding:0 var(--s8);border-left:1px solid var(--line)}
.latestcol{padding-left:var(--s8);border-left:1px solid var(--line);min-width:0}
.lclist{list-style:none;margin:0;padding:0}
/* Latest runs three stories, each stacked: picture, headline, hour. */
/* same plate custom properties as .im, so a transparent thumbnail gets the
   same neutralised treatment from one inline set of properties */
.lcthumb{display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-2);
  --im-plate:var(--line-3);--im-fit:cover;--im-pos:center 28%;
  overflow:hidden;background:var(--im-plate);position:relative}
.lcthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--im-fit);
  object-position:var(--im-pos);opacity:0;transition:opacity var(--d-5) var(--e-out)}
.lcthumb img.ready,.lcthumb img[data-ready]{opacity:1}
.lcitem{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s5) 0;
  border-top:1px solid var(--line-2);cursor:pointer;
  transition:background var(--d-2) var(--e-out)}
.lcitem:first-child{border-top:0}
.lct{min-width:0;font-family:var(--disp);font-weight:400;font-size:17px;
  line-height:1.3;letter-spacing:var(--tr-snug);
  transition:color var(--d-2) var(--e-out)}
/* the foot of a rail item: the pill reads alongside the hour rather than
   competing with the headline, and wraps under it if the column gets tight.
   Scoped to the direct child — a pill nested in a meta row takes the .ameta
   rule below instead, never both (see .cslead for the same pairing). */
.lcfoot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;min-width:0}
.lcfoot > .amsrc,.lcfoot > .amsrcw{max-width:100%;min-width:0}
.lcfoot > .ameta{margin-top:0}
.lcm{align-self:center;padding-top:0}
.lcitem:hover .lct{color:var(--accent-ink)}

@media (max-width:1080px){
  .heroz{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  /* LATEST drops to its own row here, and a sticky lead travels straight over
     it — the sticky is only correct while all three columns share a row */
  .lead2{position:static}
  .latestcol{grid-column:1 / -1;border-left:0;padding-left:0;padding-top:var(--s7);
    margin-top:var(--s7);border-top:1px solid var(--line)}
  .lclist{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8)}
  .lcitem:nth-child(2){border-top:0}
}
@media (max-width:720px){
  .heroz{grid-template-columns:1fr}
  .heroz > .lead2{padding-right:0}
  .heroz > .sidestack{padding:0;border-left:0}
  .lclist{grid-template-columns:1fr}
  .lcitem:nth-child(2){border-top:1px solid var(--line-2)}
  .lct{font-size:16px}
}

/* the docked mobile bar now carries a source, so its label is neutral */

/* --- article page, phones ------------------------------------------------
   The rail stacks under the body, so its heading needs to read as a section
   rather than a sidebar label, and the references need room. */
@media (max-width:720px){
  .clrail{margin-top:var(--s8);padding-top:var(--s6);border-top:2px solid var(--ink)}
  .clrail .rh{margin-bottom:var(--s4)}
  .clrail .rh .a{font-size:var(--fs-xs);letter-spacing:.12em}
  .artmeta{gap:var(--s4) var(--s6);padding:var(--s4) 0}
  .amk{font-size:9.5px;letter-spacing:.1em}
  .cite{font-size:.66em}
  /* the docked bar must not sit on top of the last line of the references */
  .art,.clrail{padding-bottom:0}
}

/* ---- the source cluster is the pill now (the claim pill is gone) ------- */
.amsrc{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);
  padding:5px var(--s3) 5px 6px;
  transition:border-color var(--d-2) var(--e-out)}
.amsrc:hover{border-color:var(--ink-4)}
.amsrc .srcbadge{border-color:var(--card)}
/* the single source of truth for meta text (bylines). The pill's own count
   label is styled by the pill rules below, not here. */
.ameta .amo{font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ameta.sm{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ameta.sm .amo{font-size:var(--fs-2xs)}
.nbcard .nbtx > .amsrcw,.nbfeat .nbtx > .amsrcw{align-self:flex-start;margin-top:auto}

/* --------------------------------------------- card source pill list ----
   The pill is a disclosure: the wrapper is the anchor the panel is measured
   against, and the panel itself is moved to <body> while open (cards clip
   their overflow, so a panel positioned inside one is cut off at the card's
   edge) and placed in viewport coordinates by the SPA. */
.amsrcw{display:inline-flex;align-items:center;min-width:0;flex:0 0 auto;position:relative}
.amsrc[role="button"]{cursor:pointer}
.amsrc:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.srcpop{position:fixed;left:0;top:0;z-index:60;display:flex;flex-direction:column;
  width:max-content;max-width:min(320px,calc(100vw - 20px));max-height:min(340px,60vh);
  overflow-y:auto;overscroll-behavior:contain;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4);
  padding:var(--s2);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px);
  transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out),
    visibility 0s var(--d-2)}
.srcpop.up{transform:translateY(-4px)}
.srcpop.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
/* one line per source, so the row is centred against its icon rather than
   stacked beside it */
.srcpop .spr{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s3);
  border-radius:var(--r-sm);min-width:0;text-decoration:none;color:inherit;
  transition:background var(--d-2) var(--e-out),transform var(--d-2) var(--e-out)}
.srcpop .spr.lnk{cursor:pointer}
.srcpop .spr.lnk:hover{background:var(--sunk);transform:translateX(2px)}
.srcpop .spr.lnk:hover .srcbadge{transform:scale(1.06)}
.srcpop .spr.lnk:active{transform:translateX(1px) scale(.995)}
.srcpop .spr.lnk:focus-visible{background:var(--sunk);outline:2px solid var(--accent-ink);
  outline-offset:-2px}
/* bigger in the panel than on the card: these read as logos, not dots */
.srcpop .srcbadge{width:30px;height:30px;font-size:11px;margin-left:0;border-width:2px;
  border-color:var(--card);flex:0 0 auto;
  transition:transform var(--d-2) var(--e-out)}
.srcpop .spt{display:flex;flex-direction:column;min-width:0}
.srcpop .spn{font-size:var(--fs-xs);font-weight:700;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a contributor is a person, not a document: with the kind label gone, the
   name itself carries the accent the site uses for people elsewhere */
.srcpop .spr.contrib .spn{color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){
  .srcpop .spr,.srcpop .srcbadge{transition:none}
  .srcpop .spr.lnk:hover,.srcpop .spr.lnk:active{transform:none}
  .srcpop .spr.lnk:hover .srcbadge{transform:none}
}

/* ---- one pill, many sizes ---------------------------------------------
   The renderer sets --pill-s from the slot the pill sits in (see pillScale
   in app.js) and EVERY dimension below is derived from it, so a pill in the
   narrow rail is the same component as the one under the lead image, not a
   lead pill with smaller badges. A pill without the property — the
   server-rendered article page — sits at scale 1. */
.amsrc{--pill-s:1}
.amsrc,.ameta .amsrc{
  gap:calc(var(--s2) * var(--pill-s));
  padding:calc(5px * var(--pill-s)) calc(var(--s3) * var(--pill-s))
          calc(5px * var(--pill-s)) calc(6px * var(--pill-s))}
/* .ameta .amsrc … is listed too so these win over the article-meta rules
   above, which are more specific than a bare .amsrc descendant selector */
.amsrc .srcbadge,.ameta .amsrc .srcbadge{
  width:calc(20px * var(--pill-s));height:calc(20px * var(--pill-s));
  font-size:calc(9.5px * var(--pill-s));
  border-width:calc(2.5px * var(--pill-s));
  margin-left:calc(-10px * var(--pill-s))}
.amsrc .srcbadge:first-child,.ameta .amsrc .srcbadge:first-child{margin-left:0}
/* the count label's SIZE rides on the scale, but its WEIGHT is constant: the
   same component must not read bolder because of the slot it sits in (a bare
   pill would otherwise inherit the card's weight, a nested one the meta row's) */
.amsrc .amo,.ameta .amsrc .amo{font-size:calc(var(--fs-2xs) * var(--pill-s));font-weight:500}

/* ===================== V104 — MASTHEAD + TYPE WEIGHTS =================== */

/* --- the masthead: centred, large, with newspaper air above it ---------- */
.masthead{background:var(--app);text-align:center;
  margin-top:-20px;padding:var(--s2) var(--s5) var(--s4)}
.masthead[hidden]{display:none}
.mtag{margin:0 0 var(--s4);font-size:var(--fs-xs);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2)}
.mmark{display:flex;justify-content:center;margin:0}
.mmark svg{height:clamp(38px,4.6vw,64px);width:auto;display:block}
/* the wordmark is ink-coloured, so it inverts with the theme like the header */
:root[data-theme="dark"] .mmark path:not(:nth-of-type(-n+2)){fill:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mmark path:not(:nth-of-type(-n+2)){fill:var(--ink)}
}

/* on the front the masthead is the masthead — the compact bar waits until it
   has scrolled away, so the wordmark never appears twice at once */
body.masthead-top .hd{opacity:0;pointer-events:none;box-shadow:none;
  border-bottom-color:transparent;transition:opacity var(--d-3) var(--e-out)}

/* --- the section menu sits centred beneath it -------------------------- */
.catrow .wrap{justify-content:center}
.catrow a:first-child{padding-left:var(--s4)}
@media (max-width:720px){
  .catrow .wrap{justify-content:flex-start}
  .catrow a:first-child{padding-left:0}
}

/* --- type weights ------------------------------------------------------
   The lead carries the page, so it is smaller but set bold. Every other
   headline moves from light to regular, which is what makes a front page
   read as reported rather than as a brochure. */
.lead2 h2{font-size:clamp(26px,1.1rem + 1.5vw,36px);font-weight:400;
  letter-spacing:-.02em;line-height:1.14}
.sart h3,.mini h3,.card h2,.nbh,.lct,.rail .rt .a,.latest .big h3,
.edchoice h3,.tcard .tq,.cq2,.tcrow .q,.hq,.hq2,.lead h2,
.heroz .colC h2{font-weight:400}

/* =============== V104 — THE HERO BAND, ON THE BRAND GRADIENT ============ */
/* Same gradient as the closing statement above the footer, so the page opens
   and closes on the same surface.                                          */
.usp{background:linear-gradient(90deg,#56001E 0%,#921943 100%);
  border-bottom:0;color:#fff}
.usp .uspin{padding:var(--s10) 0;align-items:start}
.usph{color:#fff;max-width:15ch}
.uspd{color:rgba(255,255,255,.76);max-width:52ch}

.uspproof li{border-top-color:rgba(255,255,255,.16);align-items:flex-start;
  gap:var(--s4);padding:var(--s4) 0}
.uspproof li:first-child{border-top:0;padding-top:0}
.pi{flex:0 0 auto;width:22px;height:22px;display:flex;color:#F3B9C7;margin-top:1px}
.pi svg{width:100%;height:100%;display:block}
.uspproof .pt b{color:#fff;font-size:14.5px;font-weight:700;line-height:1.35;
  display:block;margin-bottom:4px}
.uspproof .pt span{color:rgba(255,255,255,.7);font-size:var(--fs-xs);line-height:1.55}

/* the look lives in .flowbtn; this only places it */
.uspcta{margin-top:var(--s6)}
.uspcta:focus-visible{box-shadow:0 0 0 2px var(--deep),0 0 0 4.5px #fff}

@media (max-width:1080px){
  .usp .uspin{padding:var(--s8) 0}
  .usph{max-width:20ch}
}
@media (max-width:720px){
  .usp .uspin{padding:var(--s7) 0}
  .usph{max-width:none}
  .uspcta{width:auto}   /* full-bleed on a phone read as a layout error */
}

/* ---- the hero band: ranged left, and centred against the proof list ---- */
.uspa{text-align:left;align-self:center}
.usph,.uspd{margin-left:0;margin-right:0}

/* ===================== CATEGORY FRONTS (Semafor-style) ================== */
.csec{border-top:2px solid var(--ink);padding-top:var(--s5);margin-bottom:var(--s14)}
.csech{font-family:var(--disp);font-weight:400;font-size:30px;letter-spacing:var(--tr-head);
  margin:0 0 var(--s6);line-height:1.1}
.csband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);
  gap:0;align-items:start}
.cscol{padding:0 var(--s6);min-width:0}
.csl{padding-left:0;border-right:1px dotted var(--line)}
.csr{padding-right:0;border-left:1px dotted var(--line)}
.cslead{padding:0 var(--s6);cursor:pointer;text-align:center;min-width:0}
.csleadh{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.2;
  margin:0 0 var(--s3);letter-spacing:var(--tr-head)}
.csleadd{font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);
  margin:0 auto var(--s4);max-width:44ch}
.cslead .im{aspect-ratio:16/10}
/* the pill row sits 11px under the lead image, whether it is the bare pill
   (sample stories) or the .ameta wrapper (real articles) — scoped to the
   direct child so a nested .amsrc does not take the margin a second time */
.cslead > .amsrc,.cslead > .amsrcw{display:flex;width:fit-content;margin:11px auto 0}
.cslead > .ameta{justify-content:center;margin-top:11px}
.cslead:hover .csleadh{color:var(--accent-ink)}

.csitem{display:block;cursor:pointer;padding:var(--s4) 0;border-top:1px dotted var(--line);
  text-align:left}
.csitem:first-child{border-top:0;padding-top:0}
.csh{display:block;font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.24;
  margin-bottom:6px;letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)}
.csd{display:block;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
/* the flanking headlines carry the same pill as their section lead, one step
   smaller — direct child only, so a pill inside a meta row is spaced by the
   wrapper rule beside it and never by both */
.csitem > .amsrc,.csitem > .amsrcw{display:inline-flex;max-width:100%;margin-top:var(--s3)}
.csitem > .ameta{margin-top:var(--s3)}
.csitem:hover .csh{color:var(--accent-ink)}

@media (max-width:1080px){
  .csband{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .csr{grid-column:1 / -1;padding:var(--s5) 0 0;border-left:0;
    border-top:1px dotted var(--line);margin-top:var(--s5)}
}
@media (max-width:720px){
  .csband{grid-template-columns:1fr}
  .cscol,.cslead{padding:0}
  /* Phone reading order: lead first (order:-1), then the headline columns.
     The seam rule moves with it — lead carries the divider that used to sit
     on .csl's bottom edge; .csr keeps its top rule between the two headline
     groups. */
  .csl{border-right:0}
  .cslead{order:-1;text-align:left;padding-bottom:var(--s5);
    border-bottom:1px dotted var(--line);margin-bottom:var(--s5)}
  .csleadd{margin-left:0}
  .csr{margin-top:var(--s5)}
  .csech{font-size:25px}
}

/* --- "Expert Insights": double scale, bold ------------------------ */
.secthead{align-items:flex-end}
.secthead .st{font-size:clamp(32px,1.5rem + 2.1vw,52px);font-weight:600;
  line-height:1.06;letter-spacing:-.022em}
.experthead{margin-bottom:var(--s5)}
.experthead>span:first-child{min-width:0}
.expertsub{display:block;margin-top:var(--s3);max-width:66ch;font-size:var(--fs-sm);
  line-height:1.55;color:var(--ink-2)}
.expertinst{overflow:hidden;width:100vw;max-width:none;
  margin:0 calc(50% - 50vw) var(--s8);background:transparent;border:0}
.expertinsttrack{display:flex;width:max-content;transform:translateX(-50%);
  animation:expertinst-left 42s linear infinite;will-change:transform}
.expertinsttrack:hover{animation-play-state:paused}
.expertinstset{display:flex;align-items:center;flex:none;gap:clamp(37.4px,4.675vw,74.8px);
  list-style:none;margin:0;padding:var(--s6) clamp(37.4px,4.675vw,74.8px) var(--s6) 0}
.expertinstslot{display:flex;align-items:center;justify-content:center;
  flex:0 0 clamp(126px,12vw,176px)}
.expertinstitem{position:relative;display:block;width:100%;height:36px;border-radius:var(--r-xs);
  outline:none}
.expertinstmark{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;transform:scale(.8);transition:opacity var(--d-2) var(--e-out)}
.expertinstitem-preserve-size .expertinstmark{transform:none}
.expertinstcolor{opacity:1}
.expertinstmono{opacity:0}
.expertinsttrack:is(:hover,:focus-within) .expertinstcolor{opacity:0}
.expertinsttrack:is(:hover,:focus-within) .expertinstmono{opacity:1}
.expertinsttrack:is(:hover,:focus-within) .expertinstitem:is(:hover,:focus) .expertinstcolor{opacity:1}
.expertinsttrack:is(:hover,:focus-within) .expertinstitem:is(:hover,:focus) .expertinstmono{opacity:0}
.expertinstitem:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
@keyframes expertinst-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:720px){
  .secthead .st{font-size:30px}
  .experthead{align-items:flex-start}
  .experthead .va{display:none}
  .expertinst{margin-bottom:var(--s7)}
  .expertinstset{gap:calc(var(--s8)*.85);
    padding:var(--s5) calc(var(--s8)*.85) var(--s5) 0}
  .expertinstslot{flex-basis:124px}
  .expertinstitem{height:32px}
}
@media (prefers-reduced-motion:reduce){
  .expertinsttrack{display:block;width:100%;animation:none;transform:none}
  .expertinstset[aria-hidden]{display:none}
  .expertinstset:not([aria-hidden]){display:grid;width:100%;
    grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
    gap:var(--s6) var(--s7);padding:var(--s6) var(--s5)}
  .expertinstslot{min-width:0}
}

/* ========================= THE PRIMARY INDEX =========================== */
.pindex{border-top:2px solid var(--ink);padding-top:var(--s5);margin-bottom:var(--s14)}
.pixhead{margin-bottom:var(--s7)}
.pixh{font-family:var(--disp);font-weight:600;font-size:clamp(32px,1.5rem + 2.1vw,52px);
  line-height:1.06;letter-spacing:-.022em;margin:0 0 var(--s2)}
.pixs{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);max-width:56ch}

.pixgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-im);overflow:hidden;
  background:var(--card)}
.pixbox{padding:var(--s6) var(--s6) var(--s5);min-width:0}
.pixbox:first-child{border-right:1px solid var(--line)}
.pixbh{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:var(--s4);border-bottom:1px solid var(--line-2);
  margin-bottom:var(--s2)}

.pixlist{list-style:none;margin:0;padding:0}
.pixrow,.pixlink{display:grid;grid-template-columns:22px 40px minmax(0,1fr) auto;
  align-items:center;column-gap:var(--s3)}
.pixrow{padding:var(--s4) 0;border-top:1px solid var(--line-2)}
.pixrow:first-child{border-top:0}
/* a row that links to a profile: the anchor takes over the grid + padding so
   the whole row is the click/focus target */
.pixrow.haslnk{display:block;padding:0}
.pixlink{padding:var(--s4) 0;text-decoration:none;color:inherit;cursor:pointer}
.pixlink:hover .pixname{text-decoration:underline;text-underline-offset:3px}
.pixlink:focus-visible{outline:2px solid currentColor;outline-offset:-2px;
  border-radius:var(--r-sm,6px)}
.pixn{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;
  text-align:center}
.pixav{width:40px;height:40px;border-radius:var(--r-full);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  position:relative;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px var(--card)}
.pixav .ini{position:relative;z-index:1}
.pixav img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:18%;border-radius:var(--r-full)}
.pixt{display:block;min-width:0}
.pixname{display:block;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pixsub{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pixscore{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:-.01em}

@media (max-width:900px){
  .pixgrid{grid-template-columns:1fr}
  .pixbox:first-child{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .pixbox{padding:var(--s5) var(--s5) var(--s4)}
  /* the score was carrying twice the name's weight in half the width, which
     is what made the rows read as clutter */
  .pixrow,.pixlink{grid-template-columns:16px 30px minmax(0,1fr) auto;column-gap:var(--s2)}
  .pixrow,.pixlink{padding:var(--s3) 0}
  .pixav{width:30px;height:30px;font-size:10.5px}
  .pixn{font-size:var(--fs-2xs)}
  .pixname{font-size:14px}
  .pixsub{font-size:var(--fs-2xs)}
  .pixscore{font-size:15px}
  .pixh{font-size:30px}
}

/* ---- Primary Index: header row, regular-weight titles, score number ---- */
.pixhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  margin-bottom:var(--s5)}
.pixh,.secthead .st{font-weight:400}
/* the look lives in .flowbtn */
.pixcta{white-space:nowrap}

.pixscore{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.psnum{font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;
  letter-spacing:-.012em;color:var(--ink);font-variant-numeric:tabular-nums}
/* a publication row has no second line, so the name centres on the avatar */
.pixt.solo .pixname{line-height:1.25}

@media (max-width:720px){
  .psnum{font-size:21px}
}

/* On a narrow phone the score block and the name compete for the same row.
   "The Wall Street Journal" is the longest label we carry, so the step below
   is sized to let it set without an ellipsis. */
@media (max-width:430px){
  .pixrow,.pixlink{grid-template-columns:14px 28px minmax(0,1fr) auto}
  .pixav{width:28px;height:28px;font-size:10px}
  .pixname{font-size:13.5px}
  .psnum{font-size:19px}
  /* a publication row has no second line, so a long masthead can take two
     rather than ellipsise — this only bites below ~340px */
  .pixt.solo .pixname{white-space:normal}
}

/* ============ V104b — BOTH BANDS AS INSET COLOUR BLOCKS ================= */
/* The colour stops at the wrap, not at the viewport, so the paper frames it. */

/* ---- the hero band: flat brand crimson, serif point titles ------------- */
.usp{background:transparent;border-bottom:0}

.usp .uspin{background:#AE2448;border-radius:var(--r-im);
  padding:var(--s10) var(--s8);margin:0}
.uspproof li{align-items:center;border-top-color:rgba(255,255,255,.18)}
/* the point titles take the display face, matching the headline above them */
.uspproof .pt b{font-family:var(--disp);font-weight:400;font-size:17.5px;
  line-height:1.3;letter-spacing:var(--tr-snug);color:#fff;margin-bottom:5px}
.uspproof .pt span{color:rgba(255,255,255,.72)}
.pi{color:rgba(255,255,255,.62);margin-top:0}

/* ---- the Primary Index: a gold band holding a cream panel -------------- */
.pindex{background:#E9A93C;border-top:0;border-radius:var(--r-im);
  padding:var(--s10) var(--s8);margin-bottom:var(--s14)}
.pixh{color:var(--ink)}
.pixs{color:var(--ink-2)}
.pixgrid{border:0;border-radius:var(--r-sm);background:var(--card);overflow:hidden}
.pixbox:first-child{border-right:1px solid var(--line-2)}

@media (max-width:1080px){
  .usp .uspin{padding:var(--s8) var(--s6)}
  .pindex{padding:var(--s8) var(--s6)}
}
@media (max-width:720px){
  .usp .uspin{padding:var(--s7) var(--s5)}
  .pindex{padding:var(--s7) var(--s5)}
  .uspproof .pt b{font-size:16.5px}
}

/* ---- both bands run edge to edge again; content stays on the wrap ------ */
.usp{background:#AE2448}
.usp .uspin{background:transparent;border-radius:0;padding:calc(var(--s10) + 10px) 0}
/* Full bleed, so the gap below it reads as cream, not gold. The bottom
   padding runs deeper than the top so the leaderboards are not crowded
   against the band edge. */
.pindex{background:linear-gradient(90deg,#56001E 0%,#921943 100%);border-radius:0;margin-bottom:var(--s20);
  padding:var(--s16) 0 var(--s20)}
.pindex .wrap{padding-left:var(--s5);padding-right:var(--s5)}
@media (max-width:1080px){
  .usp .uspin{padding:var(--s8) 0}
  .pindex{padding:var(--s10) 0}
}
@media (max-width:720px){
  .usp .uspin{padding:var(--s7) 0}
  .pindex{padding:var(--s8) 0}
}

/* ============================ V105 — THE GLOBE ========================= */
.usp{position:relative;overflow:hidden}
.usp .wrap{position:relative;z-index:2}
.usp .uspin{display:block}
.uspa{max-width:54ch;align-self:auto}
.usph{max-width:16ch}

.hglobe{position:absolute;z-index:1;right:-7%;top:50%;transform:translateY(-50%);
  width:clamp(340px,52vw,720px);aspect-ratio:1/1;display:block;
  opacity:0;pointer-events:none;
  transition:opacity 1.2s ease}
@media (prefers-reduced-motion:reduce){.hglobe{transition:opacity .2s ease}}

@media (max-width:1080px){
  .hglobe{right:-18%;width:clamp(300px,60vw,560px);opacity:.85}
  .uspa{max-width:46ch}
}
@media (max-width:720px){
  /* Keep the globe below the type without making the opening band dominate
     the phone viewport. */
  .usp .uspin{padding:var(--s7) 0 50px}
  .hglobe{right:-24%;top:auto;bottom:-60%;transform:none;
    width:min(285px,78vw)}
  .uspa{max-width:none;position:relative;z-index:2}
}

/* ======================= V1 — HOMEPAGE PARTNER RAIL ===================== */
.usplmask{overflow:hidden;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.uspltrack{display:flex;width:max-content;
  animation:uspl-left 42s linear infinite;will-change:transform}
.uspltrack:hover{animation-play-state:paused}
.usplset{display:flex;align-items:center;flex:none;gap:52px;padding-right:52px}
.usplset img{height:28px;width:auto;max-width:150px;display:block;
  object-fit:contain;flex-shrink:0;
  filter:brightness(0) invert(1);opacity:.62}
@keyframes uspl-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes uspl-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.usplmask + .usplmask{margin-top:var(--s14)}
.usplmask:first-of-type{transform:translateY(-10px)}
.usplrev .uspltrack{animation-name:uspl-right}

@media (min-width:1200px){
  .usp .uspin{display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);
    column-gap:var(--s12);align-items:center;
    min-height:313px;
    padding:var(--s6) 0;
    padding-left:max(0px,calc(clamp(300px,31vw,446px) / 2 - 26px - max(20px,(100vw - 1200px) / 2)))}
  .uspa{margin-left:0}
  .uspb{min-width:0;align-self:center}
  .usplmask{max-width:none;width:calc(100% + max(20px,(100vw - 1200px) / 2));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 97%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 97%,transparent 100%)}
}
/* Keep the approved 1440px composition and its full-bleed rail unchanged. */
@media (min-width:1440px){
  .usp .uspin{padding-left:180px}
  .usp .uspa{margin-left:-100px}
}
@media (min-width:721px){
  .hglobe{right:auto;left:calc(50% - 50vw);
    transform:translate(calc(-50% - 58px),-50%);
    width:clamp(300px,31vw,446px);opacity:.9}
}
@media (min-width:721px) and (max-width:1199px){
  /* Both text and marquees start 32px beyond the globe's visible edge. */
  .usp .wrap{max-width:none;
    padding-left:calc(clamp(300px,31vw,446px) / 2 - 26px)}
  .usp .uspin{padding:var(--s8) 0}
  .usp .uspa{margin-left:0;max-width:56ch}
  .usp .usph{max-width:22ch}
}
@media (max-width:1199px){
  .usp .uspin{display:block}
  .uspb{min-width:0;margin-top:var(--s7)}
  .usplmask{max-width:100%;width:100%;margin-left:0}
  .usplset img{height:22px;max-width:110px}
  .usplset{gap:36px;padding-right:36px}
  .usplmask + .usplmask{margin-top:var(--s6)}
  .usplmask:first-of-type{transform:none}
}
@media (max-width:720px){
  /* Trim 82px (~20% of the mobile band) from the decorative shelf.
     Offset the globe equally so its top stays below both partner rows. */
  .usp .uspin{padding:var(--s7) 0 62px}
  .usp .hglobe{left:auto;right:-56px;top:auto;bottom:-218px;
    width:248px;transform:none}
  .uspa,.uspb{position:relative;z-index:2}
  .usp .usph{font-size:clamp(26px,5.5vw,34px);max-width:22ch;line-height:1.12}
  .usp .uspd{font-size:13px;line-height:1.55}
  .usplset img{height:22px;max-width:110px}
  .usplset{gap:26px;padding-right:26px}
  .usplmask + .usplmask{margin-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .uspltrack,.usplrev .uspltrack{animation:none}
}

/* ================================ ABOUT ================================
   One page ground throughout: no dividers between chapters and no
   alternating tints. Colour lands exactly three times — the crimson hero,
   the dark code panel in chapter 07 and the closing deep band. Everywhere
   else crimson survives only as a small mark: the square in a label pill,
   the principle icons, the rule above the pull quote.
   The page carries its own corner radii. --r-im (5px) is the site-wide
   near-square image corner and is not repointed here.                     */
.abhero,.abmain,.abclose{--ab-r:12px;--ab-r-sm:9px}

/* ---- hero -------------------------------------------------------------- */
/* the crimson is this band's own identity, so it holds in either theme */
/* --ab-globe is how far the globe reaches up into the band. The bottom
   padding is derived from it, so the standfirst always clears the crest by
   the gap term no matter how the band is sized. */
.abhero{position:relative;overflow:hidden;background:#AE2448;color:#fff;
  --ab-globe:168px;
  padding:clamp(44px,5vw,76px) 0 calc(var(--ab-globe) + clamp(28px,4vw,56px))}
.abheroin{position:relative;z-index:2;text-align:center}
.abhh{margin:0 auto var(--s7);font-family:var(--disp);font-weight:400;
  font-size:clamp(34px,1.7rem + 3vw,68px);line-height:1.04;letter-spacing:-.026em;
  max-width:26ch}
.abhp{margin:0 auto;font-size:var(--fs-md);line-height:1.62;
  color:rgba(255,255,255,.84);max-width:58ch}
/* The globe hangs off the foot of the band, so it is placed from the band's
   own height with `top`. A percentage `bottom` resolves against the hero
   while the globe is sized from viewport width, and at desktop the two
   drift apart until it climbs up behind the standfirst. The canvas sets its
   own inline opacity once it has drawn, which outranks the rule below. */
.abglobe{position:absolute;z-index:1;top:calc(100% - var(--ab-globe));left:50%;
  transform:translateX(-50%);width:min(900px,104vw);aspect-ratio:1/1;display:block;
  opacity:0;pointer-events:none;transition:opacity 1.2s ease}

/* ---- the two rooms ----------------------------------------------------- */
/* The page is two environments rather than one column of like-sized
   chapters: room one pins a stage and advances its panes as the reader
   scrolls, room two stands still and lays its material out as a bento.
   Both open on a bare line of type instead of a label.                     */
.abmain{display:block}
.abroom{position:relative}
.abroomline{margin:0 auto;max-width:60ch;text-align:center;font-family:var(--disp);
  font-weight:400;font-size:clamp(24px,1.2rem + 1.6vw,40px);line-height:1.16;
  letter-spacing:var(--tr-head);color:var(--ink)}
.abh{margin:0 0 var(--s6);font-family:var(--disp);font-weight:400;
  font-size:clamp(28px,1.4rem + 2.1vw,54px);line-height:1.08;letter-spacing:-.022em;
  max-width:24ch}
.abp{margin:0;font-size:var(--fs-md);line-height:1.68;color:var(--ink-2);
  max-width:58ch}
.abp + .abp{margin-top:var(--s4)}

/* ---- room one: the pinned stage ---------------------------------------- */
/* --ab-pin is the single source of truth for whether the stage pins: the
   breakpoint and the reduced-motion opt-out below flip it to 0 and app.js
   reads it back, so the switch is not written down twice. Three panes, so
   the section runs three viewports tall and each pane owns one of them.    */
.abroom1{--ab-pin:1;height:calc(3 * 100vh)}
.abstage{position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h));
  height:calc(100svh - var(--hd-h));display:flex;align-items:center;overflow:hidden}
.abstagein{width:100%}
.abtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.2vw,32px);
  margin:clamp(22px,3vw,40px) 0 clamp(26px,4vw,54px)}
.abtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:var(--s2) 0;font:inherit;font-size:var(--fs-sm);color:var(--ink-3);
  cursor:pointer;transition:color .25s ease,border-color .25s ease}
.abtab:hover{color:var(--ink-2)}
.abtab.on{color:var(--ink);border-bottom-color:var(--accent)}
.abpanes{position:relative}
.abpane{display:grid;gap:clamp(22px,3.5vw,60px);align-items:center;
  scroll-margin-top:calc(var(--hd-h) + 20px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease}
.abpane:not(.on){position:absolute;inset:0}
.abpane.on{position:relative;opacity:1;visibility:visible;transform:none}
.abpl,.abpr{min-width:0}
/* one pane is bare type, one sets its quote beside the prose, one runs the
   flow full width under a two-column head */
.abpsolo{grid-template-columns:minmax(0,1fr);max-width:62ch;margin:0 auto;text-align:center}
.abpsolo .abh,.abpsolo .abp{margin-left:auto;margin-right:auto}
.abpsplit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.abpwide{grid-template-columns:minmax(0,1fr)}
.abpwide .abpl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,56px);align-items:end}
.abpwide .abh{margin-bottom:0}
.abstage .abh{font-size:clamp(26px,1.1rem + 1.7vw,44px)}
/* the quote sets with the prose here, not centred on the page */
.abpr .abquote{margin:0;max-width:26ch;padding-top:var(--s8)}
.abpr .abquote::before{left:0;transform:none}
/* the stage pins at every width now, so the flow keeps its three tracks
   wherever the stage is pinned: it has exactly one screen to work with */
.abroom1:not(.abstack) .abflow{grid-template-columns:repeat(3,minmax(0,1fr))}
.abroom1:not(.abstack) .abstep{padding:var(--s5)}
/* pane internals go single-column on narrow screens in either mode */
@media (max-width:880px){
  .abpsolo,.abpsplit,.abpwide{grid-template-columns:minmax(0,1fr);
    max-width:none;margin:0;text-align:left}
  .abpsolo .abh,.abpsolo .abp{margin-left:0;margin-right:0}
  .abpwide .abpl{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .abpwide .abh{margin-bottom:var(--s6)}
}
/* the compact register the pinned stage needs to fit a phone screen; the
   flow becomes a snap carousel so three cards never stack vertically */
@media (max-width:720px){
  .abroom1:not(.abstack) .abroomline{font-size:clamp(17px,4.8vw,22px)}
  .abroom1:not(.abstack) .abtabs{margin:var(--s4) 0 var(--s5)}
  .abroom1:not(.abstack) .abstage .abh{font-size:clamp(20px,5.6vw,26px)}
  .abroom1:not(.abstack) .abstage .abp{font-size:var(--fs-sm);line-height:1.6}
  .abroom1:not(.abstack) .abpane{gap:var(--s5)}
  .abroom1:not(.abstack) .abpr .abquote{padding-top:var(--s6);
    font-size:clamp(20px,5.8vw,26px)}
  .abroom1:not(.abstack) .abflow{grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:min(300px,82vw);gap:var(--s3);
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2)}
  .abroom1:not(.abstack) .abstep{scroll-snap-align:center;padding:var(--s4) var(--s5)}
}
/* one measuring frame: every pane in flow so the controller can read the
   natural heights and decide whether the stage can pin */
.abroom1.abmeasure .abpane{position:relative;inset:auto}
/* the stacked fallback. The controller applies it when the tallest pane
   cannot fit one screen — short landscape viewports, mostly — and when
   motion is unwelcome. It owns --ab-pin so the controller and the layout
   cannot disagree. */
.abroom1.abstack{--ab-pin:0;height:auto;padding:clamp(56px,8vw,96px) 0}
.abstack .abstage{position:static;display:block;height:auto;overflow:visible}
.abstack .abpanes{display:grid;gap:clamp(52px,9vw,88px)}
.abstack .abpane,.abstack .abpane:not(.on){position:relative;inset:auto;
  opacity:1;visibility:visible;transform:none}

/* ---- the pull quote: type, not a card ---------------------------------- */
.abquote{position:relative;margin:0 auto;padding:var(--s10) 0 0;max-width:34ch;
  font-family:var(--disp);font-weight:400;font-size:clamp(24px,1.2rem + 1.7vw,42px);
  line-height:1.16;letter-spacing:-.018em;color:var(--ink)}
.abquote::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:52px;height:2px;background:var(--accent)}

/* ---- the source-to-story flow ---------------------------------------- */
.abflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.abstep{display:flex;flex-direction:column;text-align:left;padding:var(--s6);
  background:var(--card);border:1px solid var(--line-3);border-radius:var(--ab-r);
  transition:border-color var(--d-2) var(--e-out)}
.abstep:hover{border-color:var(--line-2)}
.abstepn{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-4);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;margin-bottom:var(--s5)}
.absteph{font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.25;
  margin:var(--s5) 0 var(--s2)}
.abstepp{margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--ink-2)}

/* miniatures of the real surfaces; they sit sunk into the step card */
.fx{background:var(--page);border:1px solid var(--line-3);border-radius:var(--ab-r-sm);
  padding:var(--s4);min-height:104px;display:flex;flex-direction:column;justify-content:center}
.fxrow{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.fxrow .srcbadge{width:22px;height:22px;font-size:9px;border-width:2px;margin-left:0}
.fxo{font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
.fxk{font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-full);padding:3px 8px;
  background:var(--t3-bg);color:var(--t3-ink);white-space:nowrap}
.fxt{font-size:var(--fs-sm);line-height:1.4;color:var(--ink)}
.fxd{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:var(--s2)}
.fxp{margin:0;font-size:var(--fs-sm);line-height:1.55;
  text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--ink-4) 70%,transparent)}
.fxrefrow{display:flex;gap:var(--s3);align-items:flex-start}
.fxn{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.fxlink{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--accent-ink);
  margin-top:4px}

/* ---- principles: six equal compact cards ------------------------------ */
/* three across, so the six principles land as a clean 3x2 */
.ablist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ablist li{position:relative;display:flex;align-items:center;gap:var(--s4);text-align:left;
  padding:var(--s5) var(--s6);background:var(--card);border:1px solid var(--line-3);
  border-radius:var(--ab-r);transition:border-color var(--d-2) var(--e-out)}
.ablist li:hover{border-color:var(--line-2)}
.abi{flex:0 0 auto;width:26px;height:26px;color:var(--accent);display:flex}
.abi svg{width:100%;height:100%;display:block}
.abt{flex:1;min-width:0;font-family:var(--disp);font-weight:400;font-size:19px;
  line-height:1.24;letter-spacing:var(--tr-snug);padding-right:var(--s6)}
.abln{position:absolute;top:50%;right:var(--s6);transform:translateY(-50%);
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-4);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* ---- the closing band -------------------------------------------------- */
.abclose{background:var(--deep);padding:clamp(76px,9vw,140px) 0;text-align:center}
.abch{margin:0 auto var(--s6);font-family:var(--disp);font-weight:400;
  font-size:clamp(30px,1.5rem + 2.4vw,58px);line-height:1.06;letter-spacing:-.026em;
  max-width:24ch;color:#fff}
.abcp{margin:0 auto;font-size:var(--fs-md);line-height:1.62;
  color:rgba(255,255,255,.78);max-width:58ch}
/* the look lives in .flowbtn; the deep band takes the light polarity.
   Scoped to .abclose so it outranks .flowbtn's own defaults — a bare
   .abcta ties on specificity and loses on order. */
.abclose .abcta,.abclose .abcta2{--fb-ink:#FFF8E6;--fb-edge:rgba(255,248,230,.42);
  --fb-fill:#FFF8E6;--fb-on:var(--deep)}
/* a.uspcta outranks .flowbtn, so it must not re-declare display */
a.uspcta{text-decoration:none}

@media (max-width:1000px){
  .ablist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abflow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .abhero{--ab-globe:66px;
    padding:var(--s12) 0 calc(var(--ab-globe) + clamp(24px,6vw,44px))}
  .abglobe{width:min(520px,118vw)}
  .ablist{grid-template-columns:minmax(0,1fr)}
  .abstep{padding:var(--s5)}
}


/* ================================ SEARCH =============================== */
.searchbtn{width:34px;height:34px;border-radius:var(--r-full);background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);
  padding:0;margin-left:var(--s1);
  transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)}
.searchbtn:hover{background:var(--sunk);color:var(--ink)}
.searchbtn[aria-expanded="true"]{background:var(--ink);color:var(--app)}

.searchpanel{position:sticky;top:0;z-index:19;background:var(--app);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 30px -22px rgba(19,16,17,.5)}
.searchpanel[hidden]{display:none}
.searchpanel .wrap{padding-top:var(--s5);padding-bottom:var(--s5)}
.searchbar{display:flex;align-items:center;gap:var(--s3);border-bottom:2px solid var(--ink);
  padding-bottom:var(--s3);color:var(--ink-3)}
.searchbar svg{flex:0 0 auto;display:block}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--disp);font-weight:400;font-size:clamp(20px,1rem + 1.2vw,30px);
  line-height:1.2;color:var(--ink);padding:0}
.searchbar input::placeholder{color:var(--ink-4)}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchx{flex:0 0 auto;background:transparent;border:0;font-size:24px;line-height:1;
  color:var(--ink-3);cursor:pointer;padding:0 var(--s2)}
.searchx:hover{color:var(--ink)}

.searchres{margin-top:var(--s2);max-height:min(52vh,460px);overflow-y:auto}
.searchhit{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer;font-family:inherit;
  transition:background var(--d-2) var(--e-out)}
.searchhit:hover,.searchhit.on{background:color-mix(in srgb,var(--sunk) 60%,transparent)}
.shk{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px}
.shh{display:block;font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.25;
  letter-spacing:var(--tr-snug);color:var(--ink)}
.shm{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:5px}
.searchnone{margin:var(--s5) 0;font-size:var(--fs-sm);color:var(--ink-2)}

/* the masthead hides the compact bar at rest; searching needs it back */
body.searching .hd{opacity:1!important;pointer-events:auto!important}

@media (max-width:720px){
  .searchpanel .wrap{padding-top:var(--s4);padding-bottom:var(--s4)}
  .searchbar input{font-size:19px}
  .shh{font-size:17px}
}


/* source cards are a reading aid, not a control — the only thing they used
   to open was the contribution sheet */
.clcard{cursor:default}
.clcard:hover,.clcard.lit{box-shadow:none!important;transform:none!important}
.clcard.lit .cqt,.cl.lit{color:var(--accent-ink)}
/* Provenance is independent of the citation marker: mixed document/commentary
   sentences keep their numbers; only the underline and tint use blue. */
.art:not(.plain) .cl.contribution{
  color:inherit;text-decoration-color:var(--t3-ln);
}
.art:not(.plain) .cl.contribution:hover,
.art:not(.plain) .cl.contribution.lit{
  color:inherit;background:var(--t3-bg);text-decoration-color:var(--t3);
}
@keyframes contributionHit{
  0%,100%{box-shadow:none;background:transparent}
  14%,52%{box-shadow:0 0 0 3px var(--t3-bg);background:var(--t3-bg)}
}
.art:not(.plain) .cl.contribution.hit{animation-name:contributionHit}
.art.plain .cl.contribution{color:inherit;box-shadow:none;animation:none}
/* flat card, so the highlight is the whole surface: the full edge in the accent
   and the faintest accent wash, not a tinted band */
.clcard.lit{border-color:var(--accent)!important;background:var(--accent-soft)}
/* a contributed or corrected source is told apart by its wording and weight —
   the card carries no second hue now that it is one surface */
.clcard .csr.contrib,.clcard .csr.corr{color:var(--ink-3);font-weight:700}


/* ============ SECTION BAR + SEARCH, ANCHORED TO THE HEADER ============= */
/* One source of truth for the compact bar's height — the section bar and the
   search panel both hang off it. */
:root{--hd-h:62px}
@media (max-width:720px){:root{--hd-h:56px}}

/* NYT pattern: once the masthead has scrolled away, the sections stay with
   the compact bar instead of leaving it stranded on its own. */
.catrow{position:sticky;top:var(--hd-h);z-index:19;
  transition:transform var(--d-4) var(--e-glide)}
.catrow.stuck{box-shadow:none;border-bottom-color:var(--line)}

/* the panel hangs under the bar rather than joining the scroll flow, where it
   used to stick and leave its rule floating mid-page */
/* Stacking order matters here: the panel is a dropdown, so it must cover the
   section bar (19) while staying under the header (22) it hangs from. At 18 the
   section bar painted straight through the results. */
.searchpanel{position:fixed;left:0;right:0;top:var(--hd-h);bottom:auto;z-index:21;
  box-shadow:0 18px 34px -24px rgba(19,16,17,.55)}
/* a long result list must never run past the viewport */
.searchpanel .searchres{max-height:calc(100vh - var(--hd-h) - 190px)}


/* ---- the Index's own claims, four across -------------------------------- */
.pixs{max-width:76ch;margin:0 0 var(--s14);font-size:var(--fs-md);line-height:1.6}
.pixs p{margin:0 0 var(--s4)}
.pixs p:last-child{margin-bottom:0}
.pixusp{list-style:none;margin:0 0 var(--s14);padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8)}
.pixusp li{padding:0;min-width:0}
.pui{display:flex;width:26px;height:26px;color:var(--deep);margin-bottom:var(--s3)}
.pui svg{width:100%;height:100%;display:block}
.put{display:block;font-family:var(--disp);font-weight:400;font-size:18.5px;line-height:1.25;
  letter-spacing:var(--tr-snug);color:var(--ink);margin-bottom:var(--s2)}
.pud{display:block;font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3)}

@media (max-width:1080px){
  .pixusp{grid-template-columns:repeat(2,1fr);gap:var(--s7)}
}
@media (max-width:720px){
  .pixusp{grid-template-columns:1fr;gap:var(--s6)}
  .pixs{font-size:15px;margin-bottom:var(--s10)}
}


/* ---- Index layout: the CTA sits beside the heading on desktop and after
        the rankings on a phone, without being rendered twice --------------- */
/* The CTA sits under the description on its own row rather than riding
   alongside the heading, and the description runs in two columns. */
.pindex .wrap{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "desc" "cta" "usp" "grid";align-items:start}
.pindex .pixh{grid-area:head;margin-bottom:var(--s16)}
.pindex .pixcta{grid-area:cta;justify-self:start;margin:var(--s8) 0 var(--s16)}
/* Two unequal measures, set against the USP grid below: 584 + 32 = 616 is
   exactly two USP columns, so the second paragraph starts on the third USP
   column. The widths are what the copy needs — 584 keeps the opening
   paragraph at three lines, 495 breaks the second after "evidence, and".
   Equal tracks cannot do both. .pixs also carries a 56px bottom margin from
   the article-page rules, which stacked with the button's own top margin. */
.pindex .pixs{grid-area:desc;max-width:none;margin-bottom:0;
  display:grid;grid-template-columns:minmax(0,584px) minmax(0,495px);
  column-gap:var(--s8)}
.pindex .pixs p{margin:0}
@media (max-width:860px){
  .pindex .pixs{grid-template-columns:1fr;row-gap:var(--s4)}
}
.pindex .pixusp{grid-area:usp}
.pindex .pixgrid{grid-area:grid}
@media (max-width:720px){
  /* the button reads as the end of the description, not a footnote to the
     leaderboards, so it keeps the desktop position */
  .pindex .wrap{grid-template-columns:1fr;
    grid-template-areas:"head" "desc" "cta" "usp" "grid";row-gap:0}
  .pindex .pixcta{justify-self:start;margin:var(--s6) 0 var(--s10)}
  .pindex .pixh{margin-bottom:var(--s4)}
}


/* ---- the closing statement's methodology link -------------------------- */
/* the look lives in .flowbtn; this only places it */
.synthcta{margin-top:var(--s6)}

/* On the gold band the polarity flips: dark outline at rest, flooding to
   dark ink with the band's own cream as the label. */
.pindex .pixcta{--fb-ink:var(--ink);--fb-edge:rgba(19,16,17,.4);
  --fb-fill:var(--ink);--fb-on:#FFF8E6}

/* ---- the Index band is always gold, whatever the theme ------------------
   Rebinding the tokens here keeps every descendant rule intact rather than
   overriding each colour one at a time. */
.pindex{--ink:#FFFFFF;--ink-2:rgba(255,255,255,.86);--ink-3:rgba(255,255,255,.72);
  --ink-4:rgba(255,255,255,.58);--card:rgba(255,255,255,.07);--raised:rgba(255,255,255,.07);
  --app:#6B0F2C;--line:rgba(255,255,255,.22);--line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.10);--accent-ink:#FFC9D8;--deep:#FFFFFF}


/* ============================ ABOUT: consolidated ========================
   The page carries both halves of the product, so it needs an act divider,
   a team block and a two-button close.                                     */

/* ---- room two: the standing bento -------------------------------------- */
/* Six tracks, and the cells take different widths so no two read the same
   way. Only the two prose cells are panelled: the rest already carry their
   own cards, and panelling those as well would box a box.                  */
.abroom2{padding:clamp(72px,9vw,140px) 0 clamp(64px,8vw,120px)}
.abbento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,76px);align-items:stretch}
.abcell{display:flex;flex-direction:column;min-width:0;grid-column:span 6}
.abtint{background:var(--card);border:1px solid var(--line-3);
  border-radius:var(--ab-r);padding:clamp(24px,3vw,46px)}
.abbelief{grid-column:span 2;justify-content:center}
.abindex{grid-column:span 4}
.abwho{grid-column:span 6;margin-top:clamp(16px,2vw,28px)}
.abroom2 .abh{font-size:clamp(23px,1rem + 1.05vw,33px);max-width:22ch}
.abbelief .abh{font-size:clamp(25px,1.05rem + 1.5vw,40px);max-width:16ch}
.abroom2 .abp{max-width:62ch}
.abbelief .abp{font-size:var(--fs-sm)}
.abcell .abflow,.abcell .ablist,.abcell .abteam{
  margin-top:clamp(24px,3vw,42px)}
/* the principles keep their pre-bento shape: a full-width centred chapter
   with the six equal compact cards on the .ablist base grid (3x2, then 2x3,
   then a single column — the base responsive rules above still apply) */
.abprin{grid-column:span 6;text-align:center;padding:clamp(24px,3.5vw,56px) 0}
.abprin .abh{font-size:clamp(28px,1.4rem + 2.1vw,54px);max-width:24ch;margin-inline:auto}
.abprin .ablist{margin-top:clamp(40px,5vw,68px)}
.abindex .abixcta{align-self:flex-start}
@media (max-width:1000px){
  .abbelief,.abindex{grid-column:span 6}
  .abbelief .abh{max-width:22ch}
}
@media (max-width:720px){
  .abtint{padding:var(--s5)}
}

/* ---- the Index call to action, inside chapter 05 ---------------------- */
.abixcta{display:inline-block;margin-top:var(--s7);background:var(--ink);color:var(--app);
  border:0;border-radius:var(--r-full);padding:var(--s4) var(--s7);font-family:inherit;
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:transform var(--d-1) var(--e-out),opacity var(--d-2) var(--e-out)}
.abixcta:hover{opacity:.88}
.abixcta:active{transform:scale(.97)}

/* ---- team: portrait-led cards ----------------------------------------- */
.abteam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.abmem{overflow:hidden;text-align:left;border:1px solid var(--line-3);
  border-radius:var(--ab-r);background:var(--card);
  transition:border-color var(--d-2) var(--e-out)}
.abmem:hover{border-color:var(--line-2)}
/* the photo bleeds to the card edges, so it drops .im's own corner and lift */
/* the deep green plate is a property, not a hard background, so .imtr (or the
   client's inline equivalent) neutralises it for a cut-out portrait */
.abshot{aspect-ratio:5/4;border-radius:0;box-shadow:none;--im-plate:#14312B;
  border-bottom:1px solid var(--line-3)}
.abshot::after{display:none}
.abshot{--im-pos:56% 24%}
.abmemh{padding:var(--s6) var(--s6) var(--s5);border-bottom:1px solid var(--line-3)}
/* the initials are the fallback; a loaded portrait replaces them */
.abmem:has(.abshot) .abmono{display:none}
.abmono{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--s4);
  border-radius:var(--r-full);background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent-ink);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em}
.abmemn{display:block;font-family:var(--disp);font-size:var(--fs-xl);font-weight:400;
  color:var(--ink);line-height:1.18;letter-spacing:var(--tr-snug)}
/* --ink-3, not --ink-4: the role is real information, and the faintest ink
   does not lift in dark mode the way the chapter eyebrows do */
.abrole{display:block;margin-top:5px;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.abbul{list-style:none;margin:0;padding:var(--s5) var(--s6) var(--s6);display:grid;gap:var(--s3)}
.abbul li{position:relative;padding-left:var(--s5);font-size:var(--fs-sm);
  line-height:1.55;color:var(--ink-3)}
.abbul li::before{content:"";position:absolute;left:0;top:.66em;width:4px;height:4px;
  border-radius:var(--r-full);background:var(--ink-4)}

/* ---- the close now offers both halves --------------------------------- */
.abctas{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:center;
  margin-top:var(--s10)}

@media (max-width:860px){
  .abteam{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}
@media (max-width:560px){
  .abctas{flex-direction:column}
  .abctas > *{width:100%;text-align:center}
}


/* ============================== FLOW BUTTON ==============================
   Outline at rest, flooded at hover. Three moving parts, each on its own
   curve: the arrow overshoots in from the left, the label slides right to
   make room, and a white disc scales out from the centre to fill the pill.
   No arrow is drawn at rest — it lives outside the clip until hover. */
.flowbtn{--fb-ink:#fff;                    /* label + arrow at rest        */
  --fb-edge:rgba(255,255,255,.55);          /* the outline                  */
  --fb-fill:#fff;                           /* the disc that floods in      */
  --fb-on:var(--deep);                      /* label + arrow once flooded   */
  position:relative;display:inline-flex;align-items:center;
  overflow:hidden;isolation:isolate;
  border:1.5px solid var(--fb-edge);border-radius:var(--r-full);
  background:transparent;color:var(--fb-ink);
  padding:12px 30px;font-family:inherit;font-size:var(--fs-sm);font-weight:700;
  line-height:1.2;text-decoration:none;cursor:pointer;
  /* These four timings are the reference component's own, kept literal rather
     than mapped onto our motion scale — the scale tops out at 620ms and the
     interaction depends on the shell settling before the parts do. */
  transition:color 600ms cubic-bezier(.23,1,.32,1),
             border-color 600ms cubic-bezier(.23,1,.32,1),
             border-radius 600ms cubic-bezier(.23,1,.32,1),
             transform var(--d-1) var(--e-out)}
.flowbtn:hover{color:var(--fb-on);border-color:transparent;border-radius:12px}
.flowbtn:active{transform:scale(.95)}

/* the arrow waits outside the clip; the spring curve gives it the overshoot */
.fb-arr{position:absolute;left:-25%;width:16px;height:16px;z-index:2;
  pointer-events:none;
  transition:left 800ms cubic-bezier(.34,1.56,.64,1)}
.flowbtn:hover .fb-arr{left:14px}

/* the label carries the colour change through currentColor */
.fb-t{position:relative;z-index:2;pointer-events:none;
  transition:transform 800ms ease-out}
.flowbtn:hover .fb-t{transform:translateX(12px)}

/* The disc must reach the far corner, not just the edges. Our widest button
   is 207px x 43px — a 211px diagonal — so the reference's 220px left only 4px
   of margin. 280px keeps the same overshoot ratio the reference had. */
.fb-c{position:absolute;top:50%;left:50%;width:16px;height:16px;z-index:1;
  margin:-8px 0 0 -8px;border-radius:var(--r-full);background:var(--fb-fill);opacity:0;
  pointer-events:none;
  transition:width 800ms cubic-bezier(.19,1,.22,1),height 800ms cubic-bezier(.19,1,.22,1),
             margin 800ms cubic-bezier(.19,1,.22,1),opacity 800ms cubic-bezier(.19,1,.22,1)}
.flowbtn:hover .fb-c{width:280px;height:280px;margin:-140px 0 0 -140px;opacity:1}

/* A touch screen cannot hover, so the button simply stays in its resting
   state there: outlined, unfilled, no arrow. Filling it by default made the
   button look like a different component on a phone. */

/* ---------------------- headline highlight on hover --------------------
   Keep this last in the stylesheet. box-decoration-break:clone gives each
   wrapped line its own background, so the tint hugs the text rather than
   filling the block; wrapTitles() supplies the inline span it needs. */
:root{--hl:rgba(174,36,72,.15)}
:root[data-theme="dark"]{--hl:rgba(233,88,124,.20)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--hl:rgba(233,88,124,.20)}
}
.hl{display:inline;
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;background-size:0% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.04em .1em;margin:0 -.1em;
  transition:background-size var(--d-4) var(--e-out)}
/* on the crimson band the tint has to be light, not darker still */
.usp .hl,.abhero .hl{--hl:rgba(255,255,255,.18)}

.lead2:hover .hl,.sart:hover .hl,.mini:hover .hl,.card:hover .hl,
.nbfeat:hover .hl,.nbcard:hover .hl,.blead:hover .hl,.bside:hover .hl,
.lcitem:hover .hl,.csitem:hover .hl,.cslead:hover .hl,.rail:hover .hl,
.tcrow:hover .hl,.ccrow:hover .hl,.latest .big:hover .hl,.edchoice:hover .hl,
a:hover > .hl,button:hover > .hl{background-size:100% 100%}

@media (prefers-reduced-motion:reduce){.hl{transition:none}}


/* the Index band now sits on crimson, so its button matches the hero's */
.pindex .pixcta{--fb-ink:#fff;--fb-edge:rgba(255,255,255,.55);
  --fb-fill:#fff;--fb-on:#6B0F2C}


/* the Index leaderboard on the crimson ground */
.pindex .pixgrid{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.16)}
.pindex .pixbox:first-child{border-right-color:rgba(255,255,255,.16)}
.pindex .pixrow{border-top-color:rgba(255,255,255,.14)}
.pindex .pixbh{border-bottom-color:rgba(255,255,255,.22)}
.pindex .pui{color:#FFC9D8}


/* ============================================================
   INTRO IDENTITY ANIMATION
   The mark turns once, condenses into the centre, and releases the
   wordmark outward from the "m". Plays on load, on a logo click, and
   therefore also on the hop back from the password gate.

   The overlay is painted by this stylesheet on the first frame — it is
   opaque from the start so the site never shows through underneath. The
   .introdone class is what tears it down; js/intro.js adds it.
   ============================================================ */
/* pointer-events:none throughout: a reader who reaches for a headline
   mid-animation must land on the headline, not on a curtain. The skip
   listener is on the document instead, so the gesture still cuts it short. */
.introov{position:fixed;inset:0;z-index:9000;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 32%,
    #FFF8E6 0%, var(--page) 46%, var(--sunk) 100%);
  opacity:1;transition:opacity .42s cubic-bezier(.4,0,.2,1)}
.introov.introdone{opacity:0;pointer-events:none}
/* removed from the layout entirely once faded, so it can never trap a click */
.introov.introgone{display:none}
/* Two behaviours only: the full sequence on a genuine first visit, and a
   short mark-only replay after a logo click. js/intro-init.js writes the
   verdict to <html data-intro> before first paint, so a returning reader
   never sees a frame of the loader background. The overlay stays in the
   document rather than being removed, so a later logo click can replay it. */
:root[data-intro="none"] .introov{display:none}
.introholder{position:relative}
.introicon,.introword{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);display:block;overflow:visible}
.introword{fill:var(--ink);visibility:hidden}
.introletter{opacity:0;will-change:transform,opacity}
#introIconG,#introShA,#introShB,#introWordG{will-change:transform}

/* The animation is decoration. Anyone who has asked for less motion gets
   the site immediately rather than a shorter version of the same wait. */
@media (prefers-reduced-motion:reduce){
  .introov{display:none}
}


/* ============================================================
   INDEX BAND — the four animated value icons
   Filled, rounded parts in three cream tints plus a rose accent. Every
   icon runs on one shared 8s cycle and does its work in the first ~18%,
   so the band is still most of the time; the stagger below fires one
   icon roughly every 2s rather than all four at once.
   ============================================================ */
.pindex .pixusp li{--pi:#F7F4ED;--pi-70:rgba(247,244,237,.68);
  --pi-45:rgba(247,244,237,.42);--pi-25:rgba(247,244,237,.22);
  --pi-rose:#E89DB2;--cycle:8s}
.pindex .pui{width:52px;height:52px;margin-bottom:26px;color:inherit}
.pindex .pui svg{width:100%;height:100%;display:block;overflow:visible}

.pindex .sc-beam,.pindex .sc-pan-l,.pindex .sc-pan-r,.pindex .sc-cap,
.pindex .dc-page,.pindex .dc-head,.pindex .dc-mid,.pindex .dc-low,.pindex .dc-seal,
.pindex .tr-glass,.pindex .tr-dot,
.pindex .b1,.pindex .b2,.pindex .b3,.pindex .b-pip{
  transform-box:fill-box;transform-origin:center;
  animation-duration:var(--cycle);animation-delay:var(--d,0s);
  animation-iteration-count:infinite;animation-timing-function:ease-in-out}

.pindex .i-scales{--d:.4s}
.pindex .i-doc{--d:2.4s}
.pindex .i-trace{--d:4.4s}
.pindex .i-score{--d:6.4s}

/* 1 · scales — the beam tips and settles, the pans stay level under it */
.pindex .sc-beam{transform-origin:50% 100%;animation-name:sc-beam}
.pindex .sc-pan-l{animation-name:sc-pan-l;transform-origin:50% 0%}
.pindex .sc-pan-r{animation-name:sc-pan-r;transform-origin:50% 0%}
.pindex .sc-cap{animation-name:pip-pulse}
@keyframes sc-beam{0%,2%{transform:rotate(0)}6%{transform:rotate(-10deg)}
  10.5%{transform:rotate(7deg)}14%{transform:rotate(-3deg)}17%,100%{transform:rotate(0)}}
@keyframes sc-pan-l{0%,2%{transform:rotate(0)}6%{transform:rotate(10deg)}
  10.5%{transform:rotate(-7deg)}14%{transform:rotate(3deg)}17%,100%{transform:rotate(0)}}
@keyframes sc-pan-r{0%,2%{transform:rotate(0)}6%{transform:rotate(10deg)}
  10.5%{transform:rotate(-7deg)}14%{transform:rotate(3deg)}17%,100%{transform:rotate(0)}}

/* 2 · document — the rubric lifts apart and restacks */
.pindex .dc-head{animation-name:dc-head}
.pindex .dc-mid{animation-name:dc-mid}
.pindex .dc-low{animation-name:dc-low}
.pindex .dc-page{animation-name:dc-page}
.pindex .dc-seal{animation-name:pip-pulse}
@keyframes dc-page{0%,3%{transform:scaleY(1)}7%{transform:scaleY(1.05)}
  12%{transform:scaleY(.98)}16%,100%{transform:scaleY(1)}}
@keyframes dc-head{0%,3%{transform:translateY(0)}7%{transform:translateY(-5.5px) scaleX(1.06)}
  12%{transform:translateY(1.5px)}16%,100%{transform:translateY(0)}}
@keyframes dc-mid{0%,4%{transform:translateY(0)}8%{transform:translateY(-2px)}
  13%{transform:translateY(1px)}17%,100%{transform:translateY(0)}}
@keyframes dc-low{0%,5%{transform:translateY(0)}9%{transform:translateY(3.5px)}
  14%{transform:translateY(-1px)}18%,100%{transform:translateY(0)}}

/* 3 · trace — the glass sweeps and the claim is found */
.pindex .tr-glass{animation-name:tr-glass}
.pindex .tr-dot{animation-name:tr-dot}
@keyframes tr-glass{0%,2%{transform:translate(0,0) rotate(0)}
  6%{transform:translate(-4.5px,3px) rotate(-7deg)}
  11%{transform:translate(4px,-2px) rotate(5deg)}
  15%{transform:translate(-1px,.5px) rotate(-1.5deg)}
  18%,100%{transform:translate(0,0) rotate(0)}}
@keyframes tr-dot{0%,8%{transform:scale(0);opacity:0}12%{transform:scale(1.45);opacity:1}
  15%{transform:scale(.9);opacity:1}18%{transform:scale(1);opacity:1}
  82%{transform:scale(1);opacity:1}90%,100%{transform:scale(0);opacity:0}}

/* 4 · score — bars only ever rise, and the proof pops above the tallest */
.pindex .bar{transform-origin:50% 100%}
.pindex .b1{animation-name:b1}
.pindex .b2{animation-name:b2}
.pindex .b3{animation-name:b3}
.pindex .b-pip{animation-name:b-pip}
@keyframes b1{0%,2%{transform:scaleY(.55)}6%{transform:scaleY(1.12)}10%{transform:scaleY(1)}
  88%{transform:scaleY(1)}96%,100%{transform:scaleY(.55)}}
@keyframes b2{0%,4%{transform:scaleY(.45)}8%{transform:scaleY(1.12)}12%{transform:scaleY(1)}
  88%{transform:scaleY(1)}96%,100%{transform:scaleY(.45)}}
@keyframes b3{0%,6%{transform:scaleY(.38)}10.5%{transform:scaleY(1.1)}14%{transform:scaleY(1)}
  88%{transform:scaleY(1)}96%,100%{transform:scaleY(.38)}}
@keyframes b-pip{0%,10%{transform:scale(0) translateY(6px);opacity:0}
  14%{transform:scale(1.4) translateY(-2px);opacity:1}
  17%{transform:scale(1) translateY(0);opacity:1}
  86%{transform:scale(1) translateY(0);opacity:1}
  94%,100%{transform:scale(0) translateY(6px);opacity:0}}

/* the rose accent breathes once as its icon fires */
@keyframes pip-pulse{0%,4%{transform:scale(1)}9%{transform:scale(1.35)}
  13%{transform:scale(.92)}16%,100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .pindex .pui svg *{animation:none !important}
  .pindex .tr-dot,.pindex .b-pip{opacity:1 !important}
}


/* ======================================================== EXPERT INSIGHTS ===
   #/insights — the editorial home for expert-strengthened stories. Built
   from the system's existing grammar rather than new invention: the About
   page's crimson band, the rail row, the home card grid, .secthead, and
   the fxk pill. Every size, space and colour comes from the token scale.
   ============================================================================*/

/* ---- hero: the same flat crimson band the About page opens with ------- */
.inshero{background:#AE2448;color:#fff;padding:var(--s16) 0 var(--s14);
  position:relative;overflow:hidden}
.inshh{margin:0 0 var(--s5);font-family:var(--disp);font-weight:400;
  font-size:clamp(32px,1.6rem + 2.4vw,56px);line-height:1.08;
  letter-spacing:var(--tr-tight);max-width:17ch}
.inslede{margin:0;font-size:var(--fs-md);line-height:1.6;
  color:rgba(255,255,255,.8);max-width:52ch}

/* ---- editorial modules: two rail columns, each under its own rule ----- */
.insmods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s10) var(--s8);
  padding:var(--s12) 0 var(--s10)}
.insmod{min-width:0}
.insmodh{padding-bottom:var(--s4);border-bottom:1px solid var(--line);
  margin-bottom:var(--s2)}
.insmodh .t{display:block;font-family:var(--disp);font-weight:300;
  font-size:var(--fs-xl);letter-spacing:var(--tr-head);color:var(--ink)}
.insmodh .q{display:block;margin-top:var(--s1);font-size:var(--fs-2xs);color:var(--ink-3)}
@media (max-width:1080px){.insmods{grid-template-columns:1fr;gap:var(--s8);
  padding:var(--s10) 0 var(--s8)}}

/* ---- feed: home-card grammar plus one evolution line ------------------ */
.insfeed{border-top:1px solid var(--line-2);padding-top:var(--s10)}
/* category tabs — the section-bar's flat, quiet grammar brought inline,
   with one accent rule under the active tab */
.instabs{display:flex;gap:var(--s5);margin:var(--s5) 0 var(--s8);
  border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.instabs::-webkit-scrollbar{display:none}
.instab{position:relative;flex:0 0 auto;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-3);
  padding:0 0 var(--s3);white-space:nowrap;transition:color var(--d-2) var(--e-out)}
.instab:hover{color:var(--ink)}
.instab.on{color:var(--ink);font-weight:700}
.instab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-3) var(--e-glide)}
.instab.on::after{transform:scaleX(1)}
@media (max-width:720px){.instabs{gap:var(--s4);margin:var(--s4) 0 var(--s6)}}
@media (prefers-reduced-motion:reduce){.instab::after{transition:none}}
.inssub{margin-top:var(--s3);font-size:var(--fs-2xs);color:var(--ink-3)}

/* the rail thumbnail now holds the real-article image frame (mark under
   image), so the frame fills the fixed thumb box */
.rail .rth .im{position:absolute;inset:0;width:100%;height:100%;
  border-radius:inherit;box-shadow:none}

/* nothing eligible yet — the page says so rather than showing an empty grid */
.insempty{margin:var(--s12) 0 var(--s16);font-size:var(--fs-md);
  color:var(--ink-3);max-width:46ch}

/* ============================================================
   ARTICLE ENTRY
   Opening a story replays the headline hover at page scale: a
   left-to-right reveal, one block just behind the last, so the piece
   assembles from its parts rather than appearing all at once.
   The stagger is set per element in articleEnter(); this is the motion.
   ============================================================ */
/* There is deliberately no .artin class: articleEnter() attaches this
   animation as an inline style, so the transient state never lands in the
   article markup contract. Reduced motion is honoured in that function,
   which returns before applying anything. */
/* A published article exists before its client module does. article-enter.js
   sets this verdict in the head, before CSS or content can paint, and removes
   it in the same task that attaches the element-level animations. It prevents
   a settled article flashing up before the reveal starts. */
html[data-article-enter="pending"] .artgrid{visibility:hidden}
@keyframes artin{
  from{clip-path:inset(0 100% 0 0);transform:translateX(-6px);opacity:0}
  60% {opacity:1}
  to  {clip-path:inset(0 0 0 0);transform:translateX(0);opacity:1}
}

/* ── Real-article placeholder (homepage slot filling) ── */
/* the single fixed no-image treatment for real articles: masthead mark on a
   flat panel, the same asset every time */
.im.imph{--im-plate:var(--sunk)}
.im.imph::before{content:none;animation:none}
.im.imph>svg:not(.imratio){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:18%;max-width:64px;height:auto;opacity:.28;z-index:0}
.im.imph>svg path{fill:var(--ink-3)}

/* ── Server-rendered pages: classes replacing inline style attributes ──────
   The CSP (style-src-attr) forbids style="" attributes, so every style the
   server templates need lives here instead. Computed styles are identical
   to the attributes they replaced. */
/* badge kind colours (mirror OUTLETS colours in data.js) */
.srcbadge.sbk-press{background:#1A1A1A}
.srcbadge.sbk-prim{background:#2E4A6B}
.srcbadge.sbk-pub{background:#6B6567}
.srcbadge.sbk-ann{background:#1B458F}
.srcbadge.sbk-reg{background:#41503F}
.srcbadge.sbk-jour{background:#A32638}
.srcbadge.sbk-trade{background:#B0761F}
.srcbadge.sbk-third{background:#6B4E7A}
/* badge size variant (sizes <26px use the smaller font, as the old inline
   rule did) — declared last so it beats contextual overrides like
   .amlink .srcbadge, exactly as the inline attribute used to */
.srcbadge.sb24{width:24px;height:24px;font-size:9.5px}
/* article header actions cluster */
.hdactions{display:flex;align-items:center;gap:4px}
/* article hero */
.hero.herotop{margin-top:24px}
/* 404 / 500 pages */
.errpage{padding-top:80px;padding-bottom:120px}
.errkick{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin:0 0 16px}
.errttl{font-family:var(--disp);font-size:clamp(28px,5vw,44px);font-weight:300;margin:0 0 16px;line-height:1.2}
.errsub{color:var(--ink-2);margin:0 0 32px}
.errbtn{display:inline-block;background:var(--ink);color:var(--app);padding:10px 20px;border-radius:999px;font-weight:600;font-size:14px}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .hd,.menubtn span{transition:none}
}