:root{
  --maxw: 1100px;
  --pad: clamp(16px, 3vw, 32px);
  --rhythm: 1.6rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--f-body, system-ui, sans-serif);
  color: var(--c-ink, #0e1116);
  background: var(--c-paper, #fafaf7);
  line-height:1.55;
  font-size:17px;
}
h1,h2,h3,h4{ font-family: var(--f-head, Georgia, serif); line-height:1.15; margin:0 0 0.5em }
h1{ font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing:-.01em }
h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top:1.6em }
h3{ font-size: 1.2rem; margin-top:1.4em }
a{ color: var(--c-primary); text-decoration: underline; text-underline-offset:.15em }
a:hover{ color: var(--c-accent) }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) }

/* Header */
.site-header{ border-bottom: 1px solid rgba(0,0,0,.08); background:#fff }
.site-header .wrap{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding-block:18px }
.brand{ text-decoration:none; color:inherit; display:flex; flex-direction:column }
.brand-name{ font-family: var(--f-head); font-weight:700; font-size:1.25rem; color: var(--c-primary) }
.brand-tag{ font-size:.78rem; opacity:.7; letter-spacing:.02em }
nav.primary{ display:flex; gap:1.25rem; flex-wrap:wrap }
nav.primary a{ text-decoration:none; font-weight:600; font-size:.95rem }

/* Hero */
.hero{ background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 12%, var(--c-paper)) 0%, var(--c-paper) 100%); padding: clamp(40px, 7vw, 96px) 0; border-bottom:1px solid rgba(0,0,0,.06) }
.hero .wrap{ display:grid; gap:1.5rem; max-width: 880px }
.hero h1{ color: var(--c-primary) }
.hero .lede{ font-size: 1.25rem; max-width: 56ch }
.hero .pill{ display:inline-block; background: var(--c-accent); color: var(--c-ink); padding:.3rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; width:fit-content }

/* Cards */
.cards{ display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: clamp(32px, 5vw, 64px) 0 }
.card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:1.25rem 1.25rem 1.5rem; transition: transform .15s ease, box-shadow .15s ease }
.card:hover{ transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.08) }
.card h3{ margin:.25rem 0 .6rem; color: var(--c-primary) }
.card .meta{ font-size:.85rem; opacity:.7 }
.card a{ text-decoration:none }

/* Pages */
.page, .community{ padding: clamp(32px, 5vw, 64px) 0 }
.page-hero, .community-hero{ max-width: 760px; margin: 0 auto var(--rhythm) }
.page-hero h1, .community-hero h1{ color: var(--c-primary) }
.lede{ font-size:1.15rem; opacity:.85; max-width: 60ch }
.kicker{ text-transform: uppercase; font-size:.78rem; letter-spacing:.08em; font-weight:700; color: var(--c-accent); margin:0 0 .25rem }
.prose{ max-width: 720px; margin: 0 auto }
.prose p{ margin: 0 0 1.1em }
.prose h2{ margin-top: 2em }
.prose blockquote{ border-left:4px solid var(--c-accent); padding:.4rem 1rem; margin:1.5rem 0; background:#fff }

/* By-numbers strip */
.by-numbers{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:1rem; margin: 1.5rem 0; max-width:720px }
.by-numbers > div{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:.85rem 1rem; margin:0 }
.by-numbers dt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin:0 0 .25rem }
.by-numbers dd{ font-family: var(--f-head); font-size:1.5rem; margin:0; color: var(--c-primary) }

/* Aside */
.community-aside{ max-width:720px; margin: 2rem auto 0; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:1.25rem }
.community-aside h2{ margin-top:0; font-size:1.1rem }
.community-aside ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }

/* Footer */
.site-footer{ background: var(--c-ink); color:#dcdfe5; padding: clamp(48px, 6vw, 80px) 0 32px; margin-top: clamp(48px,6vw,80px) }
.site-footer a{ color:#fff }
.footer-disclaimer{ border:1px dashed rgba(255,255,255,.25); padding:1rem 1.25rem; border-radius:10px; max-width:720px; margin: 0 auto 2rem; font-size:.92rem }
.footer-nav{ display:grid; gap:2rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) }
.footer-nav h3{ color: var(--c-accent); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .75rem }
.footer-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:.95rem }
.footer-nav .soon{ opacity:.55 }
.footer-fineprint{ margin-top:2.5rem; font-size:.85rem; opacity:.75; border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem }

@media (max-width: 640px){
  .site-header .wrap{ flex-direction:column; align-items:flex-start }
  nav.primary{ gap:.85rem }
}