/* ============================================================
   Polish Linux — shared stylesheet
   Light mint-green surfaces, dark terminal/code panels.
   Fonts: Space Grotesk (display), IBM Plex Sans (body), JetBrains Mono (ui/code)
   ============================================================ */

:root{
  --paper:#f4fbf6; --paper-alt:#eef8f1; --hero-a:#e7f6ec; --hero-b:#f4fbf6; --card:#ffffff;
  --green:#2fa06e; --green-deep:#248257; --green-term:#3fb07a;
  --amber-text:#b96f16; --amber-chip:#fbeed6; --amber-dot:#e8a33d;
  --ink:#16261f; --body:#3a5148; --meta:#6f857c;
  --border:#d4e9dd; --border-dash:#bfe3cc;
  --panel:#16261f; --titlebar:#0f1c16; --code:#e6efe8;
  --c-comment:#6f857c; --c-key:#e8a33d; --c-flag:#7fb3ff; --c-op:#c98fd6; --c-prompt:#3fb07a;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:0 16px 34px rgba(22,38,31,.09);
  --shadow-lg:0 24px 50px rgba(22,38,31,.14);
  --r:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); line-height:1.08; letter-spacing:-.02em; margin:0}
a{color:var(--green-deep)}
a:hover{color:var(--green)}
p{text-wrap:pretty}

.wrap{max-width:1200px; margin:0 auto; padding-inline:clamp(20px,5vw,48px)}
.wrap-wide{max-width:1360px; margin:0 auto; padding-inline:clamp(20px,5vw,48px)}

