/* oujouer.com — Direction A: the screen carries it */

:root{
  /* palette — 5 members, each with a job */
  --ground:#16181C;      /* page ground */
  --ink:#0B0C0F;         /* dense bands, footer, logo wells */
  --paper:#ECE7DC;       /* type on ground; panel/mat ground */
  --accent:#C8207A;      /* magenta — ended, withdrawn; area fills */
  --accent-ink:#FF6BAF;  /* magenta at text contrast on the ground */
  --secondary:#2FCF8A;   /* phosphor green — running, emulated, links */
  --rule:#2A2D33;
  --muted:#3A3E45;
  --paper-dim:#7A7468;

  --display:Chivo,'Helvetica Neue',Arial,sans-serif;
  --text:'Work Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --t-mono:12px;
  --t-body:18px;
  --t-lead:21px;
  --gut:clamp(18px,4vw,28px);
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--text);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--paper);text-decoration:none}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:-.022em;line-height:1.04;margin:0}
h3,h4{font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1.05em}
figure{margin:0}
svg{flex:none}
/* section icons: one drawing system, sized by context */
.kicker svg,.band__head h2 svg,.notes__head h2 svg,.eyebrow svg{width:19px;height:19px}
.page-head .kicker svg{width:22px;height:22px}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--secondary);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:70ch;margin-inline:auto;padding-inline:var(--gut)}
.kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.kicker--dim{color:rgba(236,231,220,.55)}
.eyebrow{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.11em;text-transform:uppercase;color:rgba(236,231,220,.55);margin:0}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--secondary);color:var(--ink);padding:10px 16px;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}

/* ── masthead + contents-line index ───────────────────────────── */
.masthead{border-bottom:1px solid var(--rule)}
.masthead__rule{height:5px;background:var(--accent)}
.masthead__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px;padding:24px 0 20px}
.brand{display:flex;align-items:center;gap:clamp(14px,2vw,22px);color:var(--secondary)}
.brand__name{font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,88px);line-height:.86;letter-spacing:-.03em;color:var(--paper);margin:0}
.brand svg{position:relative;top:5px}
@media (max-width:720px){.brand svg{top:3px}}
.brand a{color:inherit}
.brand a:hover{color:inherit}
.brand a:hover .brand__name{color:var(--secondary)}
.mast-line{font-size:16px;line-height:1.45;color:rgba(236,231,220,.68);margin:0;max-width:34ch;border-left:1px solid var(--muted);padding-left:16px}
.caret{animation:blink 1.15s step-end infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

.index{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding:0 0 20px}
.index__all{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-left:auto}
.index__group{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 12px}
.index__sec{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--secondary)}
.index__sec svg{width:19px;height:19px}
.index__entry{font-size:15px;color:rgba(236,231,220,.86)}
.index__entry[aria-current]{color:var(--paper);border-bottom:2px solid var(--accent)}
.index__div{width:1px;height:13px;background:var(--accent);flex:none;align-self:center}
@media (max-width:720px){
  .index{gap:2px 20px;padding-bottom:12px}
  .index__all{margin-left:0}
  .index__group{gap:0 14px;width:100%}
  .index__sec,.index__all,.index__entry{padding:10px 0}
  .index__div{display:none}
}

/* ── bands ─────────────────────────────────────────────────────── */
.band{padding:clamp(56px,7vw,104px) 0 0}
.band--ink{background:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(48px,6vw,72px) 0;margin-top:clamp(56px,7vw,104px)}
.band--flush{padding-top:0}
.band__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;border-bottom:2px solid var(--paper);padding-bottom:14px}
.band__head h2,.band__head h3{font-size:clamp(23px,2.4vw,34px)}
.band__title{font-size:clamp(26px,3vw,40px);margin:0 0 18px}

.quiet-line{font-family:var(--display);font-weight:900;font-size:clamp(26px,4.4vw,62px);line-height:1.04;letter-spacing:-.03em;margin:0;max-width:27ch}
.quiet-line em{font-style:normal;color:var(--accent-ink)}
.src{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;color:rgba(236,231,220,.42);margin:24px 0 0}

/* opener */
.opener__img{position:relative;width:100%;height:min(76vh,700px);background:var(--ink);overflow:hidden}
.opener__img img{width:100%;height:100%;object-fit:cover}
.opener__plate{background:var(--paper);color:var(--ink);max-width:820px;margin-top:clamp(-96px,-6vw,-40px);position:relative;padding:clamp(24px,3vw,36px);border-top:5px solid var(--accent)}
.opener__plate .kicker{color:var(--accent)}
.opener__plate h2{font-size:clamp(27px,3.6vw,52px);margin:0 0 16px}
.opener__plate h2 a{color:inherit}
.opener__plate h2 a:hover{color:var(--accent)}
.opener__plate p{font-size:17px;line-height:1.55;color:#3A3E45;margin:0 0 18px;max-width:62ch}
.cap-row{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-top:18px}
.cap-row .cap{font-style:italic;font-size:15px;color:rgba(236,231,220,.7);margin:0;max-width:56ch}

.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:3px}
.more--light{color:var(--secondary)}

/* two-up seconds */
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,48px);padding-top:26px}
.second h3{font-size:clamp(22px,2.3vw,30px);margin:14px 0 10px}
.second h3 a{color:inherit}
.second p{font-size:16.5px;line-height:1.6;color:rgba(236,231,220,.78);margin:0 0 14px}

/* ledger — the switch-off record: rows, not cards */
.ledger{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.ledger__row{display:grid;grid-template-columns:62px minmax(150px,.9fr) 210px minmax(0,1.9fr);align-items:baseline;gap:4px 20px;padding:13px 0 14px 14px;border-top:1px solid var(--rule);border-left:3px solid var(--accent)}
.ledger__row.is-on{border-left-color:var(--secondary)}
.ledger__row:hover{background:var(--ink)}
.ledger__n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(236,231,220,.42)}
.ledger__name{font-size:clamp(18px,1.55vw,23px)}
.ledger__name a{color:inherit}
.ledger__row:hover .ledger__name a{color:var(--secondary)}
.ledger__state{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--accent-ink)}
.ledger__row.is-on .ledger__state{color:var(--secondary)}
.ledger__dot{width:8px;height:8px;flex:none;background:currentColor}
.ledger__row.is-on .ledger__dot{border-radius:50%}
.ledger__note{font-size:15px;line-height:1.5;color:rgba(236,231,220,.72);margin:0}
@media (max-width:900px){
  .ledger__row{grid-template-columns:62px minmax(0,1fr);gap:4px 16px;padding-bottom:16px}
  .ledger__n{grid-row:1}
  .ledger__name,.ledger__state,.ledger__note{grid-column:2}
}

/* register */
.register{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.register__cell{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);padding:24px 24px 26px}
.register__cell h4{font-size:21px;margin:0 0 8px}
.register__cell h4 a{color:inherit}
.register__cell p{font-size:15.5px;line-height:1.55;color:rgba(236,231,220,.74);margin:0}
.status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent-ink);margin:0 0 10px}
.status--live{color:var(--secondary)}
.dashrule{display:flex;justify-content:flex-end;padding-top:14px;color:var(--muted)}

/* tinted strip */
.strip{position:relative;background:var(--ink);margin-top:clamp(56px,7vw,104px)}
.strip__img{position:relative;height:min(80vh,620px)}
.strip__img img{width:100%;height:100%;object-fit:cover}
.strip__scrim{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(11,12,15,0) 40%,rgba(11,12,15,.42) 68%,rgba(11,12,15,.78) 100%),
  linear-gradient(to bottom,rgba(200,32,122,.14) 0%,rgba(200,32,122,.24) 44%,rgba(200,32,122,.62) 74%,rgba(200,32,122,.8) 100%)}
.strip__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,36px) 0}
.strip__body h2{font-size:clamp(24px,3.4vw,46px);margin:0 0 14px;max-width:25ch}
.strip__body p{font-size:16.5px;line-height:1.5;color:rgba(236,231,220,.94);margin:0;max-width:58ch}
.strip__body .kicker{color:var(--paper)}

