:root {
  color-scheme: light dark;
  --accent: #1677d2;
  --accent-rgb: 22, 119, 210;
  --accent-soft: #dff1ff;
  --ink: #13201a;
  --muted: #56645d;
  --page: #f2f0e7;
  --paper: rgba(255, 255, 255, .76);
  --paper-strong: rgba(255, 255, 255, .91);
  --line: rgba(30, 54, 42, .14);
  --shadow: 0 24px 70px rgba(48, 59, 48, .14);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --hero-image: url('/weather/assets/dehradun-foothills-warm.webp');
  --role-image: url('/weather/assets/hero-home-warm.webp');
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--page); color: var(--ink); }
body[data-theme="dark"] {
  --ink: #f3f7f5;
  --muted: #b8c3bd;
  --page: #07100e;
  --paper: rgba(9, 24, 20, .72);
  --paper-strong: rgba(9, 23, 20, .9);
  --line: rgba(213, 238, 226, .17);
  --shadow: 0 26px 80px rgba(0, 7, 5, .48);
}
body[data-role="farm"] { --accent: #3b8a4a; --accent-rgb: 59, 138, 74; --accent-soft: #e1f3e3; --role-image: url('/weather/assets/hero-farm-warm.webp'); }
body[data-role="work"] { --accent: #a86100; --accent-rgb: 168, 97, 0; --accent-soft: #ffebc8; --role-image: url('/weather/assets/hero-work-warm.webp'); }
body[data-role="adventure"] { --accent: #6b47a7; --accent-rgb: 107, 71, 167; --accent-soft: #eee5ff; --role-image: url('/weather/assets/hero-adventure-warm.webp'); }
body[data-page-mode="generic"] { --hero-image: url('/weather/assets/hero-home-warm.webp'); }

img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, [role="tab"], [role="tabpanel"]):focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #075d99 !important; }
body[data-theme="light"] :where(a, button, input, [role="tab"], [role="tabpanel"]):focus-visible { outline-color: #102820 !important; box-shadow: 0 0 0 5px #fff !important; }
@media (hover: hover) {
  :where(a, button, input):not([disabled]) { transition: transform 90ms ease-out, filter 180ms var(--spring), background-color 180ms var(--spring), color 180ms var(--spring); }
  :where(a, button, input):not([disabled]):active { transform: translateY(1px) scale(.985); }
}
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 12px 17px; border-radius: 999px; background: #fff; color: #07100e; text-decoration: none; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.eyebrow { display: block; color: var(--accent); font-size: 10px; font-weight: 760; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; }

.site-header {
  position: sticky; z-index: 80; top: 0; display: grid; grid-template-columns: auto minmax(260px, 445px) 1fr auto; gap: 26px; align-items: center;
  min-height: 76px; padding: 12px clamp(24px, 4vw, 58px); border-bottom: 1px solid var(--line);
  background: rgba(247, 247, 241, .82); box-shadow: 0 8px 28px rgba(34, 43, 36, .06); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
}
body[data-theme="dark"] .site-header { background: rgba(7, 17, 14, .82); }
.brand { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; text-decoration: none; font-size: 25px; letter-spacing: -.055em; }
.brand strong { color: #187b3d; font-weight: 820; }
.brand span { font-weight: 360; }
.site-search { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; padding: 3px 5px 3px 16px; border: 1px solid rgba(255, 255, 255, .88); border-radius: 999px; background: rgba(255, 255, 255, .69); box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 8px 22px rgba(31, 48, 39, .11); }
body[data-theme="dark"] .site-search { border-color: rgba(255,255,255,.14); background: rgba(11, 28, 24, .7); }
.site-search > img { width: 18px; opacity: .65; }
.site-search input { min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.site-search input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.site-search > button { min-width: 68px; min-height: 40px; border: 0; border-radius: 999px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 12px; font-weight: 720; cursor: pointer; }
.search-results { position: absolute; z-index: 100; top: calc(100% + 8px); left: 0; right: 0; padding: 7px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper-strong); box-shadow: var(--shadow); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.search-result { display: grid; width: 100%; min-height: 54px; padding: 9px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; }
.search-result:hover, .search-result[aria-selected="true"] { background: rgba(var(--accent-rgb), .12); }
.search-result b { font-size: 13px; }.search-result small { color: var(--muted); font-size: 11px; }
.search-message { margin: 0; padding: 14px; color: var(--muted); font-size: 12px; }
.site-nav { display: flex; justify-content: center; gap: clamp(18px, 2.3vw, 34px); }
.site-nav a, .site-nav button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: none; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; }
.site-nav a:hover, .site-nav button:hover { color: var(--accent); }
.header-actions { display: flex; gap: 12px; align-items: center; }
.theme-toggle { position: relative; width: 80px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: inset 0 1px rgba(255,255,255,.65); cursor: pointer; }
.theme-toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 50%; background: #edf5f2; box-shadow: 0 5px 14px rgba(11,20,25,.24); transform: translateX(0); transition: transform 320ms var(--spring), background 320ms; }
body[data-theme="dark"] .theme-toggle::after { transform: translateX(34px); background: #52616b; }
.theme-toggle img { position: absolute; z-index: 1; top: 12px; width: 18px; height: 18px; object-fit: contain; }
.theme-toggle .sun-icon { left: 12px; }.theme-toggle .moon-icon { right: 12px; }
.app-cta { min-height: 46px; padding: 0 18px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: var(--paper-strong); box-shadow: 0 9px 24px rgba(36,49,40,.1); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 750; }
.app-cta img { width: 14px; }

.weather-hero { position: relative; isolation: isolate; overflow: hidden; padding: 39px clamp(22px, 3.2vw, 47px) 23px; }
.hero-scene, .hero-wash, #weather-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-scene { z-index: -4; background-image: var(--hero-image); background-position: center 48%; background-size: cover; transform: scale(1.015); }
.hero-wash { z-index: -2; background: linear-gradient(90deg, rgba(249,249,239,.86) 0%, rgba(248,247,235,.66) 39%, rgba(246,244,228,.11) 73%), linear-gradient(180deg, rgba(255,252,235,.06), rgba(241,240,225,.28) 65%, rgba(238,239,226,.76)); }
#weather-canvas { z-index: -1; }
body[data-theme="dark"] .hero-scene { filter: saturate(.82) brightness(.52) contrast(1.08); }
body[data-theme="dark"] .hero-wash { background: linear-gradient(90deg, rgba(5,15,13,.89), rgba(6,17,15,.65) 42%, rgba(5,14,13,.18) 72%), linear-gradient(180deg, rgba(2,8,8,.16), rgba(4,13,11,.44) 65%, rgba(5,14,12,.86)); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(58px, 9vw, 138px); align-items: center; width: min(1262px, 100%); min-height: 300px; margin: 0 auto; }
.location-ledger { max-width: 790px; }
.location-title { display: flex; gap: 16px; align-items: flex-start; margin-top: 9px; }
.location-title > img { width: 40px; height: 40px; margin-top: 14px; filter: drop-shadow(0 8px 14px rgba(18,104,222,.25)); }
.location-title h1 { margin: 0; font-size: clamp(49px, 5.2vw, 76px); font-weight: 680; letter-spacing: -.055em; line-height: .98; }
.location-title p { margin: 7px 0 0; font-size: clamp(20px, 1.7vw, 27px); line-height: 1; }
.location-title time { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.condition-sentence { margin: 19px 0 0 56px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.35; }
.current-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(720px, 100%); margin: 22px 0 0 56px; }
.current-metrics > div { min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.current-metrics > div:first-child { padding-left: 0; border-left: 0; }
.current-metrics dt { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; }
.current-metrics dt img { width: 22px; height: 22px; object-fit: contain; }
.current-metrics dd { margin: 5px 0 0 29px; font-size: 18px; font-weight: 730; font-variant-numeric: tabular-nums; white-space: nowrap; }
.freshness { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 56px; color: var(--muted); font-size: 11px; }
.freshness span { width: 7px; height: 7px; border-radius: 50%; background: #2f9a4b; box-shadow: 0 0 0 4px rgba(47,154,75,.12); }
body[data-stale="true"] .freshness span { background: #d78f1f; box-shadow: 0 0 0 4px rgba(215,143,31,.15); }
body[data-load-state="loading"] .freshness span { background: #2d9ed0; box-shadow: 0 0 0 4px rgba(45,158,208,.14); animation: status-dot-pulse 1.4s ease-in-out infinite; }
body[data-load-state="partial"] .freshness span { background: #d78f1f; box-shadow: 0 0 0 4px rgba(215,143,31,.15); }
body[data-load-state="unavailable"] .freshness span { background: #c55252; box-shadow: 0 0 0 4px rgba(197,82,82,.14); }
body[data-load-state="ready"] .freshness span { background: #2f9a4b; box-shadow: 0 0 0 4px rgba(47,154,75,.12); }
@keyframes status-dot-pulse { 50% { transform: scale(1.25); opacity: .62; } }

.weather-orb { position: relative; justify-self: end; width: 310px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.88); border-radius: 50%; background: radial-gradient(circle at 33% 19%, rgba(255,255,255,.96), transparent 13%), linear-gradient(145deg, rgba(255,255,255,.52), rgba(186,211,207,.38) 56%, rgba(76,116,118,.49)); box-shadow: inset 0 2px 8px rgba(255,255,255,.94), inset 0 -26px 45px rgba(28,74,73,.2), 0 30px 75px rgba(36,65,58,.22); backdrop-filter: blur(18px) saturate(175%); -webkit-backdrop-filter: blur(18px) saturate(175%); }
.orb-reflection { position: absolute; inset: -5%; border-radius: 50%; background-image: var(--hero-image); background-position: 70% 56%; background-size: 185% auto; filter: blur(1px) saturate(1.08) brightness(1.03); opacity: .42; transform: scaleY(-.47) translateY(-38%); mask-image: radial-gradient(ellipse 73% 56% at 50% 69%, #000 22%, rgba(0,0,0,.58) 61%, transparent 94%); -webkit-mask-image: radial-gradient(ellipse 73% 56% at 50% 69%, #000 22%, rgba(0,0,0,.58) 61%, transparent 94%); }
.orb-caustic { position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.98), transparent 9%), radial-gradient(circle at 79% 30%, rgba(255,214,117,.42), transparent 18%), linear-gradient(122deg, transparent 28%, rgba(255,255,255,.35) 44%, transparent 58%); mix-blend-mode: screen; }
.orb-ring { position: absolute; z-index: 3; inset: 2px; border: 3px solid transparent; border-top-color: #25cce8; border-right-color: #66d2ed; border-bottom-color: #f0c152; border-radius: 50%; filter: drop-shadow(0 0 12px rgba(30,190,229,.45)); animation: orb-breathe 4.8s ease-in-out infinite; }
.orb-ring i { position: absolute; top: 8%; right: 12%; width: 8px; height: 8px; border-radius: 50%; background: #fff8dc; box-shadow: 0 0 7px 4px rgba(255,224,141,.8), 0 0 24px 8px rgba(255,187,77,.35); }
.orb-content { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 18px; text-align: center; text-shadow: 0 2px 12px rgba(255,255,255,.48); }
body[data-theme="dark"] .orb-content { text-shadow: 0 3px 14px rgba(0,0,0,.65); }
.orb-content > img { width: 53px; height: 53px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.23)); }
.orb-content > strong { margin-top: 1px; font-size: 65px; font-weight: 250; letter-spacing: -.065em; line-height: 1; font-variant-numeric: tabular-nums; }
.orb-content h2 { margin: 4px 0 0; font-size: 15px; font-weight: 750; }
.orb-content p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.orb-range { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 12px; font-weight: 740; font-variant-numeric: tabular-nums; }.orb-range i { width: 1px; height: 12px; background: var(--line); }.orb-range span:first-child { color: #b15f00; }.orb-range span:last-child { color: #0874a0; }

.surface { border: 1px solid rgba(255,255,255,.76); background: var(--paper); box-shadow: inset 0 1px 1px rgba(255,255,255,.95), 0 24px 60px rgba(39,56,45,.13); backdrop-filter: blur(24px) saturate(165%); -webkit-backdrop-filter: blur(24px) saturate(165%); }
body[data-theme="dark"] .surface { border-color: rgba(255,255,255,.15); }
.official-alert { position: relative; z-index: 3; display: grid; grid-template-columns: 58px 300px minmax(0, 1fr) auto; gap: 18px; align-items: center; width: min(1348px, 100%); min-height: 92px; margin: 10px auto 0; padding: 13px 20px; border-color: rgba(170,54,31,.36); border-radius: 18px; background: linear-gradient(110deg, rgba(138,42,27,.94), rgba(166,56,36,.91)); color: #fff8f2; box-shadow: inset 0 1px rgba(255,255,255,.22), 0 18px 40px rgba(94,29,20,.22); }
/* .official-alert's own display:grid above has equal CSS specificity to the
   UA stylesheet's [hidden]{display:none} and, being an author style, would
   otherwise win regardless of source order -- this explicit rule is what
   actually makes box.hidden=true (set in renderAlerts when a region has no
   official-alert coverage at all) take effect. */
.official-alert[hidden] { display: none; }
.official-alert[data-status="clear"] { border-color: rgba(45,105,62,.28); background: linear-gradient(110deg, rgba(230,241,228,.95), rgba(244,245,231,.91)); color: #173b25; }
body[data-theme="dark"] .official-alert[data-status="clear"] { background: linear-gradient(110deg, rgba(20,55,37,.95), rgba(17,45,36,.91)); color: #ecf7ef; }
.official-alert[data-status="error"] { border-color: rgba(180,122,36,.32); background: linear-gradient(110deg, rgba(244,231,202,.95), rgba(240,237,218,.92)); color: #5a3c12; }
body[data-theme="dark"] .official-alert[data-status="error"] { background: linear-gradient(110deg, rgba(69,47,20,.95), rgba(45,39,25,.92)); color: #fff1d5; }
.official-alert[data-status="unavailable"] { border-color: rgba(66,94,117,.3); background: linear-gradient(110deg, rgba(225,235,239,.96), rgba(239,244,242,.93)); color: #294655; }
body[data-theme="dark"] .official-alert[data-status="unavailable"] { background: linear-gradient(110deg, rgba(24,48,60,.95), rgba(24,42,50,.92)); color: #e2f1f5; }
.alert-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.28); display: grid; place-items: center; }.alert-icon img { width: 31px; }
.alert-heading { min-width: 0; padding-right: 18px; border-right: 1px solid rgba(255,255,255,.28); }.alert-heading .eyebrow { color: #ffd29e; }.official-alert[data-status="clear"] .eyebrow, .official-alert[data-status="error"] .eyebrow, .official-alert[data-status="unavailable"] .eyebrow { color: currentColor; opacity: .7; }.alert-heading h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.1; }.alert-heading p { margin: 5px 0 0; font-size: 12px; }
.alert-copy { margin: 0; max-width: 680px; font-size: 15px; line-height: 1.45; }.official-alert > button { min-height: 46px; padding: 0 0 0 22px; border: 0; border-left: 1px solid rgba(255,255,255,.28); background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }.official-alert > button img { width: 14px; filter: brightness(0) invert(1); }.official-alert[data-status="clear"] > button img, .official-alert[data-status="error"] > button img, .official-alert[data-status="unavailable"] > button img { filter: none; }
.alert-copy p { margin: 0; }.alert-copy p + p { margin-top: 8px; padding-top: 8px; border-top: 1px solid currentColor; }

.forecast-ledger { position: relative; z-index: 2; width: min(1348px, 100%); margin: 14px auto 0; padding: 18px 24px 10px; border-radius: 18px; }
.forecast-ledger > header { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.forecast-ledger h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.025em; }.forecast-ledger header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.text-button { min-height: 44px; border: 0; background: transparent; color: var(--accent); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; }.text-button img { width: 13px; }
.forecast-layout { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: 16px; margin-top: 12px; }
.forecast-table-wrap { min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { height: 43px; padding: 7px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { height: 34px; background: rgba(var(--accent-rgb), .05); color: var(--muted); font-size: 11px; font-weight: 620; white-space: nowrap; }
td:first-child { font-weight: 760; }.forecast-condition { display: flex; align-items: center; gap: 10px; }.forecast-condition img { width: 28px; height: 28px; object-fit: contain; }.rain-value { color: #1474b9; font-weight: 740; }
.app-handoff { min-height: 162px; padding: 19px 20px; border-left: 1px solid var(--line); background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), transparent); display: grid; grid-template-columns: 72px 1fr; gap: 15px; align-items: center; }
.mini-orb { width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: radial-gradient(circle at 30% 20%,#fff,transparent 13%),linear-gradient(145deg,rgba(255,255,255,.6),rgba(var(--accent-rgb),.22)); box-shadow: inset 0 1px 5px #fff,0 0 0 2px rgba(var(--accent-rgb),.23),0 14px 30px rgba(var(--accent-rgb),.16); display: grid; place-items: center; }.mini-orb span { color: var(--accent); font-weight: 820; }
.app-handoff h3 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.03em; }.app-handoff p { margin: 5px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.4; }.app-handoff a { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--paper-strong); box-shadow: 0 8px 20px rgba(37,50,41,.1); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; }.app-handoff a img { width: 12px; }

.perspective-tabs { position: sticky; z-index: 45; top: 76px; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; min-height: 72px; padding: 9px clamp(22px, 4vw, 56px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); }
.perspective-tabs > div { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 1348px; }
.perspective-tabs button { position: relative; z-index: 1; min-height: 52px; padding: 4px 12px; border: 0; background: transparent; cursor: pointer; display: grid; grid-template-columns: 26px auto; grid-template-areas: "icon name" "icon small"; column-gap: 9px; align-content: center; text-align: left; }
.perspective-tabs button img { grid-area: icon; width: 25px; height: 25px; align-self: center; object-fit: contain; filter: saturate(.75); opacity: .82; }.perspective-tabs button span { grid-area: name; font-size: 13px; font-weight: 760; }.perspective-tabs button small { grid-area: small; color: var(--muted); font-size: 9px; }.perspective-tabs button[aria-selected="true"] { color: var(--accent); }.perspective-tabs button[aria-selected="true"] img { filter: none; opacity: 1; }
.tab-lens { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; border-radius: 15px; background: rgba(var(--accent-rgb), .1); box-shadow: inset 0 -2px var(--accent), 0 12px 28px rgba(var(--accent-rgb),.08); transform: translateX(calc(var(--role-index, 0) * 100%)); transition: transform 360ms var(--spring), background 360ms; }
.perspective-tabs > p { position: absolute; right: clamp(22px, 4vw, 56px); top: 50%; margin: 0; color: var(--muted); font-size: 12px; transform: translateY(-50%); }

.planning-section { position: relative; padding: 18px clamp(22px, 4vw, 56px) 74px; background: linear-gradient(180deg, var(--page), color-mix(in srgb, var(--page) 90%, rgba(var(--accent-rgb),.12))); }
.role-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; width: min(1348px, 100%); margin: 0 auto; padding: 24px; border-radius: 24px; scroll-margin-top: 164px; }
.role-panel > *, .role-intro > div, .evidence-card > span { min-width: 0; }
.role-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb,var(--paper-strong) 94%,transparent), color-mix(in srgb,var(--paper) 78%,transparent)), var(--role-image); background-position: center; background-size: cover; opacity: .6; }
body[data-theme="dark"] .role-panel::before { filter: brightness(.55) saturate(.85); opacity: .72; }
.role-intro { grid-column: 1/-1; display: flex; gap: 17px; align-items: center; min-height: 75px; }
.role-icon { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 1px #fff, 0 16px 30px rgba(var(--accent-rgb), .12); display: grid; place-items: center; }.role-icon img { width: 34px; }
.role-intro h2 { margin: 4px 0 0; font-size: clamp(27px, 2.6vw, 40px); letter-spacing: -.04em; }.role-intro p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.role-intro h2, .role-intro p, .evidence-card strong, .evidence-card span { overflow-wrap: anywhere; }
.role-signal, .recommendation-card, .hourly-card { border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper-strong) 78%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.64); }
.role-signal, .recommendation-card { padding: 20px; }.role-signal h3, .recommendation-card h3 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.025em; }.role-signal p, .recommendation-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.role-signal dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }.role-signal dl div { padding: 8px 11px; border-radius: 999px; background: rgba(var(--accent-rgb), .09); }.role-signal dt { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.role-signal dd { margin: 2px 0 0; font-size: 12px; font-weight: 740; font-variant-numeric: tabular-nums; }
.recommendation-card { border-color: rgba(var(--accent-rgb), .24); }.recommendation-card .eyebrow { color: var(--accent); }.recommendation-card small { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.decision-booster { padding: 16px 18px; }.decision-booster h3 { margin-top: 4px; font-size: 18px; }.decision-booster p { margin-top: 5px; }.decision-booster small { margin-top: 8px; }
.hourly-card { grid-column: 1/-1; padding: 18px 20px 14px; }.hourly-card > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.hourly-card h3 { margin: 4px 0 0; font-size: 18px; }.hourly-card header > span { color: var(--muted); font-size: 10px; }
.hourly-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(94px, 1fr); gap: 7px; margin-top: 14px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.35) transparent; }
.hour-point { min-height: 103px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--accent-rgb), .045); scroll-snap-align: start; text-align: center; }.hour-point.now { border-color: rgba(var(--accent-rgb),.46); background: rgba(var(--accent-rgb),.12); }.hour-point time { color: var(--muted); font-size: 10px; }.hour-point img { width: 27px; height: 27px; margin: 8px auto 2px; }.hour-point strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }.hour-point small { display: block; margin-top: 4px; color: #1474b9; font-size: 9px; }
.evidence-card { grid-column: 1/-1; min-height: 78px; padding: 13px 16px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 18px; background: rgba(var(--accent-rgb), .065); cursor: pointer; display: grid; grid-template-columns: 46px 1fr 16px; gap: 14px; align-items: center; text-align: left; }.evidence-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(var(--accent-rgb),.12); display: grid; place-items: center; }.evidence-icon img { width: 25px; }.evidence-card > span small, .evidence-card > span span { display: block; color: var(--muted); font-size: 10px; }.evidence-card > span strong { display: block; margin: 3px 0; font-size: 14px; }.evidence-card > img { width: 14px; }
body[data-page-mode="generic"] .role-panel { grid-template-columns: 1fr; }.generic-note { display: none; }.generic-note[aria-hidden="false"] { display: block; }

.method-section { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 74px clamp(22px, 5vw, 76px) 90px; background: #0b1714; color: #eff7f2; }.method-section > div { max-width: 620px; }.method-section h2 { margin: 8px 0 0; font-size: clamp(38px, 4vw, 62px); line-height: 1; letter-spacing: -.05em; }.method-section p { max-width: 570px; margin: 20px 0 0; color: rgba(234,244,238,.68); line-height: 1.6; }.method-section ol { display: grid; margin: 0; padding: 0; list-style: none; }.method-section li { min-height: 74px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 42px 1fr; grid-template-areas: "num title" "num copy"; }.method-section li span { grid-area: num; color: var(--accent-soft); font-size: 12px; }.method-section li b { grid-area: title; }.method-section li small { grid-area: copy; margin-top: 4px; color: rgba(234,244,238,.58); }
.page-footer { min-height: 86px; padding: 22px clamp(22px, 5vw, 76px); background: #07100e; color: #edf5f0; display: flex; justify-content: space-between; gap: 24px; align-items: center; }.page-footer p { margin: 0; color: rgba(237,245,240,.62); font-size: 11px; }.page-footer button { min-height: 44px; border: 0; background: transparent; color: #dcebe2; cursor: pointer; }

.state-banner { position: fixed; z-index: 90; right: 18px; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-strong); box-shadow: var(--shadow); color: var(--ink); font-size: 12px; }

/* Ad-slot rails -- structural containers only, see city-page.js's
   injectAdRails() doc comment for the full reasoning. Hidden by default;
   only shown once there's real, uncontested room outside the content
   column's own width:min(1348px,100%) centering -- never below that
   breakpoint, never on mobile. Empty until a real AdSense unit is wired in;
   width matches a standard 160px skyscorer unit with margin to spare. */
.ad-rail { display: none; }
@media (min-width: 1760px) {
  .ad-rail { position: fixed; top: 50%; z-index: 5; width: 160px; min-height: 600px; transform: translateY(-50%); display: block; pointer-events: none; }
  .ad-rail-left { left: max(24px, calc((100vw - 1348px) / 2 - 200px)); }
  .ad-rail-right { right: max(24px, calc((100vw - 1348px) / 2 - 200px)); }
}
.state-banner button { min-height: 44px; margin-left: 12px; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-weight: 740; }

.evidence-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(780px, calc(100vh - 28px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--paper-strong); color: var(--ink); box-shadow: 0 40px 120px rgba(0,0,0,.42); }.evidence-dialog::backdrop { background: rgba(3,10,8,.6); backdrop-filter: blur(9px); }.dialog-inner { max-height: inherit; padding: 28px; overflow-y: auto; }.dialog-close { float: right; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(var(--accent-rgb),.08); cursor: pointer; display: grid; place-items: center; }.dialog-close img { width: 17px; }.evidence-dialog h2 { margin: 7px 58px 0 0; font-size: 30px; letter-spacing: -.035em; }.evidence-dialog > .dialog-inner > p { color: var(--muted); line-height: 1.5; }.evidence-list { display: grid; gap: 9px; margin: 22px 0 0; }.evidence-list div { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(var(--accent-rgb),.05); }.evidence-list dt { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }.evidence-list dd { margin: 6px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

@keyframes orb-breathe { 50% { transform: scale(1.007); filter: drop-shadow(0 0 17px rgba(31,192,226,.5)); } }
@keyframes role-arrive { 0% { opacity: .72; transform: translateY(7px) scale(.995); } }
body.role-transition .role-panel > * { animation: role-arrive 380ms var(--spring) both; }

@media (max-width: 1160px) {
  .site-header { grid-template-columns: auto minmax(260px, 1fr) auto; }.site-nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 38px; }.weather-orb { width: 280px; }
  .official-alert { grid-template-columns: 54px 245px minmax(0,1fr); }.official-alert > button { grid-column: 2/-1; justify-self: end; border-left: 0; min-height: 36px; }
  .forecast-layout { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-width: 820px) {
  .site-header { min-height: 68px; padding: 10px 14px; gap: 12px; }.brand { font-size: 21px; }.header-actions { gap: 7px; }.theme-toggle { width: 48px; }.theme-toggle::after { display: none; }.theme-toggle .sun-icon { display: block; left: 14px; }.theme-toggle .moon-icon { display: none; right: 14px; } body[data-theme="dark"] .theme-toggle .sun-icon { display: none; } body[data-theme="dark"] .theme-toggle .moon-icon { display: block; }.app-cta:not(.app-cta-badge) { width: 46px; padding: 0; justify-content: center; }.app-cta:not(.app-cta-badge) span { display: none; }.app-cta-badge { font-size: 10px; padding: 0 10px; }
  .weather-hero { padding: 28px 14px 18px; }.hero-grid { grid-template-columns: 1fr 240px; gap: 18px; }.weather-orb { width: 225px; }.orb-content > strong { font-size: 50px; }.orb-content > img { width: 40px; height: 40px; }
  .location-title h1 { font-size: 50px; }.current-metrics { grid-template-columns: 1fr 1fr; row-gap: 15px; }.current-metrics > div:nth-child(3) { padding-left: 0; border-left: 0; }.condition-sentence, .current-metrics, .freshness { margin-left: 0; }
  .forecast-layout { grid-template-columns: 1fr; }.app-handoff { border-left: 0; border-top: 1px solid var(--line); }
  .perspective-tabs { top: 68px; grid-template-columns: 1fr; padding: 7px 12px; }.perspective-tabs > div { width: 100%; }.perspective-tabs > p { display: none; }
}

@media (max-width: 650px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }.site-search { grid-template-columns: 18px 1fr; min-height: 46px; padding-right: 12px; }.site-search > button { position: absolute; right: 0; top: calc(100% + 7px); display: none; }.header-actions .app-cta { display: none; }
  .weather-hero { padding-top: 22px; }.hero-grid { display: flex; flex-direction: column; min-height: 0; }.location-ledger { width: 100%; }.location-title { gap: 11px; }.location-title > img { width: 30px; height: 30px; margin-top: 8px; }.location-title h1 { font-size: clamp(42px, 13vw, 58px); }.location-title p { margin-top: 5px; font-size: 18px; }.location-title time { margin-top: 6px; font-size: 12px; }.condition-sentence { margin-top: 14px; font-size: 16px; }
  .current-metrics { margin-top: 18px; }.current-metrics > div { padding: 0 9px; }.current-metrics dt { font-size: 9px; }.current-metrics dt img { width: 18px; height: 18px; }.current-metrics dd { margin-left: 24px; font-size: 14px; }.freshness { margin-top: 15px; }
  .weather-orb { order: -1; align-self: center; width: min(220px, 61vw); }.orb-content > strong { font-size: 49px; }.orb-content h2 { font-size: 13px; }.orb-content p, .orb-range { font-size: 10px; }
  .official-alert { grid-template-columns: 48px 1fr; gap: 11px; min-height: 0; margin-top: 18px; padding: 14px; }.alert-icon { width: 48px; height: 48px; }.alert-heading { padding: 0; border: 0; }.alert-heading h2 { font-size: 17px; }.alert-copy { grid-column: 1/-1; font-size: 13px; }.official-alert > button { grid-column: 1/-1; width: 100%; min-height: 44px; padding: 9px 0 0; border-top: 1px solid rgba(255,255,255,.25); justify-content: center; }
  .forecast-ledger { padding: 17px 12px 10px; }.forecast-ledger > header { display: block; }.forecast-ledger .text-button { margin-top: 7px; }.forecast-table-wrap { margin: 4px -2px 0; }th, td { padding: 7px 8px; font-size: 11px; }th:nth-child(2), td:nth-child(2) { min-width: 132px; }.forecast-condition img { width: 24px; height: 24px; }
  .app-handoff { min-height: 0; grid-template-columns: 58px 1fr; padding: 16px 9px; }.mini-orb { width: 56px; height: 56px; }
  .perspective-tabs { position: sticky; top: 68px; min-height: 65px; }.perspective-tabs button { min-height: 52px; padding: 3px; grid-template-columns: 1fr; grid-template-areas: "icon" "name"; justify-items: center; text-align: center; }.perspective-tabs button img { width: 23px; height: 23px; }.perspective-tabs button span { font-size: 10px; }.perspective-tabs button small { display: none; }.tab-lens { border-radius: 13px; }
  .planning-section { padding: 13px 10px 50px; }.role-panel { grid-template-columns: 1fr; padding: 15px; }.role-intro { align-items: flex-start; }.role-icon { width: 52px; height: 52px; border-radius: 17px; }.role-icon img { width: 28px; }.role-intro h2 { font-size: 27px; }.role-signal, .recommendation-card { padding: 16px; }.hourly-card { padding: 16px 10px 12px; }.hourly-scroll { grid-auto-columns: 88px; scroll-snap-type: x mandatory; }.evidence-card { padding: 12px; grid-template-columns: 42px 1fr 14px; }.evidence-icon { width: 42px; height: 42px; }
  .method-section { grid-template-columns: 1fr; gap: 38px; padding: 58px 20px 66px; }.page-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .brand { min-width: 44px; }.brand::before { width: 36px; height: 36px; background-image: url('/assets/brand/olweather-outline-light.svg'); }
  body[data-theme="dark"] .brand::before { background-image: url('/assets/brand/olweather-outline-dark.svg'); }
  .brand span { display: none; }.site-header { grid-template-columns: 44px minmax(0,1fr) 48px; }.site-search { width: 100%; }.theme-toggle { width: 44px; }
  .current-metrics dd { font-size: 13px; }.forecast-table-wrap { scrollbar-width: thin; }
}

/* Weather animation: follows the device's reduced-motion setting by default, and the visitor's own
   On/Off choice (html[data-motion]) always wins. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *, html:not([data-motion="on"]) *::before, html:not([data-motion="on"]) *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html:not([data-motion="on"]) #weather-canvas { display: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
html[data-motion="off"] #weather-canvas { display: none; }

@media (prefers-contrast: more) {
  .surface, .site-search, .theme-toggle, .role-signal, .recommendation-card, .hourly-card { border-width: 2px; }
  .muted, .freshness, .condition-sentence { opacity: 1; }
}

@media (forced-colors: active) {
  .hero-scene, .hero-wash, #weather-canvas, .orb-reflection, .orb-caustic, .tab-lens, .role-panel::before { display: none; }
  .weather-orb, .surface, .site-search, .theme-toggle { forced-color-adjust: auto; border: 1px solid CanvasText; }
}

/* OLWeather brand finish: the app's orbit mark is recreated as a small
   responsive emblem around the existing wordmark. The watermark is a brand
   signature, not a security control; keep it out of dense information areas. */
.brand { min-width: 170px; }
.brand strong, .brand span { display: none; }
.brand::before { content: ""; display: block; width: 166px; height: 38px; background: url('/assets/brand/olweather-wordmark-light.svg') center / contain no-repeat; }
.weather-hero::after { content: "OLWEATHER"; position: absolute; z-index: 0; right: clamp(-30px, 2vw, 34px); bottom: -8px; color: var(--ink); font-size: clamp(72px, 11vw, 170px); font-weight: 800; letter-spacing: .16em; line-height: .8; opacity: .045; pointer-events: none; white-space: nowrap; transform: rotate(-8deg); }
body[data-theme="dark"] .weather-hero::after { color: #fff; opacity: .055; }
body[data-theme="dark"] .brand::before { background-image: url('/assets/brand/olweather-wordmark-dark.svg'); }

/* Current release identity: the Crescents sphere from the PlayStore release.
   The earlier blue horizontal wordmark is intentionally not used here. */
.brand { min-width: 0; }
.brand strong { display: inline-block; width: 30px; height: 30px; min-width: 30px; background: url('/assets/brand/olweather-logo-current.svg') center / contain no-repeat; color: transparent; font-size: 0; vertical-align: middle; }
.brand span { display: inline; font-size: 0; }
.brand span::after { content: "OLWeather"; font-size: 25px; }
.brand::before { display: none; }
@media (max-width: 430px) {
  .brand { min-width: 44px; }
  .brand strong { width: 36px; height: 36px; }
  .brand span { display: none; }
}

/* App-orb parity: shared live scene reflection, spherical Fresnel edge,
   upper-left specular field, one activity ring and one endpoint glint. */
.weather-orb { border-width: 2px; background: radial-gradient(circle at 30% 16%, rgba(255,255,255,.98), transparent 12%), radial-gradient(circle at 72% 76%, rgba(var(--accent-rgb),.22), transparent 46%), linear-gradient(145deg, rgba(255,255,255,.56), rgba(186,211,207,.28) 56%, rgba(34,78,83,.54)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -30px 48px rgba(13,48,60,.3), 0 0 0 1px rgba(var(--accent-rgb),.35), 0 26px 72px rgba(16,45,59,.3); }
.weather-orb::before { content: ""; position: absolute; z-index: 1; inset: 4.5%; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: radial-gradient(ellipse at 32% 18%, rgba(255,255,255,.18), transparent 25%), radial-gradient(ellipse at 70% 82%, transparent 45%, rgba(4,24,40,.34) 100%); box-shadow: inset 0 0 16px rgba(255,255,255,.3), inset 0 -8px 20px rgba(5,27,42,.28); pointer-events: none; }
.weather-orb::after { content: ""; position: absolute; z-index: 2; inset: -10%; border-radius: 50%; background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.26) 47%, rgba(255,255,255,.06) 51%, transparent 60%); mix-blend-mode: screen; opacity: .55; pointer-events: none; animation: orb-sheen 7s var(--spring) infinite; }
.orb-reflection { z-index: 0; opacity: .62; filter: blur(1.5px) saturate(1.35) brightness(1.04); mix-blend-mode: screen; }
.orb-caustic { z-index: 2; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.9), transparent 9%), radial-gradient(circle at 79% 30%, rgba(255,214,117,.48), transparent 19%), radial-gradient(ellipse at 50% 92%, rgba(var(--accent-rgb),.36), transparent 38%), linear-gradient(122deg, transparent 28%, rgba(255,255,255,.32) 44%, transparent 58%); opacity: .86; }
.orb-ring { inset: 3px; border-width: 2px; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),.55)); }
.orb-ring i { z-index: 4; box-shadow: 0 0 9px 5px rgba(255,224,141,.85), 0 0 27px 9px rgba(255,187,77,.42); animation: glint-breathe 4.6s ease-in-out infinite; }
@keyframes orb-sheen { 0%, 55% { transform: translateX(-34%) rotate(-8deg); opacity: .18; } 72% { transform: translateX(25%) rotate(-8deg); opacity: .7; } 100% { transform: translateX(44%) rotate(-8deg); opacity: .18; } }
@keyframes glint-breathe { 0%, 100% { opacity: .65; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="on"]) .weather-orb::after, html:not([data-motion="on"]) .orb-ring i { animation: none; } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="on"]) body[data-load-state="loading"] .freshness span { animation: none; } }

/* Shared editorial site migration. Existing weather, forecast, calculation,
   official-source, and legal content remains in the DOM; these rules change
   presentation only. */
:root { --page: #fff; --paper: transparent; --paper-strong: #fff; --line: transparent; --ink: #111; --muted: #555; }
body[data-theme="dark"] { --page: #000; --paper: transparent; --paper-strong: #080808; --line: transparent; --ink: #fff; --muted: #c3c3c3; }
body { background: var(--page); color: var(--ink); font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif; }
.site-header { grid-template-columns: auto minmax(220px, 350px) 1fr auto; min-height: 76px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 0; background: var(--page); box-shadow: none; backdrop-filter: none; }
body[data-theme="dark"] .site-header { background: #000; }
.site-nav { gap: clamp(14px, 2vw, 28px); }
.site-nav a, .site-nav button { font-size: 12px; }
.site-nav a:nth-child(-n+2) { display: none; }
.site-search { border-color: color-mix(in srgb, var(--ink) 12%, transparent); background: var(--page); box-shadow: none; }
body[data-theme="dark"] .site-search { border-color: #333; background: #050505; }
.app-cta { border-color: color-mix(in srgb, var(--ink) 16%, transparent); background: var(--page); box-shadow: none; }
main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "perspectives" "weather" "planning" "guide" "method"; }
.perspective-tabs { grid-area: perspectives; position: relative; top: auto; min-height: 76px; padding: 8px clamp(24px, 5.3vw, 80px); border: 0; background: var(--page); backdrop-filter: none; }
.perspective-tabs > div { width: min(1328px, 100%); }
.perspective-tabs button { min-height: 56px; grid-template-columns: 25px auto; padding-inline: clamp(8px, 1.4vw, 20px); }
.perspective-tabs button span { font-size: 14px; }
.perspective-tabs button small { font-size: 10px; }
.perspective-tabs button img { opacity: .94; }
.tab-lens { border-radius: 18px; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.perspective-tabs > p { display: none; }
.weather-hero { grid-area: weather; width: 100%; margin: 0; padding: 40px clamp(24px, 5.3vw, 80px) 28px; overflow: hidden; background: var(--page); }
.weather-hero::after { display: none; }
.hero-scene, .hero-wash, #weather-canvas { right: 0; bottom: auto; left: 0; height: clamp(440px, 48vw, 600px); }
.hero-scene { background-image: var(--hero-image); background-position: center 53%; background-size: cover; transform: scale(1.005); animation: editorial-scene-drift 30s ease-in-out infinite alternate; transition: filter 600ms ease, background-image 600ms ease; }
@keyframes editorial-scene-drift { from { transform: scale(1.005) translateX(0); } to { transform: scale(1.035) translateX(-.35%); } }
.hero-wash { background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.93) 29%, rgba(255,255,255,.69) 45%, rgba(255,255,255,.08) 73%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.12) 65%, #fff 100%); }
body[data-theme="dark"] .hero-wash { background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 27%, rgba(0,0,0,.76) 45%, rgba(0,0,0,.12) 76%), linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.25) 62%, #000 100%); }
body[data-hero-weather="cloudy"] .hero-scene, body[data-hero-weather="partly_cloudy"] .hero-scene { filter: saturate(.78) brightness(.94); }
body[data-hero-weather="fog"] .hero-scene { filter: saturate(.48) brightness(1.05) contrast(.84); }
body[data-hero-weather="rain"] .hero-scene { filter: saturate(.7) brightness(.78) contrast(.96); }
body[data-hero-weather="storm"], body[data-hero-weather="thunderstorm"] { --accent: #ba6c4b; --accent-rgb: 186,108,75; }
body[data-hero-weather="storm"] .hero-scene, body[data-hero-weather="thunderstorm"] .hero-scene { filter: saturate(.56) brightness(.64) contrast(1.08); }
body[data-hero-weather="snow"] .hero-scene { filter: saturate(.48) brightness(1.1); }
.hero-grid { display: block; width: min(1328px, 100%); min-height: 390px; margin: 0 auto; }
.location-ledger { max-width: 720px; }
.location-title { margin-top: 8px; gap: 12px; }
.location-title > img { width: 22px; height: 22px; margin-top: 2px; filter: none; }
.location-title h1 { font: 600 clamp(20px, 2vw, 27px)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.location-title p { margin-top: 4px; font-size: 13px; }
.location-title time { margin-top: 4px; font-size: 11px; }
.weather-orb { display: block; position: relative; justify-self: start; width: auto; max-width: 650px; aspect-ratio: auto; margin: 22px 0 0 34px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.weather-orb::before, .weather-orb::after, .orb-reflection, .orb-caustic, .orb-ring { display: none; }
.orb-content { position: relative; inset: auto; display: grid; grid-template-columns: auto auto; grid-template-areas: "glyph temp" "condition condition" "feels feels" "range range"; justify-content: start; justify-items: start; align-items: center; gap: 0 15px; padding: 0; text-align: left; text-shadow: none; }
body[data-theme="dark"] .orb-content { text-shadow: none; }
.orb-content > img { grid-area: glyph; width: clamp(44px, 5vw, 62px); height: clamp(44px, 5vw, 62px); margin-bottom: 0; object-fit: contain; filter: none; }
.orb-content > strong { grid-area: temp; margin: 0; color: var(--ink); font: 400 clamp(82px, 11vw, 142px)/.9 Georgia, "Times New Roman", serif; letter-spacing: -.075em; }
.orb-content h2 { grid-area: condition; margin: 10px 0 0; font: 600 clamp(22px, 2.5vw, 34px)/1.08 Georgia, "Times New Roman", serif; }
.orb-content p { grid-area: feels; margin: 6px 0 0; color: var(--ink); font: 400 17px/1.3 Georgia, "Times New Roman", serif; }
.orb-range { grid-area: range; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.orb-range span:first-child, .orb-range span:last-child { color: var(--muted); }
.condition-sentence { margin: 12px 0 0 34px; max-width: 570px; font: 400 16px/1.45 Georgia, "Times New Roman", serif; }
.current-metrics { width: min(640px, calc(100% - 34px)); margin: 22px 0 0 34px; gap: 18px; }
.current-metrics > div, .current-metrics > div:first-child { padding: 0; border: 0; }
.current-metrics dt { font-size: 10px; }
.current-metrics dt img { width: 18px; height: 18px; }
.current-metrics dd { margin: 4px 0 0 25px; font-size: 14px; font-weight: 600; }
.freshness { margin: 14px 0 0 34px; font-size: 10px; }
#orb-icon { transform-origin: 50% 65%; }
body[data-weather-mode="clear_day"] #orb-icon { animation: editorial-sun 4.8s ease-in-out infinite; }
body[data-weather-mode="clear_night"] #orb-icon { animation: editorial-moon 5.8s ease-in-out infinite; }
body[data-weather-mode^="cloudy"] #orb-icon, body[data-weather-mode="partly_cloudy"] #orb-icon { animation: editorial-cloud 5.6s ease-in-out infinite; }
body[data-weather-mode="windy"] #orb-icon { animation: editorial-drift 4.2s ease-in-out infinite; }
body[data-weather-mode="rain"] #orb-icon, body[data-weather-mode="storm"] #orb-icon { animation: editorial-rain 1.9s ease-in-out infinite; }
body[data-weather-mode="snow"] #orb-icon, body[data-weather-mode="mist"] #orb-icon { animation: editorial-drift 4.2s ease-in-out infinite; }
@keyframes editorial-sun { 0%,100% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 0 rgba(242,181,66,0)); } 50% { transform: translateY(-4px) rotate(3deg); filter: drop-shadow(0 0 10px rgba(242,181,66,.4)); } }
@keyframes editorial-moon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes editorial-cloud { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes editorial-rain { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@keyframes editorial-drift { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
.decision-booster { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.7fr); gap: 5px 24px; align-items: center; width: min(1328px,100%); margin: 4px auto 18px; padding: 14px 0; border: 0; border-top: 1px solid color-mix(in srgb,var(--ink) 13%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--ink) 13%,transparent); border-radius: 0; background: transparent; box-shadow: none; }
.decision-booster .eyebrow { grid-column: 1/-1; font-size: 9px; }
.decision-booster h3 { margin: 0; font: 600 clamp(19px,2vw,27px)/1.15 Georgia, "Times New Roman", serif; }
.decision-booster p, .decision-booster small { margin: 0; color: var(--muted); font: 400 13px/1.4 Georgia, "Times New Roman", serif; }
.official-alert { grid-template-columns: 44px minmax(190px,260px) minmax(0,1fr) auto; gap: 14px; width: min(1328px,100%); min-height: 76px; margin: 14px auto 0; padding: 12px 20px; border: 0; border-radius: 0; background: #a82920; color: #fff; box-shadow: none; cursor: pointer; }
.official-alert[data-severity="high"] { background: #a51d1d; }
.official-alert[data-severity="moderate"], .official-alert[data-severity="unspecified"] { background: #b45c12; }
.official-alert[data-severity="low"] { background: #ad7b09; }
.alert-icon { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; background: transparent; box-shadow: none; }
.alert-icon img { width: 21px; filter: brightness(0) invert(1); }
.alert-heading { padding-right: 0; border: 0; }
.alert-heading .eyebrow { color: rgba(255,255,255,.8); }
.alert-heading h2 { font: 600 18px/1.15 Georgia, "Times New Roman", serif; }
.alert-heading p { margin-top: 3px; font-size: 11px; }
.alert-copy { max-width: none; font-size: 13px; }
.alert-copy p + p { margin-top: 5px; padding-top: 5px; border: 0; }
.official-alert > button { display: none; }
.official-alert[role="button"]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.forecast-ledger { grid-area: auto; width: min(1328px,100%); margin: 18px auto 0; padding: 8px 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.forecast-ledger > header { align-items: end; }
.forecast-ledger h2 { font: 600 24px/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.forecast-ledger header p { font-size: 11px; }
.forecast-layout { display: block; margin-top: 10px; }
.forecast-table-wrap { overflow: visible; }
.forecast-table-wrap table { display: block; }
.forecast-table-wrap thead { display: none; }
.forecast-table-wrap tbody { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: clamp(14px,3vw,38px); }
.forecast-table-wrap tr { display: grid; grid-template-columns: 1fr; align-content: start; gap: 5px; min-width: 0; padding: 7px 0; border: 0; }
.forecast-table-wrap td { display: block; height: auto; padding: 0; border: 0; text-align: left; font-size: 13px; }
.forecast-table-wrap td:first-child { font: 600 13px/1.2 Georgia, "Times New Roman", serif; }
.forecast-condition { gap: 7px; min-height: 32px; }
.forecast-condition img { width: 26px; height: 26px; }
.forecast-table-wrap td:nth-child(3) { color: var(--ink); font: 400 23px/1.1 Georgia, "Times New Roman", serif; }
.forecast-table-wrap td:nth-child(4) { color: var(--accent); font-size: 12px; }
.app-handoff { min-height: 0; margin-top: 14px; padding: 12px 0; grid-template-columns: 40px 1fr; border: 0; background: transparent; }
.mini-orb { width: 36px; height: 36px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.app-handoff h3 { font: 600 18px/1.2 Georgia, "Times New Roman", serif; }
.app-handoff p { margin-bottom: 5px; }
.planning-section { grid-area: planning; padding: 38px clamp(24px,5.3vw,80px) 56px; background: var(--page); }
.role-panel { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 22px clamp(34px,6vw,86px); width: min(1328px,100%); padding: 10px 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.role-panel::before { display: none; }
.role-intro { grid-column: 1; align-items: flex-start; min-height: 0; }
.role-icon { width: 34px; height: 34px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.role-icon img { width: 26px; }
.role-intro h2 { font: 600 clamp(27px,3vw,40px)/1.1 Georgia, "Times New Roman", serif; }
.role-intro p { color: var(--muted); font-size: 13px; }
.role-signal { grid-column: 2; grid-row: 1 / span 2; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.role-signal h3 { margin: 8px 0; font: 600 27px/1.12 Georgia, "Times New Roman", serif; }
.role-signal p { color: var(--muted); font: 400 14px/1.45 Georgia, "Times New Roman", serif; }
.role-signal dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 30px; margin-top: 20px; }
.role-signal dl > div { min-width: 0; padding: 0; border: 0; background: transparent; }
.role-signal dt { color: var(--muted); font-size: 10px; }
.role-signal dd { margin: 4px 0 0; font: 500 21px/1.15 Georgia, "Times New Roman", serif; }
.recommendation-card { border: 0; background: transparent; box-shadow: none; }
.hourly-card { grid-column: 1/-1; padding: 18px 0 0; border: 0; border-top: 1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius: 0; background: transparent; box-shadow: none; }
.hourly-card > header { margin: 0 0 12px; }
.hourly-card h3 { font: 600 19px/1.2 Georgia, "Times New Roman", serif; }
.hourly-scroll { grid-auto-columns: minmax(80px,1fr); }
.hourly-point { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.evidence-card { grid-column: 1/-1; padding: 15px 0 0; border: 0; border-top: 1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius: 0; background: transparent; box-shadow: none; }
.evidence-icon { width: 26px; height: 26px; border: 0; background: transparent; box-shadow: none; }
.method-section { grid-area: method; border: 0; border-radius: 0; box-shadow: none; }
.page-footer { border: 0; background: var(--page); color: var(--ink); }
.page-footer p { color: var(--muted); }
.page-footer button { color: var(--ink); }
@media (max-width: 900px) {
  .site-header { grid-template-columns: auto minmax(120px,1fr) auto; gap: 14px; }
  .site-nav { display: flex; grid-column: 1/-1; grid-row: 2; justify-content: center; }
  .site-header { padding-bottom: 6px; }
  .hero-scene, .hero-wash, #weather-canvas { height: 520px; }
}
@media (max-width: 650px) {
  .site-header { grid-template-columns: auto minmax(0,1fr) auto; }
  .site-nav { gap: 18px; }
  .site-nav a, .site-nav button { min-height: 36px; font-size: 11px; }
  main { grid-template-areas: "perspectives" "weather" "planning" "guide" "method"; }
  .perspective-tabs { min-height: 62px; padding: 5px 12px; }
  .perspective-tabs button { min-height: 50px; grid-template-columns: 1fr; grid-template-areas: "icon" "name"; justify-items: center; text-align: center; }
  .perspective-tabs button small { display: none; }
  .perspective-tabs button img { width: 22px; height: 22px; }
  .weather-hero { padding: 26px 18px 22px; }
  .hero-scene, .hero-wash, #weather-canvas { height: 520px; }
  .hero-wash { background: linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.8) 60%,rgba(255,255,255,.2)),linear-gradient(180deg,transparent,rgba(255,255,255,.42) 55%,#fff); }
  body[data-theme="dark"] .hero-wash { background: linear-gradient(90deg,#000,rgba(0,0,0,.86) 62%,rgba(0,0,0,.3)),linear-gradient(180deg,transparent,rgba(0,0,0,.46) 55%,#000); }
  .hero-grid { min-height: 390px; }
  .weather-orb { margin: 22px 0 0 25px; }
  .orb-content { gap: 0 10px; }
  .orb-content > strong { font-size: clamp(72px,20vw,112px); }
  .condition-sentence, .current-metrics, .freshness { margin-left: 25px; }
  .current-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 14px; }
  .decision-booster { grid-template-columns: 1fr; gap: 5px; padding: 12px 0; }
  .decision-booster .eyebrow { grid-column: 1; }
  .official-alert { grid-template-columns: 38px 1fr; gap: 9px 12px; margin-top: 12px; padding: 12px 10px; }
  .alert-copy { grid-column: 1/-1; font-size: 12px; }
  .forecast-ledger { padding-inline: 0; }
  .forecast-ledger > header { display: block; }
  .forecast-ledger .text-button { margin-top: 5px; }
  .forecast-table-wrap tbody { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .forecast-table-wrap td { font-size: 11px; }
  .forecast-table-wrap td:nth-child(3) { font-size: 19px; }
  .planning-section { padding: 24px 18px 44px; }
  .role-panel { grid-template-columns: 1fr; gap: 18px; padding: 0; }
  .role-intro, .role-signal { grid-column: 1; grid-row: auto; }
  .role-signal dl { gap: 14px 18px; }
  .hourly-card, .evidence-card { grid-column: 1; }
  .method-section { grid-template-columns: 1fr; gap: 28px; padding: 42px 20px; }
  .page-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) #orb-icon { animation: none !important; }
  html:not([data-motion="on"]) .hero-scene { transition: none; }
}

/* Real-data editorial composition: compact four-lens masthead, live hero,
   concise alert strip, and unboxed forecast/calculation columns. */
.site-header { grid-template-columns: auto minmax(390px,1fr) minmax(220px,280px) auto; gap: clamp(10px,1.5vw,22px); padding-inline: clamp(18px,4.2vw,64px); }
.site-header > .brand { grid-column: 1; grid-row: 1; }
.site-header > .perspective-tabs { grid-column: 2; grid-row: 1; }
.site-header > .site-search { grid-column: 3; grid-row: 1; }
.site-header > .header-actions { grid-column: 4; grid-row: 1; }
.perspective-tabs { position: relative; inset: auto; width: 100%; max-width: 800px; justify-self: center; min-height: 0; padding: 0; border: 0; background: transparent; }
.perspective-tabs > div { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.perspective-tabs button { min-width: 0; min-height: 48px; grid-template-columns: 20px auto; gap: 7px; padding: 4px 8px; border-radius: 12px; }
.perspective-tabs button img { width: 20px; height: 20px; }
.perspective-tabs button span { font-size: 13px; }
.perspective-tabs button small { display: block; }
.tab-lens { border-radius: 12px; }
.site-nav { display: none; }
.site-search { min-height: 40px; grid-template-columns: 18px minmax(0,1fr) auto; padding-left: 10px; gap: 6px; }
.site-search input { height: 36px; font-size: 12px; }
.site-search > button { min-width: 54px; min-height: 32px; }
.header-actions { gap: 10px; }
.app-cta-badge { display: none; }
main { grid-template-areas: "weather" "planning" "guide" "method"; }
.weather-hero { padding: 26px clamp(22px,5.3vw,80px) 12px; border: 0; border-radius: 0; box-shadow: none; }
.hero-scene, .hero-wash, #weather-canvas { inset: 0; height: 100%; }
body[data-theme="light"] .hero-wash { background: linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 40%,rgba(255,255,255,.24) 72%,rgba(255,255,255,.08) 100%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.18) 65%,rgba(255,255,255,.55)); }
.hero-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; min-height: clamp(390px,26vw,460px); }
.location-ledger { width: 100%; max-width: 580px; padding: 0 18px 0 0; }
.location-ledger .role-intro { align-items: flex-start; margin-top: 22px; }
.location-ledger .role-icon { width: 28px; height: 28px; }
.location-ledger .role-icon img { width: 24px; }
.location-ledger .role-intro h2 { max-width: 16ch; margin: 5px 0 0; font: 600 clamp(25px,2.5vw,36px)/1.08 Georgia,"Times New Roman",serif; }
.location-ledger .role-intro p { max-width: 48ch; margin-top: 7px; color: var(--muted); font: 400 14px/1.4 Georgia,"Times New Roman",serif; }
.weather-orb { width: auto; max-width: 100%; margin: 14px 0 0 0; }
.condition-sentence, .current-metrics, .freshness { margin-left: 0; }
.current-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.official-alert { grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; width: min(1328px,100%); min-height: 76px; margin: 4px auto 0; padding: 12px 18px; }
.alert-copy { display: none; }
.official-alert > button { display: inline-flex; min-height: 42px; padding: 8px 0 8px 16px; border: 0; border-left: 1px solid rgba(255,255,255,.35); color: #fff; white-space: nowrap; }
.official-alert > button img { filter: brightness(0) invert(1); }
.planning-section { padding: 16px clamp(22px,5.3vw,80px) 40px; }
.role-panel { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: start; gap: 14px clamp(28px,5vw,76px); }
.role-signal { grid-column: 1; grid-row: 1; }
.decision-booster { grid-column: 2; grid-row: 1; align-self: center; max-width: 480px; margin: 0 0 0 auto; padding: 12px 0; color: var(--ink); text-shadow: 0 1px 12px color-mix(in srgb,var(--page) 42%,transparent); }
.decision-booster { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; overflow-wrap: anywhere; }
.decision-booster .eyebrow { grid-column: 1; }
.decision-booster h3 { font-size: clamp(20px,2vw,26px); }
.decision-booster p { max-width: 58ch; }
.decision-booster small { max-width: 64ch; font-size: 11px; }
.hero-grid .decision-booster .eyebrow { color: var(--accent); }
.hero-grid .decision-booster h3 { font-size: clamp(24px,2.5vw,32px); }
.hero-grid .decision-booster p { color: var(--ink); font: 400 17px/1.45 Georgia,"Times New Roman",serif; }
.hero-grid .decision-booster small { color: var(--muted); }
.hourly-card { grid-column: 1/-1; grid-row: 2; padding-top: 8px; border: 0; }
.hourly-card > header { align-items: end; }
.hourly-card h3 { max-width: 460px; }
.hourly-card header .eyebrow { font-size: 9px; }
.hourly-rain-chart { display: block; width: 100%; margin: 14px 0 4px; }
.hourly-rain-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4px,1fr); align-items: end; gap: clamp(3px,.65vw,9px); width: 100%; height: 82px; }
.hourly-rain-scale { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 9px; }
.hourly-rain-bar { display: block; align-self: end; min-height: 2px; height: var(--bar-height,0%); border-radius: 4px 4px 0 0; background: color-mix(in srgb,var(--accent) 74%,#72b79b); transform-origin: bottom; }
body.role-transition .hourly-rain-bar { animation: rain-bar-rise 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--bar-index,0) * 12ms); }
@keyframes rain-bar-rise { from { transform: scaleY(.16); opacity: .38; } to { transform: scaleY(1); opacity: 1; } }
.hourly-scroll { grid-auto-columns: minmax(62px,1fr); gap: 4px; margin-top: 7px; padding-bottom: 2px; }
.hourly-point { min-height: 0; padding: 4px 2px; }
.hourly-point img { width: 22px; height: 22px; }
.hourly-point strong { font-size: 14px; }
.hourly-point small, .hourly-point time { font-size: 10px; }
.editorial-factors { grid-column: 2; grid-row: 1; padding-top: 2px; }
.editorial-factors > header { margin-bottom: 15px; }
.editorial-factors h3 { margin: 4px 0 0; font: 600 23px/1.15 Georgia,"Times New Roman",serif; }
.factor-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 22px; }
.factor-item { min-width: 0; padding: 0; border: 0; background: transparent; }
.factor-item h4 { margin: 0; font: 500 16px/1.2 Georgia,"Times New Roman",serif; }
.factor-status { display: inline-block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: capitalize; }
.factor-item[data-status="good"] .factor-status { color: #267445; }
.factor-item[data-status="caution"] .factor-status { color: #a66b00; }
.factor-item[data-status="stop"] .factor-status { color: #b3261e; }
body[data-theme="dark"] .factor-item[data-status="good"] .factor-status { color: #83d59b; }
body[data-theme="dark"] .factor-item[data-status="caution"] .factor-status { color: #ffd27b; }
body[data-theme="dark"] .factor-item[data-status="stop"] .factor-status { color: #ff8e84; }
.factor-item p { margin: 5px 0 0; color: var(--muted); font: 400 13px/1.38 Georgia,"Times New Roman",serif; }
.forecast-ledger { grid-column: 1/-1; grid-row: 3; width: 100%; margin: 0; padding: 10px 0 0; }
.forecast-ledger h2 { font-size: 22px; }
.forecast-table-wrap tbody { grid-template-columns: repeat(auto-fit,minmax(96px,1fr)); gap: 10px 18px; }
.forecast-table-wrap tr { gap: 4px; }
.forecast-table-wrap td:first-child { font-size: 12px; }
.forecast-table-wrap td:nth-child(3) { font-size: 19px; }
.app-handoff { display: none; }
.evidence-card { grid-column: 1/-1; grid-row: 4; }
.page-footer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px 20px; }
.page-footer .site-nav { display: flex; grid-column: 1/-1; grid-row: 2; justify-content: flex-start; gap: 22px; }
.page-footer .site-nav a, .page-footer .site-nav button { font-size: 11px; }

/* The hourly chart is precipitation probability, not an activity score:
   keep its bars in the app's precipitation-blue family on every tab. */
.hourly-rain-bar { background: #268fc4; }
body[data-theme="dark"] .hourly-rain-bar { background: #66bde6; }

/* Keep legal, methodology and live-calculation references in one compact,
   scrollable Settings surface rather than duplicating them in page chrome. */
.site-nav, .page-footer .site-nav { display: none !important; }
.site-settings { position: relative; z-index: 120; }
.site-settings-trigger { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius: 50%; background: var(--page); color: var(--ink); cursor: pointer; }
.site-settings-trigger img { width: 20px; height: 20px; opacity: .82; }
body[data-theme="dark"] .site-settings-trigger img { filter: invert(1); }
.site-settings-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px,calc(100vw - 28px)); max-height: min(72vh,560px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid color-mix(in srgb,var(--ink) 14%,transparent); border-radius: 18px; background: var(--page); color: var(--ink); box-shadow: 0 18px 52px rgba(0,0,0,.18); }
.site-settings-panel[hidden] { display: none !important; }
.site-settings-heading { display: grid; gap: 7px; margin-bottom: 12px; }
.site-settings-heading strong { font: 600 18px/1.2 Georgia,"Times New Roman",serif; }
.site-settings-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 13px; }
.site-settings-themes button { min-height: 40px; border: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.site-settings-themes button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.site-settings-links { display: grid; gap: 2px; }
.site-settings-links a, .site-settings-links button { display: flex; align-items: center; min-height: 42px; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font-size: 13px; cursor: pointer; }
.site-settings-links a:hover, .site-settings-links button:hover { color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,transparent); }

/* Editorial refinement: preserve open whitespace, not panel-like glow or rules. */
.hero-grid { min-height: 0; }
.location-title { margin-top: 4px; }
.weather-orb { margin-top: 8px; }
.orb-content { gap: 0 12px; }
.orb-content > img { width: clamp(42px,4vw,54px); height: clamp(42px,4vw,54px); }
.orb-content > strong { font-size: clamp(78px,8vw,116px); }
.orb-content h2 { margin-top: 6px; }
.orb-content p { margin-top: 3px; }
.orb-range { margin-top: 4px; }
.location-ledger .role-intro { margin-top: 14px; }
.condition-sentence { margin-top: 7px; }
.current-metrics { margin-top: 12px; row-gap: 7px; }
.freshness { margin-top: 8px; }
.hero-grid .decision-booster { text-shadow: 0 1px 10px color-mix(in srgb,var(--page) 58%,transparent); }
.decision-booster { border: 0; }
.hourly-card { border: 0; }
.evidence-card { border: 0; }
.hour-point, .hour-point.now { min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hour-point.now strong { color: var(--accent); }
body[data-theme="light"] .hero-wash { background: linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 32%,rgba(255,255,255,.38) 49%,rgba(255,255,255,.04) 75%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.08) 67%,#fff 100%); }
/* Tighten the live editorial layout without turning data back into cards. */
.weather-hero { padding-top: 18px; padding-bottom: 4px; }
.planning-section { padding-top: 8px; padding-bottom: 28px; }
.role-panel { gap: 8px clamp(24px,4vw,58px); }
.hourly-rain-chart { margin-top: 8px; }
.editorial-factors > header { margin-bottom: 10px; }
.factor-list { gap: 10px 16px; }
.forecast-ledger { padding-top: 6px; }
.forecast-table-wrap tbody { column-gap: 14px; }
@media (max-width: 980px) {
  .hero-grid { min-height: 0; }
}
@media (max-width: 980px) {
  .site-header { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px 12px; }
  .site-header > .brand { grid-column: 1; grid-row: 1; }
  .site-header > .perspective-tabs { grid-column: 1/-1; grid-row: 2; }
  .site-search { grid-column: 1/3; grid-row: 2; width: 100%; }
  .site-header > .site-search { grid-column: 1/3; grid-row: 3; }
  .site-header > .header-actions { grid-column: 3; grid-row: 1; }
  .hero-grid { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); min-height: 520px; }
  .orb-content > strong { font-size: clamp(64px,9vw,100px); }
}
@media (max-width: 680px) {
  .site-header { grid-template-columns: auto minmax(0,1fr) auto; padding: 7px 14px; }
  .brand span::after { font-size: 21px; }
  .site-header > .perspective-tabs { grid-column: 1/-1; grid-row: 2; }
  .site-header > .site-search { grid-column: 1/3; grid-row: 3; }
  .site-header > .header-actions { grid-column: 3; grid-row: 1; }
  .perspective-tabs button { min-height: 43px; grid-template-columns: 1fr; grid-template-areas: "icon" "name"; justify-items: center; gap: 1px; padding: 2px; }
  .perspective-tabs button img { width: 19px; height: 19px; }
  .perspective-tabs button span { font-size: 10px; }
  .weather-hero { padding: 22px 16px 10px; }
  .hero-scene, .hero-wash, #weather-canvas { inset: 0; height: 100%; }
  .hero-grid { display: block; min-height: 0; padding-bottom: 12px; }
  .location-ledger { position: relative; z-index: 1; }
  .weather-orb { margin-top: 15px; }
  .hero-grid .decision-booster { max-width: none; margin: 22px 0 0; }
  .hero-grid .decision-booster p { font-size: 15px; }
  .orb-content > strong { font-size: clamp(72px,20vw,112px); }
  .official-alert { grid-template-columns: 38px minmax(0,1fr); gap: 8px 11px; margin-top: 6px; padding: 10px 11px; }
  .alert-icon { width: 36px; height: 36px; }
  .alert-heading h2 { font-size: 15px; }
  .official-alert > button { grid-column: 1/-1; justify-self: start; min-height: 34px; padding: 2px 0 0; border: 0; font-size: 11px; }
  .planning-section { padding: 12px 16px 32px; }
  .role-panel { grid-template-columns: 1fr; gap: 12px; }
  .role-intro, .role-signal, .decision-booster, .hourly-card, .editorial-factors, .forecast-ledger, .evidence-card { grid-column: 1; grid-row: auto; }
  .editorial-factors { grid-row: auto; }
  .factor-list { gap: 14px 16px; }
  .hourly-rain-bars { height: 74px; }
  .hourly-scroll { grid-auto-columns: 64px; }
  .forecast-table-wrap tbody { grid-template-columns: repeat(auto-fit,minmax(82px,1fr)); }
  .page-footer { grid-template-columns: 1fr; }
  .page-footer .site-nav { flex-wrap: wrap; gap: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) body.role-transition .hourly-rain-bar { animation: none; }
}

/* Single bottom lens navigation; the four role tabs are not duplicated in the header. */
body { padding-bottom: 92px; }
.perspective-tabs {
  position: fixed; z-index: 120; inset: auto 0 0; top: auto; width: 100%; max-width: none; justify-self: stretch; margin-inline: 0; min-height: 76px;
  padding: 8px max(20px, calc((100vw - 1328px) / 2)) calc(8px + env(safe-area-inset-bottom));
  border: 0; background: color-mix(in srgb, var(--page) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.perspective-tabs > div { width: 100%; max-width: min(1328px, 100%); }
.perspective-tabs button { min-height: 54px; border-radius: 12px; }
.perspective-tabs button[aria-selected="true"] { background: transparent; }
.perspective-tabs button::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 28px; height: 2px; border-radius: 2px; background: transparent; transform: translateX(-50%); transition: background-color 180ms ease; }
.perspective-tabs button[aria-selected="true"]::after { background: var(--accent); }
.tab-lens { display: none; }
.perspective-tabs > p { display: none !important; }
.page-footer { padding-bottom: 98px; }
.method-section { display: none !important; }

/* Keep all seven provider days in one row; narrow screens scroll horizontally. */
.forecast-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.forecast-table-wrap tbody { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 760px; gap: 10px; }
.forecast-table-wrap tr { min-width: 0; }
.forecast-table-wrap td { min-width: 0; overflow-wrap: anywhere; }
.forecast-table-wrap td:first-child { align-content: start; gap: 2px; }
.forecast-day-name { display: block; color: var(--ink); font: 650 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }
.forecast-day-date { display: block; color: var(--muted); font: 500 10px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }

/* Anchor the rain-probability bars to an explicit baseline and mark the current hour. */
.hourly-rain-bars { position: relative; align-items: end; border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.hourly-rain-current { margin: 0 0 4px; color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hourly-rain-bar { position: relative; min-width: 4px; }
.hourly-rain-bar.is-current { background: #075c8a; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px #075c8a; z-index: 1; }
.hourly-rain-bar.is-current::before { content: ""; position: absolute; left: 50%; top: -14px; bottom: -1px; border-left: 1px solid currentColor; opacity: .8; }
.hourly-rain-bar.is-current::after { content: "NOW"; position: absolute; left: 50%; top: -27px; transform: translateX(-50%); padding: 2px 4px; background: var(--page); color: var(--ink); font: 700 8px/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .3px; white-space: nowrap; }
body[data-theme="dark"] .hourly-rain-bar.is-current { background: #8ad7ff; box-shadow: 0 0 0 2px #000, 0 0 0 4px #8ad7ff; }
body[data-theme="dark"] .hourly-rain-bar.is-current::before { color: #fff; }
@media (max-width: 680px) {
  body { padding-bottom: 72px; }
  .perspective-tabs { min-height: 66px; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .perspective-tabs button { min-height: 54px; grid-template-columns: 1fr; grid-template-areas: "icon" "name"; justify-items: center; gap: 1px; }
  .perspective-tabs button small { display: none; }
  .perspective-tabs button img { width: 20px; height: 20px; }
  .perspective-tabs button span { font-size: 10px; }
  .page-footer { padding-bottom: 84px; }
}

/* Climate guide: flat and unboxed like the rest of the page. Icon + label + short value, hairline dividers,
   same 1328px column (the ad rails sit in the side gutters). */
.city-guide { grid-area: guide; padding: 40px 0 52px; background: var(--page); color: var(--ink); }
.city-guide .cg-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding-top: 26px; border-top: 1px solid var(--line); }
.city-guide .cg-head h2 { margin: 8px 0 20px; font: 600 clamp(24px,2.6vw,34px)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.city-guide .cg-ico { flex: none; display: inline-block; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.city-guide .cg-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.city-guide .cg-facts > div { display: grid; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: start; padding: 16px 20px 16px 0; }
.city-guide .cg-facts > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.city-guide .cg-facts .cg-ico { grid-row: 1 / 3; width: 24px; height: 24px; margin-top: 1px; }
.city-guide .cg-facts dt { margin: 0; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.city-guide .cg-facts dd { margin: 3px 0 0; font: 600 17px/1.3 Georgia, "Times New Roman", serif; }
.city-guide .cg-facts a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.city-guide .cg-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; margin-top: 26px; }
.city-guide .cg-columns .eyebrow { margin: 0; }
.city-guide .cg-list { list-style: none; margin: 8px 0 0; padding: 0; }
.city-guide .cg-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.city-guide .cg-list li:last-child { border-bottom: 0; }
.city-guide .cg-list .cg-ico { margin-top: 1px; }
.city-guide .cg-lens b { display: block; margin-bottom: 2px; color: var(--accent); font-size: 10px; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.city-guide .cg-source { margin: 22px 0 0; max-width: 90ch; color: var(--muted); font-size: 12px; line-height: 1.6; }
.city-guide .cg-source a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px) { .city-guide { padding: 32px 0 44px; } .city-guide .cg-inner { width: calc(100% - 36px); } .city-guide .cg-columns { grid-template-columns: minmax(0,1fr); gap: 26px; } .city-guide .cg-facts { grid-template-columns: minmax(0,1fr); } .city-guide .cg-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Shared footer links (About, Contact, Privacy, Terms, Guides). */
.page-footer .site-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; width: 100%; }
.page-footer .site-links a { color: inherit; font-size: 14px; text-underline-offset: .22em; opacity: .85; }
.page-footer .site-links a:hover, .page-footer .site-links a:focus-visible { opacity: 1; }

/* Settings menu: the Weather animation row reuses the theme button group. */
.site-settings-sub { margin-top: 16px; }
.site-settings-sub small { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* App icons drawn as <img>: they are black line icons, so flip them in the dark theme. */
body[data-theme="dark"] img.app-icon-img { filter: invert(1); }
img.app-icon-img { opacity: .9; }

/* App icons inside the red official-warning banner are white on red. */
.official-alert img.app-icon-img { filter: brightness(0) invert(1); opacity: 1; }