/* ============================================================================
   Weather page — layout for the dedicated /weather/ forecast.
   Tokenised to the editorial theme; loaded only on the weather page.
   ========================================================================== */

.wx-page { padding: 30px 0 var(--space-8); }
.wx-head { border-bottom: var(--rule) solid var(--ink); padding-bottom: 24px; margin-bottom: 26px; }
.wx-head h1 { font-family: var(--font-serif); font-size: clamp(38px, 5vw, 62px); line-height: var(--lh-tight); letter-spacing: var(--tracking-head); margin: 10px 0 14px; }
.wx-head .dek { font-family: var(--font-read); font-size: var(--fs-lead); color: #45413a; max-width: 760px; margin: 0; }
.wx-loading { padding: 60px 0; text-align: center; color: var(--muted); font-family: var(--font-read); font-style: italic; }

/* Featured hero */
.wx-hero { display: grid; grid-template-columns: 1fr 540px; gap: 34px; align-items: center; background: var(--paper-2); border: var(--rule) solid var(--line); border-top: var(--rule-strong) solid var(--accent); padding: 34px; margin-bottom: 34px; }
.wx-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wx-city-name { font-family: var(--font-serif); font-size: 34px; }
.wx-cond { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.wx-cond .wx-ic { width: 1.5em; height: 1.5em; color: var(--accent); }
.wx-bigtemp { font-family: var(--font-serif); font-weight: 900; font-size: 150px; line-height: 0.9; letter-spacing: -0.03em; margin: 6px 0; }
.wx-cur-meta { color: #4a453d; font-size: var(--fs-small); font-family: var(--font-read); }
.wx-anom { margin-top: 18px; display: inline-block; padding: 8px 14px; border: var(--rule) solid var(--line); background: #fff; font-size: var(--fs-small); }
.wx-anom strong { font-family: var(--font-serif); font-size: 22px; margin-right: 4px; }
.wx-anom.warm strong { color: var(--accent); }
.wx-anom.cool strong { color: #2b6cb0; }
.wx-anom.norm strong { color: var(--muted); }
.wx-anom span { color: var(--muted); }
.wx-chart-title { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.wx-chartsvg { width: 100%; height: 180px; display: block; }
.wx-area { fill: rgba(142,36,32,0.08); stroke: none; }
.wx-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.wx-dot { fill: var(--ink); }
.wx-cl { font-family: var(--font-sans); font-size: 13px; fill: var(--ink); font-weight: 700; }

/* 7-day strip */
.wx-week { display: grid; grid-template-columns: repeat(7, 1fr); border: var(--rule) solid var(--line); margin-bottom: 44px; }
.wx-day { padding: 18px 8px; text-align: center; border-right: var(--rule) solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wx-day:last-child { border-right: 0; }
.wx-day.today { background: #f0e6d0; }
.wx-dow { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); }
.wx-day .wx-ic { width: 2em; height: 2em; color: var(--ink); }
.wx-hilo b { font-family: var(--font-serif); font-size: 20px; }
.wx-hilo i { color: var(--muted); font-style: normal; margin-left: 4px; }
.wx-pp { font-size: var(--fs-tiny); color: #2b6cb0; font-weight: 700; }

/* Precipitation radar map */
.wx-mapwrap { margin-bottom: 44px; }
.wx-map { height: 460px; border: var(--rule) solid var(--line); border-top: var(--rule-strong) solid var(--accent); background: var(--paper-2); }
.wx-maprow { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.wx-play { border: var(--rule) solid var(--ink); background: var(--paper); padding: 6px 14px; font: inherit; font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.wx-play:hover { background: var(--ink); color: var(--paper); }
.wx-mapts { font-size: var(--fs-small); color: var(--muted); font-weight: 700; }
.leaflet-tooltip.wx-mk { background: var(--ink); color: #fff; border: 0; border-radius: 2px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; padding: 2px 6px; box-shadow: none; }
.leaflet-tooltip.wx-mk::before { border-top-color: var(--ink); }

/* Multi-city grid */
.wx-updated { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.wx-card { border: var(--rule) solid var(--line); border-left: 3px solid var(--accent); padding: 20px; text-decoration: none; color: inherit; display: block; }
.wx-card-top { display: flex; justify-content: space-between; align-items: center; }
.wx-card-name { font-family: var(--font-serif); font-size: 22px; }
.wx-card-top .wx-ic { width: 1.6em; height: 1.6em; color: var(--accent); }
.wx-card-temp { font-family: var(--font-serif); font-weight: 900; font-size: 56px; line-height: 1; margin: 8px 0 2px; }
.wx-card-cond { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-tiny); font-weight: 700; }
.wx-card-week { margin-top: 12px; font-size: var(--fs-small); color: #4a453d; font-family: var(--font-read); }
.wx-card-week b { font-weight: 700; }
.wx-source { font-size: var(--fs-small); color: var(--muted); font-family: var(--font-read); }
.wx-source a { color: var(--accent); }

@media (max-width: 850px) {
  .wx-hero { grid-template-columns: 1fr; gap: 22px; }
  .wx-bigtemp { font-size: 110px; }
  .wx-week { grid-template-columns: repeat(4, 1fr); }
  .wx-day:nth-child(4) { border-right: 0; }
  .wx-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wx-week { grid-template-columns: repeat(3, 1fr); }
  .wx-grid { grid-template-columns: 1fr; }
}