:root{
  --bg:#fdfdfd;--bg-shade:#f5f5f5;--fg:#111;--fg-dim:#444;--fg-mid:#666;--fg-faint:#888;--rule:#111;--border:#d5d5d5;
  --accent:#1a5fb4;--accent-soft:#3b82f6;--warm:#d97706;--cool:#0ea5e9;
  --font-display:'Chomsky',Georgia,'Times New Roman',serif;--font-body:'Source Sans 3',system-ui,sans-serif;--font-meta:'Libre Franklin',system-ui,sans-serif;--maxw:75rem
}
:root{color-scheme:light dark}
.dark{--bg:#121212;--bg-shade:#1a1a1a;--fg:#d0d0d0;--fg-dim:#9f9f9f;--fg-mid:#828282;--fg-faint:#656565;--rule:#555;--border:#333;--accent:#58a6ff;--accent-soft:#79b8ff}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);font-size:21.12px}
body{font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ── Week in a Word (inside lead, below eyebrow) ── */
.week-word{padding:0 0 .5rem;margin-bottom:0}
.week-word .alm-label{display:none}
.week-word .alm-val{font-family:var(--font-meta);font-size:.75rem;color:var(--fg-faint);letter-spacing:.04em}

/* Loader */
#loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity .6s,pointer-events .6s}
#loader.done{opacity:0;pointer-events:none}
.loader-ring{width:2.5rem;height:2.5rem;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:1rem;top:1rem;z-index:20000;background:var(--bg);padding:.5rem 1rem;border:1px solid var(--rule)}

/* ── Masthead ── */
.masthead{background:var(--bg);position:relative;z-index:100;width:100%;box-shadow:0 3px 6px rgba(0,0,0,.18)}
.dark .masthead{box-shadow:0 4px 10px rgba(100,100,100,.35)}
.masthead-top-bar{max-width:var(--maxw);margin:0 auto;padding:.6rem 1rem .4rem;font-family:var(--font-meta);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint);display:flex;justify-content:center;align-items:center;gap:1rem;position:relative}
.masthead-brand{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex-shrink:0;margin:0 auto}
.brand-row{display:flex;align-items:center;gap:.4rem;position:relative;transform:translateX(20px)}
.compass-logo-top{position:absolute;right:100%;top:50%;transform:translateY(-50%);width:7em;height:7em;flex-shrink:0;object-fit:contain;display:block;margin-right:.3rem}
.paper-name-top{font-family:var(--font-display);font-size:3.2rem;font-weight:400;letter-spacing:-0.02em;line-height:1;color:var(--fg);white-space:nowrap;transform:translateX(10px)}
.paper-name-sub{font-family:var(--font-meta);font-size:.67rem;letter-spacing:.35em;text-transform:uppercase;color:var(--fg-faint);font-weight:500;white-space:nowrap}
.edition-label-mast{font-family:var(--font-meta);font-size:.36rem;text-transform:uppercase;letter-spacing:.24em;color:var(--fg-faint);font-weight:500;margin-top:-.15rem}
.date-line{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;min-width:180px;line-height:1.3}
.masthead-actions{position:absolute;right:1rem;top:-5px;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.home-btn{font-family:var(--font-display);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:#999;background:transparent;border:1px solid #aaa;padding:.25rem .55rem;cursor:pointer;border-radius:1px;transition:.2s;display:inline-block;align-self:flex-start;transform:translateY(calc(-1.5rem + 8px))}
.home-btn:hover{color:var(--fg);border-color:var(--fg-mid)}
.dark .home-btn{color:var(--fg-faint);border-color:var(--fg-mid)}
.dark .home-btn:hover{color:#d0d0d0;border-color:#999}
.loc-pill{font-family:var(--font-meta);font-size:.62rem;letter-spacing:.04em;color:var(--fg-mid);background:var(--bg-shade);border:1px solid var(--border);padding:.25rem .55rem;border-radius:999px;white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.theme-toggle{background:transparent;border:none;color:var(--fg-faint);cursor:pointer;padding:.2rem 0;transition:.2s;display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{color:var(--fg)}

/* ── Section nav ── */
.section-nav-wrap{position:sticky;top:0;background:var(--bg);z-index:50;border-bottom:1px solid var(--rule);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.dark .section-nav-wrap{box-shadow:0 2px 10px rgba(0,0,0,.45)}
.section-nav{max-width:var(--maxw);margin:0 auto;padding:.5rem 1rem;display:flex;gap:.2rem;flex-wrap:wrap;position:static}
.nav-link{font-family:var(--font-meta);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding:.35rem .6rem;border-bottom:2px solid transparent;transition:.2s;cursor:pointer}
.nav-link:hover{color:var(--fg-dim)}
.nav-link.active{color:var(--fg);border-bottom-color:var(--accent)}

/* ── Main layout ── */
main{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1rem 4rem}

/* ── Lead (current conditions) ── */
.lead{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;border-bottom:2px solid var(--rule);padding-bottom:2rem;margin-bottom:2rem;align-items:start}
.lead-eyebrow{font-family:var(--font-meta);font-size:1.3rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.lead-temp-row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.5rem}
.lead-temp{font-family:var(--font-display);font-size:6.5rem;font-weight:400;line-height:.9;letter-spacing:-0.04em;color:var(--fg)}
.lead-temp .deg{font-size:.5em;vertical-align:top;color:var(--fg-mid)}
.lead-icon{font-size:4.5rem;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.dark .lead-icon{opacity:.85}
.lead-condition{font-family:var(--font-display);font-size:1.8rem;font-weight:400;line-height:1.2;color:var(--fg);margin-bottom:.3rem}
.lead-place{font-family:var(--font-meta);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.lead-meta{font-family:var(--font-meta);font-size:.62rem;letter-spacing:.04em;color:var(--fg-faint);margin-top:.2rem}
.lead-body{font-family:var(--font-body);font-size:1.05rem;line-height:1.6;color:var(--fg-dim);margin-top:1.2rem;max-width:32em;font-style:italic}
.lead-stats{display:flex;flex-direction:column;gap:.6rem;border-left:1px solid var(--border);padding-left:1.5rem}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.6rem;border-bottom:1px dotted var(--border)}
.stat:last-child{border-bottom:none}
.stat-label{font-family:var(--font-meta);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.stat-val{font-family:var(--font-display);font-size:1.15rem;color:var(--fg)}
.stat-val small{font-family:var(--font-meta);font-size:.62rem;color:var(--fg-faint);font-weight:400;margin-left:.2rem}

/* ── Block heads ── */
.block{margin-bottom:2.5rem;border-bottom:1px solid var(--border);padding-bottom:2.5rem}
.block:last-child{border-bottom:none}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.2rem;padding-bottom:.5rem;border-bottom:2px solid var(--rule)}
.block-head>span{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:-0.01em;color:var(--fg)}
.block-head em{font-family:var(--font-meta);font-size:.6rem;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.block-head-label{display:inline-flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}

/* ── Hourly strip ── */
.hourly-strip{display:flex;overflow-x:auto;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem 0}
.hour-cell{flex:0 0 4.5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .3rem;border-right:1px dotted var(--border);transition:background .2s}
.hour-cell:last-child{border-right:none}
.hour-cell:hover{background:var(--bg-shade)}
.hour-time{font-family:var(--font-meta);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint)}
.hour-icon{font-size:1.5rem;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1}
.dark .hour-icon{opacity:.8}
.hour-temp{font-family:var(--font-display);font-size:1.1rem;color:var(--fg)}
.hour-precip{font-family:var(--font-meta);font-size:.55rem;color:var(--accent);min-height:.7rem}
.hour-precip.dry{color:var(--fg-faint)}

/* ── Daily table ── */
.daily-table{width:100%;border-collapse:collapse}
.daily-row{display:grid;grid-template-columns:5rem 3rem 1fr 4rem 4rem 4rem;gap:1rem;align-items:center;padding:.8rem .3rem;border-bottom:1px dotted var(--border);transition:background .2s}
.daily-row:hover{background:var(--bg-shade)}
.daily-row .d-day{font-family:var(--font-display);font-size:1.1rem;color:var(--fg)}
.daily-row .d-icon{font-size:1.6rem;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;text-align:center}
.dark .daily-row .d-icon{opacity:.85}
.daily-row .d-cond{font-family:var(--font-body);font-size:.85rem;color:var(--fg-dim)}
.daily-row .d-lo{font-family:var(--font-display);font-size:1rem;color:var(--fg-faint);text-align:right}
.daily-row .d-hi{font-family:var(--font-display);font-size:1.2rem;color:var(--fg);text-align:right}
.daily-row .d-precip{font-family:var(--font-meta);font-size:.65rem;color:var(--accent);text-align:right}
.daily-row .d-precip.dry{color:var(--fg-faint)}
.daily-range{display:none}

/* ── Sky grid ── */
.sky-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.sky-card{background:var(--bg-shade);border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.sky-card-eyebrow{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.sky-card-icon{font-size:3rem;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.dark .sky-card-icon{opacity:.85}
.sky-card-val{font-family:var(--font-display);font-size:1.4rem;color:var(--fg)}
.sky-card-note{font-family:var(--font-body);font-size:.8rem;color:var(--fg-dim);font-style:italic}

/* ── Almanac grid ── */
.almanac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
/* Deep almanac: on-this-date (1940 on) and the nearest century station */
.deep-panel{margin-top:1.8rem}
.deep-panel:empty{margin-top:0}
.deep-head{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule)}
.deep-head>span{font-family:var(--font-meta);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}
.deep-head em{font-family:var(--font-meta);font-size:.6rem;font-style:normal;letter-spacing:.06em;color:var(--fg-faint)}
.deep-note{font-family:var(--font-body);font-size:.78rem;color:var(--fg-dim);font-style:italic;margin-top:.6rem}
.spark{display:block;width:100%;height:auto;margin-top:1.2rem}
.spark .sp-axis{stroke:var(--border)}
.spark .sp-line{fill:none;stroke:var(--fg-faint);stroke-width:1}
.spark .sp-mean{fill:none;stroke:var(--accent);stroke-width:2.2}
.spark text{font-family:var(--font-meta);font-size:10px;fill:var(--fg-faint)}
.alm-card{border:1px solid var(--border);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.alm-card .alm-label{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.alm-card .alm-val{font-family:var(--font-display);font-size:1.5rem;color:var(--fg);line-height:1.1}
.alm-card .alm-sub{font-family:var(--font-body);font-size:.75rem;color:var(--fg-dim)}
.alm-card.alm-wide{grid-column:1 / -1}

/* ── Records & weekly table ── */
.records-wrap{margin-top:1.2rem}
.records-wrap .almanac-grid{margin-bottom:1.2rem}
.alm-table-wrap{overflow-x:auto;border:1px solid var(--border)}
.alm-table{width:100%;border-collapse:collapse;font-size:.8rem;white-space:nowrap}
.alm-table th{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--border)}
.alm-table td{padding:.4rem .8rem;border-bottom:1px solid var(--border);color:var(--fg-dim);font-family:var(--font-body)}
.alm-table tr:last-child td{border-bottom:none}
.alm-table td:first-child{font-family:var(--font-meta);font-size:.65rem;letter-spacing:.06em;color:var(--fg)}

/* ── Footer ── */
.footer{margin-top:auto;border-top:2px solid var(--rule);padding:1.5rem 1rem;font-family:var(--font-meta);font-size:.62rem;color:var(--fg-faint);letter-spacing:.04em}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer a{color:var(--fg-mid);border-bottom:1px dotted var(--border)}
.footer a:hover{color:var(--fg)}

/* ── Radar ── */
.radar-wrap{display:flex;flex-direction:column;gap:.6rem}
.radar-map{width:100%;height:28rem;border:1px solid var(--border);background:var(--bg-shade);position:relative;z-index:1}
.dark .radar-map{filter:brightness(.85) hue-rotate(180deg) invert(.92)}
.dark .radar-timeline{filter:brightness(.92)}
.radar-controls{display:flex;flex-direction:column;gap:.4rem}
.radar-toggles{display:flex;gap:.3rem;flex-wrap:wrap}
.radar-toggle{font-family:var(--font-meta);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--bg-shade);color:var(--fg-mid);border:1px solid var(--border);padding:.35rem .7rem;cursor:pointer;border-radius:1px;transition:.2s}
.radar-toggle:hover{color:var(--fg);border-color:var(--fg-mid)}
.radar-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.radar-timeline{display:flex;align-items:center;gap:.8rem;padding:.4rem .2rem}
.radar-btn{font-family:var(--font-meta);font-size:.85rem;background:var(--bg-shade);border:1px solid var(--border);color:var(--fg);padding:.25rem .6rem;cursor:pointer;border-radius:1px}
.radar-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.radar-regions{display:inline-flex;flex-wrap:wrap;gap:.4rem}
/* mouse-wheel zoom toggle: appended into Leaflet's zoom bar under the − */
/* Flex-centred, not margins: a margin on the svg collapses through the anchor
   and shoves the whole button off the bottom of the bar. Height comes from
   Leaflet's own .leaflet-bar a (26px, 30px touch) so it matches the +/-, and
   the last-child radius/border rules land on it unmodified. */
.leaflet-control-zoom .leaflet-control-zoom-wheel{display:flex;align-items:center;justify-content:center;cursor:pointer}
.leaflet-control-zoom .leaflet-control-zoom-wheel svg{display:block}
.leaflet-control-zoom .leaflet-control-zoom-wheel.on{background-color:var(--accent,#c00)}
.leaflet-control-zoom .leaflet-control-zoom-wheel.on svg{color:#fff}
.radar-region-btn{font-family:var(--font-meta);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-shade);border:1px solid var(--border);color:var(--fg-dim);padding:.35rem .7rem;cursor:pointer;border-radius:1px}
.radar-region-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#radarSlider{flex:1;accent-color:var(--accent)}
.radar-frame-label{font-family:var(--font-meta);font-size:.7rem;color:var(--fg-dim);min-width:5rem}
.radar-legend{font-family:var(--font-meta);font-size:.55rem;color:var(--fg-faint);display:flex;align-items:center;gap:.4rem;letter-spacing:.04em;margin-left:auto}
.radar-legend i{display:inline-block;width:.8rem;height:.8rem;margin:0 .15rem 0 .3rem;border:1px solid #00000022}

/* ── Star chart ── */
.sky-chart-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.sky-chart{max-width:100%;height:auto;background:#020308;border-radius:50%;aspect-ratio:1/1}
.dark .sky-chart{background:#020308}
.sky-chart-legend{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;font-family:var(--font-meta);font-size:.6rem;color:var(--fg-faint);letter-spacing:.06em;text-transform:uppercase}
.sky-chart-legend span{display:flex;align-items:center;gap:.3rem}
.sky-chart-legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:50%}

/* ── Planets ── */
.planets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.planet-card{background:var(--bg-shade);border:1px solid var(--border);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.planet-card .p-name{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);display:flex;align-items:center;justify-content:space-between}
.planet-card .p-icon{font-size:1.6rem;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1}
.dark .planet-card .p-icon{opacity:.9}
.planet-card .p-status{font-family:var(--font-display);font-size:1.05rem;color:var(--fg);line-height:1.1}
.planet-card .p-meta{font-family:var(--font-meta);font-size:.6rem;color:var(--fg-dim);letter-spacing:.04em}
.planet-card .p-bar{height:.25rem;background:var(--border);position:relative;margin-top:.3rem;overflow:hidden;border-radius:1px}
.planet-card .p-bar i{display:block;height:100%;background:var(--accent);position:absolute;left:0;top:0;transition:.3s}
.planet-card.down{opacity:.55}

/* ── Air Quality ── */
.air-wrap{display:flex;flex-direction:column;gap:1.2rem}
.air-hero{display:flex;align-items:baseline;gap:1.5rem;padding:1rem 1.2rem;background:var(--bg-shade);border:1px solid var(--border);border-left:4px solid var(--accent)}
.air-aqi{font-family:var(--font-display);font-size:3.5rem;line-height:1;color:var(--fg)}
.air-label{font-family:var(--font-meta);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);font-weight:700;align-self:flex-start;margin-top:.4rem}
.air-advice{font-family:var(--font-body);font-size:.95rem;color:var(--fg-dim);font-style:italic;flex:1}
.air-aqi.good{color:#22c55e}
.air-aqi.moderate{color:#eab308}
.air-aqi.unhealthy-sensitive{color:#f97316}
.air-aqi.unhealthy{color:#ef4444}
.air-aqi.very-unhealthy{color:#a855f7}
.air-aqi.hazardous{color:#7c1d1d}
.air-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1rem}
.air-stat{background:var(--bg-shade);border:1px solid var(--border);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.air-stat .a-label{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.air-stat .a-val{font-family:var(--font-display);font-size:1.5rem;color:var(--fg);line-height:1.1}
.air-stat .a-val small{font-family:var(--font-meta);font-size:.65rem;color:var(--fg-mid);margin-left:.2rem;font-weight:400}
.air-forecast{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));gap:.4rem;padding-top:1rem;border-top:1px solid var(--border)}
.air-hour{padding:.5rem .3rem;background:var(--bg);border:1px solid var(--border);text-align:center;display:flex;flex-direction:column;gap:.2rem}
.air-hour .ah-time{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.04em;color:var(--fg-faint)}
.air-hour .ah-aqi{font-family:var(--font-display);font-size:1.05rem;color:var(--fg)}
.air-hour .ah-band{font-family:var(--font-meta);font-size:.5rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint)}

/* ── Earthquakes ── */
.quake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:.8rem}
.quake-card{background:var(--bg-shade);border:1px solid var(--border);padding:.8rem 1rem;display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;border-left:3px solid var(--fg-faint)}
.quake-card.m5{border-left-color:#f97316}
.quake-card.m6{border-left-color:#ef4444}
.quake-card.m7{border-left-color:#a855f7}
.quake-mag{font-family:var(--font-display);font-size:1.5rem;color:var(--fg);min-width:3rem;text-align:center;line-height:1}
.quake-info .q-place{font-family:var(--font-body);font-size:.85rem;color:var(--fg);font-weight:500;line-height:1.2}
.quake-info .q-meta{font-family:var(--font-meta);font-size:.6rem;color:var(--fg-faint);letter-spacing:.04em;margin-top:.2rem}

/* ── Marine ── */
.marine-search{display:flex;gap:.5rem;margin-bottom:1rem}
.marine-search input,.world-search input{flex:1;font-family:var(--font-meta);font-size:.85rem;padding:.5rem .7rem;background:var(--bg);color:var(--fg);border:1px solid var(--border)}
.marine-search input:focus,.world-search input:focus{outline:none;border-color:var(--accent)}
.marine-search button,.world-search button{font-family:var(--font-meta);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;cursor:pointer}
.marine-search button:hover,.world-search button:hover{background:var(--accent-soft)}
.marine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.marine-card{background:var(--bg-shade);border:1px solid var(--border);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.marine-card .m-label{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.marine-card .m-val{font-family:var(--font-display);font-size:1.5rem;color:var(--fg);line-height:1.1}
.marine-card .m-val small{font-family:var(--font-meta);font-size:.7rem;color:var(--fg-mid);margin-left:.2rem;font-weight:400}
.marine-card .m-sub{font-family:var(--font-body);font-size:.78rem;color:var(--fg-dim)}
.marine-forecast{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.marine-day{padding:.6rem .5rem;background:var(--bg);border:1px solid var(--border);display:flex;flex-direction:column;gap:.3rem;text-align:center}
.marine-day .md-date{font-family:var(--font-meta);font-size:.6rem;letter-spacing:.06em;color:var(--fg-faint)}
.marine-day .md-wave{font-family:var(--font-display);font-size:1.1rem;color:var(--fg)}
.marine-day .md-temp{font-family:var(--font-meta);font-size:.65rem;color:var(--cool)}

/* ── World ── */
.world-search{display:flex;gap:.5rem;margin-bottom:1rem}
.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem}
.world-card{background:var(--bg-shade);border:1px solid var(--border);padding:1.1rem;display:flex;flex-direction:column;gap:.3rem;position:relative;transition:.2s}
.world-card:hover{background:var(--bg-shade)}
.world-card .w-remove{position:absolute;top:.4rem;right:.4rem;background:transparent;border:none;color:var(--fg-faint);cursor:pointer;font-size:1rem;padding:0 .3rem;line-height:1}
.world-card .w-remove:hover{color:#c33}
.world-card .w-city{font-family:var(--font-display);font-size:1.15rem;color:var(--fg);line-height:1.1;padding-right:1.2rem}
.world-card .w-country{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.world-card .w-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.4rem}
.world-card .w-icon{font-size:2rem;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1}
.dark .world-card .w-icon{opacity:.85}
.world-card .w-temp{font-family:var(--font-display);font-size:1.6rem;color:var(--fg)}
.world-card .w-cond{font-family:var(--font-body);font-size:.78rem;color:var(--fg-dim);font-style:italic}
.world-card .w-hilo{font-family:var(--font-meta);font-size:.6rem;color:var(--fg-faint);margin-top:.2rem}
.world-card .w-hilo b{color:var(--fg);font-weight:600}
.world-card .w-local{font-family:var(--font-meta);font-size:.55rem;color:var(--fg-faint);margin-top:.2rem}
.world-card .w-time{font-family:var(--font-display);font-size:1rem;color:var(--accent);margin-top:.3rem;letter-spacing:.02em}

/* ── News / Alerts ── */
.alerts-strip{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.alert-row{display:block;padding:.7rem 1rem;border-left:3px solid var(--accent);background:var(--bg-shade);font-family:var(--font-meta);font-size:.8rem;color:var(--fg-dim);text-decoration:none}
a.alert-row:hover{border-left-color:#c0392b}
.alert-row .a-meta{font-size:.62rem;letter-spacing:.06em;color:var(--fg-faint);margin-top:.35rem}
.alert-row.severe{border-left-color:#c0392b;background:#c0392b11}
.alert-row .a-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.25rem}
.alert-row .a-event{font-weight:700;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
.alert-row .a-area{color:var(--fg-faint);font-size:.7rem}
.alert-row .a-headline{font-family:var(--font-body);font-size:.95rem;color:var(--fg);font-weight:500}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:1.5rem}
.news-col-head{font-family:var(--font-meta);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);font-weight:700;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule)}
.news-list{display:flex;flex-direction:column;gap:1rem}
/* Headlines run directly under the lead now, full page width — a single
   column there would set 90-character lines. Two-up until it can't be. */
.news-list.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:1rem 2rem}
.news-item{padding-bottom:1rem;border-bottom:1px dotted var(--border)}
.news-item:last-child{border-bottom:none}
.news-item .n-source{font-family:var(--font-meta);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.25rem}
.news-item .n-title{font-family:var(--font-display);font-size:1.1rem;color:var(--fg);line-height:1.25;margin-bottom:.3rem}
.news-item .n-title a{color:inherit;border-bottom:1px solid transparent}
.news-item .n-title a:hover{border-bottom-color:var(--accent)}
.news-item .n-desc{font-family:var(--font-body);font-size:.85rem;color:var(--fg-dim);line-height:1.4}
.news-item .n-date{font-family:var(--font-meta);font-size:.55rem;color:var(--fg-faint);margin-top:.3rem}
.news-empty{font-family:var(--font-body);font-size:.6rem;color:var(--fg-faint);font-style:italic;padding:1rem 0}

/* Leaflet attribution theming */
.leaflet-container{background:var(--bg-shade)}
.dark .leaflet-container{background:#1a1a1a}
.dark .leaflet-tile-pane{filter:brightness(.85) hue-rotate(180deg) invert(.92)}

/* ── Tides ── */
.tides-controls{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.tides-select{flex:1;min-width:14rem;font-family:var(--font-meta);font-size:.85rem;padding:.5rem .7rem;background:var(--bg);color:var(--fg);border:1px solid var(--border)}
.tides-input{font-family:var(--font-meta);font-size:.85rem;padding:.5rem .7rem;background:var(--bg);color:var(--fg);border:1px solid var(--border);min-width:14rem}
.tides-select:focus,.tides-input:focus{outline:none;border-color:var(--accent)}
.tides-now{font-family:var(--font-body);font-size:.95rem;color:var(--fg-dim);margin-bottom:1rem;padding:.6rem .8rem;background:var(--bg-shade);border:1px solid var(--border);border-left:3px solid var(--accent)}
.tides-now b{color:var(--fg);font-family:var(--font-display);font-size:1.05rem}
.tides-table-wrap{overflow-x:auto}
.tides-table{width:100%;border-collapse:collapse;font-family:var(--font-meta);font-size:.78rem}
.tides-table th{text-align:left;padding:.5rem .7rem;border-bottom:2px solid var(--rule);font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.tides-table td{padding:.55rem .7rem;border-bottom:1px dotted var(--border);color:var(--fg)}
.tides-table tr:hover{background:var(--bg-shade)}
.tides-table .t-type{display:inline-block;padding:.1rem .5rem;font-weight:700;font-size:.65rem;letter-spacing:.06em;border-radius:1px}
.tides-table .t-type.h{background:var(--accent);color:#fff}
.tides-table .t-type.l{background:var(--border);color:var(--fg)}
.tides-table .t-now{background:var(--accent);color:#fff}
.tides-table .t-now td{color:#fff;font-weight:600}
.tides-table .t-day{border-top:1px solid var(--rule);background:var(--bg-shade);font-weight:600;color:var(--fg-mid);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}

/* ── Moon card ── */
.planet-card.moon-card{border-left:3px solid #f0c050}
.planet-card.moon-card .p-icon{font-size:2.4rem}

/* ── Home button golden glow ── */
.home-btn{animation:goldGlow 3s ease-in-out infinite}
@keyframes goldGlow{0%,100%{border-color:#aaa;color:#999}50%{border-color:rgba(218,165,32,.7);color:#b8860b;text-shadow:0 0 6px rgba(218,165,32,.5)}}
.home-btn:hover{animation:none}
.dark .home-btn:hover{animation:none}
/* The label cycles through the house line a word at a time (see app.js).
   The button's width is pinned in script to the resting word, so only the
   text moves — the masthead date beside it must not shuffle. */
.home-btn{text-align:center;overflow:hidden}  /* short words sit centred in the pinned
   width; the frame clips the word as it zooms past, which is the whole effect */
.home-btn .hb-label{display:inline-block;transform-origin:50% 50%}
.home-btn .hb-label.hb-in{animation:hbZoomIn .2s cubic-bezier(.18,1.5,.36,1) both}
.home-btn .hb-label.hb-out{animation:hbZoomOut .12s ease-in both}
@keyframes hbZoomIn{from{opacity:0;transform:scale(.35)}70%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes hbZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){
  .home-btn{animation:none}
  .home-btn .hb-label,.home-btn .hb-label.hb-in,.home-btn .hb-label.hb-out{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — kept last on purpose.

   Media queries carry no extra specificity, so they are decided on source
   order like any other rule. This block used to sit in the middle of the
   file, above the radar, air, marine, world and tides sections, and every
   override it made for those components was silently beaten by the base
   rule further down. The world card's close button is the visible case:
   a touch-size padding here lost to .world-card .w-remove{padding:0 .3rem}
   200 lines later, and the tap target stayed 21px.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tiers ───────────────────────────────────────────────────────
   Three tiers, not one. This file used to carry a single 700px break, so
   every tablet between 701 and 1024 got the DESKTOP masthead — in which
   .date-line and .masthead-actions are absolutely positioned into left and
   right margins that only exist at desktop width. On an iPad the dateline
   ran under the compass logo and the location pill was clipped by the top
   of the viewport (it is pulled up by top:-5px). On a phone it was worse:
   the bar laid out 587px wide inside a 360px screen, so the Paperweb button
   and the date sat off-screen at x=-129 and the location pill collided with
   the WEATHER nameplate.

   Both tiers now use the same three-column grid the six papers use, so the
   brand stays optically centred while the controls keep the edges. */

/* ── Tablet and below: the masthead stops being absolutely positioned ── */
@media (max-width:1024px){
  .masthead-top-bar{display:grid;grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto auto;align-items:center;
    column-gap:.6rem;row-gap:.25rem;padding:.55rem .9rem .5rem}
  /* these two wrappers exist only to park their children in the desktop
     margins; as grid rows we want their children, not the boxes. */
  .date-line,.masthead-actions{display:contents}
  .home-btn{grid-area:1/1/2/2;justify-self:start;position:static;transform:none;margin:0}
  .masthead-brand{grid-area:1/2/2/3;justify-self:center;margin:0;gap:.15rem}
  .brand-row{transform:none;gap:.5rem}
  .compass-logo-top{position:static;transform:none;width:3rem;height:3rem;margin:0}
  .paper-name-top{transform:none;font-size:2.6rem}
  .theme-toggle{grid-area:1/3/2/4;justify-self:end;align-self:center;width:2rem;height:2rem}
  #todayDate{grid-area:2/1/3/4;justify-self:center;text-align:center;white-space:normal}
  .loc-pill{grid-area:3/1/4/4;justify-self:center;max-width:calc(100vw - 2rem)}
}

/* ── Phone ── */
@media (max-width:700px){
  /* The papers can hold brand + two buttons on one row because their
     nameplates are four letters and both side columns carry a button, so
     1fr auto 1fr is symmetric. WEATHER is seven letters against a lone
     32px toggle, and the two 1fr columns are forced to match the 116px
     Paperweb button — 440px of masthead inside a 360px screen.
     On a phone the nameplate takes a row of its own, which is what a
     newspaper does on narrow paper anyway, and it can be set larger. */
  .masthead-top-bar{grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto auto auto;column-gap:.4rem;row-gap:.3rem;
    padding:.5rem .7rem .45rem}
  .home-btn{grid-area:1/1/2/2;justify-self:start}
  .theme-toggle{grid-area:1/3/2/4;justify-self:end}
  .masthead-brand{grid-area:2/1/3/4;justify-self:center}
  #todayDate{grid-area:3/1/4/4}
  .loc-pill{grid-area:4/1/5/4}
  .compass-logo-top{width:2.6rem;height:2.6rem}
  .paper-name-top{font-size:2.1rem}
  .paper-name-sub{font-size:.55rem;letter-spacing:.2em}
  .edition-label-mast{display:none}
  #todayDate{font-size:.7rem;line-height:1.25}
  .loc-pill{font-size:.6rem;max-width:calc(100vw - 1.6rem)}

  /* 13 section links wrapped to four rows under a sticky header ate most of
     a phone screen; one scrolling row is the standard trade-off. */
  .section-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:.35rem .7rem}
  .section-nav::-webkit-scrollbar{display:none}
  .nav-link{white-space:nowrap;flex:0 0 auto}

  main{padding:1.2rem .8rem 3rem}
  .lead{grid-template-columns:1fr;gap:1.5rem}
  .lead-stats{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:1rem}
  .lead-temp{font-size:5rem}
  .lead-icon{font-size:3.5rem}
  .lead-eyebrow{font-size:1.05rem}
  .lead-body{font-size:1rem}
  .block{margin-bottom:2rem;padding-bottom:2rem}
  .block-head{flex-wrap:wrap;gap:.2rem .6rem}
  .daily-row{grid-template-columns:4rem 2.5rem 1fr 3rem 3.5rem;gap:.6rem}
  .daily-row .d-precip{display:none}
  .radar-map{height:20rem}
  .radar-timeline{flex-wrap:wrap;gap:.5rem}
  .radar-legend{margin-left:0;flex-basis:100%;flex-wrap:wrap}
  .air-hero{flex-wrap:wrap;gap:.5rem 1rem}
  .air-advice{flex:1 1 100%}
  /* two 14rem minimums cannot sit side by side on a 360px screen */
  .tides-select,.tides-input{flex:1 1 100%;min-width:0;width:100%}
  .marine-search,.world-search{flex-wrap:wrap}
  .marine-search input,.world-search input{flex:1 1 100%}
  .marine-search button,.world-search button{flex:1 1 auto}
  .footer-inner{flex-direction:column;gap:.5rem}
}

/* ── Small Android (360px and the 320px long tail) ── */
@media (max-width:480px){
  /* The icon already says what the condition is; the words were being given
     22px. Drop them and give the day name the room it actually needs. */
  .daily-row{grid-template-columns:1fr 2.4rem 2.6rem 2.8rem;gap:.4rem}
  .daily-row .d-cond{display:none}
  .daily-row>*{min-width:0}
  .daily-row .d-day{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:400px){
  .masthead-top-bar{column-gap:.3rem;padding:.5rem .55rem .45rem}
  .paper-name-top{font-size:1.85rem}
  .compass-logo-top{width:2.2rem;height:2.2rem}
  .paper-name-sub{font-size:.5rem;letter-spacing:.16em}
  /* the 480px tier already collapsed this to four columns — do not undo it */
  .daily-row{gap:.35rem}
  .daily-row .d-day{font-size:.95rem}
  .lead-temp{font-size:4.2rem}
  .lead-icon{font-size:3rem}
}

/* ── Touch: the pointer is a fingertip, not a 1px cursor ──────────────
   Every one of these measured under 32px tall on a phone. */
@media (hover:none){
  .nav-link{padding:.55rem .7rem}
  /* .world-card .w-remove out-specifies a bare .w-remove */
  .world-card .w-remove{padding:.35rem .55rem;font-size:1.1rem}
  #radarSlider{height:1.6rem}
  .home-btn{padding:.45rem .6rem}
  .theme-toggle{width:2.2rem;height:2.2rem;padding:0}
  .radar-btn{padding:.5rem .8rem}
  .marine-search button,.world-search button{padding:.6rem 1rem}
  .marine-search input,.world-search input,.tides-select,.tides-input{padding:.6rem .7rem}
  .w-remove{padding:.3rem .5rem}
}

/* iPad in landscape reports a fine pointer, so the touch tier above never
   fires, yet it is still a finger on the glass. */
@media (max-width:1024px){
  #radarSlider{height:1.6rem}
  .world-card .w-remove{padding:.35rem .55rem;font-size:1.1rem}
}

/* ── Donate ──────────────────────────────────────────────────────────
   The same PayPal button the portal carries. The button is a hot-linked
   PayPal GIF, which is fine here: the no-hot-linking rule exists for
   ARTICLE images (they must be local and pruneable), not for a payment
   provider's own asset, and the portal has always loaded it this way.
   img-src already allows https: on both hosts; w.wehack.net additionally
   needed www.paypal.com added to form-action, which was 'self' only. */
.donate{margin-top:1.1rem;line-height:0}
.donate .donate-btn{border:0;cursor:pointer;display:inline-block;max-width:100%;
  border-radius:2px;transition:opacity .2s,transform .2s}
.donate .donate-btn:hover{opacity:.85;transform:translateY(-1px)}
.donate .donate-btn:focus-visible{outline:2px solid var(--accent,#1a5fb4);outline-offset:3px}
.donate .donate-px{display:inline;width:1px;height:1px;border:0}
@media (hover:none){.donate .donate-btn{padding:.2rem 0}}
.footer-inner .donate{flex:1 0 100%;text-align:center;margin-top:.2rem}

/* ── Space Weather ─────────────────────────────────────────────────── */
.space-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
.space-card{background:var(--bg-shade);border:1px solid var(--border);padding:1rem 1.1rem;border-left:3px solid var(--fg-faint)}
.space-kicker{font-family:var(--font-meta);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.5rem}
.space-big{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.35rem}
.space-class{font-family:var(--font-display);font-size:2.1rem;line-height:1;color:var(--fg)}
.space-class.class-M{color:#f97316}
.space-class.class-X{color:#ef4444}
.space-class.kp{color:#818cf8}
.space-class.wind{color:#38bdf8}
.space-word{font-family:var(--font-meta);font-size:.9rem;color:var(--fg-faint)}
.space-meta{font-family:var(--font-meta);font-size:.82rem;color:var(--fg-dim);margin-top:.15rem}
.space-meta.faint{color:var(--fg-faint)}
.space-meta b.bz-south{color:#ef4444}
.space-meta b.bz-north{color:#38bdf8}
.space-spark{width:100%;height:46px;display:block;margin-top:.6rem}
.space-flarehead{font-family:var(--font-meta);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-top:.7rem;margin-bottom:.3rem}
.space-flares{display:flex;flex-wrap:wrap;gap:.45rem .9rem;font-family:var(--font-meta);font-size:.85rem;color:var(--fg-dim)}
.space-flares.none{color:var(--fg-faint)}
.space-flare b.class-C{color:#eab308}
.space-flare b.class-M{color:#f97316}
.space-flare b.class-X{color:#ef4444}
.kp-bar{display:flex;gap:3px;margin-top:.5rem}
.kp-bar i{flex:1;height:8px;background:var(--border)}
.kp-bar i.on{background:#818cf8}
.space-bulletins .space-bulletin{padding:.45rem 0;border-bottom:1px solid var(--border)}
.space-bulletins .space-bulletin:last-child{border-bottom:0}
.sb-head{font-family:var(--font-body);font-size:.9rem;color:var(--fg)}
.sb-when{font-family:var(--font-meta);font-size:.75rem;color:var(--fg-faint);margin-top:.15rem}

/* ── Earthquake section subheads ───────────────────────────────────── */
.quake-sub{font-family:var(--font-meta);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin:1.1rem 0 .5rem}
#quakeNearSub{margin-top:.2rem}
#quakeNear{margin-bottom:.4rem}
.radar-toggle{white-space:nowrap}
.radar-toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}