:root { color-scheme: light; --ink:#17211d; --muted:#5d6963; --paper:#f5f4ed; --card:#fffef9; --sage:#2d6651; --sage-dark:#1d4a3a; --mist:#dce9e1; --line:#d8ddd8; --warm:#bf6b48; --shadow:0 18px 60px rgba(31,56,45,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.7; }
a { color:var(--sage-dark); text-underline-offset:.18em; } a:hover { color:var(--warm); }
a:focus-visible,button:focus-visible { outline:3px solid var(--warm); outline-offset:4px; }
.skip { position:absolute; left:-9999px; top:1rem; } .skip:focus { left:1rem; z-index:10; background:white; padding:.65rem 1rem; border-radius:.5rem; }
.shell { width:min(1120px,calc(100% - 2rem)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(245,244,237,.94); }
.nav { min-height:72px; display:flex; align-items:center; gap:1.25rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; font-weight:750; }
.brand img { width:36px; height:36px; border-radius:9px; }
.nav-links { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.85rem 1.2rem; }
.nav-links a { font-size:.93rem; text-decoration:none; } .lang { padding:.28rem .65rem; border:1px solid var(--line); border-radius:99px; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; padding:6.5rem 0 5rem; }
.eyebrow { color:var(--sage); font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:.55rem 0 1rem; max-width:760px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,7vw,5.6rem); line-height:.98; letter-spacing:-.035em; }
.lede { max-width:680px; color:var(--muted); font-size:clamp(1.05rem,2vw,1.28rem); }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button { display:inline-block; padding:.78rem 1.12rem; border-radius:.7rem; background:var(--sage); color:white; text-decoration:none; font-weight:700; }
.button:hover { background:var(--sage-dark); color:white; } .button.secondary { color:var(--sage-dark); background:transparent; border:1px solid var(--sage); }
.hero-card { padding:2rem; border-radius:2rem 2rem .65rem 2rem; background:var(--sage-dark); color:white; box-shadow:var(--shadow); }
.hero-card .big { margin:.3rem 0 1rem; font:700 2rem/1.1 Georgia,serif; } .hero-card p { color:#dce9e1; }
.privacy-list { list-style:none; padding:0; margin:1.4rem 0 0; } .privacy-list li { padding:.55rem 0; border-top:1px solid rgba(255,255,255,.18); }
.section { padding:4.5rem 0; } .section.alt { background:var(--mist); }
.section h2,.article h1 { font-family:Georgia,"Times New Roman",serif; letter-spacing:-.02em; }
.section h2 { margin:0 0 .75rem; font-size:clamp(2rem,4vw,3.2rem); } .intro { color:var(--muted); max-width:700px; margin-bottom:2rem; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.card { min-height:190px; padding:1.4rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; }
.card .number { color:var(--warm); font-weight:800; } .card h3 { margin:.5rem 0; } .card p { margin:0; color:var(--muted); }
.callout { margin:2rem 0; padding:1.2rem 1.35rem; border-left:4px solid var(--warm); background:#fff8f2; }
.status { display:inline-flex; gap:.45rem; align-items:center; padding:.3rem .7rem; border-radius:999px; background:#fff0e8; color:#873e25; font-size:.9rem; font-weight:700; }
.article { width:min(790px,calc(100% - 2rem)); margin:0 auto; padding:4rem 0 6rem; } .article h1 { font-size:clamp(2.4rem,6vw,4.5rem); line-height:1; }
.article h2 { margin-top:2.5rem; font-size:1.55rem; } .article h3 { margin-top:1.7rem; } .article li { margin-bottom:.55rem; } .meta { color:var(--muted); } .source-list li { margin-bottom:1.2rem; }
.site-footer { padding:2.8rem 0; border-top:1px solid var(--line); } .footer-row { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.footer-links { display:flex; flex-wrap:wrap; gap:.7rem 1rem; } .fine { margin-top:1.2rem; color:var(--muted); font-size:.88rem; }
@media (max-width:780px) { .nav{align-items:flex-start;padding:1rem 0}.nav-links a:not(.lang){display:none}.hero{grid-template-columns:1fr;padding:4rem 0}.grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px) { .grid{grid-template-columns:1fr}.hero-card{border-radius:1.25rem 1.25rem .5rem 1.25rem} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }