
:root{
  --navy:#0F2A63; --blue:#2E74B5; --tint:#EAF0F8; --gold:#B78B2E;
  --ink:#1C2330; --grey:#6E7684; --rule:#D9E1EC; --paper:#FFFFFF;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;font-feature-settings:"kern" 1}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */
.masthead{border-top:4px solid var(--navy);padding:26px 0 0}
.mast-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  font-weight:600;margin:0 0 4px}
.wordmark{font-family:var(--display);font-size:clamp(27px,3.9vw,39px);line-height:1.05;
  color:var(--navy);margin:0;font-weight:700;letter-spacing:-.01em}
.wordmark a{color:inherit}
.tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:2px;
  padding:5px 9px;white-space:nowrap}
.standfirst{max-width:62ch;color:var(--ink);margin:18px 0 0;font-size:17.5px}
.standfirst .lede{color:var(--navy);font-weight:600}
.mast-rule{height:1px;background:var(--rule);margin:26px 0 0}

/* ---------- notice ---------- */
.notice{background:var(--tint);border-left:3px solid var(--navy);padding:16px 20px;
  margin:26px 0 0;font-size:15.5px;color:var(--ink);max-width:78ch}
.notice strong{color:var(--navy)}

/* ---------- filter ---------- */
.finder{margin:38px 0 0;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.finder label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:600}
#filter{font-family:var(--body);font-size:17px;color:var(--navy);padding:9px 12px;
  border:1px solid var(--rule);border-bottom:2px solid var(--navy);border-radius:2px;
  min-width:270px;background:#fff}
#filter::placeholder{color:#A8B0BC}
.count{font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums}

/* ---------- the index wall ---------- */
[hidden]{display:none!important}
.index{margin:22px 0 60px}
.az{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px;align-items:start}
.letter{break-inside:avoid}
.letter h2,.region h2{font-family:var(--display);font-size:14px;color:var(--gold);margin:0 0 7px;
  padding-bottom:5px;border-bottom:1px solid var(--rule);font-weight:700;letter-spacing:.06em}
.index ul{list-style:none;margin:0;padding:0}
.index li{margin:0 0 2px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.index a{color:var(--navy);font-size:16px;display:block;padding:1px 0}
.index a:hover{color:var(--blue)}
.index .n{display:none;font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums}

/* region view */
.regions{display:block}
.region{margin:0 0 34px}
.region h2{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--navy);color:var(--navy);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:8px;margin-bottom:12px}
.region h2 .rc{font-family:var(--body);font-size:12px;color:var(--gold);letter-spacing:.10em}
.region ul{columns:4;column-gap:34px}
.region li{display:block}

/* jump bar */
.jump{display:flex;flex-wrap:wrap;gap:2px 4px;margin:26px 0 4px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 0}
.jump a{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--navy);
  padding:3px 9px;border-radius:2px;letter-spacing:.04em}
.jump a:hover{background:var(--tint);color:var(--blue);text-decoration:none}
.jump[hidden]{display:none}

/* view toggle */
.toggle{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.toggle button{font-family:var(--body);font-size:14.5px;color:var(--navy);background:#fff;
  border:0;padding:9px 14px;cursor:pointer;letter-spacing:.01em}
.toggle button+button{border-left:1px solid var(--rule)}
.toggle button:hover{background:var(--tint)}
.toggle button.on{background:var(--navy);color:#fff}
.empty{display:none;color:var(--grey);margin:30px 0 60px}
.empty.on{display:block}

/* ---------- country page ---------- */
.country-head{padding:30px 0 0}
.country-head h1{font-family:var(--display);font-size:clamp(30px,4.6vw,45px);color:var(--navy);
  margin:0;line-height:1.04;font-weight:700;letter-spacing:-.015em}
.provenance{color:var(--grey);font-size:14.5px;margin:12px 0 0;max-width:70ch}
.layout{display:grid;grid-template-columns:212px 1fr;gap:56px;margin:36px 0 70px;
  align-items:start}
.rail{position:sticky;top:26px}
.rail h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  font-weight:700;margin:0 0 8px}
.rail h3+ul{margin-bottom:22px}
.rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.rail li a{display:block;font-size:15px;color:var(--navy);padding:3px 0 3px 13px;
  margin-left:-1px;border-left:2px solid transparent}
.rail li a:hover{border-left-color:var(--gold);text-decoration:none;color:var(--blue)}
.group{margin:0 0 46px}
.group>h2{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 22px;padding-bottom:8px;border-bottom:2px solid var(--navy);
  font-weight:700}
.entry{margin:0 0 32px;scroll-margin-top:24px}
.entry h3{font-size:15.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--blue);
  margin:0 0 8px;font-weight:700}
