:root {
  color-scheme: light;
  --canvas: oklch(91% 0.026 192);
  --ink: oklch(20% 0.025 220);
  --soft-ink: oklch(42% 0.03 215);
  --line: oklch(69% 0.034 205);
  --accent: oklch(63% 0.115 196);
  --orb: oklch(84% 0.16 78);
  --display: "Avenir Next", Avenir, "Futura PT", Futura, "Century Gothic", sans-serif;
  --body: "Avenir Next", Avenir, "Gill Sans", "Trebuchet MS", sans-serif;
}

body[data-period="night"] {
  color-scheme: dark;
  --canvas: oklch(24% 0.045 242);
  --ink: oklch(91% 0.018 220);
  --soft-ink: oklch(72% 0.032 220);
  --line: oklch(42% 0.047 235);
  --accent: oklch(70% 0.095 205);
  --orb: oklch(82% 0.04 228);
}

body[data-weather="rain"] { --canvas: oklch(84% 0.035 225); --accent: oklch(51% 0.1 232); }
body[data-weather="snow"] { --canvas: oklch(94% 0.018 220); --accent: oklch(57% 0.08 225); }
body[data-weather="clear"] { --canvas: oklch(92% 0.055 93); --accent: oklch(57% 0.13 205); }

* { box-sizing: border-box; }
html { background: var(--canvas); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--body);
  font-size: 1rem;
  font-kerning: normal;
  transition: color 700ms ease, background-color 700ms ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.19;
  background-image: repeating-linear-gradient(118deg, transparent 0 42px, var(--line) 43px, transparent 44px 92px);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 72%, transparent);
}

.weather-shell {
  width: min(1240px, calc(100% - clamp(32px, 7vw, 120px)));
  margin: 0 auto;
}

.masthead,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: var(--canvas);
  background: var(--ink);
  font-size: 0.9rem;
  letter-spacing: 0;
}

.live-state { display: flex; align-items: center; gap: 0.65rem; }
.live-dot { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--accent); }

.updated,
.eyebrow,
.forecast-heading > p,
.detail-item span,
footer p {
  margin: 0;
  color: var(--soft-ink);
  font-size: 0.71rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(250px, 1.16fr);
  align-items: end;
  min-height: clamp(520px, 68vh, 760px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-meta,
.temperature { position: relative; z-index: 2; padding-bottom: clamp(3rem, 7vw, 6.5rem); }
.eyebrow { margin-bottom: clamp(1.2rem, 2.7vw, 2.5rem); }

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.4rem, 10vw, 9.7rem);
  font-weight: 520;
  line-height: 0.82;
  letter-spacing: -0.085em;
}

.condition {
  max-width: 24ch;
  margin: clamp(1.6rem, 4vw, 3.4rem) 0 0;
  color: var(--soft-ink);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.35;
}

.temperature {
  justify-self: end;
  font-family: var(--display);
  font-size: clamp(10rem, 25vw, 22rem);
  font-weight: 430;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.58;
  letter-spacing: -0.12em;
}

.temperature sup {
  position: relative;
  top: -0.7em;
  margin-left: 0.11em;
  color: var(--accent);
  font-size: 0.16em;
  font-weight: 600;
  letter-spacing: 0;
}

.weather-scene { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute;
  top: 13%;
  right: 6%;
  width: clamp(6.5rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orb);
}

.cloud { position: absolute; height: 1px; background: var(--soft-ink); opacity: 0.45; }
.cloud::after { position: absolute; top: -0.35rem; right: 14%; content: ""; width: 0.7rem; height: 0.7rem; border: 1px solid var(--soft-ink); border-radius: 50%; background: var(--canvas); }
.cloud-a { top: 23%; right: 2%; width: 36%; }
.cloud-b { top: 29%; right: 18%; width: 22%; }

.kama-line {
  position: absolute;
  right: -12%;
  bottom: 8%;
  width: 68%;
  height: 25%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-7deg);
  opacity: 0.55;
}
.kama-b { right: -4%; bottom: 1%; width: 54%; opacity: 0.25; }

.details { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.detail-item {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem clamp(0.8rem, 2.3vw, 2.5rem) 1.7rem;
  border-right: 1px solid var(--line);
}
.detail-item:first-child { padding-left: 0; }
.detail-item:last-child { border-right: 0; }
.detail-item strong { font-size: clamp(1.65rem, 3vw, 2.8rem); font-weight: 480; letter-spacing: -0.055em; }

.forecast { padding: clamp(5rem, 11vw, 9rem) 0; }
.forecast-heading { display: grid; grid-template-columns: 4rem 1fr auto; align-items: end; gap: 1.5rem; margin-bottom: 2.7rem; }
.forecast-heading .section-index { color: var(--accent); }
h2 { margin: 0; font-size: clamp(2.9rem, 7vw, 6.8rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.075em; }
.forecast-list { border-top: 1px solid var(--ink); }
.forecast-day { display: grid; grid-template-columns: 1.05fr 1.8fr 0.55fr 0.55fr; align-items: center; gap: 1.5rem; min-height: 88px; border-bottom: 1px solid var(--line); }
.forecast-day span { color: var(--soft-ink); }
.forecast-day strong { font-size: 1.45rem; font-weight: 540; text-align: right; font-variant-numeric: tabular-nums; }
.forecast-day .low { color: var(--soft-ink); }
.fallback { padding: 1.6rem 0; color: var(--soft-ink); }
footer { min-height: 82px; border-top: 1px solid var(--line); border-bottom: 0; }

@media (max-width: 760px) {
  .weather-shell { width: calc(100% - 2rem); }
  .hero { grid-template-columns: 1fr; align-content: center; min-height: 650px; padding-top: 4rem; }
  .hero-meta { padding-bottom: 0; }
  .temperature { justify-self: start; padding: 5rem 0 4rem; }
  .orb { top: 18%; right: 2%; }
  .cloud-a { top: 30%; width: 52%; }
  .cloud-b { top: 35%; width: 34%; }
  .kama-line { width: 105%; }
  .details { grid-template-columns: repeat(2, 1fr); }
  .detail-item:nth-child(2) { border-right: 0; }
  .detail-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .detail-item:nth-child(3) { padding-left: 0; }
  .forecast-heading { grid-template-columns: 2.2rem 1fr; }
  .forecast-heading > p:last-child { grid-column: 2; }
  .forecast-day { grid-template-columns: 1fr auto auto; padding: 1rem 0; }
  .forecast-day .summary { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 460px) {
  .masthead { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.55rem; }
  .hero { min-height: 610px; }
  .detail-item { min-height: 118px; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.45rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-meta, .temperature, .weather-scene, .details, .forecast { animation: enter 760ms cubic-bezier(.16, 1, .3, 1) both; }
  .temperature { animation-delay: 80ms; }
  .weather-scene { animation-delay: 150ms; }
  .details { animation-delay: 210ms; }
  .forecast { animation-delay: 270ms; }
  @keyframes enter { from { opacity: 0; transform: translateY(1.15rem); } to { opacity: 1; transform: translateY(0); } }
}