/* taxonomy / drawn diagram — four equal columns across the full width */
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 30px;border-top:2px solid var(--secondary);padding-top:28px}
.quad__item{display:flex;gap:16px;align-items:flex-start;padding-right:8px}
.quad__item h4{font-size:clamp(19px,1.6vw,23px);margin:0 0 8px}
.quad__item p{font-size:16px;line-height:1.55;color:rgba(236,231,220,.74);margin:0}
.quad__item svg{width:32px;height:37px}
@media (max-width:900px){.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.quad{grid-template-columns:minmax(0,1fr)}}

/* compact section index — one row of six */
.hub{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:2px solid var(--paper)}
.hub__cell{padding:18px 22px 20px 18px;border-right:1px solid var(--rule);display:block}
.hub__cell:last-child{border-right:0}
.hub__cell h4{font-size:17px;margin:9px 0 5px}
.hub__cell p{font-size:14px;line-height:1.45;color:rgba(236,231,220,.62);margin:0}
.hub__cell svg{width:24px;height:24px;color:var(--secondary)}
.hub__cell:hover{background:var(--ink)}
.hub__cell:hover h4{color:var(--secondary)}
.hub__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--accent-ink)}
@media (max-width:1080px){.hub{grid-template-columns:repeat(3,minmax(0,1fr))}.hub__cell{border-bottom:1px solid var(--rule)}.hub__cell:nth-child(3n){border-right:0}}
@media (max-width:620px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}.hub__cell:nth-child(2n){border-right:0}}

/* ── figure system ─────────────────────────────────────────────── */
.article-figure{margin:38px 0}
.article-figure img{width:100%}
.article-figure figcaption{padding-top:14px}
.cap{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.4;color:var(--paper);margin:0 0 5px}
.credit{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(236,231,220,.4);margin:0}

/* 1 — bleed: breaks the measure, caption plate INSIDE the frame */
.article-figure.is-bleed{margin:52px 0;max-width:none;width:100%;position:relative}
.article-figure.is-bleed img{height:min(64vh,600px);object-fit:cover;display:block}
.article-figure.is-bleed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to bottom,rgba(22,24,28,0),rgba(22,24,28,.72));pointer-events:none}
.article-figure.is-bleed figcaption{position:absolute;z-index:2;bottom:26px;left:max(var(--gut),calc(50% - var(--maxw)/2 + var(--gut)));width:min(560px,calc(100% - var(--gut)*2));background:rgba(22,24,28,.9);border-top:2px solid var(--accent);padding:15px 20px 16px}
.article-figure.is-bleed .cap{max-width:52ch;font-size:16.5px}

/* 2 — mat: paper mat, drawn corner brackets, ink caption plate on the print */
.article-figure.is-mat{background:var(--paper);padding:18px;position:relative}
.article-figure.is-mat .frame{position:relative}
.article-figure.is-mat .frame svg{position:absolute;width:18px;height:18px;color:var(--accent)}
.article-figure.is-mat .frame svg:nth-of-type(1){top:-9px;left:-9px}
.article-figure.is-mat .frame svg:nth-of-type(2){top:-9px;right:-9px}
.article-figure.is-mat .frame svg:nth-of-type(3){bottom:-9px;left:-9px}
.article-figure.is-mat .frame svg:nth-of-type(4){bottom:-9px;right:-9px}
.article-figure.is-mat figcaption{position:absolute;z-index:2;left:18px;bottom:18px;width:min(520px,calc(100% - 36px));background:rgba(22,24,28,.92);border-top:2px solid var(--accent);padding:14px 18px 15px}
.article-figure.is-mat .cap{color:var(--paper);max-width:48ch}
.article-figure.is-mat .credit{color:rgba(236,231,220,.5)}

