/* Shared styles for the Studio pages: the site's tokens, nav and footer (kept in step with index.html). */
:root{
  --paper:#EEF0F7; --surface:#FFFFFF; --ink:#151A3A; --muted:#4C5275; --line:#D3D7E8;
  --signal:#A84E28; --signal-ink:#FFFFFF;
  --stage:#0E1230; --stage-ink:#EDEFFF; --stage-muted:#A9AFD6; --stage-signal:#D97757;
  --brand:#D97757;
  --stage-deep:#04051A; --stage-glow-1:rgba(104,92,255,.24); --stage-glow-2:rgba(217,119,87,.15);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12163A; --surface:#1A1F4A; --ink:#EDEFFF; --muted:#A9AFD6; --line:#2E3468;
    --signal:#E08A66; --signal-ink:#12163A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12163A; --surface:#1A1F4A; --ink:#EDEFFF; --muted:#A9AFD6; --line:#2E3468;
  --signal:#E08A66; --signal-ink:#12163A;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:8px}
.nav :focus-visible,.dark :focus-visible{outline-color:var(--stage-signal)}

/* nav (same as index.html) */
.nav{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(14,18,48,.92);background:color-mix(in srgb,var(--stage) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:var(--stage-ink)}
.nav-in{max-width:1200px;margin:0 auto;padding:6px 24px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.brand{color:var(--stage-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.brand svg{display:block;height:28px;width:auto;overflow:visible}
.wm-i{fill:var(--stage-ink)}
.wm-o{fill:var(--brand)}
.nav-links{display:flex;flex-wrap:wrap;gap:2px}
.nav-links a{color:var(--stage-ink);text-decoration:none;font-weight:500;font-size:.98rem;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px}
.nav-links a:hover{background:rgba(237,239,255,.12)}
/* Studio link: orange pill, it opens a separate page */
.nav-links a.nav-studio{background:var(--brand);color:#0E1230;font-weight:600}
.nav-links a.nav-studio:hover{background:#E8916F}
.nav-links a.nav-studio::after{content:"\2197";margin-left:6px;font-size:.85em}
.nav-links a.nav-studio[aria-current="page"]::after{content:none}
/* fade between the main page and the Studio pages (Chrome, Edge, Safari 18+); the nav stays put */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}

/* page */
.wrap{max-width:1200px;margin:0 auto;padding:72px 24px 40px}
.kicker{margin:0 0 14px;color:var(--signal);font-weight:600;font-size:1rem}
.big{font-family:var(--display);font-weight:750;font-size:clamp(2.5rem,5.6vw,4.8rem);line-height:.98;letter-spacing:-.035em;margin:0 0 18px;font-variation-settings:"opsz" 96}
.lede{color:var(--muted);font-size:1.25rem;margin:0;max-width:36em}
.crumb{font-size:.95rem;font-weight:600;margin:0 0 18px}
.crumb a{color:inherit;text-underline-offset:4px}

/* studio grid */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 22px;padding:0;list-style:none}
.filters span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);font-size:.95rem;font-weight:600;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.piece{background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.piece:hover{transform:translateY(-3px);border-color:var(--signal)}
.piece .thumb{display:block;aspect-ratio:16/10;background:radial-gradient(70% 80% at 70% 40%,var(--stage-glow-1),transparent 70%),var(--stage)}
.piece .thumb svg{display:block;width:100%;height:100%}
.piece .meta{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.type{align-self:flex-start;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--signal);border:1.5px solid currentColor;border-radius:999px;padding:2px 10px}
.piece h2{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.15;letter-spacing:-.02em;margin:0}
.piece p{margin:0;color:var(--muted);font-size:1rem}
.piece.ghost{background:transparent;border:1.5px dashed var(--line);justify-content:center;min-height:200px}
.piece.ghost:hover{transform:none;border-color:var(--line)}

/* dark pages (explainers) */
body.dark{background:var(--stage-deep);color:var(--stage-ink)}
body.dark .kicker{color:var(--stage-signal)}
body.dark .lede{color:var(--stage-muted)}
body.dark .foot{color:var(--stage-muted)}
.note{font-size:.95rem;color:var(--stage-muted);margin:18px 0 0}

.foot{max-width:1200px;margin:0 auto;padding:28px 24px 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:.95rem}
.foot a{color:inherit}

@media (max-width:820px){
  body{font-size:17px}
  .wrap{padding-top:48px}
}
@media (prefers-reduced-motion: reduce){.piece{transition:none}.piece:hover{transform:none}}
/* explainer pages on phones: give the charts the full width, as the standalone dashboard does */
@media (max-width:760px){body.dark .wrap{padding-left:8px;padding-right:8px}body.dark .crumb,body.dark .note{padding:0 8px}}