/* navsurf.com — The Register
   Palette roles: ground / ink / accent (ultramarine) / flag (rose) / rule
   Two saturated members, ~80° of hue apart, both used at area. */

:root{
  --ground:#EDEFEF;      /* paper */
  --panel:#E4E7EA;       /* alternate ground for dense rows */
  --ink:#0E1116;         /* text, dark bands */
  --accent:#2438C8;      /* ultramarine — chain, links, register head */
  --accent-tint:#8A97FF;
  --flag:#D4266E;        /* rose — disagreement, kickers, alerts */
  --flag-tint:#FFD3E2;
  --rule:#C3C9D1;
  --mute:#565E68;
  --mute-2:#5F6772;
  --mute-on-dark:#A8AEB8;
  --flag-ink:#B21B5B;
  --ink-soft:#3A424C;

  --sans:"Epilogue",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad:clamp(20px,4.2vw,60px);
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.6;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--flag)}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-0.035em;line-height:1.02}
p{margin:0 0 1.15em}
code{font-family:var(--mono);font-size:0.88em;background:var(--panel);padding:0.1em 0.34em;border:1px solid var(--rule)}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--flag);outline-offset:2px}

.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:1040px;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:50;background:var(--ink);color:var(--ground);padding:10px 14px}
.icon{width:1.35em;height:1.35em;flex:0 0 auto;vertical-align:-0.28em}
.mono{font-family:var(--mono)}

/* ---------- kickers, rules, small type ---------- */
.kicker{
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--flag-ink);
  display:flex;align-items:center;gap:9px;margin:0 0 14px;
}
.kicker--accent{color:var(--accent)}
.kicker--on-dark{color:var(--accent-tint)}
.kicker--on-flag{color:#FFE2EC}
.band-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px}
.band-head h2{font-size:clamp(26px,3vw,34px)}
.band-head .sub{font-family:var(--mono);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mute)}
.rule-heavy{height:3px;background:var(--ink)}

/* ---------- masthead + two-tier ledger head ---------- */
.masthead{padding-top:clamp(22px,3vw,40px)}
.masthead-top{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap}
.wordmark{display:inline-block;font-weight:900;letter-spacing:-0.05em;line-height:0.82;
  font-size:clamp(46px,7.4vw,96px);color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.wordmark .dot{color:var(--accent)}
.masthead-strap{font-family:var(--mono);font-size:clamp(12px,1.1vw,13px);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-top:14px}
.chain-device{color:var(--ink);max-width:100%}

.ledger{border-bottom:1px solid var(--ink);display:grid;gap:0;grid-template-columns:1fr}
.ledger > *{padding:16px 26px;border-right:1px solid var(--rule)}
.ledger > *:first-child{padding-left:0}
.ledger > *:last-child{border-right:0;padding-right:0}
.ledger h2{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--flag-ink);margin-bottom:10px;letter-spacing:0.18em}
.ledger-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 34px}
.ledger-link{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-size:16px;padding:4px 0}
.ledger-link:hover{color:var(--accent)}
.ledger-link .n{font-family:var(--mono);font-size:13px;color:var(--mute);padding-top:2px}
.ledger-link .icon{color:var(--accent);width:19px;height:19px;margin-top:1px}
.ledger-list{display:flex;flex-direction:column;gap:5px;font-size:16px}
.ledger-list a{color:var(--ink)}
.ledger-list a:hover{color:var(--accent)}

/* compact header for interior pages */
.site-head{padding-top:22px}
.site-head .rule-heavy{margin-top:14px}
.site-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-head .wordmark{font-size:clamp(34px,4vw,44px)}
.head-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding-bottom:6px}
.head-nav a{color:var(--mute);display:flex;align-items:center;gap:7px}
.head-nav a .icon{width:17px;height:17px}
.head-nav a:hover{color:var(--ink)}
.head-nav--home{font-size:13px;letter-spacing:0.1em;gap:10px 26px;padding-top:16px;padding-bottom:2px}
.head-nav--home a{color:var(--ink)}
.head-nav--home a .icon{color:var(--accent);width:19px;height:19px}
.head-nav--home a:hover{color:var(--accent)}
.head-nav a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--flag);padding-bottom:3px}

