:root{
  --ink:#10233a;--ink-2:#40546c;--ink-3:#7a8a9c;
  --bg:#f3f7fb;--paper:#fff;--line:#d9e3ee;
  --sky:#1f6fd0;--sky-2:#e6f0fb;--sun:#f0a800;--rain:#2a7fd5;
  --radius:10px;--max:1120px;--text:72ch;
  font-size:100%;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e8eef6;--ink-2:#b4c1d1;--ink-3:#7f8fa2;--bg:#0f1a28;--paper:#172436;--line:#2a3b52;--sky:#5da2f2;--sky-2:#1c2f47;--sun:#ffc233}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;line-height:1.55;color:var(--ink);background:var(--bg);font-feature-settings:"tnum"}
a{color:var(--sky);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:700}
h2{font-size:clamp(1.3rem,2.8vw,1.7rem);font-weight:650;margin-top:2.2rem}
h3{font-size:1.1rem;font-weight:650;margin-top:1.4rem}
p,ul,ol,table{margin:0 0 1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1rem}
.prose{max-width:var(--text)}
.prose li{margin:.25rem 0}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i,svg.w,svg.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i{width:1em;height:1em;vertical-align:-.15em}
svg.w.rain,svg.w.drizzle,svg.w.storm{color:var(--rain)}svg.w.cloud,svg.w.fog{color:var(--ink-3)}svg.w.snow{color:#7fb6ea}

/* header */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:60px;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
.brand{font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--sky)}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink-2);text-decoration:none;padding:.4rem .6rem;border-radius:6px;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{background:var(--sky-2);color:var(--sky)}
.search{position:relative;flex:1 1 220px;max-width:360px}
.search input{width:100%;padding:.55rem .8rem .55rem 2.2rem;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem}
.search svg{position:absolute;left:.8rem;top:50%;translate:0 -50%;color:var(--ink-3);pointer-events:none}
.search ul{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;margin:0;padding:.3rem;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,35,58,.12);display:none}
.search ul.on{display:block}
.search li a{display:block;padding:.45rem .7rem;border-radius:6px;color:var(--ink);text-decoration:none}
.search li a:hover,.search li a:focus{background:var(--sky-2)}
.search li span{color:var(--ink-3);font-size:.85rem;margin-left:.4rem}
@media (max-width:640px){.nav{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.search{max-width:none}}

/* breadcrumb */
.crumb{font-size:.85rem;color:var(--ink-3);padding:.9rem 0 .2rem}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.crumb li+li::before{content:"/";margin-right:.3rem;color:var(--line)}
.crumb a{color:var(--ink-2)}

main.wrap{padding-top:.75rem;padding-bottom:3rem}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:var(--text)}
.date{color:var(--ink-3);font-size:.95rem;margin:0 0 1rem}

/* actions */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--sky);color:var(--sky)}
.btn.primary{background:var(--sky);border-color:var(--sky);color:#fff}
.btn.primary:hover{background:#185fb5;color:#fff}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.5rem}

/* live weather block ("now") */
.now{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;min-height:190px;margin:1rem 0 1.5rem;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.5rem;align-items:center}
.now .ic{width:88px;height:88px;color:var(--sun)}
.now .ic.rain,.now .ic.drizzle,.now .ic.storm{color:var(--rain)}
.now .ic.cloud,.now .ic.fog{color:var(--ink-3)}
.now .ic.snow{color:#7fb6ea}
.now .t{font-size:clamp(3rem,9vw,4.6rem);font-weight:300;line-height:1;letter-spacing:-.04em;margin:0}
.now .t sup{font-size:.4em;font-weight:400;vertical-align:top;margin-left:.1em}
.now .d{font-size:1.15rem;font-weight:600;margin:.3rem 0 0}
.now dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem 1rem;margin:0;padding-top:.9rem;border-top:1px solid var(--line)}
.now dt{font-size:.8rem;color:var(--ink-3)}
.now dd{margin:0;font-weight:600}
.now .st{grid-column:1/-1;color:var(--ink-3);font-size:.85rem}
.now.err{grid-template-columns:1fr}
@media (max-width:480px){.now{padding:1rem;gap:.6rem 1rem}.now .ic{width:64px;height:64px}}

/* hourly strip with temperature curve */
.hourly{overflow-x:auto;scrollbar-width:thin;margin:0 -1rem 1.5rem;padding:0 1rem;min-height:170px}
.hourly .row{display:flex;position:relative;width:max-content}
.hourly .h{flex:0 0 64px;text-align:center;font-size:.85rem}
.hourly .h time{display:block;color:var(--ink-3);font-size:.8rem;height:20px}
.hourly .h svg.w{width:28px;height:28px;display:block;margin:2px auto 0;color:var(--sun)}
.hourly .h .sp{display:block;height:48px}
.hourly .h .p{color:var(--rain);font-size:.75rem;height:1.1em;display:block}
.hourly .h b{font-weight:600;display:block}
.hourly .curve{position:absolute;left:0;top:52px;height:44px;display:block;overflow:visible;pointer-events:none}
.hourly .curve path{fill:none;stroke:var(--sun);stroke-width:2}
.hourly .curve circle{fill:var(--paper);stroke:var(--sun);stroke-width:2}
.hourly .h.cur b::after{content:"";display:block;height:3px;background:var(--sky);border-radius:2px;margin:.2rem .6rem 0}

/* daily table */
.daily{width:100%;border-collapse:collapse;font-size:.95rem;min-height:300px}
.daily th,.daily td{padding:.6rem .5rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.daily th{font-weight:600;color:var(--ink-2);font-size:.85rem}
.daily svg.w{width:26px;height:26px;color:var(--sun);vertical-align:middle;margin-right:.3rem}
.daily .max{font-weight:700}.daily .min{color:var(--ink-3)}
.daily .bar{display:inline-block;height:6px;border-radius:3px;background:linear-gradient(90deg,#7fb6ea,var(--sun));vertical-align:middle;margin:0 .4rem}
.daily tr.we td{background:var(--sky-2)}
@media (max-width:600px){.daily .hide{display:none}}

/* city grid (home, demain, week-end, hubs) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.6rem;margin:1rem 0 1.5rem;list-style:none;padding:0}
.grid li a{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;min-height:56px}
.grid li a:hover{border-color:var(--sky)}
.grid .n{font-weight:600;flex:1;line-height:1.2;min-width:0}
.grid .n small{display:block;color:var(--ink-3);font-weight:400;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .v{font-weight:700;font-size:1.1rem;white-space:nowrap;flex:none;text-align:right}
.grid .v small{font-weight:400;color:var(--ink-3);font-size:.75rem;display:block;text-align:right}
.grid svg.w{width:26px;height:26px;color:var(--sun);flex:none}

/* link lists (hubs, footers) */
.cols{columns:3;column-gap:2rem;padding:0;list-style:none;margin:.5rem 0 1.5rem}
.cols li{break-inside:avoid;padding:.2rem 0;border-bottom:1px solid var(--line)}
.cols a{color:var(--ink);text-decoration:none}
.cols a:hover{color:var(--sky);text-decoration:underline}
.cols span{color:var(--ink-3);font-size:.8rem;margin-left:.3rem}
@media (max-width:760px){.cols{columns:2}}
@media (max-width:420px){.cols{columns:1}}

/* map */
.map{height:min(70vh,560px);min-height:360px;border-radius:var(--radius);border:1px solid var(--line);background:var(--sky-2);margin:1rem 0;position:relative;overflow:hidden}
.map.mini{height:280px;min-height:280px}
.map .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2)}
.map .ph button{margin-top:.5rem}
.mk{background:var(--paper);border:2px solid var(--sky);border-radius:999px;padding:1px 7px;font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mk.r{border-color:var(--rain)}
.leaflet-container{font:inherit}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.legend label{display:flex;gap:.35rem;align-items:center;cursor:pointer}

/* faq */
.faq details{border-top:1px solid var(--line);padding:.6rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;padding:.2rem 0}
.faq p{margin:.5rem 0 .2rem;color:var(--ink-2)}

/* note / callout used sparingly */
.note{border-left:3px solid var(--sun);padding:.5rem .9rem;background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;margin:1rem 0}

/* below-fold sections */
.lazy{content-visibility:auto;contain-intrinsic-size:auto 500px}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--paper);padding:2rem 0;font-size:.9rem;color:var(--ink-2)}
.foot .cols{columns:4}
@media (max-width:760px){.foot .cols{columns:2}}
.foot h2{font-size:1rem;margin:0 0 .4rem}
.foot .legal{margin-top:1.5rem;font-size:.8rem;color:var(--ink-3)}
.foot .legal a{color:var(--ink-3);margin-right:.8rem}