/* Grand Blade Media: site.css
   Printed, calm, expensive. Ink on warm bone, one vermilion line.
   Tokens and component classes follow the project's design contract and component catalog.
   Sections: 1 fonts, 2 tokens, 3 reset, 4 type, 5 layout, 6 actions, 7 chrome,
   8 hero, 9 numbers, 10 cards, 11 content blocks, 12 table and chart, 13 video,
   14 article, 15 utilities and reveal, 16 forced colors, 17 print, 18 reduced motion. */

/* ---------- 1. Fonts ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-roman.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/hanken-grotesk.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric-matched fallbacks (measured in Chrome against the real files), so the swap does not move text. */
@font-face{font-family:"Newsreader Fallback";font-style:normal;font-weight:400;src:local("Georgia"),local("Gelasio");size-adjust:102.2%;ascent-override:71.9%;descent-override:25.9%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-style:italic;font-weight:400;src:local("Georgia Italic"),local("Georgia-Italic"),local("Gelasio Italic");size-adjust:93.8%;ascent-override:78.4%;descent-override:28.3%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";font-style:normal;font-weight:400 600;src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:100.5%;ascent-override:99.5%;descent-override:30.1%;line-gap-override:0%}

/* ---------- 2. Tokens ---------- */
:root{
  --bone:#F3F0E8; --paper:#FAF8F3; --ink:#0C0D0F; --graphite:#55585D;
  --rule:#D8D3C7; --rule-ink:#2A2C30; --bone-dim:#B9B5AB; --edge:#E2411B;
  --ink-2:#17181B; /* graphite-ink panel on the dark band */

  /* semantic, redefined by .section--ink and .section--paper */
  --ground:var(--bone); --fg:var(--ink); --fg-2:var(--graphite); --line:var(--rule);
  --card-bg:var(--paper); --card-line:var(--rule);

  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Hanken Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  /* The rem floors are capped in vw, so a larger default text size cannot push a heading or the gutter past the viewport.
     At 390 and 320 wide with the default 16px text the floors are unchanged. */
  --fs-display:clamp(min(3rem,13vw),8.2vw,7.5rem);
  --fs-h1:clamp(min(2.5rem,12.5vw),6.4vw,5.5rem);
  --fs-h2:clamp(min(2rem,10vw),4.4vw,4rem);
  --fs-h3:clamp(1.375rem,2.2vw,1.75rem);
  --fs-lede:clamp(1.125rem,1.6vw,1.4rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-fine:.75rem;
  --fs-eyebrow:.75rem;
  --fs-stat:clamp(min(2.75rem,13vw),5.4vw,4.75rem);

  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:6rem; --s-7:9rem;
  --section-y:clamp(5rem,11vw,10rem);
  --gutter:clamp(min(1.25rem,5vw),4vw,3rem);
  --wrap:1330px;
  --read:42rem;
  --header-h:4rem;
  --chamfer:28px;
  --card-pad:clamp(1.5rem,2.6vw,2.25rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.25s;

  /* arrows are masks so they take currentColor (the Hanken subset has no U+2192) */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='gray' stroke-width='1.5'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5'/%3E%3C/svg%3E");
  --arrow-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='gray' stroke-width='1.5'%3E%3Cpath d='M2 10 10 2M4 2h6v6'/%3E%3C/svg%3E");
}
@media (min-width:64em){:root{--header-h:4.5rem}}

.section--ink{
  --ground:var(--ink); --fg:var(--bone); --fg-2:var(--bone-dim); --line:var(--rule-ink);
  --card-bg:var(--ink-2); --card-line:var(--rule-ink);
}
.section--paper{--ground:var(--paper); --card-bg:var(--bone)}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
html.nav-open{overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bone);color:var(--ink);
  font:400 var(--fs-body)/1.6 var(--sans);letter-spacing:0;font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
main{flex:1 0 auto;display:block}
img,svg,video,iframe,canvas{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote,pre,hr{margin:0}
ul[class],ol[class],nav ul,nav ol{padding:0;list-style:none}
:where(ul:not([class]),ol:not([class])){padding-left:1.25em}
table{border-collapse:collapse;border-spacing:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:inherit}
em,i{font-style:normal;font-weight:500}
strong,b{font-weight:600}
small{font-size:inherit}
hr{border:0;height:1px;background:var(--line)}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--bone)}
.section--ink ::selection{background:var(--bone);color:var(--ink)}
.btn::selection{background:var(--edge);color:var(--ink)} /* the ink pill, and the bone pill on the dark band, would swallow either highlight */
:focus{outline:none}
:focus-visible{outline:3px solid var(--edge);outline-offset:3px}

/* ---------- 4. Type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance;font-kerning:normal}
:is(h1,h2,h3,.display,.h1,.h2,.h3){overflow-wrap:break-word}
h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.005em}
h4{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.3}
.display{font:400 var(--fs-display)/.95 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.h1{font:400 var(--fs-h1)/.98 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.h2{font:400 var(--fs-h2)/1.02 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.h3{font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.005em;text-wrap:balance}
:is(h1,h2,h3,h4,.display,.h1,.h2,.h3,.outcome,.site-footer__line) em{font-family:var(--serif);font-style:italic;font-weight:400}
.eyebrow{font:500 var(--fs-eyebrow)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
.eyebrow a{display:inline-block;padding:.9rem 0;margin:-.9rem 0;color:inherit;text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:.35em}
.eyebrow a:hover{color:var(--fg);text-decoration-thickness:2px}
:is(.hero,.section__head) .eyebrow::before{content:"";display:inline-block;width:1.75rem;height:1px;background:currentColor;vertical-align:.3em;margin-right:.85rem}
.lede{font:400 var(--fs-lede)/1.5 var(--sans);color:var(--fg-2);max-width:40rem;text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.5}
.fine{font-size:var(--fs-fine);line-height:1.55;color:var(--fg-2)}
.num{font-family:var(--serif);font-weight:400;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum";letter-spacing:-.02em}
.num--text{font-size:var(--fs-h3)!important;line-height:1.15!important;letter-spacing:-.005em}
.edge{color:var(--edge)} /* one numeral or word per section, display size only */
.tagline{font:400 var(--fs-lede)/1.4 var(--sans);color:var(--fg-2);margin-top:.75rem;text-wrap:pretty}
p{text-wrap:pretty}

/* ---------- 5. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--read{max-width:calc(var(--read) + 2 * var(--gutter))} /* 42rem is about 68ch of body text; rem keeps head and prose edges aligned */
.section{position:relative;padding-block:var(--section-y);background:var(--ground);color:var(--fg)}
.section--paper{background:var(--paper);border-block:1px solid var(--rule)}
.section--ink{background:var(--ink);color:var(--bone)}
.section:not(.section--paper):not(.section--ink)+.section:not(.section--paper):not(.section--ink){padding-top:calc(var(--section-y) * .5)}
.section__head{max-width:60rem;margin-bottom:var(--s-5)}
.section__head .eyebrow{margin-bottom:var(--s-3)}
.section__head .lede{margin-top:var(--s-3)}
.section__head :is(.h2,h2){max-width:16em}
.rule{display:block;width:100%;height:1px;border:0;background:var(--line);transform-origin:0 50%}
.rule--edge{background:var(--edge)}
.split{display:grid;gap:var(--s-3) var(--s-4)}
.split__rail{font:500 var(--fs-eyebrow)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
@media (min-width:56em){.split{grid-template-columns:minmax(9rem,16rem) minmax(0,1fr);gap:var(--s-4) var(--s-5)}}
.cols{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:44em){.cols--2,.cols--3,.cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:72em){.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cols--6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:44em){.cols--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:72em){.cols--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.stack>*+*{margin-top:var(--stack,1.25rem)}

/* ---------- 6. Actions ---------- */
.btn{--btn-bg:var(--ink);--btn-fg:var(--bone);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:3rem;padding:.6rem 1.6rem;border:1px solid var(--btn-bg);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);
  font:500 .9375rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;text-underline-offset:.3em;text-decoration-thickness:1px;
  cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{text-decoration:underline;text-decoration-color:var(--edge)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn--ghost:hover{background:rgba(85,88,93,.09)}
.btn--edge{--btn-bg:var(--edge);--btn-fg:var(--ink)}
.btn--edge:hover{text-decoration-color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.section--ink .btn:not(.btn--ghost):not(.btn--edge){--btn-bg:var(--bone);--btn-fg:var(--ink)}
.btn[href]::after,.arrow-link::after,.link[target="_blank"]::after,.site-footer a[target="_blank"]::after{content:"";flex:none;display:inline-block;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform var(--dur) var(--ease)}
.btn[href]::after,.arrow-link::after{width:1.1em;height:.7em}
.btn--noarrow[href]::after{display:none}
.btn[href]:hover::after,.arrow-link:hover::after{transform:translateX(4px)}
.arrow-link{display:inline-block;max-width:100%;min-height:0;padding-block:.55rem;line-height:1.6;font-weight:500;color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:.35em;transition:text-decoration-thickness var(--dur) var(--ease)}
.arrow-link::after{margin-left:.6em;vertical-align:.02em} /* inline, so a wrapped label keeps the arrow beside its last word; the 44.8px height is the padding plus one line */
.arrow-link:hover{text-decoration-thickness:2px}
.link,:where(a:not([class])){color:inherit;text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-thickness var(--dur) var(--ease)}
.link:hover,:where(a:not([class])):hover{text-decoration-thickness:2px}
.link[target="_blank"]::after,.arrow-link[target="_blank"]::after{-webkit-mask-image:var(--arrow-out);mask-image:var(--arrow-out)}
.link[target="_blank"]::after{width:.62em;height:.62em;margin-left:.3em;vertical-align:.05em}
.arrow-link[target="_blank"]::after{width:.8em;height:.8em}
.copy-status{margin-left:.9rem;font-size:var(--fs-small);color:var(--fg-2)}
.nav__cta[href]::after{width:1em}

/* ---------- 7. Chrome ---------- */
.skip-link{position:absolute;z-index:300;left:var(--gutter);top:-5rem;padding:.8rem 1.25rem;border-radius:999px;background:var(--ink);color:var(--bone);font-weight:500;text-decoration:none}
.skip-link:focus{top:.75rem}
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}

.site-header{position:sticky;top:0;z-index:100;background:var(--bone)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.site-header.is-scrolled::after{opacity:1}
.site-header__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:var(--header-h)}
/* focusing a control inside the sticky bar must not scroll the page: the html scroll-padding assumes the bar is an obstacle, but these controls are the bar */
.site-header__inner :is(a,button){scroll-margin-top:calc(-1 * (var(--header-h) + 1.5rem))}
.brand{display:inline-flex;align-items:center;gap:.7rem;min-width:0;flex:0 1 auto;overflow:hidden;min-height:2.75rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand__mark{flex:none;width:min(2rem,8vw);height:.8rem;fill:var(--edge)}
.brand__name{font:400 min(1.5rem,7vw)/1 var(--serif);letter-spacing:-.02em}
.brand__sub{font:500 .6875rem/1 var(--sans);text-transform:uppercase;letter-spacing:.2em;padding-top:.35em;margin-left:-.15rem}
@media (min-width:64em){.brand__name{font-size:1.75rem}.brand__mark{width:2rem}.site-header__inner{gap:var(--s-3)}}
@media (max-width:22.5em){.brand__sub{display:none}}

.nav,.nav__cta{display:none}
.nav ul{display:flex;align-items:center;gap:.25rem}
.nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .8rem;font-weight:500;font-size:.9375rem;white-space:nowrap;color:var(--ink);text-decoration:none;text-underline-offset:.5em;text-decoration-thickness:1px}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--edge)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:2px}
.nav__cta{min-height:2.75rem;padding:.4rem 1.3rem;margin-left:.5rem;white-space:nowrap}
.nav-toggle{display:none;flex:none;min-height:2.75rem;padding:.4rem min(1.25rem,4vw);border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:500 .9375rem/1.2 var(--sans);letter-spacing:.01em}
.js .nav-toggle{display:inline-flex;align-items:center}
@media (min-width:64em){
  .nav{display:block;margin-left:auto}
  .nav__cta{display:inline-flex}
  .nav-toggle,.js .nav-toggle{display:none}
}
/* six links plus the pill fit from 64em only if the bar tightens: measured at 1024, 1100, 1280 and 1440 */
@media (min-width:64em) and (max-width:79.99em){
  .nav ul{gap:0}
  .nav a{padding-inline:.6rem}
  .nav__cta{margin-left:.25rem;padding-inline:1.1rem}
  .site-header__inner{gap:1rem}
}
.nav-panel{display:none}
@media (max-width:63.99em){
  .js .nav-panel{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;gap:var(--s-4);overflow-y:auto;overscroll-behavior:contain;
    padding:calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem;background:var(--bone);visibility:hidden;opacity:0;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .js .nav-panel.is-open{visibility:visible;opacity:1;transition-delay:0s}
}
.nav-panel__list{border-bottom:1px solid var(--rule)}
.nav-panel__list a{display:flex;align-items:center;min-height:3.5rem;padding:.6rem 0;border-top:1px solid var(--rule);font:400 clamp(min(2rem,10vw),9vw,3rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.nav-panel__list a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:2px;text-underline-offset:.2em}
.nav-panel .btn{align-self:flex-start}
.nav-panel__note{margin-top:auto;max-width:28rem}
.js .nav-panel{scroll-padding-top:calc(var(--header-h) + .5rem)} /* on a short landscape screen the panel scrolls; its links must not slide under the bar */

.site-footer{margin-top:var(--s-6);padding-block:var(--s-5) var(--s-4);background:var(--paper);border-top:1px solid var(--rule);color:var(--ink)}
.site-footer__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3) var(--s-4);padding-bottom:var(--s-5)}
.site-footer__line{font:400 clamp(min(2rem,10vw),4.4vw,3.5rem)/1.02 var(--serif);letter-spacing:-.02em;max-width:12em;text-wrap:balance}
.site-footer__mail{font-size:1.0625rem;overflow-wrap:anywhere}
.site-footer__mail .link{display:inline-flex;align-items:center;min-height:2.75rem}
.site-footer__cols{display:grid;gap:var(--s-4) min(var(--s-4),6vw);grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--s-4);border-top:1px solid var(--rule)}
@media (min-width:56em){.site-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:55.99em){.site-footer__cols>nav:last-child{grid-column:1/-1}}
@media (max-width:20em){.site-footer__cols{grid-template-columns:minmax(0,1fr)}} /* em, so it also catches a larger default text size */ /* the channel names get the full row, so none wraps */
.site-footer__cols .eyebrow{margin-bottom:var(--s-2)}
.site-footer__cols ul{display:grid;gap:.1rem}
.site-footer__cols a{display:inline-block;min-height:0;padding-block:.65rem;line-height:1.4;color:var(--ink);text-decoration:none;text-underline-offset:.3em}
.site-footer__cols a:hover{text-decoration:underline;text-decoration-color:var(--edge)}
.site-footer__cols a[target="_blank"]::after{width:.6em;height:.6em;margin-left:.45em;-webkit-mask-image:var(--arrow-out);mask-image:var(--arrow-out)}
.site-footer__base{display:grid;gap:.5rem var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--rule)}
.site-footer__base p{max-width:44rem}
@media (min-width:56em){.site-footer__base{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- 8. Hero and The Cut ---------- */
.hero{position:relative;overflow:hidden;overflow:clip;padding-block:clamp(3.5rem,8vw,7rem) clamp(5rem,9vw,8rem)}
.hero>.wrap{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:var(--s-3)}
.hero .display{max-width:8.4em}
.hero .lede{margin-top:var(--s-4);max-width:38rem;color:var(--fg)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:var(--s-4)}
/* the Cut starts at the viewport edge on narrow screens, but on wide ones it follows the centred 1330px wrap (41.5625rem is half of it), so it never climbs into the text column */
.hero__cut{position:absolute;left:max(-2%,calc(50% - 41.5625rem - 2rem));top:calc(100% + var(--cut-drop,1.5rem));z-index:0;width:140%;height:1px;background:var(--edge);transform-origin:0 50%;transform:rotate(-12deg);pointer-events:none;
  animation:cut-draw .9s var(--ease) .2s both}
@keyframes cut-draw{from{transform:rotate(-12deg) scaleX(0)}to{transform:rotate(-12deg) scaleX(1)}}

/* ---------- 9. Numbers ---------- */
.statband{display:grid;gap:var(--s-4) var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stat{display:flex;flex-direction:column;border-top:1px solid var(--fg);padding-top:1.25rem}
.stat__value{font-size:var(--fs-stat);line-height:1;color:var(--fg);margin:0}
.stat__label{margin-top:1rem;font-weight:500;font-size:1rem;line-height:1.35;color:var(--fg);text-wrap:balance}
.stat__meta{margin-top:.5rem;font-size:var(--fs-small);line-height:1.5;color:var(--fg-2)}
.stat__value--text{font-size:var(--fs-h3);line-height:1.15}
.owned-note{display:flex;gap:.9rem;align-items:baseline;max-width:46rem;margin-top:var(--s-4);font-size:var(--fs-small);line-height:1.55;color:var(--fg-2)}
.owned-note::before{content:"";flex:none;width:1.25rem;height:1px;background:var(--edge);transform:rotate(-12deg) translateY(-.2em);transform-origin:0 50%}
.metrics{display:grid;gap:var(--s-3) var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.metrics>div{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:1.1rem;min-width:0}
.metrics dd{margin:0}
.metrics dd.num{order:1;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;color:var(--fg)}
.metrics dt{order:2;margin-top:.8rem;font-weight:500;font-size:1rem;line-height:1.35;color:var(--fg)}
.metrics .stat__meta{order:3}

/* ---------- 10. Cards ---------- */
.card--cut,.guide-card{position:relative;isolation:isolate}
.card--cut{padding:var(--card-pad)}
.card--cut::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--card-bg);border:1px solid var(--card-line);pointer-events:none;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.card--cut::after{content:"";position:absolute;top:0;right:0;z-index:-1;width:var(--chamfer);height:var(--chamfer);pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--card-line) calc(50% - 1px),var(--card-line) 50%,transparent 50%)}
.frame{position:relative;border:1px solid var(--card-line);background:var(--card-bg);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.frame::after{content:"";position:absolute;top:0;right:0;width:var(--chamfer);height:var(--chamfer);pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--card-line) calc(50% - 1px),var(--card-line) 50%,transparent 50%)}
.frame>img,.frame>svg{width:100%;height:auto}

.work-card{display:flex;flex-direction:column;min-width:0}
.work-card>.eyebrow{margin-bottom:.9rem}
.work-card>.tagline{font-size:1rem;margin-top:.6rem}
.work-card__metric{margin-top:var(--s-3);display:flex;flex-direction:column;gap:.35rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.work-card__metric .num{font-size:clamp(2.25rem,3.4vw,3rem);line-height:1;color:var(--fg)}
.work-card__metric .small{color:var(--fg-2)}
.work-card>.arrow-link{margin-top:auto;align-self:flex-start}
.work-card__metric+.arrow-link{margin-top:var(--s-3)}
.work-card--full{padding:clamp(1.5rem,4vw,3.5rem);gap:var(--s-4)}
.work-card--full>*{margin:0}
.work-card--full .work-card__head .eyebrow{margin-bottom:var(--s-2)}
.work-card--full .work-card__head .h2{max-width:14em}
.work-card--full .work-card__head .tagline{font-size:var(--fs-lede);max-width:34rem}
.work-card--full>:is(.metrics,.outcome,.howruns){padding-top:var(--s-4);border-top:1px solid var(--line)}
.work-card--full>.metrics>div{border-top:0;padding-top:0}
.outcome{font:400 clamp(1.5rem,2.6vw,2.125rem)/1.22 var(--serif);letter-spacing:-.01em;max-width:36em;text-wrap:balance;color:var(--fg)}
.howruns{display:grid;gap:var(--s-2) var(--s-4)}
@media (min-width:56em){.howruns{grid-template-columns:minmax(9rem,16rem) minmax(0,1fr)}}
.howruns ol{counter-reset:hr;display:grid;gap:.9rem;padding:0;list-style:none}
.howruns li{counter-increment:hr;position:relative;padding-left:2.75rem;max-width:46rem}
.howruns li::before{content:counter(hr,decimal-leading-zero);position:absolute;left:0;top:.2em;font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.14em;color:var(--fg-2)}
.work-card--full>.arrow-link{align-self:flex-start;margin-top:0}

.dossier{display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(1.5rem,4vw,3.5rem)}
.dossier>header .eyebrow{margin-bottom:var(--s-2)}
.dossier>header :is(.h2,.h3,h2,h3){font:400 var(--fs-h2)/1.02 var(--serif);letter-spacing:-.02em;max-width:14em}
.dossier>header .tagline{max-width:34rem}
.dossier>header p:not(.eyebrow):not(.tagline){margin-top:.75rem}
.strip{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.strip li{padding:1rem 0;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:1.55;color:var(--fg-2)}
@media (min-width:48em){.strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}.strip li{padding:1.1rem 0 0}}
.dossier__links{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem var(--s-4)}

.guide-card{display:flex;flex-direction:column;min-width:0}
.guide-card__link{display:flex;flex-direction:column;gap:.75rem;flex:1;padding:var(--card-pad);color:inherit;text-decoration:none}
.guide-card__link .eyebrow{margin:0}
.guide-card__link .h3,.guide-card__link h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
.guide-card__link:hover .h3,.guide-card__link:hover h3{text-decoration-color:var(--edge);text-decoration-thickness:2px}
.guide-card__link p:not(.eyebrow):not(.guide-card__meta){color:var(--fg-2);font-size:1rem;line-height:1.5}
.guide-card__meta{display:flex;flex-wrap:wrap;gap:.25rem 0;margin-top:auto;padding-top:.5rem;font-size:var(--fs-small);color:var(--fg-2)}
.guide-card__meta span+span{margin-left:1rem;padding-left:1rem;border-left:1px solid var(--line)}
.guide-card .chip{align-self:flex-start}
.guide-card__link:focus-visible{outline-offset:4px}

/* ---------- 11. Content blocks ---------- */
.steps{counter-reset:step;display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr))}
.step{counter-increment:step;display:flex;flex-direction:column;gap:.9rem;border-top:1px solid var(--fg);padding-top:1.25rem}
.step::before{content:counter(step,decimal-leading-zero);font:500 var(--fs-eyebrow)/1 var(--sans);letter-spacing:.14em;color:var(--fg-2)}
.step__verb{display:block;font:400 clamp(2.25rem,3.8vw,3.25rem)/1 var(--serif);letter-spacing:-.025em}
.step>p{font-size:1rem;line-height:1.55}
.step__artifact{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:var(--fs-small)!important;color:var(--fg-2)}

