/* 530utopian.help · engine.css · redesign (ruling 18, 2026-09-17)
   The Engine v2's inks, faces, type roles and laws, with new poster-scale layouts and no boxes around content.
   Marked SITE: things the site needs that a specimen sheet does not.
   Marked ENGINE-GAP: a defect in the engine, reported in the handback. */

/* ---------- fonts, self-hosted, OFL (licenses beside the files) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations"),url("/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"),url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations"),url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/assets/fonts/martian-mono-latin-wght-normal.woff2") format("woff2-variations"),url("/assets/fonts/martian-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --ink:#17121C; --ink-2:#241C2B; --ink-soft:#40374A;
  --paper:#D5CDDB; --paper-2:#C6BCD0; --paper-3:#AFA3BC;
  --quiet:#5B5267; --quiet-dk:#8C81A0;
  --mark:#A81F3D; --mark-lit:#E05C77; --acid:#C8E04A;
  --rule-dk:#382E42;

  --voice:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --read:"Newsreader",Georgia,"Times New Roman",serif;
  --mach:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --t-xs:.68rem; --t-sm:.76rem; --t-base:1.0625rem; --t-lg:1.1875rem;
  --t-deck:clamp(1.3rem,2.6vw,1.9rem);
  --t-h3:clamp(1.35rem,2.4vw,1.8rem);
  --t-h2:clamp(2rem,4.6vw,3.2rem);
  --t-h1:clamp(2.8rem,7.2vw,5.4rem);
  --t-cry:clamp(3rem,10vw,8rem);
  /* SITE: poster scale */
  --t-poster:clamp(2.9rem,7.4vw,6.6rem);
  --t-mega:clamp(3.3rem,11vw,10rem);

  --measure:63ch;
  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:54px; --s7:86px; --s8:132px;
  --hair:1px; --mid:2px; --heavy:6px;
  --gutter:20px;

  --dots:radial-gradient(circle, rgba(23,18,28,.055) .6px, transparent .9px),
         radial-gradient(circle, rgba(23,18,28,.055) .6px, transparent .9px);
  --dots-size:8px 8px, 8px 8px;
  --dots-pos:0 0, 4px 4px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* ENGINE-GAP: the engine's dark-scheme paper (#C2B9CB) drops --mark to 3.79:1, below AA for the
   .68rem labels it carries. The site deepens --mark in that scheme only, to #921935 (4.60:1). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#C2B9CB; --paper-2:#B2A7BF; --paper-3:#9A8DA9; --quiet:#4E4659; --mark:#921935;
}}
:root[data-theme="dark"]{
  --paper:#C2B9CB; --paper-2:#B2A7BF; --paper-3:#9A8DA9; --quiet:#4E4659; --mark:#921935;
}
@media(max-width:480px){ :root{ --gutter:16px; --s7:64px; --s8:86px } }

*{box-sizing:border-box; border-radius:0 !important}
html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--s4)}
body{margin:0; background-color:var(--paper); color:var(--ink);
  font-family:var(--read); font-size:var(--t-base); line-height:1.58;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  font-variation-settings:"opsz" 16;
  background-image:var(--dots); background-size:var(--dots-size); background-position:var(--dots-pos);
  background-attachment:fixed; overflow-x:hidden}
img,svg{display:block; max-width:100%}

.colorbar{height:9px; width:100%;
  background:linear-gradient(90deg,
    var(--ink) 0 9%, var(--paper) 9% 10%,
    var(--mark) 10% 16%, var(--paper) 16% 17%,
    var(--acid) 17% 21%, var(--paper) 21% 22%,
    var(--paper-3) 22% 27%, transparent 27% 100%)}

/* ---------- frame ---------- */
.sheet{max-width:1280px; margin:0 auto; padding:0 var(--gutter)}
.movement{padding:var(--s7) 0 0; position:relative}
.grid{display:grid; grid-template-columns:1fr; gap:var(--s3)}
.grid + .grid{margin-top:var(--s5)}
@media(min-width:920px){
  .grid{grid-template-columns:15rem minmax(0,1fr); gap:var(--s5) var(--s6); align-items:start}
  .grid > .body:only-child,.grid > .wide:only-child{grid-column:2}
}
.margin{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.95; color:var(--quiet); letter-spacing:.01em}
.margin .lbl{display:block; margin-bottom:var(--s2)}
.margin p{margin:0 0 .9em}
.margin h2.side{font-size:clamp(2rem,3.4vw,2.9rem); line-height:.92; letter-spacing:-.03em; color:var(--ink); margin:0; font-variation-settings:"wdth" 78,"opsz" 96}
@media(min-width:920px){ .margin{position:sticky; top:var(--s4)} }
.body{max-width:var(--measure); min-width:0}
.wide{max-width:none; min-width:0}

