:root{--navy:#0c2441;--navy2:#14375b;--ink:#13253b;--muted:#64748b;--teal:#25a99a;--sky:#58adff;--mist:#edf6f8;--line:#dce8ee;--white:#fff;--shadow:0 22px 60px rgba(13,43,70,.12);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7fafb;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}img{max-width:100%}.wrap{width:min(1180px,calc(100% - 36px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(203,220,228,.8)}.header-inner{max-width:1260px;margin:auto;padding:12px 22px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:244px}.brand img{width:210px;height:49px;object-fit:contain;object-position:left}.brand span{display:none}.main-nav{display:flex;gap:4px;margin-left:auto}.main-nav a{padding:10px 13px;border-radius:12px;font-size:14px;font-weight:700;color:#4b6075}.main-nav a:hover,.main-nav a.active{background:#eaf5f6;color:#0b746d}.header-live{margin-left:10px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:8px;font-weight:800}.status-dot{width:8px;height:8px;border-radius:50%;background:#2ac99f;box-shadow:0 0 0 5px rgba(42,201,159,.14)}.nav-toggle{display:none;margin-left:auto;border:0;background:#eef5f7;border-radius:10px;padding:9px 12px;font-size:20px}.weather-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#0b2340 0%,#104d68 60%,#248d9b 100%);color:#fff;min-height:575px}.hero-sky{position:absolute;inset:0;pointer-events:none}.hero-sky:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.1),transparent 35%),linear-gradient(180deg,transparent 65%,rgba(4,23,40,.2))}.orb{position:absolute;width:360px;height:360px;border-radius:50%;right:8%;top:70px;background:radial-gradient(circle at 35% 35%,#fffbd6,#f9c967 38%,rgba(249,201,103,.25) 66%,transparent 67%);filter:blur(.2px);opacity:.9}.cloud{position:absolute;width:370px;height:88px;border-radius:80px;background:rgba(255,255,255,.12);filter:blur(1px)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:160px;height:160px;left:55px;bottom:0}.cloud:after{width:120px;height:120px;right:55px;bottom:0}.cloud-a{right:-80px;bottom:80px}.cloud-b{left:-130px;top:110px;transform:scale(.7);opacity:.5}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:70px;min-height:575px;padding-block:75px}.eyebrow{display:flex;align-items:center;gap:16px;font-size:13px;color:#cde5ea}.live-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;font-weight:800;letter-spacing:.08em}.live-pill i{width:8px;height:8px;border-radius:50%;background:#67ffd2;box-shadow:0 0 0 5px rgba(103,255,210,.12)}.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(100px,15vw,180px);line-height:.85;margin:38px 0 10px;letter-spacing:-.08em}.hero-copy h1 small{font-family:"Segoe UI",Arial,sans-serif;font-size:.2em;letter-spacing:0;margin-left:12px;vertical-align:top;color:#b6dce6}.hero-condition{font-family:Georgia,"Times New Roman",serif;font-size:36px;margin:22px 0 8px}.hero-sub{color:#d4e8ed;font-size:17px}.hero-actions{display:flex;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:14px;font-weight:800;font-size:14px;transition:.2s}.button.primary{background:#fff;color:var(--navy)}.button.primary:hover{transform:translateY(-2px)}.button.ghost{border:1px solid rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.06)}.button.dark{background:var(--navy);color:#fff}.dark-text{color:var(--navy)!important;border-color:var(--line)!important}.wind-orbit{text-align:center;align-self:center}.wind-ring{position:relative;width:260px;height:260px;border-radius:50%;margin:auto;border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 0 0 28px rgba(255,255,255,.04),0 30px 80px rgba(0,0,0,.2)}.wind-ring>span{position:absolute;font-size:12px;font-weight:800;color:#b9d8df}.wind-ring>span:nth-child(1){top:12px;left:50%}.wind-ring>span:nth-child(2){right:14px;top:50%}.wind-ring>span:nth-child(3){bottom:12px;left:50%}.wind-ring>span:nth-child(4){left:14px;top:50%}.wind-center{position:absolute;inset:82px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-content:center}.wind-center b{font-size:38px;line-height:1}.wind-center small{font-size:12px}.wind-arrow{position:absolute;left:50%;top:50%;width:8px;height:92px;background:linear-gradient(#64f4d2,#fff);border-radius:9px;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--direction));box-shadow:0 0 20px rgba(100,244,210,.5)}.wind-arrow:before{content:"";position:absolute;top:-8px;left:-6px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:18px solid #64f4d2}.wind-orbit p{color:#cde5ea}.dashboard-section,.split-section,.neighborhood-note{margin-top:70px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section-heading h2,.panel h2,.neighborhood-note h2,.about-layout h2{font-family:Georgia,"Times New Roman",serif;font-size:34px;margin:4px 0 0}.section-heading>a{color:#147b7b;font-weight:800}.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#29968f}.station-badge{padding:8px 12px;border-radius:999px;background:#e2f8f1;color:#127b62;font-weight:800;font-size:13px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;align-items:center;gap:16px;box-shadow:0 12px 35px rgba(26,60,83,.06)}.metric-card .metric-icon{width:48px;height:48px;border-radius:16px;background:#eef8f7;display:grid;place-items:center;font-size:23px}.metric-card span,.detail-grid span,.stat-list span,.history-cards span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.metric-card strong{display:block;font-size:27px;margin:3px 0}.metric-card small{color:#718096}.split-section{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.panel{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:28px;box-shadow:0 16px 50px rgba(26,60,83,.07)}.panel-title{display:flex;align-items:start;justify-content:space-between}.rain-live{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#317a8b}.rain-live i{width:9px;height:9px;border-radius:50%;background:#55b9ff}.rain-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:25px;align-items:center;margin-top:20px}.rain-drop{width:190px;height:190px;border-radius:50% 50% 50% 8%;transform:rotate(45deg);background:linear-gradient(135deg,#e0f6ff,#c5edff);display:grid;place-content:center;text-align:center;margin:15px auto}.rain-drop>*{transform:rotate(-45deg)}.rain-drop span{font-family:Newsreader;font-size:48px;line-height:1}.rain-drop small{color:#39768e}.rain-main p{text-align:center;color:var(--muted)}.stat-list{display:grid;gap:0}.stat-list>div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #e8eff2}.stat-list b{font-size:16px}.stat-list.horizontal{grid-template-columns:repeat(2,1fr);column-gap:24px;margin-top:26px}.sun-panel{background:linear-gradient(150deg,#fff 20%,#fff9e7)}.uv-chip{background:#fff0bb;color:#8c6712;border-radius:999px;padding:8px 12px;font-weight:800}.sun-gauge{margin-top:45px}.sun-track{height:18px;border-radius:999px;background:linear-gradient(90deg,#d6edf5,#ffdb78,#ff9f5a);overflow:hidden}.sun-fill{height:100%;background:rgba(255,255,255,.4);border-right:5px solid #152e46}.sun-value{display:flex;align-items:baseline;gap:8px;margin-top:14px}.sun-value strong{font-family:Newsreader;font-size:52px}.sun-value span{color:var(--muted)}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.detail-grid article{background:#fff;border:1px solid var(--line);padding:20px;border-radius:17px}.detail-grid b{display:block;font-size:19px;margin-top:7px}.neighborhood-note{margin-bottom:70px;background:linear-gradient(120deg,#dff5f1,#e9f3ff);border:1px solid #cfe6e6;border-radius:28px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:40px}.neighborhood-note p{max-width:720px;color:#516577}.page-hero{background:linear-gradient(125deg,#0b2442,#16647a);color:#fff;padding:76px 0}.page-hero.compact{padding:58px 0}.page-hero h1{font-family:Newsreader;font-size:58px;margin:8px 0 10px}.page-hero p{max-width:720px;color:#d2e5e9;font-size:18px}.history-shell,.forecast-shell,.radar-shell,.station-shell,.about-layout{padding-block:55px 80px}.history-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.segmented{display:flex;background:#eaf1f4;border-radius:12px;padding:4px}.segmented button{border:0;background:transparent;padding:10px 14px;border-radius:9px;font-weight:800;color:#5e7182;cursor:pointer}.segmented button.active{background:#fff;color:#0f7772;box-shadow:0 4px 12px rgba(0,0,0,.08)}.history-toolbar label{font-size:13px;font-weight:800}.history-toolbar select{margin-left:8px;padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff}.chart-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.chart-head{display:flex;justify-content:space-between;align-items:start}.chart-head span{color:var(--muted);font-size:13px}.chart-head strong{display:block;font-size:32px;margin-top:3px}.chart-summary{display:flex;gap:24px}.chart-summary b{color:var(--ink)}.svg-chart{height:370px;margin-top:20px}.svg-chart svg{width:100%;height:100%;overflow:visible}.chart-grid line{stroke:#deeaee;stroke-width:1}.chart-grid text{fill:#8091a1;font-size:11px}.chart-line{fill:none;stroke:#198d89;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:url(#none);opacity:.12;fill:#35a9a0}.loading,.loading-card{display:grid;place-items:center;min-height:180px;color:var(--muted)}.history-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.history-cards article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.history-cards b{display:block;margin-top:7px}.alert-stack{display:grid;gap:10px}.weather-alert{background:#fff0ef;border-left:5px solid #df5d59;padding:16px 18px;border-radius:12px}.weather-alert b,.weather-alert span{display:block}.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.forecast-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;min-height:320px}.forecast-card>span{font-size:13px;font-weight:800;color:#477}.forecast-icon{font-size:44px;margin:15px 0}.forecast-card strong{font-family:Newsreader;font-size:40px}.forecast-card b{display:block;margin:4px 0 10px}.forecast-card small,.forecast-card p{color:var(--muted);font-size:12px}.hourly-heading{margin-top:0}.daily-heading{margin-top:50px}.hourly-strip{display:flex;overflow:auto;gap:10px;padding-bottom:12px}.hourly-strip article{flex:0 0 105px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;text-align:center}.hourly-strip span,.hourly-strip small{display:block;color:var(--muted);font-size:12px}.hourly-strip i{display:block;font-style:normal;font-size:25px;margin:8px}.hourly-strip b{font-size:22px}.radar-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}.radar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.radar-toolbar b,.radar-toolbar span{display:block}.radar-toolbar span{color:var(--muted);font-size:13px}.radar-image{background:#071b2d;display:grid;place-items:center;padding:16px}.radar-image img{width:min(100%,900px);border-radius:14px}.radar-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.radar-notes article{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px}.radar-notes b,.radar-notes span{display:block}.radar-notes span{color:var(--muted);font-size:13px}.status-banner{display:flex;align-items:center;gap:15px;background:#e8f8f2;border:1px solid #ccecdf;padding:18px;border-radius:16px}.status-banner i{width:14px;height:14px;background:#25b98c;border-radius:50%;box-shadow:0 0 0 7px rgba(37,185,140,.14)}.status-banner b,.status-banner span{display:block}.status-banner span{color:var(--muted);font-size:13px}.status-banner.offline,.status-banner.stale{background:#fff5e8}.setup-warning{margin-top:14px;background:#fff8d9;border:1px solid #f0dda0;padding:16px;border-radius:14px}.setup-warning b,.setup-warning span{display:block}.station-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.station-card,.payload-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}.station-card>span{color:#29968f;font-size:12px;font-weight:800;text-transform:uppercase}.station-card h2{font-family:Newsreader;margin:6px 0 18px}.station-card dl{margin:0}.station-card dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf2f4}.station-card dt{color:var(--muted)}.station-card dd{font-weight:800;margin:0}.payload-card{margin-top:18px}.payload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.payload-grid div{background:#f4f8f9;border-radius:10px;padding:10px}.payload-grid span,.payload-grid b{display:block;overflow-wrap:anywhere}.payload-grid span{font-size:11px;color:var(--muted)}.payload-grid b{font-size:12px;margin-top:4px}.about-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:35px}.story{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px}.story h3{margin-top:30px}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feature-list span{background:#edf7f6;border-radius:12px;padding:12px;font-weight:700}.about-card{background:var(--navy);color:#fff;border-radius:24px;padding:28px;align-self:start}.about-card img{background:#fff;border-radius:12px;padding:10px}.about-card h3{margin-top:25px}.about-card p{color:#cbdbe5}.site-footer{background:#081d32;color:#fff;padding:40px max(24px,calc((100% - 1180px)/2));display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:30px;align-items:center}.site-footer>div{display:flex;align-items:center;gap:12px}.site-footer img{width:48px}.site-footer b,.site-footer small{display:block}.site-footer small,.site-footer p{color:#a9becd;font-size:12px}.footer-links{display:flex;gap:14px;justify-content:end}.footer-links a{color:#d8e7ed}
@media(max-width:980px){.main-nav{display:none;position:absolute;top:72px;left:18px;right:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow)}.main-nav.open{display:grid}.nav-toggle{display:block}.header-live{margin-left:0}.hero-grid{grid-template-columns:1fr}.wind-orbit{display:none}.metric-grid,.detail-grid{grid-template-columns:repeat(2,1fr)}.split-section{grid-template-columns:1fr}.forecast-grid{grid-template-columns:repeat(2,1fr)}.station-grid{grid-template-columns:1fr}.payload-grid{grid-template-columns:repeat(2,1fr)}.site-footer{grid-template-columns:1fr}.footer-links{justify-content:start}.about-layout{grid-template-columns:1fr}}
@media(max-width:620px){.brand img{width:170px}.header-live{display:none}.weather-hero,.hero-grid{min-height:510px}.hero-grid{padding-block:45px}.hero-copy h1{font-size:112px}.hero-condition{font-size:29px}.hero-actions{flex-direction:column;align-items:stretch}.eyebrow{align-items:start;flex-direction:column}.metric-grid,.detail-grid,.history-cards,.radar-notes,.forecast-grid{grid-template-columns:1fr}.rain-layout{grid-template-columns:1fr}.stat-list.horizontal{grid-template-columns:1fr}.section-heading,.history-toolbar,.chart-head,.radar-toolbar,.neighborhood-note{align-items:flex-start;flex-direction:column}.chart-summary{gap:12px;flex-wrap:wrap}.page-hero h1{font-size:44px}.payload-grid,.feature-list{grid-template-columns:1fr}.site-footer{padding:35px 22px}}

/* Twin Oaks Weather v2 brand and live-data refinements */
:root{--forest:#12482e;--forest-dark:#092f20;--burgundy:#8e1728;--cream:#f5f0df;--gold:#e3bd49;--teal:#1f8f82}
body{background:#f7f8f4}
.site-header{background:rgba(255,253,247,.95);border-bottom-color:rgba(68,88,72,.17)}
.header-inner{padding-block:7px;min-height:78px}
.brand{min-width:286px;gap:12px}
.brand img{width:72px;height:64px;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px rgba(22,45,28,.14))}
.brand span{display:block;line-height:1.12}.brand b{display:block;color:var(--forest);font-family:Georgia,"Times New Roman",serif;font-size:19px}.brand small{display:block;color:#77666a;font-size:11px;margin-top:4px;letter-spacing:.06em;text-transform:uppercase}
.main-nav a:hover,.main-nav a.active{background:#edf4ec;color:var(--forest)}
.header-live{background:#fffdf8;border-color:#ded9c9;color:var(--forest)}
.status-dot[data-state="demo"]{background:var(--gold);box-shadow:0 0 0 5px rgba(227,189,73,.18)}.status-dot[data-state="stale"]{background:#e7902d;box-shadow:0 0 0 5px rgba(231,144,45,.17)}.status-dot[data-state="offline"]{background:#c94747;box-shadow:0 0 0 5px rgba(201,71,71,.16)}
.home-notices{padding-top:16px}.home-notices:empty{display:none}.data-notice{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:15px;border:1px solid #ead7a1;background:#fff9e7;margin-bottom:10px}.data-notice[hidden]{display:none}.data-notice i{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(227,189,73,.17);flex:0 0 auto}.data-notice b,.data-notice span{display:block}.data-notice b{color:#704d09}.data-notice span{font-size:13px;color:#786742}.data-notice.status-stale{background:#fff3df;border-color:#eccd9f}.data-notice.status-stale i{background:#e7902d}.data-notice.status-offline{background:#fff0ef;border-color:#e8bab7}.data-notice.status-offline i{background:#c94747}.data-notice.status-offline b{color:#8c2929}
.home-alerts{margin-bottom:10px}.home-alerts[hidden]{display:none}.home-alert{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:15px 18px;border-radius:15px;background:linear-gradient(110deg,#7d1221,#a42938);color:#fff;box-shadow:0 12px 32px rgba(120,15,33,.2)}.home-alert>span{grid-row:1/3;background:#fff2d1;color:#7d1221;border-radius:999px;padding:7px 10px;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.home-alert b{font-size:17px}.home-alert small{color:#ffe7e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-hero{min-height:490px;background:linear-gradient(125deg,#0c283c 0%,#0d493b 60%,#276f66 100%)}.weather-hero.is-night{background:linear-gradient(130deg,#071627 0%,#0b2935 58%,#123f3a 100%)}.weather-hero.is-day{background:linear-gradient(125deg,#0c2b42 0%,#115b50 60%,#358b78 100%)}
.hero-grid{min-height:490px;padding-block:54px;grid-template-columns:1.25fr .75fr;gap:48px}.hero-community-mark{position:absolute;right:-70px;bottom:-165px;width:490px;opacity:.075;filter:grayscale(.15);pointer-events:none;z-index:1}.weather-hero.is-night .hero-community-mark{opacity:.045}.weather-hero.is-night .orb{width:170px;height:170px;top:55px;right:12%;background:radial-gradient(circle at 38% 35%,#fff,#e9edf1 48%,rgba(219,231,239,.26) 66%,transparent 67%);opacity:.86}.weather-hero.is-night .orb:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;left:43px;top:-24px;background:#0b2634}.weather-hero.is-day .stars{display:none}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.5px);background-size:83px 73px;opacity:.28}.weather-hero.is-night .cloud{opacity:.23}.weather-hero.is-day .cloud{opacity:.7}
.hero-copy h1{font-size:clamp(92px,12vw,154px);margin:24px 0 7px}.hero-condition{font-size:33px;margin:15px 0 8px}.hero-records{display:flex;gap:10px;margin:15px 0 8px}.hero-records span{min-width:120px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);padding:9px 12px;border-radius:13px}.hero-records small,.hero-records b{display:block}.hero-records small{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#cae0dd}.hero-records b{font-size:20px;margin-top:2px}.hero-actions{margin-top:22px}.button.primary{background:var(--cream);color:var(--forest-dark)}.button.dark{background:var(--forest);color:#fff}.button.dark:hover{background:var(--burgundy)}
.wind-ring{width:244px;height:244px}.wind-center{inset:76px}.wind-arrow{height:84px}.dashboard-section,.split-section,.neighborhood-note{margin-top:54px}.kicker{color:var(--burgundy)}.section-heading>a{color:var(--forest)}.station-badge{background:#e5f3e8;color:var(--forest)}.station-badge.status-demo{background:#fff2c9;color:#7c5a08}.station-badge.status-stale{background:#fff0dc;color:#9b5c0a}.station-badge.status-offline{background:#ffe8e7;color:#9a2c2c}
.metric-card{border-color:#dde5dc}.metric-card .metric-icon{background:#edf4ec}.rain-panel{border-top:4px solid #4f9ecc}.sun-panel{border-top:4px solid var(--gold)}.detail-grid article{border-top:3px solid #d6dfd5}.neighborhood-note{background:linear-gradient(120deg,#f5f0df,#edf4ec);border-color:#dfdac8;padding:28px 34px;display:grid;grid-template-columns:1fr auto;gap:28px}.neighborhood-note p{margin-bottom:0}.page-hero{background:linear-gradient(125deg,#0b2c28,#155b43 65%,#8e1728 150%)}.about-card{background:linear-gradient(145deg,var(--forest-dark),var(--forest))}.about-card img{width:100%;max-height:260px;object-fit:contain;background:var(--cream);padding:14px}.site-footer{background:#092c21}.site-footer small,.site-footer p{color:#bcd0c4}.footer-links a{color:#f3e7c9}
@media(max-width:980px){.brand{min-width:220px}.brand img{width:62px;height:56px}.brand b{font-size:17px}.main-nav{top:78px}.hero-community-mark{right:-140px}.neighborhood-note{grid-template-columns:1fr auto}.neighborhood-note .button{grid-column:2}}
@media(max-width:620px){.header-inner{min-height:68px;padding-inline:14px}.brand{min-width:0}.brand img{width:55px;height:50px}.brand b{font-size:15px}.brand small{font-size:9px}.weather-hero,.hero-grid{min-height:470px}.hero-grid{padding-block:38px}.hero-copy h1{font-size:92px}.hero-condition{font-size:27px}.hero-records span{min-width:105px}.home-alert{grid-template-columns:1fr}.home-alert>span{grid-row:auto;width:max-content;margin-bottom:6px}.home-alert small{white-space:normal}.neighborhood-note{grid-template-columns:1fr}.neighborhood-note .button{grid-column:auto}}

/* Twin Oaks Weather v3: full-site solar theme */
body,.site-header,.main-nav,.nav-toggle,.header-live,.metric-card,.panel,.detail-grid article,.neighborhood-note,.chart-panel,.history-cards article,.forecast-card,.hourly-strip article,.radar-card,.radar-notes article,.station-card,.payload-card,.payload-grid div,.story,.about-card,.segmented,.segmented button,.history-toolbar select,.data-notice,.site-footer{transition:background-color 1.2s ease,background 1.2s ease,color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}
body[data-sun-phase="dawn"]{background:#ecebe2;color:#1c3028;--ink:#1c3028;--muted:#66756d;--line:#d2d8ce;--shadow:0 22px 60px rgba(29,52,42,.12)}
body[data-sun-phase="dawn"] .site-header{background:rgba(245,240,224,.94)}
body[data-sun-phase="dawn"] .weather-hero{background:linear-gradient(125deg,#263b4a 0%,#78644f 58%,#c58c65 100%)}
body[data-sun-phase="dawn"] .orb{background:radial-gradient(circle at 35% 35%,#fffbe7,#f5c87b 40%,rgba(245,200,123,.25) 66%,transparent 67%)}
body[data-sun-phase="dawn"] .metric-card,body[data-sun-phase="dawn"] .panel,body[data-sun-phase="dawn"] .detail-grid article,body[data-sun-phase="dawn"] .chart-panel,body[data-sun-phase="dawn"] .history-cards article,body[data-sun-phase="dawn"] .forecast-card,body[data-sun-phase="dawn"] .radar-card,body[data-sun-phase="dawn"] .radar-notes article,body[data-sun-phase="dawn"] .station-card,body[data-sun-phase="dawn"] .payload-card,body[data-sun-phase="dawn"] .story{background:#f7f5ec}
body[data-sun-phase="dusk"]{background:#17211d;color:#e5ece7;--ink:#e5ece7;--muted:#a9b6ae;--line:#394b42;--shadow:0 22px 60px rgba(0,0,0,.27)}
body[data-sun-phase="night"]{background:#07110e;color:#e8efea;--ink:#e8efea;--muted:#a6b6ad;--line:#294038;--shadow:0 22px 60px rgba(0,0,0,.38)}
body[data-sun-phase="dusk"] .site-header,body[data-sun-phase="night"] .site-header{background:rgba(8,25,19,.94);border-bottom-color:#2a4037}
body[data-sun-phase="dusk"] .brand b,body[data-sun-phase="night"] .brand b{color:#edf4ef}
body[data-sun-phase="dusk"] .brand small,body[data-sun-phase="night"] .brand small{color:#b6c2ba}
body[data-sun-phase="dusk"] .main-nav a,body[data-sun-phase="night"] .main-nav a{color:#b8c8bf}
body[data-sun-phase="dusk"] .main-nav a:hover,body[data-sun-phase="dusk"] .main-nav a.active,body[data-sun-phase="night"] .main-nav a:hover,body[data-sun-phase="night"] .main-nav a.active{background:#1b392d;color:#fff4d5}
body[data-sun-phase="dusk"] .nav-toggle,body[data-sun-phase="night"] .nav-toggle{background:#163126;color:#f2f7f3}
body[data-sun-phase="dusk"] .header-live,body[data-sun-phase="night"] .header-live{background:#10281f;border-color:#355044;color:#eaf2ed}
body[data-sun-phase="dusk"] .weather-hero{background:linear-gradient(130deg,#111b2a 0%,#25352f 58%,#654735 100%)}
body[data-sun-phase="night"] .weather-hero{background:linear-gradient(130deg,#040a12 0%,#081b21 58%,#0d3029 100%)}
body[data-sun-phase="dusk"] .page-hero{background:linear-gradient(125deg,#101c1a,#293d31 65%,#641829 145%)}
body[data-sun-phase="night"] .page-hero{background:linear-gradient(125deg,#050e0c,#123024 68%,#48121c 150%)}
body[data-sun-phase="dusk"] .metric-card,body[data-sun-phase="dusk"] .panel,body[data-sun-phase="dusk"] .detail-grid article,body[data-sun-phase="dusk"] .chart-panel,body[data-sun-phase="dusk"] .history-cards article,body[data-sun-phase="dusk"] .forecast-card,body[data-sun-phase="dusk"] .hourly-strip article,body[data-sun-phase="dusk"] .radar-card,body[data-sun-phase="dusk"] .radar-notes article,body[data-sun-phase="dusk"] .station-card,body[data-sun-phase="dusk"] .payload-card,body[data-sun-phase="dusk"] .story{background:#222e28;border-color:#3d5147;box-shadow:0 14px 38px rgba(0,0,0,.22)}
body[data-sun-phase="night"] .metric-card,body[data-sun-phase="night"] .panel,body[data-sun-phase="night"] .detail-grid article,body[data-sun-phase="night"] .chart-panel,body[data-sun-phase="night"] .history-cards article,body[data-sun-phase="night"] .forecast-card,body[data-sun-phase="night"] .hourly-strip article,body[data-sun-phase="night"] .radar-card,body[data-sun-phase="night"] .radar-notes article,body[data-sun-phase="night"] .station-card,body[data-sun-phase="night"] .payload-card,body[data-sun-phase="night"] .story{background:#102019;border-color:#294239;box-shadow:0 14px 40px rgba(0,0,0,.34)}
body[data-sun-phase="dusk"] .metric-card .metric-icon,body[data-sun-phase="night"] .metric-card .metric-icon{background:#1d382d}
body[data-sun-phase="dusk"] .metric-card small,body[data-sun-phase="night"] .metric-card small,body[data-sun-phase="dusk"] .neighborhood-note p,body[data-sun-phase="night"] .neighborhood-note p,body[data-sun-phase="dusk"] .station-card dt,body[data-sun-phase="night"] .station-card dt{color:var(--muted)}
body[data-sun-phase="dusk"] .stat-list>div,body[data-sun-phase="night"] .stat-list>div,body[data-sun-phase="dusk"] .station-card dl div,body[data-sun-phase="night"] .station-card dl div{border-bottom-color:#31473d}
body[data-sun-phase="dusk"] .rain-drop{background:linear-gradient(135deg,#193e4b,#24596a)}
body[data-sun-phase="night"] .rain-drop{background:linear-gradient(135deg,#112d38,#174451)}
body[data-sun-phase="dusk"] .rain-drop small,body[data-sun-phase="night"] .rain-drop small{color:#b7dbe5}
body[data-sun-phase="dusk"] .sun-panel{background:linear-gradient(150deg,#232d27 20%,#3a3322)}
body[data-sun-phase="night"] .sun-panel{background:linear-gradient(150deg,#101d18 20%,#282316)}
body[data-sun-phase="dusk"] .uv-chip,body[data-sun-phase="night"] .uv-chip{background:#4a3d19;color:#ffe29a}
body[data-sun-phase="dusk"] .sun-track,body[data-sun-phase="night"] .sun-track{opacity:.72}
body[data-sun-phase="dusk"] .neighborhood-note{background:linear-gradient(120deg,#2d2b23,#1f3329);border-color:#465044}
body[data-sun-phase="night"] .neighborhood-note{background:linear-gradient(120deg,#191b16,#11281e);border-color:#324439}
body[data-sun-phase="dusk"] .button.dark,body[data-sun-phase="night"] .button.dark{background:#8e1728}
body[data-sun-phase="dusk"] .section-heading>a,body[data-sun-phase="night"] .section-heading>a{color:#9bd2b5}
body[data-sun-phase="dusk"] .kicker,body[data-sun-phase="night"] .kicker{color:#ef8594}
body[data-sun-phase="dusk"] .station-badge,body[data-sun-phase="night"] .station-badge{background:#1b402f;color:#b8eccd}
body[data-sun-phase="dusk"] .segmented,body[data-sun-phase="night"] .segmented{background:#162a22}
body[data-sun-phase="dusk"] .segmented button,body[data-sun-phase="night"] .segmented button{color:#a9b9b0}
body[data-sun-phase="dusk"] .segmented button.active,body[data-sun-phase="night"] .segmented button.active{background:#294238;color:#f0f7f2}
body[data-sun-phase="dusk"] .history-toolbar select,body[data-sun-phase="night"] .history-toolbar select{background:#15271f;color:#eaf1ec;border-color:#395045}
body[data-sun-phase="dusk"] .payload-grid div,body[data-sun-phase="night"] .payload-grid div{background:#172b23}
body[data-sun-phase="dusk"] .about-card,body[data-sun-phase="night"] .about-card{background:linear-gradient(145deg,#050d0a,#153726)}
body[data-sun-phase="dusk"] .about-card img,body[data-sun-phase="night"] .about-card img{background:#d9d3c1}
body[data-sun-phase="dusk"] .feature-list span,body[data-sun-phase="night"] .feature-list span{background:#193328;color:#dfeae3}
body[data-sun-phase="dusk"] .radar-image,body[data-sun-phase="night"] .radar-image{background:#08110e}
body[data-sun-phase="dusk"] .dark-text,body[data-sun-phase="night"] .dark-text{color:#e8f0eb!important;border-color:#4b6156!important}
body[data-sun-phase="dusk"] .data-notice.status-demo,body[data-sun-phase="night"] .data-notice.status-demo{background:#352d17;border-color:#67582a}
body[data-sun-phase="dusk"] .data-notice.status-demo b,body[data-sun-phase="night"] .data-notice.status-demo b{color:#ffe09a}
body[data-sun-phase="dusk"] .data-notice.status-demo span,body[data-sun-phase="night"] .data-notice.status-demo span{color:#d7c28d}
body[data-sun-phase="dusk"] .site-footer{background:#071912}
body[data-sun-phase="night"] .site-footer{background:#030b08}
@media(max-width:980px){body[data-sun-phase="dusk"] .main-nav,body[data-sun-phase="night"] .main-nav{background:#10251c;border-color:#355044}}

/* v3.1: keep native history metric controls readable in light and dark browser themes */
.history-toolbar select{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  color-scheme:light;
  min-width:190px;
  font:inherit;
  font-weight:700;
}
.history-toolbar select option{
  background:#fff;
  color:#13253b;
  -webkit-text-fill-color:#13253b;
}
body[data-sun-phase="dusk"] .history-toolbar select,
body[data-sun-phase="night"] .history-toolbar select{
  color:#eaf1ec;
  -webkit-text-fill-color:#eaf1ec;
  color-scheme:dark;
}
body[data-sun-phase="dusk"] .history-toolbar select option,
body[data-sun-phase="night"] .history-toolbar select option{
  background:#15271f;
  color:#eaf1ec;
  -webkit-text-fill-color:#eaf1ec;
}

/* ============================================================
   Twin Oaks Weather v4: live weather appearance engine
   The sun phase controls brightness; the weather mode controls atmosphere.
   ============================================================ */
.hero-weather-detail{max-width:560px;margin:0 0 6px;color:#bcd8dd;font-size:14px}.weather-effects{position:absolute;inset:0;z-index:.5;overflow:hidden;pointer-events:none}.weather-effects>span{position:absolute;opacity:0;transition:opacity 1.2s ease}.storm-cloud{width:520px;height:120px;border-radius:999px;background:rgba(19,30,39,.76);filter:blur(2px);box-shadow:120px -40px 0 5px rgba(24,36,45,.68),250px 5px 0 -15px rgba(15,25,33,.72)}.storm-cloud:before,.storm-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.storm-cloud:before{width:210px;height:210px;left:85px;bottom:0}.storm-cloud:after{width:170px;height:170px;right:70px;bottom:0}.storm-cloud-a{right:-120px;top:25px}.storm-cloud-b{left:-210px;top:140px;transform:scale(.75)}.rain-curtain{inset:-20% -10%;background-image:repeating-linear-gradient(112deg,transparent 0 16px,rgba(202,234,248,.42) 17px 18px,transparent 19px 34px);background-size:180px 180px;transform:translateZ(0)}.snow-field{inset:-20%;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 2.8px),radial-gradient(circle,rgba(236,248,255,.8) 0 1.5px,transparent 2.3px),radial-gradient(circle,rgba(255,255,255,.7) 0 3px,transparent 3.8px);background-size:96px 110px,137px 151px,211px 230px;background-position:15px 8px,43px 61px,104px 29px}.snow-field-b{filter:blur(1px);transform:scale(1.15);opacity:0}.fog-bank{left:-15%;right:-15%;height:150px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(225,235,235,.65) 20%,rgba(242,247,246,.75) 55%,rgba(213,225,224,.55) 80%,transparent);filter:blur(17px)}.fog-bank-a{top:90px}.fog-bank-b{bottom:35px;transform:scaleX(1.2)}.lightning-flash{inset:0;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.95),rgba(218,232,255,.26) 20%,transparent 48%)}.wind-lines{inset:0;background-image:repeating-linear-gradient(170deg,transparent 0 30px,rgba(222,251,246,.2) 31px 32px,transparent 33px 72px);background-size:360px 160px}.heat-haze{inset:-15%;background:repeating-radial-gradient(ellipse at 50% 110%,rgba(255,215,145,.12) 0 18px,transparent 20px 42px);filter:blur(4px)}.frost-edge{inset:0;box-shadow:inset 0 0 70px rgba(210,239,255,.52);background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 28%,transparent 75%,rgba(215,241,255,.13))}

@keyframes wxRain{from{background-position:0 -180px}to{background-position:80px 180px}}
@keyframes wxSnowA{from{background-position:15px -170px,43px -100px,104px -220px}to{background-position:55px 170px,5px 205px,155px 240px}}
@keyframes wxSnowB{from{background-position:0 -120px,70px -180px,20px -260px}to{background-position:-70px 220px,130px 180px,-30px 260px}}
@keyframes wxFogA{0%,100%{transform:translateX(-4%) scaleX(1.1)}50%{transform:translateX(7%) scaleX(1.2)}}
@keyframes wxFogB{0%,100%{transform:translateX(6%) scaleX(1.25)}50%{transform:translateX(-8%) scaleX(1.15)}}
@keyframes wxLightning{0%,88%,91%,100%{opacity:0}89%{opacity:.75}90%{opacity:.08}92%{opacity:.45}93%{opacity:0}}
@keyframes wxWind{from{background-position:-360px 0}to{background-position:360px -30px}}
@keyframes wxCloudDriftA{from{transform:translateX(0)}to{transform:translateX(-120px)}}
@keyframes wxCloudDriftB{from{transform:scale(.75) translateX(0)}to{transform:scale(.75) translateX(150px)}}
@keyframes wxHeat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.025)}}

body[data-weather-mode="cloud"]{--wx-page:#e8edeb;--wx-card:#f6f8f7;--wx-line:#ccd7d3;--wx-ink:#1a302b;--wx-muted:#64736e;--wx-header:rgba(241,244,241,.94);--wx-icon:#e3ebe7;--wx-note:#e5ece7;--wx-footer:#16372e;--wx-pagehero:linear-gradient(125deg,#314753,#46645e 65%,#526a63)}
body[data-weather-mode="rain"]{--wx-page:#dce7eb;--wx-card:#f1f7f9;--wx-line:#bfd0d7;--wx-ink:#122b39;--wx-muted:#5d7480;--wx-header:rgba(231,240,243,.94);--wx-icon:#dbecef;--wx-note:#dcebed;--wx-footer:#102e39;--wx-pagehero:linear-gradient(125deg,#173544,#23546a 65%,#315f68)}
body[data-weather-mode="storm"]{--wx-page:#cfd8dc;--wx-card:#e8eef0;--wx-line:#aebdc4;--wx-ink:#152731;--wx-muted:#566a73;--wx-header:rgba(220,228,230,.95);--wx-icon:#d5e0e3;--wx-note:#d9e2e4;--wx-footer:#101e26;--wx-pagehero:linear-gradient(125deg,#16232d,#293b46 68%,#4d3039)}
body[data-weather-mode="severe"]{--wx-page:#d6c9cb;--wx-card:#eee7e8;--wx-line:#c4aeb2;--wx-ink:#30171c;--wx-muted:#765b61;--wx-header:rgba(237,228,229,.95);--wx-icon:#eadbde;--wx-note:#eadfe0;--wx-footer:#26070d;--wx-pagehero:linear-gradient(125deg,#21070c,#4b101b 60%,#741727)}
body[data-weather-mode="snow"]{--wx-page:#edf4f7;--wx-card:#fbfdfe;--wx-line:#cddde5;--wx-ink:#193247;--wx-muted:#647989;--wx-header:rgba(247,251,252,.95);--wx-icon:#e8f3f8;--wx-note:#edf5f8;--wx-footer:#19384c;--wx-pagehero:linear-gradient(125deg,#6c8799,#9db4c2 58%,#d5e1e7)}
body[data-weather-mode="ice"]{--wx-page:#e4edf2;--wx-card:#f7fbfd;--wx-line:#bfd0dc;--wx-ink:#172f43;--wx-muted:#607687;--wx-header:rgba(239,247,250,.95);--wx-icon:#e1eef5;--wx-note:#e6f0f4;--wx-footer:#153249;--wx-pagehero:linear-gradient(125deg,#486779,#809cad 58%,#bbccd5)}
body[data-weather-mode="fog"]{--wx-page:#e1e5e2;--wx-card:#f3f5f3;--wx-line:#c8ceca;--wx-ink:#26332f;--wx-muted:#6b7571;--wx-header:rgba(239,242,239,.95);--wx-icon:#e5e9e6;--wx-note:#e7eae7;--wx-footer:#273832;--wx-pagehero:linear-gradient(125deg,#66726f,#8d9894 58%,#bdc5c2)}
body[data-weather-mode="wind"]{--wx-page:#dfeceb;--wx-card:#f3f9f8;--wx-line:#bed3d0;--wx-ink:#173735;--wx-muted:#5e7875;--wx-header:rgba(234,244,243,.95);--wx-icon:#deefec;--wx-note:#e1efec;--wx-footer:#123b37;--wx-pagehero:linear-gradient(125deg,#1a4c4a,#2f7770 60%,#56998d)}
body[data-weather-mode="heat"]{--wx-page:#f2e4d1;--wx-card:#fff8ed;--wx-line:#e2c8a6;--wx-ink:#44291b;--wx-muted:#806957;--wx-header:rgba(252,245,234,.95);--wx-icon:#f8ead3;--wx-note:#f5e8d4;--wx-footer:#542716;--wx-pagehero:linear-gradient(125deg,#75361b,#b5652d 58%,#d89b50)}
body[data-weather-mode="cold"]{--wx-page:#e1edf6;--wx-card:#f5faff;--wx-line:#c3d7e5;--wx-ink:#17334c;--wx-muted:#60798e;--wx-header:rgba(237,246,251,.95);--wx-icon:#dfedf7;--wx-note:#e4f0f8;--wx-footer:#123250;--wx-pagehero:linear-gradient(125deg,#244d72,#3f759e 58%,#6ca4c4)}

body[data-sun-phase="dusk"][data-weather-mode]:not([data-weather-mode="clear"]),body[data-sun-phase="night"][data-weather-mode]:not([data-weather-mode="clear"]){--wx-page:#0d1715;--wx-card:#17241f;--wx-line:#344941;--wx-ink:#e6eee9;--wx-muted:#a5b4ac;--wx-header:rgba(9,23,18,.95);--wx-icon:#20372e;--wx-note:#1b3028;--wx-footer:#030b08}
body[data-sun-phase="dusk"][data-weather-mode="rain"],body[data-sun-phase="night"][data-weather-mode="rain"]{--wx-page:#09161d;--wx-card:#12252d;--wx-line:#2b4651;--wx-icon:#193640;--wx-note:#18323b;--wx-footer:#02090d}
body[data-sun-phase="dusk"][data-weather-mode="storm"],body[data-sun-phase="night"][data-weather-mode="storm"]{--wx-page:#060a0e;--wx-card:#11191e;--wx-line:#303b42;--wx-icon:#1d292f;--wx-note:#151f24;--wx-footer:#020405}
body[data-sun-phase="dusk"][data-weather-mode="severe"],body[data-sun-phase="night"][data-weather-mode="severe"]{--wx-page:#100306;--wx-card:#200b10;--wx-line:#5b2831;--wx-icon:#35141a;--wx-note:#2c1016;--wx-footer:#050102}
body[data-sun-phase="dusk"][data-weather-mode="snow"],body[data-sun-phase="night"][data-weather-mode="snow"]{--wx-page:#0d1c29;--wx-card:#172b3a;--wx-line:#395366;--wx-icon:#1e3a4e;--wx-note:#1d3445;--wx-footer:#050d14}
body[data-sun-phase="dusk"][data-weather-mode="ice"],body[data-sun-phase="night"][data-weather-mode="ice"]{--wx-page:#091a28;--wx-card:#142a39;--wx-line:#355166;--wx-icon:#1b3a4d;--wx-note:#193445;--wx-footer:#040c13}
body[data-sun-phase="dusk"][data-weather-mode="fog"],body[data-sun-phase="night"][data-weather-mode="fog"]{--wx-page:#151c1a;--wx-card:#222b28;--wx-line:#46514d;--wx-icon:#2d3935;--wx-note:#29332f;--wx-footer:#080d0b}
body[data-sun-phase="dusk"][data-weather-mode="wind"],body[data-sun-phase="night"][data-weather-mode="wind"]{--wx-page:#071b1a;--wx-card:#102b28;--wx-line:#2c504b;--wx-icon:#183d38;--wx-note:#173732;--wx-footer:#020b0a}
body[data-sun-phase="dusk"][data-weather-mode="heat"],body[data-sun-phase="night"][data-weather-mode="heat"]{--wx-page:#211108;--wx-card:#332015;--wx-line:#64432d;--wx-icon:#49301e;--wx-note:#40291a;--wx-footer:#0d0603}
body[data-sun-phase="dusk"][data-weather-mode="cold"],body[data-sun-phase="night"][data-weather-mode="cold"]{--wx-page:#071526;--wx-card:#11263b;--wx-line:#31506b;--wx-icon:#193650;--wx-note:#183247;--wx-footer:#020912}

body[data-weather-mode]:not([data-weather-mode="clear"]){background:var(--wx-page);color:var(--wx-ink);--ink:var(--wx-ink);--muted:var(--wx-muted);--line:var(--wx-line);--shadow:0 22px 60px rgba(8,28,34,.18)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .site-header{background:var(--wx-header);border-bottom-color:var(--wx-line)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .main-nav a{color:var(--wx-muted)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .main-nav a:hover,body[data-weather-mode]:not([data-weather-mode="clear"]) .main-nav a.active{background:var(--wx-icon);color:var(--wx-ink)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .header-live,body[data-weather-mode]:not([data-weather-mode="clear"]) .nav-toggle{background:var(--wx-card);border-color:var(--wx-line);color:var(--wx-ink)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .page-hero{background:var(--wx-pagehero)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .metric-card,body[data-weather-mode]:not([data-weather-mode="clear"]) .panel,body[data-weather-mode]:not([data-weather-mode="clear"]) .detail-grid article,body[data-weather-mode]:not([data-weather-mode="clear"]) .chart-panel,body[data-weather-mode]:not([data-weather-mode="clear"]) .history-cards article,body[data-weather-mode]:not([data-weather-mode="clear"]) .forecast-card,body[data-weather-mode]:not([data-weather-mode="clear"]) .hourly-strip article,body[data-weather-mode]:not([data-weather-mode="clear"]) .radar-card,body[data-weather-mode]:not([data-weather-mode="clear"]) .radar-notes article,body[data-weather-mode]:not([data-weather-mode="clear"]) .station-card,body[data-weather-mode]:not([data-weather-mode="clear"]) .payload-card,body[data-weather-mode]:not([data-weather-mode="clear"]) .story{background:var(--wx-card);border-color:var(--wx-line);box-shadow:0 14px 40px rgba(9,32,38,.12)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .metric-card .metric-icon,body[data-weather-mode]:not([data-weather-mode="clear"]) .payload-grid div,body[data-weather-mode]:not([data-weather-mode="clear"]) .feature-list span{background:var(--wx-icon);color:var(--wx-ink)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .neighborhood-note{background:var(--wx-note);border-color:var(--wx-line)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .neighborhood-note p,body[data-weather-mode]:not([data-weather-mode="clear"]) .metric-card small{color:var(--wx-muted)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .site-footer{background:var(--wx-footer)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .segmented{background:var(--wx-icon)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .segmented button{color:var(--wx-muted)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .segmented button.active,body[data-weather-mode]:not([data-weather-mode="clear"]) .history-toolbar select{background:var(--wx-card);color:var(--wx-ink);-webkit-text-fill-color:var(--wx-ink);border-color:var(--wx-line)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .history-toolbar select option{background:var(--wx-card);color:var(--wx-ink);-webkit-text-fill-color:var(--wx-ink)}
body[data-weather-mode]:not([data-weather-mode="clear"]) .sun-panel{background:linear-gradient(145deg,var(--wx-card),var(--wx-note))}
body[data-weather-mode]:not([data-weather-mode="clear"]) .stat-list>div,body[data-weather-mode]:not([data-weather-mode="clear"]) .station-card dl div{border-color:var(--wx-line)}

body[data-weather-mode="cloud"] .weather-hero{background:linear-gradient(125deg,#314955,#4b6968 58%,#6f847f)}
body[data-weather-mode="cloud"] .orb{opacity:.3;filter:blur(5px)}
body[data-weather-mode="cloud"] .cloud{opacity:.88!important;background:rgba(225,233,232,.34)}
body[data-weather-mode="rain"] .weather-hero{background:linear-gradient(125deg,#122d3a,#1c4958 58%,#285866)}
body[data-weather-mode="rain"] .orb{opacity:.12;filter:blur(8px)}
body[data-weather-mode="rain"] .cloud{opacity:.85!important;background:rgba(43,67,78,.64)}
body[data-weather-mode="rain"] .storm-cloud,body[data-weather-mode="rain"] .rain-curtain{opacity:.48}
body[data-weather-mode="rain"] .rain-curtain{animation:wxRain .75s linear infinite}
body[data-weather-mode="rain"][data-weather-intensity="moderate"] .rain-curtain{opacity:.67;animation-duration:.55s}
body[data-weather-mode="rain"][data-weather-intensity="heavy"] .rain-curtain{opacity:.82;animation-duration:.38s}
body[data-weather-mode="rain"] .rain-panel{box-shadow:0 18px 55px rgba(49,130,170,.24);border-top-color:#278cc2}
body[data-weather-mode="storm"] .weather-hero{background:linear-gradient(125deg,#0a1218,#17252e 55%,#27333a)}
body[data-weather-mode="storm"] .orb,body[data-weather-mode="severe"] .orb{opacity:.04}
body[data-weather-mode="storm"] .cloud,body[data-weather-mode="severe"] .cloud{opacity:.2!important}
body[data-weather-mode="storm"] .storm-cloud,body[data-weather-mode="storm"] .rain-curtain{opacity:.78}
body[data-weather-mode="storm"] .storm-cloud-a{animation:wxCloudDriftA 18s ease-in-out infinite alternate}
body[data-weather-mode="storm"] .storm-cloud-b{animation:wxCloudDriftB 23s ease-in-out infinite alternate}
body[data-weather-mode="storm"] .rain-curtain{animation:wxRain .34s linear infinite}
body[data-weather-mode="storm"] .lightning-flash{animation:wxLightning 17s linear infinite}
body[data-weather-mode="severe"] .weather-hero{background:linear-gradient(125deg,#10060a,#250a11 55%,#47111d)}
body[data-weather-mode="severe"] .storm-cloud,body[data-weather-mode="severe"] .rain-curtain{opacity:.86}
body[data-weather-mode="severe"] .rain-curtain{animation:wxRain .3s linear infinite}
body[data-weather-mode="severe"] .lightning-flash{animation:wxLightning 10s linear infinite}
body[data-weather-mode="severe"] .live-pill{background:#8d1728;border-color:#d05d6d}
body[data-weather-mode="snow"] .weather-hero{background:linear-gradient(125deg,#496a82,#6f8da0 57%,#a8bdc9)}
body[data-weather-mode="snow"] .orb{opacity:.25;filter:blur(6px)}
body[data-weather-mode="snow"] .cloud{opacity:.55!important;background:rgba(235,244,248,.45)}
body[data-weather-mode="snow"] .snow-field-a{opacity:.76;animation:wxSnowA 11s linear infinite}
body[data-weather-mode="snow"] .snow-field-b{opacity:.45;animation:wxSnowB 17s linear infinite}
body[data-weather-mode="snow"] .frost-edge{opacity:.55}
body[data-weather-mode="ice"] .weather-hero{background:linear-gradient(125deg,#3c5a70,#657f92 57%,#93aebb)}
body[data-weather-mode="ice"] .rain-curtain{opacity:.38;animation:wxRain 1.05s linear infinite}
body[data-weather-mode="ice"] .frost-edge{opacity:.82}
body[data-weather-mode="fog"] .weather-hero{background:linear-gradient(125deg,#556562,#75827e 57%,#98a19e)}
body[data-weather-mode="fog"] .orb{opacity:.15;filter:blur(13px)}
body[data-weather-mode="fog"] .cloud{opacity:.22!important}
body[data-weather-mode="fog"] .fog-bank-a{opacity:.38;animation:wxFogA 18s ease-in-out infinite}
body[data-weather-mode="fog"] .fog-bank-b{opacity:.28;animation:wxFogB 24s ease-in-out infinite}
body[data-weather-mode="wind"] .weather-hero{background:linear-gradient(125deg,#123b42,#1e6260 58%,#3b7c73)}
body[data-weather-mode="wind"] .cloud-a{animation:wxCloudDriftA 5s linear infinite alternate}
body[data-weather-mode="wind"] .cloud-b{animation:wxCloudDriftB 7s linear infinite alternate}
body[data-weather-mode="wind"] .wind-lines{opacity:.55;animation:wxWind 2.8s linear infinite}
body[data-weather-mode="heat"] .weather-hero{background:linear-gradient(125deg,#71331b,#ad5f2a 58%,#d19249)}
body[data-weather-mode="heat"] .orb{opacity:1;transform:scale(1.15);filter:blur(.3px)}
body[data-weather-mode="heat"] .heat-haze{opacity:.7;animation:wxHeat 4.5s ease-in-out infinite}
body[data-weather-mode="heat"] .sun-panel{box-shadow:0 18px 55px rgba(205,112,36,.22)}
body[data-weather-mode="cold"] .weather-hero{background:linear-gradient(125deg,#17395a,#2b6489 58%,#5590ae)}
body[data-weather-mode="cold"] .frost-edge{opacity:.74}

body[data-sun-phase="dusk"][data-weather-mode="cloud"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="cloud"] .weather-hero{background:linear-gradient(125deg,#111a1d,#1e2a29 58%,#2f3a36)}
body[data-sun-phase="dusk"][data-weather-mode="rain"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="rain"] .weather-hero{background:linear-gradient(125deg,#050d13,#0a1e28 58%,#13323b)}
body[data-sun-phase="dusk"][data-weather-mode="snow"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="snow"] .weather-hero{background:linear-gradient(125deg,#071421,#10283a 58%,#24445a)}
body[data-sun-phase="dusk"][data-weather-mode="fog"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="fog"] .weather-hero{background:linear-gradient(125deg,#111817,#1d2623 58%,#2e3834)}
body[data-sun-phase="dusk"][data-weather-mode="heat"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="heat"] .weather-hero{background:linear-gradient(125deg,#190b06,#33160b 58%,#552a13)}
body[data-sun-phase="dusk"][data-weather-mode="cold"] .weather-hero,body[data-sun-phase="night"][data-weather-mode="cold"] .weather-hero{background:linear-gradient(125deg,#030b15,#091a2b 58%,#133451)}

@media(max-width:980px){body[data-weather-mode]:not([data-weather-mode="clear"]) .main-nav{background:var(--wx-card);border-color:var(--wx-line)}}
@media(max-width:620px){.hero-weather-detail{font-size:13px;max-width:90%}.storm-cloud{transform:scale(.72)}.storm-cloud-b{display:none}.rain-curtain{inset:-30%}.fog-bank{height:110px}}
@media(prefers-reduced-motion:reduce){.weather-effects>span,.cloud{animation:none!important}.lightning-flash{display:none}.rain-curtain,.snow-field,.wind-lines{opacity:.2!important}}


/* v4.1 temporary JacksonMoWeather live-source states */
.data-notice.status-temporary{background:#eef7fb;border-color:#b9d9e7;color:#183e55}
.data-notice.status-temporary i{background:#42a9d4;box-shadow:0 0 0 8px rgba(66,169,212,.12)}
.data-notice.status-temporary b{color:#173f58}
.station-badge.status-temporary{background:#e5f2f8;color:#245f7d;border-color:#b9d9e7}
.status-banner.temporary{background:#eef7fb;border-color:#b9d9e7;color:#173f58}
.status-banner.temporary i{background:#42a9d4}
.temporary-source-callout{padding:18px 20px;margin:0 0 28px;border:1px solid #b9d9e7;border-radius:18px;background:#eef7fb;color:#183e55}
.temporary-source-callout b{display:block;margin-bottom:5px;color:#173f58}
.temporary-source-callout p{margin:0}
body[data-sun-phase="night"] .data-notice.status-temporary,body[data-sun-phase="dusk"] .data-notice.status-temporary,body[data-sun-phase="night"] .status-banner.temporary,body[data-sun-phase="dusk"] .status-banner.temporary{background:#122631;border-color:#284a5a;color:#d5e8f0}
body[data-sun-phase="night"] .data-notice.status-temporary b,body[data-sun-phase="dusk"] .data-notice.status-temporary b,body[data-sun-phase="night"] .status-banner.temporary b,body[data-sun-phase="dusk"] .status-banner.temporary b{color:#eefaff}
body[data-sun-phase="night"] .station-badge.status-temporary,body[data-sun-phase="dusk"] .station-badge.status-temporary{background:#18313d;color:#c9e6f2;border-color:#345565}
body[data-sun-phase="night"] .temporary-source-callout,body[data-sun-phase="dusk"] .temporary-source-callout{background:#122631;border-color:#284a5a;color:#d5e8f0}
body[data-sun-phase="night"] .temporary-source-callout b,body[data-sun-phase="dusk"] .temporary-source-callout b{color:#eefaff}

/* v4.2: reduce repeated logo use; header and hero watermark remain */
.footer-brand b{font-size:17px;letter-spacing:.01em}.footer-brand small{margin-top:3px}.neighborhood-note>div{min-width:0}

/* v4.3: compact secondary-page heroes so useful content appears sooner */
.page-hero,
.page-hero.compact{
  padding:42px 0 40px;
}
.page-hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-hero .kicker{
  margin:0 0 7px;
  font-size:11px;
  line-height:1.2;
}
.page-hero h1{
  margin:0 0 11px;
  font-size:clamp(44px,3.5vw,54px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.page-hero p{
  margin:0;
  max-width:780px;
  font-size:16px;
  line-height:1.5;
}
@media(min-width:1600px){
  .page-hero h1{font-size:58px}
}
@media(max-width:980px){
  .page-hero,
  .page-hero.compact{padding:36px 0 34px}
  .page-hero h1{font-size:clamp(40px,6vw,48px)}
  .page-hero p{font-size:15.5px}
}
@media(max-width:620px){
  .page-hero,
  .page-hero.compact{padding:28px 0 27px}
  .page-hero .kicker{margin-bottom:6px;font-size:10px}
  .page-hero h1{font-size:36px;line-height:1.08;margin-bottom:9px}
  .page-hero p{font-size:14px;line-height:1.45}
}


/* v4.4: tighter secondary-page intro spacing and public-friendly station notice */
.page-hero,
.page-hero.compact{
  padding:34px 0 26px;
}
.history-shell,
.forecast-shell,
.radar-shell,
.station-shell,
.about-layout{
  padding-top:44px;
}
.setup-warning.public-status{
  background:#eef7f1;
  border-color:#c9e4d3;
  color:#173e2c;
}
.setup-warning.public-status b{
  color:#123a29;
}
.setup-warning.public-status span{
  color:#4f6f61;
}
body[data-sun-phase="night"] .setup-warning.public-status,
body[data-sun-phase="dusk"] .setup-warning.public-status{
  background:#15271f;
  border-color:#315343;
  color:#d7eadf;
}
body[data-sun-phase="night"] .setup-warning.public-status b,
body[data-sun-phase="dusk"] .setup-warning.public-status b{
  color:#f0fff6;
}
body[data-sun-phase="night"] .setup-warning.public-status span,
body[data-sun-phase="dusk"] .setup-warning.public-status span{
  color:#b9d2c3;
}
@media(max-width:980px){
  .page-hero,
  .page-hero.compact{padding:30px 0 24px}
  .history-shell,
  .forecast-shell,
  .radar-shell,
  .station-shell,
  .about-layout{padding-top:38px}
}
@media(max-width:620px){
  .page-hero,
  .page-hero.compact{padding:24px 0 22px}
  .history-shell,
  .forecast-shell,
  .radar-shell,
  .station-shell,
  .about-layout{padding-top:30px}
}

/* v4.5: visitor tracker responsive table is in visitor-tracker.php; lightning add-on content */
.lightning-card{margin-top:18px;background:linear-gradient(135deg,#fff9e9,#eef7f4);border:1px solid #d9dfc9;border-radius:22px;padding:26px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start;box-shadow:0 16px 45px rgba(26,60,83,.06)}
.lightning-card h2,.lightning-about h3{font-family:Newsreader,Georgia,serif;margin:6px 0 10px;font-size:30px}.lightning-card p{color:var(--muted)}.lightning-card dl{margin:0}.lightning-card dl div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid rgba(19,37,59,.10)}.lightning-card dt{color:var(--muted)}.lightning-card dd{font-weight:800;margin:0;text-align:right}.lightning-card .lightning-note{grid-column:1/-1;margin:0}.lightning-link{justify-self:start}.lightning-about{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}.lightning-about h3{font-size:28px}.lightning-about .button{margin-top:8px}
body[data-sun-phase="dusk"] .lightning-card,body[data-sun-phase="night"] .lightning-card{background:linear-gradient(135deg,#2d2818,#162c23);border-color:#4b513b}body[data-sun-phase="dusk"] .lightning-about,body[data-sun-phase="night"] .lightning-about{border-color:#3b5146}
@media(max-width:780px){.lightning-card{grid-template-columns:1fr}.lightning-card .lightning-note{grid-column:auto}.lightning-card dl div{align-items:start}.lightning-card dd{max-width:55%}}


/* Live astronomically positioned star field */
.stars{position:absolute;inset:0;width:100%;height:100%;display:block;background:none!important;background-image:none!important;opacity:.62;transition:opacity .8s ease;z-index:0}
.weather-hero.is-day .stars{display:none}
body[data-sun-phase="dusk"] .stars{opacity:var(--twilight-star-opacity,.28)}
body[data-sun-phase="night"] .stars{opacity:var(--twilight-star-opacity,.78)}
body[data-weather-mode="cloud"] .stars{opacity:.12}
body[data-weather-mode="rain"] .stars,body[data-weather-mode="storm"] .stars,body[data-weather-mode="severe"] .stars,body[data-weather-mode="fog"] .stars,body[data-weather-mode="snow"] .stars,body[data-weather-mode="ice"] .stars{opacity:.015}
body[data-weather-mode="heat"] .stars,body[data-weather-mode="cold"] .stars,body[data-weather-mode="wind"] .stars{opacity:.5}
@media (prefers-reduced-motion:reduce){.stars{transition:none}}

/* v4.7 — accurate Moon phase and restrained bright-star emphasis */
.weather-hero.is-night .orb.live-moon{
  width:126px;
  height:126px;
  top:26px;
  right:12%;
  background:none;
  opacity:.94;
  filter:drop-shadow(0 0 14px rgba(224,237,241,.16));
  overflow:hidden;
}
.weather-hero.is-night .orb.live-moon:after{content:none}
.weather-hero.is-day .orb.live-moon{
  background:none;
}
.stars{opacity:.64}
@media(max-width:980px){
  .weather-hero.is-night .orb.live-moon{width:108px;height:108px;top:24px;right:7%}
}
@media(max-width:620px){
  .weather-hero.is-night .orb.live-moon{width:88px;height:88px;top:24px;right:4%}
}

/* v5.9 live paths; v9.2 keeps the Moon shadow transparent. */
.hero-sky .orb.live-sun,.hero-sky .orb.live-moon{position:absolute;right:auto;transform:translate(-50%,-50%);transition:left 60s linear,top 60s linear,opacity .8s ease,filter .8s ease}
.hero-sky .orb.live-sun{display:block;width:82px;height:82px;background:radial-gradient(circle at 36% 32%,#fffef2 0 9%,#fff3b0 31%,#f8cf67 68%,#e9aa3e 100%);border:1px solid rgba(255,244,188,.38);box-shadow:0 0 14px rgba(255,224,133,.48),0 0 38px rgba(249,201,103,.25);filter:none;z-index:0}
.hero-sky .orb.live-moon{width:126px;height:126px;background:none!important;background-color:transparent!important;background-image:none!important;border:0;box-shadow:none;opacity:.94;filter:drop-shadow(0 0 14px rgba(224,237,241,.16));overflow:hidden;z-index:0}
.hero-sky .orb[hidden]{display:none!important}
.hero-sky .orb.live-sun:after,.hero-sky .orb.live-moon:after{content:none!important}
body[data-sun-phase="night"] .live-sun,body[data-sun-phase="dusk"] .live-sun{display:none!important}
body[data-sun-phase="day"] .live-moon,body[data-sun-phase="dawn"] .live-moon{opacity:.48;filter:drop-shadow(0 0 8px rgba(224,237,241,.1))}
body[data-weather-mode="cloud"] .live-sun,body[data-weather-mode="cloud"] .live-moon{opacity:.3;filter:blur(5px)}
body[data-weather-mode="rain"] .live-sun,body[data-weather-mode="rain"] .live-moon{opacity:.12;filter:blur(8px)}
body[data-weather-mode="storm"] .live-sun,body[data-weather-mode="storm"] .live-moon,body[data-weather-mode="severe"] .live-sun,body[data-weather-mode="severe"] .live-moon{opacity:.04}
body[data-weather-mode="fog"] .live-sun,body[data-weather-mode="fog"] .live-moon{opacity:.15;filter:blur(13px)}

/* v8.8 — remove the complete celestial layer when the sky obscures it. */
body[data-weather-mode="cloud"][data-sky-cover="mostly"] .hero-sky .orb,
body[data-weather-mode="cloud"][data-sky-cover="overcast"] .hero-sky .orb,
body[data-weather-mode="rain"] .hero-sky .orb,
body[data-weather-mode="storm"] .hero-sky .orb,
body[data-weather-mode="severe"] .hero-sky .orb,
body[data-weather-mode="fog"] .hero-sky .orb,
body[data-weather-mode="snow"] .hero-sky .orb,
body[data-weather-mode="ice"] .hero-sky .orb{
  display:none!important;
  opacity:0!important;
  visibility:hidden;
  filter:none!important;
}

@media(max-width:980px){.hero-sky .orb.live-sun{width:72px;height:72px}.hero-sky .orb.live-moon{width:108px;height:108px}}
@media(max-width:620px){.hero-sky .orb.live-sun{width:62px;height:62px}.hero-sky .orb.live-moon{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.hero-sky .orb.live-sun,.hero-sky .orb.live-moon{transition:opacity .8s ease,filter .8s ease}}



/* Moon terminator visibility is handled inside south-sky.js; layout unchanged. */

/* ============================================================
   Twin Oaks Weather v4.9 — approved rain-on-glass effect
   Rounded water beads lead each drop, with a thin trail extending
   straight upward. The complete rain layer remains behind the
   temperature, condition text, wind dial, readings, and buttons.
   ============================================================ */
.rain-glass{
  inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity .9s ease;
  contain:layout paint;
}

/* Small beads that remain on the glass while the larger drops roll. */
.rain-glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 8px 11px at 8% 24%,rgba(228,247,252,.17) 0 38%,rgba(77,120,138,.11) 52%,transparent 70%),
    radial-gradient(ellipse 5px 8px at 18% 72%,rgba(228,247,252,.14) 0 38%,rgba(77,120,138,.09) 52%,transparent 70%),
    radial-gradient(ellipse 10px 14px at 43% 18%,rgba(228,247,252,.15) 0 38%,rgba(77,120,138,.10) 52%,transparent 70%),
    radial-gradient(ellipse 6px 9px at 63% 64%,rgba(228,247,252,.14) 0 38%,rgba(77,120,138,.09) 52%,transparent 70%),
    radial-gradient(ellipse 9px 13px at 82% 33%,rgba(228,247,252,.16) 0 38%,rgba(77,120,138,.10) 52%,transparent 70%),
    radial-gradient(ellipse 5px 8px at 94% 78%,rgba(228,247,252,.13) 0 38%,rgba(77,120,138,.08) 52%,transparent 70%);
  opacity:.64;
}

.glass-drop{
  position:absolute;
  z-index:1;
  top:-280px;
  left:var(--drop-x);
  width:var(--drop-size);
  height:var(--drop-total-height);
  opacity:var(--drop-alpha);
  transform:translate3d(-50%,-90px,0);
  animation-name:wxGlassDrop;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:var(--drop-delay);
  will-change:transform,opacity;
}

/* The narrow wet trail is above the bead, never tilted sideways. */
.glass-drop::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:var(--drop-trail-width);
  height:var(--drop-trail);
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(220,243,250,.12) 18%,
    rgba(205,235,245,.32) 74%,
    rgba(229,248,252,.62) 100%);
  box-shadow:0 0 2px rgba(220,246,253,.18);
}

/* The larger rounded water blob stays at the bottom of the trail. */
.glass-drop::after{
  content:"";
  position:absolute;
  left:50%;
  top:var(--drop-trail);
  width:var(--drop-size);
  height:var(--drop-bead-height);
  transform:translateX(-50%);
  border-radius:48% 52% 55% 45% / 34% 34% 66% 66%;
  border:1px solid rgba(229,248,252,.25);
  background:
    radial-gradient(circle at 34% 23%,rgba(255,255,255,.72) 0 8%,rgba(255,255,255,.18) 12%,transparent 26%),
    radial-gradient(ellipse at 50% 45%,rgba(205,236,246,.29) 0 42%,rgba(85,132,151,.18) 68%,rgba(15,48,62,.31) 100%);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.21),
    inset -3px -4px 6px rgba(6,31,42,.24),
    0 2px 5px rgba(0,0,0,.16),
    0 0 5px rgba(207,240,249,.13);
}

@keyframes wxGlassDrop{
  0%{transform:translate3d(-50%,-90px,0);opacity:0}
  5%{opacity:var(--drop-alpha)}
  92%{opacity:var(--drop-alpha)}
  100%{transform:translate3d(-50%,calc(100vh + 520px),0);opacity:0}
}

/* Remove the diagonal line curtain whenever liquid rain is displayed. */
body[data-weather-mode="rain"] .rain-curtain,
body[data-weather-mode="storm"] .rain-curtain,
body[data-weather-mode="severe"] .rain-curtain{display:none}

body[data-weather-mode="rain"] .rain-glass{opacity:.67}
body[data-weather-mode="rain"][data-weather-intensity="moderate"] .rain-glass{opacity:.79}
body[data-weather-mode="rain"][data-weather-intensity="heavy"] .rain-glass{opacity:.90}
body[data-weather-mode="storm"] .rain-glass{opacity:.86}
body[data-weather-mode="severe"] .rain-glass{opacity:.94}

body[data-weather-intensity="light"] .glass-drop{animation-duration:var(--drop-duration-light)}
body[data-weather-intensity="light"] .glass-drop:nth-child(3n){display:none}
body[data-weather-intensity="moderate"] .glass-drop{animation-duration:var(--drop-duration-moderate)}
body[data-weather-intensity="heavy"] .glass-drop{animation-duration:var(--drop-duration-heavy)}

@media(max-width:620px){
  .glass-drop:nth-child(4n){display:none}
}

@media(prefers-reduced-motion:reduce){
  .glass-drop{animation:none!important;transform:translate3d(-50%,34vh,0);opacity:.28!important}
  .rain-glass{opacity:.28!important}
}

/* v5.4 — restore the approved compact v4.6.4 rain-on-glass droplets. */
.rain-glass{inset:0;display:block;overflow:hidden;opacity:0;transition:opacity .8s ease;contain:layout paint}
.rain-glass::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.025),transparent 28%,rgba(198,229,241,.035) 70%,transparent);mix-blend-mode:screen;opacity:1}
.glass-drop{position:absolute;z-index:1;top:-12%;left:var(--x);width:var(--w);height:var(--h);background:none;box-shadow:none;filter:none;border-radius:0;opacity:var(--o);animation:glassRun var(--d) linear var(--delay) infinite;transform:translate3d(0,-18vh,0)}
.glass-drop::before{content:"";position:absolute;left:50%;bottom:58%;top:auto;width:16%;height:var(--trail);transform:translateX(-50%);border-radius:999px 999px 45% 45%;background:linear-gradient(to bottom,rgba(205,234,245,0),rgba(196,228,240,.08) 42%,rgba(185,220,234,.24) 82%,rgba(220,241,248,.38));box-shadow:0 0 2px rgba(205,235,246,.15);filter:blur(.45px);opacity:.78}
.glass-drop::after{content:"";position:absolute;inset:0;width:100%;height:100%;transform:none;border:0;border-radius:48% 52% 58% 58% / 42% 42% 68% 68%;background:radial-gradient(ellipse at 34% 24%,rgba(255,255,255,.82) 0 7%,rgba(214,238,247,.34) 18%,transparent 36%),radial-gradient(ellipse at 50% 72%,rgba(184,220,234,.30),rgba(142,191,211,.14) 57%,rgba(255,255,255,.38) 78%,rgba(78,127,149,.16) 100%);box-shadow:inset 1px 1px 2px rgba(255,255,255,.62),inset -2px -3px 4px rgba(58,102,121,.20),0 1px 2px rgba(0,0,0,.14);opacity:1}
.glass-drop-merged::before{width:20%;opacity:.92}.glass-drop-runner::before{width:17%}.glass-drop-slow::before{width:13%;opacity:.62}
.glass-bead{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50% 48% 55% 45%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),rgba(177,220,236,.18) 45%,rgba(71,120,142,.15) 72%,rgba(255,255,255,.28));box-shadow:inset 1px 1px 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1);opacity:var(--o);animation:beadPulse var(--p) ease-in-out var(--delay) infinite alternate}
@keyframes glassRun{0%{transform:translate3d(0,-18vh,0);opacity:0}8%{opacity:var(--o)}45%{transform:translate3d(0,45vh,0);opacity:var(--o)}100%{transform:translate3d(0,115vh,0);opacity:0}}
@keyframes beadPulse{from{transform:scale(.82);filter:brightness(.9)}to{transform:scale(1.08);filter:brightness(1.16)}}
body[data-weather-mode="rain"] .rain-glass,body[data-weather-mode="storm"] .rain-glass,body[data-weather-mode="severe"] .rain-glass{opacity:.72}
body[data-weather-intensity="light"] .rain-glass{opacity:.46}body[data-weather-intensity="moderate"] .rain-glass{opacity:.7}body[data-weather-intensity="heavy"] .rain-glass{opacity:.9}
body[data-weather-intensity="light"] .glass-drop:nth-of-type(n+13),body[data-weather-intensity="light"] .glass-bead:nth-of-type(n+77){display:none}
body[data-weather-intensity="moderate"] .glass-drop:nth-of-type(n+29),body[data-weather-intensity="moderate"] .glass-bead:nth-of-type(n+109){display:none}
body[data-weather-intensity="light"] .glass-drop{animation-duration:calc(var(--d) * 1.45);opacity:calc(var(--o) * .72)}body[data-weather-intensity="moderate"] .glass-drop{animation-duration:var(--d)}body[data-weather-intensity="heavy"] .glass-drop{animation-duration:calc(var(--d) * .58)}
body[data-weather-intensity="light"] .glass-drop::before{height:calc(var(--trail) * .55);opacity:.48}body[data-weather-intensity="moderate"] .glass-drop::before{height:var(--trail)}body[data-weather-intensity="heavy"] .glass-drop::before{height:calc(var(--trail) * 1.45);width:20%;opacity:.92}
@media(max-width:620px){.glass-drop:nth-child(n+19),.glass-bead:nth-child(n+31){display:none}}
@media(prefers-reduced-motion:reduce){.glass-drop{animation:none!important;top:34vh;transform:none;opacity:.28!important}.glass-bead{animation:none!important}}

/* v5.8 — falling drops mean rain now; stationary beads mean recently wet. */
body[data-glass-wet="true"] .rain-glass{opacity:calc(var(--glass-wet-opacity,0) * .62)}
body[data-glass-wet="false"] .rain-glass{opacity:0}
body[data-rain-active="false"] .glass-drop{display:none!important}
body[data-rain-active="false"] .glass-bead{animation:none!important}
body[data-rain-active="true"][data-weather-intensity="light"] .rain-glass{opacity:.46}
body[data-rain-active="true"][data-weather-intensity="moderate"] .rain-glass{opacity:.7}
body[data-rain-active="true"][data-weather-intensity="heavy"] .rain-glass{opacity:.9}

/* v5.0 private indoor readings and richer station summaries */
.hero-records small em{display:block;margin-top:2px;font-style:normal;font-size:9px;letter-spacing:.04em;text-transform:none;color:rgba(235,247,244,.82)}
.stat-list span small{display:block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:#84928b}
.last-rain{margin:8px auto 0!important;max-width:240px;font-size:12px;line-height:1.4}
.last-rain b{color:var(--ink)}
.rain-stats{align-content:center}
.private-reading{border-top-color:#a77422!important;background:linear-gradient(150deg,#fff,#fff8e6)!important}
.private-reading span small{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:999px;background:#f3dfac;color:#725515;font-size:9px;letter-spacing:.05em}
.setup-warning.private-status{background:#e8f5ec;border-color:#9bc7a9;color:#184b2d}
.setup-warning.private-status span{color:#3d6850}
.station-card .private-row{margin-inline:-10px;padding-inline:10px;background:linear-gradient(90deg,rgba(240,211,137,.18),transparent);border-radius:8px}
.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.private-diagnostics{border-top:4px solid #b4872c}
body[data-sun-phase="night"] .private-reading,body[data-sun-phase="dusk"] .private-reading{background:linear-gradient(145deg,#2a291c,#17251d)!important}
body[data-sun-phase="night"] .last-rain b,body[data-sun-phase="dusk"] .last-rain b{color:#e9f1eb}
@media(max-width:980px){.summary-grid{grid-template-columns:1fr}}

/* v5.1 forecast order and editable trusted IP controls */

/* v5.2 optional full-screen current-conditions display */
.fullscreen-toggle{position:absolute;z-index:12;top:20px;right:22px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.26);border-radius:12px;padding:10px 13px;background:rgba(7,31,49,.36);color:#fff;font:700 12px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,transform .2s}
.fullscreen-toggle:hover{background:rgba(7,31,49,.55);transform:translateY(-1px)}
.fullscreen-toggle span{font-size:18px;line-height:1}
.fullscreen-details{display:none}
.weather-hero:fullscreen{width:100vw;height:100vh;min-height:100vh;overflow:hidden;background-color:#0b2340}
.weather-hero:fullscreen .hero-grid{min-height:calc(100vh - 210px);height:auto;padding:clamp(62px,8vh,95px) clamp(35px,5vw,86px) 22px;grid-template-columns:1.25fr .75fr;gap:clamp(38px,7vw,110px)}
.weather-hero:fullscreen .wrap{width:100%;max-width:none}
.weather-hero:fullscreen .hero-copy h1{font-size:clamp(118px,19vh,210px);margin-top:clamp(20px,4vh,42px)}
.weather-hero:fullscreen .hero-condition{font-size:clamp(32px,4.5vh,54px);margin-top:14px}
.weather-hero:fullscreen .hero-actions{display:none}
.weather-hero:fullscreen .wind-ring{width:clamp(250px,30vh,350px);height:clamp(250px,30vh,350px)}
.weather-hero:fullscreen .wind-center{inset:31%}
.weather-hero:fullscreen .wind-arrow{height:36%}
.weather-hero:fullscreen .fullscreen-details{position:relative;z-index:7;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding:0 clamp(28px,4vw,70px) clamp(24px,4vh,42px)}
.weather-hero:fullscreen .fullscreen-details article{min-width:0;padding:15px 16px;border:1px solid rgba(255,255,255,.17);border-radius:16px;background:rgba(5,28,43,.31);backdrop-filter:blur(10px)}
.weather-hero:fullscreen .fullscreen-details span,.weather-hero:fullscreen .fullscreen-details b,.weather-hero:fullscreen .fullscreen-details small{display:block}
.weather-hero:fullscreen .fullscreen-details>article>span{color:#bcdde4;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.weather-hero:fullscreen .fullscreen-details b{margin-top:4px;color:#fff;font-size:clamp(18px,1.7vw,27px);white-space:nowrap}
.weather-hero:fullscreen .fullscreen-details small{margin-top:2px;color:#c7e0e5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-hero:fullscreen .fullscreen-highlight{background:rgba(22,118,120,.30)}
.weather-hero:fullscreen .fullscreen-rain{background:rgba(23,87,110,.34);border-color:rgba(160,225,239,.24)}
.weather-hero:fullscreen .fullscreen-sky{background:rgba(52,73,112,.34);border-color:rgba(188,211,255,.24)}
.fullscreen-details article{transition:opacity .35s ease,transform .35s ease}
@media(max-width:900px){.fullscreen-toggle b{display:none}.weather-hero:fullscreen{overflow:auto}.weather-hero:fullscreen .hero-grid{grid-template-columns:1fr 260px;min-height:auto;padding-top:75px}.weather-hero:fullscreen .fullscreen-details{grid-template-columns:repeat(4,1fr)}.weather-hero:fullscreen .hero-copy h1{font-size:clamp(92px,17vh,150px)}}
@media(max-width:620px){.fullscreen-toggle{top:12px;right:12px;padding:9px}.weather-hero:fullscreen .hero-grid{grid-template-columns:1fr;padding:70px 20px 18px;gap:24px}.weather-hero:fullscreen .hero-copy h1{font-size:96px}.weather-hero:fullscreen .hero-condition{font-size:30px}.weather-hero:fullscreen .wind-ring{width:220px;height:220px}.weather-hero:fullscreen .fullscreen-details{grid-template-columns:repeat(2,1fr);padding:0 14px 24px}.weather-hero:fullscreen .fullscreen-details article{padding:12px}.weather-hero:fullscreen .fullscreen-details b{font-size:19px}}

/* v6.4: keep the website watermark comfortably inside the right edge and
   remove the complete image element in every full-screen implementation. */
.hero-community-mark{right:30px}
@media(max-width:980px){.hero-community-mark{right:18px}}
.weather-hero:fullscreen .wind-orbit{display:block!important}
.weather-hero:fullscreen .hero-community-mark,
.weather-hero:-webkit-full-screen .hero-community-mark,
.weather-hero.is-fullscreen .hero-community-mark,
html:fullscreen .hero-community-mark,
html:-webkit-full-screen .hero-community-mark,
html.is-weather-fullscreen .hero-community-mark,
body.is-weather-fullscreen .hero-community-mark,
.hero-community-mark[hidden]{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;max-width:0!important;overflow:hidden!important}
@media(max-width:980px) and (min-width:621px){.weather-hero:fullscreen{overflow:hidden}.weather-hero:fullscreen .hero-grid{grid-template-columns:minmax(0,1fr) 230px;gap:clamp(24px,4vw,52px)}.weather-hero:fullscreen .wind-ring{width:220px;height:220px}.weather-hero:fullscreen .wind-orbit p{font-size:14px;margin-bottom:0}}
@media(max-height:850px) and (min-width:621px){.weather-hero:fullscreen .hero-grid{min-height:calc(100vh - 142px);padding-top:42px;padding-bottom:10px}.weather-hero:fullscreen .hero-copy h1{font-size:clamp(104px,17vh,158px);margin-top:16px;margin-bottom:5px}.weather-hero:fullscreen .hero-condition{font-size:clamp(28px,4vh,42px);margin:10px 0 4px}.weather-hero:fullscreen .hero-weather-detail{margin:4px 0}.weather-hero:fullscreen .hero-records{margin-top:12px}.weather-hero:fullscreen .hero-sub{margin-bottom:4px}.weather-hero:fullscreen .wind-ring{width:clamp(205px,27vh,250px);height:clamp(205px,27vh,250px)}.weather-hero:fullscreen .fullscreen-details{gap:8px;padding:0 clamp(22px,3vw,48px) 18px}.weather-hero:fullscreen .fullscreen-details article{padding:11px 13px}.weather-hero:fullscreen .fullscreen-details b{font-size:clamp(17px,1.55vw,23px)}.weather-hero:fullscreen .fullscreen-details small{font-size:10px}}

/* v6.6: the pale rounded "frame" was the rectangular base of the decorative
   right-side cloud, not the community logo. Keep it on the normal website but
   remove that one cloud from every full-screen implementation. */
.weather-hero:fullscreen .cloud-a,
.weather-hero:-webkit-full-screen .cloud-a,
.weather-hero.is-fullscreen .cloud-a,
html.is-weather-fullscreen .weather-hero .cloud-a,
body.is-weather-fullscreen .weather-hero .cloud-a{display:none!important}

/* v7.2 — full-screen, weather-reactive Twin Oaks centerpiece */
.twin-oaks-scene{display:none}
@media(min-width:981px){
 .weather-hero:fullscreen .hero-grid,.weather-hero.is-fullscreen .hero-grid{grid-template-columns:minmax(430px,1.05fr) minmax(250px,.66fr) minmax(245px,.58fr);gap:clamp(18px,2.4vw,48px)}
 .weather-hero:fullscreen .twin-oaks-scene,.weather-hero.is-fullscreen .twin-oaks-scene{position:relative;display:block;align-self:end;width:100%;max-width:520px;height:min(47vh,440px);margin:0 auto -8px;z-index:3;filter:saturate(.94)}
 .twin-oaks-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .tree-ground{position:absolute;z-index:-1;left:3%;right:3%;bottom:3%;height:13%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(18,62,31,.88),rgba(9,35,23,.62) 58%,transparent 72%);filter:blur(.4px);box-shadow:0 16px 28px rgba(0,0,0,.26)}
 .oak-sway{transform-origin:50% 89%;animation:towTreeSway var(--tree-sway-duration,6s) ease-in-out var(--tree-delay,0s) infinite alternate}
 .oak-right .oak-sway{animation-direction:alternate-reverse}
 .oak-trunk,.oak-branch{fill:url(#towTrunk);stroke:#201910;stroke-width:3;stroke-linejoin:round;transition:filter 1.2s,fill 1.2s}
 .oak-crown ellipse{fill:url(#towLeaf);stroke:rgba(5,43,24,.72);stroke-width:3;transition:fill 1.5s,opacity 1.5s,filter 1.2s}
 .oak-buds{opacity:0;transition:opacity 1.5s}.oak-buds circle{fill:#77a954;stroke:#426f37;stroke-width:2}
 .oak-snow{opacity:0;transition:opacity 1.4s}.oak-snow path{fill:#eef8ff;stroke:#c8e2ef;stroke-width:2;filter:drop-shadow(0 5px 5px rgba(18,40,55,.25))}
 .tree-caption{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:700 clamp(13px,1.2vw,18px)/1 Georgia,"Times New Roman",serif;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,244,224,.66);text-shadow:0 2px 8px rgba(0,0,0,.45);white-space:nowrap}
 .falling-leaves{position:absolute;inset:12% 2% 3%;overflow:hidden;pointer-events:none}.falling-leaves i{display:none;position:absolute;top:0;left:var(--leaf-x);width:9px;height:6px;border-radius:80% 15% 80% 15%;background:#b96924;box-shadow:inset 2px 0 rgba(255,208,74,.28);animation:towLeafFall var(--leaf-fall-duration,6s) linear var(--leaf-delay) infinite}
 body[data-tree-season="winter"] .oak-crown{opacity:.03}
 body[data-tree-season="winter"] .oak-buds{opacity:0}
 body[data-tree-season="spring"] .oak-crown{opacity:.76;filter:hue-rotate(12deg) saturate(.8) brightness(1.25)}
 body[data-tree-season="spring"] .oak-buds{opacity:.9}
 body[data-tree-season="autumn"] .oak-crown ellipse{fill:#9a5726;filter:saturate(1.18)}
 body[data-tree-season="autumn"] .oak-crown ellipse:nth-child(3n){fill:#bd762b}
 body[data-tree-season="autumn"] .oak-crown ellipse:nth-child(3n+1){fill:#774124}
 body[data-tree-season="autumn"][data-tree-wind="light"] .falling-leaves i:nth-child(-n+6),body[data-tree-season="autumn"][data-tree-wind="moderate"] .falling-leaves i:nth-child(-n+11),body[data-tree-season="autumn"][data-tree-wind="strong"] .falling-leaves i{display:block}
 body[data-glass-wet="true"] .oak-trunk,body[data-glass-wet="true"] .oak-branch{filter:brightness(.62) saturate(1.15)}
 body[data-glass-wet="true"] .oak-crown{filter:brightness(.76) saturate(1.22) drop-shadow(0 0 5px rgba(190,235,225,.18))}
 body[data-weather-mode="snow"] .oak-snow,body[data-weather-mode="ice"] .oak-snow{opacity:.9}
 body[data-weather-mode="snow"][data-weather-intensity="light"] .oak-snow{opacity:.48}
 body[data-weather-mode="snow"][data-weather-intensity="heavy"] .oak-snow{opacity:1;filter:drop-shadow(0 2px 5px rgba(255,255,255,.45))}
 body[data-weather-mode="storm"] .twin-oaks-scene,body[data-weather-mode="severe"] .twin-oaks-scene{filter:brightness(.64) saturate(.78)}
 body[data-sun-phase="night"] .twin-oaks-scene{filter:brightness(.54) saturate(.7) drop-shadow(0 0 8px rgba(93,141,171,.14))}
 @keyframes towTreeSway{0%{transform:rotate(calc(0deg - var(--tree-sway-angle,.4deg)))}52%{transform:rotate(0deg)}100%{transform:rotate(var(--tree-sway-angle,.4deg))}}
 @keyframes towLeafFall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}12%{opacity:.9}55%{transform:translate3d(var(--leaf-drift),180px,0) rotate(420deg)}100%{transform:translate3d(calc(var(--leaf-drift) * -.45),370px,0) rotate(780deg);opacity:0}}
}
@media(min-width:981px) and (max-width:1250px){.weather-hero:fullscreen .hero-grid,.weather-hero.is-fullscreen .hero-grid{grid-template-columns:minmax(380px,1fr) minmax(190px,.48fr) 220px;gap:14px}.weather-hero:fullscreen .twin-oaks-scene,.weather-hero.is-fullscreen .twin-oaks-scene{height:min(39vh,350px)}}
@media(max-height:850px) and (min-width:981px){.weather-hero:fullscreen .twin-oaks-scene,.weather-hero.is-fullscreen .twin-oaks-scene{height:min(39vh,340px)}.weather-hero:fullscreen .hero-grid,.weather-hero.is-fullscreen .hero-grid{min-height:calc(100vh - 142px)}}
@media(prefers-reduced-motion:reduce){.oak-sway,.falling-leaves i{animation:none!important}.falling-leaves{display:none!important}}

/* ============================================================
   Twin Oaks Weather v7.5 — photographic full-screen scene
   The normal page deliberately keeps the established v7.1 layout. The
   generated landscape, forecast rail, and reference-style typography appear
   only while the current-conditions hero owns the full screen.
   ============================================================ */
.cinematic-backdrop,.cinematic-heading,.cinematic-bottom,.cinematic-current{display:none}

@media(min-width:981px){
 .weather-hero:fullscreen,.weather-hero:-webkit-full-screen,.weather-hero.is-fullscreen{
  --scene-brightness:1;--scene-saturation:1;--scene-hue:0deg;
  width:100vw;height:100vh;min-height:100vh;overflow:hidden;background:#52636d;
  font-family:"Segoe UI",Arial,sans-serif;
 }
 .weather-hero:fullscreen .cinematic-backdrop,.weather-hero:-webkit-full-screen .cinematic-backdrop,.weather-hero.is-fullscreen .cinematic-backdrop{
  display:block;position:absolute;inset:0;z-index:0;overflow:hidden;
  filter:brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) hue-rotate(var(--scene-hue));
  transition:filter 1.8s ease;
 }
 .cinematic-season,.cinematic-canopy{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:cover}
 .cinematic-season{opacity:0;transition:opacity 2.2s ease}
 .cinematic-spring{background-image:url('../img/cinematic/twin-oaks-spring.webp')}
 .cinematic-summer{background-image:url('../img/cinematic/twin-oaks-summer.webp')}
 .cinematic-summer-clear{background-image:url('../img/cinematic/twin-oaks-summer-clear.webp')}
 .cinematic-autumn{background-image:url('../img/cinematic/twin-oaks-autumn.webp')}
 .cinematic-winter{background-image:url('../img/cinematic/twin-oaks-winter.webp')}
 .cinematic-snow{background-image:url('../img/cinematic/twin-oaks-snow.webp')}
 body[data-tree-season="spring"] .cinematic-spring,body[data-tree-season="summer"] .cinematic-summer,body[data-tree-season="autumn"] .cinematic-autumn,body[data-tree-season="winter"] .cinematic-winter{opacity:1}
 body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-summer{opacity:0}
 body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-summer-clear{opacity:1}
 body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-summer{opacity:.28}
 body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-summer-clear{opacity:.86}
 body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-summer{opacity:.56}
 body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-summer-clear{opacity:.64}
 body[data-weather-mode="snow"] .cinematic-season,body[data-weather-mode="ice"] .cinematic-season{opacity:0}
 body[data-weather-mode="snow"] .cinematic-snow,body[data-weather-mode="ice"] .cinematic-snow{opacity:1}
 .cinematic-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,37,51,.06),transparent 52%,rgba(3,17,13,.27));pointer-events:none;transition:background 1.5s ease}

 body[data-weather-mode="rain"] .weather-hero:fullscreen,body[data-weather-mode="rain"] .weather-hero.is-fullscreen{--scene-brightness:.78;--scene-saturation:.82}
 body[data-weather-mode="storm"] .weather-hero:fullscreen,body[data-weather-mode="storm"] .weather-hero.is-fullscreen{--scene-brightness:.57;--scene-saturation:.68}
 body[data-weather-mode="severe"] .weather-hero:fullscreen,body[data-weather-mode="severe"] .weather-hero.is-fullscreen{--scene-brightness:.48;--scene-saturation:.58;--scene-hue:-7deg}
 body[data-weather-mode="fog"] .weather-hero:fullscreen,body[data-weather-mode="fog"] .weather-hero.is-fullscreen{--scene-brightness:1.08;--scene-saturation:.55}
 body[data-weather-mode="heat"] .weather-hero:fullscreen,body[data-weather-mode="heat"] .weather-hero.is-fullscreen{--scene-brightness:1.08;--scene-saturation:1.04;--scene-hue:-8deg}
 body[data-weather-mode="cold"] .weather-hero:fullscreen,body[data-weather-mode="cold"] .weather-hero.is-fullscreen{--scene-brightness:.93;--scene-saturation:.78;--scene-hue:7deg}
 body[data-sun-phase="dusk"] .weather-hero:fullscreen,body[data-sun-phase="dusk"] .weather-hero.is-fullscreen{--scene-brightness:.72;--scene-saturation:.84;--scene-hue:-3deg}
 body[data-sun-phase="night"] .weather-hero:fullscreen,body[data-sun-phase="night"] .weather-hero.is-fullscreen{--scene-brightness:.23;--scene-saturation:.58;--scene-hue:9deg}
 body[data-glass-wet="true"] .cinematic-backdrop:after{background:linear-gradient(125deg,rgba(172,207,215,.11),transparent 32%),linear-gradient(180deg,rgba(8,25,34,.08),transparent 48%,rgba(0,11,8,.38))}

 .weather-hero:fullscreen .hero-sky,.weather-hero:-webkit-full-screen .hero-sky,.weather-hero.is-fullscreen .hero-sky{z-index:1;clip-path:inset(0 0 37% 0)}
 .weather-hero:fullscreen .hero-sky:after,.weather-hero:-webkit-full-screen .hero-sky:after,.weather-hero.is-fullscreen .hero-sky:after{background:linear-gradient(180deg,rgba(10,29,40,.08),transparent 60%)}
 .weather-hero:fullscreen .cloud,.weather-hero:-webkit-full-screen .cloud,.weather-hero.is-fullscreen .cloud,.weather-hero:fullscreen .storm-cloud,.weather-hero.is-fullscreen .storm-cloud{display:none!important}
 .weather-hero:fullscreen .weather-effects,.weather-hero:-webkit-full-screen .weather-effects,.weather-hero.is-fullscreen .weather-effects{z-index:2}

 .weather-hero:fullscreen .cinematic-heading,.weather-hero:-webkit-full-screen .cinematic-heading,.weather-hero.is-fullscreen .cinematic-heading{
  position:absolute;z-index:8;top:clamp(24px,3.5vh,42px);left:clamp(28px,3.6vw,62px);right:clamp(28px,3.6vw,62px);display:flex;align-items:center;justify-content:space-between;
  color:rgba(255,255,255,.94);font-size:clamp(15px,1.25vw,21px);font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.45)
 }
 .cinematic-heading time{font-size:.86em;letter-spacing:.18em}
 .weather-hero:fullscreen .fullscreen-toggle,.weather-hero:-webkit-full-screen .fullscreen-toggle,.weather-hero.is-fullscreen .fullscreen-toggle{top:11px;right:auto;left:50%;transform:translateX(-50%);padding:6px;border:0;background:transparent;opacity:.22;backdrop-filter:none}
 .weather-hero:fullscreen .fullscreen-toggle b,.weather-hero:-webkit-full-screen .fullscreen-toggle b,.weather-hero.is-fullscreen .fullscreen-toggle b{display:none}

 .weather-hero:fullscreen .hero-grid,.weather-hero:-webkit-full-screen .hero-grid,.weather-hero.is-fullscreen .hero-grid{
  position:relative;z-index:4;width:100%;max-width:none;height:100vh;min-height:0;padding:clamp(75px,9vh,106px) clamp(34px,4.2vw,72px) clamp(188px,22vh,220px);
  display:grid;grid-template-columns:minmax(280px,.82fr) minmax(480px,2.35fr) minmax(250px,.76fr);gap:clamp(18px,2vw,38px);align-items:center
 }
 .weather-hero:fullscreen .hero-copy,.weather-hero:-webkit-full-screen .hero-copy,.weather-hero.is-fullscreen .hero-copy{align-self:center;max-width:420px;text-shadow:0 3px 18px rgba(0,0,0,.38)}
 .weather-hero:fullscreen .eyebrow,.weather-hero:fullscreen .hero-weather-detail,.weather-hero:fullscreen .hero-records,.weather-hero:fullscreen .hero-actions,.weather-hero:-webkit-full-screen .eyebrow,.weather-hero:-webkit-full-screen .hero-weather-detail,.weather-hero:-webkit-full-screen .hero-records,.weather-hero:-webkit-full-screen .hero-actions,.weather-hero.is-fullscreen .eyebrow,.weather-hero.is-fullscreen .hero-weather-detail,.weather-hero.is-fullscreen .hero-records,.weather-hero.is-fullscreen .hero-actions{display:none!important}
 .weather-hero:fullscreen .hero-copy h1,.weather-hero:-webkit-full-screen .hero-copy h1,.weather-hero.is-fullscreen .hero-copy h1{
  margin:0 0 clamp(22px,3vh,34px);font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(138px,14vw,226px);font-weight:200;line-height:.68;letter-spacing:-.085em;color:#fff
 }
 .weather-hero:fullscreen .hero-copy h1 small,.weather-hero:-webkit-full-screen .hero-copy h1 small,.weather-hero.is-fullscreen .hero-copy h1 small{display:none}
 .weather-hero:fullscreen .hero-copy h1>span,.weather-hero:-webkit-full-screen .hero-copy h1>span,.weather-hero.is-fullscreen .hero-copy h1>span{display:none}
 .weather-hero:fullscreen .hero-copy h1:before,.weather-hero:-webkit-full-screen .hero-copy h1:before,.weather-hero.is-fullscreen .hero-copy h1:before{content:attr(data-fs-temp)}
 .weather-hero:fullscreen .hero-condition,.weather-hero:-webkit-full-screen .hero-condition,.weather-hero.is-fullscreen .hero-condition{margin:0 0 2px;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(24px,2vw,34px);font-weight:400;letter-spacing:.01em}
 .weather-hero:fullscreen .hero-sub,.weather-hero:-webkit-full-screen .hero-sub,.weather-hero.is-fullscreen .hero-sub{margin:0;color:rgba(255,255,255,.92);font-size:clamp(16px,1.25vw,21px);font-weight:300}
 .weather-hero:fullscreen .hero-sub-extra,.weather-hero:-webkit-full-screen .hero-sub-extra,.weather-hero.is-fullscreen .hero-sub-extra{display:none}
 .weather-hero:fullscreen .cinematic-current,.weather-hero:-webkit-full-screen .cinematic-current,.weather-hero.is-fullscreen .cinematic-current{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:10px;margin-top:clamp(18px,3vh,30px)}
 .cinematic-condition-icon{display:block!important;flex:0 0 100%;font-size:48px;line-height:1;filter:drop-shadow(0 5px 9px rgba(0,0,0,.24))}
 .cinematic-current>span:not(.cinematic-condition-icon){position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;width:max-content;max-width:100%;padding-right:0;border-right:0}
 .cinematic-current i{grid-row:1/3;font-style:normal;color:#d8ebee;font-size:23px}
 .cinematic-current b{font-size:clamp(18px,1.45vw,24px);font-weight:500;line-height:1.05}
 .cinematic-current small{font-size:10px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72)}

 .weather-hero:fullscreen .twin-oaks-scene,.weather-hero:-webkit-full-screen .twin-oaks-scene,.weather-hero.is-fullscreen .twin-oaks-scene{display:block;position:absolute;inset:0;z-index:3;width:auto;max-width:none;height:auto;margin:0;pointer-events:none}
 .weather-hero:fullscreen .wind-orbit,.weather-hero:-webkit-full-screen .wind-orbit,.weather-hero.is-fullscreen .wind-orbit{position:relative;z-index:5;display:block!important;grid-column:3;align-self:center;justify-self:end;transform:none;text-shadow:0 2px 12px rgba(0,0,0,.38)}
 .weather-hero:fullscreen .wind-orbit p,.weather-hero:-webkit-full-screen .wind-orbit p,.weather-hero.is-fullscreen .wind-orbit p{display:none}
 .weather-hero:fullscreen .wind-ring,.weather-hero:-webkit-full-screen .wind-ring,.weather-hero.is-fullscreen .wind-ring{
  width:clamp(230px,17.5vw,306px);height:clamp(230px,17.5vw,306px);border:2px solid rgba(255,255,255,.68);background:rgba(64,92,108,.18);box-shadow:inset 0 0 0 12px rgba(255,255,255,.045),0 14px 42px rgba(0,0,0,.15);backdrop-filter:blur(3px)
 }
 .wind-ring:before{content:"";position:absolute;inset:15px;border-radius:50%;background:repeating-conic-gradient(from -1deg,rgba(255,255,255,.68) 0 .7deg,transparent .7deg 15deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));opacity:.85}
 .weather-hero:fullscreen .wind-ring>span,.weather-hero:-webkit-full-screen .wind-ring>span,.weather-hero.is-fullscreen .wind-ring>span{z-index:3;color:#fff;font-size:14px;font-weight:500}
 .weather-hero:fullscreen .wind-ring>span:nth-child(1),.weather-hero.is-fullscreen .wind-ring>span:nth-child(1){top:-30px;left:50%;transform:translateX(-50%)}
 .weather-hero:fullscreen .wind-ring>span:nth-child(2),.weather-hero.is-fullscreen .wind-ring>span:nth-child(2){right:-28px;top:50%;transform:translateY(-50%)}
 .weather-hero:fullscreen .wind-ring>span:nth-child(3),.weather-hero.is-fullscreen .wind-ring>span:nth-child(3){bottom:-32px;left:50%;transform:translateX(-50%)}
 .weather-hero:fullscreen .wind-ring>span:nth-child(4),.weather-hero.is-fullscreen .wind-ring>span:nth-child(4){left:-28px;top:50%;transform:translateY(-50%)}
 .weather-hero:fullscreen .wind-center,.weather-hero:-webkit-full-screen .wind-center,.weather-hero.is-fullscreen .wind-center{inset:31%;background:transparent;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
 .wind-center:before{content:"Wind";display:block;margin-bottom:7px;color:rgba(255,255,255,.9);font-size:clamp(15px,1.15vw,20px);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
 .weather-hero:fullscreen .wind-center b,.weather-hero:-webkit-full-screen .wind-center b,.weather-hero.is-fullscreen .wind-center b{font-size:clamp(43px,3.8vw,64px);font-weight:300}
 .weather-hero:fullscreen .wind-center small,.weather-hero:-webkit-full-screen .wind-center small,.weather-hero.is-fullscreen .wind-center small{font-size:clamp(17px,1.5vw,24px);font-weight:300}
 .weather-hero:fullscreen .wind-arrow,.weather-hero:-webkit-full-screen .wind-arrow,.weather-hero.is-fullscreen .wind-arrow{z-index:2;width:5px;height:37%;background:linear-gradient(#18d5ed,#d5fbff);box-shadow:0 0 16px rgba(19,217,239,.52)}
 .weather-hero:fullscreen .wind-arrow:before,.weather-hero:-webkit-full-screen .wind-arrow:before,.weather-hero.is-fullscreen .wind-arrow:before{top:-7px;left:-7px;border-left-width:9px;border-right-width:9px;border-bottom:17px solid #16d5ed}

 .weather-hero:fullscreen .cinematic-bottom,.weather-hero:-webkit-full-screen .cinematic-bottom,.weather-hero.is-fullscreen .cinematic-bottom{
  position:absolute;z-index:8;left:clamp(28px,3.6vw,62px);right:clamp(28px,3.6vw,62px);bottom:clamp(17px,2.5vh,28px);display:grid;grid-template-columns:minmax(0,4fr) repeat(2,minmax(0,1fr));gap:clamp(10px,1vw,17px)
 }
 .cinematic-forecast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,17px)}
 .cinematic-card{min-width:0;height:clamp(132px,17.5vh,174px);padding:clamp(13px,1.2vw,20px);border:1px solid rgba(255,255,255,.42);border-radius:15px;background:linear-gradient(145deg,rgba(35,64,49,.43),rgba(12,33,29,.39));box-shadow:0 12px 32px rgba(0,0,0,.12);backdrop-filter:blur(8px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);overflow:hidden}
 .cinematic-card>span{display:block;color:rgba(255,255,255,.82);font-size:clamp(10px,.82vw,13px);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
 .cinematic-card>b{display:block;margin-top:5px;font-size:clamp(20px,1.7vw,28px);font-weight:400;line-height:1.15}
 .cinematic-card>small{display:block;margin-top:4px;color:rgba(255,255,255,.78);font-size:clamp(10px,.78vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cinematic-card hr{height:1px;margin:9px 0;border:0;background:rgba(255,255,255,.35)}
 .cinematic-card b small{display:inline;color:rgba(255,255,255,.8);font-size:.55em;font-weight:300}
 .cinematic-day{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;column-gap:8px}
 .cinematic-day>span{grid-column:1/-1}
 .cinematic-day .cinematic-icon{align-self:center;font-size:clamp(32px,2.7vw,46px);filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
 .cinematic-temperatures{align-self:center;text-align:right}.cinematic-temperatures b,.cinematic-temperatures small{display:block;font-size:clamp(19px,1.6vw,27px);font-weight:400;line-height:1.25}.cinematic-temperatures small{color:rgba(255,255,255,.58)}
 .cinematic-day>small{grid-column:1/2;align-self:end}.cinematic-day>em{grid-column:2/3;align-self:end;font-size:clamp(10px,.78vw,13px);font-style:normal;white-space:nowrap}
 .cinematic-loading{opacity:.72}
 .cinematic-sun-times b,.cinematic-station-pair b{font-size:clamp(17px,1.35vw,23px)}
 .weather-hero:fullscreen .fullscreen-details,.weather-hero:-webkit-full-screen .fullscreen-details,.weather-hero.is-fullscreen .fullscreen-details{display:none!important}

 .cinematic-canopy{display:none;z-index:2;pointer-events:none;opacity:.44;background-image:url('../img/cinematic/twin-oaks-summer.webp')}
 body[data-tree-season="summer"]:not([data-sky-cover="clear"])[data-tree-wind="light"] .cinematic-canopy,body[data-tree-season="summer"]:not([data-sky-cover="clear"])[data-tree-wind="moderate"] .cinematic-canopy,body[data-tree-season="summer"]:not([data-sky-cover="clear"])[data-tree-wind="strong"] .cinematic-canopy{display:block}
 .cinematic-canopy-left{clip-path:ellipse(16% 26% at 36% 36%);animation:cinematicOakLeft var(--tree-sway-duration,6s) ease-in-out infinite alternate}
 .cinematic-canopy-right{clip-path:ellipse(16% 26% at 64% 36%);animation:cinematicOakRight var(--tree-sway-duration,6s) ease-in-out infinite alternate-reverse}
 @keyframes cinematicOakLeft{from{transform:translate3d(calc(0px - var(--canopy-shift,1px)),0,0)}to{transform:translate3d(var(--canopy-shift,1px),0,0)}}
 @keyframes cinematicOakRight{from{transform:translate3d(var(--canopy-shift,1px),0,0)}to{transform:translate3d(calc(0px - var(--canopy-shift,1px)),0,0)}}

 body[data-tree-season="autumn"][data-tree-wind="light"] .falling-leaves i:nth-child(-n+6),body[data-tree-season="autumn"][data-tree-wind="moderate"] .falling-leaves i:nth-child(-n+11),body[data-tree-season="autumn"][data-tree-wind="strong"] .falling-leaves i{display:block}
 .weather-hero:fullscreen .falling-leaves,.weather-hero.is-fullscreen .falling-leaves{position:absolute;inset:15% 17% 18%;overflow:hidden}
}

@media(min-width:981px) and (max-height:800px){
 .weather-hero:fullscreen .hero-grid,.weather-hero.is-fullscreen .hero-grid{padding-top:58px;padding-bottom:168px;grid-template-columns:minmax(245px,.75fr) minmax(420px,2.25fr) minmax(220px,.7fr)}
 .weather-hero:fullscreen .hero-copy h1,.weather-hero.is-fullscreen .hero-copy h1{font-size:clamp(116px,13vw,178px);margin-bottom:19px}
 .weather-hero:fullscreen .hero-condition,.weather-hero.is-fullscreen .hero-condition{font-size:clamp(21px,1.8vw,28px)}
 .weather-hero:fullscreen .cinematic-current,.weather-hero.is-fullscreen .cinematic-current{margin-top:14px}
 .cinematic-condition-icon{font-size:37px}
 .cinematic-card{height:128px;padding:11px 13px}.cinematic-card hr{margin:6px 0}.cinematic-card>b{font-size:19px}.cinematic-day .cinematic-icon{font-size:31px}.cinematic-temperatures b,.cinematic-temperatures small{font-size:19px}
 .weather-hero:fullscreen .cinematic-bottom,.weather-hero.is-fullscreen .cinematic-bottom{bottom:14px}
}

@media(prefers-reduced-motion:reduce){.cinematic-season{transition:none}.cinematic-canopy{display:none!important}}

/* ============================================================
   Twin Oaks Weather v7.7 — simplified full-screen information rail
   The fixed class is also used when a TV or phone cannot make the hero the
   browser's native full-screen element. It deliberately leaves the regular
   scrolling website untouched until full screen is selected.
   ============================================================ */
html.is-weather-fullscreen,body.is-weather-fullscreen{overflow:hidden!important;overscroll-behavior:none}
.weather-hero.is-fullscreen{position:fixed!important;inset:0!important;z-index:1000!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:0!important;margin:0!important}

/* These image declarations are shared by desktop, TV, and responsive phone
   full-screen modes. The backdrop itself remains hidden on the normal page. */
.cinematic-season,.cinematic-canopy{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:cover}
.cinematic-season{opacity:0;transition:opacity 2.2s ease}
.cinematic-spring{background-image:url('../img/cinematic/twin-oaks-spring.webp')}
.cinematic-summer{background-image:url('../img/cinematic/twin-oaks-summer.webp')}
.cinematic-summer-clear{background-image:url('../img/cinematic/twin-oaks-summer-clear.webp')}
.cinematic-autumn{background-image:url('../img/cinematic/twin-oaks-autumn.webp')}
.cinematic-winter{background-image:url('../img/cinematic/twin-oaks-winter.webp')}
.cinematic-snow{background-image:url('../img/cinematic/twin-oaks-snow.webp')}
body[data-tree-season="spring"] .cinematic-spring,body[data-tree-season="summer"] .cinematic-summer,body[data-tree-season="autumn"] .cinematic-autumn,body[data-tree-season="winter"] .cinematic-winter{opacity:1}
body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-summer{opacity:0}
body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-summer-clear{opacity:1}
body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-summer{opacity:.28}
body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-summer-clear{opacity:.86}
body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-summer{opacity:.56}
body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-summer-clear{opacity:.64}
body[data-weather-mode="snow"] .cinematic-season,body[data-weather-mode="ice"] .cinematic-season{opacity:0}
body[data-weather-mode="snow"] .cinematic-snow,body[data-weather-mode="ice"] .cinematic-snow{opacity:1}

/* A partly cloud-obscured sun can still read as soft light behind cloud. */
body[data-weather-mode="cloud"][data-sky-cover="partly"] .weather-hero.is-fullscreen .live-sun{
 background:radial-gradient(circle at 36% 32%,#fffef2 0 9%,#fff3b0 31%,#f8cf67 68%,#e9aa3e 100%);opacity:.46!important;filter:blur(.8px) drop-shadow(0 0 20px rgba(255,236,174,.22))!important
}

@media(min-width:981px){
 .weather-hero:fullscreen .hero-grid,.weather-hero:-webkit-full-screen .hero-grid,.weather-hero.is-fullscreen .hero-grid{padding-bottom:clamp(120px,13vh,150px)}
 .weather-hero:fullscreen .cinematic-bottom,.weather-hero:-webkit-full-screen .cinematic-bottom,.weather-hero.is-fullscreen .cinematic-bottom{
  bottom:clamp(108px,10.8vh,120px)
 }
 .cinematic-card{height:clamp(108px,11.6vh,124px);padding:clamp(10px,.9vw,14px)}
 .cinematic-card hr{margin:5px 0}
 .cinematic-card>b{font-size:clamp(18px,1.45vw,24px)}
 .cinematic-day .cinematic-icon{font-size:clamp(27px,2.2vw,37px)}
 .cinematic-temperatures b,.cinematic-temperatures small{font-size:clamp(17px,1.35vw,22px)}
 .weather-hero:fullscreen .fullscreen-details,.weather-hero:-webkit-full-screen .fullscreen-details,.weather-hero.is-fullscreen .fullscreen-details{
  position:absolute;z-index:9;left:clamp(28px,3.6vw,62px);right:clamp(28px,3.6vw,62px);bottom:clamp(14px,1.6vh,18px);
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,.72vw,12px);padding:0
 }
 .weather-hero:fullscreen .fullscreen-details article,.weather-hero:-webkit-full-screen .fullscreen-details article,.weather-hero.is-fullscreen .fullscreen-details article{
  min-width:0;min-height:78px;padding:9px 12px;border:1px solid rgba(255,255,255,.34);border-radius:13px;
  background:linear-gradient(145deg,rgba(25,53,41,.52),rgba(8,30,27,.48));box-shadow:0 9px 24px rgba(0,0,0,.12);backdrop-filter:blur(8px);color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.3);overflow:hidden
 }
 .weather-hero:fullscreen .fullscreen-details article[hidden],.weather-hero:-webkit-full-screen .fullscreen-details article[hidden],.weather-hero.is-fullscreen .fullscreen-details article[hidden]{display:none!important}
 .weather-hero:fullscreen .fullscreen-details>article>span,.weather-hero:-webkit-full-screen .fullscreen-details>article>span,.weather-hero.is-fullscreen .fullscreen-details>article>span{display:block;color:rgba(255,255,255,.8);font-size:clamp(8px,.68vw,11px)}
 .weather-hero:fullscreen .fullscreen-details b,.weather-hero:-webkit-full-screen .fullscreen-details b,.weather-hero.is-fullscreen .fullscreen-details b{display:block;margin-top:2px;font-size:clamp(16px,1.3vw,22px);font-weight:500}
 .weather-hero:fullscreen .fullscreen-details small,.weather-hero:-webkit-full-screen .fullscreen-details small,.weather-hero.is-fullscreen .fullscreen-details small{display:block;margin-top:0;color:rgba(255,255,255,.7);font-size:clamp(8px,.64vw,10px)}
 .weather-hero:fullscreen .fullscreen-details .fullscreen-highlight,.weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-highlight,.weather-hero.is-fullscreen .fullscreen-details .fullscreen-highlight{background:linear-gradient(145deg,rgba(22,91,78,.58),rgba(8,43,37,.52))}
 .weather-hero:fullscreen .fullscreen-details .fullscreen-rain,.weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-rain,.weather-hero.is-fullscreen .fullscreen-details .fullscreen-rain{background:linear-gradient(145deg,rgba(24,74,83,.58),rgba(9,41,48,.52))}
}

@media(min-width:981px) and (max-height:800px){
 .weather-hero:fullscreen .hero-grid,.weather-hero.is-fullscreen .hero-grid{padding-bottom:94px}
 .weather-hero:fullscreen .cinematic-bottom,.weather-hero.is-fullscreen .cinematic-bottom{bottom:88px}
 .cinematic-card{height:92px;padding:7px 10px}
 .cinematic-card>small{font-size:9px}.cinematic-card>b{font-size:16px}.cinematic-day .cinematic-icon{font-size:23px}.cinematic-temperatures b,.cinematic-temperatures small{font-size:15px}
 .weather-hero:fullscreen .fullscreen-details,.weather-hero.is-fullscreen .fullscreen-details{bottom:10px;gap:6px}
 .weather-hero:fullscreen .fullscreen-details article,.weather-hero.is-fullscreen .fullscreen-details article{min-height:68px;padding:7px 9px}
 .weather-hero:fullscreen .fullscreen-details b,.weather-hero.is-fullscreen .fullscreen-details b{font-size:15px}
}

/* Phone and compact-TV fallback. In landscape the complete display fits in a
   single viewport. Browsers that permit it are also asked to lock landscape. */
@media(max-width:980px){
 .weather-hero.is-fullscreen{--scene-brightness:1;--scene-saturation:1;--scene-hue:0deg;overflow:hidden!important;background:#52636d;font-family:"Segoe UI",Arial,sans-serif}
 body[data-weather-mode="rain"] .weather-hero.is-fullscreen{--scene-brightness:.78;--scene-saturation:.82}body[data-weather-mode="storm"] .weather-hero.is-fullscreen{--scene-brightness:.57;--scene-saturation:.68}body[data-weather-mode="severe"] .weather-hero.is-fullscreen{--scene-brightness:.48;--scene-saturation:.58;--scene-hue:-7deg}body[data-weather-mode="fog"] .weather-hero.is-fullscreen{--scene-brightness:1.08;--scene-saturation:.55}body[data-sun-phase="dusk"] .weather-hero.is-fullscreen{--scene-brightness:.72;--scene-saturation:.84;--scene-hue:-3deg}body[data-sun-phase="night"] .weather-hero.is-fullscreen{--scene-brightness:.23;--scene-saturation:.58;--scene-hue:9deg}
 .weather-hero.is-fullscreen .cinematic-backdrop{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;filter:brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) hue-rotate(var(--scene-hue));transition:filter 1.8s ease}
 .weather-hero.is-fullscreen .cinematic-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,37,51,.08),transparent 48%,rgba(3,17,13,.34));pointer-events:none}
 .weather-hero.is-fullscreen .hero-sky{z-index:1;clip-path:inset(0 0 34% 0)}
 .weather-hero.is-fullscreen .cloud,.weather-hero.is-fullscreen .storm-cloud{display:none!important}
 .weather-hero.is-fullscreen .weather-effects{z-index:2}
 .weather-hero.is-fullscreen .cinematic-heading{position:absolute;z-index:8;top:max(9px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;justify-content:space-between;color:rgba(255,255,255,.94);font-size:clamp(9px,1.8vw,14px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.5)}
 .weather-hero.is-fullscreen .cinematic-heading time{font-size:.84em;letter-spacing:.12em}
 .weather-hero.is-fullscreen .fullscreen-toggle{top:4px;right:auto;left:50%;transform:translateX(-50%);padding:5px;border:0;background:transparent;opacity:.3;backdrop-filter:none}
 .weather-hero.is-fullscreen .fullscreen-toggle b{display:none}
 .weather-hero.is-fullscreen .hero-grid{position:relative;z-index:4;width:100%;max-width:none;height:100dvh;min-height:0;padding:38px max(18px,env(safe-area-inset-right)) 78px max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;align-items:center}
 .weather-hero.is-fullscreen .hero-copy{max-width:290px;text-shadow:0 3px 16px rgba(0,0,0,.42)}
 .weather-hero.is-fullscreen .eyebrow,.weather-hero.is-fullscreen .hero-weather-detail,.weather-hero.is-fullscreen .hero-records,.weather-hero.is-fullscreen .hero-actions{display:none!important}
 .weather-hero.is-fullscreen .hero-copy h1{margin:0 0 11px;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(68px,16vh,106px);font-weight:200;line-height:.72;letter-spacing:-.08em;color:#fff}
 .weather-hero.is-fullscreen .hero-copy h1 small,.weather-hero.is-fullscreen .hero-copy h1>span{display:none}
 .weather-hero.is-fullscreen .hero-copy h1:before{content:attr(data-fs-temp)}
 .weather-hero.is-fullscreen .hero-condition{margin:0;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(18px,4.8vh,25px);font-weight:400}
 .weather-hero.is-fullscreen .hero-sub{margin:0;color:rgba(255,255,255,.9);font-size:clamp(12px,3vh,16px)}
 .weather-hero.is-fullscreen .hero-sub-extra,.weather-hero.is-fullscreen .cinematic-current{display:none!important}
 .weather-hero.is-fullscreen .twin-oaks-scene{display:block;position:absolute;inset:0;z-index:3;width:auto;max-width:none;height:auto;margin:0;pointer-events:none}
 .weather-hero.is-fullscreen .wind-orbit{position:relative;z-index:5;display:block!important;grid-column:2;justify-self:end;text-shadow:0 2px 10px rgba(0,0,0,.4)}
 .weather-hero.is-fullscreen .wind-orbit p{display:none}
 .weather-hero.is-fullscreen .wind-ring{width:clamp(118px,30vh,168px);height:clamp(118px,30vh,168px);border:2px solid rgba(255,255,255,.68);background:rgba(64,92,108,.18);box-shadow:inset 0 0 0 7px rgba(255,255,255,.045);backdrop-filter:blur(3px)}
 .weather-hero.is-fullscreen .wind-ring:before{inset:9px}
 .weather-hero.is-fullscreen .wind-ring>span{z-index:3;color:#fff;font-size:9px}
 .weather-hero.is-fullscreen .wind-ring>span:nth-child(1){top:-20px;left:50%;transform:translateX(-50%)}.weather-hero.is-fullscreen .wind-ring>span:nth-child(2){right:-18px;top:50%;transform:translateY(-50%)}.weather-hero.is-fullscreen .wind-ring>span:nth-child(3){bottom:-21px;left:50%;transform:translateX(-50%)}.weather-hero.is-fullscreen .wind-ring>span:nth-child(4){left:-18px;top:50%;transform:translateY(-50%)}
 .weather-hero.is-fullscreen .wind-center{inset:29%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
 .weather-hero.is-fullscreen .wind-center:before{margin-bottom:2px;font-size:9px}.weather-hero.is-fullscreen .wind-center b{font-size:clamp(25px,7.5vh,38px);font-weight:300}.weather-hero.is-fullscreen .wind-center small{font-size:11px}
 .weather-hero.is-fullscreen .wind-arrow{z-index:2;width:3px;height:36%;background:linear-gradient(#18d5ed,#d5fbff)}.weather-hero.is-fullscreen .wind-arrow:before{top:-5px;left:-5px;border-left-width:7px;border-right-width:7px;border-bottom:12px solid #16d5ed}
 .weather-hero.is-fullscreen .cinematic-bottom{position:absolute;z-index:8;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:74px;display:block}
 .weather-hero.is-fullscreen .cinematic-forecast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .weather-hero.is-fullscreen .cinematic-sun-times,.weather-hero.is-fullscreen .cinematic-station-pair{display:none}
 .weather-hero.is-fullscreen .cinematic-card{height:78px;padding:6px 8px;border-radius:9px;background:linear-gradient(145deg,rgba(35,64,49,.52),rgba(12,33,29,.48));backdrop-filter:blur(6px)}
 .weather-hero.is-fullscreen .cinematic-card>span{font-size:7px}.weather-hero.is-fullscreen .cinematic-day .cinematic-icon{font-size:18px}.weather-hero.is-fullscreen .cinematic-temperatures b,.weather-hero.is-fullscreen .cinematic-temperatures small{font-size:13px}.weather-hero.is-fullscreen .cinematic-card>small,.weather-hero.is-fullscreen .cinematic-day>em{font-size:7px}
 .weather-hero.is-fullscreen .fullscreen-details{position:absolute;z-index:9;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(7px,env(safe-area-inset-bottom));display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:0}
 .weather-hero.is-fullscreen .fullscreen-details article{min-width:0;min-height:58px;padding:5px 7px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:rgba(10,39,34,.52);backdrop-filter:blur(6px);overflow:hidden}
 .weather-hero.is-fullscreen .fullscreen-details article[hidden]{display:none!important}
 .weather-hero.is-fullscreen .fullscreen-details>article>span{display:block;font-size:6.5px;color:rgba(255,255,255,.8)}.weather-hero.is-fullscreen .fullscreen-details b{display:block;margin-top:1px;font-size:12px;font-weight:500}.weather-hero.is-fullscreen .fullscreen-details small{display:block;margin:0;font-size:6.5px;color:rgba(255,255,255,.68)}
}

@media(max-width:620px) and (orientation:portrait){
 .weather-hero.is-fullscreen .hero-grid{height:100dvh;padding:62px 18px 292px;display:block}
 .weather-hero.is-fullscreen .hero-copy{max-width:210px}.weather-hero.is-fullscreen .hero-copy h1{font-size:82px}.weather-hero.is-fullscreen .hero-condition{font-size:21px}
 .weather-hero.is-fullscreen .wind-orbit{position:absolute;top:145px;right:28px}.weather-hero.is-fullscreen .wind-ring{width:116px;height:116px}
 .weather-hero.is-fullscreen .cinematic-bottom{display:none!important}
 .weather-hero.is-fullscreen .fullscreen-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .weather-hero.is-fullscreen .fullscreen-details article{min-height:62px;padding:6px 9px}.weather-hero.is-fullscreen .fullscreen-details>article>span{font-size:8px}.weather-hero.is-fullscreen .fullscreen-details b{font-size:15px}.weather-hero.is-fullscreen .fullscreen-details small{font-size:8px}
}

/* ============================================================
   Twin Oaks Weather v7.8 — live wind-driven photographic clouds
   These layers exist only inside the cinematic full-screen backdrop. The
   source artwork is transparent photography, not drawn CSS cloud shapes.
   ============================================================ */
.cinematic-cloud-field{display:none}
.weather-hero:fullscreen .cinematic-cloud-field,
.weather-hero:-webkit-full-screen .cinematic-cloud-field,
.weather-hero.is-fullscreen .cinematic-cloud-field{
 display:block;position:absolute;z-index:1;inset:-8vh -12vw 34%;overflow:visible;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,#000 0 56%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.34) 91%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0 56%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.34) 91%,transparent 100%)
}
.cinematic-season{z-index:0}.cinematic-canopy{z-index:2}
.cinematic-cloud-field:after{
 content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(180deg,rgba(189,202,209,.22),rgba(109,131,142,.13) 70%,transparent);opacity:0;transition:opacity 2.4s ease
}
.cinematic-cloud{
 position:absolute;z-index:1;left:0;top:0;width:clamp(320px,var(--cloud-width,38vw),1050px);aspect-ratio:1600/441;opacity:0;
 transform:translate3d(0,0,0);transform-origin:center;will-change:transform,opacity;transition:transform .28s linear,opacity 2.2s ease;contain:layout paint
}
.cinematic-cloud:before{content:"";position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain;filter:saturate(.86) contrast(.92) brightness(.94);transition:filter 2s ease}
.cinematic-cloud-cumulus:before{background-image:url('../img/cinematic/cloud-cumulus.webp')}
.cinematic-cloud-stratocumulus:before{background-image:url('../img/cinematic/cloud-stratocumulus.webp')}
.cinematic-cloud.is-mirrored:before{transform:scaleX(-1)}

/* Progressive coverage keeps reported conditions visually distinct. */
body[data-sky-cover="mostly-clear"] .cinematic-cloud:nth-child(-n+2){opacity:var(--cloud-opacity-mostly-clear,.24)}
body[data-sky-cover="partly"] .cinematic-cloud:nth-child(-n+4){opacity:var(--cloud-opacity-partly,.4)}
body[data-sky-cover="mostly"] .cinematic-cloud:nth-child(-n+8){opacity:var(--cloud-opacity-mostly,.5)}
body[data-sky-cover="overcast"] .cinematic-cloud{opacity:var(--cloud-opacity-overcast,.58)}
body[data-sky-cover="overcast"] .cinematic-cloud-field:after{opacity:.44}
body[data-sky-cover="clear"] .cinematic-cloud,
body[data-sky-cover="clear"] .cinematic-cloud-field:after{opacity:0!important}

/* Weather and light alter the same cloud photography rather than swapping to
   a visually unrelated effect. */
body[data-weather-mode="rain"] .cinematic-cloud:before{filter:saturate(.65) contrast(1.03) brightness(.7)}
body[data-weather-mode="storm"] .cinematic-cloud:before,
body[data-weather-mode="severe"] .cinematic-cloud:before{filter:saturate(.52) contrast(1.12) brightness(.5)}
body[data-weather-mode="snow"] .cinematic-cloud:before,
body[data-weather-mode="ice"] .cinematic-cloud:before{filter:saturate(.42) contrast(.9) brightness(1.06)}
body[data-sun-phase="dusk"] .cinematic-cloud:before{filter:saturate(.62) contrast(.98) brightness(.65) hue-rotate(-8deg)}
body[data-sun-phase="night"] .cinematic-cloud:before{filter:saturate(.4) contrast(1.04) brightness(.34) hue-rotate(7deg)}

/* The duplicated leafy crowns remain over the cloud field so clouds read as
   distant sky, not mist painted across the oak leaves. */
body[data-tree-season="spring"] .cinematic-canopy{background-image:url('../img/cinematic/twin-oaks-spring.webp')}
body[data-tree-season="summer"] .cinematic-canopy{background-image:url('../img/cinematic/twin-oaks-summer.webp')}
body[data-tree-season="autumn"] .cinematic-canopy{background-image:url('../img/cinematic/twin-oaks-autumn.webp')}
body[data-tree-season="spring"]:not([data-sky-cover="clear"]) .weather-hero.is-fullscreen .cinematic-canopy,
body[data-tree-season="summer"]:not([data-sky-cover="clear"]) .weather-hero.is-fullscreen .cinematic-canopy,
body[data-tree-season="autumn"]:not([data-sky-cover="clear"]) .weather-hero.is-fullscreen .cinematic-canopy{display:block}

@media(prefers-reduced-motion:reduce){.cinematic-cloud{transition:none!important;will-change:auto}.cinematic-cloud-field:after{transition:none!important}}

/* ============================================================
   Twin Oaks Weather v7.9 — visible cloud drift and clear glass cards
   The seven-card rail remains readable but no longer paints a dark green
   strip over the grass. These overrides apply only to the cinematic display.
   ============================================================ */
@media(min-width:981px){
 .weather-hero:fullscreen .fullscreen-details article,
 .weather-hero:-webkit-full-screen .fullscreen-details article,
 .weather-hero.is-fullscreen .fullscreen-details article{
  border-color:rgba(255,255,255,.42);
  background:rgba(5,22,25,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.08),inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(3px) saturate(1.04);
  backdrop-filter:blur(3px) saturate(1.04)
 }
 .weather-hero:fullscreen .fullscreen-details .fullscreen-highlight,
 .weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-highlight,
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-highlight{background:rgba(7,55,47,.17)}
 .weather-hero:fullscreen .fullscreen-details .fullscreen-rain,
 .weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-rain,
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-rain{background:rgba(7,42,50,.18)}
}
@media(max-width:980px){
 .weather-hero.is-fullscreen .fullscreen-details article{
  border-color:rgba(255,255,255,.4);
  background:rgba(5,22,25,.16);
  -webkit-backdrop-filter:blur(3px) saturate(1.04);
  backdrop-filter:blur(3px) saturate(1.04)
 }
}

/* ============================================================
   Twin Oaks Weather v8.0 — compact-TV parity
   Some 1080p television browsers expose a 960px CSS viewport and request
   reduced motion. Keep their landscape display visually aligned with the
   desktop cinematic scene while leaving portrait-phone accessibility intact.
   ============================================================ */
@media(min-width:700px) and (max-width:980px) and (orientation:landscape){
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .hero-copy{max-width:330px}
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-current{
  display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:8px;margin-top:14px
 }
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-condition-icon{
  display:block!important;flex:0 0 100%;font-size:32px;line-height:1;filter:drop-shadow(0 4px 7px rgba(0,0,0,.24))
 }
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-current>span:not(.cinematic-condition-icon){
  position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;width:max-content;max-width:100%;padding-right:0;border-right:0
 }
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-current i{grid-row:1/3;font-style:normal;color:#d8ebee;font-size:17px}
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-current b{font-size:17px;font-weight:500;line-height:1.05}
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-current small{font-size:7px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72)}
}

/* ============================================================
   Twin Oaks Weather v8.1 — television cloud-engine compatibility
   JavaScript supplies explicit pixel width and height so older TV browsers do
   not collapse the empty cloud sprite elements. Short linear interpolation
   smooths the wall-clock updates used when animation frames are throttled.
   ============================================================ */
body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-cloud{
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
 transform-style:flat
}
@media(prefers-reduced-motion:reduce){
 body[data-display-profile="compact-tv"] .weather-hero.is-fullscreen .cinematic-cloud{
  transition:transform .28s linear,opacity 2.2s ease!important;
  will-change:transform,opacity
 }
}

/* ============================================================
   Twin Oaks Weather v8.7 — compact, consistent glass conditions
   The landscape stays visible while each live reading gets a clearer visual
   hierarchy and a restrained category accent. Rain cards share one treatment.
   ============================================================ */
.fullscreen-details article{--fs-accent:#9ed5d1}
.fullscreen-details .fullscreen-humidity{--fs-accent:#61c9f2}
.fullscreen-details .fullscreen-pressure{--fs-accent:#b6a0ef}
.fullscreen-details .fullscreen-solar{--fs-accent:#f6c75d}
.fullscreen-details .fullscreen-gust{--fs-accent:#55d7bc}
.fullscreen-details .fullscreen-rain{--fs-accent:#58b9ea}

@media(min-width:981px){
 .weather-hero:fullscreen .fullscreen-details,
 .weather-hero:-webkit-full-screen .fullscreen-details,
 .weather-hero.is-fullscreen .fullscreen-details{gap:clamp(7px,.68vw,11px)}
 .weather-hero:fullscreen .fullscreen-details article,
 .weather-hero:-webkit-full-screen .fullscreen-details article,
 .weather-hero.is-fullscreen .fullscreen-details article{
  position:relative;min-height:62px;padding:7px 11px 6px;border-color:rgba(255,255,255,.42);
  background:rgba(5,22,25,.23);box-shadow:0 7px 20px rgba(0,0,0,.1),inset 0 1px rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(5px) saturate(1.06);backdrop-filter:blur(5px) saturate(1.06)
 }
 .weather-hero:fullscreen .fullscreen-details article:before,
 .weather-hero:-webkit-full-screen .fullscreen-details article:before,
 .weather-hero.is-fullscreen .fullscreen-details article:before{
  content:"";position:absolute;z-index:1;left:11px;right:11px;top:0;height:2px;border-radius:0 0 3px 3px;background:var(--fs-accent);opacity:.9;box-shadow:0 0 8px color-mix(in srgb,var(--fs-accent) 55%,transparent)
 }
 .weather-hero:fullscreen .fullscreen-details .fullscreen-highlight,
 .weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-highlight,
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-highlight{background:rgba(6,47,41,.25)}
 .weather-hero:fullscreen .fullscreen-details .fullscreen-rain,
 .weather-hero:-webkit-full-screen .fullscreen-details .fullscreen-rain,
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-rain{background:rgba(7,42,50,.27);border-color:rgba(151,220,241,.46)}
 .weather-hero:fullscreen .fullscreen-details>article>span,
 .weather-hero:-webkit-full-screen .fullscreen-details>article>span,
 .weather-hero.is-fullscreen .fullscreen-details>article>span{font-size:clamp(9px,.7vw,11px);line-height:1.1;letter-spacing:.075em}
 .weather-hero:fullscreen .fullscreen-details b,
 .weather-hero:-webkit-full-screen .fullscreen-details b,
 .weather-hero.is-fullscreen .fullscreen-details b{display:block;margin-top:3px;font-size:clamp(17px,1.27vw,22px);font-weight:540;line-height:1.05;white-space:nowrap}
 .weather-hero:fullscreen .fullscreen-details small,
 .weather-hero:-webkit-full-screen .fullscreen-details small,
 .weather-hero.is-fullscreen .fullscreen-details small{margin-top:3px;font-size:clamp(9px,.68vw,11px);line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .weather-hero:fullscreen .fullscreen-details b>span,
 .weather-hero:-webkit-full-screen .fullscreen-details b>span,
 .weather-hero.is-fullscreen .fullscreen-details b>span{display:inline}
 .fullscreen-details b>em{display:inline;margin-left:4px;color:rgba(255,255,255,.78);font-size:.58em;font-style:normal;font-weight:500;letter-spacing:.015em}
 .fullscreen-details .fullscreen-pair{display:grid;grid-template-columns:.75fr 1.25fr;gap:8px;margin-top:2px;align-items:end}
 .fullscreen-details .fullscreen-pair>div{min-width:0}
 .fullscreen-details .fullscreen-pair small{margin:0;color:rgba(255,255,255,.7);font-size:clamp(7px,.56vw,9px);font-weight:700;letter-spacing:.055em;text-transform:uppercase}
 .fullscreen-details .fullscreen-pair b{margin-top:1px;font-size:clamp(15px,1.08vw,19px)}
 .fullscreen-details .fullscreen-pair b>em{margin-left:2px;font-size:.5em}
}

@media(max-width:980px){
 .weather-hero.is-fullscreen .fullscreen-details article{
  position:relative;min-height:52px;padding:5px 7px 4px;border-color:rgba(255,255,255,.42);background:rgba(5,22,25,.24);
  -webkit-backdrop-filter:blur(4px) saturate(1.05);backdrop-filter:blur(4px) saturate(1.05)
 }
 .weather-hero.is-fullscreen .fullscreen-details article:before{content:"";position:absolute;left:7px;right:7px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--fs-accent);opacity:.9}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-highlight{background:rgba(6,47,41,.26)}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-rain{background:rgba(7,42,50,.28);border-color:rgba(151,220,241,.44)}
 .weather-hero.is-fullscreen .fullscreen-details>article>span{font-size:7.5px;line-height:1.08;letter-spacing:.07em}
 .weather-hero.is-fullscreen .fullscreen-details b{display:block;margin-top:2px;font-size:13px;line-height:1.05;white-space:nowrap}
 .weather-hero.is-fullscreen .fullscreen-details small{margin-top:2px;font-size:7.5px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .weather-hero.is-fullscreen .fullscreen-details b>span{display:inline}
 .weather-hero.is-fullscreen .fullscreen-details b>em{display:inline;margin-left:2px;color:rgba(255,255,255,.78);font-size:.56em;font-style:normal;font-weight:500}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair{display:grid;grid-template-columns:.72fr 1.28fr;gap:4px;margin-top:1px;align-items:end}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair>div{min-width:0}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair small{margin:0;font-size:6px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair b{margin-top:1px;font-size:11px}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair b>em{margin-left:1px;font-size:.45em}
}

@media(max-width:620px) and (orientation:portrait){
 .weather-hero.is-fullscreen .fullscreen-details article{min-height:60px;padding:7px 9px 6px}
 .weather-hero.is-fullscreen .fullscreen-details>article>span{font-size:8px}
 .weather-hero.is-fullscreen .fullscreen-details b{font-size:15px}
 .weather-hero.is-fullscreen .fullscreen-details small{font-size:8px}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair small{font-size:7px}
 .weather-hero.is-fullscreen .fullscreen-details .fullscreen-pair b{font-size:13px}
}

/* ============================================================
   Twin Oaks Weather v9.0 — feathered wind-driven oak crowns
   The safe default is static. Moving crowns are enabled only when the browser
   can blend a soft mask, so a hard oval can never reappear on older TVs.
   ============================================================ */
.cinematic-canopy{
 display:none!important;position:absolute;inset:0;z-index:2;overflow:hidden;
 pointer-events:none;opacity:1!important;background:none!important;
 clip-path:none!important;will-change:transform
}
.cinematic-canopy:before,.cinematic-canopy:after{
 content:"";position:absolute;inset:0;background-position:center;
 background-repeat:no-repeat;background-size:cover;opacity:0
}

@supports ((-webkit-mask-image:url('../img/cinematic/canopy-mask-left.png')) or (mask-image:url('../img/cinematic/canopy-mask-left.png'))){
 .cinematic-canopy-left{
  -webkit-mask-image:url('../img/cinematic/canopy-mask-left.png');
  mask-image:url('../img/cinematic/canopy-mask-left.png');
  animation:cinematicOakLeft var(--tree-sway-duration,6s) ease-in-out infinite alternate
 }
 .cinematic-canopy-right{
  -webkit-mask-image:url('../img/cinematic/canopy-mask-right.png');
  mask-image:url('../img/cinematic/canopy-mask-right.png');
  animation:cinematicOakRight var(--tree-sway-duration,6s) ease-in-out infinite alternate-reverse
 }
 .cinematic-canopy-left,.cinematic-canopy-right{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-mode:alpha;mask-mode:alpha
 }

 body[data-tree-motion="active"][data-tree-season="spring"] .weather-hero:fullscreen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="summer"] .weather-hero:fullscreen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="autumn"] .weather-hero:fullscreen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="spring"] .weather-hero:-webkit-full-screen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="summer"] .weather-hero:-webkit-full-screen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="autumn"] .weather-hero:-webkit-full-screen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="spring"] .weather-hero.is-fullscreen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="summer"] .weather-hero.is-fullscreen .cinematic-canopy,
 body[data-tree-motion="active"][data-tree-season="autumn"] .weather-hero.is-fullscreen .cinematic-canopy{display:block!important}

 body[data-tree-season="spring"] .cinematic-canopy:before{background-image:url('../img/cinematic/twin-oaks-spring.webp');opacity:1}
 body[data-tree-season="summer"] .cinematic-canopy:before{background-image:url('../img/cinematic/twin-oaks-summer.webp');opacity:1}
 body[data-tree-season="summer"] .cinematic-canopy:after{background-image:url('../img/cinematic/twin-oaks-summer-clear.webp')}
 body[data-tree-season="autumn"] .cinematic-canopy:before{background-image:url('../img/cinematic/twin-oaks-autumn.webp');opacity:1}

 body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-canopy:before{opacity:0}
 body[data-tree-season="summer"][data-sky-cover="clear"] .cinematic-canopy:after{opacity:1}
 body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-canopy:before{opacity:.28}
 body[data-tree-season="summer"][data-sky-cover="mostly-clear"] .cinematic-canopy:after{opacity:.86}
 body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-canopy:before{opacity:.56}
 body[data-tree-season="summer"][data-sky-cover="partly"] .cinematic-canopy:after{opacity:.64}
}

@media(prefers-reduced-motion:reduce){
 body:not([data-display-profile="compact-tv"]) .cinematic-canopy{display:none!important}
}

/* ============================================================
   Twin Oaks Weather v9.3 — clear, progressive evening twilight
   Sky cover and sunset lighting are independent. The nearby KCGI METAR, with
   the coordinate-specific NWS hourly forecast as fallback, controls clouds.
   ============================================================ */
.cinematic-backdrop:before{
 content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse at 92% 51%,rgba(255,183,120,.78) 0,rgba(222,133,94,.38) 18%,rgba(94,93,126,.12) 38%,transparent 61%),linear-gradient(180deg,rgba(51,77,116,.18),transparent 52%);
 transition:opacity 1.8s ease
}
body[data-sun-phase="dusk"][data-sky-cover="clear"] .weather-hero:fullscreen .cinematic-backdrop:before,
body[data-sun-phase="dusk"][data-sky-cover="clear"] .weather-hero:-webkit-full-screen .cinematic-backdrop:before,
body[data-sun-phase="dusk"][data-sky-cover="clear"] .weather-hero.is-fullscreen .cinematic-backdrop:before{
 opacity:var(--twilight-glow-opacity,.30)
}

/* v9.6 — show the complete two-oak landscape behind the regular-page content.
   The normal page keeps its own readings; full-screen-only information stays
   hidden until full screen is opened. */
@media (min-width:700px){
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .wind-orbit{display:none!important}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .fullscreen-details,
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-current,
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-bottom,
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-heading{display:none!important}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:1;
  pointer-events:none;
  -webkit-mask-image:none;
  mask-image:none;
 }
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,48,55,.07),transparent 58%,rgba(5,28,27,.16));
 }
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy{text-shadow:0 2px 10px rgba(0,0,0,.42)}
 body[data-sun-phase="dusk"] .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop{filter:brightness(.72) saturate(.84)}
 body[data-sun-phase="night"] .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop{filter:brightness(.28) saturate(.64)}
 body[data-weather-mode="storm"] .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop,
 body[data-weather-mode="severe"] .weather-hero:not(:fullscreen):not(.is-fullscreen) .cinematic-backdrop{filter:brightness(.56) saturate(.7)}
}

/* Native and fallback full-screen modes always receive the complete scene. */
.weather-hero:fullscreen .cinematic-backdrop,
.weather-hero:-webkit-full-screen .cinematic-backdrop,
.weather-hero.is-fullscreen .cinematic-backdrop{
 opacity:1;
 -webkit-mask-image:none;
 mask-image:none;
}

/* v9.7 — align the regular Twin Oaks scene with the site's shared content
   boundaries. Full-screen mode remains genuinely edge to edge. */
.weather-hero:not(:fullscreen):not(.is-fullscreen){
 width:min(1180px,calc(100% - 36px));
 margin-inline:auto;
}

/* v9.8 — keep the live star field in the open sky on the regular page.
   Full-screen already uses this horizon boundary and remains unchanged. */
@media (min-width:700px){
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-sky{
  clip-path:inset(0 0 63% 0);
 }
}

/* v9.9.3 — keep NWS warning text readable in every page theme. The alert
   background intentionally remains pale so warnings stand apart at night,
   while explicit dark text prevents it from inheriting the night palette. */
.weather-alert,
body[data-sun-phase="dusk"] .weather-alert,
body[data-sun-phase="night"] .weather-alert{
 color:#4f2026;
 background:#fff0ef;
 border-left-color:#d94f54;
}
.weather-alert b,
body[data-sun-phase="dusk"] .weather-alert b,
body[data-sun-phase="night"] .weather-alert b{
 color:#781d29;
}
.weather-alert span,
body[data-sun-phase="dusk"] .weather-alert span,
body[data-sun-phase="night"] .weather-alert span{
 color:#553238;
}

/* v9.9.4 — give Station Status banners their own high-contrast dusk/night
   palette instead of letting pale page text wash out on daytime backgrounds. */
body[data-sun-phase="dusk"] .status-banner:not(.temporary),
body[data-sun-phase="night"] .status-banner:not(.temporary){
 background:linear-gradient(115deg,#163b2d,#102c22);
 border-color:#34725a;
 color:#f2fff8;
 box-shadow:0 10px 28px rgba(0,0,0,.16);
}
body[data-sun-phase="dusk"] .status-banner:not(.temporary) b,
body[data-sun-phase="night"] .status-banner:not(.temporary) b{
 color:#f4fff9;
}
body[data-sun-phase="dusk"] .status-banner:not(.temporary) span,
body[data-sun-phase="night"] .status-banner:not(.temporary) span{
 color:#b9d9ca;
}

/* v9.9.5 — place the feathered tree crowns in a real foreground stacking
   layer. The Sun, Moon, stars, and distant clouds remain in the sky; rain and
   the readable weather interface remain in front of the trees. */
.weather-hero>.hero-sky{z-index:1}
.weather-hero>.cinematic-canopy{z-index:2}
.weather-hero>.weather-effects{z-index:3}
.weather-hero>.hero-grid{z-index:4}

@supports ((-webkit-mask-image:url('../img/cinematic/canopy-mask-left.png')) or (mask-image:url('../img/cinematic/canopy-mask-left.png'))){
 @media(min-width:700px){
  body[data-tree-season="spring"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy,
  body[data-tree-season="summer"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy,
  body[data-tree-season="autumn"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy{display:block!important}
 }
 body[data-tree-season="spring"] .weather-hero:fullscreen>.cinematic-canopy,
 body[data-tree-season="summer"] .weather-hero:fullscreen>.cinematic-canopy,
 body[data-tree-season="autumn"] .weather-hero:fullscreen>.cinematic-canopy,
 body[data-tree-season="spring"] .weather-hero:-webkit-full-screen>.cinematic-canopy,
 body[data-tree-season="summer"] .weather-hero:-webkit-full-screen>.cinematic-canopy,
 body[data-tree-season="autumn"] .weather-hero:-webkit-full-screen>.cinematic-canopy,
 body[data-tree-season="spring"] .weather-hero.is-fullscreen>.cinematic-canopy,
 body[data-tree-season="summer"] .weather-hero.is-fullscreen>.cinematic-canopy,
 body[data-tree-season="autumn"] .weather-hero.is-fullscreen>.cinematic-canopy{display:block!important}
}

body[data-tree-motion="still"] .weather-hero>.cinematic-canopy{
 animation:none!important;
 transform:none!important;
}
.weather-hero:fullscreen>.cinematic-canopy,
.weather-hero:-webkit-full-screen>.cinematic-canopy,
.weather-hero.is-fullscreen>.cinematic-canopy{
 filter:brightness(var(--scene-brightness,1)) saturate(var(--scene-saturation,1)) hue-rotate(var(--scene-hue,0deg));
}
body[data-sun-phase="dusk"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy{filter:brightness(.72) saturate(.84)}
body[data-sun-phase="night"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy{filter:brightness(.28) saturate(.64)}
body[data-weather-mode="storm"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy,
body[data-weather-mode="severe"] .weather-hero:not(:fullscreen):not(.is-fullscreen)>.cinematic-canopy{filter:brightness(.56) saturate(.7)}

@media(prefers-reduced-motion:reduce){
 body[data-tree-season="spring"] .weather-hero>.cinematic-canopy,
 body[data-tree-season="summer"] .weather-hero>.cinematic-canopy,
 body[data-tree-season="autumn"] .weather-hero>.cinematic-canopy{
  display:block!important;
  animation:none!important;
  transform:none!important;
 }
}
body[data-sun-phase="dusk"] .status-banner:not(.temporary) i,
body[data-sun-phase="night"] .status-banner:not(.temporary) i{
 background:#36d9a5;
 box-shadow:0 0 0 7px rgba(54,217,165,.16);
}
body[data-sun-phase="dusk"] .status-banner.stale,
body[data-sun-phase="night"] .status-banner.stale{
 background:linear-gradient(115deg,#3b2d17,#2b2113);
 border-color:#76572b;
}
body[data-sun-phase="dusk"] .status-banner.offline,
body[data-sun-phase="night"] .status-banner.offline{
 background:linear-gradient(115deg,#421f23,#2e171a);
 border-color:#82434a;
}
body[data-sun-phase="dusk"] .setup-warning.private-status,
body[data-sun-phase="night"] .setup-warning.private-status{
 background:linear-gradient(115deg,#30301f,#20291e);
 border-color:#756a35;
 color:#fff3c4;
 box-shadow:0 10px 28px rgba(0,0,0,.13);
}
body[data-sun-phase="dusk"] .setup-warning.private-status b,
body[data-sun-phase="night"] .setup-warning.private-status b{
 color:#fff4bd;
}
body[data-sun-phase="dusk"] .setup-warning.private-status span,
body[data-sun-phase="night"] .setup-warning.private-status span{
 color:#d9d2aa;
}

/* v9.9.7 — the astronomical Sun and Moon belong to Full Screen Mode only.
   Keep them out of the regular weather panel without changing their live
   positions, phase, tree occlusion, or full-screen behavior. */
.weather-hero:not(:fullscreen):not(.is-fullscreen) .live-sun,
.weather-hero:not(:fullscreen):not(.is-fullscreen) .live-moon{
 display:none!important;
}

/* v9.9.8 — natural full-screen Moon scale and wind-dial clearance.
   The old 126px canvas made a low crescent look much larger than the real
   Moon, and the wind dial could cover its curved edge so only a white column
   remained. Keep the phase canvas circular, reduce the display diameter by
   about seventy percent, soften the glow, and use the small JS-calculated
   offset only when the Moon approaches the western full-screen controls. */
.weather-hero:fullscreen .hero-sky .live-moon,
.weather-hero:-webkit-full-screen .hero-sky .live-moon,
.weather-hero.is-fullscreen .hero-sky .live-moon{
 width:38px;
 height:38px;
 transform:translate(calc(-50% - var(--moon-hud-shift,0px)),-50%);
 filter:drop-shadow(0 0 5px rgba(224,237,241,.14));
}
@media(max-width:980px){
 .weather-hero.is-fullscreen .hero-sky .live-moon{width:34px;height:34px}
}
@media(max-width:620px){
 .weather-hero.is-fullscreen .hero-sky .live-moon{width:30px;height:30px}
}

/* v9.9.9 — restore the darker no-street-light night scene and put the Moon
   back on its true projected path. A much smaller, quieter Moon reads as a
   distant object; the complete live sky remains below both masked oak crowns. */
.weather-hero:fullscreen>.hero-sky,
.weather-hero:-webkit-full-screen>.hero-sky,
.weather-hero.is-fullscreen>.hero-sky{z-index:1!important}
.weather-hero:fullscreen>.cinematic-canopy,
.weather-hero:-webkit-full-screen>.cinematic-canopy,
.weather-hero.is-fullscreen>.cinematic-canopy{z-index:2!important}
.weather-hero:fullscreen .hero-sky .live-moon,
.weather-hero:-webkit-full-screen .hero-sky .live-moon,
.weather-hero.is-fullscreen .hero-sky .live-moon{
 width:22px;
 height:22px;
 z-index:1!important;
 opacity:.84;
 transform:translate(-50%,-50%);
 filter:drop-shadow(0 0 2px rgba(224,237,241,.12));
}
@media(max-width:980px){
 .weather-hero.is-fullscreen .hero-sky .live-moon{width:20px;height:20px}
}
@media(max-width:620px){
 .weather-hero.is-fullscreen .hero-sky .live-moon{width:18px;height:18px}
}

/* v9.9.12 — identify KCGI as a sky-only reference and visually separate it
   from the daily records measured by the Twin Oaks station. */
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-weather-detail{
 display:block;
 width:fit-content;
 max-width:min(390px,100%);
 min-height:0;
 margin:2px 0 11px;
 padding:0;
 border:0;
 border-radius:0;
 background:none;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
 box-shadow:none;
 color:rgba(255,255,255,.94);
 font-size:12px;
 font-weight:700;
 line-height:1.3;
 text-shadow:0 2px 7px rgba(0,0,0,.72);
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records{
 display:grid;
 grid-template-columns:repeat(2,minmax(112px,1fr));
 gap:0 18px;
 width:fit-content;
 max-width:100%;
 margin:0 0 12px;
 padding:9px 12px 10px;
 border:1px solid rgba(255,255,255,.38);
 border-radius:13px;
 background:rgba(7,31,29,.48);
 -webkit-backdrop-filter:blur(7px);
 backdrop-filter:blur(7px);
 box-shadow:0 7px 18px rgba(0,0,0,.14);
 text-shadow:none;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records-source{
 grid-column:1/-1;
 display:block;
 margin:0 0 6px;
 color:rgba(235,248,244,.9);
 font-size:9px;
 font-weight:800;
 line-height:1.1;
 letter-spacing:.1em;
 text-transform:uppercase;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span{
 min-width:112px;
 padding:0;
 border:0;
 border-radius:0;
 background:none;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
 box-shadow:none;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span+span{
 padding-left:18px;
 border-left:1px solid rgba(255,255,255,.25);
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records small{
 color:#e9f7f3;
 font-size:10px;
 font-weight:800;
 line-height:1.25;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records small em{
 margin-top:3px;
 color:#fff;
 font-size:10px;
 font-weight:650;
 line-height:1.2;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records b{
 margin-top:4px;
 color:#fff;
 font-size:23px;
 font-weight:800;
 line-height:1;
}
@media(max-width:620px){
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-weather-detail{max-width:300px;font-size:11.5px}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records{grid-template-columns:repeat(2,minmax(96px,1fr));gap:0 12px;padding:8px 10px 9px}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span{min-width:96px}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span+span{padding-left:12px}
}

/* v9.9.15 — keep the Wind metric formatted like the other primary cards.
   The shared metric-card span rule is meant for labels, but it also made each
   live Wind value a block. Restore inline values so speed and mph stay
   together and the direction, peak gust, and peak time form one compact line. */
.primary-metrics .metric-card.wind .wind-card-copy{min-width:0}
.primary-metrics .metric-card.wind .wind-card-value,
.primary-metrics .metric-card.wind .wind-card-detail{white-space:nowrap}
.primary-metrics .metric-card.wind .wind-card-value span,
.primary-metrics .metric-card.wind .wind-card-detail span{
 display:inline;
 color:inherit;
 font-size:inherit;
 font-weight:inherit;
 letter-spacing:normal;
 text-transform:none;
}

/* v9.9.17 — keep the regular-page readings compact and out of the left oak.
   Full-screen mode retains its larger cinematic typography. */
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy{
 transform:translateY(-24px);
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .eyebrow{font-size:12px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy h1{
 font-size:clamp(82px,9vw,128px);
 line-height:.82;
 margin:12px 0 6px;
 letter-spacing:-.07em;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy h1 small{
 font-size:.17em;
 margin-left:4px;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-condition{
 font-size:29px;
 margin:11px 0 6px;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-weather-detail{font-size:11px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records{
 grid-template-columns:repeat(2,minmax(104px,1fr));
 gap:0 14px;
 padding:8px 10px 9px;
}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span{min-width:104px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records>span+span{padding-left:14px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-records b{font-size:21px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-sub{font-size:16px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-actions{margin-top:18px}
.weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-actions .button{
 padding:11px 15px;
 font-size:13px;
}
@media(max-width:620px){
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy{transform:translateY(-14px)}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-copy h1{font-size:82px}
 .weather-hero:not(:fullscreen):not(.is-fullscreen) .hero-condition{font-size:25px}
}