/* ---------- lead feature ---------- */
.lead-feature{padding-top:clamp(34px,4vw,56px)}
.lead-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,60px);align-items:end}
.lead-grid h1{font-size:clamp(34px,5.2vw,62px)}
.lead-standfirst{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink-soft);margin:0}
.lead-meta{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);margin-top:18px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- FIGURE SYSTEM — three treatments ---------- */
/* 1. bleed: full-measure band, heavy top rule on the caption */
figure{margin:0}
.fig-bleed{margin:0 0 30px}
.fig-bleed img{width:100%;object-fit:cover;aspect-ratio:16/9}
.fig-bleed figcaption{border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr auto;
  gap:10px 24px;padding-top:11px;align-items:start}

/* 2. plate: photograph on a mat with a hairline frame */
.fig-plate{background:var(--panel);border:1px solid var(--ink);padding:12px;margin:0 0 30px}
.fig-plate img{width:100%;object-fit:cover;aspect-ratio:3/2}
.fig-plate figcaption{padding:11px 2px 2px}

/* 3. offset: image with an accent plate stepped behind it */
.fig-offset{margin:0 0 30px;padding-left:16px}
.fig-offset img{width:100%;object-fit:cover;aspect-ratio:4/3;box-shadow:-16px 16px 0 var(--accent)}
.fig-offset figcaption{padding-top:28px}
.fig-offset.is-flag img{box-shadow:-16px 16px 0 var(--flag)}

/* caption typography: kicker + caption + quieter credit */
figcaption{font-size:16px;line-height:1.45}
.fig-kicker{display:block;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--flag-ink);margin-bottom:6px}
.fig-caption{display:block;max-width:60ch}
.fig-credit{display:block;font-family:var(--mono);font-size:13px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--mute);margin-top:7px}
.fig-bleed .fig-credit{margin-top:0;text-align:right}

/* small inset figure that sits in the reading column */
.fig-inset{max-width:340px;float:right;margin:6px 0 22px 30px}
.fig-inset img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--ink)}
.fig-inset figcaption{font-size:15px;padding-top:9px;border-top:1px solid var(--rule);margin-top:9px}

/* ---------- the register (homepage table) ---------- */
.register{width:100%;border-collapse:collapse;font-size:16px}
.register caption{text-align:left;font-family:var(--mono);font-size:13px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--mute);padding-bottom:10px}
.register th{background:var(--ink);color:var(--ground);font-family:var(--mono);font-weight:700;
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;text-align:left;padding:11px 14px;vertical-align:middle}
.register td{padding:18px 14px;border-bottom:1px solid var(--ink);vertical-align:top}
.register tbody tr:nth-child(odd) td{background:var(--panel)}
.register .r-no{font-family:var(--mono);font-weight:700;font-size:20px;color:var(--accent);width:62px}
.register .r-stage{width:32%}
.register .r-stage a{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;
  letter-spacing:-0.02em;color:var(--ink);margin-bottom:6px}
.register .r-stage a:hover{color:var(--accent)}
.register .r-stage a .icon{color:var(--accent);width:24px;height:24px}
.register .r-stage p{margin:0;line-height:1.45}
.register .r-spec{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink-soft);width:170px}
.register td small{display:block;font-size:15px;line-height:1.4}

