:root{
--bg:#0b1016;
--panel:#111923;
--panel-raised:#17222d;
--line:#293744;
--text:#e7edf2;
--muted:#93a3af;
--blue:#76b7d8;
--blue-strong:#9bd0e8;
--green:#78c6a3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",Inter,system-ui,sans-serif;line-height:1.65}
.container{max-width:1120px;margin:auto;padding:0 32px}
nav{background:rgba(11,16,22,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center;height:68px}
.brand{font-weight:700;letter-spacing:.01em}
.links a{text-decoration:none;color:var(--muted);margin-left:24px;font-size:.88rem}
.links a:hover{color:var(--blue-strong)}
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(390px,.8fr);gap:72px;padding:92px 0 76px;border-bottom:1px solid var(--line)}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;font-weight:500}
h1{font-size:clamp(3rem,6vw,5.2rem);line-height:1.02;letter-spacing:-.03em;margin:.2em 0 .25em}
.subtitle{font-size:1.14rem;color:var(--muted);max-width:670px;margin:22px 0 32px}
.btn{display:inline-block;padding:11px 17px;background:var(--blue);color:#0b1016;text-decoration:none;border:1px solid var(--blue);border-radius:4px;font-size:.92rem;font-weight:700;margin-right:10px}
.btn:hover{background:var(--blue-strong)}
.btn.secondary{background:transparent;color:var(--blue-strong);border-color:var(--line)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:28px}
.summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px}
.metric{min-width:0;padding:15px 0;border-bottom:1px solid var(--line)}
.metric span{display:block;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.metric strong{display:block;font-size:1.5rem;margin-top:3px;font-weight:600;white-space:nowrap}
section{margin:28px 0}
.section-title{font-family:"Source Serif 4",Georgia,serif;font-size:1.7rem;margin-bottom:18px}
.timeline .event{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.timeline .event:last-child{border:none;padding-bottom:0}
.timeline b{color:var(--text);font-weight:600}
.date{color:var(--blue);font-weight:600;font-size:.9rem}
.region{margin-top:26px;color:var(--blue-strong);font-size:.92rem;letter-spacing:.02em}
.progress{margin:16px 0 22px 24px}
.progress .top{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.92rem}
.progress .top span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.track{height:6px;background:#263541;border-radius:2px;overflow:hidden}
.fill{height:100%;background:var(--green)}
details{background:var(--panel-raised);border:1px solid var(--line);border-radius:4px;padding:15px 17px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin-bottom:0}
footer{margin-top:64px;padding:34px 0;text-align:left;color:var(--muted);border-top:1px solid var(--line);font-size:.86rem}
footer a{color:var(--blue-strong)}
#about a{color:#8ec7ff}
#about a:hover{color:#bfe1ff}
/* Use same link colors in Participate section */
#participate a{color:#8ec7ff}
#participate a:hover{color:#bfe1ff}

/* Tidy Participate steps */
#participate .steps{list-style:decimal; margin:0; padding-left:20px}
#participate .steps li{margin:12px 0; line-height:1.6}
#participate .steps li strong{display:inline-block;min-width:120px;color:var(--text);font-weight:700}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding:64px 0}.links{display:none}}
@media(max-width:600px){.container{padding:0 20px}h1{font-size:3.1rem}.timeline .event{grid-template-columns:1fr;gap:2px}.card{padding:22px}.summary{grid-template-columns:1fr}.metric strong{white-space:normal}}