:root{
  --ink:#141E19;          /* shadowed woodland floor */
  --ink-2:#1C2A23;
  --stone:#DAD6C9;        /* pale Jurassic limestone */
  --stone-dim:#9DA398;
  --karst:#7E867C;        /* weathered rock */
  --campanula:#7C6BBC;    /* the bellflowers on the ridge */
  --haze:#9FB6C0;         /* the plain, going blue */
  --display:"Archivo Narrow",Arial Narrow,sans-serif;
  --body:"Spline Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(1.1rem,4vw,3rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--stone);overflow-x:hidden;
  font-family:var(--body);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}

.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--stone-dim)}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#BFD2DA;margin:0 0 1.4rem;overflow-wrap:break-word;
}
@media(max-width:520px){.eyebrow{font-size:.6rem;letter-spacing:.08em}}

/* ───────── elevation spine ───────── */
#spine{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:50;
  background:rgba(14,21,18,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(218,214,201,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-100%);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
#spine.on{opacity:1;transform:none}
#profile{width:100%;height:64px}
#profileLine{fill:none;stroke:var(--stone);stroke-width:1.6;vector-effect:non-scaling-stroke}
#profileFill{fill:rgba(124,107,188,.22)}
#cursor{stroke:var(--campanula);stroke-width:2;vector-effect:non-scaling-stroke}
#readout{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  display:flex;gap:.9rem;align-items:baseline;
}
#roAlt{color:var(--campanula);font-weight:500}
#roTime{color:var(--stone-dim)}

/* ───────── hero ───────── */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.62)}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(20,30,25,.35) 0%,
      rgba(20,30,25,.62) 38%,
      rgba(20,30,25,.82) 70%,
      rgba(20,30,25,.90) 100%),
    linear-gradient(to right,rgba(20,30,25,.30),transparent 70%);
}
.hero-body{position:relative;padding:var(--gut);padding-bottom:clamp(2rem,7vh,5rem);
  max-width:min(46rem,100%);min-width:0}
h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,18vw,12rem);line-height:.84;letter-spacing:.02em;
  margin:0 0 1rem;
}
.lede{font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:300;max-width:min(32rem,100%);
  margin:0 0 2.4rem;color:#F3F1EA}

.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:1.4rem 1.8rem;margin:0 0 2.6rem;padding-top:1.6rem;
  border-top:1px solid rgba(218,214,201,.22);
}
.facts dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#BFD2DA;margin-bottom:.35rem;
}
.facts dd{
  margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1;letter-spacing:.01em;
}
.facts dd span{font-family:var(--mono);font-size:.7rem;font-weight:400;color:var(--stone-dim);margin-left:.2em}
.scrollcue{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stone-dim);margin:0;
}
.scrollcue::after{content:"";display:block;width:1px;height:2.2rem;background:linear-gradient(var(--stone-dim),transparent);margin-top:.6rem}

/* ───────── chapters ───────── */
.chapter{padding:clamp(4rem,12vh,9rem) 0 0}
.chapter-head{padding:0 var(--gut);margin-bottom:clamp(2rem,6vh,3.6rem);max-width:44rem}
.chapter-head .num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--campanula);
  display:block;margin-bottom:.7rem;
}
.chapter-head h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.9rem,6vw,3.4rem);line-height:1;margin:0 0 .8rem;
}
.chapter-head .span{font-family:var(--mono);font-size:.72rem;color:var(--stone-dim)}

/* frames */
.frames{display:flex;flex-direction:column;gap:clamp(3rem,9vh,6.5rem)}
figure{margin:0;padding:0 var(--gut)}
figure.wide{padding:0}
.shot{position:relative;background:var(--ink-2);overflow:hidden}
.shot img,.shot video{width:100%;height:auto}
figure.wide .shot{border-radius:0}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(218,214,201,.1);
}
.badge{
  position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(20,30,25,.82);color:var(--haze);padding:.4rem .7rem;
  backdrop-filter:blur(4px);
}
figcaption{padding-top:1rem;max-width:34rem}
figcaption .meta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--stone-dim);
  display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.55rem;
}
figcaption .meta b{color:var(--campanula);font-weight:500}
figcaption p{margin:0;font-size:1rem;color:#E6E2D8}
figcaption.bare .meta{margin-bottom:0}
/* her spoken lines on the video clips — set in bold caps */
figcaption p .said{font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#F2EFE7}
figcaption p .said em{font-style:italic}

/* two-up on wide screens for portrait pairs */
@media(min-width:900px){
  .frames{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem) clamp(2rem,4vw,3.5rem);
          padding:0 var(--gut)}
  figure{padding:0}
  figure.full{grid-column:1/-1}
  .chapter-head{padding-left:var(--gut)}
}

/* video */
video{background:#000}
.playhint{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.playhint span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(218,214,201,.55);color:var(--stone);padding:.5rem .9rem;
  background:rgba(20,30,25,.5);backdrop-filter:blur(3px);
}
.shot.playing .playhint{display:none}

footer{
  padding:clamp(5rem,14vh,9rem) var(--gut) clamp(3rem,8vh,5rem);
  border-top:1px solid rgba(218,214,201,.14);margin-top:clamp(5rem,14vh,9rem);
  max-width:40rem;
}
footer p{margin:.5rem 0;font-size:.9rem;color:var(--stone-dim)}

/* reveal */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--campanula);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  #spine{transition:none}
}

