:root{
  --ground:#f6f4ee; --panel:#ffffff; --ink:#20262c; --muted:#5d6a72; --granite:#8b949b;
  --line:#e2ddd1; --line2:#d3cdbf;
  --water:#2f7bb5; --deep:#123f70; --sky:#5aa0d8; --gold:#c1873a; --swim:#0f9ba0;
  --barbg:#11171c; --bartx:#e9eef2; --barmut:#8ea1ad;
  --dataframe:#161d23;
  --serif:"Spectral",Georgia,serif; --disp:"Fraunces",Georgia,serif; --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
  font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0); }
img{max-width:100%;height:auto;display:block}
a{color:var(--water);text-decoration:none;border-bottom:1px solid rgba(47,123,181,.3)}
a:hover{border-bottom-color:var(--water)}

/* ---- mission bar ---- */
.missionbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  background:var(--barbg);color:var(--bartx);padding:9px clamp(14px,3vw,28px);
  border-bottom:1px solid #232c33;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.mb-title{font-family:var(--mono);font-weight:500;letter-spacing:.32em;font-size:13px;color:#fff}
.mb-clock{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--barmut);
  display:flex;gap:9px;align-items:baseline;text-align:right}
.mb-clock #mb-day{color:var(--bartx);font-weight:500;letter-spacing:.05em}
.mb-seg{color:var(--barmut)}
.mb-elev{font-family:var(--mono);font-size:13px;color:var(--sky);min-width:74px;text-align:right;
  font-variant-numeric:tabular-nums}
.mb-elev #mb-elevval{font-size:17px;color:#dcebf6}
.mb-unit{color:var(--barmut);font-size:11px;margin-left:2px}
.missionbar{cursor:pointer}                                    /* the whole bar opens the map */
.mb-loc{font-family:var(--mono);font-size:12px;color:var(--barmut);white-space:nowrap;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.mb-loc #mb-locval{color:var(--bartx)}
.mb-map{font-family:var(--mono);font-size:10.5px;color:var(--barmut);border:1px solid #33404a;
  border-radius:5px;padding:3px 8px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:color .15s,border-color .15s}
.missionbar:hover .mb-map,.missionbar:focus-visible .mb-map{color:var(--sky);border-color:var(--sky)}
.missionbar:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}

/* full-trip location map overlay (tap the mission bar) */
.mapbox{position:fixed;inset:0;background:rgba(10,14,18,.95);z-index:70;display:none;
  align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 18px}
.mapbox.open{display:flex}
.mapbox-frame{position:relative;max-width:96vw;max-height:88vh}
.mapbox-frame img{display:block;max-width:96vw;max-height:88vh;width:auto;height:auto;border-radius:6px;
  border:1px solid #2a343c;box-shadow:0 10px 44px rgba(0,0,0,.6)}
.mapdot{position:absolute;width:16px;height:16px;border-radius:50%;background:#ff2f38;
  border:2.5px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 7px rgba(0,0,0,.6);
  animation:mappulse 1.7s ease-out infinite}
@keyframes mappulse{0%{box-shadow:0 0 0 2px rgba(255,47,56,.5),0 1px 7px rgba(0,0,0,.6)}
  75%,100%{box-shadow:0 0 0 17px rgba(255,47,56,0),0 1px 7px rgba(0,0,0,.6)}}
.maplabel{position:absolute;left:11px;bottom:11px;background:rgba(9,13,17,.85);color:#eaf1f6;
  font-family:var(--mono);font-size:12px;line-height:1.5;padding:7px 11px;border-radius:6px;
  border:1px solid #2a343c;max-width:75%}
.maplabel b{color:#fff;font-weight:600}
.mapbox-x{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;color:#fff;background:#232c33;
  border:1px solid #3a464e;border-radius:6px;padding:7px 12px;font-family:var(--mono);font-size:13px;
  cursor:pointer;z-index:71}
@media(prefers-reduced-motion:reduce){ .mapdot{animation:none} }
.progressbar{position:sticky;top:0;z-index:39;height:2px;background:transparent;margin-top:-2px}
#progress{height:2px;width:0;background:linear-gradient(90deg,var(--sky),var(--gold))}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,rgba(11,16,22,.34) 0%,rgba(11,16,22,.5) 45%,rgba(11,16,22,.86) 100%),
  url("assets/doc/hero.jpg") center 42%/cover no-repeat #0d1319;
  color:#eaf0f5;padding:clamp(72px,15vw,150px) 20px clamp(48px,8vw,90px);
  display:flex;align-items:flex-end;min-height:74vh}
.hero-inner{max-width:900px;margin:0 auto;width:100%}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.5)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin:0 0 18px}
.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(64px,15vw,150px);line-height:.92;
  margin:0;letter-spacing:-.02em;color:#fff}