/* ---------- type roles ---------- */
h1,h2,h3,h4{font-family:var(--voice); font-style:normal}
h1{font-weight:700; font-size:var(--t-h1); line-height:.94; letter-spacing:-.022em; margin:0 0 var(--s4); font-variation-settings:"wdth" 82,"opsz" 96}
h2{font-weight:700; font-size:var(--t-h2); line-height:.96; letter-spacing:-.02em; margin:0 0 var(--s3); text-wrap:balance; font-variation-settings:"wdth" 84,"opsz" 72}
h1 em,h2 em,.em-v{font-style:normal; color:var(--mark); font-variation-settings:"wdth" 100,"opsz" 96}
h3{font-weight:600; font-size:var(--t-h3); line-height:1.06; margin:0 0 var(--s2); letter-spacing:-.014em; font-variation-settings:"wdth" 86,"opsz" 36}
.deck{font-family:var(--read); font-style:italic; font-weight:300; font-size:var(--t-deck); font-variation-settings:"opsz" 36; line-height:1.3; margin:0 0 var(--s4); max-width:28em; color:var(--ink-soft)}
.deck p{margin:0 0 .5em}
.deck .c-src{font-style:normal}
p{margin:0 0 1.05em}
.lead,.lead p:not(.c-src){font-size:var(--t-lg); font-variation-settings:"opsz" 20; line-height:1.5}
p.lead{margin-bottom:var(--s4)}
.lbl{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); line-height:1.6; letter-spacing:.12em; text-transform:uppercase; color:var(--mark); margin:0 0 var(--s3); display:block}
.quiet{color:var(--quiet)}
em{font-style:italic}
strong{font-weight:600}
.poster{font-weight:700; font-size:var(--t-poster); line-height:.9; letter-spacing:-.03em; margin:0 0 var(--s5); max-width:13em; font-variation-settings:"wdth" 78,"opsz" 96}
.poster em{font-variation-settings:"wdth" 100,"opsz" 96}

/* ---------- top bar (SITE: navigation moved above the page, redesign) ---------- */
.top{border-bottom:var(--mid) solid var(--ink); position:relative}
.top-in{display:flex; align-items:center; gap:var(--s3) var(--s5); min-height:56px; padding-top:var(--s2); padding-bottom:var(--s2)}
.top .id{font-family:var(--voice); font-weight:700; font-variation-settings:"wdth" 80,"opsz" 24; font-size:1.45rem; line-height:1; letter-spacing:-.02em; color:var(--ink); text-decoration:none; white-space:nowrap}
.top .id em{font-style:normal; color:var(--mark); font-variation-settings:"wdth" 100,"opsz" 24}
.topnav{display:none; gap:var(--s4); margin-left:auto}
.topnav a,.menu-btn,.top-tel{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap}
.topnav a:hover,.menu-btn:hover,.top-tel:hover{color:var(--mark)}
.topnav a[aria-current="page"]{color:var(--mark); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}

.top-tel{color:var(--mark)}
@media(min-width:1060px){ .topnav{display:flex} .menu{display:none} }
@media(max-width:600px){ .top-in{gap:var(--s3)} }


/* ---------- the colophon: the last line on the page (SITE) ---------- */
.colophon{border-top:var(--hair) solid var(--paper-3); margin-top:var(--s5)}
.foot .colophon p{margin:0 auto; padding-top:var(--s3); padding-bottom:var(--s3); font-family:var(--mach); font-weight:400; font-size:var(--t-xs); line-height:1.6; letter-spacing:.1em; text-transform:uppercase; color:var(--quiet)}
.foot .colophon a{color:var(--quiet); text-decoration:none; border-bottom:var(--hair) solid var(--paper-3)}
.foot .colophon a:hover{color:var(--mark); border-bottom-color:var(--mark)}

/* ---------- the phone menu: a hamburger with no script behind it (SITE: the CSP refuses one) ---------- */
.menu{margin-left:auto}
.menu-btn{display:flex; align-items:center; gap:10px; padding:13px 0; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn::marker{content:""}
.menu-btn:focus-visible{outline:var(--mid) solid var(--mark); outline-offset:4px}
.menu-bars{display:block; position:relative; width:24px; height:16px; flex:none}
.menu-bars i{position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .18s ease, opacity .12s ease}
.menu-bars i:nth-child(1){top:0}
.menu-bars i:nth-child(2){top:7px}
.menu-bars i:nth-child(3){top:14px}
.menu[open] .menu-btn{color:var(--mark)}
.menu[open] .menu-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[open] .menu-bars i:nth-child(2){opacity:0}
.menu[open] .menu-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-panel{position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--ink); border-bottom:var(--mid) solid var(--mark); box-shadow:0 18px 40px rgba(23,18,28,.28)}
.menu-nav{display:block; padding-top:var(--s2); padding-bottom:var(--s3)}
.menu-nav a{display:block; padding:13px 0; border-top:var(--hair) solid var(--ink-soft); font-family:var(--voice); font-weight:600; font-size:1.2rem; line-height:1.15; letter-spacing:-.01em; font-variation-settings:"wdth" 88,"opsz" 24; color:var(--paper); text-decoration:none}
.menu-nav a:first-child{border-top:0}
.menu-nav a:hover{color:var(--mark-lit)}
.menu-nav a:focus-visible{outline:var(--mid) solid var(--acid); outline-offset:2px}
.menu-nav a[aria-current="page"]{color:var(--acid)}
.menu-nav .menu-tel{margin-top:var(--s2); font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--acid)}
.menu-nav .menu-tel:hover{color:var(--paper)}

