/* SITE v3, Oct 09, 2026: one system for every standing page.
   What it adds to redesign.css (v2): a grouped header that never hides a section, the same page
   shell on every standing page (SI and Militaries and AI included), infographic components that
   carry their sources, and one scale from a phone to a television.
   What it keeps: IBM Plex, the seven finishes and day/night from finish.css, and the accent
   (--stamp) for measured figures, dates and sources only, never for decoration.
   Only standing pages load this file; Bench posts and issued documents load chrome.css alone. */

:root{--r-sm:6px;--r-md:10px;--r-lg:16px;--shell:1180px;--read:760px;--gut:clamp(16px,4vw,32px);
  --f-sans:"IBM Plex Sans",system-ui,sans-serif;--f-serif:"IBM Plex Serif",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;--hdr:60px}

/* The header, menus, footer and page tools are in chrome.css, which every page loads. */

/* ---------- the standing-page shell ----------
   Every standing page is the same object: a hero (title, accent rule, strap, lede) and a reading
   column, with infographics allowed to run wider than the text. */
body.rd:not(.rd-home){padding-left:0!important;padding-right:0!important}
body.rd:not(.rd-home) .wrap{max-width:var(--read);margin:0 auto;padding:0 var(--gut) 40px}
body.rd:not(.rd-home) h1{font:700 clamp(34px,5.4vw,60px)/1.04 var(--f-sans)!important;letter-spacing:-.035em!important;
  margin:clamp(36px,6vw,72px) 0 0;text-wrap:balance;color:var(--ink)}
body.rd:not(.rd-home) .rule{width:56px;height:4px;border-radius:2px;margin:22px 0 14px}
body.rd:not(.rd-home) .strap{gap:8px 10px;letter-spacing:.1em;font-size:11px}
body.rd:not(.rd-home) .strap>span{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--rule-soft);
  border-radius:999px;background:var(--surface);line-height:1}
body.rd:not(.rd-home) .lede{font:400 clamp(18px,2vw,21px)/1.55 var(--f-serif);color:var(--ink);margin:26px 0 0;max-width:62ch}
body.rd:not(.rd-home) section{border-top:1px solid var(--rule-soft);margin-top:clamp(40px,6vw,64px);padding-top:clamp(26px,4vw,36px);scroll-margin-top:calc(var(--hdr) + 16px)}
body.rd:not(.rd-home) h2{font:700 clamp(24px,3vw,32px)/1.15 var(--f-sans)!important;letter-spacing:-.025em!important;margin:0 0 16px}
body.rd:not(.rd-home) h3{font:600 17px/1.3 var(--f-sans);margin:0 0 6px;color:var(--ink)}
body.rd:not(.rd-home) .eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px}
body.rd:not(.rd-home) section>ul,body.rd:not(.rd-home) section>ol:not(.refs){padding-left:1.15em;margin:0 0 14px;max-width:66ch}
body.rd:not(.rd-home) section>ul>li,body.rd:not(.rd-home) section>ol:not(.refs)>li{margin:0 0 10px;color:var(--ink-2)}
body.rd:not(.rd-home) section>ul>li b{color:var(--ink);font-weight:600}
body.rd:not(.rd-home) footer{max-width:none;margin-top:72px}

/* tables: framed, zebra-free, readable; on a phone each row becomes a card (site.js labels the cells) */
body.rd .tablescroll{overflow-x:auto;margin:18px 0;border:1px solid var(--rule-soft);border-radius:var(--r-md);background:var(--surface)}
body.rd:not(.rd-home) table{width:100%;border-collapse:collapse;font:400 14.5px/1.5 var(--f-sans);margin:0}
body.rd:not(.rd-home) th{text-align:left;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--sunk);padding:11px 14px;border-bottom:1px solid var(--rule-soft)}
/* only the header row is shaded: a row-label cell keeps the page's ground, so links in it stay readable */
body.rd:not(.rd-home) tr:not(:first-child)>th{background:none;text-transform:none;letter-spacing:0;font:500 14px/1.45 var(--f-sans);color:var(--ink)}
body.rd:not(.rd-home) td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2)}
body.rd:not(.rd-home) tr:last-child td{border-bottom:0}
body.rd:not(.rd-home) td:first-child{color:var(--ink);font-weight:500}
@media (max-width:640px){
  body.rd .tablescroll.stack{border:0;background:none;overflow:visible}
  body.rd table.stacked,body.rd table.stacked tbody,body.rd table.stacked tr,body.rd table.stacked td{display:block;width:100%}
  body.rd table.stacked{min-width:0!important}
  body.rd table.stacked tr:first-child:has(th),body.rd table.stacked thead{display:none}
  body.rd table.stacked tr{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);margin:0 0 10px;padding:4px 0}
  body.rd table.stacked td{border:0;padding:6px 14px}
  body.rd table.stacked td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font:500 10px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
}

