/* City by Month v2. One stylesheet, no script, no web font. Tokens first. */
:root{color-scheme:light dark;--bg:#fff;--ink:#16202a;--mut:#4a5763;--line:#c9d1d9;--tint:#f1f5f7;--acc:#0a5c6b}
@media (prefers-color-scheme:dark){:root{--bg:#11161b;--ink:#e6ebef;--mut:#a9b5c0;--line:#3a4650;--tint:#1a2229;--acc:#7ccfdc}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1.1875rem/1.3158 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.w{max-width:62rem;margin:0 auto;padding:0 1rem}
h1,h2,h3,p,ul,ol,dl{max-width:42rem}
a{color:var(--acc);text-underline-offset:.15em;text-decoration-thickness:.06em;padding-block:.1875rem}
a:hover{text-decoration-thickness:.14em}
a:focus-visible,[tabindex]:focus-visible{outline:.1875rem solid var(--acc);outline-offset:.125rem;border-radius:.125rem}
.skip{position:absolute;left:-999rem;top:.5rem;z-index:9;padding:.5rem 1rem;background:var(--ink);color:var(--bg)}
.skip:focus{left:.5rem}

/* Header, breadcrumb, footer */
.top{border-bottom:1px solid var(--line)}
.top .w{display:flex;justify-content:space-between;align-items:center}
.top .w a{display:inline-block;padding:.6875rem 0}
.mark{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:.5rem 0 0;max-width:none}
.crumb,.foot,.s,.src,.rule,.date,.cite,.srcs,table,.months{font-size:1rem;line-height:1.5}
.crumb li+li::before{content:"/";padding:0 .375rem;color:var(--mut)}
.crumb a,.links a,.byc a,th a,.pn a{display:inline-block;min-width:1.5rem;min-height:1.5rem}
.foot{margin-top:3rem;padding:1rem 0 2.5rem;border-top:1px solid var(--line)}
.links{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;list-style:none;padding:0}

/* Type */
h1{margin:.75rem 0 .625rem;font-size:1.75rem;line-height:1.2;letter-spacing:-.015em}
h2{margin:2.75rem 0 .75rem;font-size:1.4375rem;line-height:1.25}
h3{margin:1.5rem 0 .5rem;font-size:1.1875rem;line-height:1.3158}
p{margin:.75rem 0}
.s,.src,.rule,.date,.nd,small{color:var(--mut)}
small{font-size:1rem}
.src,.rule,.s{margin:.5rem 0}
.cite,.srcs,.def{overflow-wrap:anywhere}
.srcs li{margin:.625rem 0}
dl.def dt{font-weight:700;margin-top:.75rem}
dl.def dd{margin:0}
code{font:inherit;background:var(--tint);padding:0 .2em;border-radius:.2em}

/* Answer: first block after the h1 */
.ans{border-left:.25rem solid var(--acc);padding-left:.75rem}
.ans p{margin:0}
.ans .rule{margin:.375rem 0 0}
.key{list-style:none;margin:0;padding:0}
.key li{padding:.1875rem 0}
.key b,.stats dd,table,.months{font-variant-numeric:tabular-nums}
.date{margin:.75rem 0 0}

/* Home: one line per country, its cities as links */
.byc{list-style:none;padding:0}
.byc li{padding:.25rem 0}

/* Month links: 12 in a row when wide, wrapped on a phone, never cut off */
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;list-style:none;margin:.75rem 0;padding:0;max-width:none}
.months.full{grid-template-columns:repeat(3,1fr)}
.months a{display:block;padding:.5rem .125rem;border:1px solid var(--line);border-radius:.375rem;text-align:center;text-decoration:none;color:var(--ink)}
.months b{display:block;color:var(--acc);text-decoration:underline;text-underline-offset:.15em}
.months span{display:block}
.months a:hover{border-color:var(--acc)}
.months a[aria-current]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.months a[aria-current] b{color:inherit;text-decoration:none}

/* Stat tiles */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.75rem 0;max-width:none}
.stats div{padding:.625rem .75rem;background:var(--tint);border-radius:.375rem}
.stats dt{font-size:1rem;line-height:1.5;color:var(--mut)}
.stats dd{margin:0;font-size:1.4375rem;line-height:1.25;font-weight:700}
.stats small{display:block;font-weight:400;line-height:1.5}

/* Tables: scroll in their own box, first column stays put, numbers right */
.scroll{overflow-x:auto;margin:.75rem 0;border:1px solid var(--line);border-radius:.375rem}
table{width:100%;border-collapse:collapse}
.wide{min-width:34rem}
caption{padding:.625rem .75rem;text-align:left;font-weight:700;border-bottom:1px solid var(--line)}
th,td{padding:.5rem .375rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th:first-child{padding-left:.75rem}
:is(th,td):last-child{padding-right:.75rem}
thead th{background:var(--tint);vertical-align:bottom}
tbody tr:last-child>*{border-bottom:0}
tbody th{font-weight:600;background:var(--bg)}
th:first-child{position:sticky;left:0;box-shadow:1px 0 0 var(--line)}
.n{text-align:right}
td.n,.nd{white-space:nowrap}
td small,th small,.cn{display:block;font-weight:400}

/* Previous and next */
.pn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;list-style:none;margin:2rem 0 0;padding:0}
.pn a{padding:.5rem .875rem;border:1px solid var(--line);border-radius:.375rem}

@media (min-width:30rem){
.months{grid-template-columns:repeat(6,1fr)}
.months.full{grid-template-columns:repeat(4,1fr)}
.stats{grid-template-columns:repeat(4,1fr)}
th,td{padding:.5rem .75rem}
}
@media (min-width:50rem){
h1{font-size:2.25rem}
h2{font-size:1.625rem}
.months{grid-template-columns:repeat(12,1fr)}
.months.full{grid-template-columns:repeat(6,1fr)}
.key{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2rem;max-width:none}
}