.principles{counter-reset:pr;border-bottom:1px solid var(--line)}
.principle{display:grid;gap:.75rem 2rem;padding-block:var(--s-4);border-top:1px solid var(--line);min-width:0}
.principle__n{display:block;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;color:var(--fg-2)}
.principle>p{max-width:40rem}
.receipt{margin-top:.25rem;padding-left:1rem;border-left:1px solid var(--line);font-size:var(--fs-small);line-height:1.55;color:var(--fg-2);max-width:40rem}
@media (min-width:48em){
  .principle{grid-template-columns:minmax(4.5rem,7rem) minmax(0,1fr);gap:.9rem 1.5rem}
  .principle__n{grid-row:1/span 3}
  .principle>:not(.principle__n){grid-column:2}
}

.callout{--bar:var(--fg-2);position:relative;padding:1.25rem 1.5rem 1.35rem 1.6rem;background:var(--card-bg);border-left:2px solid var(--bar);color:var(--fg);min-width:0}
.callout>*+*{margin-top:.75em}
.callout>p{max-width:40rem}
.callout__label{margin:0 0 .85rem!important;font:500 var(--fs-eyebrow)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
.callout--tip{--bar:var(--fg-2)}
.callout--gotcha{--bar:var(--fg)}
.callout--gotcha .callout__label{color:var(--fg)}
.callout--receipt{--bar:var(--fg-2);border-left-style:dashed;font-variant-numeric:lining-nums tabular-nums}
.callout--miss{--bar:var(--edge);border-left-width:3px}
.callout--miss .callout__label{color:var(--fg)}
.callout--method{border:1px solid var(--card-line);padding:clamp(1.25rem,3vw,2rem)}
.callout--method dl{display:grid;gap:.9rem 2rem;margin-top:1rem}
.callout--method dt{font-weight:600}
.callout--method dd{margin:0;color:var(--fg-2)}
@media (min-width:48em){.callout--method dl{grid-template-columns:minmax(8rem,12rem) minmax(0,1fr)}}

.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;padding:.3rem .75rem;border:1px solid var(--line);background:transparent;color:var(--fg-2);font:500 .8125rem/1.35 var(--sans);letter-spacing:.01em}
.chip--tested{display:inline-block;position:relative;padding-left:2rem;color:var(--fg);border-color:var(--fg-2)}
/* inline-block with an absolute mark: a chip whose text and stamped span are separate nodes (the guide heads) stays one running line */
.chip--tested::before{content:"";position:absolute;left:.75rem;top:calc(.15rem + .675em);width:.8rem;height:.3rem;background:var(--edge);clip-path:polygon(0 100%,80% 0,100% 0,20% 100%)}
.section--ink .chip{border-color:var(--graphite)}