/* references */
body.rd ol.refs{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding-left:2.2em}
body.rd ol.refs li{margin:0 0 7px}
body.rd ol.refs li:target{background:var(--stamp-soft);border-radius:4px;outline:4px solid var(--stamp-soft)}
body.rd .wrap a[href^="#r"]:not(.otp-chips a):not(.otp a):not(.toc a):not([href="#refs"]):not([href="#register"]){font:500 11px/1 var(--f-mono);text-decoration:none;vertical-align:1px;margin-left:1px}

/* ---------- on this page: a rail on wide screens, a chip row on narrow ones (site.js builds it) ---------- */
.otp{position:fixed;top:calc(var(--hdr) + 56px);left:max(var(--gut),calc((100vw - var(--shell))/2 + var(--gut)));width:200px;
  max-height:calc(100vh - var(--hdr) - 90px);overflow:auto;font-size:13px;display:none}
.otp p{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px 12px}
.otp a{display:block;padding:6px 12px;border-left:2px solid var(--rule-soft);color:var(--ink-3);text-decoration:none;line-height:1.35}
.otp a:hover,.otp a.on{color:var(--ink);border-left-color:var(--stamp)}
/* wide screens: a docs layout. The rail on the left, a 932px content area beside it; text keeps its
   reading measure, infographics take the whole area. Nothing slides under the rail. */
@media (min-width:1320px){
  .otp{display:block}
  body.rd.has-otp:not(.rd-home) .wrap{max-width:var(--shell);padding-left:calc(var(--gut) + 248px)}
  body.rd.has-otp:not(.rd-home) .wrap>h1,body.rd.has-otp:not(.rd-home) .wrap>.strap,body.rd.has-otp:not(.rd-home) .wrap>.lede,
  body.rd.has-otp:not(.rd-home) section>p,body.rd.has-otp:not(.rd-home) section>ul,body.rd.has-otp:not(.rd-home) section>h2,
  body.rd.has-otp:not(.rd-home) .callout,body.rd.has-otp:not(.rd-home) section>ol.refs{max-width:var(--read)}
  body.rd.has-otp .bleed{width:auto;left:0;transform:none}
}
.otp-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:26px calc(-1 * var(--gut)) 0;padding:0 var(--gut) 4px}
.otp-chips::-webkit-scrollbar{display:none}
.otp-chips a{flex:0 0 auto;padding:7px 12px;border:1px solid var(--rule-soft);border-radius:999px;background:var(--surface);
  color:var(--ink-2);text-decoration:none;font:500 12.5px/1 var(--f-sans)}
.otp-chips a:hover{color:var(--ink);border-color:var(--rule)}
@media (min-width:1320px){.otp-chips{display:none}}

/* ======================================================================
   INFOGRAPHIC COMPONENTS. Each one states its source in the figure itself.
   ====================================================================== */
.bleed{width:min(var(--shell) - 2*var(--gut),100vw - 2*var(--gut));position:relative;left:50%;transform:translateX(-50%)}
.src{display:inline-block;margin-top:8px;font:400 11.5px/1.45 var(--f-mono);letter-spacing:.05em;color:var(--ink-3)}
.src a{color:inherit}
figure.fig{margin:22px 0}
figure.fig figcaption{margin-top:10px;font:400 12px/1.5 var(--f-mono);color:var(--ink-3);letter-spacing:.02em}

/* KPI tiles: a number, what it counts, where it comes from */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:22px 0}
.kpi{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:18px 18px 14px;display:flex;flex-direction:column}
.kpi .n{font:700 clamp(30px,3.6vw,42px)/1 var(--f-mono);letter-spacing:-.03em;color:var(--stamp);font-variant-numeric:tabular-nums}
.kpi .n small{font-size:.45em;letter-spacing:0;margin-left:3px;color:var(--ink-3)}
.kpi .l{margin-top:10px;font:500 14px/1.4 var(--f-sans);color:var(--ink)}
.kpi .src{margin-top:auto;padding-top:10px}
.kpi.ink .n{color:var(--ink)}

