/* ============ MochiKit — code-editor dark design system ============ */


:root{
  --bg:#16181D; --bg2:#0F1115; --panel:#1C1F26; --panel2:#22262F;
  --ink:#E4E8F0; --head:#F5F7FB; --muted:#96A1B3; --dim:#6A7484;
  --green:#46D19E; --amber:#E0A54B; --cyan:#5AB4D0; --violet:#B98CE0; --coral:#D07A6A;
  --line:#262A33; --line2:#333844;
  --accent:var(--green);
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1240px;
}
html.light{
  --bg:#F4F1EA; --bg2:#EAE6DC; --panel:#FFFFFF; --panel2:#F1EDE4;
  --ink:#282B31; --head:#12141A; --muted:#586274; --dim:#8B93A1;
  --green:#128A61; --amber:#A66E19; --cyan:#2C7FA0; --violet:#7048A8; --coral:#AE4C39;
  --line:#E0DACE; --line2:#D0C9B9;
}
html.light .article-body>p,
html.light .article-body ul,
html.light .article-body ol,
html.light .article-body li{color:var(--ink);}
html.light .tok .k{color:#8250DF;}
html.light .hero-fig figcaption{color:#EAEEF4;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--head);}
h1,h2,h3,h4{font-family:var(--display); color:var(--head); line-height:1.1; letter-spacing:-.015em; margin:0;}
p{margin:0 0 1.25em; text-wrap:pretty;}
code,kbd,pre{font-family:var(--mono);}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,5vw,56px);}
.mono{font-family:var(--mono);}
.kicker{font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.theme-toggle{padding:8px 10px; line-height:0;}
.theme-toggle svg{display:block;}
.site-head .wrap{display:flex; align-items:center; gap:24px; height:70px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--head);}
.brand .prompt{font-family:var(--mono); font-weight:700; font-size:15px; color:var(--green); background:rgba(70,209,158,.12); border:1px solid rgba(70,209,158,.32); border-radius:8px; padding:5px 9px;}
.brand:hover{color:var(--head);}
.nav{display:flex; gap:26px; margin-left:8px; flex:1;}
.nav a{color:var(--muted); font-size:15.5px; white-space:nowrap;}
.nav a:hover,.nav a.active{color:var(--head);}
.nav a.active{color:var(--accent);}
.head-cta{display:flex; align-items:center; gap:16px;}
.head-cta .kbd{font-family:var(--mono); font-size:13px; color:var(--dim);}
.btn{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--bg); background:var(--accent); padding:9px 16px; border-radius:9px; border:0; cursor:pointer; white-space:nowrap;}
.btn:hover{color:var(--bg); filter:brightness(1.08);}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line2);}
.btn.ghost:hover{color:var(--head); border-color:var(--dim);}
.nav-toggle{display:none;}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg2); margin-top:80px;}
.site-foot .wrap{padding-block:52px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{color:var(--muted); font-size:15.5px; max-width:42ch;}
.foot-col h4{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:16px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.foot-col a{color:var(--muted); font-size:15.5px;}
.foot-col a:hover{color:var(--head);}
.foot-base{border-top:1px solid var(--line); }
.foot-base .wrap{padding-block:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; color:var(--dim);}

/* ---------- home hero ---------- */
.hero{border-bottom:1px solid var(--line); background:radial-gradient(120% 150% at 12% 0%, rgba(70,209,158,.08), transparent 55%);}
.hero .wrap{padding-block:64px 60px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.hero h1{font-size:clamp(38px,4.6vw,60px); margin:18px 0; text-wrap:balance;}
.hero .dek{font-size:21px; line-height:1.55; color:var(--muted); margin:0 0 26px; max-width:54ch;}
.hero-meta{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:14px; color:var(--dim); flex-wrap:wrap;}
.hero-meta .by{color:var(--ink);}
.hero-fig{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line2); aspect-ratio:16/10; background:var(--panel);}
.hero-fig img{width:100%; height:100%; object-fit:cover;}
.hero-fig figcaption{position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px; font-size:13.5px; color:#cfd6e0; background:linear-gradient(to top,rgba(9,10,13,.9),transparent); font-family:var(--mono);}

/* ---------- section rhythm ---------- */
.band{padding-block:64px;}
.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px;}
.band-head h2{font-size:clamp(26px,2.6vw,34px);}
.band-head .kicker{margin-bottom:10px;}
.band-head a{font-family:var(--mono); font-size:14px;}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* ---------- cards ---------- */
.card-grid{display:grid; gap:22px;}
.card-grid.c3{grid-template-columns:repeat(3,1fr);}
.card-grid.c2{grid-template-columns:repeat(2,1fr);}
.card{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line2); border-radius:13px; overflow:hidden; transition:border-color .15s, transform .15s;}
.card:hover{border-color:var(--dim); transform:translateY(-2px);}
.card .thumb{aspect-ratio:16/9; background:var(--panel2); overflow:hidden; border-bottom:1px solid var(--line);}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.tag{align-self:flex-start; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:6px;}
.tag.javascript{color:#46D19E; background:rgba(70,209,158,.12);}
.tag.frameworks{color:#E0A54B; background:rgba(224,165,75,.13);}
.tag.backend{color:#5AB4D0; background:rgba(90,180,208,.13);}
.tag.tooling{color:#B98CE0; background:rgba(185,140,224,.13);}
.tag.learning{color:#D07A6A; background:rgba(208,122,106,.14);}
.card h3{font-size:19.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card h3 a{color:var(--head);}
.card h3 a:hover{color:var(--accent);}
.card .excerpt{color:var(--muted); font-size:15px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0;}
.card .meta{margin-top:auto; padding-top:6px; font-family:var(--mono); font-size:12.5px; color:var(--dim);}

/* feature row (lead card) */
.feature{display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--panel); border:1px solid var(--line2); border-radius:14px; overflow:hidden;}
.feature .thumb{aspect-ratio:auto; border-bottom:0; min-height:280px;}
.feature .body{padding:34px 36px; justify-content:center; gap:14px;}
.feature h3{font-size:28px; -webkit-line-clamp:3;}

/* ---------- which one when ---------- */
.wow-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.wow{background:var(--panel); border:1px solid var(--line2); border-radius:13px; padding:24px;}
.wow-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.wow-vs{font-family:var(--mono); font-size:13px; color:var(--dim);}
.wow-name{font-family:var(--display); font-weight:600; font-size:20px;}
.wow-a{color:var(--green);} .wow-b{color:var(--amber);}
.wow-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.wow-cols>div>span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:7px;}
.wow-cols>div>p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.5;}
.wow-pick{border-top:1px solid var(--line); padding-top:14px; font-size:14.5px; color:var(--ink);}
.wow-pick b{color:var(--head); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:5px; color:var(--dim);}

/* ---------- tribute ---------- */
.tribute{background:linear-gradient(135deg,rgba(70,209,158,.07),rgba(90,180,208,.05)); border:1px solid var(--line2); border-radius:16px; padding:40px 42px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;}
.tribute .glyph{font-family:var(--mono); font-size:46px; font-weight:700; color:var(--green);}
.tribute h2{font-size:26px; margin:12px 0;}
.tribute p{color:var(--muted); font-size:16.5px; line-height:1.65; margin:0; max-width:74ch;}
.tribute .kicker{color:var(--amber);}

/* ---------- sponsors ---------- */
.sponsors-featured{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.sponsor{display:flex; flex-direction:column; gap:12px; background:var(--bg2); border:1px solid var(--line2); border-radius:12px; padding:22px; transition:border-color .15s;}
.sponsor:hover{border-color:var(--dim);}
.sponsor img{width:100%; height:64px; object-fit:contain; object-position:center center; background:#0B0C10; border-radius:8px;}
.sponsors-featured .sponsor img{height:74px;}
.sponsor-blurb{color:var(--muted); font-size:14px; line-height:1.5; min-height:1.2em;}
.sponsors-regulars{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:22px;}
.sponsors-regulars .sponsor{padding:16px; gap:8px;}
.sponsors-regulars .sponsor img{height:40px;}
.sponsors-regulars .sponsor-blurb{font-size:12.5px;}

/* ---------- browse / category chips ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{font-family:var(--mono); font-size:13.5px; padding:8px 15px; border-radius:22px; border:1px solid var(--line2); color:var(--muted); cursor:pointer;}
.chip:hover{color:var(--head); border-color:var(--dim);}
.chip.active{background:var(--accent); color:var(--bg); border-color:transparent; font-weight:500;}

/* ---------- category / index list ---------- */
.section-hero{border-bottom:1px solid var(--line); background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 10%, transparent),transparent 60%);}
.section-hero .wrap{padding-block:60px 46px;}
.section-hero h1{font-size:clamp(34px,4vw,52px); margin:14px 0;}
.section-hero p{font-size:20px; color:var(--muted); max-width:60ch; margin:0;}
.cat-list{list-style:none; margin:0; padding:0;}
.cat-list li{border-bottom:1px solid var(--line);}
.cat-list a{display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:center; padding:24px 0; color:var(--ink);}
.cat-list a:hover .ci-title{color:var(--accent);}
.ci-thumb{aspect-ratio:16/10; border-radius:10px; overflow:hidden; border:1px solid var(--line2); background:var(--panel2);}
.ci-thumb img{width:100%; height:100%; object-fit:cover;}
.ci-title{font-family:var(--display); font-weight:600; font-size:22px; color:var(--head); line-height:1.2; margin:0 0 8px;}
.ci-dek{color:var(--muted); font-size:15.5px; margin:0; max-width:64ch;}
.ci-meta{font-family:var(--mono); font-size:12.5px; color:var(--dim); white-space:nowrap;}

/* ---------- article ---------- */
.article-hero{border-bottom:1px solid var(--line);}
.article-hero .wrap{padding-block:56px 0; max-width:1080px;}
.article-head{max-width:800px;}
.article-head h1{font-size:clamp(34px,4.4vw,54px); margin:18px 0; text-wrap:balance;}
.article-head .dek{font-size:22px; line-height:1.5; color:var(--muted); margin:0 0 24px;}
.article-byline{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:14px; color:var(--dim); padding-bottom:34px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.article-byline .by{color:var(--ink);}
.article-figure.hero-figure{max-width:1080px; margin:36px auto 0;}
.article-figure.hero-figure img{aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:13px; border:1px solid var(--line2);}

.article-body{
  display:grid;
  grid-template-columns:[full-start] minmax(20px,1fr) [main-start] minmax(0,760px) [main-end] minmax(20px,1fr) [full-end];
  padding-block:48px 20px;
  counter-reset:sec;
  font-size:20px; line-height:1.78;
}
.article-body>*{grid-column:main-start/main-end;}
.article-body>.breakout{grid-column:full-start/full-end; justify-self:center; width:min(1000px,100%); padding-inline:clamp(20px,5vw,20px);}
.article-body>p{color:#DDE3EC;}
.article-body h2{grid-column:main-start/main-end; font-size:30px; margin:2.2em 0 .7em; padding-top:.4em; position:relative;}
.article-body h2::before{counter-increment:sec; content:counter(sec,decimal-leading-zero); display:block; font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--accent); margin-bottom:12px;}
.article-body h3{font-size:22px; margin:1.6em 0 .5em;}
.article-body p:first-of-type::first-letter,.article-body>.lead+p::first-letter{}
.article-body .lead{font-family:var(--display); font-weight:400; font-size:25px; line-height:1.45; color:var(--head); margin-bottom:1em;}
.dropcap::first-letter{font-family:var(--display); font-weight:700; font-size:4.4em; line-height:.78; float:left; padding:.06em .12em 0 0; color:var(--accent);}
.article-body a{border-bottom:1px solid color-mix(in oklab,var(--accent) 45%, transparent);}
.article-body a:hover{border-bottom-color:var(--accent);}
.article-body code{font-size:.85em; color:var(--green); background:var(--panel); padding:2px 6px; border-radius:5px;}
.article-body ul,.article-body ol{color:#DDE3EC; padding-left:1.3em; margin:0 0 1.25em;}
.article-body li{margin-bottom:.5em;}

/* code block */
.codeblock{background:var(--bg2); border:1px solid var(--line2); border-radius:12px; overflow:hidden; margin:1.6em 0;}
.codeblock .cb-bar{display:flex; align-items:center; gap:7px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel);}
.codeblock .cb-bar i{width:9px; height:9px; border-radius:50%; display:inline-block;}
.cb-bar i.r{background:#FF5F57;} .cb-bar i.y{background:#FEBC2E;} .cb-bar i.g{background:#28C840;}
.codeblock .cb-name{margin-left:8px; font-family:var(--mono); font-size:12.5px; color:var(--dim);}
.codeblock pre{margin:0; padding:20px 22px; overflow-x:auto; font-size:14.5px; line-height:1.7;}
.codeblock code{background:none; color:var(--ink); padding:0; font-size:inherit;}
.tok .k{color:#C792EA;} .tok .s{color:var(--green);} .tok .c{color:var(--dim); font-style:italic;}
.tok .n{color:var(--amber);} .tok .t{color:var(--amber);} .tok .fn{color:var(--cyan);}

/* ---------- PALETTE_SPEC components ---------- */
.lead{font-size:22px; line-height:1.55; color:var(--head);}
.pullquote{margin:1.8em 0; border:0; padding:0;}
.pullquote p{font-family:var(--display); font-weight:600; font-size:29px; line-height:1.32; color:var(--head); margin:0; text-wrap:balance;}
.pullquote p::before{content:"“"; color:var(--accent);}
.pullquote p::after{content:"”"; color:var(--accent);}
.blockquote{margin:1.6em 0; padding:20px 26px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 10px 10px 0;}
.blockquote p{font-size:19px; font-style:italic; color:var(--ink); margin:0 0 .5em;}
.blockquote cite{font-family:var(--mono); font-style:normal; font-size:13.5px; color:var(--dim);}
.callout{margin:1.6em 0; padding:22px 26px; background:linear-gradient(135deg,rgba(70,209,158,.09),transparent); border:1px solid var(--line2); border-left:3px solid var(--accent); border-radius:0 12px 12px 0;}
.callout p{margin:0; font-size:17px; color:var(--ink); line-height:1.6;}
.callout p:first-child::before{content:"KEY TAKEAWAY"; display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); margin-bottom:9px;}
.note{margin:1.4em 0; padding:14px 18px 14px 44px; position:relative; font-size:16px; color:var(--muted); background:var(--panel); border-radius:10px; border:1px solid var(--line);}
.note::before{content:"i"; position:absolute; left:16px; top:14px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--bg); font-family:var(--mono); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}

/* versus */
.versus{width:100%; border-collapse:collapse; margin:1.6em 0; border:1px solid var(--line2); border-radius:12px; overflow:hidden; font-size:16px;}
.versus th{font-family:var(--display); font-weight:600; font-size:18px; text-align:left; padding:15px 20px; background:var(--panel); color:var(--head); border-bottom:1px solid var(--line2);}
.versus th:first-child{color:var(--green);} .versus th:last-child{color:var(--amber);}
.versus td{padding:14px 20px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; line-height:1.5;}
.versus td+td{border-left:1px solid var(--line);}
.versus tr:last-child td{border-bottom:0;}
.versus caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:10px;}

/* datatable */
.datatable{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:16px; border:1px solid var(--line2); border-radius:12px; overflow:hidden;}
.datatable caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:10px;}
.datatable th{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:13px 18px; background:var(--panel); color:var(--dim); border-bottom:1px solid var(--line2);}
.datatable td{padding:13px 18px; border-bottom:1px solid var(--line); color:var(--ink);}
.datatable tr:last-child td{border-bottom:0;}
.datatable tbody tr:hover{background:rgba(255,255,255,.02);}
.datatable td:first-child{color:var(--head); font-weight:500;}

/* statblock */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:1.6em 0;}
.statblock{background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:22px; text-align:center;}
.stat-num{display:block; font-family:var(--display); font-weight:700; font-size:40px; color:var(--accent); line-height:1;}
.stat-label{display:block; margin-top:9px; font-size:14px; color:var(--muted); line-height:1.4;}

/* timeline */
.timeline{list-style:none; margin:1.6em 0; padding:0; border-left:2px solid var(--line2);}
.timeline li{position:relative; padding:0 0 22px 26px;}
.timeline li::before{content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--bg);}
.timeline li:last-child{padding-bottom:0;}
.t-when{display:block; font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:5px;}
.t-what{display:block; color:var(--ink); font-size:16.5px; line-height:1.5;}

/* charts */
.chart{margin:1.8em 0;}
.chart svg{width:100%; height:auto; display:block;}
.chart.donut svg{width:220px; max-width:100%; margin:0 auto;}
.chart figcaption{margin-top:12px; font-family:var(--mono); font-size:13px; color:var(--dim); text-align:center;}
.chart .bar-rect{fill:var(--accent);}
.chart .bar-label{fill:var(--muted); font-family:var(--mono); font-size:12px;}
.chart .bar-val{fill:var(--head); font-family:var(--mono); font-size:12px;}
.chart .axis{stroke:var(--line2); stroke-width:1;}
.chart .grid{stroke:var(--line); stroke-width:1;}
.chart .line-path{fill:none; stroke:var(--accent); stroke-width:2.5;}
.chart .line-dot{fill:var(--amber);}

/* figures */
.article-figure{margin:1.8em 0;}
.article-figure img{width:100%; border-radius:12px; border:1px solid var(--line2); aspect-ratio:16/9; object-fit:cover;}
.article-figure figcaption{margin-top:12px; font-family:var(--mono); font-size:13.5px; color:var(--dim); line-height:1.5;}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:1.8em 0;}
.gallery figure{margin:0;}
.gallery img{aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line2);}
.gallery figcaption{margin-top:7px; font-family:var(--mono); font-size:12px; color:var(--dim);}