.cta{border-top:1px solid var(--fg);padding-top:var(--s-4);display:grid;gap:var(--s-3) var(--s-4)}
.cta>*{margin:0}
.cta :is(h2,.h2){font:400 clamp(min(2rem,10vw),4vw,3.25rem)/1.04 var(--serif);letter-spacing:-.02em;max-width:14em}
.cta .btn{justify-self:start}

.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}
.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}
.muted{color:var(--fg-2)}
.max-read{max-width:var(--read)}
.list{display:grid;gap:.6rem;padding:0!important;list-style:none}
.list>li{position:relative;padding-left:1.6rem}
.list>li::before{content:"";position:absolute;left:0;top:.8em;width:.9rem;height:1px;background:var(--fg)}

/* ---------- 12. Table and chart ---------- */
.ledger-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--fg);container:ledger/inline-size}
.ledger{width:100%;min-width:40rem;text-align:left}
.ledger caption{caption-side:top;text-align:left;padding:1.1rem 0 1.25rem;font-size:var(--fs-small);line-height:1.5;color:var(--fg-2);max-width:50rem}
/* in a region that scrolls sideways the caption stays pinned and as wide as the visible part, so its source and date are never cut mid-sentence;
   100cqw is the width of .ledger-wrap, not of the viewport, so a table inside a 42rem article column cannot be widened by it */