/* 3 — inset: sits IN the column, prose wraps beside it, caption banded inside */
.article-figure.is-inset{float:right;width:min(300px,42%);margin:8px 0 22px 28px;position:relative}
.article-figure.is-inset img{display:block;aspect-ratio:4/5;object-fit:cover}
.article-figure.is-inset figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:11px 14px 12px;background:rgba(22,24,28,.92);border-top:2px solid var(--accent)}
.article-figure.is-inset .cap{font-size:14px;line-height:1.35}
.article-figure.is-inset .credit{font-size:10.5px}
@media (max-width:620px){.article-figure.is-inset{float:none;width:100%;margin:30px 0}}

/* 4 — tint: full-bleed band, magenta over the image, caption reversed out */
.article-figure.is-tint{position:relative;margin:52px 0}
.article-figure.is-tint .frame{position:relative;background:var(--ink)}
.article-figure.is-tint img{height:min(50vh,440px);object-fit:cover}
.article-figure.is-tint .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(200,32,122,.18),rgba(200,32,122,.72))}
.article-figure.is-tint figcaption{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 20px;max-width:var(--maxw);margin:0 auto}
.article-figure.is-tint .cap{color:var(--paper);max-width:52ch}
.article-figure.is-tint .credit{color:rgba(236,231,220,.72)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:38px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{padding-top:10px}
.gallery .cap{font-size:14.5px}

/* ── article page ──────────────────────────────────────────────── */
.art-head{padding:clamp(40px,5vw,64px) 0 0}
.art-head h1{font-size:clamp(34px,5.4vw,74px);line-height:.96;margin:0 0 22px;max-width:24ch}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:rgba(236,231,220,.5);border-top:1px solid var(--rule);padding-top:14px;margin-top:26px}
.art-meta strong{color:var(--secondary);font-weight:400}
.art-body{padding-top:8px;max-width:calc(790px + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut);counter-reset:sec}
.art-body>.is-bleed,.art-body>.is-tint,.art-body>.notes{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.art-body p{font-size:var(--t-body);line-height:1.7;color:rgba(236,231,220,.88)}
.art-body>h2{font-size:clamp(23px,2.5vw,32px);margin:60px 0 20px;padding-top:26px;border-top:1px solid var(--rule)}
.art-body>h2::before{counter-increment:sec;content:"\a7 " counter(sec,decimal-leading-zero);display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:14px}
.art-body>h2:first-child{margin-top:26px}
@media (min-width:1180px){
  .art-body>h2{position:relative}
  .art-body>h2::before{position:absolute;left:-96px;top:28px;margin:0}
}
.art-body>h2+p{font-size:19.5px;line-height:1.62;color:var(--paper)}
.art-body>h2:first-child+p::first-letter{float:left;font-family:var(--display);font-weight:900;font-size:64px;line-height:.78;padding:6px 12px 0 0;color:var(--secondary)}
/* figures and numerals — the data the prose leans on */
.num{font-family:var(--mono);font-size:.9em;font-weight:500;letter-spacing:.01em;color:var(--paper);white-space:nowrap;background:linear-gradient(to top,rgba(200,32,122,.42) 0 .16em,transparent .16em)}
.art-body .notes h2,.art-body .band h2{border-top:0;padding-top:0;margin:0;max-width:none}
.art-body .notes h2::before,.art-body .band h2::before{display:none}
.art-body a{color:var(--secondary);border-bottom:1px solid rgba(47,207,138,.4)}
.art-body a:hover{border-bottom-color:var(--secondary)}
.art-body ul,.art-body ol{padding-left:22px}
.art-body li{margin-bottom:8px}
.art-body::after{content:"";display:table;clear:both}

.lead{font-size:var(--t-lead);line-height:1.5;color:rgba(236,231,220,.86);margin:0 0 8px;max-width:60ch}
.pullquote{margin:52px auto;padding:4px 0 4px 26px;border-left:5px solid var(--accent)}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,30px);line-height:1.16;letter-spacing:-.02em;color:var(--paper);margin:0}
.blockquote{margin:36px auto;padding:22px 26px;background:var(--ink);border-left:5px solid var(--secondary)}
.blockquote p{font-size:19px;line-height:1.55;margin:0 0 12px}
.blockquote cite{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(236,231,220,.55);font-style:normal}
.callout{margin:36px auto;padding:22px 24px;background:var(--paper);color:var(--ink)}
.callout p{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.42;color:var(--ink);margin:0}
.callout::before{content:"";display:block;width:40px;height:4px;background:var(--accent);margin-bottom:14px}
.note{font-size:15.5px;line-height:1.6;color:rgba(236,231,220,.66);border-left:2px solid var(--muted);padding-left:16px;margin:26px auto}