/* narrow phones: the bars carry the button alone, the word stays for screen readers */
@media(max-width:479px){
  .menu-word{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .menu-btn{gap:0; padding:14px 10px; margin-right:-10px}
}
@media(max-width:379px){ .top .top-tel{display:none} }

/* ---------- the route band: component 03, compact (SITE) ---------- */
.route{background:var(--ink); color:var(--acid)}
.route a{display:flex; align-items:baseline; gap:var(--s2) var(--s4); padding:var(--s3) 0; color:var(--acid); text-decoration:none; flex-wrap:wrap}
.route-k{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--acid); padding:2px 7px}
.route-t{color:var(--paper); font-family:var(--voice); font-weight:600; font-size:clamp(1.05rem,2.2vw,1.35rem); line-height:1.2; letter-spacing:-.005em; font-variation-settings:"wdth" 88,"opsz" 24}
.route-t em{color:var(--acid); font-style:normal}
.route-go{font-family:var(--mach); font-size:1.1rem; margin-left:auto; transition:transform .15s}
.route a:hover .route-t{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.route a:hover .route-t em{color:var(--acid); font-style:normal}
.route-go{transform:translateX(4px)}
.route a:focus-visible{outline:2px solid var(--acid); outline-offset:2px}

/* ---------- the hero: proof, on the front page's one inversion (SITE) ---------- */
.hero{background:var(--ink); color:var(--paper-2); position:relative; overflow:hidden; padding:var(--s6) 0 var(--s7)}
.hero::after,.invert::after{content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); background-size:180px 180px; opacity:.14; mix-blend-mode:screen}
.hero > *,.invert > *{position:relative; z-index:1}
.hero .lbl{color:var(--mark-lit)}
.hero a{color:var(--paper)}
.hero-grid{display:grid; gap:var(--s6)}
@media(min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--s6) var(--s7); align-items:end} }
.kicker{font-family:var(--mach); font-weight:400; font-size:var(--t-sm); letter-spacing:.04em; line-height:1.6; color:var(--paper-2); margin:0 0 var(--s4); max-width:46em}
.kicker::before{content:""; display:inline-block; width:10px; height:10px; background:var(--mark-lit); margin-right:10px; vertical-align:.05em}
.hook{font-weight:700; font-size:clamp(3.5rem,15vw,10rem); line-height:.86; letter-spacing:-.035em; color:var(--paper); margin:0 0 var(--s5); font-variation-settings:"wdth" 75,"opsz" 96; text-wrap:balance}
.hook em{color:var(--mark-lit)}
.hook-sub p:not(.c-src){font-family:var(--read); font-weight:300; font-size:clamp(1.25rem,2.4vw,1.8rem); line-height:1.3; color:var(--paper); max-width:26em; margin:0 0 var(--s3); font-variation-settings:"opsz" 36}
.hero .c-src,.invert .c-src{color:var(--quiet-dk)}
.hero .c-src::before,.invert .c-src::before{border-top-color:var(--rule-dk)}
.hero .c-src a,.invert .c-src a{text-decoration-color:var(--rule-dk)}
.hero .c-src b,.invert .c-src b{color:var(--mark-lit)}

/* the path: four steps, the threat lit */
.path{list-style:none; margin:0 0 var(--s4); padding:0; counter-reset:step}
.path li{position:relative; padding:0 0 var(--s4) var(--s5); border-left:var(--mid) solid var(--rule-dk)}
.path li:last-child{padding-bottom:0}
.path li::before{content:""; position:absolute; left:-7px; top:.35em; width:12px; height:12px; background:var(--ink); border:var(--mid) solid var(--paper-3)}
.path .pk{display:block; font-family:var(--voice); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1; letter-spacing:-.02em; color:var(--paper); font-variation-settings:"wdth" 82,"opsz" 36; margin:0 0 var(--s1)}
.path .pt{display:block; font-size:1rem; line-height:1.45; color:var(--paper-2); max-width:24em}
.path li.hot{border-left-color:var(--mark-lit)}
.path li.hot::before{background:var(--mark-lit); border-color:var(--mark-lit)}
.path li.hot .pk{color:var(--mark-lit); font-variation-settings:"wdth" 100,"opsz" 36}
.path li.hot .pt{color:var(--paper)}