/* ───────── music toggle ───────── */
#spine{pointer-events:none}
#bgm-toggle{
  position:fixed;right:var(--gut);bottom:clamp(1rem,3vh,2rem);z-index:60;
  pointer-events:auto;display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(20,30,25,.72);border:1px solid rgba(218,214,201,.34);
  color:var(--stone);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.44rem .74rem;cursor:pointer;
  backdrop-filter:blur(4px);transition:border-color .3s,color .3s,background .3s;
}
#bgm-toggle:hover{border-color:var(--campanula);color:#fff}
#bgm-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
#bgm-toggle #spk{fill:currentColor;stroke:none}
#bgm-toggle #waves{opacity:0;transition:opacity .3s}
#bgm-toggle #slash{opacity:1;transition:opacity .3s}
#bgm-toggle[aria-pressed="true"]{border-color:var(--campanula);color:var(--campanula)}
#bgm-toggle[aria-pressed="true"] #waves{opacity:1}
#bgm-toggle[aria-pressed="true"] #slash{opacity:0}
#bgm-toggle.ducked{opacity:.45}
@media(max-width:560px){#bgm-label{display:none}#bgm-toggle{padding:.44rem .5rem}}
footer .credit{font-size:.8rem;color:var(--stone-dim);margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid rgba(218,214,201,.12)}
footer .credit em{font-style:normal;color:var(--stone)}
footer a{color:var(--haze);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--campanula)}

/* ───────── route legs ───────── */
.legs{list-style:none;margin:0 0 2.6rem;padding:0;max-width:min(34rem,100%);
  counter-reset:leg;display:flex;flex-direction:column;gap:.1rem}
.legs li{display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid rgba(218,214,201,.14)}
.legs li:last-child{border-bottom:1px solid rgba(218,214,201,.14)}
.leg-d{font-family:var(--mono);font-size:.74rem;font-weight:500;color:var(--campanula);
  letter-spacing:.04em;text-align:right}
.leg-n{font-size:.9rem;color:#E9E5DA;line-height:1.45;overflow-wrap:break-word}
@media(max-width:480px){
  .legs li{grid-template-columns:3.6rem 1fr;gap:.8rem}
  .leg-n{font-size:.84rem}
}

/* ───────── prologue: the stretch with no photographs ───────── */
.prologue{padding:clamp(4rem,13vh,9rem) var(--gut) 0}
.pro-inner{
  max-width:36rem;position:relative;
  padding-left:clamp(1.1rem,3vw,2rem);
  border-left:1px solid rgba(124,107,188,.45);
}
.pro-eyebrow{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--campanula);margin:0 0 .9rem;
}
.prologue h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.6rem,5vw,2.7rem);line-height:1.02;margin:0 0 .7rem;
}
.pro-note{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--stone-dim);
  margin:0 0 2rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(218,214,201,.14);
}
.prologue p{font-size:1rem;line-height:1.72;color:#E6E2D8;margin:0 0 1.15rem}
.pro-handoff{
  font-family:var(--mono);font-size:.72rem;line-height:1.6;letter-spacing:.03em;
  color:var(--haze);margin-top:1.9rem;padding-top:1.3rem;
  border-top:1px solid rgba(218,214,201,.14);
}
@media(min-width:900px){.prologue{padding-left:var(--gut)}}

/* ───────── presentation player ───────── */
#pres-bar{
  position:fixed;top:clamp(.6rem,2vh,1.1rem);left:50%;transform:translateX(-50%);
  z-index:70;display:flex;align-items:center;gap:.6rem;
}
#pres-toggle{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  background:rgba(20,30,25,.82);border:1px solid rgba(218,214,201,.4);
  color:var(--stone);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1rem;
  backdrop-filter:blur(6px);white-space:nowrap;
  transition:border-color .3s,color .3s,background .3s;
}
#pres-toggle:hover{border-color:var(--campanula);color:#fff;background:rgba(20,30,25,.92)}
#pres-toggle svg{width:14px;height:14px;fill:currentColor;stroke:none;flex:none}
#pres-stop{display:none}
#pres-bar.playing #pres-play{display:none}
#pres-bar.playing #pres-stop{display:inline}
#pres-bar.playing #pres-toggle{border-color:var(--campanula);color:var(--campanula)}
#pres-count{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--stone-dim);
  background:rgba(20,30,25,.72);padding:.5rem .6rem;backdrop-filter:blur(6px);
}