/* map */
.map-figure{margin:1.8em 0;}
.map-slot{aspect-ratio:16/9; border-radius:12px; border:1px dashed var(--line2); background:var(--panel2) repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.015) 12px,rgba(255,255,255,.015) 24px); display:flex; align-items:center; justify-content:center; color:var(--dim); font-family:var(--mono); font-size:13px;}
.map-figure figcaption{margin-top:12px; font-family:var(--mono); font-size:13.5px; color:var(--dim);}

/* profile / org cards */
.profile-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:1.8em 0;}
.profile-card{background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:8px;}
.profile-card .p-photo{width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:6px;}
.profile-card.no-photo::before{content:""; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--cyan)); margin-bottom:6px;}
.profile-card h3{font-size:19px;}
.p-role{font-family:var(--mono); font-size:12.5px; color:var(--accent); margin:0;}
.profile-card p{font-size:15px; color:var(--muted); margin:0; line-height:1.55;}
.p-links{display:flex; gap:14px; flex-wrap:wrap;}
.p-links a{font-family:var(--mono); font-size:13px;}
.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:1.8em 0;}
.org-card{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:14px 16px;}
.org-card:hover{border-color:var(--dim);}
.org-logo{width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--bg2);}
.org-card.no-logo .org-logo{background:linear-gradient(135deg,var(--accent),var(--violet));}
.org-name{font-family:var(--display); font-weight:600; color:var(--head); font-size:16px; display:block;}
.org-host{font-family:var(--mono); font-size:12px; color:var(--dim);}
.entity-ref{font-family:var(--mono); font-size:.9em; border-bottom:1px solid color-mix(in oklab,var(--accent) 40%, transparent);}

/* related / further */
.further-grid,.related-links{margin:0;}
.related{margin-top:56px; padding-top:36px; border-top:1px solid var(--line);}
.related h2{font-family:var(--display); font-size:24px; margin-bottom:22px;}
.related-links{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.related-links a{display:flex; flex-direction:column; gap:8px; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:20px; color:var(--ink);}
.related-links a:hover{border-color:var(--dim);}
.related-links .rl-tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.related-links .rl-title{font-family:var(--display); font-weight:600; font-size:17.5px; color:var(--head); line-height:1.25;}
.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.further-grid a{background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:16px; color:var(--head); font-family:var(--display); font-weight:500;}

/* endnotes */
.noteref{font-family:var(--mono); font-size:.7em; vertical-align:super; color:var(--accent); padding:0 1px; border:0;}
.endnotes{margin-top:52px; padding-top:32px; border-top:1px solid var(--line);}
.endnotes h2{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:20px;}
.endnotes ol{padding-left:1.4em; margin:0; color:var(--muted);}
.endnotes li{margin-bottom:14px; font-size:16px; line-height:1.6; padding-left:6px;}
.endnotes li::marker{color:var(--accent); font-family:var(--mono); font-size:13px;}

/* simple page (about/contact/404) */
.page-body{max-width:760px; margin:0 auto; padding-block:56px; font-size:19px; line-height:1.75;}
.page-body h1{font-size:clamp(32px,4vw,46px); margin-bottom:20px;}
.page-body h2{font-size:26px; margin:1.6em 0 .5em;}
.page-body a{border-bottom:1px solid color-mix(in oklab,var(--accent) 45%, transparent);}
.contact-methods{list-style:none; padding:0; margin:1.4em 0; display:grid; gap:12px;}
.contact-methods li{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:16px 20px;}
.contact-methods svg{flex:none; color:var(--accent);}
.big404{font-family:var(--mono); font-weight:700; font-size:clamp(80px,18vw,180px); color:var(--accent); line-height:.9; margin-bottom:12px;}

/* styleguide */
.sg-section{padding-block:44px; border-bottom:1px solid var(--line);}
.sg-section>.wrap>h2{font-size:28px; margin-bottom:6px;}
.sg-section .sg-note{font-family:var(--mono); font-size:13px; color:var(--dim); margin-bottom:26px;}
.sg-swatches{display:flex; gap:14px; flex-wrap:wrap;}
.sg-swatch{width:120px;}
.sg-swatch .chip-color{height:64px; border-radius:10px; border:1px solid var(--line2);}
.sg-swatch span{display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{font-size:17px;}
  .hero .wrap,.feature{grid-template-columns:1fr;}
  .feature .thumb{min-height:220px;}
  .card-grid.c3,.wow-grid,.sponsors-featured{grid-template-columns:1fr 1fr;}
  .sponsors-regulars{grid-template-columns:repeat(3,1fr);}
  .site-foot .wrap{grid-template-columns:1fr 1fr;}
  .article-body{font-size:18px;}
  .profile-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav,.head-cta .kbd{display:none;}
  .nav-toggle{display:inline-flex; margin-left:auto;}
  .nav.open{display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg2); border-bottom:1px solid var(--line); padding:8px 0;}
  .nav.open a{padding:12px clamp(20px,5vw,56px);}
  .card-grid.c3,.card-grid.c2,.wow-grid,.sponsors-featured,.gallery,.related-links{grid-template-columns:1fr;}
  .sponsors-regulars{grid-template-columns:1fr 1fr;}
  .site-foot .wrap{grid-template-columns:1fr;}
  .cat-list a{grid-template-columns:1fr; gap:12px;}
  .cat-list .ci-thumb{max-width:none;}
  .ci-meta{order:3;}
  .article-body .pullquote p{font-size:23px;}
  .article-body h2{font-size:25px;}
  .versus,.datatable{font-size:14px;}
  .versus th,.versus td,.datatable th,.datatable td{padding:11px 13px;}
}

