/* TOC: Island and current reading; photo comparison; exposure history; metric controls; responsive layouts. */
:root{--paper:#f5f3ed;--white:#fffdf8;--ink:#192c2b;--muted:#656b62;--line:#dedfd4;--orange:#c45a30;--moderate:#d3a52c;--sensitive:#d97738;--unhealthy:#bc464e}
.site-header{background:#192c2b;color:#fffdf8;margin:0 -64px;padding:0 64px;border:0;height:100px}
.brand svg{stroke:currentColor}
.site-header nav a:hover{color:#edb98e}
.location-tag>span{color:#eaa67e}
.intro-row{padding:42px 0 30px}
.intro-row .eyebrow{color:#ad4e2c}
h1{font-size:clamp(39px,5vw,68px);letter-spacing:-.055em}
.intro-text{max-width:650px;font-size:15px;line-height:1.65}
.current-grid{grid-template-columns:1.4fr 1fr;gap:0}
.air-card{border-radius:0 14px 14px 0;background:var(--reading-background,var(--white));color:var(--reading-foreground,var(--ink));border:1px solid var(--line);padding:28px 30px;overflow:hidden}
.air-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--reading-color,#dedfd4)}
.air-reading{gap:19px;margin-top:30px}
.aqi-value{font-size:clamp(88px,9.3vw,132px);letter-spacing:-.075em}
.aqi-label{padding-top:12px}
.aqi-label strong{font-size:27px}
.aqi-label>span{font-size:9px;letter-spacing:1px}
.aqi-label a{font-size:10px}
.air-description{min-height:42px;margin-top:16px;font-size:12px;color:var(--muted)}
.air-meta{grid-template-columns:1fr 1fr;padding-top:19px;margin-top:20px}
.air-meta .mini-label{color:var(--muted)}
.air-meta strong{font-size:20px}
.air-meta .observation-time{font-size:12px}
.current-history-link{border-top:1px solid var(--line);padding-top:16px;margin-top:20px;display:flex;justify-content:space-between;gap:10px;font-size:11px;text-decoration:none;font-weight:600}
.current-history-link:hover{color:var(--orange)}
.status-pill{background:#f2f3eb;border-color:#d9dfd0;font-size:9px}
.current-notice{font-size:11px;background:#fff1df;margin:15px -8px 0;padding:10px;border:0}
.air-card[data-category=moderate] .status-dot{background:var(--moderate)}
.air-card[data-category=sensitive] .status-dot{background:var(--sensitive)}
.air-card[data-category=unhealthy] .status-dot{background:var(--unhealthy)}
.air-card .air-description,.air-card .mini-label,.air-card .scale-labels{color:inherit}
.air-card .status-pill{background:transparent;color:inherit;border-color:currentColor}
.air-card .status-dot{background:currentColor!important}
.air-card .air-meta,.air-card .current-history-link{border-color:currentColor}
.air-card .current-notice{background:transparent;color:inherit;border:1px solid currentColor;border-radius:4px}
.air-card .current-history-link:hover{color:inherit;text-decoration:underline}
.air-card .scale-marker{background:currentColor;border-color:var(--reading-background,var(--paper))}
.day-card{display:grid;grid-template-columns:1fr 1.15fr 1.25fr;gap:35px;padding:25px 28px;margin-top:16px;background:#eae9df;border:0;border-radius:10px}
.day-card-heading{display:block}
.day-card-heading .eyebrow{max-width:none;font-size:9px;margin-bottom:13px}
.day-card h2{font-size:24px;line-height:1.14;max-width:260px}
.day-card .mini-label{font-size:10px;margin:0 0 8px}
.day-card .activity-advice>p:last-child,.day-card .sensitive-advice>p:not(.mini-label){font-size:12px;line-height:1.7}
.day-card .text-link{font-size:10px;margin-top:11px}
.source-strip{font-size:9px;padding:14px 0}
.source-strip .tiny-dot{background:var(--orange)}
.island-comparison{margin:0;display:flex;flex-direction:column;min-width:0;border-radius:14px 0 0 14px;overflow:hidden;background:#192c2b}
.comparison-scene{--split:50%;--haze:0;--haze-blur:0px;position:relative;min-height:420px;flex:1;isolation:isolate;overflow:hidden}
.island-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.haze-layer{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));z-index:1}
/* Original grey haze, texture and blur apply only inside the simulated half. */
.haze-veil{position:absolute;inset:0;pointer-events:none;opacity:var(--haze);background-color:#bdbdbd;
background-image:radial-gradient(ellipse at 20% 25%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%),radial-gradient(ellipse at 75% 20%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 55%),radial-gradient(ellipse at 40% 80%,rgba(120,120,120,.35) 0%,rgba(120,120,120,0) 65%),url("images/overlay.png");
background-repeat:no-repeat,no-repeat,no-repeat,repeat;background-size:cover,cover,cover,180px 180px;background-position:center center,center center,center center,top left;
-webkit-backdrop-filter:blur(var(--haze-blur));backdrop-filter:blur(var(--haze-blur));transition:opacity .6s ease}
.comparison-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#0b222c40 0%,transparent 33%,#0e24223b 54%,#10241dd9 100%);pointer-events:none}
.comparison-top{position:absolute;top:23px;left:25px;right:25px;display:flex;justify-content:space-between;gap:10px;color:#fff;z-index:3;font-size:8px;letter-spacing:1.3px;font-weight:600}
.comparison-top span{background:#152d2d6e;padding:6px 8px;border:1px solid #ffffff36;border-radius:3px;backdrop-filter:blur(4px)}
.comparison-caption{position:absolute;left:30px;right:25px;bottom:46px;z-index:3;pointer-events:none}
.comparison-caption .eyebrow{color:#e6dfca;font-size:9px;letter-spacing:1.6px;margin-bottom:13px}
.comparison-caption h2{font-size:clamp(28px,3.1vw,43px);line-height:1.06;color:#fffdf4;letter-spacing:-1.3px;font-weight:500;max-width:500px}
.comparison-caption>p:last-child{font-size:10px;color:#e0e6db;margin-top:13px;max-width:390px}
.comparison-divider{position:absolute;z-index:4;left:var(--split);top:0;bottom:0;width:1px;background:#ffffff9c;pointer-events:none}
.comparison-divider>span{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);height:38px;width:38px;border:1px solid #ffffffba;background:#fffdf7ed;color:#213a32;border-radius:50%;display:grid;place-items:center;font-size:20px;box-shadow:0 2px 15px #0003}
.haze-slider{position:absolute;inset:0;z-index:5;margin:0;width:100%;height:100%;cursor:ew-resize;opacity:.001}
.haze-slider:focus-visible{opacity:1;appearance:none;background:transparent;outline:3px solid #f2ae75;outline-offset:-5px}
.haze-slider:focus-visible::-webkit-slider-thumb{appearance:none;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.comparison-hint{position:absolute;bottom:17px;left:30px;z-index:4;font-size:8px;letter-spacing:1.6px;color:#e6e9db;pointer-events:none}
.island-comparison figcaption{color:#bfc9bd;padding:11px 17px;font-size:9px;line-height:1.6;background:#192c2b}
.history-section{padding-top:56px}
.history-section .section-heading h2{max-width:800px;font-size:40px}
.section-heading .eyebrow{color:#a45131}
.history-panel{border-color:#d9d8cb}
.summary-grid{background:#f1eee4;padding-top:25px;padding-bottom:25px}
.summary-grid>div:first-child strong{color:#b34f2c;font-size:45px}
.summary-grid strong{font-size:36px}
.summary-grid .mini-label{color:#4f574b;font-size:10px}
.summary-grid>div>span:last-child{font-size:10px}
.summary-grid>div:first-child{padding-right:20px}
.chart-key-dash{border-color:#bf8b3b}
.chart-key-dot{background:var(--orange)}
.chart-controls,.calendar-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.metric-toggle{display:inline-flex;background:#eeeee5;border-radius:5px;padding:3px;gap:2px;white-space:nowrap}
.metric-toggle button{font-size:10px;border:0;background:none;border-radius:3px;padding:6px 11px;min-height:29px}
.metric-toggle button[aria-pressed=true]{background:#233a31;color:#fff}
.metric-toggle button:hover:not([aria-pressed=true]){background:#dedfd0}
.chart-key{font-size:8px}
.heatmap-legend{padding-top:0}
.calendar-section .chart-heading{align-items:center}
.exposure-insights{padding:23px 28px;background:#fffaf0;border-bottom:1px solid var(--line)}
.exposure-intro{display:flex;justify-content:space-between;align-items:center;gap:25px}
.exposure-intro h3{font-size:19px;letter-spacing:-.6px}
.exposure-intro p{font-size:11px;line-height:1.7;max-width:760px;margin-top:7px}
.exposure-tag{font-size:10px;white-space:nowrap;color:#96502e;background:#f2e5cc;padding:7px 10px;border-radius:4px}
.distribution-track{display:flex;height:8px;border-radius:5px;overflow:hidden;margin:17px 0 8px;background:#e5e5d9;gap:2px}
.distribution-track>span{height:100%;min-width:0}
.distribution-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:10px;color:var(--muted)}
.distribution-legend>span{display:inline-flex;align-items:center;gap:5px}
.distribution-legend i{height:7px;width:7px;border-radius:50%}
.peak-days{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:21px}
.peak-day{background:var(--white);border:1px solid #e3dccd;border-radius:6px;padding:12px 13px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.peak-day:hover{border-color:#b79262}
.peak-day>span{font-size:10px;color:var(--muted)}
.peak-day>strong{font-size:25px;font-weight:500;grid-column:2;grid-row:1/3;letter-spacing:-.7px}
.peak-day>small{font-size:10px;color:var(--ink)}
.peak-empty{font-size:12px;margin-top:12px}
.calendar-months{grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:25px}
.calendar-day{height:39px;max-height:none;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;border-radius:4px}
.calendar-date{font-size:7px;line-height:1.1;opacity:.85}
.calendar-day strong{font-size:11px;font-weight:600;line-height:1.1}
.calendar-month h4{font-size:12px}
.calendar-weekdays{font-size:9px}
.calendar-day.is-partial::after{width:3px;height:3px;right:3px;bottom:3px}
.calendar-months:has(.calendar-month:nth-child(7)){grid-template-columns:repeat(4,1fr);gap:23px}
.calendar-months:has(.calendar-month:nth-child(7)) .calendar-day{font-size:10px;min-height:36px}
.history-limit{font-size:11px;line-height:1.8;max-width:900px;margin:24px 0}
.data-disclaimer{font-size:10px}
@media(min-width:1450px){
.site-header{margin:0 -80px;padding:0 80px}
.comparison-scene{min-height:445px}
}
@media(max-width:1100px){
.site-header{margin:0 -35px;padding:0 35px}
.current-grid{grid-template-columns:1.15fr 1fr}
.air-card{padding:24px}
.air-reading{gap:16px}
.aqi-value{font-size:100px}
.aqi-label strong{font-size:23px}
.comparison-scene{min-height:420px}
.comparison-caption{left:24px;right:20px}
.comparison-caption h2{font-size:34px}
.comparison-top{left:19px;right:19px;font-size:7px}
.day-card{gap:24px}
.day-card h2{font-size:22px}
.chart-controls{gap:12px}
.calendar-months:has(.calendar-month:nth-child(7)){grid-template-columns:repeat(3,1fr)}
.history-section .section-heading h2{font-size:36px}
.peak-days{gap:9px}
.peak-day{padding:12px 10px}
}
@media(max-width:800px){
.site-header{margin:0 -24px;padding:0 24px;height:90px}
.intro-row{padding-top:32px}
h1{font-size:49px}
.intro-text{font-size:14px}
.current-grid{grid-template-columns:1fr 1fr}
.air-card{padding:21px}
.aqi-value{font-size:87px}
.air-reading{gap:13px;flex-wrap:wrap;margin-top:23px}
.aqi-label{padding:0;flex:1;min-width:95px}
.aqi-label strong{font-size:24px}
.air-description{font-size:11px;margin-top:14px;min-height:0}
.aqi-scale{margin-top:25px}
.air-meta{gap:16px;grid-template-columns:1fr}
.air-meta strong{font-size:18px}
.air-meta .mini-label{margin-bottom:4px}
.air-meta>div:last-child{display:block;grid-column:auto}
.air-meta>div:last-child strong{font-size:12px}
.comparison-scene{min-height:430px}
.comparison-caption h2{font-size:29px}
.comparison-caption{bottom:45px;left:20px}
.comparison-caption .eyebrow{font-size:8px;max-width:180px}
.comparison-top{flex-direction:column;align-items:flex-start;gap:6px}
.comparison-top span:last-child{align-self:flex-end}
.comparison-caption>p:last-child{font-size:9px}
.comparison-hint{left:20px}
.comparison-divider>span{width:31px;height:31px;font-size:18px}
.island-comparison figcaption{font-size:8px;padding:9px 12px}
.current-history-link{font-size:10px}
.day-card{grid-template-columns:1fr 1fr;gap:20px;padding:22px}
.day-card-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start}
.day-card-heading .eyebrow{margin:3px 15px 0 0;font-size:8px}
.day-card h2{font-size:22px;max-width:none}
.day-card h2 br{display:none}
.day-card .activity-advice>p:last-child,.day-card .sensitive-advice>p:not(.mini-label){font-size:11px}
.chart-controls{justify-content:space-between;width:100%}
.calendar-tools{gap:12px;justify-content:space-between;width:100%}
.exposure-insights{padding:22px}
.exposure-intro{gap:18px}
.peak-day>strong{font-size:22px}
.peak-day>span,.peak-day>small{font-size:9px}
.calendar-months,.calendar-months:has(.calendar-month:nth-child(7)){grid-template-columns:repeat(2,1fr);gap:23px}
.calendar-day{height:37px}
.history-section .section-heading h2{font-size:34px;max-width:570px}
}
@media(max-width:520px){
.site-header{margin:0 -18px;padding:0 18px;height:78px}
.intro-row{padding:27px 0 23px}
.intro-row .eyebrow{font-size:8px;letter-spacing:1.3px}
h1{font-size:39px;max-width:none;letter-spacing:-2px}
.intro-text{font-size:12px;margin-top:11px;max-width:350px}
.current-grid{grid-template-columns:1fr;gap:15px}
.air-card{order:0;border-radius:10px;padding:23px 22px}
.island-comparison{order:1;border-radius:10px}
.air-reading{flex-wrap:nowrap;margin-top:23px;gap:24px}
.aqi-value{font-size:112px}
.aqi-label strong{font-size:26px}
.aqi-label>span{font-size:9px}
.aqi-label a{font-size:10px}
.air-description{font-size:12px;margin-top:16px}
.air-meta{grid-template-columns:1fr 1fr}
.air-meta strong{font-size:21px}
.air-meta .mini-label{font-size:9px}
.air-meta>div:last-child strong{font-size:12px}
.current-history-link{font-size:11px}
.comparison-scene{min-height:355px}
.comparison-top{flex-direction:row;left:18px;right:18px;top:17px;font-size:6px;letter-spacing:.9px}
.comparison-top span{padding:5px 6px}
.comparison-caption{left:23px;bottom:45px}
.comparison-caption h2{font-size:33px}
.comparison-caption .eyebrow{max-width:none;font-size:8px;margin-bottom:11px}
.comparison-caption>p:last-child{font-size:9px;max-width:280px}
.comparison-divider>span{top:40%;width:34px;height:34px}
.island-comparison figcaption{font-size:9px;padding:11px 15px}
.comparison-hint{left:23px}
.day-card{display:block;margin-top:15px;padding:22px}
.day-card-heading{display:block}
.day-card-heading .eyebrow{margin:0 0 12px;font-size:8px}
.day-card h2{font-size:26px;margin:0;max-width:290px}
.day-card .activity-advice,.day-card .sensitive-advice{margin-top:20px}
.day-card .mini-label{font-size:10px;margin-bottom:7px}
.day-card .activity-advice>p:last-child,.day-card .sensitive-advice>p:not(.mini-label){font-size:12px}
.day-card .sensitive-advice{border-top:1px solid #d2d4c6;padding-top:17px}
.day-card .text-link{margin-top:12px}
.source-strip{font-size:9px;gap:16px}
.history-section{padding-top:43px}
.history-section .section-heading h2{font-size:31px}
.period-tabs{flex-wrap:wrap;gap:3px;justify-content:flex-start}
.period-tabs button{flex:1;padding:7px 9px;font-size:10px;min-height:32px}
.period-tabs button[data-range=season]{flex:1.3}
.summary-grid strong{font-size:34px}
.summary-grid>div:first-child strong{font-size:41px}
.summary-grid .mini-label{font-size:9px}
.summary-grid>div>span:last-child{font-size:9px}
.summary-grid>div:first-child{padding-right:12px}
.chart-controls{align-items:center;gap:12px;flex-wrap:wrap}
.chart-key{font-size:8px}
.metric-toggle button{font-size:10px;padding:5px 12px;min-height:30px}
.exposure-insights{padding:20px 16px}
.exposure-intro{align-items:flex-start;flex-direction:column;gap:10px}
.exposure-intro h3{font-size:19px}
.exposure-intro p{font-size:11px}
.exposure-tag{font-size:9px}
.distribution-legend{gap:10px;font-size:9px}
.peak-days{grid-template-columns:1fr;gap:8px;margin-top:17px}
.peak-day{padding:13px}
.peak-day>span,.peak-day>small{font-size:10px}
.peak-day>strong{font-size:26px}
.calendar-tools{align-items:flex-start;gap:12px}
.heatmap-legend{font-size:7px}
.calendar-months,.calendar-months:has(.calendar-month:nth-child(7)){grid-template-columns:1fr}
.calendar-month{max-width:none}
.calendar-day,.calendar-months:has(.calendar-month:nth-child(7)) .calendar-day{height:42px;min-height:42px;max-height:none}
.calendar-date{font-size:8px}
.calendar-day strong{font-size:12px}
.is-large-reading .aqi-value{font-size:86px}
.is-large-reading .aqi-label strong{font-size:22px}
.history-limit{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
.haze-veil{transition:none}
}
.continuous-legend{position:relative;display:block!important;min-width:220px;padding:0 50px 0 0!important}
.gradient-legend-bar{height:8px;border-radius:3px;background:linear-gradient(90deg,#9eca77 0%,#efd44c 16.67%,#ed8b3d 33.33%,#d94f4b 50%,#a86ba0 66.67%,#873e62 100%)}
.gradient-legend-ticks{display:flex;justify-content:space-between;font-size:8px;margin-top:4px}
.gradient-legend-ticks>span{margin:0!important}
.missing-legend{position:absolute;right:0;top:0;display:flex;align-items:center;gap:4px;font-size:8px}
.missing-legend i{margin:0!important}
@media(max-width:520px){
.continuous-legend{width:100%;min-width:0;max-width:320px}
}
.gradient-legend-ticks{position:relative;display:block;height:12px}
.gradient-legend-ticks>span{position:absolute;transform:translateX(-50%)}
.gradient-legend-ticks>span:nth-child(1){left:0;transform:none}
.gradient-legend-ticks>span:nth-child(2){left:16.67%}
.gradient-legend-ticks>span:nth-child(3){left:33.33%}
.gradient-legend-ticks>span:nth-child(4){left:50%}
.gradient-legend-ticks>span:nth-child(5){left:66.67%}
.gradient-legend-ticks>span:nth-child(6){left:100%;transform:translateX(-100%)}
.source-credits{margin:-25px 0 38px;font-size:10px;color:var(--muted)}
.source-credits summary{cursor:pointer}
.source-credits p{max-width:900px;line-height:1.8;margin-top:12px}
.is-extreme-reading .aqi-value{font-size:90px}
@media(max-width:520px){
.is-extreme-reading .aqi-value{font-size:62px}
.is-extreme-reading .aqi-label strong{font-size:20px}
}