/* ---------- bands ---------- */
.band{padding:clamp(44px,5.5vw,76px) 0}
.band--ink{background:var(--ink);color:var(--ground)}
.band--ink a{color:var(--accent-tint)}
.band--ink a:hover{color:var(--flag-tint)}
.band--accent{background:var(--accent);color:#EDEFEF}
.band--accent a{color:#fff;text-decoration:underline}
.band--flag{background:var(--flag);color:#fff}
.band--flag a{color:#fff;text-decoration:underline}
.band--panel{background:var(--panel)}
.band--tight{padding:clamp(26px,3vw,38px) 0}
.band--accent .band-head .sub,.band--flag .band-head .sub{color:rgba(255,255,255,0.72)}
.differ-band{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.statement{font-weight:900;letter-spacing:-0.035em;line-height:1.08;
  font-size:clamp(26px,3.6vw,42px);max-width:24ch;margin:0}
.statement--wide{max-width:44ch}

/* the drawn cutaway */
.cutaway{display:block;width:100%;height:auto;color:#EDEFEF}
.cutaway-note{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(237,239,239,0.72);margin:0}

/* ---------- selection cards (homepage edit) ---------- */
.selection{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,3vw,40px);align-items:stretch}
.card{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.card:hover{color:var(--ink)}
.card:hover h3{color:var(--accent)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .card-body{display:flex;flex-direction:column;flex:1;padding-top:14px}
.card h3{font-size:clamp(20px,2vw,26px);margin-bottom:8px;min-height:2.1em}
.card p{font-size:16px;line-height:1.45;margin:0 0 12px;color:var(--ink-soft)}
.card .card-foot{margin-top:auto;font-family:var(--mono);font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px}
.card .card-foot .icon{width:16px;height:16px;color:var(--accent)}
.card--framed{background:var(--panel);border:1px solid var(--ink);padding:12px}
.card--framed .card-body{padding:14px 4px 4px}
.card--lead h3{font-size:clamp(24px,2.6vw,34px);min-height:0}
.card--lead p{font-size:17px}

/* difference rows */
.diffrow{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:16px 26px;padding:15px 0;
  border-top:1px solid rgba(255,255,255,0.45)}
.diffrow:last-child{border-bottom:1px solid rgba(255,255,255,0.45)}
.diffrow dt{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;text-transform:uppercase}
.diffrow dd{margin:0;line-height:1.45}

/* ---------- colophon / supporters ---------- */
.colophon{background:var(--ink);color:var(--ground);padding:clamp(30px,3.4vw,46px) 0}
.colophon-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid rgba(237,239,239,0.28);padding-bottom:10px;margin-bottom:22px}
.colophon-head h2{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.2em;text-transform:uppercase}
.colophon-head .sub{font-size:15px;color:var(--mute-on-dark)}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,232px);justify-content:space-between;gap:12px}
.sponsor{width:232px;height:64px;display:flex;align-items:center;justify-content:center;
  padding:9px 16px;background:#1A1F27;border:1px solid #2C333D;overflow:hidden}
.sponsor:hover{border-color:var(--accent-tint)}
.sponsor img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-blurb{display:block;font-size:14px;line-height:1.35;color:var(--mute-on-dark)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--mute-on-dark);padding:40px 0 52px;border-top:1px solid #2C333D}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.foot .wordmark{color:var(--ground);font-size:30px}
.foot h2{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ground);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16px}
.foot a{color:var(--mute-on-dark)}
.foot a:hover{color:var(--ground)}
.foot .signature{font-size:16px;line-height:1.45;max-width:34ch;margin:14px 0 0}

/* ---------- article ---------- */
.article-head{padding-top:clamp(30px,4vw,56px)}
.article-head h1{font-size:clamp(32px,4.8vw,58px);max-width:24ch}
.article-head .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.42;color:var(--ink-soft);
  max-width:46ch;margin:18px 0 0;font-weight:500}
.article-meta{display:flex;gap:8px 20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);margin-top:22px;
  border-top:1px solid var(--rule);padding-top:12px}
.prose{max-width:var(--measure);font-size:19px;line-height:1.68}
.prose h2{font-size:clamp(24px,2.4vw,32px);margin:2.1em 0 0.55em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:1.8em 0 0.5em}
.prose a{border-bottom:1px solid rgba(36,56,200,0.35)}
.prose > p:first-of-type{font-size:20px}
.article-body{padding:clamp(30px,3.6vw,50px) 0 0}

/* the trace: notes-for-design material, full width, breaks the column */
.trace{background:var(--ink);color:var(--ground);padding:clamp(26px,3vw,40px) 0;margin:clamp(34px,4vw,52px) 0}
.trace h2{font-size:clamp(20px,2vw,26px);color:#fff;margin-bottom:4px}
.trace-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.trace-head .sub{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-tint)}
.trace-list{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.trace-list li{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:13px 22px 13px 0;
  border-top:1px solid #2C333D;font-size:16px;line-height:1.45}
.trace-list .t-n{font-family:var(--mono);font-size:13px;color:var(--accent-tint)}
.trace-list b{font-weight:800;color:#fff}
.trace-list code{background:#1A1F27;border-color:#2C333D;color:#fff}

/* pull quote */
.pullquote{margin:2em 0;padding:0 0 0 26px;border-left:3px solid var(--flag);max-width:34ch}
.pullquote p{font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:-0.03em;margin:0}
.blockquote{margin:2em 0;padding:0 0 0 26px;border-left:3px solid var(--accent)}
.blockquote p{font-size:20px;line-height:1.45;margin:0 0 10px}
.blockquote cite{font-family:var(--mono);font-size:13px;font-style:normal;color:var(--mute)}
.callout{background:var(--panel);border-top:3px solid var(--accent);padding:20px 22px;margin:2em 0}
.callout p{margin:0;font-size:17px;line-height:1.5}
.note{font-size:16px;line-height:1.5;color:var(--ink-soft);border-left:2px solid var(--rule);padding-left:16px}

/* related + chain nav */
.related{margin:clamp(34px,4vw,52px) 0 0;border-top:2px solid var(--ink);padding-top:16px}
.related h2{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--flag-ink);margin-bottom:14px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:10px 30px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.related-links a{display:flex;align-items:baseline;gap:10px;font-weight:800;font-size:19px;
  letter-spacing:-0.02em;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:9px}
.related-links a:hover{color:var(--accent);border-color:var(--accent)}
.related-links .n{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--mute)}
.further-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.further-grid a{display:block;background:var(--panel);border:1px solid var(--rule);padding:14px 16px;
  font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.further-grid a:hover{border-color:var(--accent);color:var(--accent)}
.chain-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(30px,3.4vw,44px)}
.chain-nav a{display:block;border-top:2px solid var(--ink);padding-top:12px;color:var(--ink)}
.chain-nav a:hover{color:var(--accent)}
.chain-nav .dir{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.chain-nav .ttl{font-weight:800;font-size:20px;letter-spacing:-0.02em}
.chain-nav .next{text-align:right}

/* ---------- category / index pages ---------- */
.cat-head{padding-top:clamp(30px,4vw,52px)}
.cat-head h1{font-size:clamp(38px,5.6vw,72px)}
.cat-head .icon-lg{width:64px;height:64px;color:var(--accent)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--ink)}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:120px 1fr 190px;gap:24px;align-items:start;
  padding:20px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent)}
.cat-list .thumb{width:120px;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--ink)}
.cat-list h3{font-size:23px;margin-bottom:6px}
.cat-list p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.cat-list .meta{font-family:var(--mono);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mute)}
.hub-grid{display:grid;gap:clamp(22px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hub-card{border-top:2px solid var(--ink);padding-top:14px}
.hub-card h2{font-size:26px;display:flex;align-items:center;gap:11px;margin-bottom:8px}
.hub-card h2 .icon{color:var(--accent);width:26px;height:26px}
.hub-card h2 a{color:var(--ink)}
.hub-card h2 a:hover{color:var(--accent)}
.hub-card .blurb{font-size:16px;color:var(--ink-soft);margin-bottom:12px}
.hub-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:17px}
.hub-card li{display:flex;gap:10px}
.hub-card .n{font-family:var(--mono);font-size:13px;color:var(--mute);padding-top:4px}

/* ---------- misc pages ---------- */
.page-body{padding-block:clamp(30px,4vw,52px) clamp(40px,5vw,70px)}
.page-body h1{font-size:clamp(34px,5vw,58px);margin-bottom:20px}
.page-body .prose{font-size:19px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:640px}
.contact-list li{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--rule)}
.contact-list dt,.contact-list .k{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute)}

