/* ExtraSys — The Decision Room. Putty wall, warm board, marker ink.
   Hand (Gochi Hand) versus terminal (IBM Plex Mono) throughout. */

:root{
  --wall:#ccc7bb; --paper:#f6f5f0; --white:#fff; --panel:#f0efe9;
  --ink:#303236; --grey:#54585e; --soft:#6d7075; --label:#8a8d93;
  --rule:#c6c1b4; --hair:#e3e0d8; --edge:#dedad0;
  --green:#1e7a4a; --green-d:#1a5c39; --green-w:#eef5ef; --red:#bf3b2b; --dark:#26282b;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --hand:'Gochi Hand',cursive;
  --measure:70ch; --gut:clamp(18px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 17px/1.75 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;letter-spacing:-.6px;font-weight:600;text-wrap:pretty}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
figure{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:#d9ecdf}

/* ---------- shell ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.board{background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),0 1px 0 #b8b3a6;border-radius:3px}
.kicker{font:500 11px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--label);margin:0 0 12px}
.kicker--green{color:var(--green)}
.marker{font:400 clamp(16px,1.5vw,19px)/1.35 var(--hand);color:var(--red);transform:rotate(-1deg);display:inline-block}
.marker--green{color:var(--green)}
.hand-h{font-family:var(--hand);font-weight:400;letter-spacing:0}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.masthead__in{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.wordmark{font:600 26px/1 var(--sans);letter-spacing:-.9px;color:var(--ink);text-decoration:none}
.wordmark:hover{text-decoration:none;color:var(--green-d)}
.strap{font:400 12px/1.4 var(--mono);color:var(--soft)}
.mast-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.mast-nav a{font:500 13.5px/1 var(--sans);color:var(--ink);padding:8px 2px;border-bottom:2px solid transparent}
.mast-nav a:hover{color:var(--green-d);border-bottom-color:var(--rule);text-decoration:none}
.mast-nav a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green)}
.mast-nav .nav-all{font-family:var(--mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--soft)}

/* ---------- homepage opener ---------- */
.opener{padding:clamp(34px,5vw,64px) 0 0}
.opener__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,44px)}
.opener h1{font:400 clamp(38px,5.4vw,74px)/1.06 var(--hand);letter-spacing:0;color:var(--ink)}
.opener h1 em{font-style:normal;color:var(--green);border-bottom:3px solid var(--green)}
.standing{font-size:16.5px;line-height:1.7;color:var(--grey);border-left:3px solid var(--rule);padding-left:18px}
.standing strong{color:var(--ink);font-weight:600}

/* ---------- hero photo ---------- */
.hero{margin:clamp(20px,3vw,34px) 0 0;position:relative;overflow:hidden;background:var(--dark)}
.hero img{width:100%;height:clamp(280px,46vw,620px);object-fit:cover}
.hero__cap{position:absolute;left:0;bottom:0;right:0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;background:linear-gradient(to top,rgba(20,22,24,.86),rgba(20,22,24,0));padding:56px 22px 18px;color:#e9e8e4;font:400 12.5px/1.6 var(--mono)}
.hero__cap b{font-weight:500;color:#fff;letter-spacing:1.5px;text-transform:uppercase;font-size:11px}

/* ---------- decision map ---------- */
.forks{padding:clamp(30px,4vw,52px) 0 0}
.forks__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:6px}
.forks__head h2{font:400 clamp(26px,3vw,40px)/1.1 var(--hand)}
.forks__lede{max-width:82ch;color:var(--grey);font-size:15.5px;margin:0 0 26px}
.fork-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.fork{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--ink);border-radius:2px;padding:16px 18px;color:var(--ink);min-height:100%}
.fork:hover{text-decoration:none;box-shadow:0 2px 0 var(--ink);transform:translateY(-2px)}
.fork:nth-child(odd){transform:rotate(-.5deg)}
.fork:nth-child(even){transform:rotate(.45deg)}
.fork:nth-child(odd):hover,.fork:nth-child(even):hover{transform:translateY(-2px)}
.fork__no{font:500 11px/1 var(--mono);color:var(--label);margin-bottom:9px;letter-spacing:1px}
.fork__q{font:600 19px/1.2 var(--sans);letter-spacing:-.4px}
.fork__blurb{font-size:13.5px;line-height:1.55;color:var(--soft);margin:8px 0 0}
.fork__count{margin-top:auto;padding-top:12px;font:500 11px/1 var(--mono);color:var(--green);letter-spacing:.5px}
.fork--exit{border-style:dashed;border-color:var(--green);background:var(--green-w)}
.fork--exit .fork__no{color:var(--green)}
.fork--exit .fork__q{color:var(--green-d)}

