/* 100 Miles in a Month
   Runner's logbook: journal typography on a road sheet. Same family as the
   Kilimanjaro sheet, with the topo contours swapped for lane lines. */

:root{
  /* Base identity: clay on concrete. Each week overrides these, so the page
     warms up as the month goes on. --accent is decorative and follows the
     week. --alert never moves: it is reserved for the finish, so red on this
     page always means the last 6.3 miles. */
  --paper:#ecebe4;
  --sheet:#f5f4ee;
  --ink:#1b1a17;
  --ink-soft:#5a584f;
  --ink-faint:#8c8a80;
  --rule:#c9c6b8;
  --rule-hard:#1b1a17;

  --accent:#b9481f;
  --alert:#8c2f2b;
  --zone:#b9481f;
  --blue:#34566a;

  --w1:#4f6b7a;
  --w2:#5f7a55;
  --w3:#a0783a;
  --w4:#b9481f;

  --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;
}

/* ── week palettes ──────────────────────────────────────────────
   Applied to a week's sheet, and mirrored onto the page background as you
   scroll so the whole thing moves with you. */
[data-zone="w1"]{
  --paper:#e6eaec; --sheet:#eff2f3; --rule:#b9c5cb; --accent:#3d5c6d; --zone:#4f6b7a;
}
[data-zone="w2"]{
  --paper:#e8ecdf; --sheet:#f0f3ea; --rule:#bfcaad; --accent:#46613a; --zone:#5f7a55;
}
[data-zone="w3"]{
  --paper:#f0e9d8; --sheet:#f6f1e4; --rule:#d3c39f; --accent:#8a6424; --zone:#a0783a;
}
[data-zone="w4"]{
  --paper:#f2e6dc; --sheet:#f8efe8; --rule:#d8bfae; --accent:#b9481f; --zone:#b9481f;
}

*{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}

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

/* ── 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);
}
.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)}

/* ── collar / masthead ──────────────────────────────────────── */
.collar{
  border:1.5px solid var(--rule-hard); max-width:var(--maxw);
  margin:26px auto 0; background:var(--sheet); scroll-margin-top:0;
}
.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}
.lede{
  max-width:52ch; font-size:clamp(17px,1.9vw,20.5px); margin: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)}

/* week 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; cursor:pointer;
}
.key div:hover{filter:brightness(1.1)}

/* ── 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-meta b{color:var(--ink); font-weight:400}
.head-zone{margin-left:auto; font-family:var(--mono)}
.sheet-inner{padding:clamp(26px,3.4vw,42px)}
.sheet-block h2{font-size:clamp(27px,3.6vw,40px); margin:0 0 6px}

/* ── chapters (the essay) ───────────────────────────────────── */
.chapter .sheet-inner{padding-bottom:clamp(30px,4vw,48px)}
.prose{margin-top:22px}
.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)}
.prose ol.steps{margin:0 0 15px; padding:0 0 0 0; max-width:64ch; list-style:none; counter-reset:step}
.prose ol.steps li{
  counter-increment:step; padding:8px 0 8px 44px; position:relative;
  border-top:1px dotted var(--rule);
}
.prose ol.steps li:last-child{border-bottom:1px dotted var(--rule)}
.prose ol.steps li::before{
  content:counter(step, decimal-leading-zero); position:absolute; left:0; top:11px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; 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;
}

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

.ax-line{stroke:var(--rule); stroke-width:.9}
.ax-label,.daytick,.band-label,.pt-label,.pt-sub,.plan-label,.pace-val{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-finish{fill:rgba(140,47,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)}
.plan{fill:none; stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:5 4}
.plan-label{fill:var(--ink-faint); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase}
.goal-line{stroke:var(--accent); stroke-width:1.2; stroke-dasharray:6 4}
.goal-label{fill:var(--accent); font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase}
.pt{cursor:pointer}
.pt circle{transition:r .15s}
.pt:hover circle.dot{stroke:var(--ink); stroke-width:1.6}
.pt-label{fill:var(--ink); font-size:9.5px; font-weight:600; pointer-events:none}
.pt-sub{fill:var(--ink-soft); font-size:8.5px; font-variant-numeric:tabular-nums; pointer-events:none}
.pace-val{fill:var(--ink); font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; pointer-events:none}
.pace-pt{cursor:pointer}
.pace-pt circle{transition:r .15s}
.pace-pt:hover circle{r:8}
.pace-pt.is-on circle{stroke-width:2.6}
.band-under{fill:var(--accent); opacity:.06}

.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}
.legend .key-sw{width:14px; height:14px; display:block; border:1px solid var(--rule-hard)}

/* ── splits drawer under the pace chart ─────────────────────── */
.splits{margin-top:26px; border:1.5px solid var(--rule-hard); background:var(--paper)}
.splits:empty{display:none}
.splits-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 18px; border-bottom:1px solid var(--rule-hard);
}
.splits-head b{font-size:16px; font-weight:600}
.splits-head .head-meta{margin-left:auto}
.split-rows{padding:14px 18px 16px}
.split-row{
  display:grid; grid-template-columns:64px 1fr 76px; align-items:center; gap:12px;
  padding:5px 0; font-family:var(--mono); font-size:11px;
}
.split-row .lbl{color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; font-size:9px}
.split-row .bar-track{position:relative; height:18px; background:var(--sheet);
  border:1px solid var(--rule)}
.split-row .bar{position:absolute; left:0; top:0; bottom:0; background:var(--ink-faint);
  transition:width .35s ease}
.split-row .bar.is-under{background:var(--accent)}
.split-row .bar-val{position:absolute; top:0; bottom:0; display:flex; align-items:center;
  padding:0 6px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);
  white-space:nowrap}
.split-row .goal{position:absolute; top:-3px; bottom:-3px; width:0;
  border-left:1.5px dashed var(--accent); pointer-events:none}
.split-row .el{text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.split-row .el.up{color:var(--ink)}
.splits-foot{padding:0 18px 14px; font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* ── calendar ───────────────────────────────────────────────── */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:26px; max-width:760px}
.cal-dow{font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); padding:0 0 6px 4px}
.cal-day{
  position:relative; aspect-ratio:1; border:1px solid var(--rule); background:var(--sheet);
  padding:7px 8px; text-align:left; cursor:default; overflow:hidden;
  font-family:var(--mono); color:var(--ink); display:flex; flex-direction:column;
  justify-content:space-between;
}
.cal-day.is-run{cursor:pointer; border-color:var(--rule-hard)}
.cal-day.is-run:hover{outline:1.5px solid var(--ink)}
.cal-day .fill{position:absolute; inset:0; background:var(--accent); pointer-events:none}
.cal-day.is-finish .fill{background:var(--alert)}
.cal-day b{position:relative; font-size:11px; font-weight:600; letter-spacing:.05em}
.cal-day span{position:relative; font-size:10.5px; font-variant-numeric:tabular-nums;
  font-weight:700}