/* ---------- data components (styleguide + articles) ---------- */
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16px;margin:1.8em 0}
.versus th,.datatable th{background:var(--ink);color:var(--ground);font-family:var(--mono);font-weight:700;
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;text-align:left;padding:10px 12px}
.versus td,.datatable td{padding:13px 12px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.datatable tbody tr:nth-child(odd) td{background:var(--panel)}
.versus td:first-child{font-weight:700}
.statrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:1.8em 0}
.statblock{background:var(--panel);border-top:3px solid var(--flag);padding:16px 18px}
.stat-num{display:block;font-family:var(--mono);font-weight:700;font-size:38px;line-height:1;color:var(--accent)}
.stat-label{display:block;font-size:15px;line-height:1.4;color:var(--ink-soft);margin-top:8px}
.timeline{list-style:none;margin:1.8em 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px 24px;
  padding:14px 0;border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:13px;line-height:1.45;letter-spacing:0.04em;color:var(--accent);font-weight:700}
.t-what{line-height:1.5}
.chart{margin:1.8em 0;overflow-x:auto}
.chart svg{min-width:min(560px,100%)}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15px;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:10px;margin-top:10px}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:1.8em 0}
.gallery figure{background:var(--panel);border:1px solid var(--ink);padding:10px}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{padding-top:9px;font-size:15px}
.map-figure .map-slot{background:var(--panel);border:1px solid var(--ink);aspect-ratio:16/9}