/* steps: a process, left to right on a desk, top to bottom on a phone */
.steps{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:12px;counter-reset:st}
.steps>li{position:relative;background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:18px 16px 16px;counter-increment:st}
.steps>li::before{content:counter(st,decimal-leading-zero);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);font:600 11.5px/1 var(--f-mono);margin-bottom:12px}
.steps>li:not(:last-child)::after{content:"";position:absolute;top:32px;right:-12px;width:12px;height:2px;background:var(--rule)}
.steps h3{font:600 15.5px/1.3 var(--f-sans)!important;margin:0 0 6px!important}
.steps p{font-size:13.5px!important;line-height:1.5;color:var(--ink-2);margin:0!important}
.steps .src{margin-top:8px}
@media (max-width:820px){.steps{grid-template-columns:1fr}.steps>li{padding-left:58px}
  .steps>li::before{position:absolute;left:14px;top:16px;margin:0}
  .steps>li:not(:last-child)::after{top:auto;bottom:-12px;left:28px;right:auto;width:2px;height:12px}}

/* timeline: date, dot, event, sources */
.tl{list-style:none;margin:22px 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:111px;top:6px;bottom:6px;width:2px;background:var(--rule-soft)}
.tl>li{display:grid;grid-template-columns:96px 1fr;gap:0 32px;padding:0 0 22px;position:relative}
.tl>li::before{content:"";position:absolute;left:106px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink-3)}
.tl>li.key::before{background:var(--stamp);border-color:var(--stamp);box-shadow:0 0 0 4px var(--stamp-soft)}
.tl>li.due::before{border-style:dashed;border-color:var(--stamp)}
.tl .d{font:600 12px/1.5 var(--f-mono);color:var(--ink);text-align:right;padding-top:1px}
.tl .d small{display:block;font-weight:400;color:var(--ink-3)}
.tl .e{font-size:15px;line-height:1.55;color:var(--ink-2)}
.tl .e b{color:var(--ink);font-weight:600}
.tl .e .src{display:block;margin-top:3px}
@media (max-width:560px){.tl::before{left:5px}.tl>li{grid-template-columns:1fr;padding-left:26px}.tl>li::before{left:0}
  .tl .d{text-align:left;margin-bottom:2px}}

/* status pills for adoption / status matrices */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;max-width:100%;line-height:1.25;
  font:500 10.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--sunk);color:var(--ink-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}.pill.accent{background:var(--stamp-soft);color:var(--stamp)}

/* status board: rows of who / status / what */
.board{display:grid;gap:8px;margin:20px 0}
.board>div{display:grid;grid-template-columns:minmax(150px,230px) 170px 1fr;gap:6px 18px;align-items:start;
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:14px 16px}
.board .who{font:600 15px/1.35 var(--f-sans);color:var(--ink)}
.board .what{font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:720px){.board>div{grid-template-columns:1fr auto}.board .what{grid-column:1/-1}}