/* the proof band */
.proof{margin-top:var(--s7); border-top:var(--mid) solid var(--paper-3); padding-top:var(--s4)}
.proof > .lbl{font-size:var(--t-xs); margin-bottom:var(--s4)}
.proof-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0}
.proof-grid > li{padding:var(--s4) 0; border-top:var(--hair) solid var(--rule-dk); min-width:0}
.proof-grid > li:first-child{border-top:0; padding-top:0}
@media(min-width:640px){
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5)}
  .proof-grid > li:nth-child(2){border-top:0; padding-top:0}
}
@media(min-width:1000px){
  .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:0}
  .proof-grid > li{padding:var(--s4) var(--s5) var(--s5); border-top:0; border-left:var(--hair) solid var(--rule-dk)}
  .proof-grid > li:nth-child(3n+1){border-left:0; padding-left:0}
  .proof-grid > li:nth-child(n+4){border-top:var(--hair) solid var(--rule-dk)}
  .proof-grid > li:nth-child(-n+3){padding-top:0}
}
/* the record in three weights: the lead sentence, the quiet row of paperwork, the counted figures */
.pf-lead{border-top:var(--hair) solid var(--rule-dk); padding:var(--s4) 0 var(--s5); margin-bottom:var(--s5); border-bottom:var(--hair) solid var(--rule-dk)}
.pf-lead .pf-big{font-size:clamp(2.6rem,5.6vw,4.6rem); max-width:14em}
.pf-lead .pf-s{font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.4; max-width:30em}
.pf-three .pf-big{font-size:clamp(1.45rem,2.3vw,1.95rem); line-height:1.02; margin-bottom:var(--s2); color:var(--paper-2)}
.pf-three .pf-s{font-size:.96rem; line-height:1.5; color:var(--quiet-dk)}
.pf-two{margin-top:var(--s5); border-top:var(--hair) solid var(--rule-dk); padding-top:var(--s5)}
@media(min-width:1000px){
  .pf-two{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s6)}
  .pf-two > li{padding-top:0}
  .pf-two > li:nth-child(2){border-left:var(--hair) solid var(--rule-dk)}
}
.pf-k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet-dk); margin:0 0 var(--s2)}
.pf-big{font-family:var(--voice); font-weight:700; font-size:clamp(2.2rem,4.2vw,3.5rem); line-height:.9; letter-spacing:-.03em; color:var(--paper); margin:0 0 var(--s3); font-variation-settings:"wdth" 78,"opsz" 96}
.pf-num .pf-big{font-size:clamp(4.6rem,9vw,7.4rem); line-height:.8; color:var(--mark-lit); font-variation-settings:"wdth" 75,"opsz" 96; font-variant-numeric:lining-nums}
.pf-s{font-size:1.02rem; line-height:1.45; color:var(--paper-2); max-width:26em; margin:0 0 var(--s3)}
.pf .c-src{max-width:36em}

/* ---------- 00 · the purpose line: quiet, serif, first thing in the page (SITE, after the first outside read) ---------- */
.purpose{padding:var(--s5) 0 var(--s5)}
.purpose-t{font-family:var(--read); font-weight:400; font-size:clamp(1.16rem,2.4vw,1.8rem); line-height:1.34; letter-spacing:-.005em; color:var(--ink-2); margin:0; max-width:33em; text-wrap:pretty}
.purpose-t em{font-style:normal; font-weight:500; color:var(--mark)}
.purpose + .number,.sheet:has(.purpose) + .number{margin-top:0}

/* ---------- 01 · the demand, poster scale ---------- */
.demand{padding:var(--s8) 0 0}
.demand .d{font-family:var(--voice); font-weight:700; font-size:var(--t-mega); line-height:.86; letter-spacing:-.035em; margin:0 0 var(--s5); max-width:11.5em; font-variation-settings:"wdth" 75,"opsz" 96; text-wrap:balance}
.demand .d em{font-style:normal; color:var(--mark); font-variation-settings:"wdth" 100,"opsz" 96}
.demand .s{font-family:var(--voice); font-weight:600; font-size:clamp(1.55rem,3.6vw,2.9rem); line-height:1.02; letter-spacing:-.02em; color:var(--ink-soft); max-width:19em; margin:0 0 var(--s6); font-variation-settings:"wdth" 86,"opsz" 48}
.page-demand{padding-top:var(--s7)}
/* the concession's first line, opening the two hard limits (SITE, 19 Sep 2026) */
.demand-lead{font-family:var(--read); font-style:italic; font-weight:400; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.3; color:var(--ink-soft); margin:0 0 var(--s4); max-width:26em; font-variation-settings:"opsz" 30}
/* the record on its own dark surface: no rule or gap above it, since nothing shares the surface now */
.hero-record .proof{margin-top:0; border-top:0; padding-top:0}
.hero-record{padding:var(--s6) 0 var(--s7)}
main > .hero-record + .sheet .teaser{padding-top:var(--s7)}
.limits{list-style:none; margin:0 0 var(--s6); padding:0; display:grid; gap:var(--s4) var(--s6)}
@media(min-width:760px){ .limits{grid-template-columns:repeat(2,minmax(0,1fr))} }
.limits li{border-top:var(--mid) solid var(--ink); padding-top:var(--s3); min-width:0}
.limits li .lbl{margin-bottom:var(--s2)}
.limits li > p:not(.c-src){font-family:var(--voice); font-weight:600; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 var(--s3); max-width:22em; font-variation-settings:"wdth" 90,"opsz" 24}
.demand-why{display:grid; gap:var(--s3)}
@media(min-width:920px){ .demand-why{grid-template-columns:15rem minmax(0,1fr); gap:var(--s6)} }
.demand-body{max-width:var(--measure)}
.demand-body > p:not(.c-src){font-size:var(--t-lg); line-height:1.5; font-variation-settings:"opsz" 20}

