@font-face {
  font-family:"Fraunces";
  src:url("fonts/fraunces-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face {
  font-family:"DM Sans";
  src:url("fonts/dm-sans-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}

@font-face { font-family:"Karla"; src:url("fonts/karla.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Karla"; src:url("fonts/karla-500.ttf") format("truetype"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Karla"; src:url("fonts/karla-600.ttf") format("truetype"); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:"Karla"; src:url("fonts/karla-700.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }

:root {
  --dusk:#261b35;
  --dusk-deep:#181220;
  --coral:#e86d58;
  --coral-deep:#c95247;
  --sunrise:#f2bb70;
  --cream:#fff8ef;
  --paper:#f8eee1;
  --lake:#1f625d;
  --lake-deep:#164741;
  --thermal:#ff9678;
  --thermal-deep:#ad4f42;
  --thermal-glow:rgba(255,150,120,.2);
  --air:#7ea4cb;
  --air-deep:#526a84;
  --air-glow:rgba(126,164,203,.15);
  --hero-accent:var(--thermal);
  --hero-accent-glow:var(--thermal-glow);
  --pine:#214a43;
  --ink:#554f5a;
  --muted:#59515f;
  --line:rgba(41,30,51,.14);
  --shadow:0 24px 70px rgba(43,26,48,.13);
  --display:"Fraunces",Iowan Old Style,"Palatino Linotype",serif;
  --sans:"Karla","DM Sans",Avenir Next,ui-sans-serif,system-ui,sans-serif;
  --hero-top:rgba(25,17,35,.78);
  --hero-mid:rgba(30,18,42,.13);
  --hero-bottom:rgba(30,17,40,.91);
  --hero-side:rgba(42,20,47,.52);
}

body[data-scene="winter"] {
  --paper:#f1f3f2;
  --cream:#fffaf2;
  --lake:#276b79;
  --hero-top:rgba(22,25,39,.9);
  --hero-mid:rgba(25,31,47,.32);
  --hero-bottom:rgba(24,20,37,.94);
  --hero-side:rgba(34,22,46,.66);
}

html { background:var(--paper); }
body {
  color:var(--ink);
  font-family:var(--sans);
  background:
    radial-gradient(circle at 9% 18%,rgba(240,111,89,.09),transparent 23rem),
    radial-gradient(circle at 93% 48%,rgba(23,111,115,.09),transparent 27rem),
    var(--paper);
}

:focus-visible { outline:3px solid var(--sunrise); outline-offset:4px; }

.preview-bar {
  position:relative;
  z-index:5;
  padding:.62rem 1rem;
  color:#f7debc;
  background:var(--dusk-deep);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.17em;
}

.hero {
  min-height:47rem;
  background-color:var(--dusk);
  background-position:center 47%;
}

.hero::before {
  z-index:0;
  background:
    linear-gradient(180deg,var(--hero-top) 0%,var(--hero-mid) 38%,var(--hero-bottom) 100%),
    linear-gradient(90deg,var(--hero-side),transparent 67%);
}

.hero::after {
  position:absolute;
  inset:auto 0 0;
  height:8rem;
  z-index:0;
  content:"";
  background:linear-gradient(180deg,transparent,var(--dusk-deep));
  clip-path:polygon(0 46%,8% 51%,17% 42%,26% 54%,36% 43%,47% 50%,58% 39%,69% 52%,79% 44%,90% 50%,100% 40%,100% 100%,0 100%);
  opacity:.68;
}

.nav,.hero-content,.dashboard,.site-footer,.dock-strip-inner { width:min(78rem,calc(100% - 2.4rem)); }

.nav { padding-top:1.5rem; }
.brand {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  color:var(--cream);
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.brand-mark { width:3.2rem; height:2rem; flex:none; overflow:visible; }
.brand-mark path { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark .brand-sun { fill:var(--coral); stroke:none; }

.nav-links { gap:1.55rem; }
.nav-links a { color:rgba(255,245,232,.85); font-size:.875rem; font-weight:600; }
.nav-links a:hover { color:var(--cream); }

.live-pill {
  color:var(--cream);
  background:rgba(33,19,45,.72);
  border-color:rgba(255,245,232,.2);
  backdrop-filter:blur(12px);
}
.live-pill::before { background:var(--coral); box-shadow:0 0 0 .24rem rgba(240,111,89,.18); }

.hero-content {
  min-height:36.5rem;
  align-content:center;
  padding:5.5rem 0 8.5rem;
}

.hero-copy { max-width:49rem; }
.eyebrow,.panel-kicker,.section-kicker,.brand-season {
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:.17em;
}
.eyebrow { color:#ffd3a0; }

h1,h2,h3 { font-family:var(--display); }
h1 {
  max-width:11.5ch;
  color:var(--cream);
  font-size:clamp(3.55rem,8.8vw,8rem);
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0,"wght" 350;
  font-weight:350;
  line-height:.82;
  letter-spacing:-.065em;
}
h1 em { color:var(--hero-accent); font-style:normal; text-shadow:0 0 1.7rem var(--hero-accent-glow); transition:color .9s ease,text-shadow .9s ease; }

.hero-copy>p:last-child {
  max-width:31rem;
  margin-top:1.55rem;
  color:rgba(255,245,232,.85);
  font-size:clamp(.98rem,1.8vw,1.12rem);
}

.camera-label {
  right:0;
  bottom:6.7rem;
  padding:1rem 1.15rem;
  color:var(--cream);
  background:rgba(34,21,45,.72);
  border:0;
  border-left:3px solid var(--coral);
  border-radius:.2rem 1rem 1rem .2rem;
  box-shadow:none;
}
.camera-label strong { color:#ffd4a6; }

.dock-strip {
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  color:var(--cream);
  border-top:1px solid rgba(255,245,232,.16);
  background:rgba(24,18,32,.78);
  backdrop-filter:blur(14px);
}
.dock-strip-inner {
  display:grid;
  grid-template-columns:1.1fr .7fr .8fr;
  margin-inline:auto;
}
.dock-item {
  min-width:0;
  padding:1.15rem 1.35rem;
  border-right:1px solid rgba(255,245,232,.14);
}
.dock-item:first-child { padding-left:0; }
.dock-item:last-child { padding-right:0; border-right:0; }
.dock-item span { display:block; color:rgba(255,245,232,.85); font-size:.875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.dock-item strong { display:block; margin-top:.25rem; color:var(--cream); font-family:var(--display); font-size:1.15rem; font-weight:500; }
.dock-item strong.hero-surface { color:var(--thermal); font-size:1.55rem; text-shadow:0 0 1.15rem var(--thermal-glow); transition:color .9s ease,text-shadow .9s ease; }

main { padding-bottom:5rem; }
.dashboard { margin-top:0; padding-top:3.2rem; }
.panel.live-camera {
  overflow:hidden;
  margin-bottom:1.2rem;
  color:var(--cream);
  background:var(--dusk);
}
.live-camera-head,.live-camera-foot { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.live-camera-head { padding:1.45rem 1.65rem 1.25rem; }
.live-camera-head .panel-kicker { color:var(--sunrise); }
.live-camera-head h2 { margin:.3rem 0 0; color:var(--cream); font-family:var(--display); font-size:clamp(2rem,4.4vw,3.5rem); font-variation-settings:"opsz" 80,"SOFT" 45,"WONK" 1; font-weight:380; letter-spacing:-.045em; line-height:.9; }
.live-camera-status { display:inline-flex; flex:0 0 auto; align-items:center; gap:.55rem; padding:.55rem .75rem; border:1px solid rgba(255,245,232,.16); border-radius:999px; color:var(--cream); background:rgba(255,255,255,.06); font-size:.875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.live-camera-status i { width:.55rem; height:.55rem; border-radius:50%; background:var(--coral); box-shadow:0 0 0 .3rem rgba(232,109,88,.14); }
.live-camera-frame { position:relative; aspect-ratio:16/9; overflow:hidden; background:#08060b; }
.live-camera-frame iframe { display:block; width:100%; height:100%; border:0; }
.live-camera-foot { padding:1rem 1.65rem 1.15rem; }
.live-camera-foot p { max-width:43rem; margin:0; color:rgba(255,245,232,.85); font-size:.875rem; line-height:1.55; }
.live-camera-foot a { flex:0 0 auto; color:var(--sunrise); font-size:.875rem; font-weight:800; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.live-camera-foot a:hover { color:var(--cream); }
.conditions { gap:1.2rem; }
.panel {
  border:0;
  border-radius:1.7rem .45rem 1.7rem .45rem;
  background:rgba(255,249,240,.95);
  box-shadow:var(--shadow);
}

.temp-panel {
  position:relative;
  overflow:hidden;
  color:var(--cream);
  background:var(--dusk);
}
.temp-panel::after {
  position:absolute;
  right:-2.5rem;
  bottom:-3.5rem;
  width:14rem;
  height:14rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:0 0 0 2rem rgba(255,255,255,.035),0 0 0 4rem rgba(255,255,255,.025);
  content:"";
  pointer-events:none;
}
.temp-panel>div { position:relative; z-index:1; }
.temp-panel .panel-kicker { color:#f6bf79; }
.temperature { color:var(--thermal); font-family:var(--display); font-variation-settings:"opsz" 110,"SOFT" 90,"WONK" 1; text-shadow:0 0 2rem var(--thermal-glow); transition:color .9s ease,text-shadow .9s ease; }
.temperature sup { color:var(--cream); font-family:var(--sans); }
.temp-panel .reading-note { color:rgba(255,245,232,.85); }
.temp-panel .reading-note strong,.temp-panel .depth strong { color:var(--cream); }
.temp-panel .depth { color:rgba(255,245,232,.85); }
.status-pill.fresh { color:#ddffe9; background:rgba(67,167,122,.19); }
.status-pill.fresh::before { background:#65d69b; box-shadow:0 0 0 .22rem rgba(101,214,155,.12); }

.temp-panel { grid-template-columns:minmax(0,1fr) minmax(11rem,.42fr); gap:1.4rem; }
.surface-reading,.surface-context { position:relative; z-index:1; }
.surface-title { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.actual-badge { padding:.32rem .52rem; border:1px solid rgba(255,245,232,.18); border-radius:999px; color:#b8e4d8; background:rgba(255,255,255,.06); font-size:.875rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.water-character { margin:.6rem 0 0; color:#f7c27c; font-family:var(--display); font-size:1.18rem; font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 1; }
.thermal-key { display:grid; grid-template-columns:auto minmax(5.5rem,9rem) auto; align-items:center; gap:.5rem; width:max-content; max-width:100%; margin:.8rem 0 .15rem; color:rgba(255,245,232,.85); font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.thermal-key i { position:relative; display:block; width:100%; height:.26rem; border-radius:999px; background:linear-gradient(90deg,#b3a5dc 0%,#9d9bd5 37.5%,#62b5d8 50%,#e1c65a 58.3%,#ee984b 68.8%,#eb6956 79.2%,#d34e59 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.thermal-key b { position:absolute; left:50%; top:50%; width:.65rem; height:.65rem; border:2px solid var(--cream); border-radius:50%; background:var(--thermal); box-shadow:0 0 0 .18rem var(--thermal-glow); transform:translate(-50%,-50%); transition:left .9s ease,background-color .9s ease,box-shadow .9s ease; }
.surface-context { display:flex; flex-direction:column; align-items:stretch; gap:.85rem; }
.surface-context>.status-pill { align-self:flex-end; }
.depth-gauge { position:relative; min-height:8.25rem; overflow:hidden; padding:1rem; border:1px solid rgba(255,245,232,.13); border-radius:1rem; background:linear-gradient(180deg,rgba(255,255,255,.055) 0 27%,rgba(23,111,115,.26) 27% 100%); }
.depth-gauge .waterline { position:absolute; left:0; right:0; top:27%; height:1px; background:#6fd3d0; box-shadow:0 0 .7rem rgba(111,211,208,.55); }
.depth-gauge .probe-dot { position:absolute; right:1.2rem; top:42%; width:.7rem; height:.7rem; border:2px solid var(--cream); border-radius:50%; background:var(--coral); box-shadow:0 0 0 .3rem rgba(240,111,89,.18); }
.fish-finder { position:absolute; z-index:0; inset:27% 0 0; overflow:hidden; pointer-events:none; }
.finder-fish { position:absolute; display:block; height:auto; opacity:.35; filter:saturate(.72); transform:translate(-50%,-50%) scaleX(var(--fish-direction,1)); transform-origin:center; }
.finder-fish:nth-child(1) { left:24%; top:48%; width:1.45rem; }.finder-fish:nth-child(2) { left:58%; top:67%; width:1.15rem; --fish-direction:-1; }.finder-fish:nth-child(3) { left:42%; top:82%; width:1.7rem; }
.depth-gauge strong,.depth-gauge small,.depth-gauge em { position:relative; display:block; z-index:1; }.depth-gauge strong { color:var(--cream); font-size:.875rem; }.depth-gauge small { margin-top:1.35rem; color:#b8e4d8; font-size:.875rem; font-weight:750; }.depth-gauge em { position:absolute; left:1rem; bottom:.75rem; color:rgba(255,245,232,.85); font-size:.875rem; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.surface-facts { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,245,232,.13); border-bottom:1px solid rgba(255,245,232,.13); }
.surface-facts div { padding:.7rem .3rem; }.surface-facts div+div { padding-left:.7rem; border-left:1px solid rgba(255,245,232,.13); }.surface-facts span,.surface-facts strong { display:block; }.surface-facts span { color:rgba(255,245,232,.85); font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.surface-facts strong { margin-top:.2rem; color:var(--cream); font-size:.875rem; }
.instrument-link { color:#a9dcd5; font-size:.875rem; font-weight:750; line-height:1.35; text-decoration:none; }.instrument-link:hover { color:var(--cream); text-decoration:underline; }
.surface-history { position:relative; z-index:2; grid-column:1/-1; width:100%; margin-top:.15rem; border-top:1px solid rgba(255,245,232,.14); }
.surface-history summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0 .25rem; color:#b8e4d8; cursor:pointer; font-size:.875rem; font-weight:800; list-style:none; }.surface-history summary::-webkit-details-marker { display:none; }.surface-history summary::after { color:#f7c27c; content:"+"; font-family:var(--display); font-size:1.25rem; }.surface-history[open] summary::after { content:"−"; }.surface-history summary small { margin-left:auto; color:rgba(255,245,232,.85); font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; }
.surface-chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.85rem; }
.surface-chart-legend span,.surface-chart-legend small { display:block; }.surface-chart-legend span { color:var(--cream); font-size:.875rem; font-weight:800; }.surface-chart-legend span i { display:inline-block; width:1.35rem; height:3px; margin-right:.42rem; border-radius:999px; vertical-align:middle; background:var(--thermal); box-shadow:0 0 0 3px var(--thermal-glow); transition:background-color .9s ease,box-shadow .9s ease; }.surface-chart-legend small { margin-top:.22rem; color:rgba(255,245,232,.85); font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; }
.surface-chart-controls { display:flex; align-items:center; gap:.3rem; }.surface-chart-controls button { display:grid; place-items:center; min-width:1.9rem; height:1.9rem; padding:0 .45rem; border:1px solid rgba(255,245,232,.16); border-radius:.55rem; color:var(--cream); background:rgba(255,255,255,.055); cursor:pointer; font:800 .875rem var(--sans); }.surface-chart-controls button:hover:not(:disabled) { border-color:rgba(247,194,124,.5); background:rgba(247,194,124,.12); }.surface-chart-controls button:disabled { opacity:.3; cursor:not-allowed; }.surface-chart-controls strong { min-width:2.65rem; color:#b8e4d8; font-size:.875rem; text-align:center; }.surface-chart-controls .surface-chart-reset { width:auto; margin-left:.2rem; padding-inline:.65rem; font-size:.875rem; letter-spacing:.04em; text-transform:uppercase; }
.surface-chart { margin-top:.65rem; padding:.75rem .7rem .55rem; border:1px solid rgba(255,245,232,.12); border-radius:.85rem; background:rgba(255,255,255,.035); }
.surface-chart { position:relative; }.surface-chart svg { display:block; width:100%; height:18rem; overflow:visible; touch-action:pan-y; cursor:grab; user-select:none; }.surface-chart svg.is-dragging { cursor:grabbing; }
.surface-area { fill:url(#surface-area-gradient); }#surface-area-gradient stop:first-child { stop-color:var(--thermal); }.surface-line { fill:none; stroke:var(--thermal); stroke-linecap:round; stroke-linejoin:round; stroke-width:3; vector-effect:non-scaling-stroke; transition:stroke .9s ease; }.surface-point { fill:var(--thermal); stroke:var(--dusk); stroke-width:2; vector-effect:non-scaling-stroke; transition:fill .9s ease; }
.surface-point-hit { fill:transparent; pointer-events:all; }.surface-point-wrap { cursor:crosshair; }.surface-point-wrap:hover .surface-point { fill:var(--cream); stroke:var(--thermal); stroke-width:3; }
#surface-chart-grid line { stroke:rgba(255,245,232,.09); stroke-width:1; vector-effect:non-scaling-stroke; }.surface-chart #surface-chart-y-axis text,.surface-chart #surface-chart-x-axis text { fill:rgba(255,245,232,.48); font:500 9px var(--sans); }.surface-chart #surface-chart-x-axis line { stroke:rgba(255,245,232,.25); stroke-width:1; vector-effect:non-scaling-stroke; }.surface-chart .surface-axis-title { fill:#b8e4d8!important; font-size:8px!important; font-weight:800!important; letter-spacing:.08em; }
.surface-chart-tooltip { position:absolute; z-index:3; min-width:7rem; padding:.48rem .58rem; transform:translate(-50%,calc(-100% - .55rem)); border:1px solid rgba(255,255,255,.15); border-radius:.65rem .2rem .65rem .2rem; color:var(--dusk); background:var(--cream); box-shadow:0 10px 30px rgba(10,8,16,.28); pointer-events:none; }.surface-chart-tooltip[hidden] { display:none; }.surface-chart-tooltip strong,.surface-chart-tooltip span { display:block; }.surface-chart-tooltip strong { color:var(--thermal-deep); font-family:var(--display); font-size:1.05rem; transition:color .9s ease; }.surface-chart-tooltip span { margin-top:.08rem; color:var(--muted); font-size:.875rem; white-space:nowrap; }
.surface-chart-scale { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:.35rem 0 0 3rem; color:rgba(255,245,232,.85); font-size:.875rem; }.surface-chart-scale strong { color:#b8e4d8; font-size:.875rem; }.surface-chart-scale span { text-align:right; }

.weather-panel {
  color:var(--ink);
  background:var(--cream);
  box-shadow:var(--shadow);
}
.weather-panel::before { display:block; width:3.7rem; height:.3rem; margin-bottom:1.25rem; border-radius:999px; background:var(--coral); content:""; }
.weather-panel .panel-kicker { color:var(--coral-deep); }
.weather-panel h2 { color:var(--dusk); }
.weather-panel .tag { color:var(--lake-deep); background:rgba(23,111,115,.1); }
.forecast-item { border-color:var(--line); background:rgba(38,27,53,.035); }
.forecast-item span,.weather-note { color:var(--muted); }
.forecast-item strong { color:var(--dusk); font-family:var(--display); }

.weather-panel { position:relative; overflow:hidden; padding:1.55rem; }
.weather-panel::after { position:absolute; right:-4.2rem; top:-4.4rem; width:10rem; height:10rem; border:1px solid rgba(240,111,89,.18); border-radius:50%; box-shadow:0 0 0 1.4rem rgba(240,111,89,.045),0 0 0 2.8rem rgba(240,111,89,.025); content:""; pointer-events:none; }
.weather-head,.weather-now,.weather-facts,.lake-read,.weather-dock { position:relative; z-index:1; }
.weather-temperature { margin:.45rem 0 0; color:var(--air-deep); font-family:var(--display); font-size:clamp(3.6rem,7vw,5.4rem); font-variation-settings:"opsz" 110,"SOFT" 90,"WONK" 1; letter-spacing:-.06em; line-height:.9; text-shadow:0 0 1.5rem var(--air-glow); transition:color .9s ease,text-shadow .9s ease; }
.weather-summary { max-width:13rem; margin:.45rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.35; }
.air-key { display:grid; grid-template-columns:auto minmax(4.6rem,7rem) auto; align-items:center; gap:.38rem; width:max-content; max-width:100%; margin:.7rem 0 0; color:var(--muted); font-size:.875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.air-key i { position:relative; display:block; width:100%; height:.2rem; border-radius:999px; background:linear-gradient(90deg,#aa9bca 0%,#7ea4cb 38%,#5aa8c0 50%,#6fa993 64%,#c6a84c 73%,#df914b 82%,#d86559 91%,#bb4f57 100%); box-shadow:inset 0 0 0 1px rgba(38,27,53,.08); }
.air-key b { position:absolute; left:38%; top:50%; width:.55rem; height:.55rem; border:2px solid var(--paper); border-radius:50%; background:var(--air); box-shadow:0 0 0 .15rem var(--air-glow); transform:translate(-50%,-50%); transition:left .9s ease,background-color .9s ease,box-shadow .9s ease; }
.weather-now { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; margin-top:.75rem; }
.wind-compass { position:relative; display:grid; place-content:center; flex:0 0 6.4rem; width:6.4rem; height:6.4rem; border:1px solid rgba(23,111,115,.22); border-radius:50%; color:var(--lake-deep); text-align:center; background:radial-gradient(circle,rgba(23,111,115,.08),transparent 63%); }
.wind-compass::before,.wind-compass::after { position:absolute; content:""; background:rgba(23,111,115,.12); }
.wind-compass::before { left:50%; top:.5rem; bottom:.5rem; width:1px; }
.wind-compass::after { left:.5rem; right:.5rem; top:50%; height:1px; }
.wind-compass span { position:absolute; z-index:1; color:var(--muted); font-size:.875rem; font-weight:800; }
.compass-n { left:50%; top:.25rem; transform:translateX(-50%); }.compass-e { right:.35rem; top:50%; transform:translateY(-50%); }.compass-s { left:50%; bottom:.25rem; transform:translateX(-50%); }.compass-w { left:.35rem; top:50%; transform:translateY(-50%); }
.wind-compass strong,.wind-compass small { position:relative; z-index:2; display:block; }
.wind-compass strong { font-family:var(--display); font-size:1.3rem; line-height:1; }.wind-compass small { margin-top:.22rem; color:var(--muted); font-size:.875rem; }
.lake-read { margin:1.05rem 0 0; padding:.75rem .85rem; border-left:3px solid var(--coral); color:var(--ink); background:rgba(240,111,89,.075); font-size:.875rem; line-height:1.45; }
.lake-read span { display:block; margin-bottom:.15rem; color:var(--coral-deep); font-size:.875rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.weather-alert { margin-top:.7rem; padding:.72rem .8rem; border:1px solid rgba(183,71,54,.25); border-radius:.75rem; color:#792f25; background:#fff0e8; font-size:.875rem; font-weight:750; line-height:1.4; }
.weather-facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.weather-facts div { padding:.72rem .5rem .72rem 0; }.weather-facts div+div { padding-left:.65rem; border-left:1px solid var(--line); }
.weather-facts span,.weather-facts strong { display:block; }.weather-facts span { color:var(--muted); font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.weather-facts strong { margin-top:.22rem; color:var(--dusk); font-family:var(--display); font-size:1.15rem; }
.weather-dock { margin-top:.95rem; }
.weather-dock summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 .2rem; color:var(--lake-deep); cursor:pointer; font-size:.875rem; font-weight:800; list-style:none; }
.weather-dock summary::-webkit-details-marker { display:none; }.weather-dock summary::after { content:"+"; color:var(--coral-deep); font-family:var(--display); font-size:1.35rem; line-height:1; }.weather-dock[open] summary::after { content:"−"; }
.weather-dock summary small { margin-left:auto; color:var(--muted); font-size:.875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.weather-visuals { display:grid; gap:.75rem; margin-top:.9rem; }
.weather-visuals section { padding:.75rem; border:1px solid var(--line); border-radius:.85rem; background:rgba(255,255,255,.38); }
.micro-head { display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; }.micro-head span { color:var(--coral-deep); font-size:.875rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.micro-head strong { color:var(--muted); font-size:.875rem; }
.wind-ribbon,.rain-track { display:grid; grid-template-columns:repeat(8,1fr); gap:.28rem; min-height:3.2rem; margin-top:.6rem; }
.wind-hour { display:grid; place-items:center; color:var(--lake); }.wind-hour i { display:block; color:var(--coral-deep); font-size:1rem; font-style:normal; line-height:1; transform:rotate(var(--wind-angle)); animation:wind-whisper 3.4s var(--wind-delay) ease-in-out infinite; }.wind-hour strong { margin-top:.18rem; color:var(--dusk); font-size:.875rem; }.wind-hour small { color:var(--muted); font-size:.875rem; }
.rain-hour { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.22rem; }.rain-hour i { display:block; width:65%; min-height:2px; height:calc(var(--rain) * .026rem); border-radius:.4rem .4rem .1rem .1rem; background:linear-gradient(180deg,#72d0d0,var(--lake)); }.rain-hour small { color:var(--muted); font-size:.875rem; }
.hourly-strip { display:grid; grid-auto-columns:5.3rem; grid-auto-flow:column; gap:.5rem; margin-top:.8rem; padding:0 0 .55rem; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:rgba(23,111,115,.35) transparent; }
.hour-card { padding:.7rem .55rem; border:1px solid var(--line); border-radius:.85rem; background:rgba(255,255,255,.47); text-align:center; }
.hour-card time,.hour-card small { display:block; color:var(--muted); font-size:.875rem; }.hour-card .weather-glyph { display:block; margin:.35rem 0 .2rem; color:var(--lake); font-size:1.15rem; }.hour-card strong { display:block; color:var(--dusk); font-family:var(--display); font-size:1.15rem; }.hour-card small { margin-top:.3rem; line-height:1.35; }
.weather-dock .weather-note { margin:.65rem 0 0; font-size:.875rem; line-height:1.45; }
.close-weather-dock { width:100%; margin-top:.8rem; padding:.72rem; border:1px solid rgba(23,111,115,.2); border-radius:.75rem; color:var(--lake-deep); background:rgba(23,111,115,.07); cursor:pointer; font:800 .875rem var(--sans); letter-spacing:.04em; }.close-weather-dock:hover { background:rgba(23,111,115,.13); }

.radar-bay { margin-top:.9rem; padding:.75rem; border:1px solid var(--line); border-radius:.9rem .25rem .9rem .25rem; background:rgba(255,255,255,.42); }
.radar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.radar-head span,.radar-head strong { display:block; }.radar-head span { color:var(--coral-deep); font-size:.875rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.radar-head strong { margin-top:.12rem; color:var(--dusk); font-family:var(--display); font-size:1.15rem; font-weight:520; }.radar-head a { color:var(--lake-deep); font-size:.875rem; font-weight:800; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; }.radar-head a:hover { text-decoration:underline; }
.radar-frame { position:relative; display:grid; place-items:center; min-height:10rem; overflow:hidden; border-radius:.65rem; color:var(--muted); background:linear-gradient(145deg,rgba(23,111,115,.09),rgba(38,27,53,.08)); text-align:center; }
.radar-frame img { display:block; width:100%; height:auto; max-height:27rem; object-fit:contain; }.radar-frame span { position:absolute; inset:50% auto auto 50%; width:80%; font-size:.875rem; font-weight:750; transform:translate(-50%,-50%); }.radar-frame img[src]+span { color:rgba(255,255,255,.88); text-shadow:0 1px 5px rgba(0,0,0,.8); }
.radar-bay>p { margin:.55rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.45; }

.section { padding-top:clamp(4.5rem,9vw,7.8rem); }
.section-head { position:relative; }
.section-head::before { position:absolute; top:-1.15rem; left:0; width:2.2rem; height:2px; background:var(--coral); content:""; }
.section-kicker,.panel-kicker { color:var(--lake); }
.section h2 { color:var(--dusk); font-variation-settings:"opsz" 70,"SOFT" 60,"WONK" 1; }
.section-intro { color:var(--muted); }

.bottom-card { background:var(--lake-deep); }
.bottom-card .panel-kicker { color:#8ed6d2; }
.pending-reading strong { color:#f7c27c; font-family:var(--display); }
.chart-card { background:rgba(255,249,240,.84); box-shadow:none; border:1px solid var(--line); }
.legend span::before { background:var(--coral); }
.legend span:last-child::before { background:var(--lake); }
.chart-placeholder::after { border-color:rgba(23,111,115,.25); border-top-color:rgba(240,111,89,.58); }

.ice-panel { background:var(--cream); }
.ice-latest { position:relative; overflow:hidden; background:var(--dusk); }
.ice-latest::after { position:absolute; right:-4rem; bottom:-5rem; width:15rem; height:15rem; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 2rem rgba(255,255,255,.03),0 0 0 4rem rgba(255,255,255,.02); content:""; }
.ice-latest .panel-kicker { color:#f4bd77; }
.ice-date { color:#ff997b; font-family:var(--display); }
.ice-date span { color:rgba(255,245,232,.85); font-family:var(--sans); }
.ice-years { gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ice-years li { position:relative; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.ice-years li::after { position:absolute; right:.55rem; top:.55rem; width:.34rem; height:.34rem; border-radius:50%; background:var(--coral); content:""; }
.ice-years strong { color:var(--dusk); font-family:var(--display); }

.maine-signature { position:relative; display:grid; grid-template-columns:minmax(9rem,.42fr) 1fr; align-items:center; min-height:14rem; margin-top:clamp(3.2rem,7vw,5.8rem); overflow:hidden; border-radius:.45rem 2rem .45rem 2rem; color:var(--cream); background:var(--dusk); box-shadow:var(--shadow); }
.maine-signature-hit { position:absolute; inset:0; z-index:2; border-radius:inherit; }
.maine-signature-hit:focus-visible { outline:3px solid var(--sunrise); outline-offset:-5px; }
.maine-signature .maine-rhythm a,.maine-signature .around-link { position:relative; z-index:3; }
.maine-signature { transition:transform .2s ease,box-shadow .2s ease; }
.maine-signature:hover { transform:translateY(-2px); box-shadow:0 1.4rem 3.8rem rgba(19,29,30,.2); }
.maine-signature::after { position:absolute; right:-5rem; bottom:-8rem; width:19rem; height:19rem; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 2.8rem rgba(255,255,255,.025),0 0 0 5.6rem rgba(255,255,255,.018); content:""; pointer-events:none; }
.maine-map-large { position:relative; z-index:1; display:grid; place-items:center; align-self:stretch; min-height:14rem; border-right:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); }
.maine-outline-wrap { position:relative; width:6.4rem; height:10rem; }
.maine-map-large img { width:100%; height:100%; opacity:.72; filter:brightness(0) invert(1); object-fit:contain; }
.maine-map-large i { position:absolute; left:16.5%; top:61%; width:.62rem; height:.62rem; border:2px solid var(--cream); border-radius:50%; background:var(--coral); box-shadow:0 0 0 .25rem rgba(232,109,88,.18); font-style:normal; }
.maine-map-large i span { position:absolute; left:1rem; top:50%; width:max-content; color:var(--cream); font:800 .875rem var(--sans); letter-spacing:.05em; transform:translateY(-50%); text-transform:uppercase; }
.maine-signature-copy { position:relative; z-index:1; padding:2rem clamp(1.5rem,5vw,4rem); }.maine-signature-copy span { display:block; color:var(--sunrise); font-size:.875rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }.maine-signature-copy strong { display:block; max-width:35rem; margin-top:.45rem; font-family:var(--display); font-size:clamp(2rem,4.6vw,3.7rem); font-variation-settings:"opsz" 90,"SOFT" 40,"WONK" 1; font-weight:380; letter-spacing:-.045em; line-height:.88; }.maine-signature-copy p { margin:.85rem 0 0; color:rgba(255,245,232,.85); font-size:.875rem; }
.maine-signature-copy .maine-rhythm { display:flex; flex-wrap:wrap; gap:1rem; margin:1.25rem 0 .65rem; color:var(--cream); font-family:var(--display); font-size:clamp(1.15rem,2.4vw,1.65rem); font-variation-settings:"opsz" 40,"SOFT" 55,"WONK" 1; letter-spacing:.025em; line-height:1; text-transform:uppercase; }.maine-rhythm a { font-weight:520; text-decoration:none; transition:transform .18s ease,filter .18s ease; }.maine-rhythm a:hover { filter:brightness(1.2); transform:translateY(-2px); }.maine-rhythm a:nth-child(1) { color:#e6b965; }.maine-rhythm a:nth-child(2) { color:#55b8d1; }.maine-rhythm a:nth-child(3) { color:#fff8ed; }.maine-rhythm a:nth-child(4) { color:#ff8a6c; }.around-link { color:rgba(255,248,237,.85); font-size:.875rem; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.around-link:hover { color:var(--cream); }

.lake-poll { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr); align-items:center; gap:clamp(1.5rem,4vw,3.5rem); margin:0 0 1rem; padding:1.45rem 1.55rem 1.45rem 1.8rem; overflow:hidden; border:1px solid rgba(38,27,53,.1); background:linear-gradient(110deg,#fff9f0 0 46%,#edf4f0 100%); box-shadow:0 .9rem 2.4rem rgba(38,27,53,.09); }
.lake-poll::before { position:absolute; inset:0 auto 0 0; width:.38rem; background:linear-gradient(180deg,var(--lake) 0 50%,var(--coral) 50%); content:""; }
.lake-poll-copy h2 { margin:.18rem 0 .25rem; color:var(--dusk); font-family:var(--display); font-size:clamp(1.8rem,3vw,2.55rem); font-variation-settings:"opsz" 55,"SOFT" 55,"WONK" 1; font-weight:430; letter-spacing:-.035em; }.lake-poll-copy p:last-child { max-width:32rem; margin:0; color:var(--muted); font-size:.875rem; line-height:1.45; }
.lake-poll-action { padding:.7rem; border:1px solid rgba(38,27,53,.08); border-radius:1rem .25rem 1rem .25rem; background:rgba(255,255,255,.55); }
.lake-poll-buttons { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }.lake-poll-buttons button { min-height:3rem; padding:.72rem .85rem; border:1px solid transparent; border-radius:.8rem .2rem .8rem .2rem; cursor:pointer; font:850 .875rem var(--sans); letter-spacing:.04em; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }.lake-poll-buttons button:first-child { color:var(--cream); background:var(--lake-deep); }.lake-poll-buttons button:last-child { color:#fffaf2; background:var(--coral-deep); }.lake-poll-buttons button:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 .45rem 1rem rgba(38,27,53,.16); transform:translateY(-1px); }.lake-poll-buttons button:disabled { cursor:default; opacity:.58; }.lake-poll-buttons button.is-choice { border-color:var(--sunrise); box-shadow:0 0 0 2px rgba(248,199,122,.35); opacity:1; }
.lake-poll-results { display:grid; gap:.42rem; margin-top:.65rem; }.lake-poll-results[hidden] { display:none; }.lake-poll-results>div { display:grid; grid-template-columns:6.8rem 1fr 2.5rem; align-items:center; gap:.5rem; }.lake-poll-results span,.lake-poll-results strong { color:var(--muted); font-size:.875rem; font-weight:800; }.lake-poll-results strong { color:var(--dusk); text-align:right; }.lake-poll-results i { display:block; height:.35rem; overflow:hidden; border-radius:999px; background:rgba(38,27,53,.08); }.lake-poll-results b { display:block; width:0; height:100%; border-radius:inherit; background:var(--lake); transition:width .6s ease; }.lake-poll-results>div+div b { background:var(--coral); }
.lake-poll-status { margin:.55rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.4; }

.explore-doorway { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(18rem,.72fr); gap:0; margin-top:clamp(3.2rem,7vw,5.8rem); overflow:hidden; border:1px solid rgba(38,27,53,.12); border-radius:1.8rem .45rem 1.8rem .45rem; color:var(--dusk); background:#fff9f0; box-shadow:var(--shadow); }
.explore-doorway-copy { position:relative; z-index:1; align-self:center; padding:clamp(1.8rem,4vw,3.3rem); }.explore-doorway-copy::before { position:absolute; top:0; left:clamp(1.8rem,4vw,3.3rem); width:3rem; height:.22rem; background:var(--coral); content:""; }.explore-doorway .section-kicker { color:var(--lake-deep); }.explore-doorway h2 { max-width:44rem; margin:.45rem 0 .75rem; color:var(--dusk); font-family:var(--display); font-size:clamp(2rem,4.8vw,4rem); font-variation-settings:"opsz" 90,"SOFT" 45,"WONK" 1; font-weight:380; letter-spacing:-.045em; line-height:.92; }.explore-doorway-copy>p:last-of-type { max-width:43rem; margin:0; color:var(--muted); font-size:.875rem; line-height:1.55; }
.explore-doorway-link { display:inline-block; margin-top:1.25rem; padding:.85rem 1rem; border-radius:.8rem .2rem .8rem .2rem; color:var(--cream); background:var(--lake-deep); text-decoration:none; }.explore-doorway-link:hover { background:var(--dusk); }.explore-doorway-link span,.explore-doorway-link strong { display:block; }.explore-doorway-link span { color:rgba(255,245,232,.85); font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.explore-doorway-link strong { margin-top:.18rem; color:var(--sunrise); font-size:.875rem; }
.explore-doorway-image { position:relative; min-height:22rem; margin:0; overflow:hidden; background:var(--dusk); }.explore-doorway-image::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(25,16,37,.72)); content:""; }.explore-doorway-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.04); }.explore-doorway-image figcaption { position:absolute; z-index:1; right:1.2rem; bottom:1rem; left:1.2rem; color:var(--cream); font:750 .875rem var(--sans); letter-spacing:.04em; }.explore-doorway-image figcaption span { display:block; margin-top:.2rem; color:rgba(255,245,232,.85); font-size:.875rem; letter-spacing:.09em; text-transform:uppercase; }

.explore-note { border-left:3px solid var(--sunrise); border-radius:.25rem 1rem 1rem .25rem; background:rgba(255,249,240,.58); }
.explore-note h2 { color:var(--dusk); }

.site-footer { align-items:flex-end; color:var(--muted); }
.footer-signoff { color:var(--dusk); font-family:var(--display); font-size:1.15rem; }
.footer-signoff em { color:var(--coral-deep); font-style:normal; }

@media (max-width:52rem) {
  .hero { min-height:49rem; }
  .hero-content { align-content:center; padding-bottom:12rem; }
  .camera-label { bottom:7.4rem; }
  .dock-strip-inner { grid-template-columns:1fr 1fr; }
  .dock-item:nth-child(3) { display:none; }
  .dock-item:nth-child(2) { border-right:0; }
  .lake-poll { grid-template-columns:1fr; }
  .explore-doorway { grid-template-columns:1fr; }.explore-doorway-image { min-height:18rem; }
}

@media (max-width:38rem) {
  .preview-bar { font-size:.875rem; }
  .hero { min-height:max(48rem,100svh); background-image:var(--hero-mobile-image,var(--hero-desktop-image,url("lake-christopher-hero.jpg"))); background-position:center; }
  .nav,.hero-content,.dashboard,.site-footer,.dock-strip-inner { width:min(100% - 1.4rem,78rem); }
  .brand { font-size:.875rem; }
  .brand-mark { width:2.65rem; }
  h1 { font-size:clamp(3.2rem,18vw,5.1rem); }
  .hero-copy>p:last-child { max-width:26rem; }
  .camera-label { display:none; }
  .hero-content { position:absolute; inset:0; min-height:0; padding:8.5rem 0 6.8rem; align-content:end; }
  .dock-item { padding:.9rem .7rem; }
  .dock-item:first-child { padding-left:0; }
  .dock-item strong { font-size:.95rem; }
  .dock-item strong.hero-surface { font-size:1.3rem; }
  .dashboard { padding-top:1.2rem; }
  .live-camera-head,.live-camera-foot { align-items:flex-start; flex-direction:column; gap:.8rem; padding-inline:1.05rem; }
  .live-camera-head h2 { font-size:clamp(2rem,10vw,2.8rem); }
  .panel { border-radius:1.25rem .35rem 1.25rem .35rem; }
  .temperature { font-size:clamp(4.4rem,25vw,6rem); }
  .temp-panel { grid-template-columns:1fr; }
  .surface-context>.status-pill { align-self:flex-start; }
  .weather-panel { padding:1.35rem; }
  .weather-dock summary small { display:none; }
  .surface-history summary small { display:none; }
  .surface-chart-toolbar { align-items:flex-start; flex-direction:column; }.surface-chart-controls { width:100%; }.surface-chart-controls .surface-chart-reset { margin-left:auto; }.surface-chart-scale { align-items:flex-start; flex-direction:column; margin-left:2.4rem; }.surface-chart-scale span { text-align:left; }
  .surface-chart svg { height:16.5rem; }
  .surface-chart #surface-chart-y-axis text,.surface-chart #surface-chart-x-axis text { font-size:14px; }.surface-chart .surface-axis-title { font-size:11px!important; }
  .maine-signature { grid-template-columns:7.2rem 1fr; min-height:12rem; }.maine-map-large { min-height:12rem; }.maine-outline-wrap { width:4.9rem; height:8rem; }.maine-map-large i span { left:.82rem; font-size:.875rem; letter-spacing:.035em; }.maine-signature-copy { padding:1.5rem 1.15rem; }.maine-signature-copy strong { font-size:clamp(1.85rem,9vw,2.8rem); }.maine-signature-copy .maine-rhythm { gap:.55rem; font-size:clamp(1rem,5vw,1.3rem); }
  .lake-poll { padding:1.2rem 1rem 1.2rem 1.3rem; }.lake-poll-action { padding:.55rem; }.lake-poll-buttons { grid-template-columns:1fr; }.lake-poll-results>div { grid-template-columns:6.5rem 1fr 2.3rem; }
  .explore-doorway-copy { padding:1.75rem 1.35rem 1.45rem; }.explore-doorway-copy::before { left:1.35rem; }.explore-doorway h2 { font-size:clamp(2rem,10vw,2.8rem); }.explore-doorway-image { min-height:14rem; }
  .radar-head { align-items:flex-start; flex-direction:column; gap:.4rem; }.radar-frame { min-height:8rem; }
  .site-footer { align-items:flex-start; }
}

@media (prefers-contrast:more) {
  .hero::before { background:linear-gradient(180deg,rgba(18,14,24,.94),rgba(18,14,24,.5) 45%,rgba(18,14,24,.98)); }
  .hero-copy>p:last-child,.camera-label span { color:var(--cream); }
}

@keyframes wind-whisper { 0%,100% { translate:0 0; } 50% { translate:.08rem -.12rem; } }
@media (prefers-reduced-motion:reduce) { .wind-hour i { animation:none; } }
/* Full lake-record doorway */
.surface-history-deep{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.9rem 0 0;padding:.82rem 1rem;border:1px solid rgba(255,248,239,.14);border-radius:.8rem .2rem .8rem .2rem;color:var(--cream);background:rgba(255,248,239,.045);font-size:.875rem;font-weight:700;letter-spacing:.04em;text-decoration:none;text-transform:uppercase;transition:border-color .2s ease,background .2s ease,transform .2s ease}.surface-history-deep:hover{border-color:var(--thermal);background:rgba(255,248,239,.075);transform:translateY(-1px)}.surface-history-deep span{color:var(--thermal);font-size:1.1rem}