.entry p{margin:0 0 12px;max-width:70ch}
.entry p:last-child{margin-bottom:0}
.entry .sub{color:var(--navy);font-weight:600}

/* ---------- about ---------- */
.about{border-top:2px solid var(--navy);padding:30px 0 4px;margin:10px 0 0}
.about h2{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 20px;font-weight:700}
.about .cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.about p{margin:0 0 14px;max-width:62ch;font-size:16.5px}
.about p:last-child{margin-bottom:0}
.caveat{border-left:3px solid var(--gold);padding:2px 0 2px 20px;margin:0}
.caveat p{font-family:var(--display);font-size:19px;line-height:1.5;color:var(--navy);
  margin:0 0 10px;max-width:44ch}
.caveat .attrib{font-family:var(--body);font-size:13.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--grey);font-weight:600;margin:14px 0 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:24px 0 46px;font-size:14.5px;color:var(--grey)}
.foot .line{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.foot .sep{color:var(--rule)}
.foot .cc{margin:12px 0 0;max-width:74ch}

@media (max-width:1000px){ .az{grid-template-columns:repeat(3,1fr)} .region ul{columns:2} .about .cols{grid-template-columns:1fr;gap:30px} .layout{grid-template-columns:1fr;gap:26px}
  .rail{position:static;border-bottom:1px solid var(--rule);padding-bottom:18px}
  .rail ul{border-left:0;display:flex;flex-wrap:wrap;gap:4px 14px}
  .rail li a{padding-left:0;border-left:0}
  .rail li a:hover{border-left:0}
  .rail h3+ul{margin-bottom:14px} }
@media (max-width:640px){ .az{grid-template-columns:repeat(2,1fr);gap:20px 18px} .region ul{columns:1} .finder{gap:16px} .wrap{padding:0 20px}
  body{font-size:16.5px} #filter{min-width:0;width:100%} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- additions: topic filter, counts, prose ---------- */
.finder{align-items:flex-end;gap:26px}
.finder .f{display:flex;flex-direction:column;gap:6px}
#topic{font-family:var(--body);font-size:16px;color:var(--navy);padding:9px 10px;
  border:1px solid var(--rule);border-bottom:2px solid var(--navy);border-radius:2px;background:#fff}
.prose{max-width:66ch;margin:30px 0 60px}
.prose h3{font-family:var(--display);font-size:15px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--navy);margin:34px 0 10px;font-weight:700}
.prose p{margin:0 0 14px}
.entry ul{margin:0 0 12px;padding-left:20px;max-width:70ch}
.entry li{margin:0 0 6px}
.entry strong{color:var(--navy)}

/* ---------- specimen band ---------- */
.specimen{margin:34px 0 0;padding:30px 0 26px;border-top:2px solid var(--navy);
  border-bottom:1px solid var(--rule)}
.spec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 22px}
.spec-head .eyebrow{margin:0}
.spec-head h2{font-family:var(--display);font-size:clamp(19px,2.6vw,26px);color:var(--navy);
  margin:0;font-weight:700;line-height:1.1;letter-spacing:-.01em;flex:1 1 auto}
.spec-next{font-family:var(--body);font-size:13px;letter-spacing:.10em;text-transform:uppercase;
  font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--rule);
  border-radius:2px;padding:7px 12px;cursor:pointer}
.spec-next:hover{background:var(--tint);border-color:var(--navy)}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px}
.spec-col{border-top:2px solid var(--gold);padding:12px 0 0}
.spec-col h3{font-family:var(--display);font-size:17px;color:var(--navy);margin:0 0 7px;
  font-weight:700}
.spec-col h3 a{color:inherit}
.spec-col h3 a:hover{color:var(--blue)}
.spec-col p{margin:0;font-size:15px;line-height:1.58;color:var(--ink)}
.spec-foot{margin:20px 0 0;font-size:14.5px}

/* ---------- lightened archive note ---------- */
.notice-line{margin:22px 0 0;font-size:15px;color:var(--grey);max-width:80ch;
  padding-left:14px;border-left:2px solid var(--gold)}