@supports (width:1cqw){.ledger caption{position:sticky;left:0;width:min(50rem,100cqw)}}
.ledger th,.ledger td{padding:1.15rem 1.5rem 1.15rem 0;vertical-align:baseline;text-align:left;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.ledger thead th{padding-bottom:.8rem;border-bottom:1px solid var(--fg);font:500 var(--fs-eyebrow)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2);white-space:nowrap}
.ledger tbody th{font-weight:500;color:var(--fg)}
.ledger td{color:var(--fg-2)}
.ledger td.num{font-size:var(--fs-h3);line-height:1.1;color:var(--fg);white-space:nowrap}
.ledger tr>:last-child{padding-right:0}
.ledger-wrap:focus-visible{outline-offset:6px}

/* .ledger--stack: a table whose columns are the point. Below 44em (the width at which a 40rem table fits inside the gutters)
   every row becomes a block and each cell prints its column name above its value, taken from the cell's data-label.
   Nothing scrolls sideways. The thead stays in the accessibility tree (clipped, not removed) and site.js restores explicit table roles,
   because some browsers drop table semantics once display changes. The selectors are three classes deep so page CSS cannot win with min-width. */
@media (max-width:43.99em){
  .ledger-wrap .ledger.ledger--stack{display:block;width:100%;min-width:0}
  .ledger.ledger--stack caption{display:block;position:static;width:auto;max-width:none;padding-bottom:1rem}
  .ledger.ledger--stack :is(thead,tbody,tfoot){display:block}
  .ledger.ledger--stack thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ledger.ledger--stack tr{display:block}
  .ledger.ledger--stack tbody tr{padding-block:1.1rem;border-bottom:1px solid var(--line)}
  .ledger.ledger--stack tbody :is(th,td){display:block;padding:.3rem 0;border:0;white-space:normal}
  .ledger.ledger--stack tbody th{padding-bottom:.45rem;font-size:1.0625rem;line-height:1.35}
  .ledger.ledger--stack tbody td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.2rem;font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
  .ledger.ledger--stack td.num{font-size:var(--fs-h3)}
  .ledger.ledger--stack tr>:last-child{padding-right:0}
}