.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:1.8em 0}
.profile-card{background:var(--panel);border:1px solid var(--rule);padding:16px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px;border:1px solid var(--ink)}
.profile-card h3{font-size:21px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--flag);margin-bottom:10px}
.profile-card p{font-size:16px;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:8px;font-size:15px}
.profile-card .p-attr{font-family:var(--mono);font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:0.05em}
.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:1.8em 0}
.org-card{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--rule);padding:12px 14px}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:52px;height:52px;object-fit:contain;background:var(--ink)}
.org-card .org-name{display:block;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.org-card .org-host{display:block;font-family:var(--mono);font-size:13px;color:var(--mute)}
.entity-ref{font-weight:600;white-space:nowrap}

/* CSS-only expander for long lists */
.expander{margin:1.4em 0}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--mono);
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:3px;margin-top:12px}
.expander input:checked ~ label .lbl-more{display:none}
.expander label .lbl-less{display:none}
.expander input:checked ~ label .lbl-less{display:inline}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .differ-band{grid-template-columns:1fr}
  .ledger-chain{grid-template-columns:1fr 1fr}
  .lead-grid{grid-template-columns:1fr}
  .selection{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .register .r-stage{width:auto}
}
@media (max-width:860px){
  body{font-size:17px}
  .prose{font-size:18px}
  .selection{grid-template-columns:1fr}
  .fig-inset{float:none;max-width:100%;margin:0 0 24px}
  .cat-list a{grid-template-columns:96px 1fr}
  .cat-list .meta{grid-column:2}
  .cat-list .thumb{width:96px}
  .differ-band{grid-template-columns:1fr}
  .ledger-chain{grid-template-columns:1fr}
  .diffrow{grid-template-columns:1fr;gap:6px}
  .register,.register tbody,.register tr,.register td{display:block;width:auto}
  .register thead{display:none}
  .register tr{border-bottom:2px solid var(--ink);padding:14px 0}
  .register tbody tr:nth-child(odd) td{background:transparent}
  .register td{border:0;padding:4px 0}
  .register .r-no{font-size:16px}
  .register td[data-label]::before{content:attr(data-label) " · ";font-family:var(--mono);
    font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mute)}
  .register .r-spec{width:auto}
  .chain-nav{grid-template-columns:1fr}
  .chain-nav .next{text-align:left}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .contact-list li{grid-template-columns:1fr;gap:4px}
  .trace-list li{padding-right:0}
}
@media (max-width:520px){
  .sponsor-run{grid-template-columns:1fr}
  .sponsor{width:100%;height:66px}
  .foot-grid{grid-template-columns:1fr}
  .head-nav{font-size:12px;gap:8px 14px}
  .cat-list a{grid-template-columns:1fr}
  .cat-list .meta{grid-column:1}
  .cat-list .thumb{width:100%;aspect-ratio:16/9}
}
@media print{
  .head-nav,.colophon,.chain-nav{display:none}
  body{background:#fff}
}

/* ---------- article grid v2 ---------- */
.article-open{padding-top:clamp(28px,3.6vw,50px)}
.article-open .open-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,4vw,60px);align-items:end}
.article-open h1{font-size:clamp(32px,5vw,62px);letter-spacing:-0.04em}
.article-open .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--ink-soft);font-weight:500;margin:0}
.article-rail{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ground);background:var(--ink);
  padding:11px var(--pad);margin-top:clamp(20px,2.4vw,30px)}
