/* havalar.net. Layout: a plain top bar (logo, search, languages), on a place's pages a row of tabs under it, then a
   photo card with the page's heading and key numbers, then the forecast. White page, near-black type, blue only for
   links, rain and the search button, 1px grey dividers and flat pale-grey surfaces. No shadows.
   Light by default; [data-theme=dark] when the visitor picks night mode (site.js).
   Class names are short: check that a new one is not taken before adding it. */
@font-face{font-family:"Nunito Sans";src:url(/static/fonts/nunito-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+018F,U+0259,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BA,U+20BC,U+20BD,U+2116,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"Nunito Sans";src:url(/static/fonts/nunito-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --blue:#1878ec;--bg:#fff;--cloud:#f6f6f6;--mist:#ededed;--line:#d9d9d9;--ink:#111;--graphite:#606060;--holder:#b3b3b3;
  --field:#fff;--field-ink:#111;--track:#ededed;--warm:#f08a24;
  --map-sea:#b9d2ec;--grid:#e4e4e4;--grid-day:#8c8c8c;
  color-scheme:light;
}
[data-theme=dark]{
  --blue:#4c9bff;--bg:#0f1012;--cloud:#1a1b1e;--mist:#151618;--line:#2c2e33;--ink:#f2f2f2;--graphite:#a2a2a2;--holder:#6d6d6d;
  --field:#1f2124;--field-ink:#f2f2f2;--track:#2a2c30;
  --map-sea:#14263c;--grid:#26282c;--grid-day:#6d6d6d;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-decoration:none;border-radius:4px}
a:hover{text-decoration:underline}
img{display:block}
h1,h2,h3{margin:0;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.narrow{max-width:860px}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);padding:8px 12px;z-index:50}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--graphite)}
.small{font-size:14px}
.rain{color:var(--blue);font-weight:700}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (min-width:701px){.wrap{padding:0 24px}}

/* ---------- top bar on every page: logo, search, languages, day/night */
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top .nav{padding:8px 0}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;font-size:22px;letter-spacing:-.02em;height:36px}
.logo:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;color:var(--blue)}
.nav-search{order:3;flex:1 1 100%;min-width:0}
.nav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.langs{display:flex;gap:2px}
.langs a{font-weight:600;font-size:14px;line-height:20px;padding:7px 8px;border-radius:1000px;color:var(--graphite);border:1px solid transparent}
@media (min-width:420px){.langs a{padding:7px 11px}}
.langs a:hover{text-decoration:none;color:var(--ink)}
.langs a[aria-current]{color:var(--ink);border-color:var(--line)}
/* phones: the name with .net stays on one row with the language buttons from 360px up, as the shorter name did;
   at full size it would leave 2px to spare on a 390px iPhone, too little for a fallback font */