/* two sides */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.duo>div{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:18px}
.duo>div>h3{display:flex;align-items:center;gap:8px}
.duo ul{list-style:none;padding:0;margin:10px 0 0}
.duo li{position:relative;padding:0 0 10px 26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.duo li::before{position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font:700 10px/1 var(--f-mono)}
.duo .yes li::before{content:"✓";background:var(--ok-bg);color:var(--ok)}
.duo .no li::before{content:"✕";background:var(--stop-bg);color:var(--stop)}
.duo .neu li::before{content:"·";background:var(--sunk);color:var(--ink-2)}
.duo .hl{border-top:3px solid var(--stamp)}
@media (max-width:700px){.duo{grid-template-columns:1fr}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr));gap:12px;margin:20px 0}
.cards>*{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:18px;
  color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.cards>a:hover{border-color:var(--rule);transform:translateY(-2px)}
.cards .ic{width:38px;height:38px;border-radius:10px;background:var(--sunk);display:grid;place-items:center;color:var(--ink)}
.cards .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cards h3{font:600 16px/1.3 var(--f-sans)!important;margin:2px 0 0!important}
.cards p{font-size:14px!important;line-height:1.55;color:var(--ink-2);margin:0!important}
.cards .tag{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
.cards .more{margin-top:auto;padding-top:6px;font:500 12px/1 var(--f-mono);color:var(--ink-3)}

/* horizontal bars: label, bar, value. --v is the share of the track, 0 to 1 */
.bars{display:grid;gap:9px;margin:20px 0}
.bars>div{display:grid;grid-template-columns:minmax(110px,180px) 1fr 72px;gap:12px;align-items:center;font-size:14px}
.bars .k{color:var(--ink);font-weight:500}
.bars .t{height:14px;border-radius:7px;background:var(--sunk);overflow:hidden}
.bars .t i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:7px;background:var(--ink-3)}
.bars .hi .t i{background:var(--stamp)}
.bars .v{font:600 13px/1 var(--f-mono);text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:520px){.bars>div{grid-template-columns:1fr 64px}.bars .t{grid-column:1/-1;grid-row:2}}

/* flow: a loop of named boxes with arrows between them */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:22px 0}
.flow>div{flex:1 1 150px;background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:14px 16px}
.flow>i{flex:0 0 28px;display:grid;place-items:center;color:var(--ink-3);font-style:normal;font:500 18px/1 var(--f-mono)}
.flow h3{font:600 15px/1.3 var(--f-sans)!important;margin:4px 0!important}
.flow p{font-size:13.5px!important;line-height:1.5;color:var(--ink-2);margin:0!important}
.flow .tag{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
@media (max-width:760px){.flow{flex-direction:column}.flow>i{flex-basis:26px;transform:rotate(90deg)}}

/* callout */
.callout{margin:20px 0;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--rule-soft);
  border-left:4px solid var(--stamp);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.callout b{color:var(--ink)}
.callout.quiet{border-left-color:var(--rule)}

/* big quote */
.bigq{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--stamp);font:500 clamp(19px,2.2vw,24px)/1.45 var(--f-serif);color:var(--ink)}
.bigq cite{display:block;margin-top:10px;font:400 12px/1.4 var(--f-mono);font-style:normal;color:var(--ink-3)}

/* a band across the page at the end */
.band{margin:56px 0 0;padding:clamp(28px,5vw,48px);border-radius:var(--r-lg);background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.band h2{color:var(--paper)!important;margin:0!important}
.band p{color:color-mix(in srgb,var(--paper) 75%,transparent)!important;margin:8px 0 0!important}
.band .acts{display:flex;gap:10px;flex-wrap:wrap}
.band a.b1{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:9px;background:var(--paper);color:var(--ink);
  text-decoration:none;font:600 14px/1 var(--f-sans)}
.band a.b2{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:9px;border:1px solid color-mix(in srgb,var(--paper) 35%,transparent);
  color:var(--paper);text-decoration:none;font:600 14px/1 var(--f-sans)}
@media (max-width:700px){.band{grid-template-columns:1fr}}

/* details: the long argument, one tap away */
details.more{margin:16px 0;border:1px solid var(--rule-soft);border-radius:var(--r-md);background:var(--surface)}
details.more>summary{cursor:pointer;list-style:none;padding:14px 18px;font:600 14.5px/1.3 var(--f-sans);color:var(--ink);display:flex;justify-content:space-between;gap:12px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font:500 18px/1 var(--f-mono);color:var(--ink-3)}
details.more[open]>summary::after{content:"−"}
details.more>div{padding:0 18px 8px}

/* the crew */
.crew4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;margin:20px 0}
.crew4>div{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:8px}
.crew4 .nm{font:600 17px/1.2 var(--f-sans);color:var(--ink)}
.crew4 .rl{font:400 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crew4 p{font-size:14px!important;line-height:1.55;margin:0!important;color:var(--ink-2)}
.crew4 .may{margin-top:auto;padding-top:8px;border-top:1px dashed var(--rule-soft);font-size:13px;color:var(--ink-2)}
.crew4 .may b{font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stop);margin-right:6px}

/* the home page: a source under every headline number */
.rd-home .stat .src{display:block;margin-top:6px;font-size:10.5px}
.rd-home .stat .src a{color:var(--ink-3)}