.hero-sub{font-size:clamp(19px,2.6vw,25px);color:#c6d2dc;max-width:30ch;margin:22px 0 0;line-height:1.4}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin:40px 0 0}
.hero-stats>div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--disp);font-size:34px;font-weight:600;color:#fff;line-height:1}
.hero-stats span{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--barmut);
  text-transform:uppercase;margin-top:7px}
.scrolltip{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--sky);
  margin:52px 0 0;text-transform:uppercase}

/* ---- layout: reading column ---- */
main{overflow:clip}
.block{max-width:680px;margin:0 auto;padding:0 20px}
.block.wide{max-width:940px}
.block p{margin:0 0 1.25em}
.block h3{font-family:var(--disp);font-weight:600;font-size:27px;letter-spacing:-.01em;
  margin:2em 0 .5em;color:var(--ink)}
.tldr{font-size:20px;background:#efece3;border-left:3px solid var(--gold);padding:16px 20px;
  border-radius:0 8px 8px 0}
.beat{font-family:var(--disp);font-style:italic;font-size:24px;color:var(--deep);text-align:center;
  margin:1.6em 0}
.cap-note{font-size:16px;color:var(--muted);font-style:italic}
.block i{font-style:italic}

/* Edward — right-justified companion voice */
.edward, .edward-slot{margin:1.4em 0 1.4em auto;max-width:82%;text-align:right;
  font-family:var(--serif);color:#2a4a63}
.edward{border-right:3px solid var(--sky);padding:6px 16px 6px 0;background:linear-gradient(90deg,transparent,#eaf1f7)}
.edward::before{content:"Edward";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky);margin-bottom:4px}
.edward-slot{border:1px dashed var(--sky);border-radius:8px;padding:10px 14px;color:#7c93a4;
  font-family:var(--mono);font-size:12.5px;background:#eef4f9;opacity:.75}
.edward-slot::before{content:"Edward — ";color:var(--sky)}

/* ---- chapters & day headers ---- */
.chapter{max-width:940px;margin:0 auto;padding:clamp(46px,7vw,84px) 20px 0}
.chap-h{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;
  margin:0;color:var(--ink);position:relative;padding-bottom:14px}
.chap-h::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--gold)}
.chap-lede{max-width:680px;font-size:20px;color:var(--muted);margin:18px 0 0}
.dayhead{padding-top:clamp(40px,6vw,72px)}
.dh-inner{border-top:1px solid var(--line2);padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.dh-dow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--water);flex-basis:100%}
.dayhead h2{font-family:var(--disp);font-weight:600;font-size:clamp(34px,6vw,54px);margin:2px 0 0;
  letter-spacing:-.02em}
.dh-stats{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;
  color:var(--muted);align-items:baseline}
.dh-stats span:nth-child(1){color:var(--gold)} .dh-stats span:nth-child(2){color:var(--water)}
.dh-stats span:last-child, .dh-stats span:last-child{color:var(--granite);font-family:var(--serif);
  font-size:15px;font-style:italic}