/* The stamped chart is two drawings: chart__svg--wide (viewBox 1000 x 360) and chart__svg--narrow (viewBox 400 x 300). One shows, the other is display:none,
   so neither scrolls and neither is ever read twice. Without the classes (a hand-built chart) the single drawing shows at every width. */
.chart{width:100%;margin:0;container:chart/inline-size} /* width:100% because a size container has no intrinsic width of its own */
.chart svg{width:100%;height:auto;overflow:visible}
.chart .chart__svg--narrow{display:none}
@media (max-width:41.99em){
  .chart .chart__svg--wide{display:none}
  .chart .chart__svg--narrow{display:block}
}
/* the wide drawing is 1000 units across, so its 14-unit labels render under 10px once the figure is narrower than about 60rem;
   these steps keep them near 11px or more (measured). The container query reads the figure, not the viewport, because beside the Numbers aside the chart is narrower than the page */
@container chart (max-width:56rem){.chart__svg--wide text{font-size:16px}}
@container chart (max-width:44rem){.chart__svg--wide text{font-size:18px}}
.chart text{font-family:var(--sans);fill:var(--fg-2)}
.chart .chart__bar,.chart rect.bar{fill:var(--edge)}
.chart .chart__median{fill:none;stroke:var(--fg);stroke-width:1;stroke-dasharray:5 4}
.chart .chart__axis,.chart .chart__grid{stroke:var(--line);stroke-width:1;fill:none}
/* the stamped chart carries presentation attributes tuned for bone; these keep it right on ink */
.chart__svg text[font-weight="600"]{fill:var(--fg)}
.chart__svg>line:not([class]),.chart__svg [stroke="#0C0D0F"]{stroke:var(--fg)}
.chart__svg>g[stroke] line,.chart__svg g[stroke="#55585D"] line{stroke:var(--fg-2)}
.chart figcaption{margin-top:1rem;font-size:var(--fs-small);line-height:1.55;color:var(--fg-2);max-width:46rem}