/* during playback: quiet everything that isn't the current frame */
html.presenting #spine,html.presenting #bgm-toggle{opacity:0 !important;pointer-events:none}
html.presenting figure{transition:opacity .5s ease}
html.presenting .frames figure{opacity:.18}
html.presenting figure.pres-on{opacity:1}
html.presenting .chapter-head,html.presenting .prologue{opacity:.3;transition:opacity .5s}
@media(prefers-reduced-motion:reduce){
  html.presenting figure{transition:none}
}

/* ───────── pull quotes on the plant frames ───────── */
.pullquote{
  margin:1.3rem 0 0;padding:0 0 0 clamp(.9rem,2.5vw,1.4rem);
  border-left:2px solid var(--campanula);max-width:34rem;
}
.pullquote p{
  margin:0 0 .6rem;font-size:1.02rem;line-height:1.62;color:#EFEBE1;
  font-weight:300;text-wrap:pretty;
}
.pullquote footer{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--campanula);display:flex;gap:.55rem;flex-wrap:wrap;align-items:baseline;
}
.pullquote footer span{color:var(--stone-dim);text-transform:none;letter-spacing:.04em;font-style:italic}

/* ───────── presentation: progress, pause, polish ───────── */
#pres-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:rgba(218,214,201,.10);opacity:0;transition:opacity .4s;pointer-events:none;
}
html.presenting #pres-progress{opacity:1}
#pres-progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--campanula);
}
#pres-paused{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:80;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stone);background:rgba(20,30,25,.86);border:1px solid rgba(218,214,201,.35);
  padding:.9rem 1.6rem;backdrop-filter:blur(8px);pointer-events:none;
}
html.pres-paused #pres-progress i{background:var(--haze)}

/* during playback the current frame gets room to breathe */
html.presenting body{background:#0E1512}
html.presenting .frames{gap:0}
html.presenting figure.pres-on .shot::after{box-shadow:none}
html.presenting figcaption,html.presenting .pullquote{opacity:0;transition:opacity .45s ease .15s}
html.presenting figure.pres-on figcaption,
html.presenting figure.pres-on .pullquote{opacity:1}

/* ───────── title and end cards ───────── */
.pres-card{
  position:fixed;inset:0;z-index:75;display:grid;place-items:center;
  background:#0E1512;padding:var(--gut);
  opacity:0;transition:opacity .9s ease;pointer-events:none;
}
.pres-card.on{opacity:1}
.card-inner{max-width:44rem;text-align:left;border-left:2px solid var(--campanula);
  padding-left:clamp(1.2rem,3.5vw,2.4rem)}
.card-eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--haze);margin:0 0 1.5rem;
}
.card-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(3.4rem,14vw,9rem);line-height:.86;margin:0 0 1.3rem;color:var(--stone);
}
.card-sub{font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:300;color:#F1EEE5;margin:0 0 2.2rem;line-height:1.45}
.card-route{font-size:clamp(.9rem,2vw,1.05rem);font-weight:300;color:#DCD8CD;margin:0 0 1.8rem;line-height:1.7}
.card-stats{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;color:var(--campanula);
  margin:0;padding-top:1.4rem;border-top:1px solid rgba(218,214,201,.18);
}
.card-credit{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--stone-dim);
  margin:1.6rem 0 0;line-height:1.7;
}
.card-credit em{font-style:italic;color:var(--stone)}

/* ───────── iOS safe areas ───────── */
#spine{
  height:calc(64px + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
}
#profile{height:64px}
#pres-bar{top:calc(clamp(.6rem,2vh,1.1rem) + env(safe-area-inset-top,0px))}
#pres-progress{top:env(safe-area-inset-top,0px)}
#bgm-toggle{bottom:calc(clamp(1rem,3vh,2rem) + env(safe-area-inset-bottom,0px))}