/* notes-for-design material: full-width interruptions, no side rail */
.notes{margin:52px 0;background:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(30px,4vw,44px) 0}
.notes__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:22px}
.notes__head h2{font-size:clamp(19px,2vw,26px);margin:0}
.notes__head h2::before{display:none}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:clamp(88px,11vw,140px) 1fr;align-items:baseline;gap:4px clamp(18px,3vw,40px);padding:15px 0 16px;border-top:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;color:var(--accent-ink)}
.t-what{font-size:17px;line-height:1.5;color:rgba(236,231,220,.86);max-width:72ch}
@media (max-width:560px){.timeline li{grid-template-columns:1fr}}

.termlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:0 clamp(24px,4vw,56px)}
.termlist li{display:grid;grid-template-columns:clamp(120px,14vw,200px) 1fr;gap:4px clamp(16px,2vw,28px);padding:15px 0 16px;border-top:1px solid var(--rule)}
@media (max-width:560px){.termlist li{grid-template-columns:1fr}}
.termlist dfn,.term{display:block;font-family:var(--display);font-weight:700;font-size:16px;font-style:normal;letter-spacing:-.01em;color:var(--paper);margin:0}
.termlist p{font-size:16px;line-height:1.55;color:rgba(236,231,220,.76);margin:0}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:36px 0}
.statblock{padding:18px 22px 20px 0;border-top:2px solid var(--accent)}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.03em}
.stat-label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(236,231,220,.55);margin-top:10px}

table.versus,table.datatable{width:100%;border-collapse:collapse;margin:34px 0;font-size:16px}
table.versus caption,table.datatable caption{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,231,220,.5);padding-bottom:12px}
table.versus th,table.datatable th{text-align:left;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:rgba(236,231,220,.6);border-bottom:2px solid var(--paper);padding:10px 16px 10px 0;vertical-align:bottom}
table.versus td,table.datatable td{border-bottom:1px solid var(--rule);padding:14px 16px 14px 0;vertical-align:top;line-height:1.5;color:rgba(236,231,220,.84)}
table.versus tbody th{font-family:var(--display);font-size:16px;text-transform:none;letter-spacing:-.01em;color:var(--paper);border-bottom:1px solid var(--rule)}
.table-scroll{overflow-x:auto;overflow-y:hidden}

.chart{margin:36px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart.donut svg{max-width:300px}
.chart.bar svg{max-width:760px}
.chart figcaption{padding-top:14px}
.chart .cap{font-size:15.5px}
.c-bar{fill:var(--secondary)}
.c-bar--end{fill:var(--accent)}
.c-label{font-family:var(--mono);font-size:11px;fill:rgba(236,231,220,.72)}
.c-value{font-family:var(--mono);font-size:11px;fill:var(--paper)}
.c-axis{stroke:var(--rule);stroke-width:1}

/* cards / references */
.profile-grid,.org-grid,.further-grid{display:grid;gap:0;margin:32px 0}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{display:flex;flex-direction:column;padding:22px 24px 24px 0;border-top:1px solid var(--rule)}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:19px;margin:0 0 4px}
.profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
.profile-card p{font-size:15.5px;line-height:1.55;color:rgba(236,231,220,.74);margin:0 0 12px}
.profile-card .p-links{margin-top:auto;font-family:var(--mono);font-size:12px}
.profile-card .p-attr{font-family:var(--mono);font-size:10.5px;color:rgba(236,231,220,.4);margin:6px 0 0}
.profile-card.no-photo{border-top:2px solid var(--secondary)}