/* ---------- 13. Video facade ---------- */
.yt{position:relative;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.yt__play,.yt__iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:none;color:var(--bone);overflow:visible}
.yt--short .yt__play,.yt--short .yt__iframe{aspect-ratio:9/16}
.yt__play img{background:var(--ink-2);position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
/* the player is never clipped: a clip-path would cut off its own focus ring. YouTube asks for a player of at least 200 x 200, so a landscape one grows to 200px tall and letterboxes */
.yt__iframe{border:0;background:var(--ink-2);min-height:200px}
.yt--short{--chamfer:20px}
.yt__play::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:4.25rem;height:4.25rem;margin:-2.125rem 0 0 -2.125rem;border-radius:50%;background:var(--bone);transition:transform var(--dur) var(--ease)}
.yt__play::after{content:"";position:absolute;z-index:2;left:50%;top:50%;margin:-.7rem 0 0 -.4rem;border-style:solid;border-width:.7rem 0 .7rem 1.1rem;border-color:transparent transparent transparent var(--ink)}
/* A Short poster carries a one-word caption at dead centre and a credit line along the floor, so its disc sits low and right, between the two (about 75 to 88% of the height) */
.yt--short{--disc:2.75rem;--disc-r:.75rem;--disc-b:12%}
.yt--short .yt__play::before{left:auto;top:auto;right:var(--disc-r);bottom:var(--disc-b);width:var(--disc);height:var(--disc);margin:0}
.yt--short .yt__play::after{left:auto;top:auto;right:calc(var(--disc-r) + var(--disc) / 2 - .5rem);bottom:calc(var(--disc-b) + var(--disc) / 2 - .5rem);margin:0;border-width:.5rem 0 .5rem .8rem}
.yt__play:hover::before{transform:scale(1.07)}
.yt__play:hover img{transform:scale(1.03)}
.yt__play:focus-visible{outline-offset:4px}
/* a played Short is too narrow to be a player in a six-up wall: it takes its own row at about 20rem. Two forms, because a page may flatten .yt with display:contents
   and then the tile that holds it is the grid item */