.article-rail .sep{color:var(--accent-tint)}
.article-rail a{color:var(--accent-tint)}

.article-grid{display:grid;column-gap:34px;
  grid-template-columns:minmax(var(--pad),1fr) minmax(0,210px) minmax(0,66ch) minmax(0,210px) minmax(var(--pad),1fr);
  padding-block:clamp(30px,3.6vw,48px) 0}
.article-grid > *{grid-column:3}
.article-grid > .col-wide{grid-column:2 / 5}
.article-grid > .col-full{grid-column:1 / -1}
.article-grid > p,.article-grid > h2,.article-grid > h3,.article-grid > .run{font-size:19px;line-height:1.68}
.article-grid > p{margin:0 0 1.15em}
.article-grid > h2{font-size:clamp(24px,2.4vw,32px);margin:1.6em 0 0.5em;letter-spacing:-0.03em}
.article-grid > h3{font-size:21px;margin:1.4em 0 0.4em}
.article-grid a{border-bottom:1px solid rgba(36,56,200,0.35)}
.article-grid > .col-full,.article-grid > .col-wide{margin-block:clamp(26px,3.2vw,44px)}
.article-grid > .drop::first-letter{float:left;font-family:var(--sans);font-weight:900;font-size:4.1em;
  line-height:0.78;padding:8px 14px 0 0;color:var(--accent)}
.run{margin:0 0 1.15em}
.run p{margin:0 0 1.15em}

/* hero: full bleed, caption plate overlapping the frame */
.fig-full{position:relative;margin:0}
.fig-full img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.fig-full figcaption{position:absolute;left:0;bottom:0;max-width:min(620px,78vw);
  background:var(--ink);color:var(--ground);padding:20px 26px 18px;border-top:3px solid var(--flag)}
.fig-full .fig-kicker{color:var(--flag-tint)}
.fig-full .fig-credit{color:var(--mute-on-dark)}

/* wide figure with a hanging caption in the margin */
.fig-hang{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:26px;align-items:start}
.fig-hang img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-hang figcaption{border-top:2px solid var(--ink);padding-top:11px}

/* portrait plate inside the column, prose wrapping beside it */
.fig-side{float:right;width:min(46%,320px);margin:4px 0 20px 28px;background:var(--panel);
  border:1px solid var(--ink);padding:10px}
.fig-side img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig-side figcaption{padding:10px 2px 2px;font-size:15px;line-height:1.4}

.pullquote-wide{margin:0;display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:26px;align-items:start}
.pullquote-wide .pq-mark{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--flag-ink);border-top:2px solid var(--flag);padding-top:10px}
.pullquote-wide p{margin:0;font-weight:800;font-size:clamp(24px,2.8vw,34px);line-height:1.14;letter-spacing:-0.035em}

.aside-pair{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:26px;align-items:start;
  border-top:1px solid var(--rule);padding-top:14px}