.cal-day .runs{position:relative; font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft)}
.cal-day.is-run.is-hot b, .cal-day.is-run.is-hot span, .cal-day.is-run.is-hot .runs{color:#fff}
.cal-day.is-blank{border-color:transparent; background:none}
.cal-day.is-rest{color:var(--ink-faint)}
.cal-day.is-after{opacity:.55}
.cal-scale{display:inline-flex; gap:3px; align-items:center}
.cal-scale i{width:14px; height:14px; display:block; background:var(--accent); border:1px solid var(--rule-hard)}

/* ── logbook (week sheets) ──────────────────────────────────── */
.week{position:relative}
.week::before{
  content:""; position:absolute; inset:-1.5px -1.5px auto -1.5px; height:4px;
  background:var(--zone, var(--rule-hard));
}
.table-wrap{overflow-x:auto; margin-top:26px}
.logbook{border-collapse:collapse; width:100%; min-width:680px; 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 th.num, .logbook td.num{text-align:right}
.logbook td{padding:10px 12px 10px 0; border-bottom:1px dotted var(--rule); vertical-align:top}
.logbook tr.run{cursor:pointer}
.logbook tr.run:hover td{background:rgba(34,32,27,.035)}
.logbook tr.run.is-open td{border-bottom-style:solid; border-bottom-color:var(--rule-hard)}
.logbook .no{width:52px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--accent);
  white-space:nowrap}
.logbook .dy{font-weight:600; font-size:15px; white-space:nowrap}
.logbook .dy small{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:400; margin-top:2px}
.logbook td.num{
  white-space:nowrap; font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.logbook td.num.hot{font-weight:700}
.logbook td.num.under{color:var(--accent); font-weight:700}
.logbook .wh{color:var(--ink-soft); font-size:13.5px}
.logbook .wh small{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:2px}
.logbook tr.is-finish .no, .logbook tr.is-finish .dy{color:var(--alert)}
.logbook tr.detail td{padding:0; border-bottom:1px solid var(--rule-hard); background:var(--paper)}
.logbook tr.detail[hidden]{display:none}
.logbook .detail .split-rows{padding:12px 18px 14px; max-width:620px}
.logbook .toggle{width:22px; text-align:right; color:var(--ink-faint); font-family:var(--mono); font-size:11px}
.week-foot{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--rule-hard);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.week-foot b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

/* ── 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:18px}
.plate{margin:0; background:none; border:0; padding:0; cursor:zoom-in; text-align:left}
.plate img{
  width:100%; aspect-ratio:3/4; 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;
}

/* ── 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);
  margin-top:22px;
}
.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 96px;
  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(27,26,23,.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:#cfcbbd}
.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%)}

/* ═══════════════════════════════════════════════════════════════
   IMMERSIVE LAYER
   Full-bleed photography carries the month; 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; object-position:50% 82%; 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;
  flex-wrap:wrap;
}
.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)}}

.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;
}

/* ── chapter opener: full-bleed plate before a chapter ──────── */
.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 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 chapter's sheet tucks up under its opener */
.opener + .sheet-block{margin-top:-46px; position:relative; z-index:3}

/* ── interstitial: a full-bleed moment between sections ─────── */
.interstitial{position:relative; height:88svh; min-height:520px; overflow:hidden;
  background:#1a1815; margin-top:52px; margin-bottom: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;
}

/* ── mileage 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-goal{stroke:var(--accent); stroke-width:.8; stroke-dasharray:3 3}
.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)}

/* ── 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)}

/* ── a mile for a meal ──────────────────────────────────────── */
.give .section-note{max-width:60ch; font-size:17px}
.give-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:28px;
  border-top:1px solid var(--rule-hard); border-left:1px solid var(--rule-hard); max-width:760px;
}
.give-tile{
  display:block; padding:18px 16px; text-decoration:none; color:var(--ink);
  border-right:1px solid var(--rule-hard); border-bottom:1px solid var(--rule-hard);
  transition:background .15s;
}
.give-tile:hover{background:var(--paper)}
.give-tile b{display:block; font-size:27px; line-height:1; font-variant-numeric:tabular-nums; color:var(--accent)}
.give-tile span{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:9px}
.give-foot{margin-top:26px}
.give-cta{
  display:inline-block; text-decoration:none; background:none; border:1.5px solid var(--rule-hard);
  color:var(--ink); padding:11px 22px; 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);
}
.give-cta:hover{background:var(--rule-hard); color:var(--paper)}

/* ── the visitors' logbook (guestbook) ──────────────────────── */
.register .invite{max-width:640px}
.reg-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}

.reg-list{list-style:none; margin:38px 0 0; padding:0; max-width:640px;
  border-top:1.5px solid var(--rule-hard)}
.reg-entry{padding:16px 0 18px; border-bottom:1px solid var(--rule)}
.reg-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.reg-no{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.reg-name{font-size:17px}
.reg-from{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.reg-date{
  margin-left:auto; font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.reg-msg{margin:8px 0 0; color:var(--ink-soft); max-width:58ch}
.reg-note{
  padding:16px 0; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.reg-note.is-error{color:var(--alert)}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:860px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .rail div:nth-child(2n){border-right:0}
  .key{flex-wrap:wrap}
  .key div{flex:1 0 50%}
  .opener, .interstitial{height:72svh; min-height:420px}
  .opener + .sheet-block{margin-top:-30px}
}
@media (max-width:700px){
  .hud{grid-template-columns:auto 1fr; padding:8px 14px}
  .hud-zone{display:none}
  .hud-read b{font-size:16px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .collar, .sheet-block{margin-left:14px; margin-right:14px}
  .plates{grid-template-columns:1fr 1fr; gap:14px}
  .lightbox button{width:36px; height:36px}
  .reg-cols{grid-template-columns:1fr}
  /* the table drops time, climb and temp on a phone: they live in the splits row */
  .logbook{min-width:0}
  .logbook th:nth-child(5), .logbook td:nth-child(5),
  .logbook th:nth-child(6), .logbook td:nth-child(6),
  .logbook th:nth-child(7), .logbook td:nth-child(7){display:none}
  .logbook .detail .split-rows{padding:10px 8px 12px}
  .cal{gap:4px}
  .cal-day{padding:5px 6px}
  .cal-day .runs{display:none}
  .split-row{grid-template-columns:52px 1fr 60px; gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cover-cue i{animation:none}
  .cover-img img, .opener-img img, .interstitial img{transition:none; opacity:1}
}