.yt--short.is-playing{grid-column:1/-1;width:min(100%,20rem)}
.cols>:has(.yt--short.is-playing){grid-column:1/-1;width:min(100%,20rem)}
.yt__fallback{align-self:flex-start;display:inline-flex;align-items:center;min-height:2.75rem;font-size:var(--fs-small);color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:.22em}
.yt__fallback:hover{color:var(--fg);text-decoration-thickness:2px}

/* ---------- 14. Article ---------- */
.article__head{padding-block:clamp(3rem,8vw,6rem) clamp(2rem,5vw,3.5rem)}
.article__head .eyebrow{margin-bottom:var(--s-3)}
.article__head .h1{max-width:13em;margin-bottom:var(--s-3);font-size:clamp(2.25rem,5vw,3.75rem);line-height:1}
.byline{font-size:var(--fs-small);line-height:1.5;color:var(--fg-2);margin-bottom:var(--s-2)}
.article__head .chip{margin-top:.25rem}
.prose{font-size:1.125rem;line-height:1.7}
.prose>*+*{margin-top:1.3em}
.prose h2{margin-top:2.6em;font:400 clamp(1.75rem,3.4vw,2.5rem)/1.1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.prose h3{margin-top:2em;font:400 var(--fs-h3)/1.2 var(--serif)}
.prose h2+*,.prose h3+*{margin-top:.8em}
.prose :is(ul,ol):not([class]){padding-left:1.4em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--fg-2)}
.prose a:not([class]){text-decoration-thickness:1px}
.prose blockquote{padding-left:1.4rem;border-left:1px solid var(--fg);font:400 1.375rem/1.4 var(--serif);color:var(--fg)}
.prose code,.prose kbd{font:400 .875em/1.4 var(--mono);padding:.12em .4em;background:var(--paper);border:1px solid var(--rule)}
.prose pre{overflow-x:auto;padding:1.25rem 1.5rem;background:var(--paper);border:1px solid var(--rule);font:400 .875rem/1.55 var(--mono);tab-size:2;-webkit-overflow-scrolling:touch}
.prose pre code{padding:0;border:0;background:none;font-size:inherit;overflow-wrap:normal}
.prose code{overflow-wrap:anywhere}
.prose figure>figcaption{margin-top:.75rem;font-size:var(--fs-small);color:var(--fg-2)}
.prose hr{margin-block:2.5em}
.prose .callout,.prose .tldr,.prose .toc,.prose .checklist,.prose .ledger-wrap,.prose .chart,.prose .yt{margin-block:2em}
.tldr{padding:1.5rem 1.75rem 1.6rem;background:var(--paper);border-top:1px solid var(--ink)}
.tldr__label{margin:0 0 1rem;font:500 var(--fs-eyebrow)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
.tldr ul{display:grid;gap:.7rem;padding:0;list-style:none;font-size:1.0625rem;line-height:1.55}
.tldr li{position:relative;padding-left:1.6rem;margin:0}
.tldr li::before{content:"";position:absolute;left:0;top:.85em;width:.9rem;height:1px;background:var(--ink)}
.toc{padding:1.25rem 0;border-block:1px solid var(--rule);font-size:1rem;line-height:1.45}
.toc::before{content:"On this page";display:block;margin-bottom:.9rem;font:500 var(--fs-eyebrow)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
.toc ol{counter-reset:toc;display:grid;gap:.15rem;padding:0;list-style:none}
.toc li{counter-increment:toc;margin:0}
.toc a{display:flex;gap:1rem;align-items:baseline;min-height:2.75rem;padding-block:.55rem;color:var(--ink);text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:none;width:1.75rem;font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.1em;color:var(--fg-2)}
.toc a:hover{text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:.25em}
.checklist{display:grid;gap:.9rem;padding:0;list-style:none}
.checklist li{position:relative;padding-left:2.2rem;margin:0}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:1.05rem;height:1.05rem;border:1px solid var(--ink);background:var(--paper)}
.sources{padding-top:var(--s-3);border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.6;color:var(--fg-2)}
.prose .sources h2{margin:0 0 1rem;font:500 var(--fs-eyebrow)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-2)}
.sources ul,.sources ol{display:grid;gap:.6rem;padding-left:1.25em}
.sources li{margin:0;overflow-wrap:anywhere}
.related{margin-block:var(--s-5)}
.related::before{content:"";display:block;height:1px;margin-bottom:var(--s-4);background:var(--fg)}
.related>:is(h2,h3,.h3){margin-bottom:var(--s-3);font:400 var(--fs-h3)/1.15 var(--serif)}
.related ul{display:grid;gap:0;padding:0;list-style:none}
.related li{padding-block:.5rem;border-top:1px solid var(--rule)}
.related li:last-child{border-bottom:1px solid var(--rule)}