.dayhead.marquee .dh-inner{border-top-color:var(--gold)}
.dayhead.marquee .dh-dow{color:var(--gold)}

/* ---- figures ---- */
.fig{max-width:680px;margin:1.8em auto;}
.block.wide .fig, .fig.full{max-width:940px}
.fig img{width:100%;border-radius:8px;border:1px solid var(--line2);background:#fff;cursor:zoom-in}
.fig figcaption{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.45}
.fig .lbl{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--deep);padding:2px 8px;border-radius:3px;
  margin-right:8px;vertical-align:1px}
.fig.data img{border:1px solid var(--dataframe);box-shadow:0 2px 18px rgba(18,29,45,.12)}
.fig.portrait{max-width:400px}                                 /* tall images shouldn't dominate the column */
/* Wikipedia-style infobox, floated beside the opening data text */
.fig.wikibox{float:right;width:262px;max-width:42%;margin:6px 0 14px 26px}
.fig.wikibox img{border:1px solid var(--line2);border-radius:4px;box-shadow:0 2px 12px rgba(18,29,45,.14)}
.fig.wikibox figcaption{font-size:13px;margin-top:8px;text-align:center}
@media(max-width:720px){ .fig.wikibox{float:none;width:210px;max-width:72%;margin:0 auto 18px} }

/* photos */
.photo-anchor{margin:1.6em auto;max-width:680px}
.photo-anchor.firstview{max-width:940px}
.photo{margin:0}
.photo img{width:100%;border-radius:8px;cursor:zoom-in;box-shadow:0 3px 20px rgba(20,26,32,.14)}
.photo .pcap{font-family:var(--mono);font-size:11.5px;color:var(--granite);margin-top:7px;
  display:flex;justify-content:space-between;letter-spacing:.03em}
.photo .pcap .who{color:var(--water)}
/* chronological photo stream per day — Casey left, Edward right, each with a dev caption box */
.photostream{max-width:940px;margin:1.6em auto 0;padding:0 20px;display:flex;flex-direction:column;gap:1.7em}
.photostream .photo{max-width:60%}
.photostream .photo.left{align-self:flex-start}
.photostream .photo.right{align-self:flex-end;text-align:right}
.photo .pcap{display:flex;gap:10px;align-items:baseline;margin-top:6px}
.photo.right .pcap{justify-content:flex-end}
.photo .pcap time{font-family:var(--mono);font-size:10.5px;color:var(--granite);font-variant-numeric:tabular-nums}
.photo.right .pcap .who{color:var(--sky)}
.photo.approx img{outline:2px dashed rgba(90,160,216,.55);outline-offset:2px}
.capbox{display:flex;gap:7px;align-items:flex-start;margin-top:6px}
.capbox textarea{flex:1;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink);
  background:#fbfaf6;border:1px solid var(--line2);border-radius:6px;padding:5px 8px;resize:vertical;min-height:30px}
