:root { --canvas:#F8F6F1; --surface:#FFFFFF; --ink:#16211D; --muted:#5E6B66; --brand:#14463A; --deep:#0E332A; --border:#E6E1D6; --soft:#E3EEE9; }
@media (prefers-color-scheme: dark) { :root { --canvas:#0B0E0D; --surface:#151918; --ink:#EEF2EF; --muted:#9BA8A2; --brand:#4FB494; --deep:#0E332A; --border:#262C2A; --soft:#16261F; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }
header.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-family:"New York", ui-serif, Georgia, serif; font-size:22px; font-weight:600; }
.brand img { width:38px; height:38px; border-radius:10px; }
nav a { margin-left:18px; text-decoration:none; color:var(--muted); font-size:15px; }
nav a:hover { color:var(--ink); }
h1, h2 { font-family:"New York", ui-serif, Georgia, serif; line-height:1.15; letter-spacing:-0.01em; }
h1 { font-size:clamp(34px, 7vw, 52px); margin:28px 0 14px; }
h2 { font-size:24px; margin:40px 0 10px; }
p, li { color:var(--ink); }
.lede { font-size:20px; color:var(--muted); max-width:34em; }
.date { color:var(--muted); font-size:15px; }
.hero { background:linear-gradient(160deg, #14463A, #0E332A); color:#F4F7F5; border-radius:28px; padding:36px 30px; margin:18px 0 28px; }
.hero h1 { margin-top:0; color:#F4F7F5; }
.hero p { color:rgba(244,247,245,0.8); font-size:19px; max-width:30em; }
.pill { display:inline-block; margin-top:10px; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,0.14); color:#F4F7F5; font-size:15px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:20px; }
.card h3 { margin:0 0 6px; font-family:"New York", ui-serif, Georgia, serif; font-size:19px; }
.card p { margin:0; color:var(--muted); font-size:16px; }
.note { background:var(--soft); border-radius:18px; padding:16px 18px; color:var(--ink); }
.eyebrow { text-transform:uppercase; letter-spacing:0.08em; font-size:13px !important; font-weight:600; color:rgba(244,247,245,0.7) !important; margin:0 0 14px; }
.pill { text-decoration:none; margin-right:8px; }
.pill.ghost { background:transparent; border:1px solid rgba(255,255,255,0.28); font-weight:500; }
.story { background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:8px 28px 22px; margin:0 0 12px; }
.story p { font-size:18px; }
.sign { color:var(--muted); font-family:"New York", ui-serif, Georgia, serif; font-style:italic; }
footer { margin:56px 0 40px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:15px; display:flex; flex-wrap:wrap; gap:8px 18px; }
footer a { color:var(--muted); }