.eyebrow{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:16px; top:12px; z-index:200; background:var(--ink); color:#fff; padding:8px 14px; border-radius:8px}

/* ---------- buttons / pills ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none; padding:13px 24px; border-radius:24px; border:1px solid transparent; cursor:pointer; transition:transform .12s, background .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-deep); color:#fff}
.btn-ghost{background:var(--card); border-color:var(--border); color:var(--ink)}
.btn-ghost:hover{border-color:var(--green); color:var(--green-deep)}
.btn-dark{background:var(--ink); color:#fff}

.pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; padding:6px 13px; border-radius:20px; text-decoration:none; border:1px solid var(--border); background:var(--card); color:var(--ink)}
.pill.green{color:var(--green); background:var(--paper-alt); border-color:var(--border-dash)}
.pill.amber{color:var(--amber-text); background:var(--amber-chip); border-color:#f0d9ad}

/* ============================================================
   HEADER + MEGAMENU (CSS-only)
   ============================================================ */
.site-header{position:sticky; top:0; z-index:100; background:rgba(244,251,246,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:22px; padding:13px 0; min-height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.brand .badge{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--green); color:#fff; font-family:var(--mono); font-weight:700; font-size:17px}
.brand .word{font-family:var(--display); font-weight:700; font-size:21px; color:var(--ink); letter-spacing:-.02em}
.header-spacer{flex:1}

.main-nav>ul{list-style:none; display:flex; gap:2px; margin:0; padding:0}
.main-nav .top-link{display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:500; font-size:15px; color:#3a5148; text-decoration:none; padding:9px 13px; border-radius:20px; white-space:nowrap}
.main-nav li.has-sub>.top-link::after{content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.55; transition:transform .15s}
.main-nav .top-link:hover{color:var(--ink); background:var(--paper-alt)}
.main-nav li{position:relative}
.main-nav li.has-sub:hover>.top-link,.main-nav li.has-sub:focus-within>.top-link{color:var(--ink); background:var(--paper-alt)}
.main-nav li.has-sub:hover>.top-link::after,.main-nav li.has-sub:focus-within>.top-link::after{transform:rotate(-135deg) translateY(-1px)}

.nav-sub{list-style:none; margin:0; padding:10px; position:absolute; top:100%; left:0; min-width:330px;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s, transform .16s, visibility .16s; z-index:110}
.main-nav li.has-sub:hover>.nav-sub,.main-nav li.has-sub:focus-within>.nav-sub{opacity:1; visibility:visible; transform:translateY(0)}
.nav-sub .sub-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); padding:6px 12px 9px}
.nav-sub a{display:block; padding:9px 12px; border-radius:9px; text-decoration:none; color:#3a5148; font-size:14.5px; line-height:1.35}
.nav-sub a:hover{background:var(--paper-alt); color:var(--green-deep)}
.nav-sub .sub-all{margin-top:4px; border-top:1px solid var(--border); font-family:var(--mono); font-size:12.5px; color:var(--meta)}

.nav-toggle,.nav-toggle-label{display:none}

/* ============================================================
   HOMEPAGE
   ============================================================ */
/* hero */
.hero{background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); border-bottom:1px solid var(--border)}
.hero-inner{padding:56px 0 48px; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
.hero .tags{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.hero h1{font-size:clamp(38px,4.6vw,60px); font-weight:700; margin:0}
.hero .dek{font-size:20px; line-height:1.55; color:var(--body); margin:20px 0 0; max-width:42ch}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero .byline{font-family:var(--mono); font-size:13.5px; color:var(--meta); margin-top:22px}
.hero-media{border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); aspect-ratio:16/11}
.hero-media img{width:100%; height:100%; object-fit:cover}

/* topic chips */
.topics{border-bottom:1px solid var(--border)}
.topics-inner{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:22px 0}
.topics .lbl{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta)}
.topics .chips{display:flex; gap:10px; flex-wrap:wrap}
.topics .chips a:hover{border-color:var(--green); color:var(--green)}

/* section head */
.band{padding:52px 0}
.band-alt{background:var(--paper-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px}
.band-head h2{font-size:clamp(28px,3vw,38px); font-weight:700}
.band-head .more-link{font-family:var(--mono); font-size:13px; color:var(--meta); text-decoration:none; white-space:nowrap}
.band-head .more-link:hover{color:var(--green)}

/* even-height card grid */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .14s, box-shadow .16s, border-color .16s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-dash)}
.card .thumb{aspect-ratio:16/10; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:11px; flex:1}
.cat-chip{align-self:flex-start; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; padding:4px 11px; border-radius:16px; background:var(--paper-alt); color:var(--green); border:1px solid var(--border)}
.cat-chip.amber{background:var(--amber-chip); color:var(--amber-text); border-color:#f0d9ad}
.cat-chip.slate{background:#eef2f0; color:#3a5148; border-color:#dde5e1}
.card h3{font-family:var(--display); font-weight:600; font-size:21px; line-height:1.16; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.32em}
.card .dek{font-size:15px; line-height:1.55; color:var(--body); margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card .meta{font-family:var(--mono); font-size:12.5px; color:var(--meta); margin:0}

/* ---------- interactive distro module (CSS-only radios) ---------- */
.distro{max-width:1120px}
.distro-foot{margin-top:26px; padding-top:22px; border-top:1px solid var(--border); display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap}
.distro-foot span{font-size:16px; color:var(--body)}
.distro-foot span strong{color:var(--ink)}
.distro .head{max-width:760px; margin-bottom:26px}
.distro .head h2{font-size:clamp(28px,3vw,38px); font-weight:700; margin:12px 0 10px}
.distro .head p{font-size:18px; line-height:1.55; color:var(--body); margin:0}
.distro-module{display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start}
.distro-module input[type=radio]{position:absolute; opacity:0; pointer-events:none}
.distro-rail{display:flex; flex-direction:column; gap:8px}
.distro-rail label{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--paper-alt); color:var(--ink); cursor:pointer; transition:all .14s}
.distro-rail label:hover{border-color:var(--border-dash)}
.distro-rail label .dn{font-family:var(--display); font-weight:600; font-size:17px}
.distro-rail label .pm{font-family:var(--mono); font-size:12px; color:var(--meta)}
.distro-panels{position:relative}
.distro-panel{display:none; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:30px 32px; box-shadow:var(--shadow)}
.distro-panel .pn-top{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.distro-panel h3{font-family:var(--display); font-weight:700; font-size:clamp(28px,3vw,34px)}
.distro-panel .pn-tag{font-size:17px; color:var(--green); font-style:italic}
.distro-meta{display:flex; flex-wrap:wrap; gap:22px 30px; margin:20px 0 22px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.distro-meta .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta)}
.distro-meta .v{font-size:16px; color:var(--ink); margin-top:4px}
.distro-meta .v.mono{font-family:var(--mono); color:var(--green)}
.distro-bestat{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); margin-bottom:12px}
.distro-panel ul.best{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px}
.distro-panel ul.best li{display:flex; gap:12px; font-size:16px; line-height:1.45; color:#26362e}
.distro-panel ul.best li svg{flex-shrink:0; margin-top:3px; color:var(--green)}
.distro-cmd{display:flex; align-items:center; gap:12px; background:var(--panel); border-radius:12px; padding:12px 16px; font-family:var(--mono); font-size:14px}
.distro-cmd .p{color:var(--green-term)}
.distro-cmd code{color:var(--code)}
.distro-bestfor{font-size:14.5px; color:var(--meta); margin:14px 0 0}
/* radio → panel + active chip wiring is emitted per-page (needs the ids) */

/* ---------- terminal / code card ---------- */
.term{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow-lg)}
.term-bar{display:flex; align-items:center; justify-content:space-between; padding:11px 16px; background:var(--titlebar); border-bottom:1px solid #274034}
.term-bar .dots{display:flex; align-items:center; gap:8px}
.term-bar .dots i{width:11px; height:11px; border-radius:50%; display:inline-block}
.term-bar .fn{font-family:var(--mono); font-size:12px; color:#7f9a8c; margin-left:6px}
.copy-btn{font-family:var(--mono); font-size:12px; color:#dcece4; background:#1d3227; border:1px solid #2f4d3c; padding:5px 12px; border-radius:20px; cursor:pointer}
.copy-btn:hover{background:#254234}
.term pre{margin:0; padding:20px 22px; font-family:var(--mono); font-size:14px; line-height:1.9; color:var(--code); overflow-x:auto}
.term .c-comment{color:var(--c-comment)} .term .c-key{color:var(--c-key)} .term .c-flag{color:var(--c-flag)} .term .c-op{color:var(--c-op)} .term .c-prompt{color:var(--c-prompt)}

/* ---------- sponsor slots ---------- */
.sponsor-block .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta)}
.sponsor-block h3{font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); margin:6px 0 4px}
.sponsor-block .intro{font-size:14.5px; color:var(--body); margin:0 0 16px}
.sponsor-grid{display:grid; gap:12px}
.sponsor{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:12px; background:var(--panel); border:1px solid #274034; text-decoration:none; transition:border-color .15s}
.sponsor:hover{border-color:var(--green)}
.sponsor img{width:100%; height:52px; object-fit:contain; border-radius:6px}
.sponsor .sponsor-blurb{font-size:12.5px; line-height:1.45; color:#9fb3a8; font-family:var(--sans)}
.sponsor .sponsor-blurb:empty{display:none}
.sponsor-single{border:1px dashed var(--border-dash); border-radius:16px; padding:22px; background:var(--card)}
.sponsor-single .slot{border-radius:12px; overflow:hidden; margin:12px 0 14px}
.sponsor-single .slot img{width:100%; height:120px; object-fit:cover}
.sponsor-single p{font-size:13.5px; line-height:1.5; color:var(--body); margin:0 0 10px}
.sponsor-single a{font-family:var(--mono); font-size:13px; text-decoration:none}

/* code + sponsor row */
/* code + join row (50/50) */
.term-join{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch}
.term-join .term{align-self:start}
.term-join .join{margin:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; padding:clamp(28px,3vw,44px)}
.term-join .join .join-copy{display:flex; flex-direction:column; gap:12px}
.term-join .join form{max-width:none; width:100%; flex:0 0 auto; align-items:center}
.term-join .join input{padding:11px 15px; font-size:14px}
.term-join .join button{padding:11px 20px; font-size:14px}
.join-kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); margin:0}
.join-kicker .stdin{color:#fff; text-transform:none; letter-spacing:0}
.join-fine{font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.78); margin:0}
.code-sponsor{display:grid; grid-template-columns:1.3fr 1fr; gap:34px; align-items:start}

/* ---------- join / newsletter band ---------- */
.join{background:linear-gradient(140deg,var(--green),var(--green-deep)); border-radius:22px; padding:44px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
.join h2{color:#fff; font-size:clamp(26px,3vw,34px); font-weight:700; margin:0 0 10px}
.join p{font-size:16.5px; line-height:1.55; color:#d9f0e3; margin:0; max-width:48ch}
.join .stdin{font-family:var(--mono); font-weight:600}
.join form{display:flex; gap:10px; flex:1; min-width:280px; max-width:440px}
.join input{font:inherit; font-size:15px; padding:14px 16px; border-radius:24px; border:none; flex:1; color:var(--ink); font-family:var(--sans)}
.join button{font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 24px; border-radius:24px; border:none; background:var(--ink); color:#fff; cursor:pointer; white-space:nowrap}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--border); background:var(--paper-alt)}
.footer-inner{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding:44px 0}
.footer-brand{max-width:320px}
.footer-brand .brand{margin-bottom:12px}
.footer-brand p{font-size:14.5px; line-height:1.55; color:var(--meta); margin:0}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap}
.footer-cols h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin:0 0 13px}
.footer-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.footer-cols a{font-size:14.5px; color:#3a5148; text-decoration:none}
.footer-cols a:hover{color:var(--green)}
.footer-note{border-top:1px solid var(--border); padding:16px 0; font-family:var(--mono); font-size:12px; color:var(--meta)}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero{background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); border-bottom:1px solid var(--border)}
.post-hero-inner{padding:44px 0 40px}
.post-crumbs{font-family:var(--mono); font-size:12.5px; color:var(--meta); margin-bottom:16px}
.post-crumbs a{color:var(--meta); text-decoration:none}
.post-crumbs a:hover{color:var(--green)}
.post-hero h1{font-size:clamp(32px,4.4vw,54px); font-weight:700; max-width:20ch}
.post-hero .dek{font-size:20px; line-height:1.5; color:var(--body); max-width:60ch; margin:18px 0 0; font-style:italic}
.post-hero .byline{font-family:var(--mono); font-size:13.5px; color:var(--meta); margin-top:20px}
.post-figure{margin:0; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:21/9; margin-top:30px}
.post-figure img{width:100%; height:100%; object-fit:cover}

.article-body{max-width:none; padding-block:48px}
.article-grid{display:grid; grid-template-columns:1fr; gap:0}
/* reading measure carries its OWN inline padding */
.measure{max-width:76ch; margin:0 auto; padding-inline:clamp(20px,5vw,40px); font-size:20px; line-height:1.72; color:var(--body)}
.measure p{margin:0 0 1.35em}
.measure h2{font-family:var(--display); font-size:clamp(24px,2.6vw,32px); font-weight:700; color:var(--ink); margin:2.1em 0 .6em; letter-spacing:-.02em; scroll-margin-top:90px}
.measure h2 .sec-no{font-family:var(--mono); font-size:.5em; font-weight:600; color:var(--green); vertical-align:middle; margin-right:.7em; letter-spacing:.05em}
.measure h3{font-family:var(--display); font-size:22px; font-weight:600; color:var(--ink); margin:1.8em 0 .5em}
.measure strong{color:var(--ink); font-weight:600}
.measure a{color:var(--green-deep); text-underline-offset:3px; text-decoration-thickness:1px}
.measure code{font-family:var(--mono); font-size:.82em; background:var(--paper-alt); border:1px solid var(--border); border-radius:6px; padding:.08em .4em; color:var(--ink)}
.measure .lead{font-size:1.28em; line-height:1.5; color:var(--ink); font-family:var(--display); font-weight:500; letter-spacing:-.01em; margin-bottom:1.1em}
.measure .lead.dropcap::first-letter{float:left; font-family:var(--display); font-weight:700; font-size:3.4em; line-height:.78; padding:.05em .12em 0 0; color:var(--green)}

/* wide breakout for figures/components inside the measure */
.breakout{max-width:1080px; margin-inline:auto; margin-block:2.2em; padding-inline:clamp(20px,5vw,40px)}

/* inline components */
.lead{}
.pullquote{margin:2em 0; border:0; padding:0}
.pullquote p{font-family:var(--display); font-weight:600; font-size:1.5em; line-height:1.24; color:var(--ink); letter-spacing:-.02em; border-left:4px solid var(--green); padding-left:26px}
.blockquote{margin:2em 0; padding:22px 26px; background:var(--paper-alt); border-radius:14px; border:1px solid var(--border)}
.blockquote p{font-size:1.05em; line-height:1.5; color:var(--ink); margin:0}
.blockquote cite{display:block; margin-top:12px; font-family:var(--mono); font-size:.72em; font-style:normal; color:var(--meta)}
.callout{margin:2em 0; padding:22px 24px 22px 56px; background:var(--paper-alt); border:1px solid var(--border-dash); border-radius:14px; position:relative}
.callout::before{content:""; position:absolute; left:22px; top:24px; width:20px; height:20px; background:var(--green); border-radius:50%; box-shadow:0 0 0 5px rgba(47,160,110,.16)}
.callout::after{content:"i"; position:absolute; left:29px; top:23px; font-family:var(--display); font-weight:700; font-size:14px; color:#fff}
.callout p{margin:0; color:var(--ink); font-size:1em; line-height:1.55}
.note{margin:1.6em 0; padding:14px 18px 14px 20px; border-left:3px solid var(--amber-dot); background:#fbf3e3; border-radius:0 10px 10px 0; font-size:.95em; line-height:1.55; color:#5c4a2c}
.note strong{color:var(--amber-text)}

/* versus / datatable */
.versus,.datatable{width:100%; border-collapse:collapse; margin:0; font-size:.92em; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.versus caption,.datatable caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--meta); padding:0 0 10px}
.versus th,.datatable th{font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; text-align:left; color:var(--ink); background:var(--paper-alt); padding:13px 16px; border-bottom:1px solid var(--border)}
.versus td,.datatable td{padding:13px 16px; border-bottom:1px solid var(--border); color:var(--body); vertical-align:top}
.versus tr:last-child td,.datatable tr:last-child td{border-bottom:0}
.versus tbody th{background:var(--card); border-right:1px solid var(--border); font-family:var(--display); text-transform:none; letter-spacing:normal; font-size:1.02em}
.datatable tbody tr:nth-child(even) td{background:var(--paper-alt)}

/* statblocks */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:0}
.statblock{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 20px; text-align:left}
.stat-num{display:block; font-family:var(--display); font-weight:700; font-size:2.4em; line-height:1; color:var(--green); letter-spacing:-.03em}
.stat-label{display:block; margin-top:8px; font-size:.72em; line-height:1.4; color:var(--meta); font-family:var(--sans)}

/* timeline */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border)}
.timeline li{position:relative; padding:0 0 22px 34px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:var(--card); border:3px solid var(--green)}
.t-when{display:block; font-family:var(--mono); font-size:.72em; letter-spacing:.04em; text-transform:uppercase; color:var(--green-deep); font-weight:600}
.t-what{display:block; margin-top:4px; font-size:.95em; line-height:1.5; color:var(--body)}

/* charts */
.chart{margin:0; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 24px}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart figcaption{font-family:var(--mono); font-size:12px; color:var(--meta); margin-top:14px; letter-spacing:.03em}
.chart .bar-label{font-family:var(--mono); font-size:12px; fill:var(--body)}
.chart .bar-val{font-family:var(--mono); font-size:12px; fill:var(--meta)}
.chart .grid-line{stroke:var(--border)}

/* figures / gallery */
.article-figure{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--card)}
.article-figure img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article-figure figcaption{font-size:.8em; color:var(--meta); padding:12px 18px; line-height:1.5; font-family:var(--sans)}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.gallery figure{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--border)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery figcaption{font-size:.72em; color:var(--meta); padding:9px 12px; font-family:var(--sans)}

/* map figure (frame only) */
.map-figure{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--card)}
.map-figure .map-slot{aspect-ratio:16/9; background:repeating-linear-gradient(45deg,var(--paper-alt),var(--paper-alt) 12px,var(--card) 12px,var(--card) 24px); display:flex; align-items:center; justify-content:center; color:var(--meta); font-family:var(--mono); font-size:12px}
.map-figure .map-slot::after{content:"◆ locator map"}
.map-figure figcaption{font-size:.8em; color:var(--meta); padding:12px 18px; font-family:var(--sans)}

/* profile / org cards */
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:0}
.profile-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px}
.profile-card .p-photo{width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:12px}
.profile-card.no-photo::before{content:""; display:flex; width:52px; height:52px; border-radius:14px; margin-bottom:12px; background:var(--paper-alt); border:1px solid var(--border)}
.profile-card h3{font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink)}
.profile-card .p-role{font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--green); margin:4px 0 10px}
.profile-card p{font-size:.86em; line-height:1.55; color:var(--body); margin:0}
.profile-card .p-links{margin-top:12px; font-family:var(--mono); font-size:.78em}
.profile-card .p-links a{text-decoration:none}
.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.org-card{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--ink)}
.org-card:hover{border-color:var(--green)}
.org-card .org-logo,.org-card.no-logo::before{width:40px; height:40px; border-radius:10px; flex-shrink:0; object-fit:contain; background:var(--paper-alt); border:1px solid var(--border)}
.org-card.no-logo::before{content:""}
.org-card .org-name{font-family:var(--display); font-weight:600; font-size:15px; display:block}
.org-card .org-host{font-family:var(--mono); font-size:11.5px; color:var(--meta); display:block; margin-top:2px}
.entity-ref{font-weight:500; white-space:nowrap}