.capbox textarea:focus{outline:none;border-color:var(--water);background:#fff}
.capstat{font-family:var(--mono);font-size:10px;color:var(--swim);min-width:40px;padding-top:8px}
.photo .photocap{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);margin-top:8px}
.photo.right .photocap{color:#33536e;font-style:italic}   /* Edward's captions */
.gear-photos{display:flex;flex-wrap:wrap;gap:14px;margin:1.3em 0}
.gear-photos .photo{flex:1 1 220px;max-width:48%;margin:0}
@media(max-width:720px){ .photostream .photo{max-width:90%} .gear-photos .photo{max-width:100%} }

.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-grid .photo img{border-radius:6px}
.ph-empty{border:1px dashed var(--line2);border-radius:8px;min-height:56px;display:flex;
  align-items:center;justify-content:center;color:var(--granite);font-family:var(--mono);
  font-size:11.5px;background:#f0ede4;opacity:.6}

/* ---- methods fold ---- */
.methods{max-width:940px;margin:2.2em auto;border:1px solid var(--line2);border-radius:12px;
  background:#fbfaf6;overflow:hidden}
.methods>summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;flex-direction:column;
  gap:3px;background:#f1eee6}
.methods>summary::-webkit-details-marker{display:none}
.m-title{font-family:var(--disp);font-weight:600;font-size:22px}
.m-hint{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.03em}
.methods[open]>summary .m-hint::after{content:" · click to collapse"}
.methods-body{padding:6px 24px 24px;max-width:720px;margin:0 auto}
.methods-body h4{font-family:var(--disp);font-weight:600;font-size:18px;margin:1.4em 0 .3em;color:var(--deep)}
.methods-body p{font-size:17px;margin:0 0 1em}
.dl-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 8px}
.dl{font-family:var(--mono);font-size:13px;background:var(--deep);color:#fff;padding:10px 16px;
  border-radius:7px;border:none}
.dl:hover{background:var(--water)}
.dl-note{font-family:var(--mono);font-size:12px;color:var(--granite)}
.gearlist{margin:1.2em 0;border:1px solid var(--line2);border-radius:10px;background:#fbfaf6}
.gearlist>summary{cursor:pointer;padding:12px 16px;font-family:var(--mono);font-size:13px;
  letter-spacing:.05em;color:var(--water)}
.gear{margin:0;padding:6px 22px 14px 34px;font-size:16px}
.gear li{margin:.4em 0;color:var(--ink)}

/* ---- vitals ---- */
.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:1em 0}
.vital{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:18px 16px;
  box-shadow:0 1px 8px rgba(20,26,32,.04)}
.vital b{font-family:var(--disp);font-weight:600;font-size:30px;display:block;line-height:1}
.vital span{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:8px;display:block;
  letter-spacing:.02em}
.vital.deep b{color:var(--deep)}
.signoff{font-family:var(--disp);font-style:italic;font-size:20px;color:var(--muted);
  text-align:center;margin:2.4em 0 3em}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;background:rgba(10,14,18,.94);z-index:60;display:none;
  align-items:center;justify-content:center;gap:6px;padding:20px}
.lb.open{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;min-width:0}
.lb-fig img{max-width:100%;max-height:80vh;border-radius:6px;width:auto;cursor:pointer}
.lb-cap{color:#e8e3d9;font-family:var(--serif);font-size:14px;line-height:1.55;max-width:720px;
  text-align:center;padding:0 6px}
.lb-cap .lbl{color:var(--gold)}
.lb-cap .lb-attr{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:#9aa4ac}
.lb-nav{flex:0 0 auto;width:46px;height:46px;border-radius:999px;background:rgba(35,44,51,.72);
  color:#fff;border:1px solid #3a464e;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-nav:hover{background:rgba(52,64,72,.95)}
.lb-x{position:fixed;top:14px;right:18px;z-index:2;color:#fff;background:#232c33;border:1px solid #3a464e;
  border-radius:999px;padding:7px 14px;font-family:var(--mono);font-size:12px;cursor:pointer}
@media(max-width:640px){.lb-nav{width:38px;height:38px;font-size:22px}.lb-fig img{max-height:72vh}}

/* ---- dev feedback widget ---- */
.fb{position:fixed;right:16px;bottom:16px;z-index:70;font-family:var(--mono)}
.fb-toggle{background:var(--gold);color:#fff;border:none;border-radius:999px;padding:11px 17px;
  font-size:13px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.fb-panel{position:absolute;right:0;bottom:52px;width:320px;background:#fff;border:1px solid var(--line2);
  border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.22);padding:14px}
.fb-head{font-size:13px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between}
.fb-head span{color:var(--granite);font-size:11px}
.fb-where{font-size:11.5px;color:var(--water);margin:6px 0}
.fb-panel textarea{width:100%;height:80px;border:1px solid var(--line2);border-radius:8px;
  padding:9px;font-family:var(--serif);font-size:15px;resize:vertical}
.fb-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.fb-row button{background:var(--deep);color:#fff;border:none;border-radius:7px;padding:8px 15px;
  font-family:var(--mono);font-size:13px;cursor:pointer}
#fb-status{font-size:11.5px;color:var(--swim)}

@media (max-width:720px){
  body{font-size:17.5px}
  .vitals{grid-template-columns:repeat(2,1fr)}
  .dh-stats{margin-left:0;flex-basis:100%}
  .fb-panel{width:min(320px,86vw)}
  .edward,.edward-slot{max-width:92%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- left time-ruler (desktop ≥1360) ----
   #rail is sized to the whole document (JS). Time↔Y is a linear wrap anchored on the
   Sep-8 section (Tue evening) and the Data section (Sunday), extrapolated past both ends.
   Strict 5-minute graduations; red = the minute-accurate Garmin recordings, each day
   labelled with its route. A scroll-indicator EKG line (.rail-now) tracks reading
   progress and beats red over the red pushes; timed photos dog-leg back to the ruler. */
.rail{position:absolute;left:0;top:0;width:210px;z-index:5;pointer-events:none;display:none;
  background:linear-gradient(90deg,rgba(246,244,238,.92) 46%,rgba(246,244,238,0))}
@media(min-width:1360px){.rail,.rail-now,#tl-links{display:block}}

.ruler-spine{position:absolute;left:84px;top:0;bottom:0;width:2px;background:#c7ced3}
#rail-red{position:absolute;inset:0}
#rail-red i{position:absolute;left:83px;width:4px;border-radius:2px;background:#e23b40;
  box-shadow:0 0 5px rgba(226,59,64,.4)}

/* graduated ticks: 5-min minor → hour major, extending LEFT from the spine (x84) */
#rail-ticks .rt{position:absolute;height:1px;background:#d3d9dd;transform:translateY(-50%)}
#rail-ticks .rt.m5{left:80px;width:4px;background:#dde2e5}                /* 5 min */
#rail-ticks .rt.q{left:78px;width:6px;background:#cdd4d8}                 /* 15 / 45 min */
#rail-ticks .rt.h30{left:74px;width:10px;background:#b4bcc1}             /* 30 min */
#rail-ticks .rt.hr{left:70px;width:14px;height:1.4px;background:#8f989e}  /* on the hour */
#rail-ticks .rt[data-lbl]::after{content:attr(data-lbl);position:absolute;right:16px;top:50%;
  transform:translateY(-50%);font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap}
#rail-ticks .rt.hr[data-lbl]::after{font-size:9.5px;color:var(--muted)}
#rail-ticks .rt.h30[data-lbl]::after{font-size:8px;color:var(--granite)}
/* weekday majors, left of the spine with a gold connector tick */
#rail-days .rday{position:absolute;right:calc(100% - 64px);transform:translateY(-50%);text-align:right;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
#rail-days .rday small{display:block;font-weight:400;font-size:9px;color:var(--granite);letter-spacing:.03em}
#rail-days .rday::after{content:"";position:absolute;right:-15px;top:50%;width:13px;height:2px;
  background:var(--gold);transform:translateY(-50%)}
/* one route label per day's push, just right of the spine at its first recording */
#rail-pushes .plabel{position:absolute;left:92px;transform:translateY(-11px);white-space:nowrap;
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.02em;color:#c0343a}

/* photo dog-leg connectors back to the ruler (display handled by the media queries below) */
#tl-links{position:absolute;left:0;top:0;z-index:6;pointer-events:none;overflow:visible}
.tl-link{fill:none;stroke:#b9c1c7;stroke-width:1;opacity:.5}
.tl-dot{fill:#9aa4ab;opacity:.7}

/* scroll-indicator EKG line — screen position set in JS (top of view → bottom as you read) */
.rail-now{position:fixed;left:82px;top:0;z-index:31;pointer-events:none}
#ekg{display:block;position:relative;z-index:1}
/* always-visible slider handle on the spine (the EKG beat draws over it) */
.now-handle{position:absolute;left:3px;top:23px;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:#6f7b84;border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(111,123,132,.25),0 1px 4px rgba(0,0,0,.35);z-index:2}

/* live route map — a single larger tile that rides down with the scroll indicator,
   sitting just below the EKG line and right of the ruler + photo-connector channel (x120);
   shows whichever red push the reading line is currently inside; a dot rides the route */
.segmap{position:fixed;left:132px;z-index:8;pointer-events:auto;cursor:zoom-in;border-radius:7px;overflow:hidden;
  background:#e9e6dd;box-shadow:0 4px 18px rgba(20,26,32,.4),0 0 0 1px rgba(255,255,255,.5);
  opacity:0;transition:opacity .3s ease,box-shadow .3s ease,width .22s ease,height .22s ease;will-change:top}
.segmap:not(.active){pointer-events:none}          /* hidden tile shouldn't catch gutter clicks */
.segmap.active{opacity:1}
.segmap.active:not(.resting){box-shadow:0 4px 18px rgba(20,26,32,.42),0 0 0 2px rgba(226,59,64,.6)}
.segmap.active.resting{opacity:.82}
.segmap.expanded{cursor:zoom-out;box-shadow:0 10px 34px rgba(20,26,32,.5),0 0 0 2px rgba(226,59,64,.7)}
.segmap.expanded .seglbl{font-size:11px;padding:16px 12px 8px}
.segmap img{display:block;width:100%;height:100%;object-fit:cover}
.segmap .seglbl{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:8.5px;
  font-weight:600;letter-spacing:.03em;color:#fff;padding:13px 9px 5px;line-height:1.2;
  background:linear-gradient(transparent,rgba(8,12,16,.8));text-shadow:0 1px 2px rgba(0,0,0,.55)}
.segdot{position:absolute;width:11px;height:11px;border-radius:50%;background:#ff2f38;border:2px solid #fff;
  box-shadow:0 0 8px rgba(255,47,56,.85);transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}
.segmap.active .segdot{opacity:1}
/* paddle survey: measured-depth readout + transect-dip callouts on the pop-out map */
.segdepth{position:absolute;left:7px;top:7px;z-index:2;font-family:var(--mono);font-weight:700;
  font-size:12px;color:#fff;background:rgba(12,26,38,.72);padding:3px 7px;border-radius:5px;
  letter-spacing:.02em;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.segdepth::before{content:"depth ";font-weight:400;opacity:.7;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.segdepth.show{opacity:1}
.segdepth.lim{color:#ffd05a}
.segmap.expanded .segdepth{font-size:15px;padding:5px 10px}
.segcry{position:absolute;left:0;right:0;top:38%;z-index:3;text-align:center;pointer-events:none;
  font-family:var(--disp);font-style:italic;font-weight:700;font-size:22px;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9);opacity:0;transform:scale(.7);
  transition:opacity .18s ease,transform .18s ease}
.segcry.show{opacity:1;transform:scale(1)}
.segmap.expanded .segcry{font-size:46px}

/* per-day HR ribbon — mobile only (desktop hides it) */
.dayhr{display:none}

/* ---- mobile / tablet (<1360px): left rail removed; each day gets a HR ribbon ---- */
@media(max-width:1359px){
  .rail,.rail-now,#tl-links{display:none!important}
  .dayhr{display:block;max-width:680px;margin:16px auto 4px;padding:0 20px}
  .dayhr canvas{display:block;width:100%;border-radius:4px;background:rgba(0,0,0,.015)}
  .dayhr-cap{display:block;margin-top:5px;font-family:var(--mono);font-size:9px;
    letter-spacing:.04em;color:var(--granite)}
}
@media(max-width:600px){
  .mb-elev,.mb-seg{display:none}
  .mb-clock{font-size:11px} .mb-loc{font-size:10px} .mb-map{font-size:9px;padding:3px 6px}
  .missionbar{gap:8px;padding-left:12px;padding-right:12px} .mb-title{font-size:11px;letter-spacing:.14em}
}
@media(max-width:400px){ .mb-title{display:none} .mb-map span{display:none} }  /* keep clock + coords + map icon */

/* interactive 3D lake viewer */
.lake3d{position:relative;width:100%;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  background:#0c1a26;border:1px solid var(--dataframe);cursor:grab;touch-action:none}
.lake3d.ready:active{cursor:grabbing}
.lake3d canvas{display:block;width:100%;height:100%}
.lake3d-hint{position:absolute;left:11px;bottom:10px;font-family:var(--mono);font-size:10px;
  color:rgba(255,255,255,.55);letter-spacing:.04em;pointer-events:none}
.lake3d-legend{position:absolute;right:44px;top:10px;font-family:var(--mono);font-size:10px;
  color:rgba(255,255,255,.7);text-align:right;line-height:1.55;pointer-events:none}
.lake3d-legend b{color:#e23b40}
.lake3d.noweb{display:flex;align-items:center;justify-content:center}
.lake3d.noweb .lake3d-hint,.lake3d.noweb .lake3d-legend{display:none}
/* shared full-screen toggle for the 3D panes */
.v3d-fs{position:absolute;top:8px;right:8px;z-index:6;width:28px;height:28px;padding:0;border:none;cursor:pointer;
  border-radius:6px;background:rgba(12,26,38,.55);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.v3d-fs:hover{background:rgba(12,26,38,.85)}
.lake3d.noweb .v3d-fs,.obj3d.noweb .v3d-fs{display:none}
.lake3d:fullscreen,.obj3d:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}
.lake3d.noweb::after{content:"3D view needs WebGL — see the reconstruction above";
  color:#8a949c;font-family:var(--mono);font-size:12px;text-align:center;padding:0 16px}

/* three future-objective relief models */
.obj3d-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0 6px}
.obj3d{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0c1a26;
  border:1px solid var(--dataframe);cursor:grab;touch-action:none}
@media(max-width:760px){.obj3d{aspect-ratio:4/3}}
.obj3d.ready:active{cursor:grabbing}
.obj3d canvas{display:block;width:100%;height:100%}
.obj3d-title{position:absolute;left:10px;top:9px;z-index:3;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;color:#fff;background:rgba(12,26,38,.5);padding:3px 7px;border-radius:4px;pointer-events:none}
.obj3d-hint{position:absolute;left:10px;bottom:9px;z-index:3;font-family:var(--mono);font-size:9px;
  color:rgba(255,255,255,.5);letter-spacing:.03em;pointer-events:none}
.obj3d-labels{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.obj3d-lab{position:absolute;transform:translate(-50%,-150%);white-space:nowrap;font-family:var(--mono);
  font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.95);pointer-events:none}
.obj3d-lab::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:4px;margin:1px 0 0 -2px;
  background:#fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.85)}
.obj3d-lab.spot{color:#ffd98a}
.obj3d-lab.spot::after{background:#ffd98a}
.obj3d.noweb{display:flex;align-items:center;justify-content:center}
.obj3d.noweb .obj3d-title,.obj3d.noweb .obj3d-hint{display:none}
.obj3d.noweb::after{content:"3D needs WebGL";color:#8a949c;font-family:var(--mono);font-size:12px}
.slope-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:2px 0 8px;
  font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.02em}
.slope-key span{text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.slope-key i{display:inline-block;width:15px;height:10px;border-radius:2px;margin-left:5px;vertical-align:middle}
.slope-key b{font-weight:400;font-style:italic;margin-left:2px}