/* LIGHT-THEME-V1-2026-05-28 · LIGHT-THEME-V1-6-CONTRAST-2026-05-28 · LIGHT-THEME-V1-7-REALSELECTOR-2026-05-28 · V1-8-PHOTO-HERO-2026-05-29 · V2-VISUAL-OVERHAUL-2026-05-29
   V1-5 clickable card dark treatment + this V1-6 surgical pass for the
   4 contrast contexts the broader cascade missed: about-page tabs (orange
   on charcoal too faint), in-content pill-links (gold-on-gold unreadable),
   tools.html product card pills (pastel-ghost on gradient), section
   eyebrows on light bg (orange too faint), field-action strip.
   Heroes + artwork still untouched. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root{
  --bg:#fafaf7 !important;
  --bg2:#f1f1ec !important;
  --bg3:#e6e6df !important;
  --bg4:#d4d4cd !important;
  --bg5:#c0c0b9 !important;
  --surface:#fafaf7 !important;
  --surface2:#f1f1ec !important;
  --text:#0a0d12 !important;
  --text2:#1f2530 !important;     /* deepened from #2c3340 for better contrast */
  --text3:#444c58 !important;     /* deepened from #5b6470 for stronger reads */
  --text4:#5b6470 !important;
  --gold:#7a5f10 !important;      /* deepened from #8a6b14 for AAA on white */
  --gold-d:#4d3b08 !important;
  --gold-l:#a07d18 !important;
  --orange:#8a3d04 !important;    /* deepened from #a55906 — eyebrow visibility */
  --orange-l:#D4740A !important;
  --hivis:#FCAA00 !important;
  --hivis-d:#9d5b00 !important;   /* deepened amber for white-bg accent */
  --tactical:#3d4b1e !important;  /* deepened olive drab */
  --tactical-d:#26301b !important;
  --slate:#22313e !important;
  --ice:#1a4d96 !important;       /* deepened blue */
  --green:#3d4b1e !important;
  --red:#a01020 !important;
  --blue:#1a4d96 !important;
  --purple:#5e3499 !important;
  --cyan:#076c87 !important;
  --line:rgba(14,17,22,.18) !important;     /* strengthened from .12 */
  --line2:rgba(14,17,22,.28) !important;
  --shadow:0 4px 16px rgba(14,17,22,.10) !important;
  --shadow-lg:0 8px 32px rgba(14,17,22,.15) !important;
  --font:'Inter',system-ui,-apple-system,sans-serif !important;
  --display:'Chakra Petch',sans-serif !important;
  --editorial:'Source Serif 4',Georgia,serif !important;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace !important;
  color-scheme:light !important;
}

