/* California Supplies — warm-paper pixel pastoral. One stylesheet, no build step. */
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/HankenGrotesk-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Departure Mono";src:url(/fonts/DepartureMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --surface:#f5f5f2;--surface-raised:#fbfbf8;--surface-darker:#e7e7e3;--surface-hover:#ededea;
  --fg:#171717;--ink:rgba(38,35,35,.8);--ink-strong:rgba(38,35,35,.9);--ink-muted:rgba(38,35,35,.7);--ink-faint:rgba(38,35,35,.5);--ink-ghost:rgba(38,35,35,.32);
  --border:rgba(32,32,32,.1);--border-card:#dee2de;--hair:rgba(32,32,32,.08);
  --sky:#1a6fd1;--sky-light:#1e9ef1;--success:#34a853;--warn:#f59e0b;--hot:#ff672f;--lime:#bbf451;--info-tint:#dae9fb;
  --font-sans:"Hanken Grotesk",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--font-pixel:"Departure Mono","IBM Plex Mono",monospace;
  --radius-sm:4px;--radius:8px;--radius-card:10px;--radius-lg:16px;
  --shadow-btn-light:0 2px 3px rgba(0,0,0,.06),inset 0 0 .357px 1.5px rgba(255,255,255,.35),inset 0 2px 0 #fff;
  --shadow-btn-dark:0 0 0 1px rgba(64,64,64,.12),inset 0 2px 0 rgba(255,255,255,.24),inset 0 -.5px 2px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.03),0 3px 4px rgba(0,0,0,.16);
  --shadow-card:0 0 0 .83px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06),inset 0 0 0 .83px #fff;
  --shadow-plate:0 0 0 1px rgba(0,0,0,.04),0 18px 40px -12px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.04);
  --glass-bevel:inset 0 -1px 0 rgba(0,0,0,.12),inset 0 -1px 2px rgba(0,0,0,.1),inset 0 1px 1px rgba(255,255,255,.24);
  --glass-tint:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.08));
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-std:cubic-bezier(.4,0,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-row:cubic-bezier(.22,.61,.36,1);
  --dur-hover:150ms;--dur-enter:600ms;--dur-row:420ms;
  --container:1100px;--gutter:24px;--section-y:112px;--header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--surface);color:var(--fg);font:400 16px/24px var(--font-sans);font-variation-settings:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