/* end-notes */
.note-ref{font-family:var(--mono); font-size:.68em; vertical-align:super; color:var(--green-deep); text-decoration:none; font-weight:600; padding:0 1px}
.note-ref:hover{text-decoration:underline}
.endnotes{margin-top:2.6em; padding-top:1.4em; border-top:1px solid var(--border)}
.endnotes h2{font-family:var(--mono); font-size:14px!important; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin:0 0 1em!important}
.endnotes ol{margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:.7em}
.endnotes li{font-size:.86em; line-height:1.55; color:var(--body); padding-left:6px}
.endnotes li::marker{font-family:var(--mono); color:var(--green-deep); font-size:.85em}

/* related */
.related{margin-top:2.6em; padding-top:1.4em; border-top:1px solid var(--border)}
.related h2{font-family:var(--display); font-size:22px!important; margin:0 0 1em!important}
.related-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.related-links a{display:block; padding:18px 20px; background:var(--card); border:1px solid var(--border); border-radius:14px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3; transition:border-color .15s,transform .12s}
.related-links a:hover{border-color:var(--green); transform:translateY(-2px)}
.related-links a .rl-cat{display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--green); margin-bottom:7px}
.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0}
.further-grid a{display:block; padding:16px 18px; background:var(--card); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--ink); font-weight:500}
.further-grid a:hover{border-color:var(--green)}

