/* Varmerk base: tokens, header, menu, flat color bands, register components, reading mode, footer.
   One source for every page. The homepage adds only its stage rules on top of this file. */
/* Chrome auto darkens light pages when the OS or the browser is in dark mode; the site has one palette and opts out */
:root{
  color-scheme:only light;
  --page:#EFEDE8; --ink:#121214; --bone:#ECE8DF; --cream:#E9E2D5; --night:#0F0F12; --lilac:#B7A4FF; --hot:#FF4B26; --lime:#CBFF3C; --flag:#FFE45C;
  --pad:clamp(16px,2.4vw,36px); --gutter:max(clamp(20px,3.2vw,48px),calc((100vw - 1360px)/2));
  --disp:"Host Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --serif:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--page);-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{background:var(--page);color:var(--ink);font-family:var(--disp);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hf,var(--page)),0 0 0 4px var(--hi,var(--ink));border-radius:999px}
.ph{display:inline-block;background:var(--flag);color:#121214;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;line-height:1.3;color:#121214!important}

/* header: logo, links on inner pages, menu, one button. Its tone follows the band under it. */
.top{position:fixed;inset:0 0 auto 0;z-index:20;height:68px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 var(--gutter);color:var(--hi,#121214);background:var(--hbg,transparent)}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.03em}
.logo svg{width:20px;height:20px}
.top .mid{opacity:.6}
.top nav{display:flex;gap:clamp(16px,2vw,30px)}
.top nav a{opacity:.72;transition:opacity .2s ease-out}
.top nav a:hover,.top nav a[aria-current]{opacity:1}
body.home .top nav{display:none}
body:not(.home) .top .mid{display:none}
.top .r{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);color:var(--page);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease-out,color .2s ease-out}
.btn:hover{background:var(--hot);color:#fff}
.top .btn{background:var(--hi,#121214);color:var(--hf,#EFEDE8)}
.top .btn:hover{background:var(--hot);color:#fff}
.mbtn{appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease-out,color .2s ease-out}
.mbtn:hover{background:var(--hi,#121214);color:var(--hf,#EFEDE8)}
/* Closed, the user agent's own [popover]:not(:popover-open){display:none} hides it. Nothing here
   overrides that, which is the whole trick: an earlier version set display and visibility itself and
   the two got stuck against the top layer, so the menu opened transparent and never hid again.
   display and overlay are transitioned with allow-discrete so the fade still runs; where that is not
   supported the menu simply opens and closes without one. */
/* A popover arrives with the user agent's own box: width and height fit-content, margin auto, a solid
   border. Left alone, that turned the full screen menu into a bordered box in the top left corner,
   which is what shipped. Every one of those is overridden here, so the overlay covers the viewport. */
.menu{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;z-index:40;background:var(--night);color:var(--bone);grid-template-rows:68px 1fr auto;padding:0 var(--gutter) 28px;overflow:auto;opacity:0;transition:opacity .25s ease-out,display .25s allow-discrete,overlay .25s allow-discrete}
/* The menu is a native popover: its buttons open and close it, Escape closes it, and the browser
   keeps aria-expanded right. display:grid above overrides the user agent's display:none for a
   closed popover on purpose, so the fade still works without @starting-style. */
.menu:popover-open{display:grid;opacity:1}
@starting-style{.menu:popover-open{opacity:0}}
html:has(.menu:popover-open){overflow:hidden}
.menu .bar{display:flex;justify-content:space-between;align-items:center}
.menu ul{list-style:none;align-self:center}
.menu li a{display:inline-block;font-weight:600;letter-spacing:-.055em;line-height:1.02;font-size:clamp(40px,min(8vw,11vh),112px);transition:color .2s ease-out}
.menu li a:hover{color:var(--lime)}
.menu li a em{color:var(--lime)}
.menu .sub{display:flex;gap:26px;flex-wrap:wrap;color:#8E8B84}
.menu .sub a:hover{color:var(--bone)}

/* flat color bands */
.band{position:relative;z-index:5;padding:clamp(84px,13vh,160px) var(--gutter);background:var(--bg);color:var(--fg);--ln:color-mix(in srgb,var(--fg) 18%,transparent);--mu:color-mix(in srgb,var(--fg) 74%,transparent)}
.band.tight{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.f-page{--bg:#EFEDE8;--fg:#121214;--ac:#FF4B26}
.f-cream{--bg:#E9E2D5;--fg:#121214;--ac:#FF4B26}
.f-ink{--bg:#0F0F12;--fg:#ECE8DF;--ac:#CBFF3C}
.f-lilac{--bg:#B7A4FF;--fg:#121214;--ac:#121214}
.f-hot{--bg:#FF4B26;--fg:#121214;--ac:#FFF0D6}
.f-lime{--bg:#CBFF3C;--fg:#121214;--ac:#121214}
.band h2{font-weight:600;letter-spacing:-.055em;line-height:.9;font-size:clamp(44px,6.4vw,112px);max-width:12ch}
.band h2.m{font-size:clamp(36px,4.4vw,72px);max-width:16ch}
.band h2 em,.band h1 em{color:var(--ac)}
.band .k{display:block;margin-bottom:22px;color:var(--mu)}
.band p{max-width:52ch;color:var(--mu)}
.band a.txt{box-shadow:inset 0 -1px 0 currentColor;transition:color .2s ease-out}
.band a.txt:hover{color:var(--ac)}
.band .btn{background:var(--fg);color:var(--bg)}
.band .btn:hover{background:var(--hot);color:#fff}
.hd2{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,7vh,84px)}
.hd2 p{max-width:42ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,110px);align-items:start}
.split>.l{position:sticky;top:110px}
.lede p{font-size:clamp(19px,1.55vw,24px);line-height:1.42;color:var(--fg);max-width:40ch}
.lede p+p{margin-top:1.1em}
.who{margin-top:clamp(56px,9vh,110px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln)}
.who div{padding:28px 30px 0 0;min-width:0}
.who div+div{padding-left:30px;border-left:1px solid var(--ln)}
.who b{display:block;font-weight:600;letter-spacing:-.03em;font-size:clamp(21px,1.8vw,28px);line-height:1.1;margin-bottom:14px}
.rows{border-top:1px solid var(--ln)}
.rows a{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:26px 14px;border-bottom:1px solid var(--ln);transition:background .2s ease-out,color .2s ease-out}
.rows a b{font-weight:600;letter-spacing:-.04em;font-size:clamp(24px,2.5vw,38px);line-height:1.05}
.rows a span{color:var(--mu);transition:color .2s ease-out}
.rows a:hover{background:var(--ac);color:#121214}
.rows a:hover span{color:#121214}
.f-page .rows a:hover,.f-cream .rows a:hover{background:var(--ink);color:var(--bone)}
.f-page .rows a:hover span,.f-cream .rows a:hover span{color:var(--bone)}
.tbl{border-top:1px solid var(--ln)}
.tbl>div{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.15fr) minmax(0,1.3fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--ln);align-items:baseline}
.tbl.c4>div{grid-template-columns:minmax(0,.9fr) minmax(0,.5fr) minmax(0,1.2fr) minmax(0,1.2fr)}
.tbl>.th{padding:0 0 14px;color:var(--mu)}
.tbl b{font-weight:600;letter-spacing:-.03em;font-size:clamp(20px,1.7vw,27px);line-height:1.1}
.tbl span{color:var(--mu)}
.tbl span+span{color:var(--fg)}
.tbl .y{color:var(--hot);font-weight:600}
.tbl .n{color:var(--fg);font-weight:600}
.chips{display:inline-flex;gap:8px;flex-wrap:wrap}
.chip{appearance:none;border:0;cursor:pointer;height:42px;padding:0 20px;border-radius:999px;background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease-out,color .2s ease-out}
.chip[aria-selected="true"],.chip:hover,.chipr input:checked+span{background:var(--fg);color:var(--bg)}
.never{list-style:none;border-top:1px solid var(--ln)}
.never li{display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--ln)}
.never li b{font-weight:600;letter-spacing:-.05em;line-height:.98;font-size:clamp(28px,4.1vw,68px)}
.never li span{color:var(--mu)}
.incl{columns:2;column-gap:clamp(32px,5vw,90px);border-top:1px solid var(--ln);padding-top:6px;list-style:none}
.incl li{break-inside:avoid;padding:18px 0;border-bottom:1px solid var(--ln)}
.incl b{display:block;font-weight:600;letter-spacing:-.02em;font-size:19px;margin-bottom:4px}
.incl span{color:var(--mu)}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--ln)}
.packs>div{padding:26px 28px 6px 0;min-width:0}
.packs>div+div{padding-left:28px;border-left:1px solid var(--ln)}
.packs b{display:block;font-weight:600;letter-spacing:-.04em;font-size:clamp(24px,2.3vw,36px);line-height:1;margin-bottom:12px}
.packs p{margin-bottom:16px}
.packs ul{list-style:none;margin:18px 0 22px;border-top:1px solid var(--ln)}
.packs li{padding:11px 0;border-bottom:1px solid var(--ln);color:var(--mu)}
.packs .price{display:block;color:var(--mu)}
.packs .price b{display:inline;margin:0;font-size:clamp(26px,2.4vw,38px);line-height:1;letter-spacing:-.04em;color:var(--fg)}
.slots{border-top:1px solid var(--ln)}
.slots>div,.slots>a{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.4fr) auto;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--ln)}
.slots b{font-weight:600;letter-spacing:-.04em;font-size:clamp(22px,2.2vw,34px);line-height:1.05}
.slots span{color:var(--mu)}
.hubs{border-top:1px solid var(--ln)}
.hubs>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(24px,5vw,90px);padding:30px 0;border-bottom:1px solid var(--ln)}
.hubs b{display:block;font-weight:600;letter-spacing:-.045em;font-size:clamp(26px,2.9vw,46px);line-height:1}
.hubs b a:hover{color:var(--ac)}
.hubs .cap{display:block;margin-top:12px;color:var(--mu)}
.hubs ul{list-style:none}
.hubs li+li{margin-top:10px}
.hubs li a{font-size:clamp(17px,1.35vw,21px);letter-spacing:-.01em;transition:color .2s ease-out}
.hubs li a:hover{color:var(--ac)}
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.7fr);gap:clamp(28px,5vw,90px);align-items:start;padding-bottom:clamp(64px,10vh,120px);margin-bottom:clamp(64px,10vh,120px);border-bottom:1px solid var(--ln)}
.idcard{border-top:1px solid var(--ln);padding-top:18px}
.idcard b{display:block;font-weight:600;letter-spacing:-.04em;font-size:clamp(22px,1.9vw,28px);line-height:1.05}
.idcard .cap{display:block;margin:8px 0 14px;color:var(--mu)}
.idcard>span:last-child{display:block;color:var(--mu)}
.founder .slot,.slotimg{aspect-ratio:4/5;background:var(--flag);color:#121214;display:flex;align-items:flex-end;padding:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.faq{border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;font-weight:600;letter-spacing:-.03em;font-size:clamp(20px,1.9vw,29px);line-height:1.15;transition:color .2s ease-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ac)}
.faq summary i{font-style:normal;font-weight:300;font-size:1.3em;line-height:.8;transition:rotate .25s ease-out}
.faq details[open] summary i{rotate:45deg}
.faq details p{padding:0 0 28px;max-width:60ch}
.faq summary:focus-visible{box-shadow:none;color:var(--ac)}
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px clamp(24px,4vw,64px);max-width:1040px;margin-top:clamp(40px,7vh,80px)}
.form label{display:block}
.form label>.cap{display:block;margin-bottom:10px;color:var(--mu)}
.form input[type=text],.form input[type=email],.form textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--fg);border-radius:0;color:var(--fg);font-family:var(--disp);font-weight:600;letter-spacing:-.03em;font-size:clamp(24px,2.6vw,40px);padding:6px 0 12px;outline:none;transition:border-color .2s ease-out,padding .2s ease-out}
.form textarea{font-size:clamp(19px,1.6vw,24px);font-weight:500;letter-spacing:-.01em;min-height:120px;resize:vertical}
.form ::placeholder{color:color-mix(in srgb,var(--fg) 34%,transparent)}
.form input:focus-visible,.form textarea:focus-visible{box-shadow:none;border-radius:0;border-bottom-width:4px;padding-bottom:10px}
.chipr{position:relative;display:inline-block}
.chipr input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chipr span{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fg);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease-out,color .2s ease-out}
.chipr input:focus-visible+span{box-shadow:inset 0 0 0 1px var(--fg),0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.form .full{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.form .btn{height:56px;padding:0 30px;font-size:11.5px}

/* inner page hero: a flat field, the crumb, one headline, the V grid as the site motif in print */
.hero{padding-top:clamp(130px,19vh,210px);padding-bottom:clamp(56px,9vh,110px);overflow:hidden}
.hero .crumb{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(28px,5vh,56px);color:var(--mu)}
.hero .crumb a:hover{color:var(--fg)}
.hero h1{position:relative;font-weight:600;letter-spacing:-.055em;line-height:.92;font-size:clamp(42px,6vw,104px);max-width:15ch}
.hero.long h1{font-size:clamp(38px,4.7vw,80px);max-width:19ch}
.hero .dek{position:relative;margin-top:clamp(22px,4vh,40px);font-size:clamp(19px,1.55vw,24px);line-height:1.42;color:var(--fg);max-width:44ch}
.hero .meta{position:relative;display:flex;gap:10px 34px;flex-wrap:wrap;margin-top:clamp(30px,5vh,60px);padding-top:18px;border-top:1px solid var(--ln);color:var(--mu)}
.hero .meta b{font-weight:400;color:var(--fg)}
.vgrid{position:absolute;right:var(--gutter);top:96px;bottom:0;width:min(32vw,470px);color:var(--fg);pointer-events:none}
.vgrid svg{width:100%;height:100%}

/* reading mode */
.read{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.toc{position:sticky;top:104px;list-style:none;border-top:1px solid var(--ln)}
.toc li a{display:block;padding:11px 0;border-bottom:1px solid var(--ln);color:var(--mu);font-size:15px;transition:color .2s ease-out}
.toc li a:hover,.toc li a.on{color:var(--fg)}
.toc li a.on{font-weight:600}
.prose{max-width:74ch}
.prose>*+*{margin-top:1.15em}
/* Reading pages had a hairline above every h2, above and below every list item, around every note
   and under every table row, so a guide was a column of rules with text between them, and two rules
   with a gap between them read as an empty field. Rules now belong to tables and the FAQ only.
   Headings are separated by space, lists have bullets and numbers, notes sit on a tint. */
.prose h2{font-weight:600;letter-spacing:-.045em;line-height:1.02;font-size:clamp(30px,3.1vw,46px);max-width:none;margin-top:clamp(56px,8vh,88px)}
.prose h2:first-child{margin-top:0}
.prose h2+*{margin-top:.8em}
.prose h3{font-weight:600;letter-spacing:-.03em;line-height:1.12;font-size:clamp(21px,1.8vw,27px);margin-top:2em}
.prose p,.prose li{font-size:18px;line-height:1.62;color:color-mix(in srgb,var(--fg) 86%,transparent);max-width:68ch}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose ul li,.prose ol li{padding:0 0 0 30px;position:relative}
.prose li+li{margin-top:.55em}
.prose ul li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--fg)}
.prose ol{counter-reset:s}
.prose ol li{counter-increment:s}
.prose ol li::before{content:counter(s);position:absolute;left:0;top:0;font-weight:600;font-size:18px;line-height:1.62;color:var(--fg);font-variant-numeric:tabular-nums}
.prose a{box-shadow:inset 0 -1px 0 currentColor;transition:color .2s ease-out}
.prose a:hover{color:var(--ac)}
.prose strong{font-weight:600;color:var(--fg)}
.prose .tbl{margin-top:1.6em}
.prose .tbl b{font-size:clamp(18px,1.4vw,22px)}
.prose .tbl span{font-size:16.5px;line-height:1.5}
/* the short answer: smaller than the h1 and the h2s, set apart by a tint rather than by rules */
.answer{max-width:980px;margin-bottom:clamp(48px,8vh,88px);padding:clamp(22px,3vw,36px);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.answer .cap{display:block;margin-bottom:12px;color:var(--mu)}
.answer p{font-size:clamp(19px,1.6vw,24px);line-height:1.45;letter-spacing:-.015em;font-weight:500;color:var(--fg);max-width:62ch}
.note2{padding:18px 22px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.note2 .cap{display:block;margin-bottom:8px;color:var(--ac)}
/* tables in reading pages: real <table> markup from tables.mjs */
.prose .t{margin-top:1.6em;max-width:none;overflow-x:auto}
.prose .t table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5}
.prose .t thead th{text-align:left;vertical-align:bottom;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);padding:0 18px 12px 0;border-bottom:1px solid var(--fg)}
.prose .t tbody th,.prose .t td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--ln)}
.prose .t tbody th{font-weight:600;color:var(--fg);letter-spacing:-.01em}
.prose .t td{color:color-mix(in srgb,var(--fg) 86%,transparent)}
.prose .t .y{color:var(--hot);font-weight:600}
.prose .t .n{color:var(--fg);font-weight:600}
@media (max-width:820px){
  .prose .t thead{display:none}
  .prose .t tr{display:block;padding:16px 0;border-bottom:1px solid var(--ln)}
  .prose .t tbody th,.prose .t td{display:block;padding:0;border:0}
  .prose .t tbody th{font-size:18px;margin-bottom:8px}
  .prose .t td+td,.prose .t th+td{margin-top:8px}
  .prose .t td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:2px}
}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:1.6em;max-width:none}
.shots figure{min-width:0}
.shots .slotimg{aspect-ratio:9/17;border-radius:18px}
.shots figcaption{margin-top:10px;color:var(--mu)}
.related{border-top:1px solid var(--ln)}
.related a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ln);transition:color .2s ease-out}
.related a b{font-weight:600;letter-spacing:-.035em;font-size:clamp(20px,1.9vw,30px);line-height:1.1}
.related a span{color:var(--mu)}
.related a:hover{color:var(--ac)}
.bignum{font-weight:600;letter-spacing:-.07em;line-height:.8;font-size:clamp(120px,26vw,520px)}

/* footer */
.foot{position:relative;z-index:5;padding:clamp(60px,10vh,120px) var(--gutter) 28px;background:var(--night);color:var(--bone)}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-bottom:clamp(56px,9vh,110px)}
.foot .cols .cap{display:block;color:#8E8B84;margin-bottom:16px}
.foot .cols ul{list-style:none}
.foot .cols li+li{margin-top:9px}
.foot .cols a{color:#C9C5BC;transition:color .2s ease-out}
.foot .cols a:hover{color:var(--lime)}
.foot .word{font-weight:600;letter-spacing:-.07em;font-size:clamp(90px,23vw,460px);line-height:.8;color:var(--lime)}
.foot .meta{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:38px;color:#8E8B84}
.foot .meta a:hover{color:var(--bone)}

@media (max-width:980px){
  .top nav{display:none}
}
@media (max-width:820px){
  .top .mid{display:none}
  .top .btn{padding:0 14px}
  .split,.founder,.form,.read,.answer{grid-template-columns:1fr}
  .split>.l,.toc{position:static}
  .toc{display:none}
  .who,.packs{grid-template-columns:1fr}
  .who div,.who div+div,.packs>div,.packs>div+div{padding:24px 0;border-left:0;border-bottom:1px solid var(--ln)}
  .tbl>.th{display:none}
  .tbl>div,.tbl.c4>div{grid-template-columns:1fr;gap:6px}
  .rows a{grid-template-columns:36px minmax(0,1fr);row-gap:8px;padding:22px 4px}
  .rows a span{grid-column:2}
  .never li{grid-template-columns:36px minmax(0,1fr)}
  .never li span:last-child{grid-column:2}
  .incl{columns:1}
  .slots>div,.slots>a,.hubs>div,.related a{grid-template-columns:1fr;gap:10px}
  .founder .slot{max-width:240px}
  .vgrid{display:none}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose p,.prose li{font-size:17px}
}
.prose .tbl .th span{font-size:10.5px}
.hero .meta{align-items:center}
.tbl.c2>div{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr)}
.prose .tbl.c2>div,.split .tbl.c2>div{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.never li>.cap{white-space:nowrap}
@media (max-width:820px){.tbl.c2>div,.prose .tbl.c2>div,.split .tbl.c2>div{grid-template-columns:1fr}}

/* back to top: the V of the logo turned over, which is the growth caret of the homepage */
.totop{position:fixed;right:max(16px,calc(var(--gutter) - 8px));bottom:20px;z-index:19;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 13px;border:0;border-radius:999px;cursor:pointer;background:var(--hi,#121214);color:var(--hf,#EFEDE8);opacity:0;visibility:hidden;translate:0 10px;transition:opacity .25s ease-out,translate .25s ease-out,visibility 0s linear .25s,background .2s ease-out,color .2s ease-out}
.totop.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .25s ease-out,translate .25s ease-out,background .2s ease-out,color .2s ease-out}
.totop:hover{background:var(--hot);color:#fff}
.totop svg{width:15px;height:15px}
html:has(.menu:popover-open) .totop{display:none}

/* blog: index rows, typographic covers, article furniture */
.cover{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--cbg,#FF4B26);color:var(--cfg,#121214);display:flex;align-items:flex-end;padding:clamp(18px,2.6vw,40px)}
.cover b{font-weight:600;letter-spacing:-.065em;line-height:.8;font-size:clamp(64px,13vw,240px)}
.cover b em{font-weight:300}
.cover .cap{position:absolute;left:clamp(18px,2.6vw,40px);top:clamp(16px,2.2vw,32px)}
.cover.sm{aspect-ratio:4/3}
.cover.sm b{font-size:clamp(44px,6vw,104px)}
.c-hot{--cbg:#FF4B26;--cfg:#121214}.c-lime{--cbg:#CBFF3C;--cfg:#121214}.c-lilac{--cbg:#B7A4FF;--cfg:#121214}.c-ink{--cbg:#0F0F12;--cfg:#ECE8DF}.c-cream{--cbg:#E9E2D5;--cfg:#121214}
.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:end}
.feat h2{font-size:clamp(34px,4.2vw,68px);max-width:16ch}
.feat h2 a:hover{color:var(--ac)}
.feat p{margin-top:20px}
.feat .by{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:26px;color:var(--mu)}
.posts{border-top:1px solid var(--ln)}
.posts>a{display:grid;grid-template-columns:150px minmax(0,1.5fr) minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:baseline;padding:28px 0;border-bottom:1px solid var(--ln);transition:color .2s ease-out}
.posts>a b{font-weight:600;letter-spacing:-.04em;font-size:clamp(22px,2.3vw,36px);line-height:1.06}
.posts>a span{color:var(--mu)}
.posts>a:hover b{color:var(--ac)}
.posts>a[hidden]{display:none!important}
.pager{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;color:var(--mu)}

/* The guides library: section filters, a grid of every article, and pages. Built from the same thin
   rules as .rows and .tbl rather than as cards, so it reads as part of the site and not as a widget
   dropped into it. No shadows, no radius, no hover lift. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.chips a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);transition:box-shadow .2s ease-out,background .2s ease-out}
.chips a span{color:var(--mu)}
.chips a:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.chips a[aria-current]{background:var(--fg);color:var(--bg);box-shadow:none}
.chips a[aria-current] span{color:inherit;opacity:.7}
.lib-range{color:var(--mu);margin:0 0 18px;max-width:none}
.lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln)}
.lib>a{display:flex;flex-direction:column;gap:10px;min-width:0;padding:26px 28px 30px 0;border-bottom:1px solid var(--ln);transition:color .2s ease-out}
.lib>a:nth-child(3n+2),.lib>a:nth-child(3n){padding-left:28px;border-left:1px solid var(--ln)}
.lib>a .cap{color:var(--mu)}
.lib>a b{font-weight:600;letter-spacing:-.03em;font-size:clamp(19px,1.5vw,24px);line-height:1.15}
.lib>a .d{color:var(--mu);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib>a:hover b{color:var(--ac)}
/* The old .pager spread its children with space-between, which put four items at the four corners
   of the row. The library's pages sit together, the way a reader looks for them. */
.lib + .pager{justify-content:center;gap:8px;margin-top:44px}
.pager a,.pager span[aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px}
.pager a{color:var(--fg);box-shadow:inset 0 0 0 1px var(--ln)}
.pager a:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.pager span[aria-current]{background:var(--fg);color:var(--bg)}
.pager span[aria-hidden]{opacity:.4}
@media (max-width:980px){
  .lib{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lib>a:nth-child(3n+2),.lib>a:nth-child(3n){padding-left:0;border-left:0}
  .lib>a:nth-child(2n){padding-left:24px;border-left:1px solid var(--ln)}
}
@media (max-width:620px){
  /* Five rows of filters before the first article is a screen of scrolling for nothing on a
     phone. One row that scrolls sideways, running to the screen edge so it reads as more to swipe. */
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:0 0 auto}
  .lib{grid-template-columns:1fr}
  .lib>a:nth-child(2n){padding-left:0;border-left:0}
  .lib>a{padding-right:0}
  .pager{flex-wrap:wrap;justify-content:center}
}
.prose blockquote{margin:2.2em 0;padding:1.3em 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,50px);line-height:1.08;color:var(--fg);max-width:20ch}
.prose .say{display:block;padding:16px 0 16px 0;font-weight:600;letter-spacing:-.03em;font-size:clamp(20px,1.8vw,27px);line-height:1.2;color:var(--fg)}
.prose .say::before{content:"\201C"}
.prose .say::after{content:"\201D"}
.prose figure{margin:2em 0}
.prose figure .slotimg{aspect-ratio:16/9;border-radius:0}
.prose figcaption{margin-top:10px;color:var(--mu)}
.takeaways{padding:22px 0 8px;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.takeaways .cap{display:block;color:var(--ac);margin-bottom:6px}
.takeaways ul{border-top:0}
.takeaways ul li:last-child{border-bottom:0}
.author{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(56px,9vh,100px);padding-top:28px;border-top:1px solid var(--ln)}
.author .slotimg{aspect-ratio:1/1;font-size:9px}
.author b{display:block;font-weight:600;letter-spacing:-.03em;font-size:22px;margin-bottom:8px}
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.pn a{padding:28px 28px 30px 0;min-width:0;transition:color .2s ease-out}
.pn a+a{padding-left:28px;border-left:1px solid var(--ln);text-align:right}
.pn .cap{display:block;color:var(--mu);margin-bottom:12px}
.pn b{font-weight:600;letter-spacing:-.035em;font-size:clamp(20px,1.9vw,30px);line-height:1.1}
.pn a:hover{color:var(--ac)}
@media (max-width:820px){
  .feat,.author{grid-template-columns:1fr}
  .author .slotimg{max-width:120px}
  .posts>a{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .pn{grid-template-columns:1fr}
  .pn a+a{padding-left:0;border-left:0;border-top:1px solid var(--ln);text-align:left}
  .totop span{display:none}
  .totop{padding:0 14px}
}
.never li b a{transition:color .2s ease-out}
.never li b a:hover{color:var(--ac)}

/* live site only: a link to a page that is not written yet loses its href on the server and must not act like a link */
a[data-soon]{pointer-events:none;cursor:default}
/* a figure drawn for the page (shapes, sizes) rather than a screenshot: line art in the text color */
.prose figure.shape{margin:2em 0 1.6em;max-width:620px}
.prose figure.shape svg{display:block;width:100%;height:auto;color:var(--fg)}
.prose figure.shape text{font-family:var(--mono)}
.prose figure.shape figcaption{font-family:inherit;text-transform:none;letter-spacing:0;font-size:14.5px;line-height:1.5;max-width:60ch}
.prose figure.shape .inv{fill:var(--bg)}
.author.noimg{grid-template-columns:1fr}
/* on a phone a 720 wide diagram shrank to 335px and its labels to about 5px: wide diagrams keep a
   readable width and scroll sideways inside the figure, the page itself never scrolls sideways */
@media (max-width:820px){
  .prose figure.shape{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose figure.shape svg[viewBox^="0 0 720"]{min-width:600px}
}
/* the reading column is a grid item with min-width:auto, so one wide child (a diagram's min-width)
   widened the whole page on a phone; the column may shrink, and the figure scrolls instead */
.read>*,.prose{min-width:0}
.prose figure.shape{max-width:100%}
.prose figure.shape .invs{stroke:var(--bg)}