@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* home: the four feature cards read as one row; their text is a teaser, the section below has it in full */
.rd-home .feat .card p{font-family:var(--f-sans)!important;font-size:14px!important;letter-spacing:0!important;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rd-home .feat .card p *{font:inherit!important;color:inherit!important;background:none!important;padding:0!important}
.rd-home .steps,.rd-home .flow{margin-top:14px}

/* the home page's long statement: a grid column must be allowed to be narrower than a receipt specimen */
.rd-home .docs>*,.rd-home .prose{min-width:0}
.rd-home .prose pre{white-space:pre-wrap;overflow-wrap:anywhere}
body.rd code{overflow-wrap:anywhere}
.rd-home .fact>*,.rd-home .grid>*{min-width:0}
body.rd .wrap a,body.sh-post a{overflow-wrap:anywhere}


.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.rd:not(.rd-home) .wrap>h2{text-transform:none!important;color:var(--ink)!important;font:700 clamp(24px,3vw,32px)/1.15 var(--f-sans)!important;letter-spacing:-.025em!important;margin:48px 0 14px!important;display:flex;align-items:center;gap:10px}
@media print{.otp,.otp-chips{display:none!important}}

/* figures first: the tiles sit under the title, the introduction follows them */
body.rd:not(.rd-home) .wrap>.kpis{margin:24px 0 8px}
body.rd:not(.rd-home) .wrap>.kpis+.lede,body.rd:not(.rd-home) .wrap>.kpis+.sub-note{margin-top:18px}
/* home on a phone: a shorter hero, so the four numbers are on the first screen */
@media (max-width:640px){.rd-home .hero{padding-top:26px}.rd-home .hero h1{margin-top:14px}.rd-home .hero p.lead{font-size:15.5px;margin-top:12px}
  .rd-home .cta{margin-top:18px}.rd-home .stats{margin-top:28px}}
/* home cards: the teaser is clipped to four lines and can never run into the card's foot */
.rd-home .feat .card p{max-height:6.3em;overflow:hidden!important}
.rd-home .feat .card .more{position:relative;background:var(--surface);padding-top:6px}
/* the strap reads as one row of tags from the left, the cite chip among them */
body.rd:not(.rd-home) .strap{justify-content:flex-start!important}
.rd-home .card .ch{font:600 15px/1.3 var(--f-sans)!important;margin:0!important;letter-spacing:0!important;color:var(--ink)}
.rd-home .stat .src{font-size:11px!important}
.rd-home .spec{background:var(--surface)!important}
body.rd:not(.rd-home) th a{color:var(--ink);text-decoration:underline}
body.rd .dk-viz-stats b{display:block;margin-bottom:6px;line-height:1.1}
body.rd.has-otp:not(.rd-home) .wrap{position:relative}

/* colour for icons, stripes and charts. Red is kept for a measured figure (Colophon), so it is never used here. */
:root{--v1:#0F766E;--v2:#1D4ED8;--v3:#6D28D9;--v4:#A16207;--vz:#CBD5E1}
:root[data-mode="night"]{--v1:#2DD4BF;--v2:#60A5FA;--v3:#A78BFA;--v4:#FACC15;--vz:#475569}
.kpis>.kpi{border-top:3px solid var(--v1)}
.kpis>.kpi:nth-child(4n+2){border-top-color:var(--v2)}.kpis>.kpi:nth-child(4n+3){border-top-color:var(--v3)}.kpis>.kpi:nth-child(4n){border-top-color:var(--v4)}
.card:nth-child(4n+1) .ic{--vc:var(--v1)}.card:nth-child(4n+2) .ic{--vc:var(--v2)}.card:nth-child(4n+3) .ic{--vc:var(--v3)}.card:nth-child(4n) .ic{--vc:var(--v4)}
.card .ic{background:color-mix(in srgb,var(--vc,var(--ink)) 15%,var(--surface));color:var(--vc,var(--ink))}
.viz-bar{display:flex;gap:2px;height:10px;margin-top:12px;border-radius:5px;overflow:hidden;background:var(--sunk)}
.viz-bar i{display:block;flex:0 0 auto;width:var(--w);min-width:3px}
.viz-bar .a,.viz-key .a{--k:var(--v1)}.viz-bar .b,.viz-key .b{--k:var(--v2)}.viz-bar .c,.viz-key .c{--k:var(--v4)}.viz-bar .z,.viz-key .z{--k:var(--vz)}
.viz-bar i{background:var(--k)}
.viz-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font:500 11.5px/1.35 var(--f-mono);color:var(--ink-2)}
.viz-key span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--k);margin-right:5px;vertical-align:-1px}
.kpis.flow>.kpi{position:relative}
.kpis.flow>.kpi+.kpi::before{content:"";position:absolute;left:-9px;top:50%;width:12px;height:12px;transform:translate(-50%,-50%) rotate(45deg);
  border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);background:transparent}