/* 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-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-featured .sponsor.sponsor img{box-sizing:border-box!important;padding:12px 19px!important}
.sponsors-regulars .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 12px!important}

/* op-regulars-4up: operator asked for four per row. The regulars run was five columns against the
   featured run's three; Design's ladder already steps it to 3 at 900px and 2 at 640px, so only
   the widest step changes. Ten regulars now lay out 4/4/2. */
@media (min-width:901px){
  .sponsors-regulars{grid-template-columns:repeat(4,1fr)}
}

/* op-mobile-pre: a <code> block inside pre.tok with white-space:pre cannot wrap, so a long line
   pushed the page 49px wider. The <pre> scrolls instead — code keeps its line breaks, which is
   the point of a code block. */
@media (max-width:640px){
  pre.tok{overflow-x:auto!important;max-width:100%!important}
}
/* ⚠️ THE PREVIOUS BLOCK DID NOTHING ON ITS OWN. A flex or grid item defaults to min-width:auto,
   which means it cannot shrink below its content's min-content width — so the scroll container
   kept being stretched to the child's own min-width (640px / 1400px / 560px) and overflow-x:auto
   had nothing to scroll. min-width:0 has to travel up the chain from the scroller to its
   formatting context, which is what actually lets the container narrow to the column. */
@media (max-width:640px){
  .plan-scroll,.alm-scroll,.waterband__fig,.map-figure,pre.tok,
  .plan-scroll *,.alm-scroll > *,
  figure,section,article,main,div[class*="scroll"],div[class*="pair"],div[class*="band"]{min-width:0!important}
  img,svg,table,pre,code,figure{max-width:100%!important}
}