::selection{background:#dae9fb}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{font:400 11.5px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:10px;margin:0 0 16px}
.eyebrow .rule{flex:0 0 20px;height:1px;background:currentColor;opacity:.6}
.h2{font-weight:400;font-size:40px;line-height:1.15;letter-spacing:-.2px;margin:0;color:var(--fg);text-wrap:balance}
.h3{font-weight:400;font-size:32px;line-height:1.15;letter-spacing:.1px;margin:0;color:var(--fg);text-wrap:balance}
.fade{color:var(--ink-faint)}
.lead{font-size:16px;line-height:1.45;font-weight:460;letter-spacing:.15px;color:var(--ink-muted);margin:16px 0 0;max-width:46ch}
.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--radius);font-size:15.5px;font-weight:440;letter-spacing:.1px;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .14s ease-out,box-shadow .14s ease-out,color .14s ease-out,border-color .14s ease-out,transform .14s ease-out}
.btn svg{width:15px;height:15px;flex:none}
.btn:active{transform:translateY(.5px)}
.btn-light{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-btn-light);color:var(--fg)}
.btn-light:hover{background:var(--surface-hover)}
.btn-dark{color:#fff;background:linear-gradient(rgba(32,32,32,.1),rgba(32,32,32,.1)),linear-gradient(#4f4f4f,rgba(32,32,32,.85));border-color:#383838;box-shadow:var(--shadow-btn-dark)}
.btn-dark:hover{background:linear-gradient(rgba(32,32,32,.28),rgba(32,32,32,.28)),linear-gradient(#4f4f4f,rgba(32,32,32,.9))}
.btn-glass{color:#fff;background:var(--glass-tint),rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);box-shadow:var(--glass-bevel);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.btn-glass:hover{background:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.14)),rgba(255,255,255,.06)}
.icon-btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-btn-light);color:var(--ink-faint);transition:background-color .14s ease-out,color .14s ease-out}
.icon-btn:hover{background:var(--surface-hover);color:var(--ink-strong)}
.icon-btn svg{width:15px;height:15px}
.arrow{transition:transform var(--dur-hover) var(--ease-std)}
a:hover .arrow,button:hover .arrow{transform:translateX(2px)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);transition:background-color .3s var(--ease-std),box-shadow .3s var(--ease-std)}
.site-header .bar{height:100%;max-width:1392px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:#fff;transition:color .3s var(--ease-std)}
.wordmark svg{width:24px;height:24px;flex:none;image-rendering:pixelated}
.wordmark .wm-text{font-size:19px;font-weight:440;letter-spacing:-.25px;line-height:1}
.wordmark .wm-text i{font-style:normal;opacity:.62}
.nav{display:flex;align-items:center;gap:8px}
.pill-group,.pill{height:41px;display:flex;align-items:center;border-radius:var(--radius);color:#fbfbf8;background:var(--glass-tint),rgba(255,255,255,.04);box-shadow:var(--glass-bevel);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);transition:background-color .3s var(--ease-std),color .3s var(--ease-std),box-shadow .3s var(--ease-std),border-color .3s}
.pill-group{padding:0 4px}
.pill-group .label{font-size:14.5px;font-weight:410;opacity:.6;padding:0 10px 0 10px}
.pill-group a,.pill{position:relative;font-size:15px;font-weight:410;letter-spacing:.15px;padding:0 13px;height:31px;display:flex;align-items:center;border-radius:6px;transition:background-color .2s cubic-bezier(0,0,.2,1)}
.pill{height:41px;padding:0 15px}
.pill-group a+a::before,.pill-group .label+a::before{content:"";position:absolute;left:-.5px;top:9px;bottom:9px;width:1px;background:currentColor;opacity:.22}
.pill-group a:hover{background:rgba(255,255,255,.14)}
.pill:hover{background:var(--glass-tint),rgba(255,255,255,.12)}
.nav .cta{height:41px}
.site-header .cta-dark{display:none}
.menu-btn{display:none;width:40px;height:40px;padding:0;border-radius:var(--radius);place-items:center;color:#fff;background:var(--glass-tint),rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-bevel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
/* scrolled / solid */
.site-header.is-solid{background:rgba(245,245,242,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 #fff,0 1px 0 1px rgba(32,32,32,.04)}
.site-header.is-solid .wordmark{color:var(--fg)}
.site-header.is-solid .pill-group,.site-header.is-solid .pill{color:var(--ink-strong);background:rgba(231,231,227,.8);border-color:rgba(32,32,32,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.site-header.is-solid .pill-group a:hover,.site-header.is-solid .pill:hover{background:#dcdcd7}
.site-header.is-solid .cta-light{display:none}
.site-header.is-solid .cta-dark{display:inline-flex}
.site-header.is-solid .menu-btn{color:var(--ink-strong);background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-btn-light)}

/* mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:60;background:var(--surface);clip-path:circle(0% at calc(100% - 44px) 38px);transition:clip-path .6s var(--ease-out);display:flex;flex-direction:column;padding:20px 24px 28px;visibility:hidden}
.sheet.open{clip-path:circle(200% at calc(100% - 44px) 38px);visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:36px}
.sheet-top .wordmark{color:var(--fg)}
.sheet nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.sheet nav .grp{font:400 11px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.sheet nav a{font-size:36px;line-height:1.25;font-weight:400;color:var(--fg);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-row),transform .4s var(--ease-row)}
.sheet nav hr{width:32px;border:0;height:1px;background:var(--border);margin:14px 0}
.sheet.open nav a{opacity:1;transform:none}
.sheet.open nav a:nth-of-type(2){transition-delay:.05s}.sheet.open nav a:nth-of-type(3){transition-delay:.1s}.sheet.open nav a:nth-of-type(4){transition-delay:.15s}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(10px);transition:opacity .4s .2s,transform .4s .2s var(--ease-out)}
.sheet.open .sheet-foot{opacity:1;transform:none}
.sheet-foot .socials{display:flex;gap:8px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:700px;height:min(96vh,940px);overflow:hidden;background:#0a6fd8 url(/assets/hero.jpg) 70% 100%/cover no-repeat;background-image:image-set(url(/assets/hero.webp) type('image/webp'),url(/assets/hero.jpg) type('image/jpeg'));color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(2,60,165,.22) 0%,rgba(2,60,165,0) 48%),
  linear-gradient(180deg,rgba(1,60,160,.34) 0%,rgba(1,60,160,0) 18%)}
.hero .dissolve,.band .dissolve,.post-hero .dissolve{position:absolute;left:0;right:0;bottom:-1px;height:96px;background:url(/assets/dissolve.png) 0 100%/auto 96px repeat-x;pointer-events:none;z-index:3}
.dissolve.top{top:-1px;bottom:auto;transform:scaleY(-1)}
.hero-inner{position:relative;z-index:2;max-width:1392px;margin:0 auto;padding:calc(var(--header-h) + 72px) 24px 0;height:100%}
.hero-copy{max-width:640px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font:400 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:22px}
.hero-kicker .dot{width:6px;height:6px;border-radius:1px;background:var(--lime);box-shadow:0 0 6px rgba(163,230,53,.7)}
.hero h1{font-weight:400;font-size:54px;line-height:1.06;letter-spacing:-.6px;margin:0;text-shadow:0 1px 18px rgba(4,50,140,.35)}
.hero h1 .l2{display:block}
.hero h1 .fade{color:rgba(255,255,255,.7)}
.hero .sub{font-size:17px;line-height:1.45;font-weight:440;letter-spacing:.15px;color:rgba(255,255,255,.88);max-width:44ch;margin:20px 0 0;text-shadow:0 1px 10px rgba(10,60,150,.3)}
.hero .actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.hero .actions .btn-light{background:#fbfbf8}
/* toasts */
.toasts{position:absolute;z-index:2;left:58%;top:38%;width:300px;display:grid;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#fff;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.04)),rgba(22,69,61,.58);border:1px solid rgba(255,255,255,.14);box-shadow:var(--glass-bevel),0 8px 24px -10px rgba(0,30,20,.5);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);font-size:13px;line-height:1.3;font-weight:460;letter-spacing:.1px}
.toast:nth-child(2){margin-left:22px}.toast:nth-child(3){margin-left:6px}
.toast .k{font:400 10.5px/1 var(--font-mono);letter-spacing:.04em;color:rgba(255,255,255,.62);white-space:nowrap}
.toast .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast .d{width:6px;height:6px;border-radius:50%;flex:none;background:var(--lime);box-shadow:0 0 6px rgba(163,230,53,.6)}
.toast .d.run{background:#8fd0ff;box-shadow:0 0 6px rgba(143,208,255,.7);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:34px;transform:translateX(-50%);font:400 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue svg{width:14px;height:14px;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-3px);opacity:.4}50%{transform:translateY(3px);opacity:1}}

/* ---------- sections ---------- */
.section{padding-block:var(--section-y)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px}
.section-head .h2{max-width:620px}

/* featured */
.feature{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:0;background:var(--surface-raised);border-radius:14px;box-shadow:var(--shadow-card),0 24px 48px -28px rgba(0,0,0,.18);padding:8px;transition:box-shadow .2s var(--ease-std)}
.feature:hover{box-shadow:var(--shadow-card),0 28px 56px -26px rgba(0,0,0,.24)}
.plate{position:relative;border-radius:var(--radius);overflow:hidden;background:#1d7fe0 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.plate::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(rgba(251,251,248,0),rgba(251,251,248,.5));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}
.plate.no-frost::after{display:none}
.feature .plate{min-height:400px}
.feature-body{padding:36px 36px 32px 40px;display:flex;flex-direction:column}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:5px;font:400 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:#ebebe7;color:var(--ink-muted);box-shadow:inset 0 0 0 1px rgba(32,32,32,.06)}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}
.chip.green{background:#e3f3e6;color:#2a7a43}.chip.blue{background:var(--info-tint);color:#2a5f9e}.chip.amber{background:#fbefd6;color:#9a6408}.chip.brown{background:#f3e6e1;color:#8a4f3f}
.feature h3{font-weight:400;font-size:34px;line-height:1.1;letter-spacing:.1px;margin:22px 0 0;text-wrap:balance}
.feature p{font-size:16px;line-height:1.5;font-weight:440;letter-spacing:.15px;color:var(--ink-muted);margin:16px 0 0}
.feature .foot{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--hair)}
.byline,.byline-meta{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:460;color:var(--ink-faint)}
.byline .av{width:22px;height:22px;border-radius:6px;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#dbeafe}
.byline .av picture,.byline .av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;image-rendering:auto}
.legal .byline{display:inline-flex}

/* note cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px;perspective:900px}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface-raised);border-radius:12px;padding:22px 22px 16px 30px;box-shadow:var(--shadow-card),0 14px 28px -18px rgba(0,0,0,.18);transform-style:preserve-3d;transition:box-shadow .2s var(--ease-std);will-change:transform}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:12px 0 0 12px;background:linear-gradient(90deg,#ecece7,#f3f3ef);box-shadow:inset -1px 0 0 rgba(32,32,32,.07)}
.card .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light}
.card:hover{box-shadow:var(--shadow-card),0 24px 40px -20px rgba(0,0,0,.24)}
.card h3{font-weight:440;font-size:21px;line-height:1.18;letter-spacing:-.3px;color:var(--ink-strong);margin:0;min-height:50px;text-wrap:balance}
.card .rule{height:1px;background:var(--hair);margin:16px 0 12px}
.card .label{font:400 10.5px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--ink-faint);margin-bottom:10px;display:flex;justify-content:space-between}
.card .plate{aspect-ratio:16/11}
.card p{font-size:14.5px;line-height:1.45;font-weight:460;letter-spacing:.13px;color:var(--ink-muted);margin:14px 0 0}
.card .cfoot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--hair);font:400 10.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--ink-faint);gap:8px}
.card .cfoot .byline{font:inherit;letter-spacing:inherit}

/* older rows (accordion-style) */
.rows{display:grid;gap:8px;margin-top:40px}
.row{display:grid;grid-template-columns:52px 1fr auto auto 20px;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--radius-card);border:1px solid rgba(0,0,0,.09);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .15s var(--ease-std),background-color .15s var(--ease-std)}
.row:hover{border-color:rgba(0,0,0,.2);background:rgba(255,255,255,.85)}
.row .ix{font:400 11px/1 var(--font-mono);color:var(--ink-faint);letter-spacing:.04em}
.row .t{font-size:15.5px;font-weight:460;letter-spacing:.12px;color:var(--ink-strong)}
.row .t .fade{font-weight:440}
.row .dt{font:400 11px/1 var(--font-mono);color:var(--ink-faint);letter-spacing:.04em}
.row svg{width:14px;height:14px;color:var(--ink-faint)}
.archive-foot{display:flex;justify-content:center;margin-top:36px}

/* how it's published (diagram) */
.how{display:grid;grid-template-columns:340px minmax(0,1fr);gap:72px;align-items:start}
.how .acc{display:grid;gap:8px;margin-top:28px}
.acc-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-card);border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);font-size:15px;font-weight:460;letter-spacing:.15px;color:var(--ink-strong)}
.acc-row .ix{font:400 11px/1 var(--font-mono);color:var(--ink-faint);width:24px}
.acc-row .plus{margin-left:auto;color:var(--ink-faint);font-weight:300;font-size:18px;line-height:1}
.diagram{position:relative;border-radius:var(--radius-lg);padding:2px;background:#ecece8;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 40px -24px rgba(0,0,0,.2)}
.diagram-in{position:relative;border-radius:14px;overflow:hidden;background:var(--surface-raised);container-type:inline-size;height:auto;
  background-image:radial-gradient(rgba(32,32,32,.16) 1px,transparent 1.2px);background-size:14px 14px}
.diagram-scale{position:relative;height:min(420px,calc(100cqw * 420 / 640));overflow:hidden}
.stage-pan{position:absolute;left:0;top:0;width:640px;height:420px;transform-origin:0 0;scale:var(--diagram-scale,1)}
.stage-pan.compact .stage{margin-left:-208px}
.stage-pan.compact .c1{display:none}
.diagram-in::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(251,251,248,.85) 100%);pointer-events:none;z-index:0}
.col-h{position:absolute;top:14px;font:400 9.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-faint);padding:4px 7px;border-radius:4px;background:#f0f0ec;z-index:1}
.node{position:absolute;z-index:2;width:184px;background:#fff;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.05);padding:9px 10px;display:flex;gap:9px;align-items:flex-start}
.node .ic{width:22px;height:22px;flex:none;border-radius:5px;background:#f2f2ee;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.node .ic svg{width:12px;height:12px;color:var(--ink-muted)}
.node b{display:block;font-weight:460;font-size:11.5px;line-height:1.3;color:rgba(32,32,32,.85)}
.node small{display:block;font:400 9px/1.4 var(--font-mono);color:rgba(32,32,32,.5);margin-top:2px}
.node .chip{height:16px;font-size:8.5px;padding:0 5px;margin-top:6px}
.node.dim{opacity:.55}
.wires{position:absolute;inset:0;z-index:1}
.wires path{fill:none;stroke:#7fb2ea;stroke-width:1.2;stroke-dasharray:3 3}
.wires .draw{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.1s var(--ease-std)}
.in-view .wires .draw{stroke-dashoffset:0}
.meter{display:flex;gap:2px;margin-top:6px}.meter i{width:8px;height:5px;border-radius:1px;background:#e3e3df}.meter i.g{background:var(--success)}.meter i.a{background:var(--warn)}
.captions{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.captions p{margin:0;font-size:14.5px;line-height:1.45;font-weight:460;letter-spacing:.13px;color:var(--ink-faint)}
.captions p b{font-weight:460;color:var(--ink-strong)}

/* sky band with subscribe */
.band{position:relative;overflow:hidden;background:#f39a4a url(/assets/band-subscribe.jpg) center 40%/cover no-repeat;background-image:image-set(url(/assets/band-subscribe.webp) type('image/webp'),url(/assets/band-subscribe.jpg) type('image/jpeg'));padding:180px 0 190px;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(150,60,20,.04),rgba(150,60,20,.16))}
.sub-card{position:relative;z-index:4;max-width:600px;margin:0 auto;text-align:center;background:rgba(251,251,248,.94);border-radius:var(--radius-lg);padding:40px 44px 34px;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 0 7px rgba(255,255,255,.22),0 30px 60px -24px rgba(8,50,120,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sub-card .eyebrow{justify-content:center}
.sub-card .h3{font-size:34px}
.sub-card .lead{margin:14px auto 0;text-align:center}
.subscribe{position:relative;display:flex;align-items:stretch;height:44px;margin-top:26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:inset 0 1px 2px rgba(0,0,0,.05),0 1px 0 #fff;padding:3px;transition:border-color .15s,box-shadow .15s}
.subscribe:focus-within{border-color:rgba(26,111,209,.45);box-shadow:inset 0 1px 2px rgba(0,0,0,.05),0 0 0 3px rgba(26,111,209,.12)}
.subscribe input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0 12px;font-size:15px;font-weight:440;color:var(--fg)}
.subscribe input::placeholder{color:var(--ink-faint)}
.subscribe .btn{height:36px;border-radius:6px;padding:0 14px;font-size:14.5px}
.form-note{font:400 10.5px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--ink-faint);margin-top:12px;min-height:16px}
.form-note.ok{color:#2a7a43}
.sub-card .subscribe{max-width:440px;margin-inline:auto}

/* ---------- footer ---------- */
.site-footer{position:relative;padding:120px 0 0;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center;perspective:1100px}
.footer-grid .h2{font-size:40px;max-width:480px}
.how-row{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:30px;font-size:14px;font-weight:460;color:var(--ink-strong)}
.how-row span{color:var(--ink-faint)}
.how-row a:hover,.links a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(32,32,32,.25)}
.links{display:grid;grid-template-columns:repeat(3,max-content);gap:10px 64px;margin-top:30px}
.links div{display:grid;gap:10px;align-content:start}
.links a{font-size:15px;font-weight:460;color:var(--ink);letter-spacing:.1px}
.socials{display:flex;gap:8px;margin-top:30px}
.legal{margin-top:28px;display:grid;gap:8px;font-size:13px;font-weight:460;color:var(--ink-faint)}
.legal .badge{display:inline-flex;align-items:center;gap:6px}
.postcard{position:relative;border-radius:18px;padding:7px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 22px 44px -22px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.04);transform-style:preserve-3d;will-change:transform}
.postcard .art{position:relative;height:480px;border-radius:12px;overflow:hidden;background:#3d5a2a url(/assets/postcard.jpg) 50% 40%/cover no-repeat;background-image:image-set(url(/assets/postcard.webp) type('image/webp'),url(/assets/postcard.jpg) type('image/jpeg'))}
.postcard .stamp{position:absolute;top:14px;right:14px;font:400 11px/1 var(--font-pixel);letter-spacing:.14em;color:#fff;padding:7px 9px;border-radius:5px;background:rgba(10,60,140,.32);border:1px dashed rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.postcard .cap{position:absolute;left:10px;right:10px;bottom:10px;border-radius:10px;padding:16px 16px 14px;color:#fff;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.06)),rgba(30,60,40,.38);border:1px solid rgba(255,255,255,.18);box-shadow:var(--glass-bevel);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
.postcard .cap p{margin:0;font-size:19px;line-height:1.22;font-weight:440;letter-spacing:-.1px}
.postcard .cap p span{opacity:.62}
.postcard .subscribe{margin-top:14px;height:40px;background:rgba(251,251,248,.95);border-color:rgba(255,255,255,.4);padding:3px}
.postcard .subscribe input{font-size:14px}
.postcard .subscribe .btn{height:32px;font-size:13.5px;padding:0 11px}
.postcard .form-note{color:rgba(255,255,255,.75);margin-top:8px;min-height:0}
.postcard .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 50%);mix-blend-mode:soft-light}
.grass{position:relative;height:128px;margin-top:110px;background:url(/assets/grass.png) 0 100%/auto 128px repeat-x;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.grass p{margin:0;font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:rgba(22,62,14,.9)}

/* ---------- post page ---------- */
.post-hero{position:relative;height:340px;overflow:hidden;background:#1a76dc url(/assets/post-band.jpg) 85% 60%/cover no-repeat;background-image:image-set(url(/assets/post-band.webp) type('image/webp'),url(/assets/post-band.jpg) type('image/jpeg'));isolation:isolate}
.post-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,70,170,.58),rgba(1,70,170,0) 48%);z-index:-1}
.post-hero-video{height:auto;min-height:0;padding:calc(var(--header-h) + 28px) 0 56px;background-position:85% 30%}
.post-hero-video::before{background:linear-gradient(180deg,rgba(1,70,170,.5),rgba(1,70,170,.12) 70%)}
.post-hero-video .container{position:relative;z-index:2}
.video-frame{padding:7px;border-radius:16px;background:linear-gradient(180deg,#fff,#ecece7);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 28px 56px -28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.06)}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:11px;background:#0d1a2a;object-fit:cover}
.plate-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate-video{position:relative}
.video-mark{position:absolute;z-index:2;top:10px;left:10px;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;font:400 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(16,24,40,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.video-mark-inline{display:inline-flex;align-items:center;margin-left:8px;height:16px;padding:0 6px;border-radius:4px;font:400 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#2a5f9e;background:var(--info-tint);vertical-align:middle}
.hero noscript .subscribe{max-width:420px;margin-top:18px;background:rgba(251,251,248,.95)}
.hero noscript .form-note{color:rgba(255,255,255,.82)}
.hero noscript .form-note.err{color:#ffd4ce}
.article-head{max-width:calc(680px + 2 * var(--gutter));margin:8px auto 0;padding:0 var(--gutter);position:relative;z-index:5;text-align:left}
.crumbs{display:flex;align-items:center;gap:8px;margin-bottom:26px}
.crumbs a{font:400 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.crumbs a:hover{color:var(--ink-strong)}
.article-head h1{font-weight:400;font-size:48px;line-height:1.08;letter-spacing:-.5px;margin:0;text-wrap:balance}
.article-head .dek{font-size:19px;line-height:1.45;font-weight:440;color:var(--ink-muted);margin:20px 0 0;letter-spacing:.1px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:28px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.article-meta .m{font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.article-meta .sep{width:3px;height:3px;background:var(--ink-ghost);border-radius:1px}
.article-meta .agent{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.prose{max-width:calc(680px + 2 * var(--gutter));margin:48px auto 0;padding:0 var(--gutter);font-size:18px;line-height:1.7;font-weight:410;letter-spacing:.1px;color:var(--ink)}
.prose>*+*{margin-top:1.15em}
:where(.prose>*){margin-block:0}
.prose h2{font-weight:400;font-size:28px;line-height:1.2;letter-spacing:-.2px;color:var(--fg);margin:2.1em 0 0}
.prose h2 .n{display:block;font:400 11px/1.5 var(--font-mono);letter-spacing:.12em;color:var(--ink-faint);margin-bottom:10px}
.prose h3{font-weight:440;font-size:20px;line-height:1.3;color:var(--ink-strong);margin:1.8em 0 0}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(26,111,209,.45);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .15s}
.prose a:hover{text-decoration-color:var(--sky)}
.prose strong{font-weight:460;color:var(--fg)}
.prose ul,.prose ol{padding:0;list-style:none}
.prose li{position:relative;padding-left:28px}
.prose li+li{margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;border-radius:1px;background:var(--ink-ghost)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.62em;font:400 11px/1 var(--font-mono);color:var(--ink-faint)}
.prose blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid rgba(26,111,209,.35);font-size:22px;line-height:1.45;font-weight:400;color:var(--ink-strong);letter-spacing:-.1px}
.prose blockquote p+p{margin-top:.6em}
.prose blockquote cite{display:block;margin-top:12px;font:400 11px/1.5 var(--font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.prose code{font-family:var(--font-mono);font-size:.82em;padding:.12em .4em;border-radius:4px;background:#ebebe6;box-shadow:inset 0 0 0 1px rgba(32,32,32,.05);color:var(--ink-strong)}
.codeblock{margin:1.8em -24px;border-radius:12px;background:var(--surface-raised);box-shadow:var(--shadow-card);overflow:hidden}
.codeblock .cb-head{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 10px 0 14px;border-bottom:1px solid var(--hair);background:linear-gradient(#fbfbf8,#f6f6f2)}
.codeblock .cb-head .fn{font:400 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
.codeblock .cb-head .lang{font:400 9.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:#efefea;color:var(--ink-faint)}
.codeblock .copy{height:24px;padding:0 8px;font-size:12px;border-radius:5px;gap:5px;color:var(--ink-faint)}
.codeblock .copy svg{width:12px;height:12px}
.codeblock pre{margin:0;padding:18px 20px 20px;overflow-x:auto;font:400 13.5px/1.7 var(--font-mono);color:rgba(32,32,32,.82);
  background-image:linear-gradient(90deg,transparent 41px,rgba(32,32,32,.06) 41px,rgba(32,32,32,.06) 42px,transparent 42px)}
.codeblock pre code{background:none;box-shadow:none;padding:0;font-size:inherit;color:inherit;counter-reset:ln}
.codeblock .ln{display:block;padding-left:40px;position:relative}
.codeblock .ln::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:22px;text-align:right;color:rgba(32,32,32,.28)}
.tk-c{color:rgba(32,32,32,.42)}.tk-k{color:#2a5f9e}.tk-s{color:#2a7a43}.tk-n{color:#a76451}
.figure{margin:2.2em -64px}
.figure .frame{padding:6px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 48px -28px rgba(0,0,0,.3)}
.figure .plate{aspect-ratio:16/8.5;border-radius:11px}
.figure figcaption{margin-top:12px;font:400 11px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--ink-faint);text-align:center}
.prose hr{border:0;height:8px;margin:2.6em auto;width:56px;background:radial-gradient(circle,var(--ink-ghost) 1.5px,transparent 2px) 0 0/14px 8px repeat-x}
.callout{display:flex;gap:14px;padding:16px 18px;border-radius:var(--radius-card);border:1px solid rgba(0,0,0,.09);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);font-size:15.5px;line-height:1.55;font-weight:460;color:var(--ink-muted)}
.callout .chip{flex:none;margin-top:2px}
.post-end{max-width:760px;margin:88px auto 0;padding:0 var(--gutter)}
.endmark{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:48px;color:var(--ink-faint);font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.endmark::before,.endmark::after{content:"";flex:1;height:1px;background:var(--hair)}
.end-sub{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;background:var(--surface-raised);border-radius:14px;padding:10px 28px 10px 10px;box-shadow:var(--shadow-card),0 24px 48px -30px rgba(0,0,0,.25)}
.end-sub .plate{height:100%;min-height:200px;border-radius:9px}
.end-sub .h3{font-size:26px}
.end-sub .lead{font-size:15px;margin-top:8px}
.end-sub .subscribe{margin-top:18px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.pn{display:flex;gap:14px;align-items:center;padding:10px 18px 10px 10px;border-radius:12px;background:var(--surface-raised);box-shadow:var(--shadow-card);transition:box-shadow .2s var(--ease-std),transform .2s var(--ease-std)}
.pn:hover{box-shadow:var(--shadow-card),0 14px 28px -16px rgba(0,0,0,.2);transform:translateY(-1px)}
.pn .plate{width:76px;height:76px;flex:none;border-radius:7px}
.pn .plate::after{display:none}
.pn .dir{font:400 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.pn .tt{font-size:16.5px;line-height:1.25;font-weight:440;color:var(--ink-strong);margin-top:8px;text-wrap:balance}
.pn.next{flex-direction:row-reverse;text-align:right;padding:10px 10px 10px 18px}
.pn.next .dir{justify-content:flex-end}

/* ---------- motion ---------- */
.hs{opacity:0;transform:translateY(16px);animation:hs var(--dur-enter) var(--ease-out) forwards;animation-delay:calc(100ms + var(--i,0) * 160ms)}
@keyframes hs{to{opacity:1;transform:none}}
.toast{opacity:0;transform:scale(.88) translateY(10px);transform-origin:left center}
.toast.in{animation:pop 520ms var(--ease-pop) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(8px);filter:blur(3px);transition:opacity var(--dur-row) var(--ease-row),transform var(--dur-row) var(--ease-row),filter var(--dur-row) var(--ease-row);transition-delay:calc(var(--d,0) * 80ms)}
.reveal.in-view{opacity:1;transform:none;filter:none}
.js-off .reveal,.js-off .toast,.js-off .hs{opacity:1;transform:none;filter:none;animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hs,.toast,.reveal{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .wires .draw{stroke-dashoffset:0!important}
  .card,.postcard{transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .nav .pill-group,.nav .pill{display:none}
  .menu-btn{display:inline-grid}
  .how{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr;gap:56px}
  .postcard{max-width:420px}
  .toasts{left:auto;right:4%}
}
@media (max-width:860px){
  .feature{grid-template-columns:1fr}
  .feature .plate{min-height:0;aspect-ratio:16/10}
  .feature-body{padding:26px 18px 18px}
  .cards{grid-template-columns:1fr 1fr}
  .figure{margin-inline:0}
}
@media (max-width:640px){
  :root{--section-y:88px;--header-h:68px;--gutter:20px}
  .site-header .bar{padding:0 16px}
  .wordmark .wm-text{font-size:17px}
  .wordmark svg{width:20px;height:20px}
  .nav .cta{height:40px;padding:0 13px;font-size:14.5px}
  .hero{height:auto;min-height:820px;background:url(/assets/hero.jpg) 74% 100%/auto 480px no-repeat,linear-gradient(#0a4cb0,#0053bd 340px);background-image:image-set(url(/assets/hero.webp) type('image/webp'),url(/assets/hero.jpg) type('image/jpeg')),linear-gradient(#0a4cb0,#0053bd 340px)}
  .hero::before{background:linear-gradient(180deg,rgba(1,60,160,.3) 0%,rgba(1,60,160,0) 14%)}
  .hero-inner{padding:calc(var(--header-h) + 52px) 20px 0}
  .hero h1{font-size:38px;line-height:1.08;letter-spacing:-.4px}
  .hero .sub{font-size:16px}
  .hero .actions .btn{flex:1}
  .toasts{left:20px;right:auto;top:auto;bottom:150px;width:270px}
  .scroll-cue{display:none}
  .h2{font-size:29px}
  .h3,.sub-card .h3{font-size:27px}
  .section-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px}
  .feature h3{font-size:27px}
  .cards{grid-template-columns:1fr;gap:20px}
  .card h3{min-height:0}
  .row{grid-template-columns:40px 1fr 20px;gap:10px;padding:13px 14px}
  .row .chip,.row .dt{display:none}
  .row .t{font-size:15px}
  .captions{grid-template-columns:1fr;gap:16px}
  .band{padding:130px 0 140px;background-size:auto 100%}
  .sub-card{margin-inline:16px;padding:30px 20px 24px}
  .subscribe .btn{padding:0 12px}
  .site-footer{padding-top:88px}
  .footer-grid .h2{font-size:30px}
  .links{gap:10px 36px}
  .postcard .art{height:440px}
  .grass{margin-top:80px}
  .post-hero{height:220px}
  .post-hero-video{height:auto;padding:calc(var(--header-h) + 16px) 0 36px}
  .video-frame{padding:5px;border-radius:12px}
  .video-frame video{border-radius:8px}
  .article-head{margin-top:4px}
  .article-head h1{font-size:34px}
  .article-head .dek{font-size:17px}
  .article-meta .agent{margin-left:0}
  .prose{font-size:17px;margin-top:36px}
  .prose h2{font-size:24px}
  .prose blockquote{font-size:19px}
  .codeblock{margin-inline:-8px}
  .codeblock pre{font-size:12.5px}
  .end-sub{grid-template-columns:1fr;padding:10px 10px 22px}
  .end-sub>div:last-child{padding:4px 10px 0}
  .end-sub .plate{min-height:150px}
  .prevnext{grid-template-columns:1fr}
}
.stage{position:relative;width:640px;height:420px}
@container (max-width:559px){
  .diagram-scale{height:calc(100cqw * 420 / 432)}
  .stage-pan{scale:var(--diagram-scale,0.7)}
  .stage{margin-left:-208px}
  .stage .c1{display:none}
}
/* length/length in calc() for scale needs Chrome 140+ / Safari 26 / Firefox 158. Older engines keep the 0.7 fallback (or JS --diagram-scale). */
@supports (scale:calc(1cqw / 1px)){
  .stage-pan{scale:var(--diagram-scale,min(1,calc(100cqw / 640px)))}
  @container (max-width:559px){
    .stage-pan{scale:var(--diagram-scale,calc(100cqw / 432px))}
  }
}
[data-tilt].in-view{
  transition-property:opacity,filter;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover .glare,.postcard:hover .glare{opacity:1}
}
.col-h-draft{left:20px}.col-h-agent{left:228px}.col-h-live{left:436px}
.node-draft{left:20px;top:64px}.node-slug{left:20px;top:168px}.node-tags{left:20px;top:248px}
.node-bot{left:228px;top:118px}.node-token{left:228px;top:236px}
.node-site{left:436px;top:56px}.node-rss{left:436px;top:166px}.node-email{left:436px;top:276px}
.hero-copy .hero-kicker.hs{--i:0}.hero-copy h1.hs{--i:1}.hero-copy .sub.hs{--i:2}.hero-copy .actions.hs{--i:3}
.article-head .crumbs{--i:0}.article-head h1{--i:1}.article-head .dek{--i:2}.article-head .article-meta{--i:3}
.section-archive{padding-top:24px}.section-publishing{padding-top:48px}.section-404{padding-top:140px}
.actions-404{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.d-0{--d:0}.d-1{--d:1}.d-2{--d:2}.d-3{--d:3}.d-4{--d:4}.d-5{--d:5}.d-6{--d:6}
.d-7{--d:7}.d-8{--d:8}.d-9{--d:9}.d-10{--d:10}.d-11{--d:11}.d-12{--d:12}
body.is-sheet-open{overflow:hidden}
body.capture-shots .site-header{visibility:hidden}

.hero .btn-glass{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.1)),rgba(2,48,130,.36)}
.stage.compact .c1{display:none}
.prose>.figure{margin:2.2em -64px}
.prose>blockquote,.prose>.codeblock{margin-block:1.8em}
@media (max-width:860px){.prose>.figure{margin-inline:0}}
@media (max-width:640px){.prose>.codeblock{margin-inline:-8px}}
@media (max-width:640px){.hero .btn-glass{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.06)),rgba(2,48,130,.58)}.grass p{font-size:9.5px;letter-spacing:.02em}}

/* ---------- v2 art: allowlisted plates only (never from a post URL) ---------- */
.plate[data-plate="infrastructure"]{background-position:62% 55%;background-image:url(/assets/plate-infrastructure.jpg);background-image:image-set(url(/assets/plate-infrastructure.webp) type("image/webp"),url(/assets/plate-infrastructure.jpg) type("image/jpeg"))}
.plate[data-plate="agents"]{background-position:28% 62%;background-image:url(/assets/plate-agents.jpg);background-image:image-set(url(/assets/plate-agents.webp) type("image/webp"),url(/assets/plate-agents.jpg) type("image/jpeg"))}
.plate[data-plate="events"]{background-position:55% 60%;background-image:url(/assets/plate-events.jpg);background-image:image-set(url(/assets/plate-events.webp) type("image/webp"),url(/assets/plate-events.jpg) type("image/jpeg"))}
.plate[data-plate="default"]{background-position:50% 60%;background-image:url(/assets/plate-default.jpg);background-image:image-set(url(/assets/plate-default.webp) type("image/webp"),url(/assets/plate-default.jpg) type("image/jpeg"))}
/* art is pre-upscaled with nearest-neighbour; on hi-dpi screens it is shown >1x, so keep edges hard */
@media (min-resolution:1.5dppx){.hero,.band,.post-hero,.postcard .art,.feature .plate{image-rendering:pixelated}}

/* Worker extras: markdown images/pre, honeypot, empty state */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.prose img{max-width:100%;height:auto;border-radius:11px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.prose pre{margin:1.8em 0;padding:18px 20px;overflow-x:auto;font:400 13.5px/1.7 var(--font-mono);background:var(--surface-raised);border-radius:12px;box-shadow:var(--shadow-card);color:rgba(32,32,32,.82)}
.prose pre code{background:none;box-shadow:none;padding:0;font-size:inherit}
.empty{padding:48px 28px;background:var(--surface-raised);border-radius:14px;box-shadow:var(--shadow-card);text-align:left}
.empty h3{font-weight:400;font-size:28px;margin:0 0 8px}
.empty p{margin:0;color:var(--ink-muted);font-size:16px;line-height:1.45}
.site-header.always-solid{background:rgba(245,245,242,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 #fff,0 1px 0 1px rgba(32,32,32,.04)}
.site-header.always-solid .wordmark{color:var(--fg)}
.site-header.always-solid .pill-group,.site-header.always-solid .pill{color:var(--ink-strong);background:rgba(231,231,227,.8);border-color:rgba(32,32,32,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.site-header.always-solid .cta-light{display:none}
.site-header.always-solid .cta-dark{display:inline-flex}
.site-header.always-solid .menu-btn{color:var(--ink-strong);background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-btn-light)}
.form-note.err{color:#b3261e}
.subscribed-banner{max-width:600px;margin:16px auto 0;padding:12px 16px;border-radius:8px;background:#e3f3e6;color:#2a7a43;font-size:14px}