/* ---------- 04 · the line, full-width band ---------- */
.number{margin-top:var(--s8); border-top:var(--mid) solid var(--ink); border-bottom:var(--mid) solid var(--ink); padding:var(--s5) 0 var(--s6)}
main > .number:last-child{border-bottom:0; padding-bottom:0}
main:has(> .number:last-child) + .foot{margin-top:var(--s6)}
.number-link{display:block; color:var(--ink); text-decoration:none}
.number-link .lbl{margin-bottom:var(--s2)}
.number .n{display:block; font-family:var(--voice); font-weight:700; font-size:clamp(3.2rem,12.4vw,11.2rem); line-height:.84; letter-spacing:-.04em; white-space:nowrap; font-variation-settings:"wdth" 75,"opsz" 96}
.number .n em{font-style:normal; color:var(--mark); font-variation-settings:"wdth" 100,"opsz" 96}
.number .d{display:block; font-family:var(--mach); font-weight:300; font-size:var(--t-sm); letter-spacing:.3em; color:var(--quiet); margin:var(--s3) 0 0}
@media(max-width:600px){ .number .n{font-size:19.5vw; white-space:normal; line-height:.86} }
.number-link:hover .n{color:var(--mark)}
.number-link:hover .n em{color:var(--ink)}
.number-link:focus-visible{outline:2px solid var(--mark); outline-offset:6px}
.number-say{display:grid; gap:var(--s3) var(--s6); margin-top:var(--s5)}
@media(min-width:860px){ .number-say{grid-template-columns:repeat(2,minmax(0,1fr))} }
.number-say p{margin:0; max-width:26em}
.number-say .calls{font-style:italic; font-weight:300; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; color:var(--ink-soft); font-variation-settings:"opsz" 30}
.number-say .not{font-family:var(--voice); font-weight:700; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.2; letter-spacing:-.01em; font-variation-settings:"wdth" 86,"opsz" 24}

/* ---------- the Board's own words (SITE) ---------- */
.said{padding:var(--s8) 0 0; display:grid; gap:var(--s4)}
@media(min-width:1000px){ .said{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s7); align-items:start} .said .poster{margin:0} }
.pull{margin:0 0 var(--s4); padding:0 0 0 var(--s4); border-left:var(--mid) solid var(--mark)}
.pull p{font-family:var(--read); font-weight:300; font-size:clamp(1.45rem,2.8vw,2.3rem); line-height:1.22; letter-spacing:-.01em; margin:0; font-variation-settings:"opsz" 60}
.said-body > p:not(.c-src){font-size:var(--t-lg); line-height:1.5; max-width:34em}

/* ---------- 02 · the plank list ---------- */
.planks{list-style:none; margin:0; padding:0}
.planks > li{display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:0 var(--s3); padding:var(--s4) 0 var(--s5); border-top:var(--hair) solid var(--paper-3)}
.planks > li:first-child{border-top:var(--mid) solid var(--ink)}
.planks .n{font-family:var(--voice); font-weight:700; font-size:1.9rem; line-height:.9; letter-spacing:-.04em; color:var(--mark); font-variation-settings:"wdth" 75,"opsz" 48}
.planks h3,.planks .plank-h{font-family:var(--voice); font-weight:700; font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 var(--s3); font-variation-settings:"wdth" 84,"opsz" 48}
.planks p{max-width:40em}
.planks p:last-child{margin-bottom:0}
.planks + .planks > li:first-child{border-top:var(--hair) solid var(--paper-3)}
.planks-big > li{grid-template-columns:minmax(0,1fr); padding:var(--s5) 0 var(--s6)}
@media(min-width:920px){ .planks-big > li{grid-template-columns:15rem minmax(0,1fr); gap:0 var(--s6)} }
.planks-big .n{font-size:clamp(4rem,9vw,8rem); line-height:.8; margin-bottom:var(--s3)}
.planks-big .plank-h{font-size:clamp(2rem,4.4vw,3.6rem); line-height:.92; max-width:14em; font-variation-settings:"wdth" 78,"opsz" 96}
.planks-big > li > div{max-width:44rem}
.planks-big > li > div > p:not(.c-src){font-size:var(--t-lg); line-height:1.5}
.facts{list-style:none; margin:0; padding:0}
.facts li{padding:var(--s3) 0; border-top:var(--hair) solid var(--paper-3); display:grid; gap:var(--s1) var(--s4)}
@media(min-width:600px){ .facts li{grid-template-columns:10rem minmax(0,1fr)} }
.facts b{font-family:var(--voice); font-weight:700; font-size:1.08rem; line-height:1.3; font-variation-settings:"wdth" 88,"opsz" 24}
.invert .planks > li{border-top-color:var(--rule-dk)}
.invert .planks > li:first-child{border-top-color:var(--paper-3)}
.invert .planks h3{color:var(--paper)}