/* op-head-row-fit: the header row could not fit on a phone and pushed the page 63px wide.
   Measured at 390: header.site-head > div.wrap is display:flex, flex-wrap:nowrap, gap:24px,
   holding a.brand 142px + div.head-cta 238px = 404px of content in a 390px row. The cta's
   three buttons are each white-space:nowrap, so nothing could give.
   The cta is allowed to wrap its own buttons, which is enough to bring the row inside the
   viewport without moving the brand or changing the desktop bar. */
@media (max-width:640px){
  .site-head .head-cta{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
}

/* op-tile-ground-off: operator — "there is extra background for adult insertions thats not
   needed". Design gives each money tile its own panel, `.sponsor{background:var(--bg2)}`,
   which in the default dark theme is #0F1115 on a #16181D page ground: a box a shade darker
   than the page, on top of the near-black plate the mark already sits on. The tile ground is
   dropped; Design's 1px border and 12px radius stay, so the tiles are still delineated, and
   the mark's own plate is untouched (it is what keeps dark logos visible in the light theme). */
.sponsors-featured .sponsor,.sponsors-regulars .sponsor{background:transparent}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 795px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 795 -> 595px (25% 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(11px,2.78vw,40px)!important;row-gap:6px!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 — 13 tiles,
   1591px at 390, 15% of the whole page. Two columns bring it to
   1399px (12% shorter). Checked before writing: no new overflow, smallest mark still
   122px wide, longest blurb 6 lines, tile heights 176-195px.
   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 (.sponsors-featured), 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-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsors-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-featured > * *{min-width:0!important;max-width:100%}
    .sponsors-featured img,.sponsors-featured svg{max-width:100%;height:auto}
  .sponsors-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 991px of tier across
   10 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-regulars .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 760px (87 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "[full-start] minmax(20px, 1fr) [main-start] minmax(0px, 760px) [main-end] minmax(20px, 1fr) [full-end]" (declared in .article-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){
  article.article-body{grid-template-columns:[full-start] minmax(20px, 1fr) [main-start] min(886px, 100%) [main-end] minmax(20px, 1fr) [full-end]!important}
}
@media (min-width:1600px){
  article.article-body{grid-template-columns:[full-start] minmax(20px, 1fr) [main-start] min(clamp(886px, 61.528vw, 1063px), 100%) [main-end] minmax(20px, 1fr) [full-end]!important}
  article.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.ci-thumb > img,
  a.card > span.thumb > img,
  div.wrap > figure.article-figure.hero-figure > img,
  div.wrap > figure.hero-fig > img){height:auto}
/* op-img-dims:end */
@media (min-width:641px) and (max-width:979px){.nav, .head-cta .kbd { display: none; }.nav-toggle { display: inline-flex; margin-left: auto; }.nav.open { display: flex; position: absolute; top: 70px; left: 0px; right: 0px; flex-direction: column; gap: 0px; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 8px 0px; }.nav.open a { padding: 12px clamp(20px, 5vw, 56px); }.site-head .head-cta { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }}
@media (min-width:641px) and (max-width:979px){.site-head .wrap > .head-cta{margin-left:auto!important}}
.sponsors-featured > [data-partner] img{background:transparent!important}.sponsors-regulars > [data-partner] img{background:transparent!important}