@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=DM+Sans:wght@400;500;700&display=swap');
:root { --bg:#191929; --surface:#21212a; --line:#2e2e38; --text:#f5f1ea; --muted:#a7a3b5; --accent:#e63946; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'DM Sans', system-ui, sans-serif; font-size:17px; line-height:1.6; }
.wrap { max-width: 760px; margin: 0 auto; padding: 48px max(20px, env(safe-area-inset-left)) 80px; }
a { color: var(--text); text-underline-offset: 3px; }
.kicker { font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
h1, h2 { font-family:'Fraunces', Georgia, serif; font-weight:600; line-height:1.1; text-wrap:balance; margin:0; }
h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
h2 { font-size: 1.5rem; margin-top: 40px; }
p, li { color: var(--muted); max-width: 62ch; }
p strong { color: var(--text); }
.lede { font-size: 1.2rem; color: var(--text); margin-top: 18px; }
.top { display:flex; align-items:center; gap:14px; margin-bottom:40px; text-decoration:none; }
.top img { width:44px; height:44px; border-radius:10px; }
.top span { font-family:'Fraunces', serif; font-weight:600; font-size:1.2rem; }
.grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 32px; }
.card { background:var(--surface); border-radius:14px; padding:18px 20px; }
.card b { display:block; font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; color:var(--text); margin-bottom:4px; }
.card p { margin:0; font-size:15px; }
.badge { display:inline-block; margin-top:28px; padding:12px 20px; border-radius:999px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; }
footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 20px; }
footer a { color: var(--muted); }