/* ============================================================
   CATEGORY / HUB PAGES
   ============================================================ */
.page-hero{background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); border-bottom:1px solid var(--border)}
.page-hero-inner{padding:52px 0 44px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(34px,4.4vw,54px); font-weight:700}
.page-hero .intro{font-size:20px; line-height:1.55; color:var(--body); max-width:60ch; margin:18px 0 0}
.cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.cat-list li{border-bottom:1px solid var(--border)}
.cat-list a{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline; padding:24px 4px; text-decoration:none; color:inherit; transition:padding .15s}
.cat-list a:hover{padding-left:14px}
.cat-list .cl-no{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--border-dash)}
.cat-list a:hover .cl-no{color:var(--green)}
.cat-list .cl-title{font-family:var(--display); font-weight:600; font-size:clamp(20px,2.2vw,26px); color:var(--ink); line-height:1.2}
.cat-list .cl-dek{font-size:15px; color:var(--body); margin-top:6px; max-width:70ch}
.cat-list .cl-meta{font-family:var(--mono); font-size:12.5px; color:var(--meta); white-space:nowrap; align-self:center}

/* sections hub */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
.hub-card{display:block; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:26px 28px; text-decoration:none; color:inherit; transition:transform .14s,box-shadow .16s,border-color .16s}
.hub-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--green)}
.hub-card .hc-no{font-family:var(--mono); font-size:13px; color:var(--green); letter-spacing:.1em}
.hub-card h2{font-family:var(--display); font-size:24px; font-weight:700; margin:8px 0 8px; color:var(--ink)}
.hub-card p{font-size:15px; line-height:1.55; color:var(--body); margin:0 0 14px}
.hub-card .hc-links{font-family:var(--mono); font-size:13px; color:var(--meta)}

