/* Farabout web atlas: the small stylesheet for the static country pages (#198).
   Same colours and fonts as the app (Sky palette, Fraunces and Figtree, self-hosted). No red, no green, no Sun here:
   those are the app's answer colours. Light and dark follow the phone. */
@font-face{font-family:"Fraunces"; src:url(/fonts/fraunces.woff2) format("woff2"); font-weight:400 700; font-style:normal; font-display:swap;}
@font-face{font-family:"Figtree"; src:url(/fonts/figtree.woff2) format("woff2"); font-weight:400 800; font-style:normal; font-display:swap;}
:root{
  --ground:#EDF4FA; --card:#FFFFFF; --ink:#0F2B46; --muted:#4A5E73; --rule:#D3E1EE; --raise:#E3EDF6;
  --stamp:#2756B0; --on-stamp:#FFFFFF; --focus:#2F6FD8; --ocean:#A6D8EE; --land:#FFFFFF; --border:#86A3BC;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0F1B27; --card:#172636; --ink:#EAF1F8; --muted:#A9B4C0; --rule:#2A3A4C; --raise:#22354A;
    --stamp:#8DB4F0; --on-stamp:#0F1B27; --focus:#8DB4F0; --ocean:#1E3A52; --land:#EAF1F8; --border:#5F7A93;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{margin:0; background:var(--ground); color:var(--ink); font:400 1.0625rem/1.55 var(--sans);}
a{color:var(--stamp); text-underline-offset:.18em;}
a:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;}
.bar,main,footer{max-width:42rem; margin:0 auto; padding-left:1rem; padding-right:1rem;}
.bar{display:flex; justify-content:space-between; align-items:center; padding-top:.5rem; padding-bottom:.5rem;}
.bar a{display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none;}
.bar .brand{font-family:var(--serif); font-size:1.25rem; color:var(--ink);}
main{padding-top:.5rem; padding-bottom:1.5rem;}
h1{display:flex; align-items:center; gap:.75rem; margin:.5rem 0 .25rem; font:700 2.25rem/1.15 var(--serif); overflow-wrap:anywhere;}
h2{margin:2rem 0 .5rem; font:700 1.375rem/1.25 var(--sans);}
h3{margin:0 0 .125rem; font:700 1rem/1.35 var(--sans);}
.flag{flex:none; width:48px; height:36px; border-radius:4px; box-shadow:0 0 0 1px var(--rule);}
.where{margin:0 0 1rem; color:var(--muted);}
.cap{margin:0 0 1rem;}
.cap dt{color:var(--muted); font-size:.9375rem;}
.cap dd{margin:0; font:600 1.5rem/1.3 var(--serif); overflow-wrap:anywhere;}
.note{margin:0 0 1rem; padding:.75rem 1rem; background:var(--raise); border-left:4px solid var(--stamp); border-radius:0 8px 8px 0;}
.map:empty{display:none;}
.map svg{display:block; width:100%; height:auto; border-radius:14px; background:var(--ocean);}
ul.famous,ul.facts{list-style:none; margin:0; padding:0;}
.famous li{padding:.5rem 0; border-top:1px solid var(--rule);}
.famous li:first-child{border-top:0;}
.kind{display:inline-block; min-width:5.5rem; color:var(--muted); font-size:.9375rem;}
.facts li{margin:0 0 .75rem; padding:.875rem 1rem; background:var(--card); border-radius:14px; box-shadow:0 1px 2px rgba(15,43,70,.05),0 10px 24px -8px rgba(15,43,70,.14);}
@media (prefers-color-scheme:dark){.facts li{box-shadow:0 0 0 1px var(--rule);}}
.facts p{margin:0;}
.postcard{margin:2rem 0 0;}
.postcard img{display:block; width:100%; height:auto; border-radius:14px; background:var(--raise);}
.postcard figcaption{margin-top:.5rem; color:var(--muted); font-size:.9375rem;}
.go{margin:2rem 0 0;}
.cta{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.5rem; background:var(--stamp); color:var(--on-stamp); font-weight:700; text-decoration:none; border-radius:14px;}
footer{padding-top:1rem; padding-bottom:2.5rem; border-top:1px solid var(--rule);}
footer p{margin:0 0 .5rem;}
footer .tag{display:inline-flex; align-items:center; min-height:44px; font-weight:700;}
.credits{color:var(--muted); font-size:.875rem;}
/* the Try it box (#199): a plain link into the app; the page's own colour variables only */
section.try{margin:2rem 0 0; padding:1rem 1.125rem 1.125rem; background:var(--card); border-radius:14px; box-shadow:0 1px 2px rgba(15,43,70,.05),0 10px 24px -8px rgba(15,43,70,.14);}
@media (prefers-color-scheme:dark){section.try{box-shadow:0 0 0 1px var(--rule);}}
section.try h2{margin:0 0 .25rem; font-size:1.125rem;}
section.try p{margin:0 0 .75rem; color:var(--muted);}
a.try{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.25rem; border:2px solid var(--stamp); border-radius:14px; color:var(--stamp); font-weight:700; text-decoration:none;}
a.try:hover{background:var(--raise);}
/* the index page */
.index h2{margin-top:1.75rem;}
.index ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr)); gap:0 1rem;}
.index li a{display:flex; align-items:center; gap:.625rem; min-height:44px; color:var(--ink); text-decoration:none;}
.index li a:hover{text-decoration:underline;}
.index li img{flex:none; width:30px; height:22px; border-radius:3px; box-shadow:0 0 0 1px var(--rule);}
@media (max-width:420px){h1{font-size:1.875rem;}}