.org-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{display:flex;align-items:center;gap:14px;padding:16px 20px 16px 0;border-top:1px solid var(--rule);min-height:78px}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;background:var(--ink);flex:none}
.org-card .org-mark{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--secondary)}
.org-card .org-mark svg{width:22px;height:22px}
.org-name{display:block;font-family:var(--display);font-weight:700;font-size:16.5px}
.org-host{display:block;font-family:var(--mono);font-size:11.5px;color:rgba(236,231,220,.5);margin-top:3px}
.entity-ref{color:var(--secondary);border-bottom:1px solid rgba(47,207,138,.4);white-space:nowrap}

.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:2px solid var(--paper)}
.further-grid a{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px 0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.further-grid a span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.further-grid a strong{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.015em}

.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:flex;flex-direction:column;gap:7px;padding:18px 22px 20px 0}
.related-links .r-sec{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.related-links .r-title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.22;letter-spacing:-.015em}
.related-links:empty{display:none}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 20px;padding:22px 0 24px;align-items:baseline}
.cat-list a:hover{color:inherit}
.cat-list .c-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.cat-list .c-title{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,27px);line-height:1.1;letter-spacing:-.02em}
.cat-list a:hover .c-title{color:var(--secondary)}
.cat-list .c-brief{grid-column:2;font-size:16.5px;line-height:1.55;color:rgba(236,231,220,.7);margin:0;max-width:70ch}
@media (max-width:560px){.cat-list a{grid-template-columns:1fr}.cat-list .c-brief{grid-column:1}}

/* expander for long lists */
.expander{margin:0}
.expander summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);padding:16px 0;border-top:1px solid var(--rule)}
.expander summary::-webkit-details-marker{display:none}
.expander summary::after{content:" +"}
.expander[open] summary::after{content:" –"}

/* ── supporters ────────────────────────────────────────────────── */
.supporters{margin-top:clamp(56px,7vw,104px);border-top:1px solid var(--rule);padding:clamp(40px,5vw,64px) 0 0}
.supporters__tier{margin-bottom:34px}
.supporters__tier .eyebrow{margin-bottom:16px}
.sponsor-row{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{
  flex:0 0 440px;max-width:100%;
  display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:18px;
  background:var(--ink);border:1px solid var(--rule);padding:16px;min-height:88px;
}
.sponsor:hover{border-color:var(--secondary)}
.sponsor img{width:200px;height:46px;max-width:100%;object-fit:contain;object-position:left center;background:transparent}
.sponsor-name{font-family:var(--text);font-weight:500;font-size:13px;line-height:1.35;letter-spacing:-.005em;color:rgba(236,231,220,.82)}
.sponsor.feat{flex:0 0 440px;background:#101216;border-color:var(--muted)}
@media (max-width:520px){
  .sponsor{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0}
  .sponsor img{width:100%;height:44px;object-position:left center}
}

/* ── footer — one compact bar ───────────────────────────────────── */
.foot{margin-top:clamp(48px,6vw,88px);background:var(--ink);border-top:1px solid var(--rule)}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:26px 0}
.foot__brand{display:flex;align-items:center;gap:12px;color:var(--secondary)}
.foot__brand span{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--paper)}
.foot__secs{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__secs a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,231,220,.72)}
.foot__secs a svg{width:15px;height:15px;color:var(--secondary)}
.foot__secs a:hover{color:var(--secondary)}
.foot__end{border-top:1px solid var(--rule);padding:13px 0 18px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(236,231,220,.42)}
.foot__end a{color:rgba(236,231,220,.62)}

/* ── simple pages ──────────────────────────────────────────────── */
.page-head{padding:clamp(40px,5vw,72px) 0 0}
.page-head h1{font-size:clamp(38px,6vw,78px);line-height:.94;margin:0 0 20px}
.prose{padding-top:8px}
.prose p{max-width:68ch}
.prose h2{font-size:clamp(21px,2.2vw,28px);margin:40px 0 14px}
.prose a{color:var(--secondary);border-bottom:1px solid rgba(47,207,138,.4)}
.contact-list{list-style:none;margin:26px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.contact-list li{border-top:1px solid var(--rule);padding:18px 22px 20px 0}
.contact-list b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px;font-weight:400}