.notice-line strong{color:var(--navy)}

@media (max-width:1000px){ .spec-grid{grid-template-columns:repeat(2,1fr);gap:22px 26px} }
@media (max-width:640px){ .spec-grid{grid-template-columns:1fr;gap:20px} }

/* ---------- go straight to a country ---------- */
.goto{margin:22px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.goto label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  font-weight:600}
#goto{font-family:var(--body);font-size:17px;color:var(--navy);padding:11px 14px;
  border:1px solid var(--navy);border-radius:2px;background:#fff;min-width:290px;cursor:pointer}
#goto:hover{background:var(--tint)}
@media (max-width:640px){ #goto{min-width:0;width:100%} }

/* ---------- region map ---------- */
.mapblock{margin:26px 0 0;padding:22px 0 8px;border-top:1px solid var(--rule)}
.map-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 10px}
#map-label{margin:0;color:var(--navy);font-weight:700}
.map-hint{margin:0;font-size:13px;color:var(--grey)}
.worldmap{width:100%;height:auto;display:block}
.m-none{pointer-events:none}
.m-none path{fill:#EDF1F6;stroke:#fff;stroke-width:.55}
.m-reg{cursor:pointer;outline:none}
.m-reg path{fill:#22508F;stroke:#fff;stroke-width:.55;transition:fill .18s ease}
.m-reg:hover path,.m-reg.hot path,.m-reg:focus-visible path{fill:var(--gold)}
.region.flash h2{background:var(--tint)}
@media (prefers-reduced-motion:reduce){.m-reg path{transition:none}}
@media (max-width:640px){ .mapblock{padding-top:16px} .map-hint{display:none} }

/* ---------- one quiet line to the course ---------- */
.deeper{margin:40px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  font-size:15px;color:var(--grey);max-width:70ch}
.deeper a{color:var(--blue)}

/* ---------- about: topic reference ---------- */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:6px 0 40px}
.topics h4{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 12px;padding-bottom:7px;border-bottom:2px solid var(--navy);
  font-weight:700}
.topics dl{margin:0}
.topics dt{font-weight:600;color:var(--navy);font-size:15.5px;margin:0 0 2px}
.topics dd{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--grey)}
@media (max-width:900px){.topics{grid-template-columns:1fr;gap:26px}}

/* ---------- topic chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 24px}
.chip{font-family:var(--body);font-size:14px;color:var(--navy);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:6px 11px;cursor:pointer;
  letter-spacing:.005em;transition:background .15s ease,border-color .15s ease}
.chip:hover{background:var(--tint);border-color:var(--mid,#8FA8C8)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.clr{font-family:var(--body);font-size:13px;color:var(--grey);background:transparent;
  border:0;border-bottom:1px solid var(--rule);cursor:pointer;padding:2px 0;margin-right:4px}
.clr:hover{color:var(--navy);border-bottom-color:var(--navy)}
.clr[hidden]{display:none}
.spec-head{margin-bottom:14px}
@media (prefers-reduced-motion:reduce){.chip{transition:none}}

/* ---------- empty-state + moved archive note ---------- */
.spec-hint{margin:2px 0 0;font-size:15.5px;color:var(--grey);max-width:60ch}
.spec-hint[hidden]{display:none}
.spec-foot[hidden]{display:none}
.spec-head h2{font-family:var(--display);font-size:clamp(21px,2.9vw,29px);color:var(--navy);
  margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
.archive-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:15px;color:var(--grey)}
.specimen{padding-bottom:30px}

/* ---------- jump bar: even grid rather than one long line ---------- */
.jump{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;justify-items:center}
.jump a{width:100%;text-align:center;padding:5px 0}
@media (max-width:820px){ .jump{grid-template-columns:repeat(7,1fr)} }
@media (max-width:480px){ .jump{grid-template-columns:repeat(6,1fr)} }
.finder{align-items:flex-end}

/* ---------- about block: single column ---------- */
.about .cols{grid-template-columns:1fr}
.about .cols>div{max-width:74ch}
.caveat-line{font-family:var(--display);font-size:19px;line-height:1.45;color:var(--navy);
  font-weight:600;border-left:3px solid var(--gold);padding-left:18px;margin:22px 0 0;
  max-width:52ch}