@media (max-width:700px){.kpis.flow>.kpi+.kpi::before{display:none}}
.kpis.flow{column-gap:24px}.kpis.flow>.kpi+.kpi::before{left:-12px;width:9px;height:9px}
.kitcta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:28px 0;padding:16px 18px;border:1px solid var(--rule-soft);border-left:4px solid var(--v2);border-radius:var(--r-md);background:var(--surface)}.kitcta b{font:600 15px/1.3 var(--f-sans);color:var(--ink)}.kitcta span{flex:1 1 280px;color:var(--ink-2);font-size:14px}.kitcta .btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 14px var(--f-sans)}

/* timelines (Oct 12, 2026): newest first everywhere; the date sits clear of the line */
.tl::before{left:123px}.tl>li{gap:0 52px}.tl>li::before{left:118px}
@media (max-width:560px){.tl::before{left:5px}.tl>li{gap:0}.tl>li::before{left:0}.tl .d{text-align:left;margin-bottom:4px}}
/* the step arrows show only when the four tiles sit in one row */
@media (max-width:900px){.kpis.flow>.kpi+.kpi::before{display:none}}
/* page labels wrap instead of clipping on a phone */
body.rd:not(.rd-home) .strap>span{max-width:100%;white-space:normal;line-height:1.35}

/* timelines, Oct 12, 2026 (second pass): the date column is wide enough for its longest date, so the date never runs into the line */
.tl>li{grid-template-columns:124px 1fr;gap:0 44px}.tl .d{white-space:nowrap}
.tl::before{left:145px}.tl>li::before{left:140px}
@media (max-width:560px){.tl>li{grid-template-columns:1fr;gap:0}.tl::before{left:5px}.tl>li::before{left:0}.tl .d{white-space:normal}}
.tl{padding-left:0!important;padding-right:0!important}