/* ---------- the acts, poster form ---------- */
.acts-band{padding:var(--s8) 0 0}
.acts{list-style:none; margin:0; padding:0; display:grid; gap:0}
@media(min-width:860px){ .acts{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)} }
.acts li{border-top:var(--mid) solid var(--ink); min-width:0}
.acts a{display:grid; grid-template-columns:4.6rem minmax(0,1fr); gap:var(--s1) var(--s4); padding:var(--s4) 0 var(--s5); color:var(--ink); text-decoration:none; height:100%}
@media(min-width:860px){ .acts a{grid-template-columns:1fr; align-content:start} }
.acts .n{grid-row:span 2; font-family:var(--voice); font-weight:700; font-size:clamp(3.4rem,7vw,6.4rem); line-height:.78; letter-spacing:-.05em; color:var(--mark); font-variation-settings:"wdth" 75,"opsz" 96}
@media(min-width:860px){ .acts .n{grid-row:auto; margin-bottom:var(--s3)} }
.acts .h{font-family:var(--voice); font-weight:700; font-size:clamp(1.55rem,2.7vw,2.4rem); line-height:.96; letter-spacing:-.025em; font-variation-settings:"wdth" 80,"opsz" 60; text-wrap:balance}
.acts .go{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--mark); align-self:end}
.acts a:hover .h{color:var(--mark)}
.acts a:focus-visible{outline:2px solid var(--mark); outline-offset:4px}

/* ---------- the report teaser (SITE) ---------- */
.teaser{padding:var(--s8) 0 0; display:grid; gap:var(--s5)}
@media(min-width:1000px){ .teaser{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:end} }
.teaser .poster{font-size:var(--t-mega); line-height:.84; margin-bottom:var(--s3)}
.teaser .deck{margin:0}

/* ---------- page heads (SITE) ---------- */
.page-head{padding:var(--s7) 0 var(--s4)}
.page-head h1{font-size:var(--t-poster); line-height:.9; letter-spacing:-.03em; max-width:12em; margin:0 0 var(--s4); font-variation-settings:"wdth" 78,"opsz" 96; text-wrap:balance}
.page-head h1 em{font-variation-settings:"wdth" 100,"opsz" 96}
.page-head .deck{margin:0}
.opening{padding:var(--s7) 0 var(--s4)}

/* ---------- 03 · the deadline (acid lives here, and in the route band that points to it) ---------- */
.clock-band{padding-bottom:var(--s6)}
.clock-band .page-head{padding-top:var(--s6)}
@media(max-width:600px){ .clock-band .page-head{padding-top:var(--s5)} }
.clock-band h1{color:var(--paper)}
.clock-band .deck{color:var(--paper-2)}
.c-clock{border-top:var(--heavy) solid var(--acid); padding:var(--s4) 0 0; margin-top:var(--s4)}
.c-clock .k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--acid); margin:0 0 var(--s3)}
.c-clock .big{font-family:var(--voice); font-weight:700; font-variation-settings:"wdth" 75,"opsz" 96; font-size:clamp(3.6rem,15vw,10rem); line-height:.84; letter-spacing:-.04em; margin:0; color:var(--acid)}
.c-clock p.say{font-family:var(--read); font-style:italic; font-weight:300; font-size:clamp(1.2rem,2.2vw,1.6rem); font-variation-settings:"opsz" 30; line-height:1.35; margin:var(--s4) 0 0; max-width:30em; color:var(--paper)}
.c-clock .fine{font-family:var(--mach); font-style:normal; font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--acid); margin:var(--s3) 0 0}

/* ---------- 05 · the source note: set as a footnote ----------
   Smaller than any reading text, set off by space and a short hairline, links underlined faintly.
   Several notes in a row share one hairline. */
.c-src{font-family:var(--mach); font-style:normal; font-weight:300; font-size:.6rem; line-height:1.8; letter-spacing:.02em;
  color:var(--quiet); max-width:56em; margin:var(--s4) 0 var(--s4); padding:0; border:0; font-variation-settings:normal}
.c-src::before{content:""; display:block; width:2.4rem; border-top:var(--hair) solid var(--paper-3); margin:0 0 var(--s2)}
.c-src + .c-src{margin-top:calc(-1 * var(--s3))}
.c-src + .c-src::before{display:none}
.c-src b{color:var(--mark); font-weight:400; letter-spacing:.06em}
.c-src a{color:inherit; text-decoration-color:var(--paper-3); text-underline-offset:2px}
.c-src a:hover{color:var(--mark); text-decoration-color:currentColor}
.c-src em{font-style:normal}
.c-src:last-child{margin-bottom:0}

/* ---------- 06 · the concession: a pulled statement, one rule on the left ---------- */
.c-note{margin:var(--s7) 0 0; padding:0 0 0 var(--s4); border-left:var(--mid) solid var(--mark); max-width:44rem}
.body .c-note{margin:var(--s5) 0}
.c-note .k{font-family:var(--mach); font-style:normal; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--mark); margin:0 0 var(--s3)}
.c-note p:not(.c-src):not(.k){font-style:italic; font-weight:300; font-variation-settings:"opsz" 36; font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.35; color:var(--ink-soft); margin:0 0 var(--s3)}
.c-note p:last-child{margin-bottom:0}
.c-note .c-src{font-style:normal; color:var(--quiet)}