/* ── phone pass ─────────────────────────────────────────────────── */
@media (max-width:620px){
  .hub__n,.credit,.article-figure .credit,.article-figure.is-inset .credit,.foot__secs a,.foot__end{font-size:11.5px}
  .more{padding-bottom:9px;margin-top:2px}
  .cat-list a{padding:16px 0 18px}
  .register__cell{padding:22px 20px 24px}
  .foot__secs{gap:2px 20px}
  .foot__secs a{padding:8px 0}
  .foot__end a{display:inline-block;padding:6px 0}
  .expander summary{padding:14px 0}
}

/* 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}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.page-head{padding-inline:var(--gut)}
}

/* op-nav-collapse: this nav printed 299px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "centre-rule", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (18px measured) the button carries the build's
   gutter (clamp(18px,4vw,28px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:940px){
  .menu-open{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:8px 6px;letter-spacing:.16em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-open-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .index{display:none}
  .menu-open-c:checked ~ .index{display:flex}
  .wrap:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .index)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1411px at 390, 15% of the whole page. Two columns bring it to
   803px (43% shorter). Checked before writing: no new overflow, smallest mark still
   136px wide, longest blurb 1 lines, tile heights 81-161px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-row (3 tiles), .sponsor-row (9 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 790px (81 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(790px + var(--gut) * 2) (declared in .art-body) to ~102 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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.art-body{max-width:min(1049px, 100%)!important}
}
@media (min-width:1600px){
  div.art-body{max-width:min(clamp(1049px, 72.847vw, 1259px), 100%)!important}
  div.art-body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.ledger__row{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h3:where(.rt-h4){font-family: var(--display); font-weight: 900; letter-spacing: -0.022em; line-height: 1.04; margin: 0px;}
h1:where(.rt-h2){font-family: var(--display); font-weight: 900; letter-spacing: -0.022em; line-height: 1.04; margin: 0px;}
h3:where(.rt-h4){font-weight: 700; letter-spacing: -0.012em;}
.band__head h1:where(.rt-h2) svg{width: 19px; height: 19px;}
.band__head h1:where(.rt-h2){font-size: clamp(23px, 2.4vw, 34px);}
.opener__plate h1:where(.rt-h2){font-size: clamp(27px, 3.6vw, 52px); margin: 0px 0px 16px;}
.opener__plate h1:where(.rt-h2) a{color: inherit;}
.opener__plate h1:where(.rt-h2) a:hover{color: var(--accent);}
.strip__body h1:where(.rt-h2){font-size: clamp(24px, 3.4vw, 46px); margin: 0px 0px 14px; max-width: 25ch;}
.quad__item h3:where(.rt-h4){font-size: clamp(19px, 1.6vw, 23px); margin: 0px 0px 8px;}
.hub__cell h3:where(.rt-h4){font-size: 17px; margin: 9px 0px 5px;}
.hub__cell:hover h3:where(.rt-h4){color: var(--secondary);}
h1.rt-h2{font-family: var(--display); font-weight: 900; letter-spacing: -0.022em; line-height: 1.04; margin: 0px;}
.opener__plate h1.rt-h2{font-size: clamp(27px, 3.6vw, 52px); margin: 0px 0px 16px;}
.opener__plate h1.rt-h2 a{color: inherit;}
.opener__plate h1.rt-h2 a:hover{color: var(--accent);}
h2.rt-h4.rt-h4{height:17.6719px;margin-top:9px;margin-bottom:5px;font-size:17px;font-weight:700;line-height:17.68px}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px){
  div.wrap.art-head{padding-left:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1440px) / 2)));padding-right:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1440px) / 2)))}
}
@media (min-width:901px){
  div.wrap.page-head{padding-left:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1440px) / 2)));padding-right:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1440px) / 2)))}
}
/* op-tablet-gutter:end */
@media (min-width:660px) and (max-width:1439px){.sponsor-row.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(440px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-row.sponsor-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:640px) and (max-width:1399px){.sponsor-row:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}