.forecast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.forecast-period{border:1px solid var(--line);border-radius:12px;padding:20px;background:rgba(255,247,223,.035)}
.forecast-period-head{display:flex;align-items:start;justify-content:space-between;gap:16px}
.forecast-period h3{margin:0;font:25px/1.1 var(--serif)}
.forecast-temperature{color:var(--mint);font:34px/1 var(--serif);white-space:nowrap}
.forecast-summary{font-size:17px;margin:14px 0 8px}
.forecast-details,.forecast-meta,.forecast-unavailable{color:var(--muted)}
.forecast-details{margin-bottom:12px}
.forecast-facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.forecast-meta{font-size:11px;margin:18px 0 0}
.forecast-heading{justify-content:center;text-align:center}
.forecast-heading>div{width:100%}
.forecast-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:0;font-size:clamp(40px,5vw,52px)}
.forecast-title span{color:var(--mint);font:34px/1 system-ui,-apple-system,sans-serif;transform:rotate(-8deg)}
.forecast-date{margin:5px 0 0;color:var(--muted);font:20px/1.25 var(--serif);letter-spacing:-.01em}
.daylight-card{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:16px;padding:10px 0 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.sun-times{display:flex;grid-template-columns:none;gap:42px;border:0;padding:0;margin:0}
.sun-times>div{display:flex;align-items:baseline;gap:7px}
.sun-times dt,.sun-times dd{padding:0}
.sun-times dt{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sun-times dt span{color:var(--mint);font-size:17px}
.sun-times dd{font:24px/1.2 var(--serif);white-space:nowrap}
.weather-alerts{display:grid;gap:12px;margin:0 0 24px}
.weather-alert{padding:22px 24px;border:1px solid #e36f4d;border-left-width:6px;border-radius:12px;background:rgba(227,111,77,.12)}
.weather-alert h2{margin-bottom:8px}
.weather-alert p{margin-bottom:10px}
.weather-alert details{color:var(--muted)}
.weather-alert summary{color:var(--text);cursor:pointer;font-weight:700}
.weather-alert h3{color:var(--text);margin-bottom:6px}
.weather-alert-severe,.weather-alert-extreme{border-color:#e4553f;background:rgba(228,85,63,.17)}
@media(max-width:700px){
  .forecast-grid{grid-template-columns:1fr}
  .forecast-period{padding:17px}
  .forecast-summary{font-size:16px}
  .forecast-title{font-size:40px}
  .forecast-title span{font-size:28px}
  .daylight-card{width:100%;flex-wrap:wrap;gap:10px 14px;padding-bottom:14px}
  .forecast-date{margin-top:5px;font-size:18px}
  .sun-times{display:grid;width:min(100%,420px);grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sun-times>div{display:flex;flex-direction:column;align-items:center;gap:4px}
  .sun-times dt{white-space:nowrap}
  .sun-times dd{font-size:22px}
  .weather-alert{padding:18px}
}