/* ---------- 07 · the inversion ---------- */
.invert{background:var(--ink); color:var(--paper-2); margin:var(--s8) 0 0; padding:var(--s7) 0; position:relative; overflow:hidden}
.invert.flush{margin-top:0}
.invert .lbl{color:var(--mark-lit)}
.invert h1,.invert h2,.invert h3{color:var(--paper)}
.invert h1 em,.invert h2 em{color:var(--mark-lit)}
.invert .margin{color:var(--quiet-dk)}
.invert .deck{color:var(--paper-2)}
.invert a{color:var(--mark-lit)}
.invert .movement{padding-top:0}
.turn .poster{margin-bottom:var(--s5)}
.turn-body{max-width:44rem}
.turn-body > p:not(.c-src){font-size:var(--t-lg); line-height:1.55; color:var(--paper)}

/* ---------- 08 · the document row ---------- */
.docs{border-top:var(--mid) solid var(--ink); margin:0; padding:0; list-style:none}
.docs li{border-bottom:var(--hair) solid var(--paper-3)}
.doc{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); padding:var(--s4) 0; align-items:baseline; color:var(--ink); text-decoration:none}
.doc .t{font-family:var(--voice); font-weight:700; font-variation-settings:"wdth" 84,"opsz" 36; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.02em; line-height:1.05}
.doc .m{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--quiet); text-align:right}
a.doc .m::after{content:" →"; color:var(--mark)}
a.doc:hover .t{color:var(--mark)}
a.doc:focus-visible{outline:2px solid var(--mark); outline-offset:3px}
@media(max-width:560px){ .doc{grid-template-columns:1fr; gap:var(--s1)} .doc .m{text-align:left} }

/* ---------- 09 · the recorder: in the engine, deliberately not on any page ---------- */

/* ---------- small pieces ---------- */
.onward{margin:var(--s5) 0 0; font-family:var(--mach); font-size:var(--t-sm); letter-spacing:.04em}
.number + .sheet .onward{margin-top:var(--s4)}
.plank-h{margin-top:0}
.lbl.sub{margin:var(--s4) 0 var(--s2)}
.body blockquote:not(.pull){margin:0 0 var(--s5); padding:0 0 0 var(--s4); border-left:var(--mid) solid var(--ink)}
.body ul:not([class]),.body ol:not([class]){margin:0 0 1.05em; padding-left:1.25em}
.body ul:not([class]) > li,.body ol:not([class]) > li{margin:0 0 .45em}

/* ---------- footer ---------- */
.foot{margin-top:var(--s8); border-top:var(--mid) solid var(--ink); padding:var(--s5) 0 var(--s7)}
.foot-mark{display:block; font-family:var(--voice); font-weight:700; font-size:var(--t-mega); line-height:.84; letter-spacing:-.04em; color:var(--ink); text-decoration:none; margin:0 0 var(--s6); font-variation-settings:"wdth" 75,"opsz" 96; white-space:nowrap}
.foot-mark em{font-style:normal; color:var(--mark); font-variation-settings:"wdth" 100,"opsz" 96}
.foot-grid{display:grid; gap:var(--s5)}
@media(min-width:760px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6)} }
.foot p{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--quiet); margin:0 0 var(--s2)}
.foot .lbl{margin-bottom:var(--s3)}
.foot a{color:var(--ink)}
.foot a:hover{color:var(--mark)}
.sitenav ul{list-style:none; margin:0; padding:0}
.sitenav li{border-top:var(--hair) solid var(--paper-3)}
.sitenav a{display:block; padding:var(--s2) 0; font-family:var(--voice); font-weight:600; font-size:1.15rem; line-height:1.2; letter-spacing:-.01em; text-decoration:none; font-variation-settings:"wdth" 88,"opsz" 24}
.sitenav a[aria-current="page"]{color:var(--mark)}
.foot-preview{margin-top:var(--s5) !important}
.foot-preview a{color:var(--mark) !important}

/* ---------- links & focus ---------- */
a{color:var(--mark); text-decoration-thickness:1px; text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--mark); outline-offset:3px}
.invert a:focus-visible,.hero a:focus-visible{outline-color:var(--mark-lit)}
.skip{position:absolute; left:16px; top:-100px; background:var(--ink); color:var(--paper); font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; padding:var(--s2) var(--s3); z-index:10}
.skip:focus{top:12px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* ==========================================================================================
   COMPONENT 10 · the table. Adopted for the site by ruling 2026-09-17; proposed back to the Engine.
   ========================================================================================== */
.tbl{overflow-x:auto; max-width:100%; margin:0 0 var(--s5)}
.tbl:focus-visible{outline:2px solid var(--mark); outline-offset:3px}
.tbl table{width:100%; border-collapse:collapse; font-size:.94rem; line-height:1.45; font-variation-settings:"opsz" 14}
.tbl[data-cols="3"] table{min-width:34rem}
.tbl[data-cols="4"] table,.tbl[data-cols="5"] table{min-width:46rem}
.tbl caption{text-align:left; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.06em; color:var(--quiet); padding:0 0 var(--s2)}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:var(--hair) solid var(--paper-3)}
.tbl thead th{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); line-height:1.6; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mark); vertical-align:bottom; border-bottom:var(--mid) solid var(--ink)}
.tbl tbody th{font-weight:600}
.tbl .num,.num{text-align:right; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}

/* ---------- a gap left open (fallback only; the pages carry none) ---------- */
.slot{font-family:var(--mach); font-style:normal; font-size:var(--t-xs); color:var(--mark); border-bottom:1px dashed var(--mark)}
.slot .sn,.slot .sd{display:none}

