/* Kilimanjaro: Lemosho in seven days
   Field survey sheet: journal typography on a topographic sheet. */

:root{
  /* Base identity: forest green on green-tinted paper. Each climate zone
     overrides these, so the page changes color as the climb changes habitat.
     --accent is decorative and follows the zone. --alert never moves: it is
     reserved for the summit and the blood-oxygen emergency, so red on this
     page always means one of those two things. */
  --paper:#e9efe1;
  --sheet:#f1f5ea;
  --ink:#1e2119;
  --ink-soft:#58604f;
  --ink-faint:#8b9382;
  --rule:#bfcbb1;
  --rule-hard:#1e2119;

  --accent:#3a5a32;
  --alert:#8c3a2b;
  --zone:#3f5c37;
  --blue:#3d6076;

  --z-forest:#3f5c37;
  --z-heather:#5f7a55;
  --z-moor:#9a8f5f;
  --z-scree:#a68a6d;
  --z-arctic:#5b7f96;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Source Serif Pro",Georgia,serif;
  --mono:"SF Mono",ui-monospace,"IBM Plex Mono","Roboto Mono",Menlo,monospace;
  --maxw:1160px;
}

/* ── climate zone palettes ──────────────────────────────────────
   Applied to a day's opener and its sheet, and mirrored onto the page
   background as you scroll so the whole thing moves with you. */
[data-zone="rainforest"]{
  --paper:#e7eddd; --sheet:#eff3e8; --rule:#bccbae; --accent:#3a5a32; --zone:#3f5c37;
}
[data-zone="heather"]{
  --paper:#eaeedd; --sheet:#f1f4e9; --rule:#c2ccab; --accent:#47603c; --zone:#5f7a55;
}
[data-zone="moorland"]{
  --paper:#efecdb; --sheet:#f5f2e6; --rule:#ccc5a4; --accent:#6a6733; --zone:#9a8f5f;
}
[data-zone="desert"]{
  --paper:#f2e9d9; --sheet:#f7f0e4; --rule:#d3c1a1; --accent:#8a5630; --zone:#a68a6d;
}
[data-zone="arctic"]{
  --paper:#e6ecf1; --sheet:#eef2f6; --rule:#bac6d0; --accent:#2e576e; --zone:#5b7f96;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--live-paper, var(--paper)); color:var(--ink);
  transition:background-color .7s ease;
  font-family:var(--serif); font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3{font-weight:600; line-height:1.02; letter-spacing:-.018em; margin:0}

/* contour field behind everything */
.topo-bg{position:fixed; inset:0; z-index:-1; opacity:.4; pointer-events:none}
.topo-bg path{stroke:var(--live-rule, var(--rule)); transition:stroke .7s ease}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}

/* ── monospace label, used everywhere ───────────────────────── */
.mono, .eyebrow, .leg, .head-meta, .panel h3, .logbook th,
.plate figcaption, .daytick, .stamp, .collar-top, .key div{
  font-family:var(--mono);
}
.eyebrow{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; font-weight:400;
}
.section-note{max-width:62ch; margin:14px 0 0; color:var(--ink-soft)}

/* ── unit toggle ────────────────────────────────────────────── */
.unit-toggle{
  position:fixed; top:16px; right:16px; z-index:60; display:flex;
  border:1.5px solid var(--rule-hard); background:var(--live-sheet, var(--sheet));
  box-shadow:2px 2px 0 rgba(34,32,27,.16);
}
.unit-toggle button{
  border:0; background:none; color:var(--ink-soft); cursor:pointer;
  font:400 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  padding:8px 13px; transition:.15s;
}
.unit-toggle button+button{border-left:1px solid var(--rule)}
.unit-toggle button.on{background:var(--rule-hard); color:var(--paper)}

