@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans:wght@400;500;700&display=swap');

:root { --bg:#f5f0e8; --ink:#18130e; --muted:#6d6052; --line:#ccc8bf; --rose:#a54478; --mid:#ede8df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Noto Sans',Arial,sans-serif; }
a { color:inherit; }
.site-nav { min-height:72px; padding:0 clamp(1.25rem,4vw,4rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-family:'Bebas Neue',Impact,sans-serif; font-size:1.3rem; letter-spacing:.08em; line-height:.9; }
.brand small { display:block; margin-top:.35rem; color:var(--muted); font-family:'Noto Sans',Arial,sans-serif; font-size:.47rem; font-weight:400; letter-spacing:.17em; }
.nav-link { color:var(--muted); text-decoration:none; font-size:.71rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nav-link:hover { color:var(--rose); }
.article-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.78fr); column-gap:clamp(3rem,7vw,8rem); align-items:end; max-width:1440px; margin:0 auto; padding:clamp(1.75rem,3.5vw,4.25rem) clamp(1.25rem,4vw,4rem) clamp(2.25rem,4vw,3.5rem); }
.article-hero > :not(.hero-image) { grid-column:1; }
.breadcrumb { display:inline-flex; gap:.6rem; align-items:center; color:var(--rose); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.breadcrumb span { color:var(--muted); }
.eyebrow { margin:2.5rem 0 1rem; color:var(--rose); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; letter-spacing:.015em; text-wrap:balance; }
h1 { max-width:14.5ch; margin:0; font-size:clamp(3.4rem,5.6vw,5.8rem); line-height:.9; }
.dek { max-width:58ch; margin:1.7rem 0 0; color:var(--muted); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.8; text-wrap:pretty; }
.byline { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:2rem; color:var(--muted); font-size:.74rem; line-height:1.5; }
.byline strong { color:var(--ink); }
.hero-image { grid-column:2; grid-row:1 / span 5; display:block; width:100%; height:min(580px,64vh); max-width:none; margin:0; object-fit:contain; background:var(--mid); }
.content-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px); gap:clamp(2.5rem,8vw,8rem); max-width:1120px; margin:0 auto; padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,4vw,4rem); }
.article-body { max-width:68ch; }
.article-body h2 { margin:3rem 0 1rem; font-size:clamp(2rem,4vw,3.2rem); line-height:.95; }
.article-body p,.article-body li { color:var(--muted); font-size:1rem; line-height:1.9; text-wrap:pretty; }
.article-body p:first-child { margin-top:0; color:var(--ink); font-size:1.12rem; }
.article-body ul { padding-left:1.25rem; }
.article-body li + li { margin-top:.8rem; }
.side-note { align-self:start; position:sticky; top:2rem; padding:1.5rem 0; border-top:3px solid var(--rose); border-bottom:1px solid var(--line); }
.side-note h2 { margin:0 0 .75rem; font-size:1.8rem; line-height:.95; }
.side-note p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.75; }
.faq { margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.faq h2 { margin:0 0 1.5rem; font-size:2.4rem; line-height:.95; }
.faq dt { color:var(--ink); font-weight:700; margin-top:1.5rem; }
.faq dd { margin:.5rem 0 0; color:var(--muted); font-size:.93rem; line-height:1.8; }
.article-footer { background:var(--mid); padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,4rem); text-align:center; }
.article-footer h2 { max-width:15ch; margin:0 auto 1rem; font-size:clamp(2.6rem,5vw,4rem); line-height:.9; }
.article-footer p { max-width:48ch; margin:0 auto 1.75rem; color:var(--muted); font-size:.9rem; line-height:1.8; }
.button { display:inline-block; padding:1rem 1.5rem; background:var(--rose); color:#fff; text-decoration:none; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.button:hover { background:#84345f; }
@media (max-width:720px) { .site-nav { min-height:64px; } .nav-link { font-size:.64rem; } .article-hero { display:block; } .content-wrap { grid-template-columns:1fr; } .side-note { position:static; order:-1; } .hero-image { width:100%; height:auto; max-width:none; margin-top:2rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }