:root { color-scheme: dark; --ink:#f8f4ef; --muted:#b8afb0; --line:rgba(248,244,239,.14); --accent:#d34a52; --paper:#12090d; --panel:rgba(47,17,25,.74); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(900px 560px at 78% -7%, rgba(142,29,51,.38), transparent 68%), radial-gradient(600px 500px at 8% 18%, rgba(82,22,40,.35), transparent 70%), var(--paper); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; line-height:1.65; }
a { color:#ff8284; text-decoration-thickness:1px; text-underline-offset:3px; }
.shell { width:min(100% - 36px, 820px); margin:0 auto; padding:42px 0 72px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#e2b9bd; font-size:.74rem; font-weight:720; letter-spacing:.15em; text-transform:uppercase; }
.mark { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 20px rgba(211,74,82,.8); }
header { padding:33px 0 30px; border-bottom:1px solid var(--line); }
h1 { max-width:680px; margin:0; font-size:clamp(2.15rem, 7vw, 4.3rem); line-height:.98; letter-spacing:-.065em; }
.lede { max-width:630px; margin:21px 0 0; color:#d5ccca; font-size:1.06rem; }
.meta { display:flex; flex-wrap:wrap; gap:11px; margin-top:23px; color:var(--muted); font-size:.88rem; }
.meta span { padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); }
main { padding-top:25px; }
section { padding:27px 0; border-bottom:1px solid var(--line); }
h2 { margin:0 0 10px; color:#fffafa; font-size:1.18rem; letter-spacing:-.025em; }
h3 { margin:20px 0 6px; font-size:1rem; }
p { margin:0 0 13px; color:#d4cdca; }
p:last-child { margin-bottom:0; }
ul { margin:10px 0 0; padding-left:21px; color:#d4cdca; }
li + li { margin-top:6px; }
.callout { padding:17px 19px; border:1px solid rgba(211,74,82,.33); border-radius:16px; background:linear-gradient(135deg, rgba(117,22,43,.32), rgba(34,12,20,.25)); color:#ede0e0; }
.nav { display:flex; flex-wrap:wrap; gap:9px; margin-top:29px; }
.nav a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#e6dfe0; text-decoration:none; font-size:.82rem; }
.nav a:hover { border-color:rgba(255,130,132,.7); color:#fff; }
footer { padding-top:23px; color:#97898c; font-size:.82rem; }
.cards { display:grid; gap:12px; margin-top:29px; }
.card { display:block; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--panel); color:inherit; text-decoration:none; transition:transform .2s ease, border-color .2s ease; }
.card:hover { transform:translateY(-2px); border-color:rgba(255,130,132,.6); }
.card strong { display:block; font-size:1.1rem; }.card span { display:block; margin-top:5px; color:var(--muted); font-size:.9rem; }
@media (max-width:520px) { .shell { width:min(100% - 28px, 820px); padding-top:28px; } header { padding-top:26px; } section { padding:23px 0; } }