/* ── map collar / masthead ──────────────────────────────────── */
.collar{
  border:1.5px solid var(--rule-hard); max-width:var(--maxw);
  margin:26px auto 0; background:var(--sheet);
}
.collar-top{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:9px 18px; border-bottom:1px solid var(--rule-hard);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.collar-body{padding:clamp(34px,5vw,58px) clamp(22px,4vw,44px) 34px}
.hero h1{
  font-size:clamp(48px,10vw,124px); line-height:.9; letter-spacing:-.032em; margin:0;
}
.hero h1 .sub{
  display:block; font-family:var(--mono); font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  margin-top:22px; font-weight:400; letter-spacing:.3em;
}
.lede{
  max-width:52ch; font-size:clamp(17px,1.9vw,20.5px); margin:26px 0 0;
}
.lede::first-letter{
  float:left; font-size:56px; line-height:.78; padding:6px 11px 0 0; color:var(--accent);
}

/* headline figures */
.rail{
  display:grid; grid-template-columns:repeat(5,1fr); margin-top:34px;
  border-top:1px solid var(--rule-hard); border-bottom:1px solid var(--rule-hard);
}
.rail div{padding:15px 14px 15px 0; border-right:1px solid var(--rule)}
.rail div:last-child{border-right:0}
.rail b{display:block; font-size:clamp(21px,2.6vw,29px); font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums}
.rail span{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:8px}
.rail .hot b{color:var(--accent)}

/* climate key */
.key{display:flex; margin-top:30px; border:1px solid var(--rule-hard)}
.key div{
  flex:1; padding:9px 6px; text-align:center; color:#fff;
  font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
}

.scroll-cue{
  display:inline-block; margin-top:26px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.scroll-cue:hover{color:var(--accent); border-color:var(--accent)}

/* ── generic sheet panel ────────────────────────────────────── */
.sheet-block{
  border:1.5px solid var(--rule-hard); background:var(--sheet);
  margin:26px auto; max-width:var(--maxw);
  transition:background-color .7s ease, border-color .7s ease;
}
.sheet-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:11px 18px; border-bottom:1px solid var(--rule-hard);
}
.stamp{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  border:1.5px solid var(--accent); padding:4px 10px;
}
.head-meta, .head-zone{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.head-zone{margin-left:auto}
.sheet-inner{padding:clamp(26px,3.4vw,42px)}
.sheet-block h2{font-size:clamp(27px,3.6vw,40px); margin:0 0 6px}

/* ── charts ─────────────────────────────────────────────────── */
.chart-holder{overflow-x:auto; overflow-y:hidden; position:relative; margin-top:26px}
#profile-chart{min-width:940px}
#oxygen-chart{min-width:720px}
.chart-holder svg{width:100%; height:auto; display:block; overflow:visible}

.ax-line{stroke:var(--rule); stroke-width:.9}
.ax-label,.pt-elev,.daytick,.zone-label,.band-label,.ox-val,.ox-crit,.pt-label{font-family:var(--mono)}
.ax-label{fill:var(--ink-faint); font-size:9px}
.daytick{fill:var(--ink-faint); font-size:8.5px; letter-spacing:.16em}
.band-summit{fill:rgba(140,58,43,.09)}
.band-label{fill:var(--alert); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase}
.track{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.track-fill{fill:url(#hatch)}
.pt{cursor:pointer}
.pt circle{transition:r .15s}
.pt:hover circle{r:7}
.pt-label{fill:var(--ink); font-size:9.5px; font-weight:600; pointer-events:none}
.pt-elev{fill:var(--ink-soft); font-size:8.5px; font-variant-numeric:tabular-nums; pointer-events:none}
.zone-label{fill:var(--ink-soft); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase}
.ox-val{fill:var(--ink); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.ox-crit{fill:var(--alert); font-size:10px; font-weight:700}
.ox-pt{cursor:pointer}
.ox-pt circle{transition:r .15s}
.ox-pt:hover circle{r:8}

.chart-tip{
  position:absolute; z-index:40; pointer-events:none; opacity:0;
  transform:translate(-50%,-118%); transition:opacity .12s;
  background:var(--sheet); border:1.5px solid var(--rule-hard);
  padding:9px 12px; min-width:170px; max-width:250px;
  box-shadow:3px 3px 0 rgba(34,32,27,.18);
}
.chart-tip.on{opacity:1}
.chart-tip b{display:block; font-size:14px; margin-bottom:2px}
.chart-tip .tip-el{font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent)}
.chart-tip p{margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink-soft)}

.legend{display:flex; gap:24px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend .key-dot{width:22px; height:22px; display:block; overflow:visible; flex:0 0 22px}

/* ── day entry ──────────────────────────────────────────────── */
.entry-body{display:grid; grid-template-columns:1fr 292px; gap:0}
.entry-main{padding:clamp(26px,3.4vw,40px); border-right:1.5px solid var(--rule-hard)}
.entry-side{display:flex; flex-direction:column}

.leg{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 24px; line-height:1.8}
.leg b{color:var(--ink); font-weight:400}
.leg .arrow{color:var(--accent)}

.prose p{margin:0 0 15px; max-width:64ch}
/* flow-root keeps the drop cap's float inside its own paragraph, so a short
   opening line doesn't push the next paragraph's text sideways. */
.prose p:first-child{display:flow-root; min-height:52px}
.prose p:first-child::first-letter{
  float:left; font-size:58px; line-height:.76; padding:7px 12px 0 0; color:var(--accent);
}
.prose b{font-weight:600}
.prose i{font-style:italic; color:var(--accent)}
.pull{
  border-left:2.5px solid var(--accent); padding:3px 0 3px 16px; margin:24px 0 0;
  font-style:italic; color:var(--accent); font-size:19px; max-width:44ch;
}

/* logbook table of waypoints */
.logbook{border-collapse:collapse; width:100%; margin:30px 0 0; font-size:14px}
.logbook th{
  text-align:left; font-weight:400; font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--rule-hard); padding:0 12px 7px 0;
}
.logbook td{padding:10px 12px 10px 0; border-bottom:1px dotted var(--rule); vertical-align:top}
.logbook .sym{width:22px; text-align:center; padding-right:8px; color:var(--blue); font-size:12px}
.logbook .nm{font-weight:600; font-size:15px}
.logbook .nt{display:block; color:var(--ink-soft); font-size:13.5px; margin-top:2px; max-width:52ch}
.logbook .el{
  text-align:right; white-space:nowrap; font-family:var(--mono);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.logbook tr.is-peak .sym{color:var(--z-scree)}
.logbook tr.is-summit .sym{color:var(--alert)}
.logbook tr.is-summit .nm{color:var(--alert)}
.logbook tr.is-skipped .sym{color:var(--ink-faint)}
.logbook tr.is-skipped .nm{color:var(--ink-faint); text-decoration:line-through;
  text-decoration-color:var(--rule)}

/* side instrument panels */
.panel{padding:20px 22px; border-bottom:1px solid var(--rule)}
.panel:last-child{border-bottom:0}
.panel h3{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; margin:0 0 14px;
}
.panel dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:9px 12px;
  font-family:var(--mono); font-size:12px}
.panel dt{color:var(--ink-soft)}
.panel dd{margin:0; text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.panel dd.hot{color:var(--alert)}

.moments{list-style:none; margin:0; padding:0}
.moments li{padding:0 0 14px; margin-bottom:14px; border-bottom:1px dotted var(--rule)}
.moments li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.moments b{display:block; font-size:14px; font-weight:600; margin-bottom:3px}
.moments span{display:block; font-size:13px; line-height:1.5; color:var(--ink-soft)}
.moments li.is-critical{border-left:2.5px solid var(--alert); padding-left:12px}
.moments li.is-critical b{color:var(--alert)}

/* summit day gets a red rule */
.day.is-summit{border-color:var(--alert)}
.day.is-summit .sheet-head{border-bottom-color:var(--alert)}
.day.is-summit .entry-main{border-right-color:var(--alert)}

/* ── photo plates ───────────────────────────────────────────── */
.gallery{padding:clamp(22px,3vw,34px); border-top:1.5px solid var(--rule-hard)}
.gallery h3{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; margin:0 0 16px;
}
.plates{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px}
.plate{margin:0; background:none; border:0; padding:0; cursor:zoom-in; text-align:left}
.plate img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--rule-hard);
  filter:sepia(.1) contrast(1.02); transition:filter .3s; opacity:0;
}
.plate img.loaded{opacity:1}
.plate:hover img{filter:sepia(0) contrast(1.05)}
.plate figcaption{
  font-size:9.5px; letter-spacing:.06em; color:var(--ink-soft);
  margin-top:7px; line-height:1.5;
}
.more{
  margin-top:20px; background:none; border:1.5px solid var(--rule-hard); color:var(--ink);
  padding:9px 18px; cursor:pointer; font:400 9.5px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; transition:.15s;
}
.more:hover{background:var(--rule-hard); color:var(--paper)}

/* ── ledger ─────────────────────────────────────────────────── */
.ledger-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:1px solid var(--rule-hard); border-left:1px solid var(--rule-hard);
}
.ledger-grid div{
  padding:20px 18px; border-right:1px solid var(--rule-hard);
  border-bottom:1px solid var(--rule-hard);
}
.ledger-grid b{display:block; font-size:29px; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--accent)}
.ledger-grid span{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:10px}
.outro{margin:30px 0 0; max-width:64ch; font-size:18px}

footer{
  max-width:var(--maxw); margin:0 auto; padding:22px 30px 70px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
footer a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--accent)}

/* ── lightbox ───────────────────────────────────────────────── */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(30,33,25,.95);
  display:grid; place-items:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0; display:flex; flex-direction:column; gap:12px;
  max-width:92vw; max-height:90vh}
.lightbox img{max-width:92vw; max-height:80vh; object-fit:contain;
  border:1px solid var(--sheet)}
.lightbox figcaption{text-align:center; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper-3)}
.lightbox button{
  position:absolute; background:var(--paper); border:1.5px solid var(--paper);
  color:var(--ink); width:42px; height:42px; cursor:pointer; font-size:17px;
  line-height:1; display:grid; place-items:center; transition:.15s;
}
.lightbox button:hover{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.lb-close{top:20px; right:20px}
.lb-prev{left:20px; top:50%; transform:translateY(-50%)}
.lb-next{right:20px; top:50%; transform:translateY(-50%)}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:860px){
  .entry-body{grid-template-columns:1fr}
  .entry-main{border-right:0; border-bottom:1.5px solid var(--rule-hard)}
  .rail{grid-template-columns:repeat(2,1fr)}
  .rail div:nth-child(2n){border-right:0}
  .key{flex-wrap:wrap}
  .key div{flex:1 0 33%}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .collar, .sheet-block{margin-left:14px; margin-right:14px}
  .plates{grid-template-columns:1fr 1fr; gap:14px}
  .lightbox button{width:36px; height:36px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ═══════════════════════════════════════════════════════════════
   IMMERSIVE LAYER
   Full-bleed photography carries the climb; the sheets carry the
   record. Photographs run edge to edge, sheets stay inset.
   ═══════════════════════════════════════════════════════════════ */

/* ── cover ──────────────────────────────────────────────────── */
.cover{position:relative; height:100svh; min-height:600px; overflow:hidden; background:#1a1815}
.cover-img{position:absolute; inset:0}
.cover-img img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.cover-img img.in{opacity:1}
.cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,15,.62) 0%, rgba(20,18,15,.12) 32%,
                             rgba(20,18,15,.35) 62%, rgba(20,18,15,.92) 100%);
}
.cover-type{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:space-between; padding:26px clamp(20px,4vw,54px) clamp(34px,5vw,60px);
  color:var(--paper);
}
.cover-rag{
  display:flex; gap:clamp(14px,3vw,40px); margin:0; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.9;
}
.cover-title{
  font-size:clamp(56px,13vw,180px); line-height:.86; letter-spacing:-.035em;
  margin:0; color:var(--paper); text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.cover-deck{
  max-width:44ch; margin:20px 0 0; font-size:clamp(16px,1.9vw,21px);
  color:#eee7da; text-shadow:0 1px 20px rgba(0,0,0,.6);
}
.cover-cue{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(239,233,220,.4);
  padding-bottom:5px;
}
.cover-cue i{font-style:normal; animation:nudge 2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.collar{scroll-margin-top:0}

/* ── day opener: full-bleed plate that starts each day ──────── */
.opener{
  position:relative; height:86svh; min-height:520px; overflow:hidden;
  background:#1a1815; margin-top:52px;
}
.opener-img{position:absolute; inset:-6% 0; }
.opener-img img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease}
.opener-img img.in{opacity:1}
.opener::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,15,.5) 0%, rgba(20,18,15,.05) 34%,
                             rgba(20,18,15,.3) 60%, rgba(20,18,15,.9) 100%);
}
.opener-type{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 clamp(20px,4vw,54px) clamp(78px,8vw,112px);
  color:var(--paper); max-width:var(--maxw); margin:0 auto; left:0; right:0;
}
.opener-day{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
.opener-day .n{border:1.5px solid var(--paper); padding:5px 11px}
.opener-day .z{opacity:.85}
.opener h2{
  font-size:clamp(32px,6.2vw,78px); line-height:.96; letter-spacing:-.028em;
  color:var(--paper); margin:0; max-width:17ch; text-shadow:0 2px 34px rgba(0,0,0,.5);
}
.opener-cap{
  margin:16px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:#dcd8c9; max-width:52ch; line-height:1.7;
}
.opener-alt{
  position:absolute; top:clamp(20px,3vw,34px); right:clamp(20px,4vw,54px);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); text-align:right; line-height:2; z-index:2;
}
.opener-alt b{display:block; font-family:var(--serif); font-size:clamp(24px,3.4vw,40px);
  letter-spacing:-.01em; font-weight:600}

/* a day's sheet tucks up under its opener */
.day{margin-top:-46px; position:relative; z-index:3}

/* zone flash along the top edge of each sheet */
.day::before{
  content:""; position:absolute; inset:-1.5px -1.5px auto -1.5px; height:4px;
  background:var(--zone, var(--rule-hard));
}

/* ── interstitial: a full-bleed moment between days ─────────── */
.interstitial{position:relative; height:88svh; min-height:520px; overflow:hidden;
  background:#1a1815; margin-top:52px}
.interstitial img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s}
.interstitial img.in{opacity:1}
.interstitial::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.34) 0%, rgba(20,18,15,.06) 40%,
                             rgba(20,18,15,.86) 100%);
}
.inter-type{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; text-align:center;
  padding:0 clamp(20px,6vw,90px) clamp(44px,6vw,80px); color:var(--paper);
}
.inter-quote{
  font-size:clamp(24px,4.4vw,58px); line-height:1.12; letter-spacing:-.02em;
  margin:0; max-width:20ch; font-style:italic; text-shadow:0 2px 34px rgba(0,0,0,.55);
}
.inter-cap{
  margin:20px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#dcd8c9;
}

/* ── wide plate strip under each day ────────────────────────── */
.gallery{padding:clamp(22px,3vw,34px); border-top:1.5px solid var(--rule-hard)}
.plates{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
/* first plate of each day runs double width for rhythm */
.plates .plate:first-child{grid-column:span 2}
.plates .plate:first-child img{aspect-ratio:16/9}

/* ── altitude HUD ───────────────────────────────────────────── */
.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,2.4vw,30px);
  padding:9px clamp(14px,3vw,26px);
  background:var(--live-sheet, var(--sheet)); backdrop-filter:blur(9px);
  border-top:1.5px solid var(--rule-hard);
  transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.hud.on{transform:none}
.hud-read b{
  display:block; font-size:19px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}
.hud-read span{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:5px; white-space:nowrap;
}
.hud-track{overflow:hidden}
#hudChart svg{width:100%; height:38px; display:block; overflow:visible}
.hud-line{fill:none; stroke:var(--ink); stroke-width:1.3}
.hud-fill{fill:rgba(34,32,27,.09)}
.hud-mark{fill:var(--accent)}
.hud-zone{display:flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap}
.hud-zone i{width:11px; height:11px; display:block; background:var(--rule)}

@media (max-width:700px){
  .hud{grid-template-columns:auto 1fr; padding:8px 14px}
  .hud-zone{display:none}
  .hud-read b{font-size:16px}
}

/* keep the last sheet clear of the HUD */
footer{padding-bottom:96px}

@media (max-width:860px){
  .opener, .interstitial{height:72svh; min-height:420px}
  .day{margin-top:-30px}
  .plates .plate:first-child{grid-column:span 1}
  .plates .plate:first-child img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .cover-cue i{animation:none}
  .cover-img img, .opener-img img, .interstitial img{transition:none; opacity:1}
}

/* the sheet header carries the leg now that the opener owns the title */
.sheet-head .head-meta b{color:var(--ink); font-weight:400}
.sheet-head .head-meta .arrow{color:var(--accent); padding:0 3px}
.day .entry-main .prose{margin-top:2px}

