/* Inforest layout with the original, unwarped condition artwork.
   147 × 250px at 640 × 480; square icon compartment above the temperature. */
.weather-page {
  --weather-heading-ink: #f7fafc;
  --weather-footer-ink: #f7fafc;
  --weather-secondary-ink: #edf3f8e0;
  --weather-glass-fill: #dde8f214;
  --weather-icon-fill: #11192766;
  --weather-edge: #ecf5ff70;
}
.weather-background {
  background-image: url('assets/weather-atlas-v2.png');
  filter: saturate(.85);
}
.weather-scrim {
  background: linear-gradient(180deg, #0c1c2b14, #0b1b2910 65%, #0a172a16);
}
.weather-page h1 {
  top: 8cqw;
  font-size: 3.125cqw;
  line-height: 1.25;
  font-weight: 600;
  color: var(--weather-heading-ink);
  text-shadow: 0 1px 10px #091d2e30;
}
.weather-card {
  top: 18.8cqw;
  width: 23cqw;
  height: 39cqw;
  border-radius: 3.8cqw;
  background: var(--weather-glass-fill);
  border: 1px solid var(--weather-edge);
  backdrop-filter: blur(13px) saturate(.8);
  -webkit-backdrop-filter: blur(13px) saturate(.8);
  box-shadow: inset 0 0 0 2px #f0f7ff1a, inset 0 -1px 1px #f6faff40,
    1px 2px 3px #081b2a45, -1px -1px 1px #e2f3ff24;
  transition: box-shadow .2s;
}
.weather-card:hover {
  background: var(--weather-glass-fill);
  box-shadow: inset 0 0 0 2px #f0f7ff30, inset 0 -1px 1px #f6faff50,
    1px 2px 4px #081b2a45, -1px -1px 1px #e2f3ff40;
}
.weather-card-top {
  flex: none;
  height: 22cqw;
  margin: .55cqw .55cqw 0;
  border-radius: 3.2cqw;
  background: var(--weather-icon-fill);
  box-shadow: inset 0 0 0 1px #edf5ff24, 0 5px 6px #071a2924;
}
.weather-card-label {
  left: 2.25cqw;
  top: 2.1cqw;
  font-size: 1.95cqw;
  font-weight: 500;
}
.weather-symbol {
  top: 3cqw;
  width: 22cqw;
  height: 22cqw;
  background-image: url('assets/inforest-icons/cloudy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: normal;
}
.weather-temperature {
  font-size: 9.375cqw;
  font-weight: 250;
  letter-spacing: -.065em;
  line-height: 1;
  margin-top: 1.6cqw;
  text-shadow: 0 1px 8px #f0f7ff16;
}
.weather-range {
  bottom: 2.2cqw;
  gap: 1.6cqw;
  font-size: 1.9cqw;
  line-height: 1.3;
  color: #f6f9ffed;
}
.weather-footer { top: 61.5cqw; }
.weather-place {
  font-size: 3.125cqw;
  font-weight: 600;
  line-height: 1.25;
  color: var(--weather-footer-ink);
  text-shadow: 0 1px 8px #071a281a;
}
.weather-freshness {
  font-size: 1.875cqw;
  line-height: 1.5;
  margin-top: 1cqw;
  color: var(--weather-secondary-ink);
  text-shadow: 0 1px 6px #06172918;
}
.preview-tag {
  top: 12.4cqw;
  font-size: 1.75cqw;
  color: var(--weather-heading-ink);
}
.weather-page[data-period='day']:is([data-weather='clear'], [data-weather='partly-cloudy']) {
  --weather-footer-ink: #172f49;
  --weather-secondary-ink: #263e55;
  --weather-icon-fill: #1d5a7d12;
  --weather-edge: #e5f4ff85;
}
.weather-page[data-period='day']:is([data-weather='clear'], [data-weather='partly-cloudy']) .weather-card {
  background: linear-gradient(180deg, #e7f3ff0a 48%, #15344d88 100%);
}
.weather-page[data-period='day']:is([data-weather='snow'], [data-weather='snow-showers'], [data-weather='sleet'], [data-weather='fog'], [data-weather='dust']) {
  --weather-heading-ink: #263f52;
  --weather-footer-ink: #263f52;
  --weather-secondary-ink: #344b5d;
  --weather-icon-fill: #182a3c45;
  --weather-glass-fill: #1a2b3c18;
}
.weather-page[data-period='night'] {
  --weather-icon-fill: #07112250;
  --weather-glass-fill: #c7dded12;
  --weather-edge: #d6ebff55;
}
.weather-page[data-period='day']:is([data-weather='snow'], [data-weather='snow-showers'], [data-weather='sleet'], [data-weather='fog'], [data-weather='dust']) .weather-card {
  background: linear-gradient(180deg, #5b6d8120 45%, #102a4599 100%);
}
.weather-page[data-weather='dust'] .weather-background {
  filter: sepia(.65) saturate(.8);
}