/* ===== The Ten House Protocols (Oct 12, 2026): the home centrepiece and the page, from the site's own tokens ===== */
.hpx{position:relative;margin:36px 0 8px;padding:clamp(24px,4.5vw,44px) clamp(18px,4vw,40px);background:var(--surface);border:1px solid var(--rule-soft);border-radius:18px;text-align:center;overflow:hidden}
.hpx::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--v1),var(--v2),var(--v3),var(--v4))}
.hpx .eyebrow{display:inline-flex;gap:8px;align-items:center;justify-content:center;margin:0 0 12px}
.hpx h2{font:700 clamp(28px,4.4vw,44px)/1.08 var(--f-sans)!important;letter-spacing:-.025em!important;margin:0 0 12px!important;color:var(--ink);text-wrap:balance}
.hpx .sub{max-width:64ch;margin:0 auto;font:400 clamp(15px,1.6vw,17px)/1.6 var(--f-sans);color:var(--ink-2)}
.hpx .sub b{color:var(--ink)}
.hp-grid{list-style:none;padding:0;margin:26px 0 22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;text-align:left}
.hp-grid li{--vc:var(--v1)}
.hp-grid li:nth-child(4n+2){--vc:var(--v2)}.hp-grid li:nth-child(4n+3){--vc:var(--v3)}.hp-grid li:nth-child(4n){--vc:var(--v4)}
.hp-grid a{display:flex;flex-direction:column;gap:6px;height:100%;padding:13px 13px 12px;background:var(--paper);border:1px solid var(--rule-soft);border-top:3px solid var(--vc);border-radius:11px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.hp-grid a:hover{transform:translateY(-2px);border-color:var(--vc)}
.hp-grid .no{font:600 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--vc)}
.hp-grid .t{font:600 14px/1.3 var(--f-sans)}
.hp-grid .d{font:400 12.5px/1.45 var(--f-sans);color:var(--ink-2)}
.hp-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:4px 0 22px}
.hp-facts div{display:flex;align-items:baseline;gap:8px;font:400 13.5px/1.35 var(--f-sans);color:var(--ink-2)}
.hp-facts b{font:700 24px/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.hp-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hp-cta a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;font:600 14.5px/1 var(--f-sans);text-decoration:none;border:1px solid var(--rule)}
.hp-cta a.go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hp-cta a:not(.go){color:var(--ink);background:var(--surface)}
.hp-cta a:hover{filter:brightness(1.08)}
@media (max-width:1000px){.hp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-grid .d{display:none}}
@media (prefers-reduced-motion:reduce){.hp-grid a{transition:none}.hp-grid a:hover{transform:none}}
/* the page */
.hp-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.hp-pillars>div{--vc:var(--v1);background:var(--surface);border:1px solid var(--rule-soft);border-top:3px solid var(--vc);border-radius:12px;padding:16px}
.hp-pillars>div:nth-child(2){--vc:var(--v2)}.hp-pillars>div:nth-child(3){--vc:var(--v3)}
.hp-pillars .k{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vc);margin-bottom:8px}
.hp-pillars h3{font:600 16.5px/1.3 var(--f-sans)!important;margin:0 0 6px!important}
.hp-pillars p{font:400 14px/1.55 var(--f-sans)!important;color:var(--ink-2);margin:0!important}
.hp-status{display:grid;gap:8px;margin:18px 0}
.hp-status>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--rule-soft);border-radius:10px}
.hp-status .w{font:600 14.5px/1.35 var(--f-sans);color:var(--ink)}
.hp-status .x{grid-column:1/-1;font:400 13px/1.5 var(--f-sans);color:var(--ink-2)}
.hp-protos{display:grid;gap:12px;margin:20px 0}
.hp-card{--vc:var(--v1);display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--rule-soft);border-left:4px solid var(--vc);border-radius:12px;scroll-margin-top:90px}
.hp-card:nth-child(4n+2){--vc:var(--v2)}.hp-card:nth-child(4n+3){--vc:var(--v3)}.hp-card:nth-child(4n){--vc:var(--v4)}
.hp-card .num{grid-row:1/span 4;font:700 30px/1 var(--f-mono);color:var(--vc);font-variant-numeric:tabular-nums}
.hp-card h3{font:600 18px/1.3 var(--f-sans)!important;margin:2px 0 4px!important;letter-spacing:-.005em!important}
.hp-card .gist{font:400 15px/1.55 var(--f-sans);color:var(--ink);margin:0 0 6px}
.hp-card details{margin:2px 0 6px}
.hp-card summary{cursor:pointer;font:600 13px/1.4 var(--f-sans);color:var(--accent,var(--v2));list-style:none}
.hp-card summary::-webkit-details-marker{display:none}
.hp-card summary::before{content:"+ ";font-family:var(--f-mono)}
.hp-card details[open] summary::before{content:"− "}
.hp-card details>*:not(summary){font-size:15px}
.hp-card details ul{margin:8px 0 0;padding-left:20px}
.hp-card details li{margin:0 0 6px}
.hp-card .chk{font:400 12px/1.5 var(--f-mono);color:var(--ink-2);background:var(--sunk);border-radius:7px;padding:6px 9px;justify-self:start}
.hp-tag{display:inline-block;font:500 10.5px/1 var(--f-mono);padding:3px 6px;border-radius:4px;border:1px solid var(--rule);color:var(--ink-2);vertical-align:3px;margin-left:6px;letter-spacing:.04em}
.hp-ladder{display:grid;gap:6px;margin:14px 0}
.hp-ladder>div{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr);gap:4px 14px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--rule-soft)}
.hp-ladder .r{font:700 20px/1 var(--f-mono);text-align:center}
.hp-ladder .o{font:600 14px/1.4 var(--f-sans);color:var(--ink)}
.hp-ladder .s{font:400 13.5px/1.45 var(--f-sans);color:var(--ink-2)}
.hp-ladder .ra .r{color:var(--ok)}.hp-ladder .rb .r{color:var(--v2)}.hp-ladder .rc .r{color:var(--v4)}
.hp-ladder .rd{background:var(--warn-bg);border-color:transparent}.hp-ladder .rd .r,.hp-ladder .rd .s b{color:var(--warn)}
@media (max-width:620px){.hp-ladder>div{grid-template-columns:36px minmax(0,1fr)}.hp-ladder .s{grid-column:2}}
.hp-scale{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:16px 0 6px;border:1px solid var(--rule-soft)}
.hp-scale span{display:grid;place-items:center;font:600 11px/1 var(--f-mono);color:var(--paper);white-space:nowrap;overflow:hidden}
.hp-scale-key{position:relative;height:16px;font:400 11.5px/1.3 var(--f-mono);color:var(--ink-2);margin:0 0 16px}.hp-scale-key span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.hp-scale-key span:first-child{transform:none}.hp-scale-key span:last-child{transform:translateX(-100%)}
.hp-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.hp-points div{background:var(--surface);border:1px solid var(--rule-soft);border-radius:10px;padding:10px 12px;font:400 13px/1.4 var(--f-sans);color:var(--ink-2)}
.hp-points b{display:block;font:700 22px/1.1 var(--f-mono);color:var(--ink);margin-bottom:4px}
.hp-jm{position:relative;margin:20px 0;padding:22px;border:1.5px dashed var(--v3);border-radius:14px;background:var(--surface)}
.hp-jm .k{font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v3);margin-bottom:8px}
.hp-jm h3{font:700 26px/1.1 var(--f-sans)!important;margin:0 0 8px!important;letter-spacing:-.02em!important}
.hp-jm p{font:400 15.5px/1.6 var(--f-sans)!important;margin:0 0 10px!important}
.hp-jm .plan{font-size:14px!important;color:var(--ink-2)}
@media (max-width:760px){.hp-pillars{grid-template-columns:1fr}.hp-card{grid-template-columns:40px minmax(0,1fr);padding:16px 14px}.hp-card .num{font-size:24px}}
/* contrast: the coloured numbers are mixed toward the ink, and the scale's bands are tints under dark text */
.hp-grid .no,.hp-card .num,.hp-pillars .k,.hp-jm .k{color:color-mix(in srgb,var(--vc,var(--v3)) 72%,var(--ink))}
.hp-jm .k{--vc:var(--v3)}
.hp-scale span{color:var(--ink)!important}
.hp-scale .b0{background:color-mix(in srgb,var(--vz) 70%,var(--surface))}.hp-scale .b1{background:color-mix(in srgb,var(--v4) 34%,var(--surface))}
.hp-scale .b2{background:color-mix(in srgb,var(--v4) 18%,color-mix(in srgb,var(--v2) 18%,var(--surface)))}.hp-scale .b3{background:color-mix(in srgb,var(--v2) 30%,var(--surface))}
.hp-scale .b4{background:color-mix(in srgb,var(--v3) 30%,var(--surface))}.hp-scale .b5{background:color-mix(in srgb,var(--v1) 34%,var(--surface))}
.hp-scale .b6{background:var(--ink);color:var(--paper)!important}