/* ---------- /review/ · preview only (SITE) ---------- */
.rv-tally{list-style:none; margin:0; padding:0; border-top:var(--mid) solid var(--ink)}
.rv-tally li{display:grid; grid-template-columns:5rem 7rem minmax(0,1fr); gap:var(--s3); align-items:baseline; padding:var(--s3) 0; border-bottom:var(--hair) solid var(--paper-3)}
.rv-n{font-family:var(--voice); font-weight:700; font-size:2.6rem; line-height:.9; color:var(--mark); font-variation-settings:"wdth" 75,"opsz" 96}
.rv-w{font-family:var(--mach); font-size:var(--t-sm); letter-spacing:.1em; text-transform:uppercase}
.rv-how{font-size:1rem}
@media(max-width:600px){ .rv-tally li{grid-template-columns:4rem minmax(0,1fr)} .rv-how{grid-column:1 / -1} }
.rv-total{font-family:var(--mach); font-size:var(--t-xs); color:var(--quiet); margin-top:var(--s3)}
.rv-group h2{font-size:var(--t-h2)}
.rv-open{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; vertical-align:.5em; margin-left:var(--s3)}
.rv-list{list-style:none; margin:0; padding:0; border-top:var(--mid) solid var(--ink)}
.rv-item{padding:var(--s4) 0; border-bottom:var(--hair) solid var(--paper-3)}
.rv-head{margin:0 0 var(--s2)}
.rv-head code{font-family:var(--mach); font-size:var(--t-sm); font-weight:600}
.rv-chip{display:inline-block; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--paper); background:var(--mark); padding:1px 7px; margin-left:4px}
.rv-at,.rv-note{font-family:var(--mach); font-size:var(--t-xs); line-height:1.9; color:var(--quiet); margin:0 0 var(--s2); max-width:60em}
.rv-text{margin:var(--s3) 0; padding-left:var(--s4); border-left:var(--mid) solid var(--paper-3); max-width:48rem}
.rv-text h3{font-size:1.3rem}
.rv-text .path{border-left:0}
.rv-text .path .pk{color:var(--ink)} .rv-text .path .pt{color:var(--ink-soft)}
.rv-text .pf-big{color:var(--ink); font-size:2.2rem} .rv-text .pf-s{color:var(--ink-soft)} .rv-text .pf-k{color:var(--quiet)}
.rv-checks{margin:var(--s2) 0 0; padding-left:1.2em; font-family:var(--mach); font-size:var(--t-xs); line-height:1.9}

/* SITE: spacing after the front-page reorder */
.demand .limits:last-child{margin-bottom:0}
.demand-why + .demand-why{margin-top:var(--s5)}

/* SITE: front page, third order. The number opens the page under the deadline band; the proof block sits mid-page. */
main > .number:first-child{margin-top:0; border-top:0; padding-top:var(--s6)}
main > .hero:not(:first-child){margin-top:var(--s8)}
main > .hero + .sheet .acts-band{padding-top:var(--s7)}
main > .hero + .sheet .demand{padding-top:var(--s7)}
main > .hero + .sheet .said{padding-top:var(--s7)}
.demand h1.d{margin-top:0}
.number + .sheet .demand{padding-top:var(--s7)}
.number + .sheet .acts-band{padding-top:var(--s7)}

/* Two clocks (deadline page): a ruled aside under the steps, not a box */
.clocks{border-top:var(--mid) solid var(--ink); margin-top:var(--s6); padding-top:var(--s4); max-width:34em}
.clocks .lbl{margin-bottom:var(--s2)}
.clocks h3{font-family:var(--voice); font-weight:600; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 var(--s3); font-variation-settings:"wdth" 90,"opsz" 24}
.clocks p:last-child{margin-bottom:0}

/* Write the Board: the letters, each one a mail link the reader's own program opens */
.letters{list-style:none; margin:0; padding:0; display:grid; gap:var(--s5)}
.letters li{border-top:var(--mid) solid var(--ink); padding-top:var(--s3); max-width:38em}
.letters h3{font-family:var(--voice); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.15; letter-spacing:-.01em; margin:var(--s2) 0 var(--s2); font-variation-settings:"wdth" 90,"opsz" 24}
.letters p{margin:0 0 var(--s2)}
.letters .mail{margin:var(--s3) 0 0}
.letters .mail a{font-family:var(--mach); font-size:var(--t-sm); letter-spacing:.04em; background:var(--ink); color:var(--acid); text-decoration:none; display:inline-block; padding:var(--s2) var(--s3)}
.letters .mail a:hover{background:var(--ink-2)}
.letters .mail a:focus-visible{outline:3px solid var(--mark); outline-offset:2px}

/* Touch targets in the masthead: small type, but a comfortable box around it */
.top-tel{display:inline-block; padding:6px 0}
.sitenav-link{display:inline-block; padding:4px 0}

/* Touch targets in the masthead: small type, a comfortable box around it */
.top-tel{display:inline-block; padding:6px 0}
.sitenav-link{display:inline-block; padding:4px 0}