/* ── cover byline ───────────────────────────────────────────── */
.cover-name{
  display:block; font-family:var(--mono);
  font-size:clamp(11px,1.5vw,15px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--paper); opacity:.92; margin-bottom:clamp(10px,1.8vw,22px);
  text-shadow:0 1px 16px rgba(0,0,0,.7);
}
.cover-year{
  font-family:var(--mono); font-size:.2em; letter-spacing:.16em;
  vertical-align:baseline; opacity:.85; margin-left:.08em;
}

/* ── a note from the author (interest form) ─────────────────── */
.note .section-note{max-width:58ch; font-size:17px}
.invite{margin-top:30px; max-width:560px}
.invite .hp{position:absolute; left:-9999px; height:0; overflow:hidden; margin:0}
.invite-row{margin-bottom:18px}
.invite-row label{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}
.invite-row label i{font-style:normal; color:var(--ink-faint); text-transform:none; letter-spacing:.08em}
.invite-row input, .invite-row textarea{
  width:100%; border:1.5px solid var(--rule-hard); background:var(--paper);
  color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.5;
  padding:11px 13px; border-radius:0; -webkit-appearance:none; resize:vertical;
}
.invite-row input::placeholder, .invite-row textarea::placeholder{color:var(--ink-faint)}
.invite-row input:focus, .invite-row textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:2px 2px 0 rgba(34,32,27,.16);
}
.invite-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.invite-foot button{
  background:none; border:1.5px solid var(--rule-hard); color:var(--ink);
  padding:11px 22px; cursor:pointer; font:400 9.5px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; transition:.15s;
  box-shadow:2px 2px 0 rgba(34,32,27,.16);
}
.invite-foot button:hover{background:var(--rule-hard); color:var(--paper)}
.invite-small{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.invite-done{
  margin-top:30px; max-width:560px; border-left:2.5px solid var(--accent);
  padding:6px 0 6px 16px;
}
.invite-done p{margin:0; color:var(--ink-soft); font-size:17px}
.invite-done b{color:var(--ink)}

/* ── moving pictures (clips hosted on Drive, poster served here) ── */
.reels{padding:clamp(22px,3vw,34px); border-top:1.5px solid var(--rule-hard)}
.reels:empty{display:none}          /* summit day has no footage */
.reels h3{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; margin:0 0 16px;
}
.reel-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.reel{margin:0; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.reel-frame{display:block; position:relative}
.reel img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--rule-hard);
  filter:sepia(.1) contrast(1.02); transition:filter .3s, opacity .4s; opacity:0;
}
.reel img.loaded{opacity:1}
.reel:hover img{filter:sepia(0) contrast(1.05)}
.reel.is-portrait img{object-fit:contain; background:#20221c}
/* nothing floats over a frame that hasn't arrived yet */
.reel img:not(.loaded) ~ .reel-play,
.reel img:not(.loaded) ~ .reel-len{opacity:0}
.reel-play{
  position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border:1.5px solid var(--paper); border-radius:50%;
  background:rgba(34,32,27,.42); transition:background .2s, opacity .4s;
}
.reel-play::after{
  content:''; position:absolute; left:18px; top:13px;
  border-left:15px solid var(--paper);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.reel:hover .reel-play{background:var(--accent)}
.reel-len{
  position:absolute; right:7px; bottom:7px; padding:2px 6px; transition:opacity .4s;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--paper); background:rgba(34,32,27,.72);
}
.reel figcaption{
  font-size:9.5px; letter-spacing:.06em; color:var(--ink-soft);
  margin-top:7px; line-height:1.5;
}
.reel-at{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  color:var(--ink-faint); margin-top:3px;
}

/* the player, sized like the lightbox photograph it replaces */
.lb-vid{width:min(92vw,1180px); aspect-ratio:16/9; max-height:80vh; background:#000}
.lb-vid iframe{width:100%; height:100%; border:0; display:block}

@media (max-width:860px){
  .reel-row{grid-template-columns:1fr}
}