/* Shared by the blog, article pages, privacy policy and the homepage blog preview. Loaded after style.css. */
.nav.scrolled{background:rgba(5,6,13,.94)}
body.subpage{padding-top:0}
.page-hero{position:relative;overflow:hidden;padding:150px 0 54px}
.page-hero::before{content:"";position:absolute;right:-12%;top:-35%;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--g,#7b8cff),transparent);opacity:.2;pointer-events:none}
.page-hero .container,.page-hero .narrow{position:relative}
.page-hero h1{font-size:clamp(2.2rem,5.2vw,4.2rem);max-width:20ch;margin:14px 0 18px}
.page-hero.center h1{margin-inline:auto;text-align:center}
.lede{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.6;color:#b9bed2;max-width:60ch}
.crumb{font-size:.9rem;color:var(--mut)}.crumb a:hover{color:#fff}.crumb span{margin:0 6px}
.cat{display:inline-block;font:500 .8rem 'Geist Mono',monospace;color:var(--g,#7b8cff);border:1px solid color-mix(in srgb,var(--g,#7b8cff) 55%,transparent);padding:4px 12px;border-radius:99px}
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--mut);font-size:.9rem}
.meta b{color:#dfe3f2;font-weight:500}

/* article body */
.post{padding:10px 0 20px}
.toc{border:1px solid var(--line);border-radius:18px;padding:20px 26px;margin:0 0 44px;background:var(--card)}
.toc b{display:block;margin-bottom:8px;font-size:.95rem}
.toc ol{margin:0;padding-left:20px;color:var(--mut)}.toc li{padding:3px 0}.toc a{color:#dfe3f2}.toc a:hover{color:var(--hot)}
.prose{font-size:1.1rem;line-height:1.85;color:#c4c9dc}
.prose>*+*{margin-top:0}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:58px 0 16px;max-width:none;color:#fff;scroll-margin-top:90px}
.prose h3{font-size:1.3rem;margin:32px 0 8px;color:#fff}
.prose p{margin:0 0 20px}
.prose a{color:var(--hot);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:#fff;font-weight:600}
.prose ul,.prose ol{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding:5px 0 5px 28px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.95em;width:12px;height:12px;border-radius:4px;background:var(--hot);opacity:.9}
.prose ol{counter-reset:s}.prose ol li{position:relative;padding:6px 0 6px 40px;counter-increment:s}
.prose ol li::before{content:counter(s);position:absolute;left:0;top:.35em;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:600 .85rem Geist;display:grid;place-items:center}
.callout{margin:30px 0;padding:22px 26px;border-radius:18px;border:1px solid color-mix(in srgb,var(--hot) 45%,transparent);background:linear-gradient(135deg,rgba(255,90,31,.12),rgba(255,90,31,.03))}
.callout p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.98rem;line-height:1.55}
.prose th,.prose td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:#fff;font-weight:600;background:rgba(255,255,255,.04)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;margin:26px 0}.tablewrap table{margin:0}
.cta-band{margin:70px 0 0;padding:clamp(28px,5vw,52px);border-radius:28px;background:linear-gradient(135deg,rgba(255,90,31,.2),rgba(123,140,255,.14));border:1px solid var(--line);text-align:center}
.cta-band h2{margin:0 auto 12px;max-width:18ch;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.cta-band p{color:#c4c9dc;max-width:46ch;margin:0 auto 24px}
.cta-band .cta{justify-content:center}

/* post cards (blog index, related posts, homepage preview) */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:30px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card);transition:transform .5s var(--ease),border-color .3s}
.post-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--g) 60%,transparent)}
.post-art{position:relative;height:150px;display:grid;place-items:center;background:radial-gradient(120% 140% at 20% 0%,color-mix(in srgb,var(--g) 75%,#05060d),#0a0c18 75%);overflow:hidden}
.post-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px)}
.post-art b{position:relative;z-index:1;font:600 4.6rem/1 Geist;letter-spacing:-.06em;color:rgba(255,255,255,.92);transition:transform .6s var(--ease)}
.post-card:hover .post-art b{transform:scale(1.14) rotate(-3deg)}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.3rem;letter-spacing:-.03em;line-height:1.2}
.post-body p{color:var(--mut);font-size:.96rem}
.post-foot{margin-top:auto;padding-top:6px;color:var(--mut);font-size:.85rem;display:flex;justify-content:space-between}
.post-card.featured{grid-column:1/-1;flex-direction:row}
.post-card.featured .post-art{flex:0 0 38%;height:auto;min-height:260px}.post-card.featured .post-art b{font-size:9rem}
.post-card.featured .post-body{padding:34px 36px;justify-content:center}.post-card.featured h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.04em}
.post-card.featured p{font-size:1.05rem}
.blog-teaser{margin-top:34px}
.more{display:inline-block;margin-top:26px;color:var(--hot);font-weight:600}.more:hover{text-decoration:underline}

/* sub-page footer */
.sub-footer{border-top:1px solid var(--line);margin-top:90px;padding:34px 0;color:var(--mut);font-size:.92rem}
.sub-footer .container{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.sub-footer p{margin-right:auto}.sub-footer a:hover{color:#fff}

@media(max-width:820px){
  .post-card.featured{flex-direction:column}.post-card.featured .post-art{flex:none;min-height:170px}.post-card.featured .post-art b{font-size:6rem}
  .page-hero{padding-top:120px}
  .prose{font-size:1.05rem}
}

.post-art b.long{font-size:3.4rem;letter-spacing:-.04em}.post-card.featured .post-art b.long{font-size:6rem}