/* simple prose page (about/contact/404) */
.prose{max-width:72ch; padding-block:52px}
.prose h2{font-family:var(--display); font-size:26px; margin:1.6em 0 .5em; color:var(--ink)}
.prose p{font-size:18px; line-height:1.7; margin:0 0 1.1em}
.prose a{color:var(--green-deep)}
.contact-methods{list-style:none; margin:1.4em 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.contact-methods li{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px}
.contact-methods svg{flex-shrink:0; color:var(--green); margin-top:2px}
.contact-methods b{display:block; font-family:var(--display); color:var(--ink); font-size:16px}
.contact-methods span{font-size:14px; color:var(--body)}
.notfound{text-align:center; padding:88px 0}
.notfound .code{font-family:var(--mono); font-size:76px; font-weight:700; color:var(--green); letter-spacing:-.02em}
.notfound h1{font-size:34px; margin:8px 0 14px}
.notfound p{font-size:18px; color:var(--body); margin:0 0 26px}

/* ============================================================
   STYLEGUIDE
   ============================================================ */
.sg-section{padding:36px 0; border-bottom:1px solid var(--border)}
.sg-section>h2{font-family:var(--display); font-size:26px; margin-bottom:6px}
.sg-section>.sg-note{font-family:var(--mono); font-size:12.5px; color:var(--meta); margin:0 0 24px}
.sg-demo{margin:0 0 28px}
.sg-demo>h3{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin:0 0 14px}
.sg-swatches{display:flex; flex-wrap:wrap; gap:14px}
.sw{width:120px}
.sw .chip{height:64px; border-radius:12px; border:1px solid var(--border)}
.sw .nm{font-family:var(--mono); font-size:11px; color:var(--meta); margin-top:6px; display:block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; gap:32px}
  .code-sponsor{grid-template-columns:1fr}
  .term-join{grid-template-columns:1fr}
  .distro-module{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  /* mobile nav drawer */
  .nav-toggle-label{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--card); cursor:pointer; color:var(--ink)}
  .nav-toggle-label .bars,.nav-toggle-label .bars::before,.nav-toggle-label .bars::after{content:""; display:block; width:20px; height:2px; background:currentColor; position:relative}
  .nav-toggle-label .bars::before{position:absolute; top:-6px} .nav-toggle-label .bars::after{position:absolute; top:6px}
  .main-nav{position:fixed; inset:64px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--border); max-height:0; overflow:hidden; transition:max-height .28s ease; box-shadow:var(--shadow-lg)}
  .nav-toggle:checked ~ .main-nav{max-height:85vh; overflow-y:auto}
  .main-nav>ul{flex-direction:column; gap:0; padding:8px clamp(20px,5vw,48px) 20px}
  .main-nav li{border-bottom:1px solid var(--border)}
  .main-nav .top-link{padding:15px 4px; font-size:17px; border-radius:0}
  .main-nav li.has-sub>.top-link::after{margin-left:auto}
  .nav-sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; min-width:0; padding:0 0 10px 12px; background:transparent}
  .header-spacer{display:none}
  .brand{margin-right:auto}
}
@media (max-width:720px){
  body{font-size:17px}
  .card-grid{grid-template-columns:1fr}
  .band{padding:40px 0}
  .band-head{flex-direction:column; align-items:flex-start; gap:8px}
  .join{padding:30px; flex-direction:column; align-items:flex-start}
  .join form{max-width:none; width:100%}
  .hero .cta-row .btn{flex:1; justify-content:center}
  .measure{font-size:18px}
  .footer-inner{flex-direction:column; gap:28px}
  .footer-cols{gap:36px}
  .post-figure{aspect-ratio:16/10}
  .distro-meta{gap:16px 24px}
}
@media (max-width:380px){
  .brand .word{font-size:18px}
  .measure{padding-inline:18px}
  .notfound .code{font-size:60px}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sp-domain.sp-domain{color:rgb(43,156,104)!important;opacity:1!important}

/* op-mobile-collapse: at 390px the money grid kept THREE content-sized columns (136+148+156 plus
   gaps = 464px in a 350px band), so the band pushed the page 420px wider than the phone. One
   column below 640px; the desktop layout is untouched. */
@media (max-width:640px){
  .sponsor-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* op-mobile-child-width: behind the grid fix a second, smaller overflow remained (+12): the
   children of .wrap-wide are 382px wide but start 20px in from its padding, so they end 12px past
   the screen. They are sized against the padding box rather than the content box. */
@media (max-width:640px){
  .wrap-wide > div{max-width:100%!important;min-width:0!important;box-sizing:border-box!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){
  /* .header-inner belongs in this list and my sweep missed it: `.header-inner{padding:13px 0}`
     cancels `.wrap-wide`'s gutter exactly like the others, but the detector only flagged hosts
     whose TEXT came within 2px of the edge and the ">_" brand mark sits at x=7. Operator:
     "header still sticky to left edge and right, no padding." */
  .wrap-wide.header-inner{padding-inline:clamp(20px,5vw,48px)}
  .wrap-wide.hero-inner{padding-inline:clamp(20px,5vw,48px)}
  .wrap-wide.topics-inner{padding-inline:clamp(20px,5vw,48px)}
  .wrap-wide.footer-inner{padding-inline:clamp(20px,5vw,48px)}
  .wrap-wide.footer-note{padding-inline:clamp(20px,5vw,48px)}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2068px at 390, 25% of the whole page. Two columns bring it to
   1103px (47% shorter). Checked before writing: no new overflow, smallest mark still
   137px wide, longest blurb 3 lines, tile heights 155-215px.
   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. 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:12px!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-edge-gutter: copy sat against the screen edge at phone width — p.eyebrow, div.wrap.page-hero-inner > h1, p.intro — with no gutter at all
   (19 runs of text measured within 2px of the glass; 19 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 20px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  p.eyebrow{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
  div.wrap.page-hero-inner > h1{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
  p.intro{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}

/* op-article-width: the article column was capped at 832px (94 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 76ch (declared in .measure) 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.measure{max-width:min(982px, 100%)!important}
}
@media (min-width:1600px){
  div.measure{max-width:min(clamp(982px, 68.194vw, 1178px), 100%)!important}
  div.measure > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!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-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-grid 8 rows at 768). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; margin: 0px;}
.measure h2:where(.rt-h3){font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); margin: 1.8em 0px 0.5em;}
.profile-card h2:where(.rt-h3){font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink);}
/* 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:901px) and (max-width:1399px){
  div.wrap-wide.footer-inner{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  div.wrap-wide.topics-inner{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  footer.site-footer{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  footer.site-footer div.wrap-wide.footer-inner{padding-left:0;padding-right:0}
}
@media (min-width:1001px) and (max-width:1399px){
  div.wrap-wide.hero-inner{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
}
@media (min-width:901px) and (max-width:1099px){
  div.wrap-wide.hero-inner > div{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
}
@media (min-width:681px) and (max-width:1299px){
  div.wrap.page-hero-inner{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  div.wrap.post-hero-inner{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  nav.post-crumbs{padding-left:max(clamp(20px,5vw,48px), 18px);padding-right:max(clamp(20px,5vw,48px), 18px)}
  div.wrap.post-hero-inner nav.post-crumbs{padding-left:0;padding-right:0}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.thumb > img,
  div.breakout > figure.article-figure > img,
  div.hero-inner.wrap-wide > figure.hero-media > img,
  div.post-hero-inner.wrap > figure.post-figure > 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 */
.measure pre{overflow-x:auto!important;max-width:100%}