/* Wobbly Blue Marble — subpage styles.
   The globe is a deep blue world; the reading pages keep that world as the
   shell and put the text on a pale card, because children read long text far
   more comfortably on a light ground. */

:root{
  --abyss:#03153a; --deep:#062f7a; --sea:#1257c8; --sky:#4aa8ff;
  --foam:#d3e9ff; --ink:#04122e; --sun:#ffd25e;
  --paper:#f4f9ff; --paper-2:#e6f1ff; --rule:#c9dcf3;
  --text:#0e2547; --muted:#4d6790;
  --panel:rgba(6,34,90,.55); --edge:rgba(147,205,255,.28);
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--foam);line-height:1.6;
  background:radial-gradient(120% 80% at 50% 0%, #2a80ea 0%, #1257c8 30%, #082f7e 58%, #03153a 100%) fixed,var(--abyss);
  min-height:100%;
}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:#0a2350;padding:10px 16px;border-radius:0 0 10px 0;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:4px}

/* ---------- header ---------- */
.site{
  max-width:var(--wrap);margin:0 auto;padding:18px clamp(16px,3vw,28px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand-badge{
  width:38px;height:38px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 32% 28%,#6fc6ff,#1560d6 62%,#0b3a92);
  border:3px solid var(--ink);box-shadow:0 4px 0 rgba(4,18,46,.4);
}
.brand-badge::after{content:"";position:absolute;inset:6px 5px auto 7px;height:10px;border-radius:0 0 12px 12px;
  background:#63d18a;border-bottom:3px solid var(--ink);transform:rotate(-12deg)}
.brand b{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1;color:#fff}
.brand i{display:block;font-style:normal;font-size:11.5px;color:#a9d3ff;margin-top:2px}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;font-weight:700;font-size:13.5px;color:#cfe6ff;
  padding:7px 12px;border-radius:999px;transition:background .15s ease,color .15s ease;
}
.site-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.site-nav a[aria-current]{background:var(--sun);color:#0a2350}
.lang-switch{
  text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--edge);border-radius:999px;padding:7px 13px;color:#cfe6ff
}
.lang-switch:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- breadcrumbs ---------- */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,28px) 10px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:12.5px;color:#9dc6f5}
.crumbs li+li::before{content:"›";margin-right:6px;color:#5f92d4}
.crumbs a{color:#bcdcff}

/* ---------- main card ---------- */
main{max-width:var(--wrap);margin:0 auto 40px;padding:0 clamp(16px,3vw,28px)}
.entity,.hub{
  background:var(--paper);color:var(--text);border-radius:22px;
  padding:clamp(20px,3.4vw,40px);box-shadow:0 24px 60px rgba(2,12,36,.35);
}
.entity.narrow{max-width:760px;margin:0 auto}
.entity-head{border-bottom:2px solid var(--rule);padding-bottom:16px;margin-bottom:22px}
.kicker{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,46px);line-height:1.02;margin:8px 0 0;color:#0a1f42;text-wrap:balance}
h1 .flag{font-size:.8em;margin-right:6px}
.official{margin:6px 0 0;color:var(--muted);font-size:14px}

.entity-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,3vw,40px);align-items:start}
.prose{max-width:66ch}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,26px);margin:30px 0 8px;color:#0a1f42;text-wrap:balance}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:20px}
.prose li{margin-bottom:6px}
.answer{
  font-size:clamp(17px,2vw,19.5px);line-height:1.5;font-weight:600;color:#123363;
  background:var(--paper-2);border-left:5px solid var(--sea);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:0 0 8px;
}
.coords{font-family:var(--mono);font-size:13px;color:var(--muted)}
.note{background:#fff5da;border-left:5px solid var(--sun);padding:11px 15px;border-radius:0 10px 10px 0;font-size:14.5px}

/* ---------- sidebar ---------- */
.sidebar{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.map-fig,.chart-fig{margin:0;background:#fff;border:1.5px solid var(--rule);border-radius:16px;padding:12px}
.map-fig figcaption,.chart-fig figcaption{font-size:11.5px;color:var(--muted);margin-top:6px;text-align:center}
.minimap{width:100%;height:auto;display:block}
.mm-shape{fill:#bfe3c9;stroke:#0a1f42;stroke-width:1.6;stroke-linejoin:round}
.mm-mark circle{fill:var(--sun);stroke:#0a1f42;stroke-width:1.6}
.mm-mark text{font-family:var(--mono);font-size:10px;fill:#0a1f42}
.compare{width:100%;height:auto;display:block}
.compare .cb rect{fill:#b9d3f2}
.compare .cb-hi rect{fill:var(--sea)}
.compare text{font-family:var(--mono);font-size:10.5px;fill:#0a1f42;dominant-baseline:middle}

.facts{background:#fff;border:1.5px solid var(--rule);border-radius:16px;padding:14px 16px}
.facts h2{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.facts dl{margin:0;display:grid;gap:8px}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px dotted var(--rule);padding-bottom:7px}
.fact:last-child{border-bottom:0;padding-bottom:0}
.fact dt{color:var(--muted);font-size:13px}
.fact dd{margin:0;font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:#0a1f42}
.btn{
  display:block;text-align:center;text-decoration:none;font-family:var(--display);font-weight:700;font-size:15px;
  background:var(--sea);color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 0 #0b3a92;
}
.btn:hover{background:#1a68e0}
.globe-link{margin:0}

/* ---------- faq ---------- */
.faq{margin-top:34px;border-top:2px solid var(--rule);padding-top:20px}
.faq h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,26px);margin:0 0 12px;color:#0a1f42}
.faq details{border:1.5px solid var(--rule);border-radius:12px;margin-bottom:8px;background:#fff}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:15.5px;color:#123363;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--display);font-size:20px;line-height:1;color:var(--sea)}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details>div{padding:0 16px 14px}
.faq p{margin:0;font-size:15px}

/* ---------- related ---------- */
.related{margin-top:30px;border-top:2px solid var(--rule);padding-top:18px}
.related h2{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 10px;color:#0a1f42}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.chips a{
  display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
  background:#fff;border:1.5px solid var(--rule);border-radius:999px;padding:7px 14px;
  font-size:14px;font-weight:600;color:#123363;transition:border-color .13s ease,background .13s ease;
}
.chips a:hover{border-color:var(--sea);background:var(--paper-2)}
.chips i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- hubs ---------- */
.hub-group{margin-top:26px}
.hub-group h2{font-family:var(--display);font-weight:800;font-size:24px;margin:0 0 10px;color:#0a1f42;display:flex;align-items:baseline;gap:10px}
.hub-group .count{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400}
.cards{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards a{
  display:block;text-decoration:none;background:#fff;border:1.5px solid var(--rule);border-radius:14px;
  padding:14px 16px;height:100%;transition:border-color .13s ease,transform .13s ease;
}
.cards a:hover{border-color:var(--sea);transform:translateY(-2px)}
.cards b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:#0a1f42}
.cards i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--sea)}
.cards span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ---------- sources + footer ---------- */
.sources{margin-top:30px;border-top:2px solid var(--rule);padding-top:16px}
.sources h2{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.small{font-size:12.5px;color:var(--muted);margin:0 0 6px;line-height:1.5}
.site-foot{max-width:var(--wrap);margin:0 auto;padding:26px clamp(16px,3vw,28px) 46px;text-align:center;color:#a9d3ff}
.site-foot p{margin:0 0 12px;font-size:14px}
.site-foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.site-foot .small{color:#7fb3ee}

@media (max-width:900px){
  .entity-body{grid-template-columns:1fr}
  .sidebar{position:static;order:-1}
  .prose{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cards a{transition:none}
}

/* ============================================================
   Record lists, continents, why-pages, glossary, quiz
   ============================================================ */
.prose.wide{max-width:74ch}

.table-wrap{overflow-x:auto;margin:18px 0 6px;border:1.5px solid var(--rule);border-radius:14px;background:#fff}
table.rank{width:100%;border-collapse:collapse;font-size:15px}
table.rank th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:2px solid var(--rule);white-space:nowrap;
}
table.rank td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:baseline}
table.rank tr:last-child td{border-bottom:0}
table.rank tr:nth-child(even) td{background:#fafcff}
table.rank td.r{font-family:var(--mono);color:var(--muted);width:2.6em;font-variant-numeric:tabular-nums}
table.rank td.n,table.rank th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.rank a{color:#123363;font-weight:700;text-decoration:none}
table.rank a:hover{text-decoration:underline}
table.rank i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}

.try{background:#eefaf1;border-left:5px solid #3f9c62;border-radius:0 12px 12px 0;padding:14px 18px;margin-top:26px}
.try h2{margin-top:0}

.glossary{display:grid;gap:14px;margin-top:20px}
.term{background:#fff;border:1.5px solid var(--rule);border-radius:14px;padding:15px 18px;scroll-margin-top:20px}
.term h2{margin:0 0 6px;font-size:20px}
.term .def{font-weight:700;color:#123363;margin:0 0 8px}
.term .eg{margin:8px 0 0;font-size:14px;color:var(--muted)}
.term .eg b{color:#123363}

/* ---------- quiz ---------- */
.quiz{
  background:linear-gradient(#0d3f96,#0a2f78);color:#eaf5ff;border-radius:20px;
  padding:clamp(18px,3vw,30px);margin:22px 0 28px;box-shadow:0 12px 34px rgba(2,12,36,.28);
}
.quiz-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.dots{display:flex;gap:5px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.dot.done{background:var(--sun)}
.dot.now{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.quiz-bar b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--sun)}
.q-prompt{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.6vw,25px);margin:0 0 14px;text-wrap:balance}
.q-figure{display:flex;justify-content:center;align-items:center;min-height:0;margin-bottom:16px}
.q-figure:empty{display:none}
.big-flag{font-size:clamp(64px,13vw,110px);line-height:1.1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.q-figure .minimap{width:min(330px,80%);height:auto;background:rgba(255,255,255,.06);border-radius:14px;padding:8px}
.q-figure .mm-shape{fill:#bfe3c9;stroke:#04122e;stroke-width:2}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.options.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  font-family:var(--body);font-weight:700;font-size:15.5px;color:#0a2350;cursor:pointer;
  background:#eaf3ff;border:2px solid transparent;border-radius:13px;padding:14px 12px;min-height:56px;
  transition:transform .1s ease,background .12s ease;
}
.opt:hover:not(:disabled){background:#fff;transform:translateY(-2px)}
.opt:disabled{cursor:default;opacity:.75}
.opt.right{background:#7fe0a0;border-color:#2f9159;opacity:1}
.opt.wrong{background:#ffb0b0;border-color:#b23b3b;opacity:1}
.opt-wide{font-size:17px;min-height:72px;flex-direction:column;gap:4px}
.opt .of{font-size:26px}
.feedback{margin-top:16px}
.feedback:empty{display:none}
.feedback p{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:18px}
.feedback.ok p{color:#8ef0b2}
.feedback.no p{color:#ffc0c0}
.feedback .sub{font-family:var(--mono);font-size:12.5px;font-weight:400;color:#a9d3ff}
.feedback .more{display:inline-block;color:var(--sun);font-weight:700;font-size:14.5px;margin-bottom:12px}
.feedback .next{
  display:block;width:100%;cursor:pointer;font-family:var(--display);font-weight:700;font-size:16px;
  background:var(--sun);color:#0a2350;border:0;border-radius:13px;padding:13px;box-shadow:0 4px 0 #c99b28;
}
.feedback .next:hover{background:#ffdc84}
#qResult{text-align:center}
.q-final{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,58px);margin:6px 0 0;color:var(--sun)}
.q-band{font-family:var(--display);font-weight:600;font-size:18px;margin:2px 0 18px;color:#cfe6ff}
#qMissedWrap h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8dc2ff;margin:0 0 10px}
#qMissed{justify-content:center;margin-bottom:18px}
#qMissed a{background:rgba(255,255,255,.1);border-color:rgba(147,205,255,.3);color:#eaf5ff}
#qMissed a:hover{background:rgba(255,255,255,.2)}
#qAgain{max-width:280px;margin:0 auto}

@media (max-width:560px){
  .options{grid-template-columns:1fr}
  .opt{min-height:50px;font-size:15px}
}

/* ---------- table of contents and record links on entity pages ---------- */
.toc{
  background:#fff;border:1.5px solid var(--rule);border-radius:14px;padding:12px 16px;margin:18px 0 6px;
}
.toc b{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.toc a{font-size:14px;font-weight:600;color:#123363;text-decoration:none;border-bottom:2px solid #dbe8f8}
.toc a:hover{border-color:var(--sea)}
.ranklinks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ranklinks li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px dotted var(--rule);padding-bottom:6px}
.ranklinks a{color:#123363;font-weight:700;text-decoration:none}
.ranklinks a:hover{text-decoration:underline}
.ranklinks i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--sea);white-space:nowrap}
.kicker a{color:inherit}
section[id]{scroll-margin-top:16px}

/* ---------- photographs ---------------------------------------------------
   One picture large, the rest in a row beneath, the credit under both. The
   aspect-ratio boxes hold the space before the files arrive, so nothing on the
   page moves when they do. */
.gallery{margin:0 0 26px;padding:0}
.g-hero{
  border-radius:16px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--rule);box-shadow:0 8px 22px rgba(10,31,66,.09);
}
.g-hero img{display:block;width:100%;height:auto}
.g-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
/* A country page carries the country and its capital, so four or five pictures
   instead of three. Let the row find its own column count rather than forcing
   two very wide thumbnails. */
.g-row-many{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.g-thumb{margin:0;border-radius:13px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--rule);box-shadow:0 5px 14px rgba(10,31,66,.08)}
.g-thumb img{display:block;width:100%;height:170px;object-fit:cover}
/* the label under a thumbnail — "Oslo", so nobody has to guess which is which */
.g-thumb figcaption{margin:0;padding:6px 9px 8px;font-size:12.5px;font-weight:700;
  line-height:1.25;color:var(--text)}
.gallery > figcaption{margin-top:11px}
.credits{
  margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);
}
.credits a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.credits a:hover{color:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the row of animals on a country page */
.animal-strip{list-style:none;display:grid;gap:11px;padding:0;margin:14px 0 9px;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.animal-strip a{display:block;text-decoration:none;color:var(--text);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper-2);
  transition:transform .12s ease,box-shadow .12s ease}
.animal-strip a:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(10,31,66,.13)}
.animal-strip img{display:block;width:100%;height:88px;object-fit:cover}
.animal-strip span{display:block;padding:7px 9px 8px;font-size:12.5px;font-weight:700;line-height:1.25}
.credits.small{font-size:11.5px;margin-top:2px}

.credits-table i{display:block;font-style:normal;font-size:12px;color:var(--muted)}

@media (max-width:560px){
  .g-thumb img{height:128px}
  .animal-strip{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  .animal-strip img{height:74px}
}

/* ---------- phones ---------------------------------------------------------
   Two things were wrong on a 390 px screen. Nine navigation items wrapped over
   three rows and pushed every page's first sentence — and its photograph —
   completely below the fold: a reader arriving from a search result met a wall
   of menu. And the facts table was hoisted above the prose, which made sense
   when there were no photographs and stopped making sense the day there were.
   The navigation now scrolls sideways in one row, and the picture comes first. */
@media (max-width:760px){
  header.site{padding:12px 14px 10px;gap:8px;flex-wrap:wrap}
  .brand b{font-size:17px}
  .brand i{font-size:11px}
  .brand-badge{width:34px;height:34px;border-width:2px}
  .site-nav{
    order:3;width:100%;display:flex;flex-wrap:nowrap;gap:4px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
            mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;font-size:13px;padding:7px 11px}
  .lang-switch{order:2;margin-left:auto}
  .crumbs{padding-top:2px;font-size:12px}
}
@media (max-width:900px){
  /* The picture and the opening sentence come before the numbers. */
  .sidebar{order:1}
  .entity-body>.prose{order:0}
}

/* ---------- the consent question ------------------------------------------
   Both answers the same size and the same weight. A banner where "no" is a
   grey whisper next to a green button is a dark pattern, and a dark pattern in
   front of a nine-year-old is worse than one in front of an adult. */
.consent{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
  width:min(560px,calc(100vw - 24px));
  background:var(--paper);color:var(--text);
  border:1.5px solid var(--rule);border-radius:18px;
  padding:16px 18px 14px;box-shadow:0 18px 44px rgba(3,21,58,.42);
}
.consent p{margin:0 0 12px;font-size:14px;line-height:1.55}
.consent a{color:#0f52c4;font-weight:700}
.consent-btns{display:flex;gap:10px}
.consent-btns button{
  flex:1 1 0;font-family:var(--body);font-size:14.5px;font-weight:800;cursor:pointer;
  border:2px solid #123a7d;border-radius:12px;padding:11px 10px;min-height:46px;
  background:var(--paper-2);color:#123a7d;
}
.consent-btns button:hover{background:#dbe9ff}
.consent-btns button[data-a="yes"]{background:var(--sun);border-color:var(--sun);color:#0a2350}
.consent-btns button[data-a="yes"]:hover{background:#ffdd85}
@media (max-width:420px){ .consent-btns{flex-direction:column} }

/* A note that says the world does not agree. Quiet, not alarming — it belongs
   to the page the way a footnote belongs to a sentence. */
.note.contested{
  background:#fff8e6;border:1.5px solid #f0d9a0;border-left-width:5px;
  border-radius:12px;padding:12px 15px;margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#4a3a12;
}