@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root{
  --bg:#f3f2f2; --surface:#eae9e9; --text:#201e1d;
  --accent:#0088b0; --accent-ink:#006786; --spot:#d6006c; --spot-ink:#aa0b56;
  --n200:#eae7e7; --n300:#d7d3d3; --n400:#bab6b6; --n600:#7d7979; --n700:#605d5d; --n800:#444141;
  --divider:rgba(32,30,29,.16);
  --serif:'Source Serif 4',Georgia,serif;
  --sh-sm:0 1px 2px rgba(45,43,43,.14); --sh-md:0 3px 10px rgba(45,43,43,.16);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);font-size:17px;line-height:28px;-webkit-font-smoothing:antialiased;}
body{display:flex;flex-direction:column;min-height:100vh;}
a{color:var(--accent-ink);text-decoration:none;cursor:pointer;}
a:hover{color:var(--spot-ink);}
::selection{background:rgba(0,136,176,.18);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
img{max-width:100%;}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:pretty;}
p{text-wrap:pretty;}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,72px);width:100%;}
main{flex:1;}
.screen{padding:44px 0 88px;}

.nav{border-bottom:1px solid var(--divider);background:var(--bg);position:sticky;top:0;z-index:20;}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;}
.nav-brand{font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--text);}
.nav-brand:hover{color:var(--accent-ink);}
.navlinks{display:flex;gap:18px;font-size:15px;flex-wrap:wrap;}
.navlinks a.on{color:var(--text);border-bottom:2px solid var(--accent);}

.kicker{font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n700);}
.kicker.ac{color:var(--accent-ink);} .kicker.sp{color:var(--spot-ink);}
.lede{font-size:19px;line-height:30px;max-width:52ch;}
.big{font-weight:600;font-size:clamp(38px,7vw,84px);line-height:1.05;margin-left:-.035em;}
.num{font-weight:600;font-size:clamp(56px,9vw,110px);line-height:1;letter-spacing:-.03em;}
.stat b{display:block;font-weight:600;font-size:clamp(44px,7vw,64px);line-height:1;}

.btn{font-family:var(--serif);font-size:16px;line-height:20px;padding:12px 20px;min-height:46px;border:1px solid var(--text);border-radius:2px;background:transparent;color:var(--text);cursor:pointer;transition:background .15s,color .15s;}
.btn:hover{background:var(--text);color:var(--bg);}
.btn:active{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--bg);}
.btn.primary{background:var(--text);color:var(--bg);}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);}
.btn.ghost{border-color:var(--n400);color:var(--n800);}
.btn.ghost:hover{background:var(--n200);color:var(--text);}
.btn.block{display:block;width:100%;}
.btn:disabled{opacity:.45;cursor:default;}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.grid{display:grid;gap:56px;}
.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

.rule{border:0;border-top:2px solid var(--text);border-bottom:1px solid var(--text);height:5px;margin:0;}
.hairline{border:0;border-top:1px solid var(--text);margin:0;}
.hud{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 28px;padding:13px 0;}

.field label{display:block;}
.input{width:100%;font-family:var(--serif);font-size:18px;padding:12px 14px;min-height:48px;border:1px solid var(--n400);border-radius:2px;background:#fff;color:var(--text);}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,136,176,.18);}

.card{display:block;cursor:pointer;color:inherit;}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--n200);border:1px solid var(--divider);}
.card .t{font-weight:600;font-size:18px;margin-top:10px;}
.card .m{font-size:14px;line-height:20px;color:var(--n700);}
.card:hover .t{color:var(--accent-ink);}

.list{display:flex;flex-direction:column;}
.li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--divider);color:inherit;}
.li:last-child{border-bottom:none;}
.li.clickable{cursor:pointer;}
.li.clickable:hover{color:var(--accent-ink);}
.tile-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px 64px;}
.tile{display:block;cursor:pointer;color:inherit;}
.tile:hover h3{color:var(--accent-ink);}
.tile h3{font-size:26px;line-height:30px;}
.tile .meta{display:flex;justify-content:space-between;font-size:16px;color:var(--n800);}

.tag{font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--spot-ink);color:var(--spot-ink);border-radius:20px;padding:1px 9px;white-space:nowrap;}
.bar{height:3px;background:var(--n300);margin-top:6px;}
.bar i{display:block;height:100%;background:var(--accent);transition:width .4s ease;}

table{width:100%;border-collapse:collapse;font-size:16px;}
th{text-align:left;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--n700);font-weight:400;padding:8px 10px 8px 0;border-bottom:1px solid var(--text);}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--divider);}

.mapbox{aspect-ratio:2/1;border:1px solid var(--divider);background:var(--bg);box-shadow:var(--sh-sm);}
@media (max-width:640px){
  .mapbox{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;}
}
.mapbox svg{display:block;width:100%;height:100%;}
.mapbox.play{cursor:crosshair;}

.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:640px;margin-top:10px;}
.options .btn{text-align:left;}

.flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px;max-height:460px;overflow-y:auto;padding:2px;}
.flags .fl{cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;border:none;background:none;}
.flags .fl img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--n200);}
.flags .fl:hover{outline-color:var(--n400);}
.flags .fl.right{outline-color:var(--accent);}
.flags .fl.wrong{outline-color:var(--spot);}

.fact{border-top:1px solid var(--divider);margin-top:20px;padding-top:16px;}
.fact p{font-size:16px;line-height:27px;margin:8px 0 0;}
.verdict{font-style:italic;font-size:21px;line-height:31px;}
.ok{color:var(--accent-ink);} .bad{color:var(--spot-ink);}
.prose p,.prose li{font-size:17px;line-height:29px;max-width:68ch;}
.prose h2{font-size:24px;line-height:30px;margin:36px 0 8px;}
.prose ul{padding-left:22px;}

.site-footer{border-top:1px solid var(--divider);padding:24px 0 40px;font-size:14px;line-height:24px;color:var(--n700);}
.site-footer .wrap{display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:space-between;}

.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--text);box-shadow:var(--sh-md);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.cookie-bar p{margin:0;font-size:15px;line-height:24px;flex:1;min-width:220px;}
@media (max-width:520px){.cookie-bar{flex-direction:column;align-items:stretch;}.cookie-bar .btn{width:100%;}}

@media (max-width:640px){
  body{font-size:16px;}
  .screen{padding:28px 0 64px;}
  .grid{gap:32px;}
  .navlinks{gap:14px;font-size:14px;}
  .lede{font-size:17px;line-height:28px;}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important;animation-duration:.001ms !important;}}