/* ---------- 15. Utilities and reveal ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.center{margin-inline:auto;text-align:center}
@media (max-width:47.99em){.hide-mobile{display:none!important}}
.js .reveal,.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-reveal="1"]{transition-delay:.08s}
.js [data-reveal="2"]{transition-delay:.16s}
.js [data-reveal="3"]{transition-delay:.24s}
.js .reveal.is-in,.js [data-reveal].is-in{opacity:1;transform:none}
.js hr.rule[data-reveal]{opacity:1;transform:scaleX(0);transition:transform .9s var(--ease)}
.js hr.rule[data-reveal].is-in{transform:scaleX(1)}

/* ---------- 16. Forced colors ---------- */
@media (forced-colors:active){
  :focus-visible{outline-color:Highlight}
  .btn,.nav-toggle{border:1px solid ButtonText}
  .card--cut::before,.frame{border-color:CanvasText}
  /* the chamfer's diagonal is a gradient, so it keeps its own colors unless told otherwise */
  .card--cut::after,.frame::after{background:linear-gradient(to top right,transparent calc(50% - 1px),CanvasText calc(50% - 1px),CanvasText 50%,transparent 50%);forced-color-adjust:none}
  /* only the Cut keeps its own color; a Miss callout takes the system colors and its left bar renders in CanvasText, so it still marks the miss without a bright panel */
  .hero__cut{forced-color-adjust:none}
  .yt__play::before{background:ButtonText}
  .yt__play::after{border-left-color:ButtonFace}
}

/* ---------- 17. Print ---------- */
@media print{
  :root{--ground:var(--paper);--fg:var(--ink);--fg-2:var(--graphite);--line:#bbb;--card-bg:transparent;--card-line:#bbb}
  html,body{background:none}
  .site-header,.nav-panel,.skip-link,.header-sentinel,.hero__cut,[data-copy],.copy-status,.yt__play::before,.yt__play::after{display:none!important}
  .section,.section--ink,.section--paper{background:none!important;color:var(--ink);padding-block:2rem;border:0}
  .section--ink{--fg:var(--ink);--fg-2:var(--graphite);--line:#bbb;--card-bg:transparent;--card-line:#bbb}
  .site-footer{background:none;margin-top:2rem}
  [data-reveal],.reveal,.js [data-reveal],.js .reveal{opacity:1!important;transform:none!important}
  .card--cut,.yt,.callout,.principle,.stat,.step{break-inside:avoid}
  a[href^="http"]:where(.link,.arrow-link,.yt__fallback)::after,.prose a[href^="http"]::after{content:" (" attr(href) ")";-webkit-mask:none;mask:none;background:none;width:auto;height:auto;font-size:.8em;color:var(--graphite)}
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js [data-reveal]{opacity:1!important;transform:none!important}
  .js hr.rule[data-reveal]{transform:none!important}
  .hero__cut{transform:rotate(-12deg)!important}
}