/* Shared look for the index and about pages: same tokens as the guides */
:root{
  --bg:#F2F4F1; --surface:#FFFFFF; --fg:#1B2220; --muted:#5A6561; --rule:#D5DBD6;
  --market:#9A6200; --market-soft:#F6EBD5; --protect:#176C86; --protect-soft:#DCEDF2;
  --display:"Young Serif",Georgia,serif; --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121716; --surface:#1A2120; --fg:#E4E9E6; --muted:#9AA6A1; --rule:#2E3735;
  --market:#E3A53D; --market-soft:#2E2412; --protect:#5DB8D4; --protect-soft:#13282F; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 72px}
main{max-width:760px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--protect)}
a:focus-visible{outline:2px solid var(--protect);outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:24px;border-bottom:1px solid var(--rule)}
.brand{font:400 1.25rem/1 var(--display);color:var(--fg);text-decoration:none}
.top nav{display:flex;gap:18px;font:600 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}
.hero{padding-block:48px 32px;display:grid;gap:18px}
.hero h1{font-size:clamp(2.4rem,7vw,3.6rem)}
.lede{font-size:1.15rem;max-width:58ch;color:var(--fg)}
.eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.list{display:grid;gap:14px}
.card{display:grid;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:20px;text-decoration:none;color:inherit;transition:border-color .15s}
.card:hover{border-color:var(--fg)}
.card h2{font-size:1.5rem}
.card p{color:var(--muted);max-width:62ch}
.meta{display:flex;flex-wrap:wrap;gap:8px;font:600 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tag{padding:5px 7px;border-radius:3px;border:1px solid var(--rule)}
.paid{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--market)}
.prose{display:grid;gap:14px;max-width:62ch;padding-block:40px 0}
.prose h2{font-size:1.5rem;padding-top:12px}
.prose ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
footer{max-width:760px;margin:56px auto 0;padding-top:20px;border-top:1px solid var(--rule);font-size:.85rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}