/* home, Oct 12, 2026: the receipt is the promise, the protocols are how it is kept; the protocols sit between the headline and the figures */
.rd-home .hero .kept{margin:14px auto 0;font:500 14px/1.4 var(--f-sans)}
.rd-home .hero .kept a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--v2);padding-bottom:1px}
.rd-home .hero .kept a::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:linear-gradient(135deg,var(--v1),var(--v3))}
.rd-home .hpx{margin-top:30px}
.rd-home .hero.hero-figs{padding:4px 0 8px}.rd-home .hero.hero-figs .stats{margin-top:30px}

/* one right edge, Oct 13, 2026: everything in the reading column ends where the text ends. The cards, the rules
   between sections, the reader ask and the sitemap used to run wider than the paragraphs (868px against 760px beside
   the rail; past the column on narrower screens, where .bleed broke out of it), and the lede, the lists and the notes
   stopped short of it, so the right edge moved from block to block. The column is now the text's measure, and every
   block fills it. */
body.rd:not(.rd-home) .bleed{width:auto;left:0;transform:none}
body.rd:not(.rd-home) .wrap :is(p,ul,ol,li,dl,dd,figure,.callout){max-width:none}
@media (min-width:1320px){
  body.rd.has-otp:not(.rd-home) .wrap{padding-right:calc(var(--shell) - var(--read) - var(--gut) - 248px)}
}

/* the home page, Oct 13, 2026: one right edge here too. The home shell is 1152px, but the reader ask, the sitemap and
   the identity block were set to the 1180px shell of the standing pages, so they ran past it on both sides; and inside
   it the program statement was capped at 720px beside its contents rail, its paragraphs shorter still, the figures at
   820px and the section notes at 55ch. All of them now end where the publication rows and the cards end. The hero
   stays centred. */
.rd-home .prose,.rd-home .prose :is(p,ul,ol,li,dl,dd,figure),.rd-home .sechead p,.rd-home .stats{max-width:none}
.rd-home .rs{max-width:none;margin-left:max(20px,calc((100% - 1112px) / 2));margin-right:max(20px,calc((100% - 1112px) / 2))}
body.rd-home .sf,body.rd-home footer{max-width:none!important;padding-left:max(20px,calc((100% - 1112px) / 2))!important;padding-right:max(20px,calc((100% - 1112px) / 2))!important}
/* phone: a key row's label and its explanation stack, so the explanation no longer runs past the right edge */
@media (max-width:560px){.we .key div{flex-direction:column;align-items:flex-start;gap:4px}}