/* ---------- flagship ---------- */
.flagship{margin-top:clamp(30px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:hidden}
.flagship__img{position:relative;background:var(--dark)}
.flagship__img img{width:100%;height:100%;min-height:320px;object-fit:cover}
.flagship__body{padding:clamp(24px,3vw,44px)}
.flagship__body h2{font:600 clamp(30px,3.6vw,46px)/1.05 var(--sans);letter-spacing:-1.4px;margin-bottom:14px}
.flagship__body h2 a{color:var(--ink)}
.flagship__body h2 a:hover{color:var(--green-d);text-decoration:none}
.flagship__dek{font-size:18.5px;line-height:1.6;color:var(--grey)}
.flagship__meta{font:500 12px/1.6 var(--mono);color:var(--label);letter-spacing:.4px}
.flagship__note{margin-top:16px}

/* ---------- feed + rail ---------- */
.feed-wrap{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:clamp(22px,3vw,44px);padding:clamp(30px,4vw,52px) 0 0;align-items:start}
.band{margin-bottom:clamp(22px,3vw,38px);padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px)}
.band__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:20px}
.band__head h2{font:400 clamp(24px,2.6vw,34px)/1.1 var(--hand)}
.band__head h2 a{color:var(--ink)}
.band__head h2 a:hover{color:var(--green-d);text-decoration:none}
.band__blurb{flex:1 1 320px;font-size:14.5px;line-height:1.6;color:var(--soft);margin:0}
.band__all{font:500 11.5px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--edge);border-radius:2px;overflow:hidden;height:100%;color:var(--ink)}
.card:hover{text-decoration:none;border-color:var(--ink)}
.card__img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--panel)}
.card__in{display:flex;flex-direction:column;flex:1;padding:14px 16px 15px;gap:7px}
.card__t{font:600 17px/1.28 var(--sans);letter-spacing:-.4px;min-height:2.56em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .card__t{color:var(--green-d)}
.card__d{font-size:14px;line-height:1.55;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.card__m{margin-top:auto;padding-top:10px;font:500 11px/1.5 var(--mono);color:var(--label);letter-spacing:.3px}

/* ---------- sponsor rail (homepage only) ---------- */
.rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}
.rail__intro{padding:20px 20px 18px}
.rail__intro h2{font:400 25px/1.1 var(--hand)}
.rail__intro p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--soft)}
.rail-group{padding:16px 18px 18px}
.rail-group__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:500 11.5px/1.3 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--label);border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:14px}
.rail-group__label span{color:var(--green);text-transform:none;letter-spacing:.3px;font-size:11.5px}
.sponsors{display:grid;grid-template-columns:1fr;gap:12px}
.sponsor{display:grid;grid-template-columns:1fr;gap:9px;align-items:center;padding:12px;background:var(--white);border:1px solid var(--edge);border-radius:2px;color:var(--ink)}
.sponsor:hover{text-decoration:none;border-color:var(--rule)}
.sponsor img{width:100%;max-width:100%;height:auto;max-height:38px;object-fit:contain;background:var(--dark);border-radius:2px;padding:9px 14px;aspect-ratio:auto}
.sponsor-blurb{font-size:13px;line-height:1.5;color:var(--soft);display:block}
.sponsor-blurb:empty{display:none}
.sponsor.feat{grid-template-columns:minmax(140px,1fr) minmax(0,1.15fr);gap:14px;padding:14px}
.sponsor.feat img{max-height:46px;padding:11px 16px}
.sponsor.feat .sponsor-blurb{min-height:2.9em}
.rail__foot{font:400 11.5px/1.6 var(--mono);color:var(--label);padding:0 4px}