.aside-pair .k{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.aside-pair p{margin:0;font-size:17px;line-height:1.5}

@media (max-width:1080px){
  .article-grid{grid-template-columns:var(--pad) minmax(0,1fr) var(--pad);column-gap:0}
  .article-grid > *{grid-column:2}
  .article-grid > .col-wide{grid-column:2}
  .article-grid > .col-full{grid-column:1 / -1}
  .fig-hang{grid-template-columns:1fr;row-gap:12px}
  .pullquote-wide,.aside-pair{grid-template-columns:1fr;row-gap:10px}
}
@media (max-width:860px){
  .article-open .open-grid{grid-template-columns:1fr}
  .fig-full img{aspect-ratio:4/3}
  .fig-full figcaption{position:static;max-width:none;border-top-width:3px}
  .fig-side{float:none;width:100%;margin:0 0 22px}
  .article-grid > p,.article-grid > h2,.article-grid > h3,.article-grid > .run{font-size:18px}
}

/* image + lifted line, edge to edge — no dead space either side */
.split-band{display:grid;grid-template-columns:1.05fr 1fr;background:var(--ink);color:var(--ground)}
.split-band img{width:100%;height:100%;min-height:clamp(280px,32vw,460px);object-fit:cover;display:block}
.split-band .split-copy{padding:clamp(26px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.split-band .statement{max-width:26ch;color:#fff}
.split-band .fig-kicker{color:var(--flag-tint);margin:0}
.split-band .fig-caption{font-size:16px;line-height:1.45;color:var(--mute-on-dark);max-width:44ch}
.split-band--flag{background:#A61854}
.split-band--flag .fig-kicker{color:#FFE2EC}
.split-band--flag .fig-caption{color:#FFE2EC}
@media (max-width:860px){ .split-band{grid-template-columns:1fr} }

.trace--panel{background:var(--panel);color:var(--ink)}
.trace--panel h2{color:var(--ink)}
.trace--panel .trace-head .sub{color:var(--flag-ink)}
.trace--panel .trace-list li{border-top-color:var(--rule)}
.trace--panel .t-n{color:var(--accent)}
.trace--panel b{color:var(--ink)}
.trace--panel code{background:#fff;border-color:var(--rule);color:var(--ink)}

/* code on dark or coloured grounds */
.split-band code,.band--ink code,.band--accent code,.band--flag code,.fig-full figcaption code,
.colophon code,.article-rail code{
  background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.38);color:#fff}
.trace--panel code{background:#fff;border-color:var(--rule);color:var(--ink)}

/* ---------- article foot: related cards + chain step ---------- */
.related-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:18px}
.related-head .k{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--flag-ink)}
.related-head .sub{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute)}
.related-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));list-style:none;margin:0;padding:0}
.related-cards li{display:flex}
.related-cards a{display:flex;flex-direction:column;gap:9px;width:100%;padding:16px 18px 14px;
  background:var(--panel);border:1px solid var(--ink);color:var(--ink);border-bottom:1px solid var(--ink)}
.related-cards a:hover{background:#fff;border-color:var(--accent);color:var(--ink)}
.related-cards a:hover .rc-title{color:var(--accent)}
.rc-top{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--mute)}
.rc-top .icon{width:18px;height:18px;color:var(--accent)}
.rc-title{font-weight:800;font-size:20px;line-height:1.12;letter-spacing:-0.025em;min-height:2.24em}
.rc-brief{font-size:15px;line-height:1.45;color:var(--ink-soft)}
.rc-go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent)}
.chain-step{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);margin-top:clamp(26px,3vw,40px)}
.chain-step a{display:flex;flex-direction:column;gap:7px;padding:22px 24px;background:var(--ink);color:var(--ground)}
.chain-step a:hover{background:#171C24;color:#fff}
.chain-step a:hover .cs-title{color:var(--accent-tint)}
.cs-dir{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-tint)}
.cs-stage{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute-on-dark)}
.cs-title{font-weight:800;font-size:clamp(20px,2.1vw,26px);line-height:1.08;letter-spacing:-0.03em}
.chain-step .cs-next{align-items:flex-end;text-align:right}
@media (max-width:860px){
  .chain-step{grid-template-columns:1fr}
  .chain-step .cs-next{align-items:flex-start;text-align:left}
  .rc-title{min-height:0}
}

