.hepo-weather {
  --hepo-red: #bd1018;
  --hepo-ink: #15171a;
  --hepo-muted: #646a73;
  --hepo-line: #e2e4e8;
  --hepo-soft: #f5f6f7;
  color: var(--hepo-ink);
  container-type: inline-size;
  font-variant-numeric: tabular-nums;
}

.hepo-weather h1,
.hepo-weather h2 { letter-spacing: -.025em; margin: 0 0 1rem; font-size: clamp(1.35rem, 4vw, 1.85rem); }
.hepo-weather > section { margin: 2rem 0; }
.hepo-weather figcaption { color: var(--hepo-muted); font-size: .82rem; }
.hepo-weather__sources { color: var(--hepo-muted); }
.hepo-weather__sources small { display: block; font-size: .75rem; line-height: 1.5; }
.hepo-weather__notice { background: #fff5db; border-left: 4px solid #c97900; padding: .8rem 1rem; }
.hepo-weather__opening { display: grid; gap: 2rem; }
.hepo-weather__opening > section { margin: 0; min-width: 0; }

.hepo-weather__current {
  background-color: #172a43;
  background-position: center;
  background-size: cover;
  border-radius: 14px;
  color: #fff;
  display: grid;
  gap: 1.5rem;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 5vw, 2.2rem);
  position: relative;
}
.hepo-weather-scene--day { background-color: #3f8fbe; background-image: url("weather-scenes/sky-day.webp"); }
.hepo-weather-scene--night { background-color: #203b5b; background-image: url("weather-scenes/sky-night.webp"); }
.hepo-weather-scene--dawn,
.hepo-weather-scene--dusk { background-image: url("weather-scenes/sky-twilight.webp"); }
.hepo-weather-scene--dawn { background-position: 70% center; }
.hepo-weather-scene--dusk { background-position: 52% center; }
.hepo-weather__current::after {
  background:
    linear-gradient(90deg, rgb(5 14 28 / 78%) 0%, rgb(8 19 34 / 53%) 48%, rgb(8 19 34 / 28%) 100%),
    linear-gradient(0deg, rgb(2 9 18 / 38%), transparent 62%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.hepo-weather-scene--day::after {
  background:
    linear-gradient(90deg, rgb(5 14 28 / 70%) 0%, rgb(8 19 34 / 45%) 48%, rgb(8 19 34 / 22%) 100%),
    linear-gradient(0deg, rgb(2 9 18 / 32%), transparent 62%);
}
.hepo-weather-scene--night::after {
  background:
    linear-gradient(90deg, rgb(5 14 28 / 72%) 0%, rgb(8 19 34 / 48%) 48%, rgb(8 19 34 / 24%) 100%),
    linear-gradient(0deg, rgb(2 9 18 / 34%), transparent 62%);
}
.hepo-weather__current > :not(.hepo-weather-scene__visual) {
  position: relative;
  text-shadow: 0 1px 8px rgb(0 0 0 / 38%);
  z-index: 2;
}
.hepo-weather-scene__visual,
.hepo-weather-scene__visual > i {
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.hepo-weather-scene__visual { overflow: hidden; z-index: 0; }
.hepo-weather-scene__celestial {
  aspect-ratio: 1;
  inset: -12% 2% auto auto !important;
  opacity: 0;
  width: clamp(8rem, 23%, 12rem);
}
.hepo-weather-scene--day.hepo-weather-scene--none .hepo-weather-scene__celestial,
.hepo-weather-scene--dawn.hepo-weather-scene--none .hepo-weather-scene__celestial,
.hepo-weather-scene--dusk.hepo-weather-scene--none .hepo-weather-scene__celestial {
  background: radial-gradient(circle, #fffbd4 0 9%, rgb(255 229 141 / 88%) 10% 18%, rgb(255 199 86 / 30%) 28%, transparent 68%);
  opacity: .86;
}
.hepo-weather-scene--dawn .hepo-weather-scene__celestial,
.hepo-weather-scene--dusk .hepo-weather-scene__celestial {
  inset: auto -4% -28% auto !important;
  width: clamp(12rem, 32%, 18rem);
}
.hepo-weather-scene--night.hepo-weather-scene--none .hepo-weather-scene__celestial {
  background: url("weather-scenes/moon-full.webp") center / contain no-repeat;
  filter: brightness(1.28) drop-shadow(0 0 13px rgb(196 220 255 / 42%));
  inset: -9% auto auto 29% !important;
  isolation: isolate;
  opacity: .9;
  overflow: hidden;
  border-radius: 50%;
  width: clamp(7rem, 19%, 10rem);
}
.hepo-weather-scene--night.hepo-weather-scene--none .hepo-weather-scene__celestial::after {
  background: rgb(3 8 19 / 96%);
  border-radius: 50%;
  content: "";
  inset: 2.1%;
  position: absolute;
}
.hepo-weather-scene--moon-new .hepo-weather-scene__celestial::after { opacity: .98; }
.hepo-weather-scene--moon-waxing-crescent .hepo-weather-scene__celestial::after { transform: translateX(-13%); }
.hepo-weather-scene--night.hepo-weather-scene--none.hepo-weather-scene--moon-first-quarter .hepo-weather-scene__celestial::after {
  background: linear-gradient(90deg, rgb(3 8 19 / 96%) 0 50%, transparent 50% 100%);
}
.hepo-weather-scene--moon-waxing-gibbous .hepo-weather-scene__celestial::after { transform: translateX(-62%); }
.hepo-weather-scene--moon-full .hepo-weather-scene__celestial::after { opacity: 0; }
.hepo-weather-scene--moon-waning-gibbous .hepo-weather-scene__celestial::after { transform: translateX(62%); }
.hepo-weather-scene--night.hepo-weather-scene--none.hepo-weather-scene--moon-last-quarter .hepo-weather-scene__celestial::after {
  background: linear-gradient(90deg, transparent 0 50%, rgb(3 8 19 / 96%) 50% 100%);
}
.hepo-weather-scene--moon-waning-crescent .hepo-weather-scene__celestial::after { transform: translateX(13%); }
.hepo-weather-scene--clouds-1 .hepo-weather-scene__celestial { opacity: .68; }
.hepo-weather-scene--night.hepo-weather-scene--none.hepo-weather-scene--clouds-1 .hepo-weather-scene__celestial { opacity: .82; }
.hepo-weather-scene--clouds-2 .hepo-weather-scene__celestial { opacity: .38; }
.hepo-weather-scene--clouds-3 .hepo-weather-scene__celestial,
.hepo-weather-scene--fog .hepo-weather-scene__celestial,
.hepo-weather-scene--rain .hepo-weather-scene__celestial,
.hepo-weather-scene--drizzle .hepo-weather-scene__celestial,
.hepo-weather-scene--snow .hepo-weather-scene__celestial,
.hepo-weather-scene--thunder .hepo-weather-scene__celestial { opacity: 0; }
.hepo-weather-scene__clouds {
  background-position: 72% 0;
  background-repeat: no-repeat;
  background-size: 122% auto;
  opacity: 0;
  transform: scale(1.05) translate3d(0, -8%, 0);
}
.hepo-weather-scene--clouds-1 .hepo-weather-scene__clouds { background-image: url("weather-scenes/clouds-cirrus.webp"); opacity: .38; }
.hepo-weather-scene--clouds-2 .hepo-weather-scene__clouds { background-image: url("weather-scenes/clouds-light.webp"); opacity: .62; }
.hepo-weather-scene--clouds-3 .hepo-weather-scene__clouds { background-image: url("weather-scenes/clouds-overcast.webp"); opacity: .9; }
.hepo-weather-scene--clouds-3.hepo-weather-scene--none .hepo-weather-scene__visual { background: rgb(48 58 71 / 68%); }
.hepo-weather-scene--clouds-3.hepo-weather-scene--none .hepo-weather-scene__clouds { filter: saturate(.45) brightness(.86); }
.hepo-weather-scene--rain .hepo-weather-scene__clouds,
.hepo-weather-scene--drizzle .hepo-weather-scene__clouds,
.hepo-weather-scene--snow .hepo-weather-scene__clouds,
.hepo-weather-scene--thunder .hepo-weather-scene__clouds {
  background-image: url("weather-scenes/clouds-storm.webp");
}
.hepo-weather-scene--night .hepo-weather-scene__clouds { filter: brightness(.68) saturate(.72); }
.hepo-weather-scene--clouds-1 .hepo-weather-scene__clouds,
.hepo-weather-scene--clouds-2 .hepo-weather-scene__clouds,
.hepo-weather-scene--clouds-3 .hepo-weather-scene__clouds { animation: hepo-cloud-drift 34s ease-in-out infinite alternate; }
.hepo-weather-scene__fog {
  background:
    radial-gradient(ellipse at 20% 54%, rgb(225 235 240 / 50%), transparent 48%),
    radial-gradient(ellipse at 82% 35%, rgb(215 226 233 / 52%), transparent 55%),
    linear-gradient(0deg, rgb(210 222 228 / 56%), transparent 72%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(1.12);
}
.hepo-weather-scene--fog .hepo-weather-scene__fog { animation: hepo-fog-drift 16s ease-in-out infinite alternate; opacity: .82; }
.hepo-weather-scene__precipitation { opacity: 0; }
.hepo-weather-scene--rain .hepo-weather-scene__precipitation,
.hepo-weather-scene--drizzle .hepo-weather-scene__precipitation,
.hepo-weather-scene--thunder .hepo-weather-scene__precipitation {
  animation: hepo-rain-fall .72s linear infinite;
  background-image:
    linear-gradient(168deg, transparent 0 45%, rgb(218 239 255 / 78%) 47% 50%, transparent 52% 100%),
    linear-gradient(168deg, transparent 0 45%, rgb(170 215 245 / 58%) 47% 50%, transparent 52% 100%);
  background-position: 0 0, 11px 24px;
  background-size: 25px 68px, 31px 82px;
  inset: 24% -8% -20% 18%;
  opacity: .48;
  transform: rotate(1deg);
}
.hepo-weather-scene--drizzle .hepo-weather-scene__precipitation { animation-duration: 1.15s; opacity: .28; }
.hepo-weather-scene--medium .hepo-weather-scene__precipitation { opacity: .62; }
.hepo-weather-scene--heavy .hepo-weather-scene__precipitation { animation-duration: .48s; opacity: .82; }
.hepo-weather-scene--showers .hepo-weather-scene__precipitation { left: 42%; mask-image: linear-gradient(90deg, transparent, #000 30% 78%, transparent); }
.hepo-weather-scene--freezing .hepo-weather-scene__precipitation { filter: brightness(1.2) drop-shadow(0 0 4px rgb(190 238 255 / 72%)); }
.hepo-weather-scene--snow .hepo-weather-scene__precipitation {
  animation: hepo-snow-fall 7.5s linear infinite;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 92%) 0 2px, transparent 2.8px),
    radial-gradient(circle, rgb(234 245 255 / 78%) 0 3px, transparent 3.8px),
    radial-gradient(circle, rgb(255 255 255 / 72%) 0 1.5px, transparent 2.2px);
  background-position: 0 0, 28px 35px, 54px 12px;
  background-size: 68px 72px, 91px 96px, 53px 59px;
  inset: 18% -8% -20% 10%;
  opacity: .58;
}
.hepo-weather-scene--snow.hepo-weather-scene--heavy .hepo-weather-scene__precipitation { animation-duration: 4.8s; opacity: .9; }
.hepo-weather-scene__hail { opacity: 0; }
.hepo-weather-scene--hail .hepo-weather-scene__hail {
  animation: hepo-hail-fall 1.05s linear infinite;
  background-image:
    radial-gradient(circle, rgb(246 252 255 / 96%) 0 3px, rgb(178 214 236 / 75%) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle, rgb(255 255 255 / 88%) 0 2px, transparent 3px);
  background-position: 0 0, 33px 24px;
  background-size: 62px 70px, 49px 58px;
  filter: drop-shadow(0 1px 2px rgb(21 46 70 / 65%));
  inset: 25% -5% -18% 32%;
  opacity: .82;
}
.hepo-weather-scene__lightning {
  background: linear-gradient(112deg, transparent 0 59%, rgb(239 247 255 / 95%) 60% 61%, transparent 62% 100%);
  filter: drop-shadow(0 0 12px #bddeff);
  inset: 6% 4% 28% 55% !important;
  opacity: 0;
}
.hepo-weather-scene--thunder .hepo-weather-scene__lightning { animation: hepo-lightning 6.2s steps(1, end) infinite; }
.hepo-weather-scene__wind { opacity: 0; }
.hepo-weather-scene--windy .hepo-weather-scene__wind {
  animation: hepo-wind-stream 4.6s linear infinite;
  background: repeating-linear-gradient(172deg, transparent 0 31px, rgb(230 244 255 / 34%) 32px 34px, transparent 35px 66px);
  filter: blur(.25px);
  inset: 12% -25% 7% 18%;
  mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 76%);
  opacity: .52;
}
.hepo-weather-scene__leaves { display: none; }
.hepo-weather-scene--windy .hepo-weather-scene__leaves { display: block; }
.hepo-weather-scene__leaves span {
  animation: hepo-leaf-flight 6.8s linear infinite;
  background: linear-gradient(135deg, #dfb348, #8d5122);
  border-radius: 90% 10% 80% 20%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
  height: 9px;
  left: -8%;
  opacity: .72;
  position: absolute;
  top: 28%;
  width: 15px;
}
.hepo-weather-scene__leaves span:nth-child(2) { animation-delay: -1.6s; animation-duration: 5.8s; top: 58%; transform: scale(.75); }
.hepo-weather-scene__leaves span:nth-child(3) { animation-delay: -3.2s; animation-duration: 7.6s; top: 76%; transform: scale(.6); }
.hepo-weather-scene__leaves span:nth-child(4) { animation-delay: -4.8s; animation-duration: 6.4s; top: 43%; transform: scale(.9); }
.hepo-weather-scene__leaves span:nth-child(5) { animation-delay: -5.7s; animation-duration: 8.1s; top: 16%; transform: scale(.55); }
@keyframes hepo-cloud-drift { from { transform: scale(1.05) translate3d(-1.8%, -8%, 0); } to { transform: scale(1.08) translate3d(2.2%, -6%, 0); } }
@keyframes hepo-fog-drift { from { transform: scale(1.12) translateX(-2%); } to { transform: scale(1.16) translateX(3%); } }
@keyframes hepo-rain-fall { to { background-position: -12px 68px, -7px 106px; } }
@keyframes hepo-snow-fall { to { background-position: 24px 144px, -18px 192px, 15px 118px; } }
@keyframes hepo-hail-fall { to { background-position: -8px 140px, 44px 140px; } }
@keyframes hepo-lightning { 0%, 8%, 11%, 100% { opacity: 0; } 9% { opacity: .8; } 10% { opacity: .16; } }
@keyframes hepo-wind-stream { from { translate: -6% 0; } to { translate: 18% 0; } }
@keyframes hepo-leaf-flight { from { translate: -10% 0; rotate: 0deg; } 48% { translate: 55vw 35px; rotate: 250deg; } to { translate: 110vw -18px; rotate: 540deg; } }
.hepo-weather .hepo-weather__current h1,
.hepo-weather .hepo-weather__temperature,
.hepo-weather .hepo-weather__condition,
.hepo-weather .hepo-weather__facts dd { color: #fff !important; }
.hepo-weather .hepo-weather__temperature {
  font-size: clamp(4rem, 18vw, 7.5rem) !important;
  font-weight: 800;
  line-height: .85 !important;
  margin: 1rem 0 !important;
}
.hepo-weather .hepo-weather__temperature small {
  color: #cbd0d8 !important;
  display: inline-block;
  font-size: clamp(.78rem, 2.3vw, 1rem);
  font-weight: 500;
  line-height: 1.2;
}
.hepo-weather__condition { align-items: center; display: flex; flex-wrap: wrap; font-size: 1.15rem; gap: .3rem; margin: 0; }
.hepo-weather .hepo-weather__condition > span,
.hepo-weather .hepo-weather__facts dt { color: #cbd0d8 !important; }
.hepo-weather__condition > span { font-size: .75rem; }
.hepo-weather__facts { display: grid; gap: .7rem; margin: 0; }
.hepo-weather__facts div { border-bottom: 1px solid #59616d; display: flex; gap: 1rem; justify-content: space-between; padding-bottom: .5rem; }
.hepo-weather__facts dt { align-items: center; color: #cbd0d8; display: inline-flex; gap: .35rem; }
.hepo-weather__facts dd { font-weight: 700; margin: 0; text-align: right; }
.hepo-weather .hepo-weather__facts dd small { color: #cbd0d8 !important; font-size: .72rem; font-weight: 400; white-space: nowrap; }
.hepo-weather__info { align-items: center; appearance: none; align-self: center; background: transparent !important; border: 1px solid currentColor !important; border-radius: 50% !important; box-shadow: none !important; box-sizing: border-box !important; color: #fff !important; cursor: help; display: inline-flex; flex: 0 0 1rem; font-family: Arial, sans-serif !important; font-size: .62rem !important; font-style: normal; font-weight: 800 !important; height: 1rem !important; justify-content: center; line-height: 1 !important; margin: 0 !important; min-height: 1rem !important; min-width: 1rem !important; outline-offset: 3px; padding: 0 !important; position: relative; text-shadow: none; text-transform: none !important; vertical-align: middle; width: 1rem !important; }
.hepo-weather__info:hover,
.hepo-weather__info:focus { background: #fff !important; color: #17201d !important; }
.hepo-weather__info [role="tooltip"] { background: #fff; border-radius: 7px; color: #17201d !important; font-family: inherit; font-size: .75rem !important; font-weight: 500; left: 50%; line-height: 1.4; opacity: 0; padding: .6rem .7rem; pointer-events: none; position: absolute; text-align: left; text-transform: none !important; text-shadow: none; top: calc(100% + .5rem); transform: translate(-50%, -.2rem); transition: opacity .15s, transform .15s; visibility: hidden; white-space: normal; width: min(15.5rem, 60vw); z-index: 24; }
.hepo-weather__info:hover [role="tooltip"],
.hepo-weather__info:focus [role="tooltip"] { opacity: 1; transform: translate(-50%, 0); visibility: visible; }

.hepo-weather__today { border-bottom: 0; padding-bottom: 0; }
.hepo-weather__extremes { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hepo-weather__extremes .hepo-weather-extreme {
  background:
    linear-gradient(145deg, rgb(var(--hepo-extreme-rgb) / 58%) 0%, rgb(var(--hepo-extreme-rgb) / 34%) 58%, rgb(var(--hepo-extreme-rgb) / 15%) 100%),
    #fff;
  border: 1px solid rgb(var(--hepo-extreme-rgb) / 42%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
}
.hepo-weather-extreme__label { color: #34473f; }
.hepo-weather__extremes strong { align-items: baseline; color: #17201d; display: flex; flex-wrap: wrap; font-size: 1.7rem; gap: .15rem .4rem; }
.hepo-weather__extremes strong .hepo-weather-extreme__time { color: #34473f; font-size: .7rem; font-weight: 500; }

.hepo-weather__sun {
  background:
    linear-gradient(145deg, rgb(234 248 255 / 26%) 0%, rgb(255 255 255 / 38%) 58%, rgb(255 248 220 / 24%) 100%),
    url("weather-scenes/sun-horizon-deep-blue.webp") center bottom / cover no-repeat;
  border: 1px solid rgb(77 139 174 / 22%);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(30 86 119 / 8%);
  padding: clamp(1rem, 3.5vw, 1.5rem);
}
.hepo-weather .hepo-weather__sun > h2 { color: #fff !important; }
.hepo-weather-sun__summary { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hepo-weather-sun__event {
  align-items: center;
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgb(120 128 138 / 17%);
  border-radius: 10px;
  display: grid;
  gap: .75rem;
  grid-template-columns: 3.2rem 1fr;
  padding: .85rem;
}
.hepo-weather-sun__event > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hepo-weather-sun__event small { color: var(--hepo-muted); }
.hepo-weather-sun__event strong { font-size: clamp(1.45rem, 4vw, 1.9rem); line-height: 1.15; }
.hepo-weather-sun__event em { color: var(--hepo-muted); font-size: .78rem; font-style: normal; margin-top: .2rem; }
.hepo-weather-sun__icon {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(to bottom, transparent 53%, rgb(32 78 112 / 20%) 54% 59%, transparent 60%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hepo-weather-sun__icon::before {
  background: #f5ae22;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(245 174 34 / 18%);
  content: "";
  height: 1.2rem;
  transform: translateY(.56rem);
  width: 1.2rem;
}
.hepo-weather-sun__event--set .hepo-weather-sun__icon::before { background: #e25a2b; box-shadow: 0 0 0 4px rgb(226 90 43 / 17%); transform: translateY(-.56rem); }
.hepo-weather-sun__icon i { background: #d49110; height: 1px; position: absolute; top: 50%; width: 2.9rem; }
.hepo-weather-sun__event--set .hepo-weather-sun__icon i { background: #c64b25; }
.hepo-weather-sun__figure { background: rgb(255 255 255 / 52%); border-radius: 10px; margin: 1.15rem 0 0; padding: .85rem; }
.hepo-weather-sun__figure figcaption { color: var(--hepo-ink); font-size: .95rem; font-weight: 700; }
.hepo-weather-sun__legend { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: .35rem 0 .2rem; }
.hepo-weather-sun__legend span { align-items: center; color: var(--hepo-muted); display: inline-flex; font-size: .75rem; gap: .35rem; }
.hepo-weather-sun__legend span::before { background: currentColor; content: ""; height: 3px; width: 1.3rem; }
.hepo-weather-sun__legend-rise { color: #d98b00 !important; }
.hepo-weather-sun__legend-set { color: var(--hepo-red) !important; }
.hepo-weather-sun__legend-today { color: #316e9f !important; }
.hepo-weather-sun__legend-today::before { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }
.hepo-weather-sun__chart { display: block; height: auto; overflow: visible; width: 100%; }
.hepo-weather-sun__grid line { stroke: #bac2cb; stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hepo-weather-sun__grid text,
.hepo-weather-sun__months text { fill: var(--hepo-muted); font-size: 12px; }
.hepo-weather-sun__daylight { fill: #f8c548; fill-opacity: .19; stroke: none; }
.hepo-weather-sun__rise-line,
.hepo-weather-sun__set-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.hepo-weather-sun__rise-line { stroke: #d98b00; }
.hepo-weather-sun__set-line { stroke: var(--hepo-red); }
.hepo-weather-sun__today-line { stroke: #316e9f; stroke-dasharray: 5 4; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hepo-weather-sun__today-rise { fill: #d98b00; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.hepo-weather-sun__today-set { fill: var(--hepo-red); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.hepo-weather-sun__today-label { fill: #24577f; font-size: 12px; font-weight: 700; }

.hepo-weather__warnings { background: #fff0f1; border: 2px solid var(--hepo-red); border-radius: 12px; padding: 1rem; }
.hepo-weather__warnings article { display: grid; gap: .2rem; padding: .7rem 0; }
.hepo-weather__warnings article + article { border-top: 1px solid #e8b6b9; }
.hepo-weather__warnings a { color: var(--hepo-red); font-weight: 750; }

.hepo-weather__environment { background: linear-gradient(145deg, #cfe9d7 0%, #c3dfce 58%, #d5eadc 100%); border: 1px solid #9fc5ad; border-radius: 14px; padding: clamp(1rem, 3vw, 1.5rem); }
.hepo-weather-environment__grid { display: grid; gap: .8rem; }
.hepo-weather-environment__card { background: rgb(255 255 255 / 82%); border: 1px solid #bdd4c5; border-radius: 11px; box-shadow: 0 5px 18px rgb(25 84 54 / 9%); min-width: 0; padding: 1rem; }
.hepo-weather-environment__eyebrow { align-items: center; color: #436057; display: flex; font-size: .75rem; font-weight: 800; gap: .45rem; letter-spacing: .055em; margin: 0 0 .45rem; text-transform: uppercase; }
.hepo-weather-environment__lead { color: #182620; display: block; font-size: clamp(1.7rem, 6vw, 2.25rem); line-height: 1.05; }
.hepo-weather-environment__lead small { color: #53665f; font-size: .75rem; font-weight: 700; }
.hepo-weather-environment__quality--1 { color: #16764e; }
.hepo-weather-environment__quality--2 { color: #39772d; }
.hepo-weather-environment__quality--3 { color: #9b6500; }
.hepo-weather-environment__quality--4,
.hepo-weather-environment__quality--5 { color: #b4141d; }
.hepo-weather-environment__state { color: #43564f; font-weight: 700; margin: .45rem 0; }
.hepo-weather-environment__meta,
.hepo-weather-environment__note { color: var(--hepo-muted); font-size: .72rem; line-height: 1.4; }
.hepo-weather-environment__meta { margin: .45rem 0 0; }
.hepo-weather-environment__note { display: block; margin: .85rem 0 0; }
.hepo-weather-environment__values { display: grid; gap: .35rem; margin: .8rem 0 0; }
.hepo-weather-environment__values div { align-items: center; border-top: 1px solid #e7ecea; display: flex; justify-content: space-between; padding-top: .35rem; }
.hepo-weather-environment__values dt { align-items: center; color: #52635d; display: inline-flex; font-size: .78rem; gap: .3rem; line-height: 1.15; }
.hepo-weather-environment__values dt.hepo-weather-environment__pollutant { display: grid; grid-template-columns: 3.25rem 1rem 1.1rem; min-width: 5.95rem; }
.hepo-weather-environment__source { align-items: center; color: #17201d; display: inline-flex; font-size: .68rem; font-weight: 850; height: 1rem; justify-content: center; line-height: 1; text-decoration: none; width: 1.1rem; }
.hepo-weather-environment__values dd { font-weight: 750; margin: 0; }
.hepo-weather-environment__values small { color: #65736e; font-size: .65rem; }
.hepo-weather-environment__info { align-items: center; appearance: none; align-self: center; background: transparent !important; border: 1px solid #17201d !important; border-radius: 50% !important; box-shadow: none !important; box-sizing: border-box !important; color: #17201d !important; cursor: help; display: inline-flex; flex: 0 0 1rem; font-family: Arial, sans-serif !important; font-size: .62rem !important; font-style: normal; font-weight: 800 !important; height: 1rem !important; justify-content: center; line-height: 1 !important; margin: 0 !important; min-height: 1rem !important; min-width: 1rem !important; outline-offset: 3px; padding: 0 !important; position: relative; text-transform: none !important; vertical-align: middle; width: 1rem !important; }
.hepo-weather-environment__info:hover,
.hepo-weather-environment__info:focus { background: #fff !important; border-color: #000 !important; color: #000 !important; }
.hepo-weather-environment__info [role="tooltip"] { background: #17201d; border-radius: 7px; bottom: calc(100% + .5rem); color: #fff; font-family: inherit; font-size: .75rem; font-weight: 500; left: -.45rem; letter-spacing: 0; line-height: 1.4; opacity: 0; padding: .6rem .7rem; pointer-events: none; position: absolute; text-align: left; text-transform: none !important; transform: translateY(.2rem); transition: opacity .15s, transform .15s; visibility: hidden; white-space: normal; width: min(15.5rem, 60vw); z-index: 22; }
.hepo-weather-environment__eyebrow .hepo-weather-environment__info [role="tooltip"] { left: auto; right: -.45rem; }
.hepo-weather-environment__info:hover [role="tooltip"],
.hepo-weather-environment__info:focus [role="tooltip"] { opacity: 1; transform: translateY(0); visibility: visible; }
.hepo-weather-environment__trend { color: #176b94; display: inline-block; font-size: .9em; margin-left: .15rem; }
.hepo-weather-environment__stages { color: #5d6965; font-size: .75rem; margin: .7rem 0 0; }
.hepo-weather-environment__stages span { font-weight: 750; }
.hepo-weather-environment__warning { align-items: center; background: #d38a00; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #9d6800; color: #fff; cursor: help; display: inline-flex; font-size: .68rem; height: 1.1rem; justify-content: center; line-height: 1; outline-offset: 3px; position: relative; width: 1.1rem; }
.hepo-weather-environment__warning--high { background: #bd1018; box-shadow: 0 0 0 1px #861016; }
.hepo-weather-environment__warning [role="tooltip"] { background: #17201d; border-radius: 7px; bottom: calc(100% + .55rem); color: #fff; font-size: .75rem; font-weight: 500; left: 50%; letter-spacing: 0; line-height: 1.35; max-width: min(18rem, 72vw); opacity: 0; padding: .65rem .75rem; pointer-events: none; position: absolute; text-transform: none; transform: translate(-50%, .25rem); transition: opacity .15s, transform .15s; visibility: hidden; width: max-content; z-index: 20; }
.hepo-weather-environment__warning:hover [role="tooltip"],
.hepo-weather-environment__warning:focus [role="tooltip"] { opacity: 1; transform: translate(-50%, 0); visibility: visible; }

.hepo-weather__hourly { overflow-x: auto; padding: .15rem 0 1rem; scroll-snap-type: x proximity; }
.hepo-weather__hourly-track { display: flex; gap: .375rem; position: relative; width: max-content; }
.hepo-weather__hourly article {
  background: #fff;
  background: linear-gradient(165deg, rgb(var(--hepo-hour-rgb) / 58%) 0%, rgb(var(--hepo-hour-rgb) / 36%) 54%, rgb(var(--hepo-hour-rgb) / 15%) 100%), #fff;
  border: 1px solid rgb(var(--hepo-hour-rgb) / 38%);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 3px 10px rgb(18 38 57 / 9%);
  color: #17201d !important;
  display: flex;
  flex: 0 0 8.75rem;
  flex-direction: column;
  min-height: 13rem;
  padding: .8rem;
  position: relative;
  scroll-snap-align: start;
}
.hepo-weather__hourly article > * { position: relative; z-index: 3; }
.hepo-weather-hour__meta { align-items: center; display: flex; justify-content: space-between; min-height: 1.5rem; }
.hepo-weather__hourly time { font-size: .86rem; font-weight: 700; }
.hepo-weather__hourly strong { color: #17201d !important; font-size: 1.45rem; line-height: 1.1; margin: .3rem 0 0; }
.hepo-weather-hour__frost {
  align-items: center;
  background: rgb(219 242 255 / 24%);
  border: 1px solid rgb(218 242 255 / 72%);
  border-radius: 50%;
  color: #17201d !important;
  display: inline-flex;
  flex: 0 0 1.45rem;
  font-size: .86rem;
  height: 1.45rem;
  justify-content: center;
}
.hepo-weather-hour__graph-space { flex: 0 0 4.6rem; }
.hepo-weather-hour__condition { color: #17201d !important; flex: 1; font-size: .86rem; line-height: 1.25; }
.hepo-weather__hourly small { color: #34473f !important; font-size: .72rem; margin-top: .45rem; }
.hepo-weather__temperature-chart {
  height: 4.6rem;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 4.15rem;
  width: 100%;
  z-index: 2;
}
.hepo-weather__temperature-chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hepo-weather__temperature-line-shadow { stroke: rgb(255 255 255 / 72%); stroke-width: 6; }
.hepo-weather__temperature-line { stroke: #cf1624; stroke-width: 3.25; }
.hepo-weather__temperature-chart ellipse { fill: #cf1624; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hepo-weather__daily { display: grid; gap: .35rem; }
.hepo-weather__daily article {
  align-items: center;
  background: #fff;
  background:
    linear-gradient(100deg, rgb(var(--hepo-day-rgb) / 54%) 0%, rgb(var(--hepo-day-rgb) / 34%) 48%, rgb(var(--hepo-day-rgb) / 12%) 100%),
    #fff;
  border: 1px solid rgb(var(--hepo-day-rgb) / 34%);
  border-radius: 9px;
  color: #17201d;
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr 1.2fr auto;
  overflow: hidden;
  padding: .85rem .75rem;
  position: relative;
}
.hepo-weather__daily article::after { background: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 46%, rgb(23 32 29 / 4%)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hepo-weather__daily article > * { position: relative; z-index: 1; }
.hepo-weather__daily article small { color: #34473f; grid-column: 2 / 4; }
.hepo-weather__daily article strong { white-space: nowrap; }

.hepo-weather__map img,
.hepo-weather-warning-media video { background: #20252b; display: block; height: auto; width: 100%; }
.hepo-weather-map__image { border-radius: 14px; overflow: hidden; position: relative; }
.hepo-weather-map__image time { background: rgb(0 0 0 / 75%); bottom: clamp(2.5rem, 10%, 4rem); color: #fff; font-size: .8rem; left: .6rem; padding: .3rem .5rem; position: absolute; }
.hepo-weather-map__controls { align-items: center; background: var(--hepo-soft); display: grid; gap: .75rem; grid-template-columns: auto 1fr; padding: .8rem; }
.hepo-weather-map__controls button { background: var(--hepo-red); border: 0; border-radius: 4px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: .55rem .8rem; }
.hepo-weather-map__controls input { accent-color: var(--hepo-red); min-height: 2rem; width: 100%; }
.hepo-weather-map__controls span { font-size: .82rem; grid-column: 2; }
.hepo-weather__sources { border-top: 1px solid var(--hepo-line); padding-top: 1rem; }

.hepo-weather-warning-media { margin: 2rem 0; }
.hepo-weather-warning-media figure { margin: 0; }
.hepo-weather-warning-media video { border-radius: 8px; }
.hepo-weather-warning-media figcaption { color: #686d75; font-size: .75rem; line-height: 1.4; margin-top: .5rem; }

@container (min-width: 650px) {
  .hepo-weather__daily article { grid-template-columns: 1fr 1.6fr auto auto; }
  .hepo-weather-environment__grid { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hepo-weather__daily article small { grid-column: auto; }
}

@container (min-width: 960px) {
  .hepo-weather__opening { align-items: stretch; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hepo-weather__current { box-sizing: border-box; display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
  .hepo-weather .hepo-weather__temperature { font-size: clamp(4rem, 7cqw, 5.5rem) !important; }
  .hepo-weather__map { grid-column: 2; grid-row: 1; }
  .hepo-weather__facts { flex: 1; grid-template-rows: repeat(8, minmax(0, 1fr)); }
  .hepo-weather__facts > div { align-items: center; padding: .5rem 0; }
  .hepo-weather__extremes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (max-width: 649px) {
  .hepo-weather-sun__summary { grid-template-columns: 1fr; }
  .hepo-weather-sun__event { grid-template-columns: 2.8rem 1fr; }
  .hepo-weather-sun__grid text,
  .hepo-weather-sun__months text { font-size: 34px; }
  .hepo-weather-sun__month-label:nth-child(even),
  .hepo-weather-sun__today-label { display: none; }
  .hepo-weather-scene__celestial { inset: -10% 14% auto auto !important; }
  .hepo-weather-scene--night.hepo-weather-scene--none .hepo-weather-scene__celestial { inset: -8% auto auto 42% !important; }
  .hepo-weather-scene--dawn .hepo-weather-scene__celestial,
  .hepo-weather-scene--dusk .hepo-weather-scene__celestial { inset: auto 5% -28% auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hepo-weather *, .hepo-weather-warning-media * { animation: none !important; scroll-behavior: auto !important; }
}