/* ---------- footer ---------- */
.foot{margin-top:clamp(34px,5vw,64px);background:var(--dark);color:#c8cacb}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;padding:40px 0 26px}
.foot h3{font:500 11.5px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#8f9294;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:#e4e5e5;font-size:14.5px}
.foot a:hover{color:#7fcfa3}
.foot__mark{font:600 24px/1 var(--sans);letter-spacing:-.8px;color:#fff;margin-bottom:12px;display:block}
.foot__say{font-size:14px;line-height:1.65;color:#a9acad;max-width:46ch}
.disclaimer{border-top:1px solid #3a3d40;padding:18px 0 30px;font:400 12.5px/1.7 var(--mono);color:#8f9294;display:flex;flex-wrap:wrap;gap:8px 26px}

/* ---------- category page ---------- */
.cat-hero{padding:clamp(28px,4vw,52px) clamp(22px,3vw,44px);margin-top:clamp(20px,3vw,34px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:end}
.cat-hero h1{font:400 clamp(34px,4.6vw,60px)/1.05 var(--hand)}
.cat-hero p{font-size:17px;line-height:1.7;color:var(--grey);margin:0}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:first-child{border-top:0}
.cat-list a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;padding:18px 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none}
.cat-list img{width:112px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--edge)}
.cat-list .cl-t{font:600 20px/1.3 var(--sans);letter-spacing:-.5px;display:block}
.cat-list a:hover .cl-t{color:var(--green-d)}
.cat-list .cl-d{font-size:14.5px;line-height:1.6;color:var(--soft);margin:5px 0 0;max-width:78ch}
.cat-list .cl-m{font:500 11px/1.5 var(--mono);color:var(--label);letter-spacing:.3px;margin-top:7px;display:block}
.section-nav{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0 0}
.section-nav a{font:500 12px/1 var(--mono);letter-spacing:.5px;border:1px solid var(--rule);border-radius:2px;padding:9px 13px;background:var(--paper);color:var(--ink)}
.section-nav a:hover{border-color:var(--ink);text-decoration:none}
.section-nav a[aria-current="page"]{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- article ---------- */
.art-hero{margin-top:clamp(18px,2.6vw,30px);position:relative;background:var(--dark);overflow:hidden}
.art-hero img{width:100%;height:clamp(230px,34vw,460px);object-fit:cover;opacity:.92}
.art-head{padding:clamp(26px,3.4vw,48px) clamp(22px,3vw,44px) clamp(20px,2.6vw,34px)}
.art-head .crumb{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;border:1px solid var(--rule);background:var(--white);padding:8px 13px;margin-bottom:20px;font:500 11.5px/1 var(--mono);color:var(--soft)}
.art-head .crumb a{color:var(--green)}
.art-head .crumb i{font-style:normal;color:var(--rule)}
.art-head h1{font:600 clamp(32px,4.4vw,58px)/1.05 var(--sans);letter-spacing:-1.6px;max-width:22ch}
.art-meta{margin-top:18px;font:500 12.5px/1.6 var(--mono);color:var(--label);letter-spacing:.4px}
.art-body{padding:0 clamp(22px,3vw,44px) clamp(28px,3.4vw,48px)}
.art-body>*{max-width:var(--measure);margin-inline:auto}
.art-body h2{font:600 clamp(23px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.8px;margin:2.1em auto .7em}
.art-body h2:first-child{margin-top:0}
.art-body p{font-size:18px;line-height:1.82;color:#2c2e32}
.art-body p a{border-bottom:1px solid rgba(30,122,74,.35)}
.art-body strong{font-weight:600;color:var(--ink)}
.lead{font-size:21px;line-height:1.6;color:var(--grey);font-weight:400;margin-bottom:1.5em}
.note{font-size:15px;line-height:1.65;color:var(--soft);border-left:3px solid var(--rule);padding-left:16px}
.callout{background:var(--green-w);border:1px solid #cfe2d6;padding:22px 26px;margin:2em auto}
.callout p{margin:0;font-size:17px;line-height:1.7;color:#22412f}
.pullquote{margin:2.1em auto;border-left:3px solid var(--green);padding:2px 0 2px 20px}
.pullquote p{margin:0;font:500 clamp(21px,2.2vw,26px)/1.45 var(--sans);letter-spacing:-.6px;color:var(--ink)}
.blockquote{margin:2em auto;background:var(--white);border:1px solid var(--edge);padding:22px 26px}
.blockquote p{margin:0 0 10px;font-size:17.5px;line-height:1.7}
.blockquote cite{font:500 12.5px/1.5 var(--mono);color:var(--label);font-style:normal}
.article-figure{margin:2.4em auto;max-width:960px}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption,.chart figcaption,.gallery figcaption{font:400 13px/1.6 var(--mono);color:var(--soft);padding-top:10px;border-top:1px solid var(--hair);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2.2em auto;max-width:960px}
.map-figure{margin:2.2em auto;max-width:960px}
.map-slot{aspect-ratio:16/9;background:var(--panel);border:1px dashed var(--rule)}

/* board panels — the interruptions */
.board-panel{max-width:1000px;margin:2.6em auto;background:var(--white);border:2px solid var(--ink);border-radius:2px;padding:24px 26px 26px;position:relative}
.board-panel--alt{background:var(--panel)}
.board-panel__label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;font:500 11px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--label);margin-bottom:6px}
.board-panel h3{font:600 21px/1.25 var(--sans);letter-spacing:-.5px;margin-bottom:16px}
.panel-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.panel-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.62;color:#2c2e32}
.panel-list .bullet{font:600 13px/1.7 var(--mono);color:var(--green)}
.panel-list b{font-weight:600}
.board-panel .marker{margin-top:16px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:2.2em auto;max-width:1000px}
.statblock{background:var(--white);border:1px solid var(--edge);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:600 30px/1 var(--sans);letter-spacing:-1.2px;color:var(--ink)}
.stat-label{font-size:13.5px;line-height:1.5;color:var(--soft)}
.versus,.datatable{margin:2.2em auto;max-width:1000px;background:var(--white);border:1px solid var(--rule);font-size:15.5px}
.versus th,.datatable th{text-align:left;background:var(--panel);border-bottom:1px solid var(--rule);padding:12px 16px;font:500 11px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--label)}
.versus td,.datatable td{border-top:1px solid var(--hair);padding:14px 16px;vertical-align:top;line-height:1.6}
.versus td:first-child{width:34%;font-weight:600}
.timeline{list-style:none;margin:2.2em auto;max-width:1000px;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--hair)}
.timeline li:first-child{border-top:0}
.t-when{font:500 12px/1.5 var(--mono);letter-spacing:.4px;color:var(--green);text-transform:uppercase}
.t-what{font-size:16px;line-height:1.62}
.chart{margin:2.2em auto;max-width:1000px;background:var(--white);border:1px solid var(--edge);padding:20px}
.chart svg{width:100%;height:auto;display:block}

/* related / further */
.related{max-width:1000px;margin:0 auto;padding-top:8px;border-top:1px solid var(--rule)}
.related h2{font:400 26px/1.1 var(--hand);margin:22px 0 16px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links li:first-child{border-top:0}
.related-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;font:600 17.5px/1.35 var(--sans);letter-spacing:-.4px;color:var(--ink)}
.related-links a span{font:500 11px/1.5 var(--mono);color:var(--label);letter-spacing:.4px;white-space:nowrap}
.related-links a:hover{color:var(--green-d);text-decoration:none}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2em auto;max-width:1000px}
.further-grid a{background:var(--white);border:1px solid var(--edge);padding:16px 18px;font:600 16.5px/1.35 var(--sans);letter-spacing:-.3px;color:var(--ink)}
.further-grid a:hover{border-color:var(--ink);text-decoration:none}
.org-grid,.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:2em auto;max-width:1000px}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:var(--white);border:1px solid var(--edge);padding:14px 16px;color:var(--ink)}
.org-logo{width:96px;max-height:34px;object-fit:contain;background:var(--dark);padding:7px 10px;border-radius:2px}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font:600 16px/1.3 var(--sans);display:block}
.org-host{font:400 12px/1.5 var(--mono);color:var(--label)}
.profile-card{background:var(--white);border:1px solid var(--edge);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%}
.p-role{font:500 12px/1.4 var(--mono);color:var(--green);margin:0}
.profile-card p{font-size:15px;line-height:1.6;margin:0}
.p-links a{font-size:14px}
.p-attr{font:400 12px/1.5 var(--mono);color:var(--label)}
.entity-ref{font-weight:500;border-bottom:1px solid rgba(30,122,74,.4)}

/* hub + simple pages */
.hub{padding:clamp(24px,3vw,44px);margin-top:clamp(20px,3vw,34px)}
.hub h1{font:400 clamp(32px,4vw,52px)/1.06 var(--hand);margin-bottom:10px}
.hub__lede{max-width:76ch;color:var(--grey);margin-bottom:26px}
.hub-sec{margin-top:30px}
.hub-sec h2{font:600 20px/1.2 var(--sans);letter-spacing:-.5px;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:6px}
.simple{padding:clamp(26px,3.4vw,48px);margin-top:clamp(20px,3vw,34px);max-width:860px}
.simple h1{font:400 clamp(32px,4.4vw,54px)/1.05 var(--hand);margin-bottom:16px}
.simple p{font-size:17.5px;line-height:1.75;color:#2c2e32;max-width:68ch}
.simple h2{font:600 22px/1.25 var(--sans);letter-spacing:-.6px;margin:1.8em 0 .6em}
.err{padding:clamp(40px,7vw,96px) clamp(24px,3vw,48px);margin-top:clamp(20px,3vw,34px);text-align:center}
.err h1{font:400 clamp(40px,6vw,72px)/1.05 var(--hand);margin-bottom:14px}
.err p{font-size:18px;color:var(--grey)}
.btn{display:inline-block;margin-top:10px;border:2px solid var(--ink);background:var(--white);padding:11px 18px;font:600 14px/1 var(--sans);color:var(--ink)}
.btn:hover{background:var(--ink);color:#fff;text-decoration:none}

/* styleguide */
.sg-sec{padding:clamp(20px,2.6vw,34px);margin-bottom:20px}
.sg-sec>h2{font:400 28px/1.1 var(--hand);margin-bottom:4px}
.sg-sec>p.kicker{margin-bottom:18px}
.sg-note{font:400 12.5px/1.6 var(--mono);color:var(--label);margin-bottom:18px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .feed-wrap{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .sponsors{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
}
@media (max-width:860px){
  .opener__grid,.flagship,.cat-hero{grid-template-columns:minmax(0,1fr)}
  .opener__grid{gap:22px}
  .flagship__img img{min-height:220px;height:clamp(200px,42vw,300px)}
  .art-head h1{max-width:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .masthead{position:static}
  .masthead__in{gap:10px 16px}
  .mast-nav{margin-left:0;width:100%;gap:4px 14px}
  .strap{width:100%;order:3}
  .art-body p{font-size:17px}
  .lead{font-size:19px}
  .cat-list a{grid-template-columns:82px minmax(0,1fr);gap:14px}
  .cat-list img{width:82px}
  .cat-list .cl-t{font-size:17.5px}
  .timeline li,.panel-list li{grid-template-columns:minmax(0,1fr);gap:5px}
  .sponsors{grid-template-columns:1fr}
  .sponsor,.sponsor.feat{grid-template-columns:minmax(0,1fr)}
  .board-panel{padding:20px}
  .versus td:first-child{width:auto}
  .hero__cap{padding:40px 16px 14px;font-size:11.5px}
  .versus th,.versus td,.datatable th,.datatable td{padding:11px 11px;font-size:14.5px;overflow-wrap:anywhere}
  .versus,.datatable{font-size:14.5px}
  .board-panel__label{gap:4px;flex-direction:column}
}

/* ---------- lede: hero + overlapping board ---------- */
.lede{position:relative;padding-bottom:clamp(8px,1.4vw,18px)}
.hero{width:100vw;margin-left:calc(50% - 50vw);margin-top:0}
.hero img{height:clamp(300px,52vw,660px)}
.hero__cap{padding-inline:max(var(--gut),calc(50vw - 640px + var(--gut)));padding-bottom:clamp(58px,8vw,124px);padding-top:110px}
.hero__cap b{border-left:3px solid var(--green);padding-left:10px}
.lede__board{position:relative;z-index:2;margin-top:clamp(-96px,-7vw,-40px);display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(22px,3.6vw,52px);align-items:end;padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,44px)}
.lede__board h1{font:400 clamp(36px,5.2vw,72px)/1.05 var(--hand);letter-spacing:0}
.lede__board h1 em{font-style:normal;color:var(--green);border-bottom:3px solid var(--green)}
.lede__term{margin:20px 0 0;font:400 13px/1.6 var(--mono);color:var(--soft);border-left:2px solid var(--green);padding-left:13px;max-width:52ch}
@media (max-width:860px){.lede__board{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:-34px}}

/* ---------- category worksheet ---------- */
.worksheet{margin-top:22px;padding:clamp(20px,2.6vw,32px)}
.worksheet .band__head{margin-bottom:16px}
.ws{width:100%;background:var(--white);border:1px solid var(--rule);font-size:15.5px}
.ws th{text-align:left;background:var(--panel);border-bottom:1px solid var(--rule);padding:12px 18px;font:500 11px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--label)}
.ws th+th{color:var(--green)}
.ws td{border-top:1px solid var(--hair);padding:16px 18px;vertical-align:top;line-height:1.62;width:50%}
.ws td:first-child{color:var(--soft);font-weight:500}
.ws tr:hover td{background:#fbfaf7}
.ws-row-link{display:block;margin-top:9px;font:500 12px/1.4 var(--mono);letter-spacing:.3px}
@media (max-width:640px){
 .ws,.ws tbody,.ws tr,.ws td{display:block;width:auto}
 .ws thead{display:none}
 .ws tr{border-top:1px solid var(--rule)}
 .ws tr:first-child{border-top:0}
 .ws td{border-top:0;padding:14px 16px 0}
 .ws td:last-child{padding-bottom:16px}
 .ws td:first-child::before{content:"You think";display:block;font:500 10.5px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--label);margin-bottom:6px}
 .ws td:last-child::before{content:"Actually";display:block;font:500 10.5px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--green);margin-bottom:6px}
}


/* 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-feat-stack: the featured tile reserved 140px for the mark and left its copy 82px — 27-30% of
   the tile at every breakpoint, so it never held a sentence and read as a bare name in a box.
   Operator: "remove brand names, enlarge logo, place url below it". Uses the design's OWN stacked
   declaration (already written for its mobile breakpoint) at all widths, and lets the mark grow
   into the width that frees up. */
.sponsor.feat{grid-template-columns:minmax(0,1fr)}
.sponsor.feat img{max-height:64px}

/* 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. */
.sponsors .sponsor.sponsor img{height:38px!important}


/* sp-mark-size: the marks were held to 38px in a 286px sticky rail with room above and below.
   Raised to 56px (64px on the featured tile, which Design already sized larger). */
.sponsors .sponsor.sponsor img{height:auto!important;max-height:56px!important}
.sponsors .sponsor.feat.sponsor img{max-height:68px!important}

/* 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.masthead__in{padding-inline:var(--gut)}
}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 670px at 390, 4% 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 670 -> 512px (24% 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(9px,1.94vw,28px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1832px at 390, 12% of the whole page. Two columns bring it to
   1431px (22% shorter). Checked before writing: no new overflow, smallest mark still
   122px wide, longest blurb 6 lines, tile heights 114-226px.
   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 (.sponsors), 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){
  .sponsors{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsors > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors > * *{min-width:0!important;max-width:100%}
    .sponsors img,.sponsors svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1033px of tier across
   7 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsors .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
  .sponsors .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsors (3 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){
  .sponsors:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 756px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (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{--measure:min(76.574ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-body > :is(p.lead, p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.wrap.masthead__in{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.art-hero > img,
  div.art-body > figure.article-figure > img,
  div.cards > a.card > img.card__img,
  li > a > img,
  section.board.flagship > div.flagship__img > img,
  section.lede > figure.hero > img){height:auto}
/* op-img-dims:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(12px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */