/* ============================================================
   Internet Access Monitor — field guide
   Dark-first, terminal-adjacent, one warm amber accent.
   FONT SLOT: fonts are vendored locally at finalize. Drop
   @font-face for "Space Grotesk" (sans) and "IBM Plex Mono"
   (mono) here; the stacks below already prefer them and fall
   back to system fonts so nothing 404s in the meantime.
   ============================================================ */

:root{
  --bg:#0a0c10;
  --bg-card:#101319;
  --bg-deep:#060709;
  --bg-raise:#151922;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.045);
  --ink:#e9ecf2;
  --ink-2:#b6bdc9;
  --ink-3:#8a93a3;
  --ink-4:#6c7686;
  --ink-5:#5a6472;
  --acc:#ff9d2e;
  --acc-hi:#ffb85c;
  --acc-soft:rgba(255,157,46,.14);
  --acc-dim:rgba(255,157,46,.42);
  --ok:#4ec98a;
  --info:#7fb4ff;
  --violet:#c0a0ff;
  --pink:#e0559b;
  --font-sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;
  --wrap:1220px;
  --measure:70ch;
  --radius:14px;
  --i-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E");
  --i-org:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-4h6v4M9 9h.01M15 9h.01M9 13h.01M15 13h.01'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-hi)}
::selection{background:var(--acc);color:#0a0c10}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
code,kbd,samp{font-family:var(--font-mono)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---- layout helpers ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.band{padding-block:clamp(46px,7vw,84px)}
.band-tight{padding-block:clamp(30px,4vw,48px)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.kicker{font:600 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.eyebrow{font:600 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.mono{font-family:var(--font-mono)}
.tok{font-family:var(--font-mono);font-size:.86em;color:var(--acc);background:rgba(255,157,46,.09);border:1px solid rgba(255,157,46,.16);padding:.06em .38em;border-radius:5px;white-space:nowrap}
.tok.dim{color:var(--ink-2);background:rgba(255,255,255,.05);border-color:var(--line)}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(8,10,14,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head-row{display:flex;align-items:center;gap:20px;min-height:62px;padding-block:8px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{font:700 13px/1 var(--font-mono);color:#0a0c10;background:var(--acc);padding:7px 8px;border-radius:7px;letter-spacing:.04em}
.brand-name{font:600 15px/1.1 var(--font-sans);color:var(--ink);white-space:nowrap}
.brand-name small{display:block;font:500 10.5px/1 var(--font-mono);color:var(--ink-4);letter-spacing:.02em;margin-top:3px}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{padding:9px 12px;border-radius:8px;font:500 14px/1 var(--font-sans);color:var(--ink-2)}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav a[aria-current]{color:var(--acc);background:var(--acc-soft)}
.nav-cta{font:600 13px/1 var(--font-mono)!important;color:#0a0c10!important;background:var(--acc);border-radius:8px;padding:9px 13px!important}
.nav-cta:hover{background:var(--acc-hi)!important}
.menu-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);cursor:pointer}
.menu-toggle svg{display:block}

/* ---- footer ---- */
.site-foot{background:var(--bg-deep);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;padding-block:52px}
.foot-brand p{color:var(--ink-3);font-size:14.5px;line-height:1.6;max-width:34ch;margin:14px 0 0}
.foot-col h4{font:600 11px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.foot-col a{display:block;color:var(--ink-2);font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--acc)}
.foot-base{border-top:1px solid var(--line);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.foot-base span{font:500 12.5px/1.5 var(--font-mono);color:var(--ink-5)}
.foot-base .unaff{margin-left:auto}

/* ---- buttons / chips ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 var(--font-sans);padding:12px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:.14s}
.btn-primary{background:var(--acc);color:#0a0c10}
.btn-primary:hover{background:var(--acc-hi);color:#0a0c10}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--acc-dim);color:var(--acc)}
.chip{padding:8px 13px;border-radius:999px;font:500 13px/1 var(--font-mono);cursor:pointer;white-space:nowrap;transition:.12s;border:1px solid var(--line);background:transparent;color:var(--ink-3)}
.chip:hover{border-color:var(--acc-dim);color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* ---- hero ---- */
.hero{position:relative}
.hero-inner{padding-block:clamp(48px,7vw,92px)}
.hero h1{font-size:clamp(40px,6.2vw,72px);letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.hero .dek{margin:24px 0 0;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.hero .kicker{margin-bottom:20px;display:block}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1100px 520px at 78% -18%,rgba(255,157,46,.10),transparent 60%);z-index:-1}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero-bg img{position:absolute;right:0;top:0;width:min(72%,900px);height:100%;object-fit:cover;object-position:right center;opacity:.16;-webkit-mask:linear-gradient(90deg,transparent,#000 55%),linear-gradient(0deg,transparent 4%,#000 40%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 55%);mask-composite:intersect}
@media (max-width:820px){.hero-bg img{width:100%;opacity:.10;-webkit-mask:linear-gradient(0deg,transparent 2%,#000 55%);mask:linear-gradient(0deg,transparent 2%,#000 55%)}}

/* ============================================================
   DECISION PANEL ("Start here")
   ============================================================ */
.decider{border:1px solid var(--acc-dim);border-radius:20px;background:linear-gradient(180deg,rgba(255,157,46,.05),transparent 42%),var(--bg-card);overflow:hidden}
.decider-head{padding:24px clamp(20px,3vw,30px) 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.decider-head h2{font-size:clamp(24px,3vw,32px)}
.decider-head p{margin:0;color:var(--ink-3);font-size:15px}
.decider-body{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;padding:20px clamp(20px,3vw,30px) clamp(24px,3vw,30px);align-items:start}
.q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.q-block .q-label{font:600 11px/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px;min-height:2.1em;display:flex;align-items:flex-end}
.q-opts{display:flex;flex-direction:column;gap:7px}
.q-opt{padding:10px 13px;border-radius:10px;font:500 13.5px/1.25 var(--font-sans);cursor:pointer;text-align:left;transition:.12s;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-2)}
.q-opt:hover{border-color:var(--acc-dim);color:var(--ink)}
.q-opt[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-soft);color:#fff}
.result{position:sticky;top:78px;border-radius:15px;background:var(--bg-deep);border:1px solid var(--acc-dim);padding:22px;display:flex;flex-direction:column;min-height:100%}
.result .r-cat{font:600 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.result .r-tool{font:700 30px/1 var(--font-sans);color:var(--acc);letter-spacing:-.02em;margin-bottom:6px}
.result .r-src{font:500 12px/1 var(--font-mono);color:var(--ink-3);margin-bottom:14px}
.result .r-why{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-bottom:16px}
.result .r-step{padding:14px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-top:auto}
.result .r-step b{display:block;font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:7px}
.result .r-step span{font-size:13.5px;line-height:1.5;color:var(--ink)}
.result .r-note{font-size:12.5px;line-height:1.5;color:var(--ink-4);font-style:italic;margin:12px 0 0}
.result-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.result-links a{font:600 12px/1 var(--font-mono);color:var(--acc)}

/* ============================================================
   THE LANDSCAPE — section cards
   ============================================================ */
.landscape-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sec-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);padding:22px;transition:.15s;color:inherit}
.sec-card:hover{border-color:var(--acc-dim);transform:translateY(-2px)}
.sec-card .sc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.sec-card .sc-no{font:600 12px/1 var(--font-mono);color:var(--acc)}
.sec-card .sc-count{font:500 11px/1 var(--font-mono);color:var(--ink-4)}
.sec-card h3{font-size:20px;margin-bottom:8px}
.sec-card p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink-3);flex:1}
.sec-viz{height:38px;margin-top:auto}
.sec-card.wide{grid-column:span 2;flex-direction:row;align-items:center;gap:24px;background:linear-gradient(100deg,#14100a,var(--bg-card))}
.sec-card.wide .sc-body{flex:1}
.sec-card.wide p{margin-bottom:0;max-width:64ch}
.legacy-tag{font:500 9px/1 var(--font-mono);color:var(--ink-5);border:1px solid var(--line);padding:3px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em}

/* ============================================================
   MATRIX — tool comparison
   ============================================================ */
.matrix-tools{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);overflow:hidden}
.matrix-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.matrix-head h3{font-size:17px}
.matrix-count{font:500 12px/1 var(--font-mono);color:var(--acc)}
.matrix-search{margin-left:auto;width:170px;max-width:100%;padding:8px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 13px/1 var(--font-mono)}
.matrix-search::placeholder{color:var(--ink-5)}
.matrix-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:center}
.matrix-filters .fl-label{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-5);margin-right:2px}
.matrix-scroll{overflow-x:auto}
.matrix-table{width:100%;min-width:820px;border-collapse:collapse}
.matrix-table th{text-align:left;font:600 10px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-5);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--bg-card)}
.matrix-table td{padding:15px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14px;line-height:1.4;color:var(--ink-2)}
.matrix-table tr:hover td{background:rgba(255,255,255,.018)}
.m-name a{font:600 15px/1.15 var(--font-mono);color:var(--acc)}
.m-name .m-note{display:block;font:400 11.5px/1.35 var(--font-sans);color:var(--ink-4);margin-top:5px;max-width:26ch}
.m-host{font:500 12.5px/1 var(--font-mono)}
.m-host.self{color:var(--ok)}
.m-host.cloud{color:var(--info)}
.m-host.both{color:var(--violet)}
.m-free{font-size:13px;color:var(--ink-2)}
.m-src{font:500 12.5px/1.35 var(--font-mono);color:var(--ink-3)}
.matrix-empty{padding:26px;text-align:center;color:var(--ink-4);font-size:14px}
.matrix-cards{display:none}

/* ============================================================
   FEED (newest articles)
   ============================================================ */
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feed-lead{grid-column:span 3;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.feed-lead .fl-media{position:relative;min-height:280px;background:#0e1117}
.feed-lead .fl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-lead .fl-body{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:center}
.feed-lead h3{font-size:clamp(24px,2.6vw,32px);margin:12px 0 12px;text-wrap:balance}
.feed-lead p{margin:0 0 18px;color:var(--ink-2);font-size:16px;line-height:1.55;max-width:52ch}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);overflow:hidden;transition:.15s;color:inherit}
.card:hover{border-color:var(--acc-dim);transform:translateY(-2px)}
.card .c-media{aspect-ratio:16/9;background:#0e1117;position:relative;overflow:hidden}
.card .c-media img{width:100%;height:100%;object-fit:cover}
.card .c-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:18px;margin:9px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.16em}
.card .c-dek{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 12px/1 var(--font-mono);color:var(--ink-4)}
.meta .m-cat{color:var(--acc)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-5)}
.c-foot{margin-top:auto;padding-top:14px}
.more-toggle{display:block;margin:22px auto 0;text-align:center}
input.more-check{position:absolute;opacity:0;pointer-events:none}
.more-rows{display:none}
input.more-check:checked ~ .more-rows{display:contents}
input.more-check:checked ~ .more-toggle{display:none}

/* ============================================================
   SUPPORTERS
   ============================================================ */
.supporters{background:var(--bg-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.supporters-head{text-align:center;max-width:56ch;margin:0 auto 34px}
.supporters-head h2{font-size:clamp(24px,3vw,34px)}
.supporters-head p{margin:14px 0 0;color:var(--ink-3);font-size:15px;line-height:1.55}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sponsor{display:flex;flex-direction:column;gap:9px;background:var(--bg);padding:22px;min-height:118px;transition:.14s;color:inherit}
.sponsor:hover{background:var(--bg-raise)}
.sponsor img{height:26px;width:auto;object-fit:contain;object-position:left center;opacity:1}
.sponsor:hover img{opacity:1;filter:none}
.sponsor-blurb{font-size:12.5px;line-height:1.45;color:var(--ink-3);max-width:30ch}
.sponsor-blurb:empty::after{content:none;color:var(--ink-5);font-family:var(--font-mono);font-size:11px}

/* ============================================================
   ARTICLE
   ============================================================ */
.article{padding-block:clamp(30px,4vw,52px)}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(28px,4vw,56px);align-items:start;max-width:1120px;margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font:500 12.5px/1 var(--font-mono);color:var(--ink-4);margin-bottom:22px}
.crumbs a{color:var(--ink-3)}.crumbs a:hover{color:var(--acc)}
.crumbs .sep{color:var(--ink-5)}
.article-head{margin-bottom:26px}
.article-head .a-cat{display:inline-flex;gap:9px;align-items:center;font:600 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.article-head .a-cat .kind{color:var(--ink-4)}
.article-head h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.025em;text-wrap:balance}
.article-head .a-meta{margin-top:16px;font:500 13.5px/1 var(--font-mono);color:var(--ink-4);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.article-body{max-width:var(--measure)}
.article-body>p{font-size:18.5px;line-height:1.78;color:var(--ink-2);margin:0 0 24px}
.article-body h2.sec{font-size:clamp(22px,2.4vw,28px);margin:44px 0 18px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.article-body h2.sec .n{font:600 14px/1 var(--font-mono);color:var(--acc);flex-shrink:0}
.article-body h3{font-size:20px;margin:30px 0 12px;color:var(--ink)}
.article-body strong{color:var(--ink);font-weight:600}
.lead{font-size:clamp(19px,2vw,23px)!important;line-height:1.55!important;color:var(--ink)!important;font-weight:400;margin:0 0 28px!important;text-wrap:pretty}
.dropcap:first-letter{float:left;font-family:var(--font-sans);font-weight:700;font-size:3.4em;line-height:.78;padding:6px 12px 0 0;color:var(--acc)}

/* article aside rail — by-the-numbers */
.aside-rail{position:sticky;top:78px;display:flex;flex-direction:column;gap:18px}
.numbers-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);padding:18px}
.numbers-card h4{font:600 10px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px}
.numbers-list{display:flex;flex-direction:column;gap:16px}
.num-item .num{font:700 26px/1 var(--font-sans);color:var(--acc);letter-spacing:-.02em}
.num-item .num-label{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-top:4px;max-width:26ch}
.rail-note{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);padding:16px 18px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.rail-note b{display:block;font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}

/* table of contents (sticky, in aside rail) */
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);padding:16px 18px}
.toc h4{font:600 10px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:13.5px;line-height:1.35;color:var(--ink-3);border-left:2px solid transparent;margin-left:-12px;padding-left:12px;transition:.12s}
.toc a::before{content:counter(toc,decimal-leading-zero);font:600 10.5px/1.4 var(--font-mono);color:var(--ink-5);flex:0 0 auto}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--acc);border-left-color:var(--acc)}
.toc a[aria-current]::before{color:var(--acc)}
.article-body h2.sec{scroll-margin-top:84px}

/* key-takeaways summary box */
.takeaways{margin:0 0 34px;border:1px solid var(--acc-dim);border-radius:var(--radius);background:linear-gradient(180deg,var(--acc-soft),transparent 60%),var(--bg-card);padding:22px 24px}
.takeaways h2{font:600 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:16px;padding:0;border:0}
.takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.takeaways li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.takeaways li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;background:var(--acc);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

/* ============================================================
   PALETTE COMPONENTS (styleguide + article inline)
   ============================================================ */
.pullquote{margin:34px 0;padding:6px 0 6px 26px;border-left:3px solid var(--acc)}
.pullquote p{font-size:clamp(20px,2.4vw,26px);line-height:1.32;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0;text-wrap:pretty}
.blockquote{margin:30px 0;padding:20px 24px;border-radius:12px;background:var(--bg-card);border:1px solid var(--line)}
.blockquote p{margin:0;font-size:17px;line-height:1.55;color:var(--ink);font-style:italic}
.blockquote cite{display:block;margin-top:12px;font:500 13px/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.callout{margin:30px 0;padding:20px 22px;border-radius:12px;background:var(--acc-soft);border:1px solid var(--acc-dim);display:flex;gap:14px}
.callout::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:2px;background:var(--acc);-webkit-mask:var(--i-bulb) center/contain no-repeat;mask:var(--i-bulb) center/contain no-repeat}
.callout p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.note{margin:24px 0;padding:14px 18px 14px 44px;position:relative;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.note::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;background:var(--ink-3);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}

.versus{width:100%;border-collapse:collapse;margin:30px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.versus caption{caption-side:top;text-align:left;font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding-bottom:12px}
.versus th{background:var(--bg-card);font:600 13px/1.2 var(--font-sans);color:var(--ink);padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.versus th:first-child{color:var(--ink-4);font:600 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.versus td{padding:13px 16px;border-bottom:1px solid var(--line-soft);border-left:1px solid var(--line-soft);font-size:14.5px;line-height:1.45;color:var(--ink-2);vertical-align:top}
.versus td:first-child{font:600 13px/1.3 var(--font-sans);color:var(--ink);border-left:0}
.versus tr:last-child td{border-bottom:0}

.datatable{width:100%;border-collapse:collapse;margin:30px 0;font-size:14.5px}
.datatable caption{caption-side:top;text-align:left;font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding-bottom:12px}
.datatable th{text-align:left;font:600 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding:11px 14px;border-bottom:1px solid var(--line)}
.datatable td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);line-height:1.4}
.datatable tbody tr:hover td,.datatable tr:hover td{background:rgba(255,255,255,.02)}
.datatable td:first-child{color:var(--ink);font-weight:500}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:30px 0}
.statblock{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);padding:18px}
.statblock .stat-num{display:block;font:700 34px/1 var(--font-sans);color:var(--acc);letter-spacing:-.02em}
.statblock .stat-label{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-3)}

.timeline{list-style:none;margin:30px 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 34px}
.timeline li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.timeline li:last-child{padding-bottom:0}
.timeline .t-when{display:block;font:600 12px/1.3 var(--font-mono);color:var(--acc);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.timeline .t-what{display:block;font-size:15px;line-height:1.5;color:var(--ink-2)}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font:500 12.5px/1.4 var(--font-mono);color:var(--ink-4)}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.bar-row .bar-label{flex:0 0 130px;font:500 12.5px/1.2 var(--font-mono);color:var(--ink-2);text-align:right;word-break:break-word}
.bar-row .bar-track{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-row .bar-fill{height:100%;border-radius:6px;background:var(--acc)}
.bar-row .bar-val{flex:0 0 auto;font:600 12.5px/1 var(--font-mono);color:var(--ink-3);min-width:46px}

.flow-diagram{display:flex;align-items:center;gap:10px;margin:30px 0;flex-wrap:wrap}
.flow-node{flex:1;min-width:120px;text-align:center;padding:16px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg-card)}
.flow-node.active{border-color:var(--acc-dim);background:var(--acc-soft)}
.flow-node .fn-title{font:600 13px/1 var(--font-mono);color:var(--ink);margin-bottom:6px}
.flow-node.active .fn-title{color:var(--acc)}
.flow-node .fn-sub{font:500 10.5px/1.3 var(--font-mono);color:var(--ink-4)}
.flow-arrow{flex-shrink:0;color:var(--acc)}

.article-figure{margin:32px 0}
.article-figure img{width:100%;border-radius:12px;border:1px solid var(--line);background:#0e1117;aspect-ratio:16/9;object-fit:cover}
.article-figure figcaption{margin-top:11px;font-size:13px;line-height:1.5;color:var(--ink-4)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.gallery figcaption{margin-top:8px;font-size:12px;color:var(--ink-4)}
.map-figure{margin:32px 0}
.map-figure .map-slot{aspect-ratio:16/9;border-radius:12px;border:1px dashed var(--line);background:repeating-linear-gradient(45deg,#0e1117,#0e1117 12px,#0b0e13 12px,#0b0e13 24px);display:flex;align-items:center;justify-content:center}
.map-figure .map-slot::after{content:none;font:500 12px/1 var(--font-mono);color:var(--ink-5)}
.map-figure figcaption{margin-top:11px;font-size:13px;color:var(--ink-4)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.profile-card{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);padding:20px}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:14px;border:1px solid var(--line)}
.profile-card.no-photo::before{content:"";display:block;width:56px;height:56px;border-radius:50%;margin-bottom:14px;background:var(--acc-soft);border:1px solid var(--acc-dim);-webkit-mask:var(--i-org) center/24px no-repeat;mask:var(--i-org) center/24px no-repeat;mask-composite:add}
.profile-card h3{font-size:17px}
.profile-card .p-role{font:500 12.5px/1 var(--font-mono);color:var(--acc);margin:5px 0 10px}
.profile-card p{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:0}
.profile-card .p-links{margin-top:12px}
.profile-card .p-links a{font:500 12.5px/1 var(--font-mono)}
.profile-card .p-attr{font-size:11.5px;color:var(--ink-5);margin-top:8px}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:26px 0}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-card);padding:14px 16px;transition:.14s}
.org-card:hover{border-color:var(--acc-dim);background:var(--bg-raise)}
.org-logo{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#0e1117}
.org-card.no-logo{padding-left:16px}
.org-card.no-logo::before{content:"";width:34px;height:34px;border-radius:8px;flex-shrink:0;background:var(--acc-soft);border:1px solid var(--acc-dim);-webkit-mask:var(--i-org) center/18px no-repeat;mask:var(--i-org) center/18px no-repeat}
.org-name{display:block;font:600 14px/1.2 var(--font-sans);color:var(--ink)}
.org-host{display:block;font:500 11.5px/1 var(--font-mono);color:var(--ink-4);margin-top:3px}
.entity-ref{font-weight:500;border-bottom:1px solid var(--acc-dim)}
.entity-ref:hover{border-color:var(--acc)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:20px 0}
.further-grid a{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);padding:16px 18px;transition:.14s;color:var(--ink)}
.further-grid a:hover{border-color:var(--acc-dim);transform:translateY(-2px)}
.further-grid a .fg-kind{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:8px}
.further-grid a .fg-title{font:600 15px/1.25 var(--font-sans)}

/* article nav (prev/next + related) */
.article-nav{border-top:1px solid var(--line);margin-top:44px;padding-top:26px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:30px}
.prevnext a{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);padding:16px 18px;transition:.14s}
.prevnext a:hover{border-color:var(--acc-dim)}
.prevnext .pn-dir{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:8px}
.prevnext .pn-title{font:600 15px/1.3 var(--font-sans);color:var(--ink)}
.prevnext a.next{text-align:right}
.related h4{font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links li a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.related-links li:last-child a{border-bottom:0}
.related-links li a:hover{color:var(--acc)}
.related-links li a::after{content:"→";color:var(--acc);opacity:.7}

/* ============================================================
   CATEGORY / INDEX pages
   ============================================================ */
.cat-hero{border-bottom:1px solid var(--line)}
.cat-hero .kicker{margin-bottom:16px;display:block}
.cat-hero h1{font-size:clamp(34px,5vw,58px)}
.cat-hero p{margin:20px 0 0;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cat-list li a{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 6px;border-bottom:1px solid var(--line);color:inherit;transition:.12s}
.cat-list li a:hover{background:rgba(255,255,255,.02);padding-left:14px}
.cat-list .cl-no{font:600 13px/1 var(--font-mono);color:var(--ink-5)}
.cat-list .cl-main h3{font-size:21px;margin-bottom:6px}
.cat-list .cl-main p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-3);max-width:70ch}
.cat-list .cl-meta{font:500 12px/1 var(--font-mono);color:var(--ink-4);white-space:nowrap;text-align:right}
.section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.section-tabs a{font:500 13px/1 var(--font-mono);padding:8px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3)}
.section-tabs a:hover{border-color:var(--acc-dim);color:var(--ink)}
.section-tabs a[aria-current]{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* generic page (about/contact/legal) */
.page-body{max-width:var(--measure);padding-inline:0}
.page-body h2{font-size:26px;margin:38px 0 14px}
.page-body h3{font-size:19px;margin:26px 0 10px}
.page-body p{font-size:17px;line-height:1.72;color:var(--ink-2);margin:0 0 20px}
.page-body ul{margin:0 0 20px;padding-left:22px;color:var(--ink-2);line-height:1.7}
.page-body li{margin-bottom:8px}
.page-body a{border-bottom:1px solid var(--acc-dim)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.contact-card{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);padding:20px;display:flex;flex-direction:column;gap:8px}
.contact-card .cc-ico{width:26px;height:26px;color:var(--acc)}
.contact-card h3{font-size:16px}
.contact-card p{font-size:14px;margin:0;color:var(--ink-3)}
.contact-card a{font:500 13px/1.4 var(--font-mono);border:0}

.notfound{text-align:center;padding-block:clamp(60px,12vw,140px)}
.notfound .nf-code{font:700 clamp(80px,16vw,180px)/.9 var(--font-mono);color:var(--acc);letter-spacing:-.04em}
.notfound h1{font-size:clamp(26px,4vw,40px);margin:18px 0 14px}
.notfound p{color:var(--ink-3);font-size:17px;max-width:46ch;margin:0 auto 28px}

/* styleguide layout */
.sg-nav{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 44px}
.sg-section{margin-bottom:56px}
.sg-section>h2{font-size:26px;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sg-section>.sg-desc{color:var(--ink-3);font-size:14px;margin:10px 0 26px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sg-swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sg-swatch .sw-chip{height:64px}
.sg-swatch .sw-name{padding:10px 12px;font:500 11.5px/1.3 var(--font-mono);color:var(--ink-3)}
.sg-swatch .sw-name b{display:block;color:var(--ink);font-family:var(--font-sans);margin-bottom:3px}
.sg-type-row{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.sg-type-row .sg-tag{font:500 11px/1 var(--font-mono);color:var(--ink-4);margin-bottom:8px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .decider-body{grid-template-columns:1fr}
  .result{position:static}
  .article-shell{grid-template-columns:1fr}
  .aside-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .aside-rail>*{flex:1;min-width:220px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:17px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:12px clamp(18px,4vw,40px);gap:2px}
  .nav a{padding:12px 10px}
  .site-head.open .nav{display:flex}
  .menu-toggle{display:inline-flex}
  .feed-grid{grid-template-columns:repeat(2,1fr)}
  .feed-lead,.feed-lead[class]{grid-column:span 2}
  .feed-lead{grid-template-columns:1fr}
  .feed-lead .fl-media{min-height:200px;aspect-ratio:16/9}
  .landscape-grid{grid-template-columns:1fr}
  .sec-card.wide{grid-column:span 1;flex-direction:column;align-items:flex-start}
  .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .q-grid{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
}
@media (max-width:560px){
  .feed-grid{grid-template-columns:1fr}
  .feed-lead,.feed-lead[class]{grid-column:span 1}
  .sponsor-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cat-list li a{grid-template-columns:1fr;gap:8px}
  .cat-list .cl-meta{text-align:left}
  .cat-list .cl-no{display:none}
  .bar-row .bar-label{flex-basis:96px}
  .statrow{grid-template-columns:1fr 1fr}
}

/* 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-grid .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}


/* sp-tile-centre: the tile's contents sit on the centre line.
   Marks were 335px in a 379px tile with the name and copy ranged left, so each tile read as
   two different alignments stacked. */
.sponsor-grid .sponsor{align-items:center!important;text-align:center!important}
.sponsor-grid .sponsor .sp-logo{display:flex!important;justify-content:center!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{margin-inline:auto!important}

/* ⚠️ THE BOX WAS CENTRED BUT THE ARTWORK INSIDE IT WAS NOT. object-position computed to
   "0% 50%", so a 124px logo sat at the left edge of its 335px box — margin:auto centres the box,
   not its contents, and object-fit needs telling where to put them. */
.sponsor-grid .sponsor.sponsor img{object-position:center!important}

/* op-footer-compact: the footer printed 16 rows for 16 link(s) in
   3 list(s) — 921px at 390, 9% 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, and the group holder takes two columns,
   measured 921 -> 639px (31% 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:24px!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1647px at 390, 16% of the whole page. Two columns bring it to
   861px (48% shorter). Checked before writing: no new overflow, smallest mark still
   125px wide, longest blurb 3 lines, tile heights 127-145px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. 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-grid), 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-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:1px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-page-overflow: the page scrolled sideways at 320 — a.sec-card reached
   344px in a 320px screen (+24px), inside
   div.landscape-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.landscape-grid{grid-template-columns:minmax(0,1fr)!important}
  a.sec-card{min-width:0!important;max-width:100%!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.c-media > img,
  a.feed-lead > div.fl-media > img,
  div.article-body > figure.article-figure > img,
  section.hero > div.hero-bg > img){height:auto}
/* op-img-dims:end */