body{background:#fafaf7 !important;color:#0a0d12 !important;font-family:'Inter',system-ui,sans-serif !important}

/* TYPOGRAPHIC HIERARCHY */
h1,h2,h3,h4,h5,h6,.section-title,.title{font-family:'Chakra Petch',sans-serif !important;color:#0a0d12 !important;letter-spacing:.005em !important}
h1{font-weight:700 !important;line-height:1.02 !important}
h2{font-weight:600 !important;line-height:1.1 !important}
p,.lede{color:#1f2530 !important;line-height:1.65 !important}
.section-lede,.hero-lede{color:#1f2530 !important;line-height:1.65 !important}

/* EYEBROW TEXT — strong burnt-orange for visibility on warm white */
.hero-tag,.section-lbl,.cm-tag,.tag-eyebrow,.chip-tag,.sec-lbl{font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:#8a3d04 !important}

em,.editorial,.it{font-family:'Source Serif 4',Georgia,serif !important;font-style:italic !important;color:#7a5f10 !important;font-weight:600 !important}
strong,b{color:#0a0d12 !important;font-weight:700 !important}

/* LINKS — dark gold underline, no gold-on-gold issue */
a:not(.btn):not(.nl):not(.nl-cta):not(.nav-link):not(.cm-card):not(.stack-card):not(.lens-card):not(.cat-card):not(.btn-gold):not(.btn-outline-gold):not(.nav-logo):not(.hero-cta):not(.live-card):not(.live-strip a):not(.fav-row a):not(.snow-reel-cta):not(.new-cta):not(.new-card):not(.about-jump a){color:#4d3b08 !important;text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:.22em !important;text-decoration-color:rgba(77,59,8,.55) !important;transition:text-decoration-color .15s,color .15s !important;font-weight:600 !important}
a:not(.btn):not(.nl):not(.nl-cta):not(.nav-link):hover{color:#0a0d12 !important;text-decoration-color:#0a0d12 !important}

code,kbd,.mono{font-family:'JetBrains Mono',ui-monospace,monospace !important;background:rgba(77,59,8,.10) !important;color:#4d3b08 !important;padding:.1em .35em !important;border-radius:3px !important;font-size:.92em !important}
hr{border:0 !important;border-top:1px solid rgba(14,17,22,.18) !important;margin:2em 0 !important}
blockquote{border-left:4px solid #7a5f10 !important;padding-left:1.2em !important;color:#1f2530 !important;font-family:'Source Serif 4',Georgia,serif !important;font-style:italic !important;font-size:1.08em !important}

/* NAV */
.nav,.kerrfall-nav{background:rgba(250,250,247,.96) !important;border-bottom:1px solid rgba(14,17,22,.14) !important;backdrop-filter:blur(16px)}
.nl,.nav-name,.nav-link{font-family:'Chakra Petch',sans-serif !important;color:#0a0d12 !important;letter-spacing:.06em !important;font-weight:600 !important}
.nl:hover,.nav-link:hover{color:#7a5f10 !important}
.nl-cta,.nl.active,.nav-link.active{background:#0a0d12 !important;color:#fafaf7 !important;border-color:#0a0d12 !important}
.nl-cta:hover{background:#7a5f10 !important;color:#fafaf7 !important}
.nav-mark{background:#0a0d12 !important;color:#fafaf7 !important;font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important}
.nav-name{font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase !important}

/* FOOTER */
.footer,.kerrfall-footer{background:#e6e6df !important;border-top:1px solid rgba(14,17,22,.18) !important;color:#1f2530 !important}
.footer p,.footer-bottom{color:#1f2530 !important}
.footer a{color:#4d3b08 !important;text-decoration:underline !important;text-underline-offset:.2em !important}
.footer a:hover{color:#0a0d12 !important}

/* CARDS / SURFACES — STRONGER borders for white-on-white visibility */
.cm-card,.live-card,.section,.wx-section,.stack-card,.lens-card,.why-card,.step,.ws-card,.cat-card,.part-card,.pipe-card,.fav-row{background:#ffffff !important;border:1px solid rgba(14,17,22,.18) !important;box-shadow:0 2px 6px rgba(14,17,22,.06) !important;color:#0a0d12 !important}
.cm-card:hover,.stack-card:hover,.lens-card:hover,.cat-card:hover{border-color:#7a5f10 !important;background:#fffefa !important;box-shadow:0 4px 16px rgba(122,95,16,.15) !important}

/* LIVE-STRIP cards (homepage) — give them stronger anchor */
.live-strip,.live-strip-inhero{}
.live-card{background:#ffffff !important;border:1px solid rgba(14,17,22,.20) !important;box-shadow:0 2px 8px rgba(14,17,22,.08) !important}
.live-card .eyebrow,.live-card .label{font-family:'Chakra Petch',sans-serif !important;color:#8a3d04 !important;font-weight:700 !important;letter-spacing:.18em !important;text-transform:uppercase !important}
.live-card .body,.live-card .desc,.live-card p{color:#1f2530 !important;font-weight:500 !important}

/* BUTTONS — black on white, hi-vis orange hover */
.btn,.btn-primary{font-family:'Chakra Petch',sans-serif !important;background:#0a0d12 !important;color:#fafaf7 !important;border-color:#0a0d12 !important;letter-spacing:.06em !important;font-weight:600 !important;text-transform:uppercase !important}
.btn-primary:hover,.btn:hover{background:#9d5b00 !important;border-color:#9d5b00 !important;color:#fafaf7 !important;box-shadow:0 0 0 3px rgba(157,91,0,.22) !important}
.btn-out{background:transparent !important;color:#0a0d12 !important;border:2px solid #0a0d12 !important;font-family:'Chakra Petch',sans-serif !important;letter-spacing:.06em !important;font-weight:600 !important;text-transform:uppercase !important}
.btn-out:hover{border-color:#9d5b00 !important;color:#9d5b00 !important;background:rgba(157,91,0,.06) !important}
.btn-gold{background:#0a0d12 !important;color:#fafaf7 !important;font-family:'Chakra Petch',sans-serif !important;letter-spacing:.06em !important;text-transform:uppercase !important;border-color:#0a0d12 !important}
.btn-outline-gold{background:transparent !important;color:#0a0d12 !important;border:2px solid #0a0d12 !important;font-family:'Chakra Petch',sans-serif !important;letter-spacing:.06em !important;text-transform:uppercase !important;font-weight:600 !important}
.btn-outline-gold:hover{background:#0a0d12 !important;color:#fafaf7 !important}

/* PILL-LINK chips (hero action row pills) — convert to clean dark-outline pills */
.hero-actions a:not(.btn):not(.hero-cta),
.hero-cta-out,
.hero-link-pill,
a.fav-row,
.fav-row{font-family:'Chakra Petch',sans-serif !important;background:#ffffff !important;color:#0a0d12 !important;border:1px solid rgba(14,17,22,.30) !important;text-decoration:none !important;font-weight:600 !important;letter-spacing:.04em !important}
.hero-actions a:not(.btn):not(.hero-cta):hover{border-color:#9d5b00 !important;color:#9d5b00 !important;background:rgba(157,91,0,.04) !important}

/* HERO (the default section-level hero — NOT photo heroes) */
.hero:not(.dark-hero):not([data-hero-mode="dark"]),
.hero[data-hero-mode="dark"]:not(:has(.hero-bg)){
  background:radial-gradient(circle at 20% 0%,rgba(122,95,16,.07),transparent 50%),radial-gradient(circle at 80% 100%,rgba(157,91,0,.05),transparent 50%),#fafaf7 !important;
}
.hero:not(.dark-hero):not([data-hero-mode="dark"]) h1,
.hero[data-hero-mode="dark"]:not(:has(.hero-bg)) h1,
.section-title{color:#0a0d12 !important}
.hero:not(.dark-hero):not([data-hero-mode="dark"]) h1 .it,
.hero[data-hero-mode="dark"]:not(:has(.hero-bg)) h1 .it,
.section-title .it{color:#7a5f10 !important}
.hero:not(.dark-hero):not([data-hero-mode="dark"]) .hero-lede,
.hero[data-hero-mode="dark"]:not(:has(.hero-bg)) .hero-lede,
.section-lede{color:#1f2530 !important}

/* ════════════════════════════════════════════════════════════════
   PHOTO-HERO CARVE-OUTS — V1-3 :has(.hero-bg) qualifier
   White text only when there's actually a photo behind.
   Pages without .hero-bg fall back to light-theme typography.
   ════════════════════════════════════════════════════════════════ */
.hero.dark-hero:has(.hero-bg),
.hero[data-hero-mode="dark"]:has(.hero-bg),
.kerr-verified-banner{
  background-color:transparent !important;
  color:#fafaf7 !important;
}
.hero.dark-hero .hero-bg,
.hero[data-hero-mode="dark"] .hero-bg{
  /* preserve page CSS background-image:url() */
}
.hero.dark-hero:has(.hero-bg) h1,.hero[data-hero-mode="dark"]:has(.hero-bg) h1,
.hero.dark-hero:has(.hero-bg) h2,.hero[data-hero-mode="dark"]:has(.hero-bg) h2,
.hero.dark-hero:has(.hero-bg) p,.hero[data-hero-mode="dark"]:has(.hero-bg) p,
.hero.dark-hero:has(.hero-bg) .hero-lede,.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-lede,
.hero.dark-hero:has(.hero-bg) .lede,.hero[data-hero-mode="dark"]:has(.hero-bg) .lede,
.hero.dark-hero:has(.hero-bg) .hero-stats,.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats,
.kerr-verified-banner *{color:#fafaf7 !important}
.hero.dark-hero:has(.hero-bg) .hero-tag,.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-tag{
  background:rgba(252,170,0,.22) !important;
  color:#FCAA00 !important;
  border:1px solid rgba(252,170,0,.50) !important;
  font-family:'Chakra Petch',sans-serif !important;
}
.hero.dark-hero:has(.hero-bg) .gold,.hero[data-hero-mode="dark"]:has(.hero-bg) .gold,
.hero.dark-hero:has(.hero-bg) h1 .gold,.hero[data-hero-mode="dark"]:has(.hero-bg) h1 .gold{color:#FCAA00 !important}
/* V1-4 fix: italic accent was light blue washing out over photos — pivoted to hi-vis amber */
.hero.dark-hero:has(.hero-bg) .it,.hero[data-hero-mode="dark"]:has(.hero-bg) .it,
.hero.dark-hero:has(.hero-bg) em,.hero[data-hero-mode="dark"]:has(.hero-bg) em{
  color:#FCAA00 !important;
  font-family:'Source Serif 4',Georgia,serif !important;
  font-style:italic !important;
  font-weight:600 !important;
  text-shadow:0 2px 12px rgba(14,17,22,.45) !important;
}
.hero.dark-hero:has(.hero-bg) h1,.hero[data-hero-mode="dark"]:has(.hero-bg) h1{font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important;text-shadow:0 2px 16px rgba(14,17,22,.55) !important}
.hero.dark-hero:has(.hero-bg) .hero-lede,.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-lede,
.hero.dark-hero:has(.hero-bg) .lede,.hero[data-hero-mode="dark"]:has(.hero-bg) .lede{text-shadow:0 1px 8px rgba(14,17,22,.55) !important}

/* V1-4 fix: hero-stats labels/values on photo heroes — bright readable */
.hero.dark-hero:has(.hero-bg) .hero-stats *,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats *{color:#fafaf7 !important}
.hero.dark-hero:has(.hero-bg) .hero-stats .stat-label,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats .stat-label,
.hero.dark-hero:has(.hero-bg) .hero-stats small,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats small{
  color:#FCAA00 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 6px rgba(14,17,22,.45) !important;
}
.hero.dark-hero:has(.hero-bg) .hero-stats strong,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats strong,
.hero.dark-hero:has(.hero-bg) .hero-stats .stat-val,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-stats .stat-val{
  color:#fafaf7 !important;
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  text-shadow:0 2px 12px rgba(14,17,22,.55) !important;
}

.section-hero img,.cat-hero img,.kerr-verified-banner img{filter:none !important;opacity:1 !important}

/* Photo-hero hero-actions buttons stay dark theme */
.hero.dark-hero:has(.hero-bg) .hero-actions a,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-actions a,
.hero.dark-hero:has(.hero-bg) .hero-cta,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-cta{
  background:rgba(14,17,22,.65) !important;
  color:#fafaf7 !important;
  border:1px solid rgba(252,170,0,.45) !important;
  backdrop-filter:blur(8px) !important;
}
.hero.dark-hero:has(.hero-bg) .hero-actions a:hover,
.hero[data-hero-mode="dark"]:has(.hero-bg) .hero-cta:hover{
  background:rgba(157,91,0,.85) !important;
  border-color:#FCAA00 !important;
}

/* CHIPS / PILLS / BADGES */
.chip,.tag,.fav-chip,.section-chip,.gt-tag,.live-tag{background:#f1f1ec !important;border:1px solid rgba(14,17,22,.20) !important;color:#0a0d12 !important;font-family:'Chakra Petch',sans-serif !important;letter-spacing:.08em !important;text-transform:uppercase !important;font-weight:600 !important}

/* TABLES */
table,.table{background:#ffffff !important;color:#0a0d12 !important}
th{background:#e6e6df !important;color:#0a0d12 !important;border-color:rgba(14,17,22,.18) !important;font-family:'Chakra Petch',sans-serif !important;letter-spacing:.06em !important;text-transform:uppercase !important;font-weight:700 !important}
td{border-color:rgba(14,17,22,.10) !important}

/* STATUS BANNERS */
.tier-alert,.banner-alert,.cell-imminent{background:#fff2f2 !important;color:#a01020 !important;border-color:#a01020 !important;font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important;letter-spacing:.06em !important}
.tier-watch,.banner-watch,.cell-approaching{background:#FFF4D6 !important;color:#7a4400 !important;border-color:#9d5b00 !important;font-family:'Chakra Petch',sans-serif !important;font-weight:700 !important;letter-spacing:.06em !important}
.banner-monitor{background:#e6efff !important;color:#1a4d96 !important;border-color:#1a4d96 !important;font-family:'Chakra Petch',sans-serif !important}
.tier-ok,.banner-ok,.cell-clear{background:#ecf0e0 !important;color:#26301b !important;border-color:#3d4b1e !important}

/* SVG charts */
text[fill="#fff"],text[fill="#f5f7fb"],text[fill="white"],text[fill="#ffffff"]{fill:#0a0d12 !important}
line[stroke="#fff"],line[stroke="#f5f7fb"],line[stroke="white"]{stroke:rgba(14,17,22,.25) !important}
path[stroke="#fff"]{stroke:#0a0d12 !important}

.leaflet-container{background:#e6e6df !important}

/* Tabular numeric data — JetBrains Mono */
.lvTemp,.lvHiTemp,.lvLoTemp,.lvFeels,.tile-headline,.bc-val,.fc-val,.storm-track-val,.snowpack-val,.cape-val,.li-val,.ac-row .val,.live-temp,.live-val,.hour-val,.fav-temp{font-family:'JetBrains Mono',ui-monospace,monospace !important;font-variant-numeric:tabular-nums !important;letter-spacing:-.02em !important;font-weight:600 !important}

/* ═══════════════════════════════════════════════════════════════════════════
   CLICKABLE-CARDS-DARK-2026-05-28 · clickable cards as instrument-panel buttons
   Errol's brief: white-on-white cards don't communicate "click me". Pivot to
   dark instrument-panel treatment matching the primary buttons. */

/* PHASE 1 · homepage live-strip cards */
.live-card,
a.live-card,
a.live-card:link,
a.live-card:visited{
  background:linear-gradient(180deg,#0a0d12 0%,#161a22 100%) !important;
  border:1px solid rgba(252,170,0,.18) !important;
  color:#fafaf7 !important;
  box-shadow:0 4px 14px rgba(14,17,22,.16),inset 0 1px 0 rgba(252,170,0,.08) !important;
  text-decoration:none !important;
  transition:all .18s ease !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  min-height:120px !important;
  position:relative !important;
  overflow:hidden !important;
}
.live-card:hover,
a.live-card:hover{
  border-color:#FCAA00 !important;
  background:linear-gradient(180deg,#1a1f28 0%,#262b38 100%) !important;
  box-shadow:0 8px 22px rgba(252,170,0,.22),inset 0 1px 0 rgba(252,170,0,.18) !important;
  transform:translateY(-2px) !important;
}
.live-card::after{
  content:'→' !important;
  position:absolute !important;
  top:14px !important;
  right:18px !important;
  color:#FCAA00 !important;
  font:700 18px/1 'Chakra Petch',sans-serif !important;
  opacity:.6 !important;
  transition:all .18s !important;
}
.live-card:hover::after{
  opacity:1 !important;
  transform:translateX(4px) !important;
}

/* Live-card labels (VANCOUVER OLYMPICS / RUPPERT INC / LLC · EQUIPMENT) */
.live-card .eyebrow,
.live-card .label,
.live-card .live-label,
.live-card .live-lbl,
.live-card > strong:first-child,
.live-card > h3,
.live-card > h4{
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:#FCAA00 !important;
  margin-bottom:8px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}

/* Live-card body text */
.live-card p,
.live-card .body,
.live-card .desc,
.live-card .live-body,
.live-card .live-sub,
.live-card > span{
  color:#fafaf7 !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:500 !important;
  font-size:14px !important;
  line-height:1.5 !important;
  margin:0 !important;
}

/* Live-strip grid: gap:14px rewrite eliminates the dark phantom slot that the
   prior gap:1px + var(--line) strip-background revealed in the auto-fill row. */
.live-strip,
.live-strip-inhero{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:14px !important;
  background:transparent !important;
  border:none !important;
}

/* Kill the old gold left-border indicator now that the whole card is dark */
.live-card::before{display:none !important}

/* ── PHASE 3 · sitewide clickable-card sweep ───────────────────────────────── */

a.cm-card,a.stack-card,a.lens-card,a.cat-card,a.why-card,a.pipe-card,
.cm-card[href],.stack-card[href],.lens-card[href],.cat-card[href],.why-card[href],
.cm-card:has(a[href]),.stack-card:has(a[href]),.lens-card:has(a[href]),.cat-card:has(a[href]){
  background:linear-gradient(180deg,#0a0d12 0%,#161a22 100%) !important;
  border:1px solid rgba(252,170,0,.18) !important;
  color:#fafaf7 !important;
  box-shadow:0 4px 14px rgba(14,17,22,.16) !important;
  text-decoration:none !important;
  position:relative !important;
}
a.cm-card:hover,a.stack-card:hover,a.lens-card:hover,a.cat-card:hover,a.why-card:hover,a.pipe-card:hover,
.cm-card[href]:hover,.stack-card[href]:hover,.lens-card[href]:hover,.cat-card[href]:hover{
  border-color:#FCAA00 !important;
  background:linear-gradient(180deg,#1a1f28 0%,#262b38 100%) !important;
  box-shadow:0 8px 22px rgba(252,170,0,.22) !important;
  transform:translateY(-2px) !important;
}

/* All clickable-card text rendered light */
a.cm-card *,a.stack-card *,a.lens-card *,a.cat-card *,a.why-card *,a.pipe-card *,
.cm-card[href] *,.stack-card[href] *,.lens-card[href] *,.cat-card[href] *{
  color:#fafaf7 !important;
}

/* Eyebrow labels in clickable cards stay hi-vis amber Chakra Petch */
a.cm-card .cm-label,a.stack-card .stack-role,a.lens-card .lens-name,
a.cat-card .cat-label,a.why-card .why-name,
.cm-card .cm-label,.stack-card .stack-role,.lens-card .lens-name,
.cat-card .cat-label,.why-card .why-name,.live-card .eyebrow{
  color:#FCAA00 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

/* Hover affordance arrow on clickable cards */
a.cm-card::after,a.stack-card::after,a.lens-card::after,a.cat-card::after,a.why-card::after{
  content:'→' !important;
  position:absolute !important;
  bottom:18px !important;
  right:22px !important;
  color:#FCAA00 !important;
  font:700 18px/1 'Chakra Petch',sans-serif !important;
  opacity:.55 !important;
  transition:all .18s !important;
}
a.cm-card:hover::after,a.stack-card:hover::after,a.lens-card:hover::after,
a.cat-card:hover::after,a.why-card:hover::after{
  opacity:1 !important;
  transform:translateX(4px) !important;
}

/* Weather favorites — already dark instrument-panel; bump active state ring */
.fav-row.active,.fav-row[data-active="true"]{
  border-color:#FCAA00 !important;
  box-shadow:0 0 0 2px rgba(252,170,0,.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V1-6-CONTRAST-2026-05-28 · in-content pill + tab + product-card-pill fixes
   Errol's screenshots flagged 4 contexts the broader cascade missed because
   they're styled per-page inline or live inside DARK sections. Surgical here. */

/* ABOUT PAGE TAB NAV — OLYMPIC / FILM / PHOTOS / PRESS on dark charcoal */
.tab-bar,.about-tabs,.section-tabs,.olympic-tabs,
[class*="tab"]:has(> [class*="tab-btn"]){
  background:#0a0d12 !important;
  border-top:1px solid rgba(252,170,0,.18) !important;
  border-bottom:1px solid rgba(252,170,0,.18) !important;
}
.tab-btn,.about-tab,.section-tab,.olympic-tab,a.tab,button.tab,
[class*="tab-btn"]{
  color:#FCAA00 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:.32em !important;
  text-decoration-color:rgba(252,170,0,.50) !important;
  transition:all .15s !important;
}
.tab-btn:hover,.about-tab:hover,a.tab:hover,button.tab:hover,
[class*="tab-btn"]:hover{
  color:#ffffff !important;
  text-decoration-color:#FCAA00 !important;
}
.tab-btn.active,.about-tab.active,.section-tab.active,
[class*="tab-btn"].active{
  color:#ffffff !important;
  background:rgba(252,170,0,.18) !important;
  text-decoration-color:#FCAA00 !important;
}

/* IN-CONTENT GOLD PILL LINKS · The Olympic Story / Ruppert Inc / Live Sierra Weather
   Was gold-on-gold UNREADABLE. Fix: dark charcoal text on cream pill. */
.pill-link,.story-link,.section-pill,
a.pill,a.chip-link,
.olympic-section a:not(.btn):not(.nl):not(.nav-link),
.callout a:not(.btn):not(.nl):not(.nav-link){
  background:#f1f1ec !important;
  color:#0a0d12 !important;
  border:1px solid rgba(14,17,22,.22) !important;
  padding:8px 16px !important;
  border-radius:6px !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  transition:all .15s !important;
}
.pill-link:hover,.story-link:hover,a.pill:hover,a.chip-link:hover{
  background:#0a0d12 !important;
  color:#FCAA00 !important;
  border-color:#0a0d12 !important;
}
.pill-link.active,a.pill.active,.story-link.active{
  background:#0a0d12 !important;
  color:#FCAA00 !important;
  border-color:#FCAA00 !important;
}

/* TOOLS.HTML PRODUCT CARD PILL TAGS · 60V FLEXVOLT / SDS MAX / ROTARY+CHIP / etc
   Was pastel-ghost on light gradient. Strengthening per-tier. */
.tag-flexvolt,.tag-sdsmax,.tag-rotary,.tag-chipping,.tag-new,.tag-dewalt,
.product-tag,.spec-tag,.tool-tag,
[class*="tag-"]{
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  padding:4px 10px !important;
  border-radius:4px !important;
  display:inline-block !important;
  border:1px solid !important;
}
.tag-flexvolt{background:#fff4d6 !important;color:#7a4400 !important;border-color:#FCAA00 !important}
.tag-sdsmax{background:#e6efff !important;color:#0a3870 !important;border-color:#1a4d96 !important}
.tag-rotary{background:#f1ebff !important;color:#3d1f70 !important;border-color:#6d3eb8 !important}
.tag-chipping{background:#ffe6e6 !important;color:#7a0a14 !important;border-color:#c41525 !important}
.tag-new{background:#c41525 !important;color:#ffffff !important;border-color:#7a0a14 !important}
.tag-dewalt{background:#0a0d12 !important;color:#FCAA00 !important;border-color:#FCAA00 !important}

/* PRODUCT CARDS — strengthen body text, reduce washy gradient */
.product-card,.tool-card,.cordless-card,.flexvolt-card{
  background:#ffffff !important;
  border:1px solid rgba(14,17,22,.20) !important;
  box-shadow:0 2px 8px rgba(14,17,22,.08) !important;
  color:#0a0d12 !important;
}
.product-card h3,.product-card h4,
.product-card .product-name,.tool-card h3{
  color:#0a0d12 !important;
}
.product-card p,.product-card .desc,.product-card .product-desc{
  color:#1f2530 !important;
  font-weight:500 !important;
}

/* SECTION EYEBROWS on light bg · CORDLESS DEMO HAMMERS / 60V FLEXVOLT / SDS MAX
   The orange-on-cream eyebrows were too faint. Deepening to burnt-orange. */
.sec-lbl,.section-lbl,.cm-tag,.hero-tag,
.eyebrow,.label-eyebrow,.tag-eyebrow,
.section-eyebrow,.cordless-eyebrow,.dewalt-eyebrow{
  color:#7a3500 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  font-size:12px !important;
}

/* FIELD-ACTION strip · SEE IT IN ACTION · JUMP TO GALLERY */
.field-action,.action-strip,.see-it-strip,
[class*="action-strip"]{
  background:#fff8e6 !important;
  border:2px solid #FCAA00 !important;
}
.field-action h3,.field-action .strip-title,.action-strip h3{
  color:#0a0d12 !important;
  font-family:'Chakra Petch',sans-serif !important;
}
.field-action p,.field-action .strip-body,.action-strip p{
  color:#1f2530 !important;
  font-weight:500 !important;
}
.field-action a,.action-strip a{
  color:#7a3500 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V1-7-REALSELECTOR-CONTRAST-2026-05-28 · V1-6 guessed class names that don't
   exist in source, so the worst offenders went untouched. These target the
   ACTUAL classes (verified against live DOM on index/about/tools):
     • homepage hero subline ... span.small (was var(--text2) dark, lost on photo)
     • homepage CTA pills ...... a.snow-reel-cta(.primary) (generic a{} → gold-on-gold)
     • about jump tabs ......... .about-jump a (dark-gold on dark bar = invisible)
     • tools product pills ..... .new-pill.flex/.demo/.demo-2/.demo-3 (pastel-on-dark washed out)
     • tools product cards ..... .new-card (half-dark gradient + white h3)
     • tools action banner ..... .action-jump-banner / .ajb-title (#fff title on cream)
   Generic link rule patched (Step 2) to stop clobbering these. Heroes/photos untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · HOMEPAGE HERO SUBLINE — "Builder · Welder · Operator · Instructor" */
.hero.dark-hero:has(.hero-bg) h1 .small,
.hero[data-hero-mode="dark"]:has(.hero-bg) h1 .small{
  color:#f4f5f7 !important;
  opacity:1 !important;
  font-weight:600 !important;
  text-shadow:0 2px 10px rgba(14,17,22,.80),0 1px 3px rgba(14,17,22,.65) !important;
}

/* 2 · HOMEPAGE CTA PILLS — .snow-reel-cta (outline = charcoal-on-cream; primary = dark pill, amber text) */
a.snow-reel-cta,a.snow-reel-cta:link,a.snow-reel-cta:visited{
  background:#ffffff !important;color:#0a0d12 !important;
  border:1px solid rgba(14,17,22,.32) !important;
  text-decoration:none !important;font-weight:600 !important;
}
a.snow-reel-cta:hover{border-color:#9d5b00 !important;color:#9d5b00 !important;background:#fffaf0 !important}
a.snow-reel-cta.primary,a.snow-reel-cta.primary:link,a.snow-reel-cta.primary:visited{
  background:#0a0d12 !important;color:#FCAA00 !important;border:1px solid #0a0d12 !important;
}
a.snow-reel-cta.primary:hover{background:#161a22 !important;color:#FCAA00 !important;border-color:#FCAA00 !important}

/* 3 · ABOUT JUMP TABS — .about-jump a (hi-vis amber on near-black bar) */
.about-jump{background:rgba(8,10,14,.95) !important;border-top:1px solid rgba(252,170,0,.32) !important;border-bottom:1px solid rgba(252,170,0,.32) !important}
.about-jump a,.about-jump a:link,.about-jump a:visited{
  color:#FCAA00 !important;font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;
  text-decoration:none !important;
}
.about-jump a:hover{color:#ffffff !important;background:rgba(252,170,0,.18) !important}

/* 4 · TOOLS PRODUCT PILLS — .new-pill.* (solid color-coded chips, dark legible text) */
.new-pill{border:1px solid transparent !important;font-weight:800 !important}
.new-pill.flex{background:#fff4d6 !important;color:#7a4400 !important;border-color:#FCAA00 !important}
.new-pill.demo,.new-pill.xr{background:#e6efff !important;color:#0a3870 !important;border-color:#1a4d96 !important}
.new-pill.demo-2{background:#ffe6e6 !important;color:#7a0a14 !important;border-color:#c41525 !important}
.new-pill.demo-3{background:#f1ebff !important;color:#3d1f70 !important;border-color:#6d3eb8 !important}
.new-pill.new{background:#c41525 !important;color:#ffffff !important;border-color:#7a0a14 !important}

/* 5 · TOOLS PRODUCT CARDS — .new-card (clean white card, dark text) */
.new-card,a.new-card,a.new-card:link,a.new-card:visited{
  background:#ffffff !important;border:1px solid rgba(14,17,22,.20) !important;
  box-shadow:0 2px 8px rgba(14,17,22,.08) !important;color:#0a0d12 !important;
}
.new-card:hover,a.new-card:hover{border-color:#9d5b00 !important;box-shadow:0 8px 22px rgba(157,91,0,.18) !important}
.new-card h3{color:#0a0d12 !important}
.new-card p{color:#1f2530 !important;font-weight:500 !important}
.new-cta,a.new-cta{color:#7a3500 !important;font-weight:800 !important;text-decoration:underline !important;text-decoration-thickness:2px !important}
.new-card:hover .new-cta{color:#0a0d12 !important}
.new-card::before{background:#FCAA00 !important}

/* 6 · TOOLS ACTION BANNER — .action-jump-banner / .ajb-* (dark title on cream, amber border) */
a.action-jump-banner,a.action-jump-banner:link,a.action-jump-banner:visited{
  background:#fff8e6 !important;border:2px solid #FCAA00 !important;border-left:5px solid #FCAA00 !important;
}
.ajb-title{color:#0a0d12 !important;font-family:'Chakra Petch',sans-serif !important}
.ajb-title .it{color:#7a3500 !important}
.ajb-sub{color:#1f2530 !important;font-weight:500 !important}
.ajb-cta{color:#fff !important;background:#d47b00 !important;font-weight:800 !important}

/* ═══════════════════════════════════════════════════════════════════════════
   V1-8-PHOTO-HERO-TEXT-2026-05-29 · two readability misses from the full Chrome
   sweep: (1) bold <strong> phrases in the About hero bio were dark charcoal over
   the photo; (2) the welding hero accent .plasma ("Cut clean.") was light-blue
   and washed out. Both scoped so non-photo content is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Bold text on photo heroes → light + shadow (was charcoal, invisible) */
.hero.dark-hero:has(.hero-bg) strong,
.hero[data-hero-mode="dark"]:has(.hero-bg) strong,
.hero.dark-hero:has(.hero-bg) b,
.hero[data-hero-mode="dark"]:has(.hero-bg) b{
  color:#ffffff !important;
  text-shadow:0 1px 8px rgba(14,17,22,.60) !important;
}

/* (2) Welding hero ".plasma" accent → hi-vis amber (was washed-out light blue) */
.hero h1 .plasma{
  color:#FCAA00 !important;
  font-style:italic !important;
  text-shadow:0 2px 12px rgba(14,17,22,.50) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2-VISUAL-OVERHAUL-2026-05-29 · weather page batch 1 (Fixes 1-5)
   Root cause: light-theme :root deepened shared accent vars for legibility on
   white, but those same vars feed the dark artwork/command panels — making
   their text invisible (e.g. crew-status "ALL SYSTEMS NORMAL" in olive #3d4b1e).
   Meanwhile dark-theme pastels (#FFB85C, #7DC4ED) wash out on warm white.
   Fix is bidirectional: bright vars + light text scoped INTO dark panels;
   deeper hues on the washed-out light panels. CSS-only. No JS, no data, no art.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · V2-DARKPANEL-RESCOPE ──────────────────────────────────────────
   Re-scope bright accent vars + light text INTO dark panels only. Hooks:
     .hero[data-hero-mode="dark"]  (crew-command hero, already tagged)
     [data-section-mode="dark"]    (newly tagged: #sixteen-day, #storm-engine,
                                     #storm-approach in weather.html)
     .wx-dark / .panel-dark / .chart-dark  (reserved future hooks)
   Light-bg content keeps the deepened palette from :root unchanged. */
.hero[data-hero-mode="dark"],
[data-section-mode="dark"],
.wx-dark, .panel-dark, .chart-dark{
  --text:#f4f5f7 !important; --text2:#cdd2dd !important; --text3:#9aa3b2 !important; --text4:#7a8494 !important;
  --gold:#FCAA00 !important; --gold-l:#ffc94d !important;
  --green:#4ade80 !important; --orange:#f59e0b !important;
  --ice:#E8C96A !important; --blue:#E8C96A !important; --red:#ef4444 !important;
}
/* Dark panels: ensure default body text + headings read white on the dark bg
   even when downstream rules hardcoded the old dark color. */
[data-section-mode="dark"]{
  color:#f4f5f7 !important;
}
[data-section-mode="dark"] .title,
[data-section-mode="dark"] h2,
[data-section-mode="dark"] h3{ color:#f4f5f7 !important }
[data-section-mode="dark"] .lbl,
[data-section-mode="dark"] .section-chip .chip-text{ color:#cdd2dd !important }

/* ─── FIX 2 · V2-WEATHER-16DAY · dark-theme pastels on the light 16-day table */
.f16-row-compact .f16-temps-mini .temp-pill.hi{background:#ffe7cf !important;border-color:#d77a1f !important;color:#8a3d04 !important}
.f16-row-compact .f16-temps-mini .temp-pill.lo{background:#dbeafe !important;border-color:#3b82c4 !important;color:#0a3870 !important}
.f16-row-compact .f16-desc-mini .desc-wind{color:#1f2530 !important}
.f16-row-compact .f16-desc-mini .desc-wind .wind-lbl{color:#5b6470 !important}
.f16-row-compact .f16-desc-mini .desc-wind .wind-main{color:#0a0d12 !important}
.f16-row-compact .f16-desc-mini .desc-wind .wind-gust{color:#9a5b00 !important}
.f16-row-compact .f16-desc-mini .desc-wind.high-gust .wind-gust{color:#b91c1c !important}
.f16-row-compact .f16-desc-mini,
.f16-row-compact .f16-desc-mini .desc-label{color:#1f2530 !important}
.f16-row-compact .f16-pp-mini{color:#1f2530 !important}
.f16-row-compact .f16-pp-mini.high{color:#1a4d96 !important}
.f16-row-compact .f16-pp-mini.zero{color:#5b6470 !important}
.f16-precip .pct.high{color:#1a4d96 !important}
/* Day-row date subtext ("May 29") and precip amount value — were too faint */
.f16-day .date{color:#5b6470 !important}
.f16-precip .pct{color:#1f2530 !important}
.f16-precip .lbl{color:#5b6470 !important}

/* ─── FIX 3 · V2-ONSET-BANNER · "No rain expected · next 24 hr" headline wash
   The element is #onsetBadge with tier classes .clear / .observed / .watch /
   .confirmed / .model. The pale tinted gradients on .clear/.observed/.watch/
   .confirmed all render near-white on the warm-white parent, while the
   default headline color is #fff → headline invisible. Pin a tier-appropriate
   DARK headline + dark detail/tag for each LIGHT tier. .model stays dark-bg
   (the V2-DARKPANEL-RESCOPE handles its text if we ever flip its bg to dark). */
.onset-badge.clear .onset-headline{color:#1d6435 !important;text-shadow:none !important}
.onset-badge.clear .onset-detail{color:#1f2530 !important}
.onset-badge.clear .onset-tag{color:#1d6435 !important;background:rgba(34,197,94,.18) !important;border:1px solid rgba(34,197,94,.45) !important}
.onset-badge.clear .onset-icon{color:#1d6435 !important;text-shadow:none !important}

.onset-badge.observed .onset-headline{color:#7a4400 !important;text-shadow:none !important}
.onset-badge.observed .onset-detail{color:#1f2530 !important}
.onset-badge.observed .onset-tag{color:#7a4400 !important;background:rgba(255,159,42,.22) !important;border:1px solid rgba(255,159,42,.55) !important}
.onset-badge.observed .onset-icon{color:#7a4400 !important;text-shadow:none !important}

.onset-badge.watch .onset-headline{color:#0a3870 !important;text-shadow:none !important}
.onset-badge.watch .onset-detail{color:#1f2530 !important}
.onset-badge.watch .onset-tag{color:#0a3870 !important;background:rgba(91,173,226,.22) !important;border:1px solid rgba(91,173,226,.55) !important}
.onset-badge.watch .onset-icon{color:#0a3870 !important;text-shadow:none !important}

.onset-badge.confirmed .onset-headline{color:#7a0a14 !important;text-shadow:none !important}
.onset-badge.confirmed .onset-detail{color:#1f2530 !important}
.onset-badge.confirmed .onset-tag{color:#7a0a14 !important;background:rgba(239,68,68,.22) !important;border:1px solid rgba(239,68,68,.6) !important}
.onset-badge.confirmed .onset-icon{color:#7a0a14 !important;text-shadow:none !important}

/* ─── FIX 4 · V2-STORM-SIG + STAT-PANEL SUBLINES
   .storm-sig-detail has hardcoded color:rgba(255,255,255,.85) — invisible on
   light-tier pale gradients. Repaint per tier with dark text. Same for the
   active-cells stat rows + the pws-summary subline + the upstream-polling
   meta labels that all default to var(--text3) which is now too faint on
   white-ish containers. */
.storm-sig.clear .storm-sig-title{color:#1d6435 !important;text-shadow:none !important}
.storm-sig.clear .storm-sig-detail{color:#1f2530 !important}
.storm-sig.watch .storm-sig-title{color:#7a4400 !important;text-shadow:none !important}
.storm-sig.watch .storm-sig-detail{color:#1f2530 !important}
.storm-sig.confirmed .storm-sig-title{color:#7a0a14 !important;text-shadow:none !important}
.storm-sig.confirmed .storm-sig-detail{color:#1f2530 !important}
/* Active cells (PRIORITY-8 cell tracker) summary line + per-row labels */
.ac-meta, .ac-row{color:#1f2530 !important}
.ac-meta .lbl, .ac-row .lbl, .ac-hd .lbl{color:#5b6470 !important}
.ac-hd{color:#1f2530 !important}
/* PWS summary + table — was rendered via inline style="color:var(--text3)" so
   needs a wins-over-inline-style approach via attribute selector. */
.pws-summary{color:#1f2530 !important}
.pws-summary span[style*="--text3"]{color:#5b6470 !important}

/* ─── FIX 5 · V2-HOURLY-ALMANAC · sweep dark-theme pastels into deeper hues
   Hourly strip classes per Explore audit:
     .hour-time / .hour-ic / .hour-temp / .hour-pct / .hour-amt
     .hour-wind / .hour-wind-arrow / .hour-wind-val / .hour-wind-gust
     .hour-day-sep
   Almanac:
     .almanac-card / .almanac-grid / .almanac-saying */
.hour-time{color:#5b6470 !important}
.hour-temp{color:#1f2530 !important}
.hour-temp.high, .hour-temp.hi{color:#8a3d04 !important}
.hour-temp.low, .hour-temp.lo{color:#0a3870 !important}
.hour-pct{color:#1f2530 !important}
.hour-pct.high{color:#1a4d96 !important}
.hour-amt{color:#5b6470 !important}
.hour-amt.rain, .hour-amt.has-rain{color:#1a4d96 !important}
.hour-amt.snow, .hour-amt.has-snow{color:#0a3870 !important}
.hour-wind, .hour-wind-arrow{color:#5b6470 !important}
.hour-wind-val{color:#1f2530 !important}
.hour-wind-gust{color:#9a5b00 !important}
.hour-wind-gust.high{color:#b91c1c !important}
.hour-day-sep{color:#5b6470 !important}
.hour-day-sep .day-name{color:#1f2530 !important;font-weight:700 !important}
/* Almanac sun / moon figures */
.almanac-card{color:#1f2530 !important}
.almanac-card .label, .almanac-card .lbl{color:#5b6470 !important}
.almanac-card .value, .almanac-card .val{color:#1f2530 !important;font-weight:700 !important}
.almanac-saying{color:#5b6470 !important;font-style:italic !important}


/* STICKY-NAV-2026-05-30 — sitewide sticky top nav (Errol: "Sticky nav on all pages").
   CSS only. The fixed-position fallback some pages used is superseded by sticky so
   content isn't hidden under the bar. */
.nav{ position:sticky !important; top:0 !important; z-index:9000 !important; }