*,*::before,*::after{box-sizing:border-box}
/* ---------- tokens: default theme "paper" (light + dark) ---------- */
:root,.theme-paper{
  --bg:#FBF9F5;--bg-alt:#F3EFE7;--surface:#FFFFFF;--ink:#17151C;--ink-2:#45414E;--muted:#76717F;--line:#E6E1D8;
  --accent:#6B5BE6;--accent-ink:#4A3BC4;--accent-soft:#EFECFD;--accent-2:#0F9C8E;--mark:#FFEAA6;
  --on-accent:#fff;--hero-ink:#fff;
  --display:'Instrument Serif',Georgia,serif;--display-w:400;--display-track:-.015em;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:700px;--wide:1080px;color-scheme:light dark;
}
/* legacy aliases lane widgets may use */
:root,body{--teal:var(--accent-2)}
/* ---------- theme presets (Max: each post has its own style; opening one changes the background) ---------- */
.theme-calm{--bg:#F2EFE6;--bg-alt:#E9E5D8;--surface:#FBF9F3;--ink:#1F2A24;--ink-2:#46544B;--muted:#77837B;--line:#DCD7C8;
  --accent:#4E7D5B;--accent-ink:#3A6346;--accent-soft:#E2EADF;--accent-2:#C08A2E;--display:'Fraunces',Georgia,serif;--display-w:400;--display-track:-.01em}
.theme-clinic{--bg:#F6F9FA;--bg-alt:#ECF2F4;--surface:#FFFFFF;--ink:#0F1E27;--ink-2:#3B4D58;--muted:#6E8290;--line:#DCE6EA;
  --accent:#E5484D;--accent-ink:#C2373C;--accent-soft:#FDECEC;--accent-2:#0FA5A0;--display:'Inter Tight',sans-serif;--display-w:800;--display-track:-.035em}
.theme-sunset{--bg:#FFF4EA;--bg-alt:#FFE9D7;--surface:#FFFBF7;--ink:#2B1B12;--ink-2:#5A4234;--muted:#8C7466;--line:#F0D9C6;
  --accent:#F0622F;--accent-ink:#C94A1D;--accent-soft:#FFE3D4;--accent-2:#2F7BF0;--display:'Fraunces',Georgia,serif;--display-w:600;--display-track:-.02em}
@media (prefers-color-scheme:dark){
  :root,.theme-paper{--bg:#0F0E13;--bg-alt:#15141B;--surface:#1B1A22;--ink:#EEEBF5;--ink-2:#C8C4D2;--muted:#8F8A9C;--line:#2A2834;
    --accent:#A99DFF;--accent-ink:#C4BBFF;--accent-soft:#221F34;--accent-2:#4FD1C0;--mark:#4A3E10;--on-accent:#120F1F}
  .theme-calm{--bg:#10150F;--bg-alt:#151C14;--surface:#1A2219;--ink:#E9EFE6;--ink-2:#C3CEC0;--muted:#8E9A8B;--line:#26321F;
    --accent:#9CC9A4;--accent-ink:#B7DDBE;--accent-soft:#1A2620;--accent-2:#E2B86B;--on-accent:#0E1A12}
  .theme-clinic{--bg:#0D1418;--bg-alt:#111A1F;--surface:#152027;--ink:#E8F0F3;--ink-2:#BCCBD3;--muted:#8199A5;--line:#22323A;
    --accent:#FF7A80;--accent-ink:#FF9EA2;--accent-soft:#2A1719;--accent-2:#4FD1C0;--on-accent:#1C0607}
  .theme-sunset{--bg:#16100C;--bg-alt:#1D1510;--surface:#231912;--ink:#F6E9DF;--ink-2:#D6C2B3;--muted:#A08A7B;--line:#3A2A1F;
    --accent:#FF8A5C;--accent-ink:#FFAA85;--accent-soft:#2B1A12;--accent-2:#FFC94D;--on-accent:#1E0B03}
}
.theme-blueprint{--bg:#0D2440;--bg-alt:#102B4C;--surface:#13325A;--ink:#EAF2FF;--ink-2:#BCD0EE;--muted:#8EA7CC;--line:#24466F;
  --accent:#5CC8FF;--accent-ink:#8ED9FF;--accent-soft:#123A63;--accent-2:#FFD166;--on-accent:#06182C;
  --display:'Space Grotesk',sans-serif;--display-w:600;--display-track:-.03em;color-scheme:dark}
body.theme-blueprint,.card.theme-blueprint{background-image:linear-gradient(rgba(92,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(92,200,255,.07) 1px,transparent 1px);background-size:32px 32px}
.theme-terminal{--bg:#0B0F0C;--bg-alt:#0F1510;--surface:#121A14;--ink:#DDFBE2;--ink-2:#A9D8B1;--muted:#77A381;--line:#1F3324;
  --accent:#3CFF8F;--accent-ink:#7DFFB3;--accent-soft:#11281A;--accent-2:#F6D04D;--on-accent:#04140A;
  --display:'JetBrains Mono',monospace;--display-w:700;--display-track:-.045em;color-scheme:dark}
.theme-market{--bg:#0A0D13;--bg-alt:#0E121A;--surface:#121823;--ink:#E7ECF5;--ink-2:#B3BDCE;--muted:#7D889B;--line:#1E2634;
  --accent:#F0B90B;--accent-ink:#FFD24D;--accent-soft:#231D08;--accent-2:#16C784;--on-accent:#140F00;
  --display:'Space Grotesk',sans-serif;--display-w:700;--display-track:-.03em;color-scheme:dark}
.theme-night{--bg:#0E0D12;--bg-alt:#14131A;--surface:#1A1922;--ink:#EEEBF5;--ink-2:#C8C4D2;--muted:#8F8A9C;--line:#2A2834;
  --accent:#C6F432;--accent-ink:#DBFF6E;--accent-soft:#1D2410;--accent-2:#A99DFF;--on-accent:#111;color-scheme:dark}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background-color:var(--bg);color:var(--ink);font:400 18.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--surface);padding:8px 12px;z-index:9}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- site header ---------- */
.site{position:relative;z-index:5;max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.post .site{position:absolute;top:0;left:0;right:0}
.brand{font:700 19px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand b{color:var(--accent)}.brand span{font-weight:400;opacity:.7}
.site nav a{color:var(--ink-2);text-decoration:none;font-size:15px;margin-left:18px}
.site nav a:hover{color:var(--ink)}
.post.hero-media-on .site .brand,.post.hero-media-on .site nav a{color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:min(84vh,740px);display:flex;align-items:flex-end;padding:120px 20px 56px;isolation:isolate}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:0 auto}
.hero h1{font:var(--display-w) clamp(42px,8vw,92px)/1.0 var(--display);letter-spacing:var(--display-track);margin:0 0 18px;max-width:16ch;text-wrap:balance}
.theme-terminal .hero h1{font-size:clamp(34px,6vw,72px);line-height:1.06}
.hero .dek{font-size:clamp(19px,2.3vw,23px);line-height:1.5;margin:0 0 24px;max-width:38em;text-wrap:pretty;color:var(--ink-2)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero.has-media{color:var(--hero-ink)}
.hero.has-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,12,.35) 0%,rgba(8,8,12,.3) 35%,rgba(8,8,12,.88) 100%)}
.hero.has-media .dek,.hero.has-media .byline,.hero.has-media .crumbs a,.hero.has-media .crumbs li{color:rgba(255,255,255,.88)}
.hero.has-media .tag{background:var(--accent);color:var(--on-accent);padding:7px 11px;border-radius:999px}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-glow i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.hero-glow i:nth-child(1){width:46vw;height:46vw;max-width:620px;max-height:620px;right:-8vw;top:-14vw;background:var(--accent)}
.hero-glow i:nth-child(2){width:34vw;height:34vw;max-width:460px;max-height:460px;left:-10vw;bottom:-14vw;background:var(--accent-2);animation-duration:22s}
.hero-glow i:nth-child(3){width:20vw;height:20vw;max-width:280px;max-height:280px;left:42%;top:28%;background:var(--accent-soft);opacity:.9;animation-duration:26s}
@keyframes drift{to{transform:translate3d(4vw,3vw,0) scale(1.08)}}
.crumbs{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.crumbs li+li::before{content:"/";opacity:.6}
.crumbs li[aria-current]{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(62vw,520px)}
.crumbs li[aria-current]::before{margin-right:6px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{text-decoration:underline}
.tag{display:inline-block;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.byline{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:grid;place-items:center;font:600 16px/1 var(--sans);flex:none}
.byline strong{color:inherit;font-weight:600}

/* ---------- bands ---------- */
.band{padding:clamp(40px,7vw,88px) 20px}
.band.alt{background:var(--bg-alt)}
.band-lead{padding-top:clamp(32px,5vw,56px);padding-bottom:12px}
.band-lead+.band:not(.alt){padding-top:28px}
.col{max-width:var(--measure);margin:0 auto}
.wide{max-width:var(--wide);margin:0 auto}
.col>.stats,.col>.gallery,.col>.compare,.col>figure.embed,.col>figure.video,.col>.rich,.col>figure.wide{width:min(var(--wide),calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%)}
.js .rv{opacity:0;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);translate:0 22px}
.js .rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none;transition:none}.hero-glow i{animation:none}}

.tldr{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:4px 16px 16px 4px;padding:20px 24px;margin:0 0 30px;font-size:18.5px;line-height:1.6}
.tldr-label{display:block;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.toc{border:1px solid var(--line);border-radius:14px;padding:16px 20px 12px;margin:0;font-size:16px;background:var(--surface)}
.toc-label{margin:0 0 6px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2em}.toc li{margin:.25em 0}
.toc a{color:var(--ink-2);text-decoration:none}.toc a:hover{color:var(--accent-ink);text-decoration:underline}

.band p{margin:0 0 1.15em;text-wrap:pretty}
.band h2{font:var(--display-w) clamp(32px,5vw,52px)/1.06 var(--display);letter-spacing:var(--display-track);margin:0 0 .55em;text-wrap:balance;scroll-margin-top:20px}
.theme-terminal .band h2{font-size:clamp(26px,4vw,40px)}
.band h3{font:600 21px/1.35 var(--sans);margin:1.6em 0 .5em;scroll-margin-top:20px}
.band strong{font-weight:650}
.band ul,.band ol{padding-left:1.25em;margin:0 0 1.2em}.band li{margin:.4em 0}
.band li::marker{color:var(--accent)}
.band blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent)}
.band blockquote p{font:italic var(--display-w) clamp(25px,3.8vw,34px)/1.28 var(--display);letter-spacing:var(--display-track);margin:0 0 .4em;color:var(--ink)}
.theme-terminal .band blockquote p,.theme-blueprint .band blockquote p,.theme-market .band blockquote p,.theme-clinic .band blockquote p{font-style:normal;font-size:clamp(21px,3vw,27px)}
.band blockquote cite{display:block;font:500 14px/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:8px}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 24px 6px;margin:1.8em 0}
.callout-stat p:first-child{font:var(--display-w) clamp(44px,9vw,88px)/1 var(--display);letter-spacing:var(--display-track);color:var(--accent-ink);margin-bottom:.2em}
.band code{font:500 .86em/1 var(--mono);background:var(--accent-soft);padding:.15em .4em;border-radius:6px}
.band hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.band figure{margin:2em 0}
.band figure img{border-radius:16px;border:1px solid var(--line)}
.band figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.band mark{background:var(--mark);color:inherit;padding:0 .15em}

/* ---------- rich blocks ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:2em 0}
@media (min-width:700px){.stats{grid-template-columns:repeat(3,1fr);gap:16px}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-n{font:var(--display-w) clamp(30px,6vw,60px)/1 var(--display);letter-spacing:var(--display-track);color:var(--accent-ink);overflow-wrap:anywhere}
.stat-l{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:2em 0}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}.gallery img{border-radius:14px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:13px}
.compare{display:grid;gap:14px;margin:2em 0}
@media (min-width:700px){.compare{grid-template-columns:1fr 1fr}}
.compare .col{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px 6px;font-size:16.5px;max-width:none;margin:0}
.compare .col:first-child{opacity:.82}
.compare .col:last-child{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.compare .col h3,.compare .col h4{margin-top:0}
.timeline{list-style:none;padding:0 0 0 20px;margin:2em 0;border-left:2px solid var(--line)}
.timeline li{position:relative;margin:0 0 18px;padding-left:6px}
.timeline li::before{content:"";position:absolute;left:-28px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.band.alt .timeline li::before{box-shadow:0 0 0 4px var(--bg-alt)}
.tl-l{display:block;font:600 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tl-t{display:block;font-size:17px;line-height:1.55}
.band figure.embed iframe{width:100%;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:block}
.band figure.embed figcaption a{margin-left:6px}
.band figure.video video{width:100%;border-radius:16px;border:1px solid var(--line);background:#000;display:block}
.rich{margin:2em 0}

/* ---------- cta, faq, author, sources, more ---------- */
.band-cta{background:var(--accent);color:var(--on-accent)}
.band-cta .cta-title{color:inherit;margin-bottom:.35em}
.band-cta p{color:inherit;opacity:.94;font-size:19px;max-width:36em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--on-accent);color:var(--accent);font:600 16px/1 var(--sans);padding:15px 22px;border-radius:999px;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:0 0 0 1.5px currentColor inset}
.faq h2,.sources h2,.more h2{font:var(--display-w) clamp(30px,4.4vw,42px)/1.1 var(--display);letter-spacing:var(--display-track);margin:0 0 .6em}
.qa{border-top:1px solid var(--line);padding:18px 0 4px}
.qa h3{font:600 18.5px/1.4 var(--sans);margin:0 0 .35em}
.qa p{margin:0 0 .9em;color:var(--ink-2)}
.band-meta{background:var(--bg-alt)}
.sources{margin-top:2.4em}
.sources ol{font-size:15px;color:var(--muted);padding-left:1.2em;margin:0}
.sources li{margin:.35em 0}.sources a{color:var(--ink-2)}
.author{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.author .avatar{width:52px;height:52px;font-size:20px}
.author p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.author p strong{color:var(--ink)}

/* cards carry their own theme, so the index is a wall of different worlds */
.cards{display:grid;gap:16px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background-color:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.card-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 20px;flex:1}
.card-tag{font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card-title{font:var(--display-w) 28px/1.1 var(--display);letter-spacing:var(--display-track);text-wrap:balance}
.card.theme-terminal .card-title{font-size:22px}
.card-dek{font-size:16px;line-height:1.55;color:var(--ink-2)}
.card-more{font-size:14px;font-weight:600;color:var(--accent-ink);margin-top:auto;padding-top:6px}
.card-year{float:right;font-weight:500;color:var(--muted)}
@media (min-width:760px){.more .cards{grid-template-columns:repeat(3,1fr)}}
.band-more{padding-top:clamp(40px,6vw,72px)}

/* ---------- index ---------- */
.index-hero{position:relative;overflow:hidden;padding:clamp(40px,8vw,110px) 20px clamp(30px,5vw,60px);isolation:isolate}
.index-hero .hero-in{max-width:1180px}
.index-hero h1{font:400 clamp(48px,10vw,120px)/.98 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin:0 0 22px;max-width:12ch}
.index-hero h1 em{font-style:italic;color:var(--accent)}
.index-hero .dek{font-size:clamp(19px,2.3vw,23px);color:var(--ink-2);max-width:40ch;margin:0}
.list{max-width:1180px;margin:0 auto;padding:10px 20px 20px}
@media (min-width:720px){.list .cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.list .cards{grid-template-columns:repeat(3,1fr)}}
.empty{color:var(--muted)}

footer.foot{max-width:1180px;margin:0 auto;padding:30px 20px 44px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}
footer.foot a{color:var(--muted)}
.draft-bar{position:relative;z-index:30;background:#2B2140;color:#fff;font:600 13px/1 var(--sans);text-align:center;padding:9px 12px;letter-spacing:.04em}
.draft-bar~.site{top:31px}
@media (max-width:520px){body{font-size:17.5px}.site nav a{margin-left:14px;font-size:14px}.tldr{padding:16px 18px}.hero{min-height:auto;padding-top:104px}}
/* hero "frame" mode: framed screenshot beside the title */
.hero.frame{align-items:center;min-height:min(80vh,720px)}
.hero.frame .hero-in{display:grid;gap:36px;grid-template-columns:1fr}
.hero.frame h1{font-size:clamp(40px,5.8vw,78px)}
.hero-shot{margin:0;position:relative;z-index:2}
.hero-shot img,.hero-shot video{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(0,0,0,.55);background:var(--surface)}
@media (min-width:980px){
  .hero.frame .hero-in{grid-template-columns:1fr 1.05fr;align-items:center;gap:48px}
}
/* flat frame: 3D tilt rasterized screenshots and blurred their text (Max: "hero images are shit quality") */
.hero-shot img,.hero-shot video{image-rendering:auto;backface-visibility:visible;transform:none}
@media (max-width:979px){.hero.frame{padding-bottom:40px}.hero-shot{max-width:560px}}

/* atlas: mirrors kilazi.com/maps-c6640e (cartographic paper, lagoon, terra, contour lines) */
.theme-atlas{--bg:#f4efe4;--bg-alt:#ebe4d3;--surface:#fbf8f0;--ink:#1d2a2e;--ink-2:#4a5a5e;--muted:#7a8789;--line:#d8cfb9;
  --accent:#b8553a;--accent-ink:#9a4128;--accent-soft:#f1e0d5;--accent-2:#2f6f8a;--on-accent:#fbf8f0;--mark:#e3efd9;
  --display:'Instrument Serif',Georgia,serif;--display-w:400;--display-track:-.015em}
@media (prefers-color-scheme:dark){.theme-atlas{--bg:#12191b;--bg-alt:#182224;--surface:#1a2527;--ink:#ece6d6;--ink-2:#a5b1b0;--muted:#7d8b8a;--line:#2b383a;
  --accent:#e08a6a;--accent-ink:#eba084;--accent-soft:#2a1d17;--accent-2:#6fb0cb;--on-accent:#12191b;--mark:#24331f}}
body.theme-atlas,.card.theme-atlas{background-image:repeating-radial-gradient(circle at 18% 8%,transparent 0 44px,rgba(47,111,138,.07) 44px 45px),repeating-radial-gradient(circle at 86% 62%,transparent 0 56px,rgba(79,122,67,.06) 56px 57px)}
img.avatar{object-fit:cover;background:var(--surface);border:2px solid var(--accent-soft)}

/* ---------- index cards v2: themed preview windows + bento featured (Max: "layout looks weird") ---------- */
.card{border-radius:20px}
.card-visual{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/10;overflow:hidden;padding:20px 20px 0;
  background:radial-gradient(110% 90% at 90% 0%,color-mix(in srgb,var(--accent) 38%,var(--bg-alt)) 0%,var(--bg-alt) 62%)}
.card-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--bg) 35%,transparent))}
.card-visual img{width:100%;height:90%;object-fit:cover;object-position:top left;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0;
  box-shadow:0 -16px 40px -22px rgba(0,0,0,.55);transform:translateY(6px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-visual img{transform:translateY(-2px)}
.card-visual-glyph{align-items:center;justify-content:center;padding:20px}
.card-glyph{font:var(--display-w) clamp(34px,4vw,52px)/1 var(--display);letter-spacing:var(--display-track);color:var(--accent-ink);text-align:center;opacity:.9}
.card-body{gap:8px;padding:18px 20px 18px}
.card-title{font-size:24px;line-height:1.14}
.card.theme-terminal .card-title{font-size:19px}
.card-dek{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.feat-cards{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.feat-cards{grid-template-columns:repeat(2,1fr)}.feat-cards .card:first-child{grid-column:1/-1}}
@media (min-width:1080px){.feat-cards{grid-template-columns:repeat(4,1fr)}.feat-cards .card:first-child{grid-column:span 2;grid-row:span 2}}
.feat-cards .card:first-child .card-visual{aspect-ratio:auto;flex:1;min-height:300px}
.feat-cards .card:first-child .card-title{font-size:clamp(28px,3vw,38px)}
.feat-cards .card:not(:first-child) .card-dek{-webkit-line-clamp:2}
.feat-cards .card:not(:first-child) .card-title{font-size:21px}
.list .cards:not(.feat-cards){display:grid;gap:16px}
.list .card{min-height:0}
/* ---------- hero SVG line art (Max: "add some kewl svg animations") ---------- */
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.hero.frame .hero-art{opacity:.35}
.hero-art *{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ha-edge{stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;animation:ha-draw 9s ease-in-out infinite}
.ha-node{fill:var(--accent);stroke:none;animation:ha-pulse 3.2s ease-in-out infinite}
@keyframes ha-draw{0%{stroke-dashoffset:1}35%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes ha-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1}}
.ha-trace{opacity:.28}
.ha-sig{stroke:var(--accent);stroke-width:2.4;stroke-dasharray:14 900;animation:ha-run 5s linear infinite}
.ha-pad{fill:var(--accent);stroke:none;opacity:.6}
@keyframes ha-run{from{stroke-dashoffset:914}to{stroke-dashoffset:0}}
.ha-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:ha-draw 10s ease-in-out infinite}
.theme-blueprint .hero-art path.ha-draw{stroke-dasharray:500;stroke-dashoffset:500;animation-name:ha-draw-long}
@keyframes ha-draw-long{0%{stroke-dashoffset:500}35%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-500}}
.ha-contour{opacity:.45;stroke:var(--accent-2);animation:ha-drift 14s ease-in-out infinite alternate;transform-origin:930px 330px}
@keyframes ha-drift{to{transform:rotate(6deg) scale(1.04)}}
.ha-breathe{stroke:var(--accent);opacity:.5;transform-origin:940px 330px;animation:ha-breath 10s ease-in-out infinite}
@keyframes ha-breath{0%{transform:scale(.86);opacity:.25}40%{transform:scale(1.08);opacity:.7}100%{transform:scale(.86);opacity:.25}}
.ha-ecg{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:2600;stroke-dashoffset:2600;animation:ha-ecg 4s linear infinite}
@keyframes ha-ecg{to{stroke-dashoffset:0}}
.ha-ray{stroke:var(--accent);opacity:.35}
.ha-spin{animation:ha-spin 60s linear infinite}
@keyframes ha-spin{to{transform:rotate(360deg)}}
.ha-sun{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent)}
.ha-bar{fill:color-mix(in srgb,var(--accent-2) 30%,transparent);stroke:var(--accent-2);opacity:0;animation:ha-bar 6s ease-out infinite}
@keyframes ha-bar{0%{opacity:0}20%,80%{opacity:.7}100%{opacity:0}}
.ha-price{stroke:var(--accent);stroke-width:2.4;stroke-dasharray:2000;stroke-dashoffset:2000;animation:ha-ecg 6s ease-out infinite}
@media (max-width:760px){.hero-art{opacity:.3}}
/* headings get an accent underline that draws in as they reveal */
.band h2::after{content:"";display:block;width:0;height:3px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .9s .25s cubic-bezier(.2,.7,.2,1)}
.band h2.in::after,.no-js .band h2::after{width:72px}
.band-cta h2::after{background:var(--on-accent)}
.feat-cards .card:first-child .card-body{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.hero-art *{animation:none!important;stroke-dashoffset:0!important;opacity:.4}.band h2::after{transition:none;width:72px}}