:root { --ink:#182a3c; --muted:#637181; --paper:#fbfaf6; --warm:#f2eee5; --line:#d9dfe0; --mint:#d7f2df; --green:#176a52; --orange:#f5b66d; --blue:#ddebfa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
main { max-width:1240px; margin:auto; padding:0 42px; }
.topbar { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.04em; font-size:20px; display:flex; align-items:center; gap:9px; }
.brand span { width:13px; height:13px; border-radius:50%; background:var(--green); box-shadow:9px 0 0 var(--mint); }
.method-link { font-size:14px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.hero { padding:104px 0 76px; max-width:860px; }
.eyebrow { margin:0 0 17px; color:var(--green); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-family:"DM Mono",monospace; font-weight:500; }
h1,h2 { font-family:Fraunces,serif; letter-spacing:-.055em; margin:0; font-weight:600; }
h1 { font-size:clamp(50px,7vw,87px); line-height:.98; }
h1 em { color:var(--green); font-style:italic; }
.intro { max-width:610px; margin:31px 0 25px; color:#465568; font-size:18px; line-height:1.55; }
.updated { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-family:"DM Mono",monospace; }
.updated i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#42ad71; box-shadow:0 0 0 4px #def3e5; }.dot{color:#a2acb3}
.dashboard { margin-bottom:96px; }
.filter-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
.filter-group { display:flex; padding:4px; border-radius:999px; background:#e9e6df; gap:2px; }
button,select { font:inherit; } .filter { border:0; background:transparent; cursor:pointer; padding:9px 15px; border-radius:999px; color:#566473; font-size:14px; }
.filter.active { background:var(--ink); color:white; }.select-wrap { font-size:13px; color:var(--muted); }.select-wrap select { border:0; background:transparent; color:var(--ink); font-weight:600; cursor:pointer; padding:5px; }
.ranking-head,.rank-row { display:grid; grid-template-columns:2.2fr 1fr .95fr 1.1fr; align-items:center; column-gap:20px; }.ranking-head { padding:0 18px 11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-family:"DM Mono",monospace; }.rank-row { min-height:86px; border-top:1px solid var(--line); padding:14px 18px; transition:background .2s; }.rank-row:hover { background:#f3f6f4; }.rank-row:last-child { border-bottom:1px solid var(--line); }
.coverage { margin-top:28px; padding:20px 22px; background:#f0eee8; color:var(--muted); font-size:13px; line-height:1.5; }.coverage p { margin:0 0 15px; }.coverage strong { color:var(--ink); }.coverage-queue { display:flex; flex-wrap:wrap; gap:7px; }.coverage-country { border:1px solid #d2d3cf; background:var(--paper); padding:4px 8px; color:#687681; font:10px "DM Mono",monospace; }.evidence-card { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:13px 14px; margin:0 0 14px; border-left:3px solid var(--orange); background:#fffaf1; }.evidence-title { display:block; color:var(--ink); font-weight:700; }.evidence-detail { display:block; font:11px "DM Mono",monospace; color:#637181; }.evidence-community { margin-top:6px; color:#8b581d; }.evidence-links { display:flex; flex-wrap:wrap; gap:10px; }
.place { display:flex; align-items:center; gap:14px; }.rank { width:22px; color:#99a4ad; font:12px "DM Mono",monospace; }.flag { font-size:23px; }.country { font-weight:700; letter-spacing:-.02em; }.pathway { margin-top:2px; color:var(--muted); font-size:12px; }.time { font:500 20px "DM Mono",monospace; letter-spacing:-.07em; }.days { color:var(--muted); font:11px "DM Mono",monospace; margin-left:5px; letter-spacing:0; }.badge { display:inline-block; font:10px "DM Mono",monospace; padding:5px 7px; border-radius:3px; letter-spacing:.04em; }.average { color:#126346; background:var(--mint); }.percentile { color:#345f87; background:var(--blue); }.target { color:#875115; background:#fde5c6; }.minimum { color:#7b3636; background:#f6dddd; }.backlog { color:#3d4852; background:#e5e9ec; }.community { color:#6f3d83; background:#efdcf6; }.combined { color:#68480a; background:#f7e4a4; }.source { color:var(--ink); font-size:13px; text-decoration:none; border-bottom:1px solid #aab5bc; width:max-content; }.source:hover { color:var(--green); }.source-date { display:block; margin-top:3px; color:var(--muted); font:10px "DM Mono",monospace; }.source-entry + .source-entry { margin-top:6px; }
.note-band { background:var(--ink); margin:0 calc(50% - 50vw); padding:80px max(42px, calc((100vw - 1156px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:80px; color:white; }.marker { color:var(--orange); font:12px "DM Mono",monospace; }.note-band h2,.methodology h2 { font-size:clamp(30px,3.8vw,49px); line-height:1.05; margin-top:15px; }.note-band p { color:#cfdae0; font-size:17px; line-height:1.65; max-width:520px; margin:32px 0 0; }
.methodology { padding:115px 0 105px; display:grid; grid-template-columns:1fr 1fr; gap:80px; }.method-copy { color:#526173; font-size:16px; line-height:1.65; }.method-copy p:first-child { margin-top:0; }.legend { border-top:1px solid var(--line); margin-top:27px; padding-top:20px; display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted); }.legend span { display:flex; align-items:center; gap:6px; }
.data-note { margin-top:23px; padding:15px 17px; border-left:3px solid var(--green); background:#edf6ef; color:#405c4f; font-size:13px; line-height:1.55; }.data-note strong { display:block; color:var(--green); margin-bottom:3px; }
footer { border-top:1px solid var(--line); max-width:1240px; margin:auto; padding:23px 42px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; font-family:"DM Mono",monospace; }
@media (max-width:720px) {
  main { padding:0 20px; }
  .topbar { height:68px; }
  .brand { font-size:18px; }
  .method-link { font-size:12px; }
  .hero { padding:64px 0 48px; }
  h1 { font-size:clamp(43px,14vw,59px); }
  .intro { margin:24px 0 21px; font-size:16px; }
  .updated { flex-wrap:wrap; row-gap:5px; line-height:1.45; }
  .filter-row { align-items:stretch; gap:12px; flex-direction:column; }
  .filter-group { align-self:flex-start; max-width:100%; overflow-x:auto; }
  .filter { flex:0 0 auto; padding:9px 14px; }
  .select-wrap { align-self:flex-start; padding:3px 0; }
  .ranking-head { display:none; }
  .rank-row {
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"place time" "metric metric" "official official";
    column-gap:12px;
    row-gap:10px;
    min-height:0;
    padding:18px 0;
  }
  .rank-row .place { grid-area:place; min-width:0; gap:10px; align-items:flex-start; }
  .rank-row .time { grid-area:time; justify-self:end; align-self:start; text-align:right; white-space:nowrap; font-size:18px; }
  .rank-row .metric { grid-area:metric; }
  .rank-row .official { grid-area:official; justify-self:stretch; min-width:0; }
  .rank-row .source-entry { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 9px; }
  .rank-row .source-entry + .source-entry { margin-top:7px; }
  .source { width:fit-content; max-width:100%; overflow-wrap:anywhere; }
  .source-date { display:inline; margin:0; }
  .rank { flex:0 0 20px; padding-top:3px; }
  .flag { font-size:21px; }
  .country { font-size:15px; }
  .pathway { line-height:1.4; }
  .days { display:block; margin:4px 0 0; }
  .coverage { padding:16px; margin-top:22px; }
  .coverage-country { padding:5px 7px; }
  .evidence-card { align-items:flex-start; flex-direction:column; gap:9px; }
  .evidence-links { gap:8px; }
  .note-band,.methodology { grid-template-columns:1fr; gap:30px; }
  .note-band { padding:58px 20px; }
  .note-band p { margin-top:0; font-size:16px; }
  .methodology { padding:72px 0; }
  .method-copy { font-size:15px; }
  .legend { gap:10px; }
  footer { padding:20px; flex-direction:column; gap:8px; }
}

@media (max-width:390px) {
  main { padding:0 16px; }
  .method-link { font-size:11px; }
  .hero { padding-top:50px; }
  .rank-row { padding:16px 0; }
  .time { font-size:16px !important; }
  .badge { font-size:9px; }
  .note-band { padding:48px 16px; }
  footer { padding:18px 16px; }
}