@media (max-width:479px){.logo{font-size:18px;gap:6px}.logo-mark{width:24px;height:24px}}
@media (max-width:389px){.langs a{padding:7px 6px}.nav-right{gap:4px}.theme{width:34px;height:34px}}
.theme{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.theme:hover{background:var(--cloud)}
.theme svg{width:18px;height:18px}
.i-sun{display:none}
[data-theme=dark] .i-sun{display:block}
[data-theme=dark] .i-moon{display:none}
/* wide: three columns, so the search sits in the true centre of the bar whatever the two sides weigh
   (from 960 px, where both sides fit beside a full-width search; below that the search keeps its own row) */
@media (min-width:960px){
  .top .nav{padding:10px 0}
  .nav{display:grid;grid-template-columns:1fr minmax(0,440px) 1fr;gap:16px}
  .logo{grid-column:1;justify-self:start}
  .nav-search{grid-column:2;order:0}
  .nav-right{grid-column:3;justify-self:end;margin-left:0}
}

/* ---------- page tabs: a row under the top bar (today, tomorrow, hourly, weekend ...) */
.tabs{background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .wrap{padding:0 6px}
.tabs-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{flex:none;color:var(--graphite);font-weight:700;font-size:15px;line-height:22px;padding:11px 10px 9px;border-bottom:2px solid transparent;border-radius:0}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--blue)}
.tabs-fade{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
@media (min-width:701px){.tabs .wrap{padding:0 12px}.tabs a{font-size:16px;line-height:24px;padding:12px 12px 10px}}

/* ---------- search: one white pill, blue round button at the end */
.search{position:relative;display:flex;align-items:center;height:48px;padding:0 4px 0 20px;border-radius:9999px;background:var(--field);border:1px solid var(--line)}
.ph .search{background:#fff;border-color:#fff;--field-ink:#111}
.search-in{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--field-ink);font:inherit;font-size:16px;outline:none;border-radius:0;padding:0}
.search-in::placeholder{color:var(--holder);opacity:1}
.search-in::-webkit-search-cancel-button{display:none}
.search:focus-within{border-color:var(--blue)}
.locate,.go{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;padding:0}
.locate{background:transparent;color:#606060}
.locate:hover{color:#111}
.locate svg,.go svg{width:20px;height:20px}
.locate[aria-busy=true]{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.go{background:var(--blue);color:#fff;margin-left:2px}
.ph .go{background:#1878ec}
.top .search{height:44px}
.top .locate,.top .go{width:36px;height:36px}
.search-big{height:60px;padding-left:24px}
.search-big .go{width:50px;height:50px}
.search-big .search-in{font-size:17px}
.sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;list-style:none;margin:0;padding:6px;background:var(--bg);
  border:1px solid var(--line);border-radius:16px;max-height:min(60vh,420px);overflow:auto;text-align:left;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.sugg a{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;color:var(--ink);font-weight:600}
.sugg a small{color:var(--graphite);font-weight:400}
.sugg a:hover,.sugg [aria-selected=true] a{background:var(--cloud);text-decoration:none}
.sugg .empty{padding:10px 14px;color:var(--graphite)}
.sugg .sugg-h{padding:8px 14px 4px;color:var(--graphite);font-size:13px;font-weight:700}

/* ---------- the photo card: the page's heading and key numbers over a photo of the weather. As tall as its content. */
.hero-wrap{padding-top:10px}
.ph{position:relative;display:flex;border-radius:20px;color:#fff;background:#4f6b88}
.ph picture{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-shade{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.56) 100%)}
.ph-dark .ph-img{filter:brightness(.55) saturate(.85)}
.ph-in{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;padding:14px 16px}
.ph a{color:#fff}
.ph .sugg a{color:var(--ink)}
.ph h1{font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.h1-sub{display:block;font-size:15px;line-height:22px;font-weight:600;margin-top:2px;opacity:.92;letter-spacing:0}
.crumbs ol{display:flex;flex-wrap:nowrap;overflow:hidden;list-style:none;margin:0 0 6px;padding:0;font-size:14px;line-height:20px;white-space:nowrap;color:var(--graphite)}
.crumbs li+li::before{content:"/";margin:0 8px;opacity:.6}
.crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:var(--graphite)}
.crumbs-over ol,.crumbs-over a{color:rgba(255,255,255,.88)}
.now{display:flex;align-items:center;gap:8px;margin-top:8px;text-shadow:0 1px 16px rgba(0,0,0,.2)}
.now .wi{width:56px;height:56px;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.now-t{font-size:60px;line-height:1;font-weight:400;letter-spacing:-.05em;display:flex;align-items:baseline}
.now-t small{font-size:18px;font-weight:700;letter-spacing:0;margin-left:6px}
.now-s{display:flex;flex-direction:column;flex:1 1 0;min-width:0;font-size:14px;line-height:20px;margin-left:8px}
.now-s b{font-size:16px;line-height:22px;font-weight:700}
.now-rose{display:grid;place-items:center;width:52px;height:52px}
.now-rose .arr{width:44px;height:44px;fill:#fff}
.now-month .now-t{font-size:52px}
/* wind, humidity and pressure under the temperature */
.ph-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.3)}
.ph-facts dt{font-size:12px;line-height:16px;opacity:.88}
.ph-facts dd{margin:1px 0 0;font-size:16px;line-height:22px;font-weight:800;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ph-facts dd small{font-size:12px;font-weight:600;opacity:.9}
.ph-facts dd.sub{font-size:12px;line-height:16px;font-weight:400;opacity:.88}
.ph-facts .arr{fill:#fff}
/* will it rain: one line */
.rain-note{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.3);font-size:15px;line-height:22px;font-weight:800}
.rain-note .drop{width:15px;height:15px;color:#8cc4ff}
.rain-note-dry{font-weight:600}
.rain-note-dry .drop{color:rgba(255,255,255,.6)}
/* home: the heading, the big search and the quick places */
.ph-center{margin:0 auto;width:100%;max-width:720px;text-align:center;padding:22px 0 6px}
.ph-center h1{font-size:28px;line-height:34px}
.ph-lede{margin:6px auto 14px;font-size:15px;line-height:22px;opacity:.95;max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding:0 16px}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:none;color:#fff;font-size:15px;font-weight:600;padding:6px 14px;border-radius:1000px;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.08)}
.quick a:hover{text-decoration:none;background:rgba(255,255,255,.16)}
.quick b{font-weight:800;margin-left:4px}
.ph-credit{margin:8px 0 0;text-align:right;font-size:12px;font-weight:600;opacity:.85}
@media (min-width:701px){
  .ph{border-radius:24px}
  .ph-in{padding:20px 24px 18px}
  .ph h1{font-size:28px;line-height:36px}
  .now .wi{width:72px;height:72px}
  .now-t{font-size:80px}
  .now-s{font-size:15px;line-height:22px;margin-left:12px}
  .now-s b{font-size:18px;line-height:26px}
  .now-month .now-t{font-size:64px}
  .ph-center{padding:40px 0 14px}
  .ph-center h1{font-size:40px;line-height:48px}
  .ph-lede{margin:8px auto 20px;font-size:17px;line-height:26px}
  .quick{flex-wrap:wrap;justify-content:center;overflow:visible;margin:18px 0 0;padding:0}
}
/* when the card itself is wide enough, the three numbers sit beside the temperature */
.ph{container-type:inline-size}
@container (min-width:780px){
  .ph-row{display:flex;align-items:center;gap:36px}
  .ph-row .now{flex:none}
  .ph-row .now-s{flex:none;max-width:220px}
  .ph-row .ph-facts{flex:1;margin:8px 0 0;padding:0 0 0 28px;border-top:0;border-left:1px solid rgba(255,255,255,.3)}
}

/* ---------- page sections */
.sec{margin-top:40px}
.sec>h2,.mapcard>h2{font-size:20px;line-height:28px;font-weight:700;margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sec>h2 small{font-size:14px;line-height:20px;color:var(--graphite);font-weight:400}
.panel{background:var(--cloud);border-radius:16px;padding:16px}
.more{display:inline-block;margin-top:16px;font-weight:600}
.more-row{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 0;font-weight:600}
.links{margin:24px 0 0;font-weight:600}
.units,.legend{font-size:13px;color:var(--graphite);margin:10px 0 0}
.note{font-size:14px;color:var(--graphite);margin:14px 0 0}
.head{margin:32px 0 8px}
.head h1{font-size:28px;line-height:36px;font-weight:800;letter-spacing:-.01em;overflow-wrap:break-word}
@media (min-width:701px){.head h1{font-size:32px;line-height:40px}}
.lede{color:var(--graphite);margin:6px 0 0}
.sec>h2 a{color:inherit}
.sec-first{margin-top:24px}
@media (min-width:701px){.sec{margin-top:48px}.sec-first{margin-top:28px}}

/* ---------- a place's main pages: one column on phones, the forecast plus a side column from 1000 px */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
.col-main,.col-side{min-width:0}
.col-main>.ph{margin-top:10px}
@media (min-width:1000px){
  .cols{grid-template-columns:minmax(0,1fr) 336px}
  .col-side{padding-top:10px}
  .col-side>.sec:first-child{margin-top:0}
  .col-side .sec{margin-top:28px}
  .col-side .pcs{grid-template-columns:minmax(0,1fr);gap:6px}
  .col-side .pc{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name icon t";gap:8px;min-height:0;padding:8px 14px}
  .col-side .pc-name small{display:inline;margin-left:8px}
  .col-side .pc-t{text-align:right}
}

/* ---------- now: four facts and the forecast in words */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0}
.tile{background:var(--cloud);border-radius:16px;padding:12px 16px}
.tile dt{font-size:14px;line-height:20px;color:var(--graphite)}
.tile dd{margin:2px 0 0;font-size:18px;line-height:26px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tile dd.tile-sub{margin:0;font-size:13px;line-height:18px;font-weight:400;color:var(--graphite)}
.tile .arr{fill:var(--ink)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tiles.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.col-main .tiles{margin-top:24px}
.lead{margin:24px 0 0;max-width:860px;font-size:17px;line-height:28px}
.lead p{margin:0 0 10px}
.lead a{font-weight:700}
.lead-p{margin:0;max-width:860px;font-size:17px;line-height:28px}
.upd{font-size:14px!important;line-height:20px!important;color:var(--graphite)}

/* ---------- hourly strip with the temperature curve */
/* --strip: the height of the strip when it has a rain row; --lane: the rain row with its caption line */
.hours-wrap{position:relative;--strip:268px;--lane:70px}
.hours{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -16px;padding:0 16px 10px;scrollbar-width:thin;scrollbar-color:var(--holder) transparent;outline:none}
.hours-in{position:relative;height:var(--strip)}
.hours-dry .hours-in{height:190px}
/* the temperature line: coloured by temperature (a gradient set in the markup), drawn over the column lines */
.hours-line{position:absolute;left:0;top:22px;overflow:visible;z-index:1;pointer-events:none}
.hours-line polyline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.hours-list{display:flex;list-style:none;margin:0;padding:0;height:100%}
.hr{position:relative;flex:0 0 56px;width:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
/* a faint line between the hours, a stronger one where a new day begins */
.hr+.hr{box-shadow:inset 1px 0 0 var(--grid)}
.hr+.hr-day{box-shadow:inset 1px 0 0 var(--grid-day)}
.hr-date{position:absolute;top:0;left:6px;font-size:12px;font-weight:700;color:var(--graphite)}
.hr-temp{position:absolute;left:0;right:0;text-align:center;font-weight:700;font-size:15px}
.hr .wi{width:36px;height:36px}
.hr-t{font-size:13px;color:var(--graphite)}
/* the rain row: one bar per wet hour, as wide as the hour, standing on a line; taller and darker for more rain */
.hr-rain{height:var(--lane);width:100%;margin-top:4px;padding:20px 2px 0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;border-bottom:2px solid var(--line)}
.hr-rain b{font-size:12px;line-height:14px;font-weight:800;color:var(--blue);text-align:center}
.hr-rain i{display:block;border-radius:5px 5px 0 0;background:var(--blue)}
.rain-cap{position:absolute;left:0;top:calc(var(--strip) - var(--lane) + 2px);margin:0;display:flex;align-items:center;gap:4px;padding-right:8px;background:var(--cloud);font-size:12px;line-height:16px;font-weight:700;color:var(--graphite)}
.rain-cap .drop{color:var(--blue)}
.hr-w{font-size:12px;color:var(--graphite);display:flex;align-items:center;gap:2px}
.arr{fill:currentColor;flex:none}
.drop{width:11px;height:11px;flex:none}
.rain{display:inline-flex;align-items:center;gap:3px}

/* ---------- days: rows on white with 1px dividers */
.days{border-top:1px solid var(--line)}
.day{display:grid;grid-template-columns:80px 40px minmax(0,54px) 38px minmax(24px,1fr) 38px;align-items:center;gap:6px;
  padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.day:hover{background:var(--cloud);text-decoration:none}
.day-name b{display:block;font-size:16px;line-height:22px;font-weight:700}
.day-name small{display:block;font-size:13px;line-height:18px;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day .wi{width:40px;height:40px}
.day-p{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:2px}
.day-lite{color:var(--graphite);font-weight:600}
.day-lo{text-align:right;color:var(--graphite);font-weight:600}
.day-hi{font-weight:800}
span.bar{position:relative;height:6px;border-radius:99px;background:var(--track)}
span.bar i{position:absolute;top:0;bottom:0;border-radius:99px;min-width:6px}
.day-w{display:none;font-size:14px;color:var(--graphite);align-items:center;gap:4px;justify-content:flex-end}
@media (min-width:700px){
  .day{grid-template-columns:120px 44px 76px 44px minmax(80px,1fr) 44px 110px;gap:12px;padding:12px 8px}
  .day-w{display:flex}
}

/* ---------- place cards and lists: flat pale grey, no shadows */
.pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:560px){.pcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.pcs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pc{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"name name" "icon t";align-items:center;gap:2px 6px;padding:12px 14px;border-radius:16px;background:var(--cloud);color:var(--ink);min-height:64px}
.pc:hover{text-decoration:none;background:var(--mist)}
.pc .pc-name{grid-area:name}.pc .wi{grid-area:icon}.pc .pc-t{grid-area:t}
@media (min-width:560px){.pc{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name icon t";gap:6px}}
.pc-name{font-weight:700;font-size:16px;line-height:22px}
.pc-name small{display:block;font-size:13px;line-height:18px;color:var(--graphite);font-weight:400}
.pc .wi{width:36px;height:36px}
.pc-t{font-weight:800;font-size:18px;line-height:22px;white-space:nowrap}
.pc-t small{font-size:14px;color:var(--graphite);font-weight:600;margin-left:6px}
@media (min-width:560px){.pc-t{text-align:right}.pc-t small{display:block;margin-left:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chips a{padding:7px 14px;border-radius:1000px;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;line-height:20px}
.chips a:hover{text-decoration:none;border-color:var(--ink)}
.chips-nav{margin:16px 0 0}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.plist a{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:12px;background:var(--cloud);color:var(--ink);font-weight:600;font-size:15px}
.plist a:hover{text-decoration:none;background:var(--mist)}
.plist b{font-weight:800}
.facts dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:860px){.facts dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts dt{font-size:14px;line-height:20px;color:var(--graphite)}
.facts dd{margin:2px 0 0;font-weight:700}

/* ---------- tomorrow: parts of the day */
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0}
.part-x .rain{color:var(--blue)}
@media (min-width:700px){.parts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.part{background:var(--cloud);border-radius:16px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center}
.part h3{font-size:14px;line-height:20px;color:var(--graphite);font-weight:600}
.part .wi{width:48px;height:48px;margin:4px 0}
.part-t{margin:0;font-size:26px;line-height:32px;font-weight:800}
.part-s{margin:2px 0;font-size:14px;line-height:20px;color:var(--graphite)}
.part-x{margin:2px 0 0;font-size:13px;color:var(--graphite);display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:center}

/* ---------- 15 days */
.chart-sec{background:var(--cloud);border-radius:16px;padding:18px 12px 30px;margin-top:24px}
.chart{position:relative;height:162px;overflow-x:auto}
.chart-svg{position:absolute;left:0;top:12px;width:100%;min-width:calc(var(--n) * 36px);height:124px}
.chart-svg polyline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.c-max{stroke:var(--warm)}
.c-min{stroke:var(--blue)}
.chart-labels{position:absolute;left:0;top:12px;height:calc(100% - 12px);width:100%;min-width:calc(var(--n) * 36px);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.chart-labels span{position:relative;height:124px}
.chart-labels b,.chart-labels i{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-style:normal}
.chart-labels b{top:calc(var(--hy) / 120 * 100% - 20px);font-weight:800}
.chart-labels i{top:calc(var(--ly) / 120 * 100% + 4px);color:var(--graphite);font-weight:600}
.chart-labels em{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:12px;color:var(--graphite);font-style:normal}
/* a month's 28-31 days fit the width: their labels only every fifth day */
.chart:has(.chart-labels-sparse) .chart-svg,.chart-labels-sparse{min-width:0}
.chart-labels-sparse b,.chart-labels-sparse i,.chart-labels-sparse em{left:-12px;right:-12px}
.longs{border-top:1px solid var(--line)}
.ld{display:grid;grid-template-columns:minmax(0,1fr) 48px auto;grid-template-areas:"date icon t" "s s s" "x x x" "parts parts parts" "say say say";
  column-gap:10px;row-gap:4px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);scroll-margin-top:12px}
.ld-date{grid-area:date;font-size:18px;line-height:24px;font-weight:700}
.ld-date small{display:block;font-size:14px;line-height:20px;color:var(--graphite);font-weight:400}
.ld .wi{grid-area:icon;width:48px;height:48px}
.ld-t{grid-area:t;margin:0;text-align:right;font-size:24px;line-height:32px}
.ld-t b{font-weight:800}
.ld-t span{font-size:18px;color:var(--graphite);font-weight:600}
.ld-s{grid-area:s;margin:0;font-size:15px;color:var(--graphite)}
.ld-x{grid-area:x;margin:0;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:14px;color:var(--graphite);white-space:nowrap;align-items:center}
.ld-x .rain{color:var(--blue);font-weight:700}
.ld-x span{display:inline-flex;align-items:center;gap:3px}
.ld-parts{grid-area:parts;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line)}
.ld-parts li{display:flex;flex-direction:column;align-items:center;font-size:13px;color:var(--graphite)}
.ld-parts .wi{width:28px;height:28px}
.ld-parts b{color:var(--ink);font-size:15px;font-weight:800}
.ld-say{grid-area:say;margin:10px 0 0;font-size:15px;line-height:24px;color:var(--ink)}
.ld-gfs .ld-date::after{content:" *";color:var(--graphite)}
@media (min-width:860px){
  .ld{grid-template-columns:170px 52px minmax(0,1fr) auto auto 300px;grid-template-areas:"date icon s x t parts" "say say say say say say";column-gap:14px;padding:14px 8px}
  .ld-parts{border-top:0;margin:0;padding:0}
}

/* ---------- home: Baku in a blue tile, and the map */
.duo{display:grid;gap:16px;margin-top:24px}
@media (min-width:960px){.duo{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:stretch}}
.blue-tile{background:#1878ec;color:#fff;border-radius:32px;padding:24px;display:flex;flex-direction:column}
.blue-tile a{color:#fff}
.bt-when{margin:0;font-size:16px;font-weight:600}
.bt-when a{font-weight:800}
.bt-now{display:flex;align-items:center;gap:8px;margin:14px 0 4px}
.bt-now .wi{width:72px;height:72px}
.bt-t{font-size:80px;line-height:1;font-weight:400;letter-spacing:-.05em}
.bt-say{margin:0;font-size:18px;font-weight:700}
.bt-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.35)}
.bt-facts dt{font-size:14px;opacity:.85}
.bt-facts dd{margin:2px 0 0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bt-facts .arr{fill:#fff}
.bt-hours{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.35);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;text-align:center}
.bt-hours li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px}
.bt-hours span{opacity:.85}
.bt-hours .wi{width:32px;height:32px}
.bt-hours b{font-size:16px;font-weight:800}
.bt-links{margin:auto 0 0;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700}
.bt-links a{text-decoration:underline;text-underline-offset:3px}
.mapcard{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--bg)}
.mapcard-wide{margin-top:24px}
.map{position:relative;aspect-ratio:1000/802;border-radius:12px;overflow:hidden;background:var(--map-sea)}
.map-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map-bg-dark,[data-theme=dark] .map-bg-light{display:none}
[data-theme=dark] .map-bg-dark{display:block}
/* a pin: a small label (weather, temperature, name) and a dot at the place itself. The label sits above the dot
   unless the pin says otherwise (pin-b below, pin-l / pin-r beside, pin-tr / pin-tl above and to one side).
   site.js then moves any label that would cover another one, at whatever size the map is shown. */
.pin{position:absolute;width:max-content;transform:translate(-50%,calc(-100% - 6px));display:flex;flex-direction:column;padding:1px 6px 2px 3px;border-radius:7px;background:var(--bg);border:1px solid var(--line);color:var(--ink);line-height:1.15}
.pin::after{content:"";position:absolute;left:50%;top:calc(100% + 2.5px);width:6px;height:6px;margin-left:-4.5px;border-radius:50%;background:var(--ink);border:1.5px solid var(--bg)}
.pin-b{transform:translate(-50%,6px)}
.pin-b::after{top:auto;bottom:calc(100% + 2.5px)}
.pin-l{transform:translate(calc(-100% - 6px),-50%)}
.pin-l::after{left:calc(100% + 2.5px);top:50%;margin:-4.5px 0 0}
.pin-r{transform:translate(6px,-50%)}
.pin-r::after{left:auto;right:calc(100% + 2.5px);top:50%;margin:-4.5px 0 0}
.pin-tr{transform:translate(-14px,calc(-100% - 6px))}
.pin-tr::after{left:8.5px;margin-left:0}
.pin-tl{transform:translate(calc(-100% + 14px),calc(-100% - 6px))}
.pin-tl::after{left:auto;right:8.5px;margin-left:0}
.pin-off{visibility:hidden}
.pin:hover{text-decoration:none;z-index:2;border-color:var(--ink)}
.pin-w{display:flex;align-items:center;gap:2px}
.pin-w .wi{width:18px;height:18px}
.pin-w b{font-size:13px;font-weight:800}
.pin-n{font-size:10.5px;font-weight:700;color:var(--graphite);white-space:nowrap;padding-left:3px}
.pin-2{display:none}
@media (min-width:640px){.pin-2{display:flex}.pin{padding:3px 9px 4px 5px;border-radius:8px}.pin-w .wi{width:24px;height:24px}.pin-w b{font-size:15px}.pin-n{font-size:12px}}

/* ---------- tomorrow for the whole country */
.ntable{border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:minmax(0,1fr) 36px 52px 84px;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.nrow:hover{background:var(--cloud);text-decoration:none}
.nrow-name{font-weight:700}
.nrow .wi{width:36px;height:36px}
.nrow-s{display:none;color:var(--graphite);font-size:15px}
.nrow-p{font-size:13px;font-weight:700;color:var(--blue);text-align:right}
.nrow-t{text-align:right;color:var(--graphite);font-weight:600}
.nrow-t b{color:var(--ink);font-weight:800;margin-right:6px}
@media (min-width:700px){.nrow{grid-template-columns:minmax(0,200px) 40px minmax(0,1fr) 70px 100px}.nrow-s{display:block}}

/* ---------- wind page */
.wbars{display:flex;list-style:none;margin:0;padding:0;height:190px}
.wb{position:relative;flex:0 0 30px;width:30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding-top:18px}
.wb-day{box-shadow:inset 1px 0 0 var(--line)}
.wb-d{position:absolute;top:0;left:4px;font-size:12px;font-weight:700;color:var(--graphite)}
.wb-v{font-size:11px;font-weight:700;color:var(--graphite)}
.wb-bar{width:14px;border-radius:6px 6px 2px 2px;background:var(--holder);min-height:2px}
.wb-k .wb-bar{background:var(--blue)}
.wb-g .wb-bar{background:var(--warm)}
.wb .arr{color:var(--graphite)}
.wb-t{font-size:11px;color:var(--graphite);height:14px}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 2px;vertical-align:-1px}
.lg-k{background:var(--blue)}
.lg-g{background:var(--warm);margin-left:12px}
.wdays{border-top:1px solid var(--line)}
.wd-row{display:grid;grid-template-columns:90px minmax(0,1fr) auto 80px;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.wd-dir{display:flex;align-items:center;gap:6px;color:var(--graphite);font-size:15px}
.wd-v{font-weight:800;text-align:right;white-space:nowrap}
.wd-n{text-align:right}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:2px 10px;border-radius:1000px;border:1px solid currentColor}
.tag-k{color:var(--blue)}
.tag-g{color:var(--warm)}

/* ---------- 30 days: the typical days after the forecast */
.note-top{margin:-4px 0 14px}
.chance{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:700;color:var(--blue)}
.chance svg{width:12px;height:12px}
.day-typical:hover{background:none}

/* ---------- climate: 12 months, and the country table */
.mtable{border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(60px,1.6fr) 40px;align-items:center;gap:8px;padding:10px 4px;
  border-bottom:1px solid var(--line);color:var(--ink)}
a.mrow:hover{background:var(--cloud);text-decoration:none}
.mhead{font-size:13px;line-height:18px;color:var(--graphite);padding-bottom:8px}
/* the two temperature headings are wider than their columns on phones: they wrap and grow to the left, never past the edge */
.mhead span:nth-child(2),.mhead span:nth-child(4){display:flex;justify-content:flex-end;text-align:right}
.mname{font-weight:700}
.mx,.mx2{display:none;text-align:right;color:var(--graphite);font-size:14px}
.mrow-now{background:var(--cloud)}
@media (min-width:700px){.mrow{grid-template-columns:150px 54px minmax(120px,1fr) 54px 96px 90px 96px;padding:11px 8px}.mx,.mx2{display:block}}
.ctable-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
.ctable{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.ctable th,.ctable td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.ctable th:first-child{text-align:left}
.ctable thead th{font-weight:700;font-size:13px}
.ctable thead a{color:var(--ink)}
.ctable td a{color:var(--ink)}
.ctable td b{font-weight:800}
.ctable td span{color:var(--graphite)}
.ctable tbody tr:hover{background:var(--cloud)}
.facts-months{margin-top:20px}
.now-month .now-t{font-size:64px}
@media (min-width:701px){.now-month .now-t{font-size:84px}}
.nrow-c{grid-template-columns:minmax(0,1fr) 72px 90px}
/* rain and snow pages: place, icon, part of the day, amount */
.nrow-w{grid-template-columns:minmax(0,1fr) 32px minmax(0,1.15fr) 62px}
.nrow-w .wi{width:32px;height:32px}
.nrow-w .nrow-s{display:block;font-size:14px;line-height:18px}
.nrow-f{grid-template-columns:minmax(0,1fr) 70px}
.rows-more>summary{padding:11px 4px;font-weight:600;color:var(--blue);cursor:pointer;list-style:none;border-bottom:1px solid var(--line)}
.rows-more>summary::-webkit-details-marker{display:none}
.rows-more[open]>summary{display:none}
.pin-dry .pin-n{padding-left:0}
@media (min-width:700px){.nrow-w{grid-template-columns:minmax(0,220px) 40px minmax(0,1fr) 90px}}
@media (min-width:700px){.nrow-c{grid-template-columns:minmax(0,220px) minmax(0,1fr) 80px 110px}}
.chips a b{font-weight:800;margin-left:4px}

/* ---------- hourly page: every hour in a row (two lines on phones, one table row from 1200 px) */
.htable{border-top:1px solid var(--line)}
.hrow{display:grid;grid-template-columns:44px 36px 48px minmax(0,1fr) auto;grid-template-areas:"time icon temp say rain" "time icon meta meta meta";align-items:center;column-gap:8px;padding:8px 4px;border-bottom:1px solid var(--line)}
.h-time{grid-area:time;font-weight:700;color:var(--graphite);font-size:15px}
.hrow .wi{grid-area:icon;width:36px;height:36px}
.h-temp{grid-area:temp;font-weight:800;font-size:18px}
.h-say{grid-area:say;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-rain{grid-area:rain;display:flex;align-items:center;gap:3px;justify-content:flex-end;font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap}
.h-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;line-height:18px;color:var(--graphite)}
.h-meta span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.h-feels i{font-style:normal}
.hhead{display:none}
@media (min-width:1200px){
  .hrow{grid-template-columns:52px 40px 52px minmax(0,1fr) 72px 104px 96px 60px 108px;grid-template-areas:none;column-gap:10px;padding:8px}
  .hrow .wi,.h-time,.h-temp,.h-say,.h-rain{grid-area:auto}
  .h-meta{display:contents}
  .h-meta span{font-size:14px;line-height:20px;color:var(--graphite);justify-content:flex-end}
  .h-feels i{display:none}
  .hhead{display:grid;font-size:13px;line-height:18px;color:var(--graphite);padding-bottom:6px}
  .hhead span{text-align:right;font-size:13px}
  .hhead>span:first-child,.hhead>span:nth-child(3){text-align:left}
}

/* ---------- weekend: one block per day */
.wk-top{display:flex;align-items:center;gap:12px}
.wk-top .wi{width:56px;height:56px;flex:none}
.wk-t{margin:0;font-size:30px;line-height:36px;white-space:nowrap}
.wk-t b{font-weight:800}
.wk-t span{font-size:20px;color:var(--graphite);font-weight:600}
.wk-s{margin:0;display:flex;flex-direction:column;font-size:14px;line-height:20px;color:var(--graphite);min-width:0}
.wk-s b{color:var(--ink);font-size:16px;line-height:22px}
.wk-s>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.wk-s .rain{color:var(--blue);font-weight:700}
.wk-text{margin-top:14px}

/* ---------- a region: its places, now and tomorrow */
.rtable{border-top:1px solid var(--line)}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) 84px 104px;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
a.rrow:hover{background:var(--cloud);text-decoration:none}
.rhead{font-size:13px;line-height:18px;color:var(--graphite);padding-bottom:6px}
.rhead span{text-align:right}
.r-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-now,.r-tom{display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.rrow .wi{width:32px;height:32px}
.r-now b,.r-tom b{font-weight:800}
.r-tom i{font-style:normal;color:var(--graphite);font-weight:600;margin-left:2px}
.r-day{display:none;text-align:right;color:var(--graphite);font-weight:600;white-space:nowrap}
@media (min-width:700px){.rrow{grid-template-columns:minmax(0,1fr) 110px 130px 140px;gap:12px;padding:9px 8px}.r-day{display:block}}

/* ---------- text pages */
.prose{font-size:17px;line-height:28px}
.prose h2{font-size:20px;line-height:28px;margin:28px 0 8px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}

/* ---------- ads: space is kept before the ad loads (nothing jumps); empty slots fold away */
.ad-slot{margin:40px 0 0;min-height:280px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.ad-label{display:block;font-size:12px;color:var(--graphite);text-align:center;margin-bottom:6px;letter-spacing:.04em}
.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}
@media (min-width:768px){.ad-slot{min-height:110px}}
/* the side column's two slots exist only where the side column does */
.ad-slot-side,.ad-slot-side2{display:none}
@media (min-width:1000px){
  .ad-slot-side,.ad-slot-side2{display:flex;margin:0 0 28px;min-height:250px}
  .ad-slot-side2{margin:28px 0 0;min-height:600px;position:sticky;top:16px}
}
/* AD_PREVIEW=1 (local): a dashed box wherever a slot would be. Named so that ad blockers leave them visible. */
.pv-slot{margin:40px auto 0;width:100%;max-width:336px;height:280px;border:1.5px dashed var(--holder);border-radius:12px;display:grid;place-items:center;color:var(--graphite);font-size:13px;font-weight:700;background:var(--cloud)}
.pv-side,.pv-side2{display:none}
@media (min-width:1000px){
  .pv-slot{max-width:728px;height:90px}
  .pv-side,.pv-side2{display:grid;max-width:300px;height:250px;margin:0 auto 28px}
  .pv-side2{height:600px;margin:28px auto 0;position:sticky;top:16px}
}

/* ---------- footer: a muted band with the place directory */
.foot{margin-top:64px;padding:44px 0 calc(32px + env(safe-area-inset-bottom));background:var(--mist)}
.dir-block h2{font-size:20px;line-height:28px;font-weight:700;margin:0 0 14px}
.dir{list-style:none;margin:0 0 32px;padding:0;columns:2;column-gap:24px}
.dir li{margin:0 0 8px;break-inside:avoid}
.dir a{font-size:14px;line-height:20px}
@media (min-width:700px){.dir{columns:4}}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:24px;border-top:1px solid var(--line)}
.logo-sm{font-size:18px;height:auto}
.logo-sm .logo-mark{width:24px;height:24px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-links a{color:var(--graphite);font-size:14px}
.copy{color:var(--graphite);font-size:14px;margin:0}
@media (min-width:860px){.copy{margin-left:auto}}