/* wide tables stack on phones */
@media (max-width:700px){
  .datatable,.datatable tbody,.datatable tr,.datatable td,
  .versus,.versus tbody,.versus tr,.versus td{display:block;width:auto}
  .datatable thead,.versus thead{display:none}
  .datatable tr,.versus tr{border-bottom:2px solid var(--ink);padding:12px 0}
  .datatable tbody tr:nth-child(odd) td{background:transparent}
  .datatable td,.versus td{border:0;padding:4px 0;white-space:normal !important}
  .datatable td[data-label]::before,.versus td[data-label]::before{
    content:attr(data-label) " · ";font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--mute)}
  .versus caption{text-align:left}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}





/* sp-domain-override: per-domain, from work/css_override.css */
/* navsurf — no fixed pixel sizes. The earlier version hard-coded height:34px then 42px and the
   mark still did not fit, because a fixed height fights an image whose aspect ratio we do not
   know: a wide wordmark at a fixed height overflows its box, a squat one leaves air.
   Size from the CONTAINER instead and let the image fit itself inside it.

   Design's slot is <div class="sponsor" data-partner><a class="sp-logo"><img></a>
   <a class="sp-domain">…</a></div>, and the parent row had fixed 64px tracks which clipped the
   name once it moved under the mark. */
:is(.sponsor-row,.sponsor-grid,.sponsors,[class*=sponsor]){
  grid-auto-rows:auto!important; grid-template-rows:none!important; align-items:stretch!important;
}
.sponsor[data-partner]{
  display:flex!important; flex-direction:column!important; align-items:flex-start!important;
  gap:10px!important; height:auto!important; min-height:0!important; max-height:none!important;
  overflow:visible!important; padding:14px 16px!important; box-sizing:border-box!important;
}
.sponsor[data-partner] .sp-logo{
  order:1!important; display:block!important; width:100%!important;
}
.sponsor[data-partner] .sp-logo img{
  display:block!important;
  width:100%!important; height:auto!important;          /* fit the box, keep the aspect ratio */
  max-width:100%!important; max-height:none!important;
  object-fit:contain!important;
}
.sponsor[data-partner] .sp-domain{ order:2!important; width:100%!important; }
.sponsor[data-partner] a, .sponsor[data-partner] a:visited{ color:inherit!important; text-decoration:none!important; }

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-run .sponsor.sponsor img{height:39px!important}

/* op-footer-compact: the footer printed 10 rows for 10 link(s) in
   2 list(s) — 595px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 595 -> 438px (26% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(6px,2.08vw,30px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-page-overflow: the page scrolled sideways at 320 — div.hub-card reached
   340px in a 320px screen (+20px) on sections.html, inside
   div.hub-grid. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.hub-grid{grid-template-columns:minmax(0,1fr)!important}
  div.hub-card{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 675px (72 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 3 of "minmax(var(--pad),1fr) minmax(0,210px) minmax(0,66ch) minmax(0,210px) minmax(var(--pad),1fr)" (declared in .article-grid) to ~95 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.article-grid{grid-template-columns:minmax(var(--pad),1fr) minmax(0,210px) min(951px, calc(100% - 556px)) minmax(0,210px) minmax(var(--pad),1fr)!important}
}
@media (min-width:1600px){
  div.article-grid{grid-template-columns:minmax(var(--pad),1fr) minmax(0,210px) min(clamp(951px, 66.042vw, 1141px), calc(100% - 556px)) minmax(0,210px) minmax(var(--pad),1fr)!important}
  div.article-grid > :is(p.drop, p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.02;}
.cat-list h2:where(.rt-h3){font-size: 23px; margin-bottom: 6px;}
/* op-heading-levels:end */