@font-face { font-family: "Caveat"; src: url("assets/fonts/caveat-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
.back-home { margin: 32px 0 0; font-size: 16px; }
.back-home a { display: inline-block; padding-block: 12px; }
@font-face { font-family: "Caveat"; src: url("assets/fonts/caveat-semibold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
:root {
  --paper: #f5f5f3;
  --paper-bright: #ffffff;
  --ink: #171715;
  --muted: #6c6a62;
  --night: #192a23;
  --night-raised: #264438;
  --warm: #df4b32;
  --warm-dark: #b93d2a;
  --warm-soft: #f08d6b;
  --blue: #5876b4;
  --green: #315c3b;
  --yellow: #efc62d;
  --line: rgba(23, 23, 21, .18);
  --line-light: rgba(245, 245, 243, .24);
  --display: "Bodoni 72", Didot, "Times New Roman", serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.22, .8, .22, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
svg { display: block; }
mark { color: inherit; }
.measureline {
  fill: none;
  stroke: var(--warm);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.measureline-point {
  fill: var(--paper);
  stroke: var(--warm);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.page-width { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  padding: 10px 14px;
  color: var(--night);
  background: var(--paper-bright);
  border: 2px solid var(--warm);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.kicker,
.step__index,
.step__date,
.stage-label,
.chart-heading,
.physiology__title,
.training__topline {
  font: 650 11px/1.3 var(--mono);
  letter-spacing: .105em;
  text-transform: uppercase;
}
.kicker { margin: 0 0 20px; color: var(--warm-dark); }

/* Opening */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: var(--paper-bright);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 100px));
  padding: 68px 0 44px;
  margin-inline: auto;
}
.hero h1 {
  max-width: 1080px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.hero h1 span { display: block; }
.hero__masthead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin: 0 0 42px;
  border-bottom: 1px solid var(--ink);
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero h1.hero__headline {
  max-width: none;
  font-size: clamp(64px, 8.9vw, 128px);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: initial;
}
.hero__headline em { color: var(--green); font-weight: inherit; }
.hero__lead strong {
  font-weight: 550;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--warm);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.hero__question {
  margin-bottom: .3em;
  font: 650 clamp(15px, 1.45vw, 21px)/1.1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__record-word { font-size: clamp(78px, 10.7vw, 154px); line-height: .72; }
.hero__place { margin-top: .08em; font-size: clamp(52px, 7.35vw, 106px); line-height: .82; }
.hero__lead {
  max-width: 680px;
  margin: 34px 0 0;
  font: 440 clamp(19px, 1.55vw, 24px)/1.48 var(--sans);
  text-wrap: pretty;
}
.hero__quote {
  max-width: 720px;
  margin: 22px 0 0;
  padding-left: 17px;
  border-left: 2px solid var(--warm);
  color: #344548;
  font: 470 14px/1.55 var(--sans);
}
.hero__quote a { margin-left: .45em; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.hero__ghost-time {
  position: absolute;
  z-index: -1;
  right: -1vw;
  top: 11%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23,23,21,.105);
  font: 600 clamp(100px, 17vw, 270px)/1 var(--mono);
  letter-spacing: -.09em;
  white-space: nowrap;
  transform: rotate(90deg) translateX(63%);
  transform-origin: right top;
}
.hero__route-line { display: none; position: absolute; z-index: -1; inset: auto 0 4% 0; height: 38%; }
.hero__route-line svg { width: 100%; height: 100%; }
.hero__route-line path {
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-route 1.6s .35s var(--ease) forwards;
}
.hero__route-line .measureline--echo {
  stroke: var(--blue);
  stroke-width: 10;
  opacity: .15;
  transform: translateY(7px);
}
.hero__route-line .measureline-point {
  opacity: 0;
  animation: reveal-point .35s 1.8s ease forwards;
}
@keyframes draw-route { to { stroke-dashoffset: 0; } }
@keyframes reveal-point { to { opacity: 1; } }
.hero__ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(980px, 100%);
  margin: 44px 0 0;
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper-bright);
}
.hero__ledger::before {
  content: "OFFICIELLA TIDER · REFERENSER INFÖR DEBUTEN";
  position: absolute;
  left: -1px;
  bottom: 100%;
  padding: 5px 9px 4px;
  color: var(--paper-bright);
  background: var(--ink);
  font: 650 8px/1 var(--mono);
  letter-spacing: .11em;
}
.hero__ledger div { min-width: 0; padding: 18px 20px 17px; }
.hero__ledger div + div { border-left: 1px solid var(--ink); }
.hero__ledger dt,
.hero__ledger small { display: block; color: var(--muted); font: 600 9px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero__ledger dd {
  margin: 5px 0 2px;
  font: 550 clamp(27px, 3vw, 43px)/1 var(--mono);
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
}
.hero__ledger-record { box-shadow: inset 0 -5px var(--warm); }
.hero__ledger-record dd { color: var(--warm-dark); }
.hero__ledger-blank dd { color: rgba(23,23,21,.33); letter-spacing: -.1em; }
.scroll-cue {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 30px;
  color: var(--warm-dark);
  font: 650 10px var(--mono);
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.scroll-cue span { display: inline-block; animation: cue 1.4s ease-in-out infinite alternate; }
@keyframes cue { to { transform: translateY(5px); } }

/* The opening reads as a printed race poster; text remains live and accessible. */
.hero--poster .hero__inner { width: min(1080px, calc(100% - 64px)); padding: 32px 0 56px; }
.hero--poster .hero__masthead { margin-bottom: 26px; }
.hero--poster h1.hero__headline { text-align: center; font-size: clamp(52px, 7.7vw, 108px); line-height: .94; letter-spacing: -.055em; }
.hero--poster .hero__headline em { color: inherit; }
.hero__art { margin: 28px 0 32px; }
.hero__art img { display: block; width: 100%; height: auto; }
.hero__art figcaption { border-bottom: 1px solid var(--ink); padding: 13px 0; text-align: center; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero--poster .hero__lead { margin: 0 auto; text-align: center; max-width: 710px; }
.hero--poster .hero__quote { margin: 24px auto 0; }
.hero--poster .hero__ledger { margin: 44px auto 0; }
.hero--poster .scroll-cue { display: flex; width: fit-content; margin: 28px auto 0; }
.hero__art-credit { margin: 22px 0 0; color: var(--muted); font: 10px/1.5 var(--sans); text-align: center; }
@media (max-width: 820px) {
  .hero.hero--poster .hero__inner { width: calc(100% - 32px); padding: 22px 0 34px; }
  .hero--poster h1.hero__headline { font-size: clamp(37px, 9vw, 72px); line-height: 1; }
  .hero--poster .hero__masthead { margin-bottom: 22px; }
  .hero__art { margin-top: 22px; margin-bottom: 26px; }
  .hero__art figcaption { font-size: 8px; letter-spacing: .035em; }
  .hero--poster .hero__lead { text-align: left; }
}

/* Shared scrolly grammar */
.chapter-intro { padding: 150px 0 100px; }
.chapter-intro { position: relative; }
.chapter-intro::before {
  content: attr(data-chapter) " / " attr(data-measure);
  position: absolute;
  top: 82px;
  left: 0;
  padding-right: 12px;
  color: var(--muted);
  background: inherit;
  font: 650 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chapter-intro::after {
  content: "";
  position: absolute;
  top: 86px;
  left: 170px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--warm) 0 18%, var(--line) 18% 100%);
}
.chapter-intro h2 {
  max-width: 980px;
  margin: 0;
  font: 400 clamp(45px, 6vw, 86px)/.93 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.chapter-intro > p:last-child { max-width: 680px; margin: 30px 0 0; font-size: clamp(18px, 1.45vw, 22px); }
.chapter-intro--dark { color: var(--paper); }
.chapter-intro--dark .kicker { color: var(--warm-soft); }
.chapter-intro--dark::before { color: rgba(245,245,243,.62); }
.chapter-intro--dark::after { background: linear-gradient(90deg, var(--warm) 0 18%, var(--line-light) 18% 100%); }
.scrolly-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(330px, .72fr);
  width: min(1500px, calc(100% - 48px));
  margin-inline: auto;
}
.sticky-stage {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
  min-width: 0;
  overflow: hidden;
}
.steps { position: relative; z-index: 4; min-width: 0; }
.step {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 36px;
  opacity: .42;
  transition: opacity .35s ease;
}
.step.is-active { opacity: 1; }
.step__index { margin: 0 0 14px; color: var(--warm-dark); }
.step__date { margin: 0 0 10px; color: var(--warm-soft); }
.step h3 {
  margin: 0;
  font: 400 clamp(31px, 3.15vw, 48px)/.98 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.step > p:last-child,
.step h3 + p { margin: 22px 0 0; }
.number-mark {
  padding: 0 .04em;
  background: linear-gradient(transparent 70%, rgba(223,75,50,.3) 70% 94%, transparent 94%) 0 0 / 0 100% no-repeat;
  transition: background-size .65s .12s var(--ease);
}
.step.is-active .number-mark { background-size: 100% 100%; }

/* Route and history */
.history {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  color: var(--paper);
  background: var(--night);
}
.history__stage,
.history__steps { grid-area: 1 / 1; }
.history__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--night);
}
.history__stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 18px;
  border: 1px solid rgba(245,245,243,.2);
  pointer-events: none;
}
.stage-label {
  position: absolute;
  z-index: 5;
  top: 25px;
  left: max(26px, 4vw);
  right: max(26px, 4vw);
  display: flex;
  justify-content: space-between;
  color: rgba(245,245,243,.47);
}
.history__map { position: absolute; inset: 0 0 0 24%; display: grid; place-items: center; }
#route-map {
  width: min(100%, 1120px);
  height: min(100%, 900px);
  overflow: visible;
  transition: opacity .4s ease;
}
.map-land path { fill: #2a493b; stroke: rgba(88,118,180,.34); stroke-width: 1.2; }
.map-grid path { fill: none; stroke: rgba(245,245,243,.12); stroke-width: 1.1; }
.park-shape path:first-child { fill: rgba(239,198,45,.1); stroke: rgba(239,198,45,.3); }
.park-shape path:last-child { fill: none; stroke: rgba(239,198,45,.27); stroke-width: 1.4; }
.bridge path { fill: none; stroke: rgba(245,245,243,.85); stroke-width: 4; stroke-dasharray: 4 6; }
.bridge circle { fill: var(--paper); }
.city-lights circle { fill: var(--yellow); opacity: .22; animation: city-light 2.6s ease-in-out infinite alternate; }
.city-lights circle:nth-child(3n) { animation-delay: -.8s; }
.city-lights circle:nth-child(4n) { animation-delay: -1.7s; }
@keyframes city-light { to { opacity: .75; } }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route--road { stroke: rgba(245,245,243,.16); stroke-width: 38; }
.route--shadow { stroke: rgba(0,0,0,.32); stroke-width: 26; }
.route--progress { stroke: var(--warm); stroke-width: 20; filter: none; }
.route--centre { stroke: rgba(255,255,255,.83); stroke-width: 2; stroke-dasharray: 3 10; }
.map-labels text { fill: rgba(245,245,243,.39); font: 650 10px var(--mono); letter-spacing: .14em; }
.map-labels .finish-label { fill: var(--paper); }
.milestone circle { fill: var(--night-raised); stroke: rgba(245,245,243,.9); stroke-width: 2; transition: fill .3s ease, r .3s ease; }
.milestone text { fill: var(--paper); font: 700 11px var(--mono); text-anchor: middle; dominant-baseline: central; }
.milestone.is-passed circle { fill: var(--warm); }
.milestone.is-active circle { fill: var(--paper); stroke: var(--warm); stroke-width: 5; r: 18px; }
.milestone.is-active text { fill: var(--ink); }
.pack-runner { fill: var(--paper); stroke: var(--blue); stroke-width: 3; }
.pack-runner--lead { fill: var(--paper); stroke: var(--warm); stroke-width: 5; }
.history__readout {
  position: absolute;
  z-index: 5;
  right: max(27px, 4vw);
  bottom: 38px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.history__readout strong { font-size: clamp(37px, 5vw, 68px); line-height: 1; letter-spacing: -.08em; }
.history__readout span { color: rgba(245,245,243,.55); font-size: 12px; text-transform: uppercase; }
.history__progress { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245,245,243,.12); }
.history__progress i { display: block; width: 100%; height: 100%; background: var(--warm); transform: scaleX(0); transform-origin: left; }
.history__steps { position: relative; z-index: 4; width: min(1500px, calc(100% - 48px)); margin-inline: auto; pointer-events: none; }
.history-step { width: min(440px, 45vw); pointer-events: auto; color: var(--paper); }
.history-step p:not(.step__index, .step__date) { max-width: 420px; color: rgba(245,245,243,.78); }
.history-step h3 { max-width: 500px; font-size: clamp(35px, 4vw, 57px); }
.history-step::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: min(530px, 45vw);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--card-accent, var(--warm));
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .3s ease, transform .45s var(--ease);
}
.history-step::after {
  content: attr(data-card-label);
  position: absolute;
  z-index: 1;
  top: calc(20% + 22px);
  left: 36px;
  color: var(--card-accent-text, var(--warm-dark));
  font: 700 8px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
}
.history-step:nth-child(2) { --card-accent: var(--blue); --card-accent-text: #405589; }
.history-step:nth-child(3) { --card-accent: var(--yellow); --card-accent-text: #755d00; }
.history-step:nth-child(4) { --card-accent: var(--green); --card-accent-text: var(--green); }
.history-step:nth-child(5) { --card-accent: var(--warm); --card-accent-text: var(--warm-dark); }
.history-step:nth-child(6) { --card-accent: var(--blue); --card-accent-text: #405589; }
.history-step { position: relative; }
.history-step.is-active { color: var(--ink); }
.history-step.is-active::before { opacity: 1; transform: none; }
.history-step.is-active::after { opacity: 1; }
.history-step.is-active .step__index { color: var(--ink); }
.history-step.is-active .step__date { color: var(--card-accent-text, var(--warm-dark)); }
.history-step.is-active p:not(.step__index, .step__date) { color: #46443d; }

/* Finish-time distribution */
.distribution { background: var(--paper); }
.distribution__scrolly { padding-bottom: 8vh; }
.distribution__stage { padding: 55px 26px 78px; display: grid; place-items: center; }
.distribution__stage::before,
.physiology__stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.chart-heading {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 46px;
  right: 42px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.stage-ruler {
  position: absolute;
  z-index: 3;
  top: 61px;
  left: 42px;
  right: 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font: 650 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stage-ruler i {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, var(--warm) 0 20%, var(--line) 20% 100%);
}
.stage-ruler i::before,
.stage-ruler i::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: currentColor;
}
.stage-ruler i::before { left: 20%; }
.stage-ruler i::after { right: 0; }
.stage-ruler--dark { color: rgba(245,245,243,.5); }
.stage-ruler--dark i { background: linear-gradient(90deg, var(--warm) 0 20%, var(--line-light) 20% 100%); }
#finish-chart { width: 100%; max-height: 82vh; overflow: visible; }
#chart-camera { transition: none; }
#chart-grid line { stroke: rgba(23,23,21,.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
#chart-grid text,
#chart-axis text { fill: var(--muted); font: 600 11px var(--mono); letter-spacing: .03em; }
#finish-area { fill: url(#area-fill); }
#finish-line { fill: none; stroke: var(--warm); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-marker line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.chart-marker text { fill: var(--ink); font: 700 11px var(--mono); letter-spacing: .025em; }
.chart-marker--record line { stroke: var(--warm-dark); stroke-width: 2.4; }
.chart-marker--record text { fill: var(--warm-dark); font-size: 13px; }
.chart-marker--record circle { fill: var(--paper-bright); stroke: var(--warm); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-marker--four line { stroke: rgba(23,23,21,.46); }
.chart-bin-highlight { fill: rgba(239,198,45,.16); stroke: var(--yellow); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .35s ease; }
.distribution__stage[data-distribution-mode="peak"] .chart-bin-highlight { opacity: 1; }
.distribution__stat {
  position: absolute;
  left: 48px;
  bottom: 36px;
  display: flex;
  flex-direction: column;
}
.distribution__stat span { color: var(--muted); font: 650 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.distribution__stat strong { font: 560 clamp(29px, 3.2vw, 46px)/1.1 var(--mono); letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.distribution__note { position: absolute; right: 42px; bottom: 42px; max-width: 280px; color: var(--muted); font: 600 10px/1.4 var(--mono); text-align: right; }
.distribution-step { color: var(--ink); }

/* 400 metre track */
.track { color: var(--paper); background: var(--night); }
.track__scrolly { padding-bottom: 8vh; }
.track__stage { display: grid; place-items: center; padding: 52px 28px 132px; background: var(--night); }
.track__stage::before,
.training__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 18px;
  border: 1px solid rgba(245,245,243,.22);
  pointer-events: none;
}
.track__clock {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 44px;
  display: flex;
  align-items: baseline;
  gap: 13px;
  color: rgba(245,245,243,.5);
  font: 650 9px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.track__clock strong { color: var(--paper); font-size: 23px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.track__measure {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: 44px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(245,245,243,.53);
  font: 650 9px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.track__measure strong { color: var(--warm-soft); font-size: 16px; font-variant-numeric: tabular-nums; }
#track-visual { width: 100%; max-height: 72vh; overflow: visible; }
.track-ground { fill: #b94b35; stroke: #df7259; stroke-width: 4; }
.track-field { fill: var(--green); stroke: rgba(255,255,255,.16); stroke-width: 2; }
.track-markings path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.25; }
.track-markings .start-line { stroke: var(--paper); stroke-width: 4; }
.track-markings text { fill: rgba(245,245,243,.45); font: 650 10px var(--mono); letter-spacing: .09em; }
.runner-lane { fill: none; stroke: none; }
#lane-four { stroke: rgba(245,245,243,.24); stroke-width: 1; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; }
.runner-glow { filter: none; opacity: .28; }
.runner-dot,
.runner-arrow { stroke: var(--night); stroke-width: 2; }
.runner-four { fill: var(--blue); }
.runner-record { fill: var(--warm); }
.runner-almgren { fill: var(--yellow); }
.track-key text { fill: rgba(245,245,243,.77); font: 600 11px var(--mono); }
.track__numbers {
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 47px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
}
.track__numbers::before {
  content: "MÅLLINJE · GEMENSAM TID · MÅLLINJE";
  position: absolute;
  left: -1px;
  bottom: 100%;
  padding: 5px 9px 4px;
  color: var(--paper-bright);
  background: var(--ink);
  font: 650 8px/1 var(--mono);
  letter-spacing: .11em;
}
.track__numbers div { padding: 12px 14px 10px; }
.track__numbers div + div { border-left: 1px solid var(--ink); }
.track__numbers dt { color: var(--muted); font: 650 9px var(--mono); }
.track__numbers dd { margin: 3px 0 2px; font: 600 clamp(20px, 2vw, 30px)/1 var(--mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.track__numbers small { color: var(--muted); font: 500 9px var(--mono); }
.track__caption { position: absolute; right: 41px; bottom: 24px; margin: 0; color: var(--warm-soft); font: 600 10px var(--mono); }
.track-step { color: var(--paper); }
.track-step .step__index { color: var(--warm-soft); }
.track-step p:not(.step__index) { color: rgba(245,245,243,.76); }
.track__aside { padding-top: 15px; border-top: 1px solid var(--line-light); font: 600 12px var(--mono); }

/* Physiology */
.physiology { background: var(--paper-bright); }
.physiology__scrolly { padding-bottom: 8vh; }
.physiology__stage { display: grid; place-items: center; padding: 62px 24px 80px; }
.physiology__title,
.training__topline {
  position: absolute;
  z-index: 3;
  top: 32px;
  left: 42px;
  right: 42px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
#physiology-visual { position: relative; width: 100%; height: min(72vh, 720px); min-height: 0; }
.phys-layer { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .55s ease, transform .7s var(--ease), visibility .55s; pointer-events: none; }
.physiology__stage[data-physiology-mode="mechanics"] .phys-layer--mechanics,
.physiology__stage[data-physiology-mode="oxygen"] .phys-layer--oxygen,
.physiology__stage[data-physiology-mode="economy"] .phys-layer--economy,
.physiology__stage[data-physiology-mode="durability"] .phys-layer--durability { opacity: 1; visibility: visible; transform: none; }
.anatomy-plates img,
.mechanics-plate { mix-blend-mode: multiply; }
.mechanics-plate { width: 100%; height: 100%; }
.anatomy-ground { stroke: var(--ink); stroke-width: 1; opacity: .3; }
.anatomy-leader { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.anatomy-target { fill: none; stroke: var(--warm-dark); stroke-width: 1.7; }
.detail-paper { fill: var(--paper-bright); }
.anatomy-lens { fill: none; stroke: var(--line); stroke-width: 1.4; }
.anatomy-label,
.anatomy-plate-index { fill: var(--muted); font: 500 15px var(--mono); letter-spacing: .06em; }
.anatomy-plate-index { font-size: 13px; }
.anatomy-label { fill: var(--ink); }
.anatomy-handnote { fill: var(--ink); font: italic 29px var(--serif); }
.anatomy-underline { fill: none; stroke: var(--warm-dark); stroke-width: 2; }
.tendon-force { fill: none; stroke: var(--warm-dark); stroke-width: 2.3; stroke-dasharray: 5 6; }
.calf-detail { transform-origin: 672px 340px; transform: scale(.87); transition: transform 1.1s var(--ease); }
[data-physiology-mode="mechanics"] .calf-detail { transform: scale(1); }
.anatomy-eyebrow { color: var(--muted); font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.oxygen-heading h3,
.durability-heading h3 { margin: 6px 0 0; font: 400 clamp(30px, 3.5vw, 54px)/1.1 var(--display); letter-spacing: -.035em; }
.phys-layer--oxygen { display: flex; flex-direction: column; justify-content: center; padding: 20px 18px; }
.oxygen-heading { text-align: center; }
.oxygen-organs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; min-height: 0; margin-top: 14px; mix-blend-mode: multiply; }
.oxygen-organs svg { width: 100%; height: min(34vh, 320px); overflow: hidden; }
.oxygen-stations { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 24px 0 0; }
.oxygen-stations::before { content: ""; position: absolute; top: 7px; left: 16%; right: 16%; height: 1px; background: var(--blue); }
.oxygen-stations li { position: relative; text-align: center; }
.oxygen-stations li::before { content: ""; position: absolute; top: -21px; left: calc(50% - 4px); width: 7px; height: 7px; border: 1px solid var(--blue); border-radius: 50%; background: var(--paper-bright); }
.oxygen-stations li:nth-child(2)::before,
.oxygen-stations li:nth-child(3)::before { width: 7px; height: 7px; border-radius: 0; border-left: 0; border-bottom: 0; transform: rotate(45deg); background: var(--paper-bright); }
.oxygen-stations span { display: block; color: var(--blue); font: 600 9px/1.4 var(--mono); letter-spacing: .02em; }
.oxygen-stations strong { display: block; margin-top: 7px; font: 400 25px var(--serif); }
.oxygen-stations p { margin: 5px auto 0; max-width: 175px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.oxygen-definition { display: flex; align-items: center; gap: 22px; padding-top: 15px; margin-top: 24px; border-top: 1px solid var(--line); }
.oxygen-definition b { color: var(--blue); font: 500 25px var(--serif); white-space: nowrap; }
.oxygen-definition span { color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 320px; }
.phys-layer--economy { display: flex; flex-direction: column; justify-content: center; padding: 10px 30px; }
.economy-heading { text-align: center; }
.economy-heading h3 { margin: 0; font: 400 64px/1.2 var(--display); letter-spacing: -.05em; }
.economy-heading small { font: 500 15px var(--mono); letter-spacing: 0; }
.economy-comparison { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.economy-person { min-width: 0; text-align: center; padding: 0 22px; }
.economy-person + .economy-person { border-left: 1px solid var(--line); }
.economy-person__name { display: block; font: 500 10px var(--mono); color: var(--muted); letter-spacing: .1em; }
.economy-person img { display: block; height: min(34vh, 330px); width: 100%; object-fit: contain; }
.oxygen-meter { height: 10px; width: 100%; margin: 10px auto; background: rgba(88,118,180,.1); }
.oxygen-meter i { display: block; height: 100%; background: var(--blue); transform: scaleX(.05); transform-origin: left; transition: transform .9s var(--ease); }
.oxygen-meter--higher i { width: 85%; }
.oxygen-meter--lower i { width: 62%; }
[data-physiology-mode="economy"] .oxygen-meter i { transform: scaleX(1); }
.economy-person strong { font: 400 21px var(--serif); }
.economy-method,
.durability-method { margin: 22px 0 0; color: var(--muted); text-align: center; font: 400 10px/1.6 var(--mono); }
.phys-layer--durability { display: flex; flex-direction: column; justify-content: center; padding: 20px; }
.durability-heading { margin: 0 0 28px; }
.durability-plot { width: 100%; max-height: 42vh; }
.durability-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.durability-axis path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.durability-axis text { fill: var(--muted); font: 500 17px var(--mono); }
.durability-area { fill: url(#fatigue-wash); }
.durability-line { fill: none; stroke: var(--warm-dark); stroke-width: 4; stroke-linecap: round; }
.thirty-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 6; }
.thirty-label { fill: var(--ink); font: 500 16px var(--mono); text-anchor: middle; }
.history:not(.is-in-view) .city-lights circle,
.page-hidden .city-lights circle { animation-play-state: paused; }
.physiology__caption,
.training__caption {
  position: absolute;
  right: 42px;
  bottom: 30px;
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font: 600 10px/1.45 var(--mono);
  text-align: right;
}

/* Training: an open notebook, with one persistent spread. */
.training { color: var(--paper); background: var(--night); }
.training__scrolly { padding-bottom: 10vh; }
.training__stage { display: grid; place-items: center; padding: 68px 18px 66px; background: var(--night); }
.training__topline { color: #c5c8bc; }
.training__topline small { font-size: inherit; letter-spacing: .04em; }
.training__caption { color: #c5c8bc; }
.notebook {
  --notebook-ink: #283f5a;
  --notebook-rule: rgba(88,118,180,.17);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: min(72svh, 650px);
  color: var(--notebook-ink);
  border: 1px solid #c9cdd0;
  border-radius: 5px 10px 12px 6px;
  background: #edf0f1;
  box-shadow: 0 5px 0 -2px #cbd0d2, 0 9px 0 -4px #eef0f1, 0 24px 44px #08110d55;
  transform: rotate(-.45deg);
}
.notebook__page { position: relative; min-width: 0; padding: 28px 28px 42px; background: repeating-linear-gradient(transparent 0 29px, var(--notebook-rule) 29px 30px), #ffffff; background-position: 0 108px; }
.notebook__page--week { border-radius: 5px 0 0 5px; padding-right: 35px; background-image: linear-gradient(90deg, transparent 92%, #34414b16), repeating-linear-gradient(transparent 0 29px, var(--notebook-rule) 29px 30px); }
.notebook__page--notes { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 0 9px 11px 0; padding-left: 35px; background-image: linear-gradient(90deg, #34414b12, transparent 8%), repeating-linear-gradient(transparent 0 29px, var(--notebook-rule) 29px 30px); }
.notebook__binding { position: absolute; z-index: 3; top: 22px; bottom: 22px; left: calc(50% - 11px); display: flex; flex-direction: column; justify-content: space-around; width: 22px; pointer-events: none; }
.notebook__binding i { height: 9px; border: 2px solid #858b90; border-right-color: #e0e4e7; border-bottom-color: #555d64; border-radius: 50%; box-shadow: 1px 2px 2px #2224; background: #32382d22; }
.notebook__running-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid #283f5a55; font: 600 9px/1.4 var(--mono); letter-spacing: .04em; color: #65717a; }
.notebook__page h3 { margin: 18px 0 0; color: var(--notebook-ink); font: 400 clamp(25px, 2.5vw, 37px)/1.12 var(--serif); letter-spacing: -.035em; }
.notebook__subhead { margin: 8px 0 23px; color: #65717a; font: 12px/1.4 var(--mono); }
.notebook__week { width: 100%; border-collapse: collapse; font: 14px/1.5 var(--mono); }
.notebook__week th { text-align: left; font-weight: 500; }
.notebook__week thead { color: #65717a; font-size: 10px; text-transform: uppercase; }
.notebook__week thead th { padding-bottom: 10px; }
.notebook__week tbody th { width: 44px; padding: 10px 8px 10px 0; }
.notebook__week td { padding: 10px 0; transition: color .4s, background .4s; }
.notebook__week td span { display: inline-block; }
.notebook__margin-note { margin: 18px 0 0 20px; color: var(--warm-dark); font: italic 19px/1.3 var(--serif); transform: rotate(-3deg); }
.notebook__disclaimer { position: absolute; left: 28px; right: 25px; bottom: 17px; margin: 0; color: #65717a; font: 10px/1.5 var(--mono); }
.notebook__entries { position: relative; min-height: 0; margin-top: 20px; }
.train-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 13px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--ease), visibility .35s; pointer-events: none; }
.training__stage[data-training-mode="volume"] .train-layer--volume,
.training__stage[data-training-mode="threshold"] .train-layer--threshold,
.training__stage[data-training-mode="lactate"] .train-layer--lactate,
.training__stage[data-training-mode="longrun"] .train-layer--longrun { opacity: 1; visibility: visible; transform: none; }
.notebook__entry-label { margin: 0; color: #65717a; font: 11px/1.4 var(--mono); }
.notebook__entries h3 { margin: 0; }
.notebook__big-number { display: flex; flex-direction: column; align-items: flex-start; margin: 7px 0; font: 500 clamp(55px, 6vw, 88px)/1.1 var(--mono); letter-spacing: -.085em; }
.notebook__big-number small { margin-top: 9px; font: 12px var(--mono); letter-spacing: .03em; }
.notebook__circled { position: relative; isolation: isolate; }
.notebook__circled::after { content: ""; position: absolute; inset: -8px -15px; border: 2px solid var(--warm-dark); border-radius: 46% 52% 49% 45%; transform: rotate(-7deg) scale(.93); opacity: 0; transition: opacity .5s .15s, transform .65s var(--ease); }
[data-training-mode="volume"] .notebook__circled::after { opacity: .85; transform: rotate(-7deg) scale(1); }
.notebook__body { margin: 4px 0; font: 15px/1.65 var(--sans); }
.notebook__annotation { padding-left: 14px; border-left: 2px solid var(--warm-dark); }
.notebook__annotation span { font: 10px var(--mono); text-transform: uppercase; color: var(--warm-dark); }
.notebook__annotation p { margin: 6px 0 0; font: italic 19px/1.4 var(--serif); }
.notebook__sessions { margin: 0; }
.notebook__sessions > div { padding: 12px 0; border-bottom: 1px solid #283f5a33; }
.notebook__sessions dt { margin-bottom: 4px; font: 10px var(--mono); text-transform: uppercase; color: #65717a; }
.notebook__sessions dd { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: 16px/1.4 var(--mono); }
.notebook__sessions dd span { color: var(--warm-dark); }
.notebook__sessions .notebook__rest dd { font: italic 17px var(--serif); }
.notebook__ink-note { margin: 5px 0; color: var(--warm-dark); font: italic 20px/1.4 var(--serif); }
.notebook__sample { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-block: 1px solid #283f5a33; }
.notebook__sample svg { flex: 0 0 32px; width: 32px; height: 45px; fill: #b93d2a; }
.notebook__sample svg path + path { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.notebook__sample strong { display: block; font: 500 17px var(--mono); }
.notebook__sample span { display: block; margin-top: 4px; font: 12px/1.5 var(--sans); }
.notebook__checklist { margin: 0; padding-left: 22px; font: 15px/1.6 var(--sans); }
.notebook__checklist li { padding: 3px 0 3px 3px; }
.notebook__checklist li::marker { color: var(--warm-dark); font-family: var(--mono); }
.notebook__big-number--long { font-size: clamp(48px, 5vw, 73px); }
.notebook__big-number--long > span { border-bottom: 2px solid var(--warm-dark); }
.notebook__progression { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font: 12px/1.5 var(--mono); }
.notebook__progression > span { grid-column: 1 / -1; }
.notebook__progression i { align-self: center; height: 1px; background: var(--notebook-ink); position: relative; }
.notebook__progression i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.notebook__progression strong { color: var(--warm-dark); font-weight: 500; }
.notebook__progression small { grid-column: 1 / -1; font: 11px var(--mono); }
.notebook__footer { display: flex; justify-content: space-between; padding-top: 13px; margin-top: 16px; border-top: 1px solid #283f5a33; color: #65717a; font: 9px var(--mono); }
[data-training-mode="threshold"] .notebook__double td { color: var(--warm-dark); background: #df4b3210; }
[data-training-mode="longrun"] .notebook__long td { color: var(--warm-dark); background: #df4b3210; }
.training-step { color: var(--paper); }
.training-step .step__index { color: var(--warm-soft); }
.training-step p:not(.step__index) { color: rgba(245,245,243,.85); }
@media (min-width: 821px) and (max-width: 1100px) {
  .notebook { grid-template-columns: 1fr; width: min(440px, 100%); }
  .notebook__page--week { display: none; }
  .notebook__binding { left: 6px; width: 19px; }
  .notebook__page--notes { border-radius: 5px 9px 11px 5px; padding-left: 43px; }
}
@media (min-width: 821px) and (max-height: 740px) {
  .notebook { height: calc(100svh - 134px); }
  .notebook__week tbody th, .notebook__week td { padding-block: 5px; }
  .notebook__margin-note { margin-top: 10px; font-size: 16px; }
  .notebook__page { padding-top: 18px; padding-bottom: 20px; }
  .notebook__entries { margin-top: 10px; }
  .train-layer { gap: 8px; }
  .notebook__entries h3 { font-size: 25px; }
  .notebook__big-number { font-size: 52px; }
  .notebook__body { font-size: 13px; }
  .notebook__annotation p, .notebook__ink-note { font-size: 17px; }
  .notebook__sessions > div { padding: 6px 0; }
}

/* Finish */
.finish { position: relative; overflow: hidden; color: var(--ink); background: var(--paper); }
.finish__inner { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 70px; }
.finish h2 { max-width: 920px; margin: 0; font: 400 clamp(48px, 7vw, 98px)/.88 var(--display); letter-spacing: -.052em; }
.finish__route { position: absolute; inset: 4% -4% auto; height: 38%; opacity: .34; }
.finish__route svg { width: 100%; height: 100%; }
.finish__route path { stroke-width: 5; }
.finish__route circle { fill: var(--paper); stroke: var(--warm); stroke-width: 4; }
.finish__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(940px, 100%); margin: 65px 0 0; border-block: 1px solid var(--line); }
.finish__times { position: relative; border: 1px solid var(--ink); background: var(--paper-bright); }
.finish__times::before {
  content: "FINISH · NEW YORK CITY · FINISH";
  position: absolute;
  left: -1px;
  bottom: 100%;
  padding: 6px 10px 5px;
  color: var(--paper-bright);
  background: var(--ink);
  font: 650 9px/1 var(--mono);
  letter-spacing: .11em;
}
.finish__times div { padding: 24px 30px 22px; }
.finish__times div + div { border-left: 1px solid var(--ink); }
.finish__times dt,
.finish__times small { color: var(--muted); font: 650 10px var(--mono); text-transform: uppercase; }
.finish__times dd { margin: 8px 0 4px; font: 600 clamp(45px, 7vw, 92px)/.9 var(--mono); letter-spacing: -.095em; font-variant-numeric: tabular-nums; }
.finish__times div:last-child dd { color: rgba(23,23,21,.31); }
.finish__text { max-width: 750px; margin: 48px 0 130px; font: 460 clamp(20px, 2vw, 28px)/1.48 var(--serif); }
.sources { padding-top: 20px; border-top: 1px solid var(--line); }
.sources summary { width: fit-content; cursor: pointer; color: var(--warm-dark); font: 650 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.sources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 35px 0 45px; }
.sources__grid h3 { margin: 0 0 18px; font: 500 24px var(--serif); }
.sources__grid p { margin: 0 0 11px; color: var(--muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 1100px) {
  .hero__inner { width: min(100% - 60px, 1100px); }
  .hero h1 { max-width: 850px; }
  .scrolly-grid { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); }
  .step { padding-inline: 24px; }
  .history__map { left: 20%; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .page-width { width: min(100% - 38px, 680px); }
  .hero { min-height: 100svh; align-items: end; }
  .hero::after { width: 65%; }
  .hero__inner { width: calc(100% - 38px); padding: 30px 0 34px; }
  .hero__masthead { font-size: 8px; margin-bottom: 36px; }
  .hero h1.hero__headline { font-size: clamp(38px, 9.1vw, 74px); line-height: 1; }
  .hero h1 { line-height: .92; }
  .hero__question { margin-bottom: .55em; font-size: clamp(12px, 3.5vw, 16px); }
  .hero__record-word { font-size: clamp(62px, 20vw, 104px); line-height: .74; }
  .hero__place { margin-top: .16em; font-size: clamp(43px, 13vw, 70px); line-height: .84; }
  .hero__lead { margin-top: 26px; font-size: 18px; }
  .hero__quote { font-size: 13px; }
  .hero__ghost-time { top: 4%; right: -14vw; font-size: 32vw; opacity: .78; }
  .hero__route-line { bottom: 4%; height: 27%; opacity: .55; }
  .hero__ledger { grid-template-columns: repeat(2, 1fr); margin-top: 31px; }
  .hero__ledger div { padding: 14px 12px 14px 0; }
  .hero__ledger div + div { padding-left: 13px; }
  .hero__ledger div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero__ledger div:nth-child(4) { border-top: 1px solid var(--line); }
  .hero__ledger dd { font-size: clamp(25px, 8vw, 36px); }
  .scroll-cue { margin-top: 20px; }
  .chapter-intro { padding: 116px 0 66px; }
  .chapter-intro::before { top: 62px; }
  .chapter-intro::after { top: 66px; left: 142px; }
  .chapter-intro h2 { font-size: clamp(43px, 12vw, 66px); }
  .chapter-intro > p:last-child { margin-top: 22px; font-size: 17px; }

  .scrolly-grid { display: block; width: 100%; }
  .sticky-stage { z-index: 1; height: 58vh; height: 58svh; }
  .scrolly-grid > .steps { z-index: 3; width: 100%; margin-top: 0; padding-inline: 0; }
  .step {
    width: 100%;
    min-height: 76vh;
    min-height: 76svh;
    justify-content: flex-start;
    padding: 30px 0 30vh;
    opacity: 0;
  }
  .step > * { position: relative; z-index: 2; width: 100%; padding-inline: 32px; }
  .step::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: min(340px, 43vh);
    background: var(--paper-bright);
    border-top: 1px solid var(--ink);
    box-shadow: none;
  }
  .step h3 { font-size: clamp(31px, 9.5vw, 43px); }
  .step h3 + p { margin-top: 16px; }
  .track-step::after,
  .training-step::after { background: var(--night); border-top-color: rgba(245,245,243,.4); box-shadow: none; }

  .history { display: block; }
  .history__stage { z-index: 1; height: 62vh; height: 62svh; }
  .history__map { inset: 7% -5% 0 -5%; }
  #route-map { width: 100%; height: 100%; }
  .stage-label { top: 16px; left: 17px; right: 17px; font-size: 8px; }
  .map-labels text { font-size: 8px; }
  .history__readout { right: 18px; bottom: 24px; }
  .history__readout strong { font-size: 39px; }
  .history__steps { z-index: 3; width: 100%; margin-top: 0; padding-inline: 12px; }
  .history-step { width: 100%; min-height: 80vh; min-height: 80svh; justify-content: flex-start; padding: 58px 0 32vh; opacity: 0; }
  .history-step::before {
    display: block;
    top: 18px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: min(350px, 47vh);
    box-shadow: 5px 5px 0 var(--card-accent, var(--warm));
  }
  .history-step::after {
    content: attr(data-card-label);
    top: 39px;
    left: 22px;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    color: var(--card-accent-text, var(--warm-dark));
    background: none;
    border: 0;
    box-shadow: none;
  }
  .history-step > * { width: 100%; max-width: none; padding-inline: 22px; }
  .history-step h3 { max-width: none; font-size: clamp(34px, 10vw, 48px); }
  .history-step p:not(.step__index, .step__date) { max-width: none; }

  .distribution__stage { padding: 45px 6px 48px; background: var(--paper); }
  .chart-heading { top: 14px; left: 18px; right: 18px; font-size: 8px; }
  #finish-chart { height: 45vh; max-height: none; }
  .distribution__stage[data-distribution-mode="full"] #chart-grid text,
  .distribution__stage[data-distribution-mode="full"] #chart-axis text { font-size: 20px; }
  .distribution__stage[data-distribution-mode="full"] .chart-marker text { font-size: 18px; }
  .distribution__stat { left: 20px; bottom: 14px; }
  .distribution__stat strong { font-size: 28px; }
  .distribution__note { right: 18px; bottom: 17px; max-width: 170px; font-size: 8px; }

  .track__stage { height: 62vh; height: 62svh; padding: 42px 5px 122px; }
  .track__clock { top: 15px; left: 18px; }
  .track__clock strong { font-size: 18px; }
  .track__measure { top: 16px; right: 18px; font-size: 8px; }
  .track__measure strong { font-size: 13px; }
  #track-visual { height: 42vh; max-height: none; }
  .track__numbers { left: 17px; right: 17px; bottom: 42px; }
  .track__numbers div { padding-top: 8px; }
  .track__numbers div + div { padding-left: 8px; }
  .track__numbers dd { font-size: clamp(16px, 4.5vw, 22px); }
  .track__numbers small { display: none; }
  .track__caption { left: 18px; right: 18px; bottom: 14px; text-align: left; }

  .physiology__stage { z-index: 5; height: 62vh; height: 62svh; min-height: 360px; padding: 50px 4px 48px; background: var(--paper-bright); }
  .physiology__title,
  .training__topline { top: 15px; left: 18px; right: 18px; font-size: 8px; }
  .stage-ruler { top: 39px; left: 18px; right: 18px; font-size: 7px; }
  #physiology-visual { height: 100%; max-height: none; }
  .phys-layer--oxygen { display: grid; grid-template-rows: auto minmax(60px, 1fr) auto; align-content: stretch; padding: 0 14px; }
  .oxygen-heading h3, .durability-heading h3 { font-size: 30px; }
  .anatomy-eyebrow { font-size: 8px; }
  .oxygen-organs { flex-shrink: 0; margin-top: 6px; gap: 12px; }
  .oxygen-organs svg { height: 100%; min-height: 0; max-height: 170px; align-self: center; }
  .oxygen-stations { gap: 12px; padding-top: 20px; }
  .oxygen-stations::before { top: 3px; }
  .oxygen-stations span { font-size: 8px; }
  .oxygen-stations strong { margin-top: 4px; font-size: 19px; }
  .oxygen-stations p { font-size: 11px; line-height: 1.35; }
  .oxygen-definition { display: none; }
  .oxygen-definition b { font-size: 22px; }
  .oxygen-definition span { font-size: 10px; line-height: 1.3; }
  .phys-layer--economy { display: grid; grid-template-rows: auto minmax(80px, 1fr) auto; align-content: stretch; padding: 0 14px; }
  .economy-heading h3 { font-size: 44px; }
  .economy-heading small { font-size: 12px; }
  .economy-comparison { min-height: 0; }
  .economy-person { display: flex; flex-direction: column; min-height: 0; padding: 0 16px; }
  .economy-person img { flex: 1; height: 0; min-height: 0; max-height: 210px; }
  .oxygen-meter { flex-shrink: 0; }
  .economy-person strong { font-size: 19px; }
  .economy-person__name { font-size: 8px; }
  .economy-method, .durability-method { margin-top: 12px; font-size: 9px; }
  .phys-layer--durability { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 18px; }
  .durability-heading { margin-bottom: 12px; }
  .durability-plot { height: 100%; min-height: 0; max-height: none; }
  .anatomy-label { font-size: 25px; }
  .anatomy-plate-index { display: none; }
  .anatomy-handnote { font-size: 32px; }
  .durability-plot .anatomy-label { font-size: 19px; }
  .durability-axis text, .thirty-label { font-size: 22px; }
  .physiology__caption { left: 18px; right: 18px; bottom: 13px; max-width: none; text-align: left; font-size: 9px; }

  .training__stage { z-index: 5; height: clamp(410px, 66svh, 580px); padding: 45px 18px 58px; }
  .training__topline small { display: none; }
  .notebook { grid-template-columns: 1fr; width: min(460px, 100%); height: 100%; transform: none; }
  .notebook__page--week { display: none; }
  .notebook__binding { left: 5px; top: 14px; bottom: 14px; width: 17px; }
  .notebook__page--notes { padding: 16px 19px 14px 34px; border-radius: 5px 9px 11px 5px; }
  .notebook__running-head { font-size: 8px; padding-bottom: 8px; }
  .notebook__entries { margin-top: 10px; }
  .train-layer { justify-content: space-between; gap: 8px; }
  .notebook__entry-label { font-size: 10px; }
  .notebook__entries h3 { font-size: 25px; }
  .notebook__big-number { font-size: 54px; margin: 6px 0; }
  .notebook__big-number small { font-size: 11px; margin-top: 4px; }
  .notebook__body { font-size: 13px; line-height: 1.5; margin: 0; }
  .notebook__annotation { padding-left: 10px; }
  .notebook__annotation span { font-size: 9px; }
  .notebook__annotation p { font-size: 16px; line-height: 1.3; margin-top: 4px; }
  .notebook__sessions > div { padding: 6px 0; }
  .notebook__sessions dt { font-size: 9px; }
  .notebook__sessions dd { font-size: 14px; }
  .notebook__sessions .notebook__rest dd { font-size: 15px; }
  .notebook__ink-note { font-size: 16px; line-height: 1.3; margin: 0; }
  .notebook__sample { gap: 10px; padding: 7px 0; }
  .notebook__sample strong { font-size: 14px; }
  .notebook__sample span { font-size: 11px; }
  .notebook__checklist { font-size: 13px; line-height: 1.5; }
  .notebook__checklist li { padding-block: 1px; }
  .notebook__progression { font-size: 11px; gap: 7px; }
  .notebook__footer { font-size: 8px; padding-top: 8px; margin-top: 10px; }
  .training__caption { left: 18px; right: 18px; bottom: 13px; max-width: none; text-align: left; font-size: 9px; }

  .finish__inner { padding-top: 125px; padding-bottom: 45px; }
  .finish h2 { font-size: clamp(48px, 13vw, 70px); }
  .finish__route { top: 5%; height: 24%; }
  .finish__times { margin-top: 45px; }
  .finish__times div { padding: 18px 12px 17px 0; }
  .finish__times div + div { padding-left: 14px; }
  .finish__times dd { font-size: clamp(32px, 9vw, 50px); }
  .finish__times small { font-size: 8px; }
  .finish__text { margin: 38px 0 92px; font-size: 21px; }
  .sources__grid { grid-template-columns: 1fr; gap: 23px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .notebook__entries h3 { display: none; }
  .notebook__footer { display: none; }
  .notebook__big-number { font-size: 46px; }
  .train-layer { gap: 6px; }
  .notebook__ink-note, .notebook__annotation p { font-size: 15px; }
}

@media (max-width: 420px) {
  .hero__record-word { font-size: clamp(58px, 19vw, 80px); }
  .hero__place { font-size: clamp(39px, 12.5vw, 55px); }
  .hero__lead { font-size: 16px; }
  .hero__quote { font-size: 11px; }
  .hero__ledger { margin-top: 23px; }
  .hero__ledger div { padding-block: 11px; }
  .hero__ledger dd { font-size: 25px; }
  .hero__ledger-blank dd { font-size: 21px; }
  .hero__ledger small { font-size: 7px; }
  .chapter-intro { padding-top: 88px; }
  .chapter-intro h2 { font-size: 42px; }
  .step { min-height: 78svh; }
  .step > * { padding-inline: 22px; }
  .step::after { left: 0; right: 0; }
  .history__steps { padding-inline: 10px; }
  .scrolly-grid > .steps { padding-inline: 0; }
  .history-step::after { left: 22px; right: auto; }
  .history-step::before { left: 0; right: 0; }
  .track-key { transform: translate(0 20px); }
  .track-key text { font-size: 9px; }
  .sources__grid p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__route-line path { stroke-dashoffset: 0; }
  .hero__route-line .measureline-point { opacity: 1; animation: none; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.reduce-motion { scroll-behavior: auto; }
.reduce-motion .hero__route-line path { stroke-dashoffset: 0; }
.reduce-motion .hero__route-line .measureline-point { opacity: 1; animation: none; }

:root { --paper: #e6eaf3; --paper-bright: #f5f7fc; --muted: #555e70; --bib-blue: #121b50; --hand: "Caveat", "Noteworthy", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.hero { background-color: var(--paper); }
.history-step { padding: 32px 0; width: min(440px, 40vw); }
.history-step::before, .history-step::after { display: none; }
.bib { position: relative; overflow: hidden; width: 100%; color: var(--bib-blue); background: #fff; border: 1px solid #c9cedc; border-radius: 3px; box-shadow: 3px 9px 24px #0003; transform: rotate(-1deg); }
.history-step:nth-child(even) .bib { transform: rotate(1deg); }
.bib::before, .bib::after { content: ""; position: absolute; z-index: 2; width: 17px; height: 5px; top: 13px; border: 1px solid #bec5d7; border-radius: 8px; background: #7e879e; transform: rotate(-32deg); }
.bib::before { left: 10px; }.bib::after { right: 10px; transform: rotate(32deg); }
.bib__header, .bib__footer { display: flex; align-items: center; justify-content: space-between; background: var(--bib-blue); color: white; padding: 16px 30px; font: 700 10px var(--sans); letter-spacing: .1em; }
.bib__footer { padding: 12px 24px; margin-top: 25px; border-top: 1px dashed #aab0c9; }
.bib__footer b { font: 800 27px/1 var(--sans); }
.bib > .step__index { padding: 19px 24px 0; margin: 0; font-size: 10px; color: #414b70; }
.bib > .step__date, .history-step.is-active .bib > .step__date { margin: 15px 0 19px; padding: 0 24px; color: var(--bib-blue); font: 800 clamp(35px, 4.5vw, 61px)/.95 var(--sans); letter-spacing: -.06em; }
.bib h3 { padding-inline: 24px; font: 700 clamp(24px, 2.5vw, 33px)/1.08 var(--sans); letter-spacing: -.035em; }
.bib > p:last-of-type, .history-step.is-active .bib > p:last-of-type { padding: 0 24px; margin: 18px 0 0; color: #3f4659; font: 400 16px/1.55 var(--sans); }
.street-sign { position: absolute; z-index: 5; bottom: 38px; left: 50%; max-width: 38%; }
.street-sign > span { display: block; padding: 8px 15px; border: 2px solid #dce9e1; border-radius: 3px; background: #235445; color: white; font: 700 16px var(--sans); letter-spacing: .08em; box-shadow: 3px 3px 0 #0003; }
.street-sign small { display: block; margin-top: 10px; color: #e6edf3; font: 11px/1.4 var(--sans); }
.nyc-landmarks text { fill: #dbe6ed; font: 600 8px var(--sans); letter-spacing: .08em; }
.nyc-landmarks .water-label { fill: #8facc5; font: italic 12px var(--serif); letter-spacing: .2em; }
.bridge-deck { fill: none; stroke: #e8eaf3; stroke-width: 2; }
.skyline path { fill: #45665c; stroke: #9ab3ad; stroke-width: 1; }
.skyline text { text-anchor: middle; }
.park-trees circle { fill: #638b56; stroke: #a7b56c; stroke-width: 1; }
.route--road { stroke-width: 17; }.route--shadow { stroke-width: 12; }.route--progress { stroke-width: 8; }.route--centre { stroke-width: 1; stroke-dasharray: 2 6; }
.runner-six { fill: #9eb5f4; }
.track__numbers { grid-template-columns: repeat(4, minmax(0,1fr)); }
.track__numbers div:first-child dt { color: #9eb5f4; }
.track__numbers div:nth-child(2) dt { color: var(--paper); }
.track__numbers div:nth-child(3) dt { color: var(--yellow); }
.track__numbers div:nth-child(4) dt { color: var(--warm-soft); }
.finish__route { display: none; }
.finish__inner { padding-top: 36px; }
@media(max-width:820px) {
 .history-step { width: 100%; padding: 22px 0 32vh; }
 .history-step > .bib { padding: 0; }
 .bib > .step__date { font-size: 44px; }
 .bib h3 { font-size: 28px; }
 .bib > p:last-of-type, .history-step.is-active .bib > p:last-of-type { font-size: 15px; }
 .bib__header { padding-block: 13px; }.bib__footer { margin-top: 18px; padding-block: 9px; }
 .street-sign { left: 20px; bottom: 24px; max-width: 67%; }.street-sign > span { font-size: 12px; }.street-sign small { font-size: 10px; max-width: 190px; }
 .track__numbers dd { font-size: clamp(14px,4.2vw,22px); }.track__numbers dt { font-size: 9px; }
.finish__inner { padding-top: 25px; }.finish__times div:first-child { padding-left: 12px; }
}

.bib > .step__date { text-transform: none; }

.track__numbers div:nth-child(1) dt { color: #405a91; }
.track__numbers div:nth-child(2) dt { color: #405589; }
.track__numbers div:nth-child(3) dt { color: #b93d2a; }
.track__numbers div:nth-child(4) dt { color: #79610a; }
.track-key text { font: 600 15px var(--sans); }
@media(max-width:820px) {
 .track__stage { height: 62svh; }.track__numbers { bottom: 49px; }.track__caption { bottom: 19px; font-size: 8px; max-width: calc(100% - 36px); }
}
@media(max-height:600px) and (min-width:821px) {
 .bib > .step__date { font-size: 38px; margin-block: 10px; }.bib h3 { font-size: 25px; }.bib > p:last-of-type { font-size: 14px; }.bib__header,.bib__footer { padding-block: 8px; }.bib__footer { margin-top: 14px; }
}
@media(max-width:820px) { .track-key text { font-size: 24px; } }

/* Animate the existing anatomical plates, preserving their artwork. */
.oxygen-organs > svg { transform-box: fill-box; transform-origin: center; }
.oxygen-organs > svg:nth-child(1) { animation: anatomy-breathe 2.6s ease-in-out infinite; }
.oxygen-organs > svg:nth-child(2) { animation: anatomy-heartbeat .85s ease-in-out infinite; }
.oxygen-organs > svg:nth-child(3) { animation: anatomy-contract 1.2s ease-in-out infinite; }
.calf-detail > g > svg { transform-box: fill-box; transform-origin: center; animation: anatomy-contract 1.2s ease-in-out infinite; }
@keyframes anatomy-heartbeat { 0%,45%,100% { transform: scale(1); } 15% { transform: scale(1.055); } 30% { transform: scale(1.01); } }
@keyframes anatomy-breathe { 50% { transform: scale(1.025,1.01); } }
@keyframes anatomy-contract { 50% { transform: scale(1.035,.975); } }
.physiology:not(.is-in-view) .oxygen-organs > svg,
.physiology:not(.is-in-view) .calf-detail > g > svg,
.phys-layer[aria-hidden="true"] .oxygen-organs > svg,
.phys-layer[aria-hidden="true"] .calf-detail > g > svg,
.page-hidden .oxygen-organs > svg,
.page-hidden .calf-detail > g > svg { animation-play-state: paused; }
.notebook { --handwriting: "Caveat", "Noteworthy", cursive; }
.notebook__week, .notebook__body, .notebook__ink-note, .notebook__annotation p,
.notebook__entries h3, .notebook__sessions dd, .notebook__margin-note { font-family: "Caveat", "Noteworthy", cursive; }
.notebook__body { font-size: 20px; }
@media(max-width:820px) { .notebook__body { font-size: 17px; } }

/* Source-based training logs: concrete sessions, handwritten summaries. */
.notebook__week { font: 20px/1.18 var(--hand); }
.notebook__week tbody th, .notebook__week td { padding-block: 8px; }
.notebook__week thead { font: 9px var(--mono); }
.notebook__page--week .notebook__subhead { font-size: 10px; }
.notebook__margin-note { font-size: 22px; }
.notebook__disclaimer { font-size: 9px; line-height: 1.5; }
.notebook__entries .diary-entry { justify-content: space-between; gap: 12px; }
.diary-entry[aria-hidden="false"], .diary-entry:not([aria-hidden]) { pointer-events: auto; }
.diary-entry__date { margin: 0; font: 10px/1.4 var(--mono); color: #586879; }
.notebook__entries .diary-entry h3 { font: 600 clamp(27px,2.7vw,37px)/1.1 var(--hand); letter-spacing: -.025em; }
.diary-entry__total { width: fit-content; position: relative; margin: 6px 0 8px; font: 600 80px/1 var(--hand); }
.diary-entry__total::after { content: ""; position: absolute; inset: -5px -14px; border: 2px solid #b93d2aaa; border-radius: 49% 44% 52% 47%; transform: rotate(-5deg); }
.diary-entry__total small { font: 24px var(--hand); }
.diary-entry__facts, .diary-entry__sessions { margin: 0; }
.diary-entry__facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #61738c30; }
.diary-entry__facts dt, .diary-entry__sessions dt { color: #596b81; font: 10px/1.5 var(--mono); }
.diary-entry__facts dd { margin: 0; font: 22px/1.2 var(--hand); }
.diary-entry__sessions > div { padding: 12px 0; border-bottom: 1px solid #61738c30; }
.diary-entry__sessions dd { margin: 3px 0; font: 600 36px/1.1 var(--hand); }
.diary-entry__sessions small { font: 18px var(--hand); }
.diary-entry__pencil { margin: 0; color: #a83f32; font: 22px/1.2 var(--hand); transform: rotate(-1.5deg); }
.diary-entry__source { align-self: flex-start; color: #425971; font: 10px/1.4 var(--sans); text-underline-offset: 3px; }
.diary-entry__splits { border-collapse: collapse; width: 100%; font: 28px/1.25 var(--hand); }
.diary-entry__splits caption { text-align: left; font: 19px/1.5 var(--hand); margin-bottom: 8px; }
.diary-entry__splits th { text-align: left; font: 10px var(--mono); color: #596b81; padding-bottom: 8px; }
.diary-entry__splits td { border-bottom: 1px solid #61738c30; padding: 5px 0; }
.diary-entry__circled { color: #a83f32; font-weight: 600; }
.diary-entry__context { margin: 0; font: 12px/1.45 var(--sans); color: #586879; }
.diary-entry__route { list-style: none; padding: 0; margin: 0; counter-reset: log-step; }
.diary-entry__route li { display: grid; grid-template-columns: 105px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #61738c30; font: 22px/1.15 var(--hand); }
.diary-entry__route b { font-weight: 600; }
.diary-entry__pencil s { text-decoration-thickness: 2px; }
.diary-entry__fuel { margin: 0; padding: 9px 12px; background: #5876b40d; border-left: 2px solid #5876b4; }
.diary-entry__fuel span, .diary-entry__fuel small { display: block; font: 10px/1.5 var(--sans); }
.diary-entry__fuel strong { display: block; margin: 3px 0; font: 600 23px/1.2 var(--hand); }
.training-step .training-plan { font-size: 14px; border-left: 2px solid var(--warm-soft); padding-left: 14px; }
.training-step .training-plan b { color: var(--warm-soft); }
.notebook__footer { font-size: 8px; }
.diary-entry__source:focus-visible, .notebook__disclaimer a:focus-visible { outline: 2px solid #b93d2a; outline-offset: 4px; }
@media(max-width:820px) {
 .training__stage { height: clamp(480px,70svh,640px); }
 .notebook__entries { margin-top: 12px; }
 .notebook__entries .diary-entry { gap: 8px; }
 .notebook__entries .diary-entry h3 { display: block; font-size: 28px; }
 .diary-entry__date { font-size: 9px; }
 .diary-entry__total { font-size: 64px; }
 .diary-entry__facts > div { grid-template-columns: 93px 1fr; padding-block: 7px; }
 .diary-entry__facts dd { font-size: 20px; }
 .diary-entry__sessions > div { padding-block: 8px; }.diary-entry__sessions dd { font-size: 32px; }
 .diary-entry__pencil { font-size: 21px; }
 .diary-entry__source { font-size: 10px; }
 .diary-entry__route li { grid-template-columns: 83px 1fr; font-size: 20px; padding-block: 7px; }
 .diary-entry__fuel strong { font-size: 21px; }
 .diary-entry__context { font-size: 11px; }
 .notebook__footer { display: flex; font-size: 7px; }
 .training__caption { font-size: 9px; }
}
@media(max-height:700px) and (min-width:821px) {
 .notebook__entries .diary-entry { gap: 7px; }
 .notebook__entries .diary-entry h3 { font-size: 26px; }
 .diary-entry__total { font-size: 50px; }
 .diary-entry__facts > div { padding-block: 4px; }.diary-entry__facts dd { font-size: 18px; }
 .diary-entry__sessions > div { padding-block: 5px; }.diary-entry__sessions dd { font-size: 25px; }
 .diary-entry__pencil { font-size: 19px; }.diary-entry__splits { font-size: 23px; }.diary-entry__splits td { padding-block: 2px; }
 .diary-entry__route li { font-size: 18px; padding-block: 5px; }.diary-entry__fuel strong { font-size: 20px; }
 .notebook__margin-note { display: none; }
}
@media(max-width:820px) and (max-height:650px) {
 .training__stage { position: relative; height: 500px; }
 .notebook__entries .diary-entry h3 { font-size: 25px; }
}

.training-research { padding: 0 0 70px; color: #e6eaf3; }
.training-research summary { padding: 20px 0; border-top: 1px solid #e6eaf350; cursor: pointer; font: 500 20px var(--serif); }
.training-research__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-block: 20px; }
.training-research h3 { font: 400 28px var(--serif); margin: 0; }
.training-research p { font: 16px/1.65 var(--sans); max-width: 750px; }
.training-research a { font: 12px/1.5 var(--sans); color: #c5d6ff; }
.training-research .training-research__note { font-size: 13px; color: #c2cdca; }
@media(max-width:820px) { .training-research__grid { grid-template-columns: 1fr; gap: 28px; } }

/* The closing text sits inside a finish corral, with an unstarted clock. */
.finish { background: #e6eaf3; }
.finish-arena { position: relative; isolation: isolate; overflow: hidden; padding: 0 140px 150px; color: #f5f7fc; background: #293640; }
.finish-arena::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,#172e27 0,transparent 24% 76%,#172e27),linear-gradient(#23382f,#343c48 44%); }
.finish-gantry { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 -140px 0; padding: 28px max(36px,8vw); background: #151d50; border-bottom: 7px solid #ef6846; font: 650 12px var(--sans); letter-spacing: .15em; }
.finish-gantry strong { font: 800 clamp(28px,4vw,54px)/1 var(--sans); letter-spacing: .08em; }
.finish-pylon { position: absolute; z-index: 2; top: 100px; bottom: 100px; width: 110px; padding: 28px 16px; background: linear-gradient(105deg,#151d50 0 75%,#f36b3e 75%); border-bottom: 18px solid #f64470; box-shadow: 10px 8px 0 #0002; display: flex; flex-direction: column; justify-content: space-between; }
.finish-pylon--left { left: 18px; transform: skewY(-5deg); }.finish-pylon--right { right: 18px; transform: skewY(5deg); }
.finish-pylon span { font: 700 10px/1.5 var(--sans); }.finish-pylon b { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font: 800 55px/1 var(--sans); letter-spacing: .05em; }.finish-pylon i { font: 700 15px var(--mono); font-style: normal; }
.finish-rails { position: absolute; inset: 220px 7% 50px; z-index: -1; border-inline: 9px solid #bac6c8; transform: perspective(700px) rotateX(20deg); background: repeating-linear-gradient(0deg,transparent 0 85px,#d0dbde13 85px 87px); }
.finish-arena__content { position: relative; max-width: 850px; margin: 58px auto 0; text-align: center; }
.finish-arena .kicker { color: #d8e2de; font-size: 10px; }
.finish-clock { width: min(510px,100%); margin: 28px auto 45px; padding: 19px 20px 16px; background: #090f14; border: 5px solid #15204c; box-shadow: 0 0 0 1px #60707a,0 10px 24px #0004; }
.finish-clock span,.finish-clock small { display: block; font: 650 10px/1.4 var(--mono); letter-spacing: .14em; color: #c6d0d9; }
.finish-clock strong { display: block; margin: 14px 0 12px; color: #dcf191; font: 500 clamp(40px,6.3vw,79px)/1 var(--mono); letter-spacing: -.06em; white-space: nowrap; }
.finish-clock small { font-size: 8px; color: #92a0ae; }
.finish-arena h2 { margin: auto; font-size: clamp(38px,5.4vw,73px); line-height: 1; }
.finish-record { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 18px; margin: 30px auto; font: 10px var(--mono); color: #cbd5dd; }
.finish-record strong { color: white; font: 500 28px var(--mono); }.finish-record span { font-size: 10px; }
.finish-arena .finish__text { max-width: 640px; margin: 25px auto 40px; font: 18px/1.6 var(--serif); color: #e2e8eb; }
.finish-ground { position: relative; z-index: 4; margin: 0 -145px -100px; padding: 23px 20px 15px; background: repeating-linear-gradient(115deg,transparent 0 90px,#ff8c423d 90px 110px),#ea435e; border-block: 7px solid #ff8450; transform: perspective(750px) rotateX(20deg); text-align: center; }
.finish-ground span { display: block; font: 850 clamp(48px,8vw,106px)/.95 var(--sans); letter-spacing: .13em; }.finish-ground small { display: block; margin-top: 14px; font: 650 10px var(--mono); letter-spacing: .13em; }
.finish__inner { padding-top: 45px; }
@media(max-width:820px) {
 .finish-arena { padding: 0 36px 90px; }
 .finish-gantry { margin-inline: -36px; padding: 20px 16px; gap: 10px; font-size: 8px; letter-spacing: .04em; }.finish-gantry strong { font-size: 30px; }
 .finish-pylon { width: 24px; top: 85px; bottom: 55px; padding: 15px 4px; border-bottom-width: 10px; }.finish-pylon--left { left: 3px; }.finish-pylon--right { right: 3px; }.finish-pylon span,.finish-pylon i { display: none; }.finish-pylon b { font-size: 19px; margin-block: auto; }
 .finish-arena__content { margin-top: 35px; }.finish-arena .kicker { font-size: 8px; }.finish-clock { margin-bottom: 32px; padding-inline: 9px; }.finish-clock strong { font-size: clamp(32px,9vw,65px); }.finish-clock span { font-size: 9px; }.finish-clock small { font-size: 7px; }
 .finish-arena h2 { font-size: clamp(33px,8.5vw,58px); }.finish-arena .finish__text { font-size: 17px; }.finish-record { gap: 8px 10px; }.finish-record span { flex-basis: 100%; }
 .finish-ground { margin: 0 -37px -55px; padding-block: 19px 13px; }.finish-ground span { font-size: 52px; }.finish-ground small { font-size: 8px; }
}
/* Keep all notebook states readable on short screens. */
@media(max-width:820px) and (max-height:650px) {
 .training__stage { position: sticky; height: 490px; padding-top: 35px; padding-bottom: 40px; }
 .notebook { height: 100%; }
 .notebook__entries .diary-entry { gap: 5px; }
 .notebook__entries .diary-entry h3 { font-size: 23px; }
 .diary-entry__pencil { font-size: 18px; }.diary-entry__total { font-size: 48px; }
 .diary-entry__facts dd { font-size: 18px; }.diary-entry__route li { font-size: 18px; padding-block: 5px; }
 .diary-entry__sessions dd { font-size: 26px; }.diary-entry__sessions > div { padding-block: 5px; }
 .diary-entry__splits { font-size: 23px; }.diary-entry__splits td { padding-block: 2px; }
 .diary-entry__fuel { padding-block: 6px; }.diary-entry__fuel strong { font-size: 19px; }
 .notebook__footer { margin-top: 6px; padding-top: 5px; }
}

/* Stacked text passes above the visual, except the mobile track override below. */
@media (max-width: 820px) {
  .history__stage, .scrolly-grid > .sticky-stage { z-index: 1; }
  .history__steps, .scrolly-grid > .steps { z-index: 10; pointer-events: none; }
  .steps .step { opacity: 1; transition: none; }
  .step > * { pointer-events: auto; }
  .step:not(.history-step) { padding-bottom: 30svh; }
  .step:not(.history-step)::after {
    top: 0;
    bottom: calc(30svh - 24px);
    height: auto;
    background: var(--paper-bright);
    box-shadow: 0 10px 20px #00000014;
  }
  .track-step::after, .training-step::after { background: var(--night) !important; }
}

/* A ruled weekly planner, written in blue ink with sparse red annotations. */
.notebook { border-radius: 2px; transform: rotate(-.3deg); }
.notebook__binding { display: none; }
.notebook__page--week { padding-right: 24px; background-image: linear-gradient(90deg,transparent 97%,#35414b12); }
.notebook__page--notes { padding-left: 28px; border-left: 1px solid #9ea7ad; }
.notebook__page--week h3 { font: 600 34px/1.1 var(--hand); }
.notebook__subhead { margin-bottom: 15px; }
.planner-week { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #6f7a86; border-left: 1px solid #6f7a86; color: #294563; }
.planner-day, .planner-tally { min-width: 0; padding: 8px 10px; border-right: 1px solid #6f7a86; border-bottom: 1px solid #6f7a86; }
.planner-day h4 { margin: 0 0 5px; padding-bottom: 3px; border-bottom: 1px solid #adb5bc70; font: 600 20px/1 var(--hand); }
.planner-day p { margin: 0; font: 20px/1.12 var(--hand); }
.planner-day p span { color: #667684; font-size: 14px; }
.planner-day small { display: block; margin-top: 3px; font: 17px/1.1 var(--hand); }
.planner-day:nth-child(3n) p { transform: rotate(-1deg); }
.planner-day--quality h4 { color: #9f3e32; }
[data-training-mode="threshold"] .planner-day--quality { background: #eacbb929; }
[data-training-mode="longrun"] .planner-day--long { background: #eacbb929; }
.planner-tally { color: #a43e32; display: flex; flex-direction: column; justify-content: center; }
.planner-tally > span { font: 16px var(--hand); }
.planner-tally strong { width: fit-content; font: 600 32px/1.1 var(--hand); border-bottom: 2px solid #a43e3270; transform: rotate(-3deg); }
.planner-tally strong small { font-size: 19px; }.planner-tally p { margin: 4px 0 0; font: 16px var(--hand); }
.notebook__page--week .notebook__margin-note { display: none; }
.diary-entry__sessions .diary-break { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; padding: 5px 10px; border-left: 2px solid #b93d2a70; }
.diary-break dt { display: none; }
.diary-entry__sessions .diary-break small { font-size: 15px; }
.diary-entry__sessions .diary-break dd { font-size: 25px; color: #a43e32; }
@media(min-width:821px) and (max-height:740px) {
 .planner-day,.planner-tally { padding: 5px 8px; }.planner-day h4 { font-size: 16px; margin-bottom: 3px; }.planner-day p { font-size: 16px; }.planner-day small { font-size: 14px; }.planner-tally strong { font-size: 24px; }
 .notebook__page--week h3 { font-size: 27px; }.notebook__subhead { margin-bottom: 10px; }
}
@media(max-width:1100px) {
 [data-training-mode="volume"] .notebook__page--week { display: block; padding: 16px 20px 48px; }
 [data-training-mode="volume"] .notebook__page--notes { display: none; }
 .notebook__page--notes { padding-left: 22px; border-left: none; }
 .notebook__page--week h3 { font-size: 28px; margin-top: 10px; }
 .notebook__page--week .notebook__subhead { margin: 6px 0 10px; font-size: 9px; }
 .planner-day,.planner-tally { padding: 6px 8px; }
 .planner-day h4 { font-size: 18px; }.planner-day p { font-size: 18px; }.planner-day small { font-size: 15px; }
 .notebook__disclaimer { left: 20px; bottom: 12px; font-size: 8px; }
}
@media(max-width:820px) and (max-height:650px) {
 .planner-day,.planner-tally { padding: 4px 7px; }.planner-day h4 { font-size: 16px; margin-bottom: 3px; }.planner-day p { font-size: 16px; }.planner-day small { font-size: 13px; }.planner-tally strong { font-size: 26px; }
 .diary-entry__sessions > div { padding-block: 3px; }.diary-entry__sessions dd { font-size: 24px; }.diary-entry__sessions small { font-size: 15px; }
}
@media(max-width:360px) and (max-height:650px) {
 [data-training-mode="volume"] .notebook__page--week { padding-top: 10px; }
 .notebook__page--week h3 { font-size: 24px; margin-top: 6px; }
 .notebook__page--week .notebook__subhead { margin-block: 4px 7px; }
 .planner-day,.planner-tally { padding: 2px 5px; }
 .planner-day p { font-size: 15px; }
 .planner-day h4 { padding-bottom: 2px; margin-bottom: 2px; }
 .planner-tally strong { font-size: 23px; }
}
@media(max-width:1100px) {
 [data-training-mode="volume"] .notebook__page--week { padding-bottom: 12px; }
 .notebook__page--week .notebook__disclaimer { position: static; margin-top: 12px; }
}

/* The scroll interval belongs to the step; the visible card hugs its text. */
.step:has(> .story-card) { padding-inline: 12px; }
.step:has(> .story-card)::after { display: none; }
.story-card { position: relative; width: 100%; padding: 26px 24px; background: var(--paper-bright); color: var(--ink); border: 1px solid #aeb8ca; box-shadow: 0 7px 18px #00000012; }
.story-card > p:last-child { margin-bottom: 0; }
.story-card > p + p { margin-top: 16px; }
.story-card .step__index { font-size: 10px; line-height: 1.5; }
/* Timing slips share a numbered heading and a perforated lower edge. */
.distribution-step .story-card, .track-step .story-card { border-bottom: 2px dashed #8e9bb0; }
.distribution-step .story-card > .step__index, .track-step .story-card > .step__index { margin: -26px -24px 22px; padding: 12px 24px; border-bottom: 1px solid #aeb8ca; color: var(--bib-blue); font-family: var(--mono); letter-spacing: .09em; background: #e0e6f1; }
.track-step .story-card { background: #172d26; border-color: #71847b; color: var(--paper); }
.track-step .story-card > .step__index { background: #10231c; border-bottom-color: #71847b; color: var(--warm-soft); }
/* Lecture paper: a margin, faint ruling, and a torn notebook edge. */
.physiology-step .story-card { padding-left: 34px; border: 1px solid #c4ccd5; border-left: 5px dotted #b1bac9; background: linear-gradient(90deg,transparent 22px,#bd626755 22px 23px,transparent 23px),repeating-linear-gradient(to bottom,#f7f9fc 0 29px,#dce5f0 29px 30px); color: #22364d; }
.physiology-step .story-card .step__index { font: 600 22px/1.1 var(--hand); text-transform: none; letter-spacing: 0; color: #36516c; }
.physiology-step .story-card h3 { font-family: var(--hand); font-weight: 600; line-height: 1.07; }
.physiology-step .story-card .number-mark { background: #e7cc794d; }
/* Quiet coach notes leave the illustrated training diary in focus. */
.training-step .story-card { background: var(--night); color: var(--paper); border: 1px solid #788c8166; border-top: 2px solid #b5c3bb; box-shadow: 0 7px 18px #0002; }
@media(max-width:820px) {
 .step:has(> .story-card) { padding: 0 12px 30svh; }
 .step > .story-card { padding: 24px 22px; }
 .story-card > * { padding-inline: 0; }
 .distribution-step .story-card > .step__index, .track-step .story-card > .step__index { margin: -24px -22px 20px; padding: 11px 22px; }
 .physiology-step > .story-card { padding-left: 32px; }
 .history-step > .bib { flex-shrink: 0; }
 .step > .story-card { flex-shrink: 0; }
}

/* Sparse pen marks on the physiology lecture notes. */
.lecture-underline { text-decoration: underline; text-decoration-color: #ad4d46; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: auto; }
.lecture-highlight { color: inherit; background: linear-gradient(177deg,transparent 17%,#efcf6380 20% 83%,transparent 87%); padding: 0 .07em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story-card > .lecture-note { margin: 15px 0 0; color: #a04640; font: 600 21px/1.2 var(--hand); transform: rotate(-1.5deg); }
.lecture-note--important { border-left: 2px solid #ad4d46; padding-left: 9px; }
.physiology-step[data-physiology="oxygen"] .story-card::before { content: "!"; position: absolute; left: 6px; top: 27px; color: #ad4d46; font: 600 24px var(--hand); transform: rotate(-8deg); }

/* Keep chart labels legible as the SVG camera zooms on narrow screens. */
@media(max-width:820px) {
 #chart-grid text, #chart-axis text, .chart-marker text { font-size: var(--mobile-chart-font, 32px) !important; }
 #chart-axis text[data-hour="3"], #chart-axis text[data-hour="5"], #chart-axis text[data-hour="7"] { display: none; }
 .chart-marker-context { display: none; }
 .distribution__stage[data-distribution-mode="full"] .chart-marker--three text,
 .distribution__stage[data-distribution-mode="full"] .chart-marker--four text { display: none; }
}

/* A single paper calendar stays behind the loose, handwritten session notes. */
.training__stage { padding: 65px 18px 80px; grid-template-rows: minmax(0,1fr); }
.calendar-window { width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #edf0e9; border: 1px solid #b9c4bd; box-shadow: 0 8px 0 -4px #c9d0c9,0 20px 40px #0003; }
#training-calendar { display: block; width: 100%; height: 100%; }
.calendar-paper { fill: #f4f3eb; }
.calendar-heading { font: 700 30px var(--mono); fill: #294238; letter-spacing: 2px; }
.calendar-subheading,.calendar-foot { font: 19px var(--mono); fill: #526559; }
.calendar-total { font: 600 39px var(--hand); fill: #a04b3d; }
.calendar-cell { fill: #fcfbf3; stroke: #808f88; stroke-width: 1.5; }
.calendar-day-head { fill: #e3e8dd; stroke: #808f88; stroke-width: 1.5; }
.calendar-day-name { font: 600 35px var(--hand); fill: #284b3b; }
.calendar-rule { fill: none; stroke: #a0b8cc; stroke-width: .8; opacity: .45; }
.calendar-ink { font: 600 29px var(--hand); fill: #304963; }
.calendar-time { font: 16px var(--mono); fill: #687870; }
.calendar-pencil { fill: #a34c3e; font-size: 26px; }
.calendar-pen { stroke: #b34f40; fill: none; stroke-width: 2; }
.calendar-day.is-selected .calendar-day-head { fill: #f2da83; }
.calendar-day.is-selected .calendar-cell { stroke: #9c493d; stroke-width: 3; }
.calendar-overview { position: absolute; z-index: 2; bottom: 41px; left: 22px; padding: 7px 10px; background: #f4f3eb; border: 1px solid #c3c7b9; color: #243b30; font: 11px var(--mono); cursor: pointer; }
.calendar-overview:focus-visible,.calendar-extra summary:focus-visible { outline: 3px solid #e6ab4c; outline-offset: 4px; }
.training__caption { bottom: 13px; font: 10px/1.35 var(--sans); max-width: calc(100% - 44px); }
.training-step .calendar-note { color: #263e52; background: repeating-linear-gradient(transparent 0 29px,#617f9c18 29px 30px),#faf9f1; border: 1px solid #cad0c6; border-top: 5px solid #d9ddcf; box-shadow: 3px 8px 22px #0003; }
.training-step .calendar-note .step__index { color: #8f4739; font: 600 22px/1.1 var(--hand); letter-spacing: 0; text-transform: none; }
.training-step .calendar-note h3 { font: 600 clamp(29px,3vw,42px)/1.05 var(--hand); color: #29435b; }
.training-step .calendar-note p:not(.step__index) { color: #304658; }
.training-step .calendar-note > p:not(.step__index,.calendar-card-note) { font: 16px/1.6 var(--sans); margin: 18px 0 0; }
.session-jot { margin: 18px 0; padding: 8px 0 10px 12px; border-left: 2px solid #b9624e; font: 600 25px/1.15 var(--hand); color: #2a4c6e; }
.session-jot span { font: 11px var(--mono); }.session-jot i { font: 21px var(--hand); color: #98503c; }
.training-step .calendar-note .calendar-card-note { margin: 18px 0 0; font: 600 22px/1.2 var(--hand); color: #994b3e; }
.calendar-card-source { display: inline-block; margin-top: 18px; color: #465c65; font: 10px/1.4 var(--sans); }
.calendar-extra { margin-top: 20px; padding-top: 12px; border-top: 1px dashed #9eaaa5; }
.calendar-extra summary { cursor: pointer; color: #894234; font: 600 20px/1.2 var(--hand); }
.calendar-extra p { font: 14px/1.5 var(--sans); }.calendar-extra a { font: 11px/1.4 var(--sans); color: #3c5867; }
@media(max-width:820px) {
 .training__stage { position: sticky; height: 78svh; min-height: 470px; max-height: 680px; padding: 48px 12px 79px; }
 .training__topline { font-size: 8px; }
 .training-step { min-height: 95svh; }
 .training-step .calendar-note { padding: 22px; }
 .training-step .calendar-note h3 { font-size: 33px; }
 .calendar-overview { left: 16px; }
 .training__caption { left: 16px; right: 16px; max-width: none; font-size: 9px; }
}
.calendar-total { font-size: 26px; }
#training-calendar[data-overview="false"] .calendar-heading,
#training-calendar[data-overview="false"] .calendar-subheading,
#training-calendar[data-overview="false"] .calendar-total,
#training-calendar[data-overview="false"] .calendar-foot { visibility: hidden; }

/* Compact mobile cards; map, anatomy and calendar get time between notes. */
@media (max-width: 820px) {
  #training-heading { font-size: clamp(32px, 9.5vw, 60px); padding-inline-end: .12em; }
  /* Keep the moving runners visible as the track notes scroll underneath. */
  .track__scrolly > .track__stage { z-index: 11; }
  .history-step { min-height: 0; padding: 0 0 72svh; }
  .step.physiology-step { min-height: 0; padding-bottom: 72svh; }
  .step.training-step { min-height: 0; padding-bottom: 82svh; }
  .step > .story-card, .training-step .calendar-note { padding: 18px; }
  .step h3 { font-size: clamp(26px, 7.2vw, 31px); line-height: 1.12; }
  .step h3 + p { margin-top: 12px; }
  .story-card > p + p { margin-top: 12px; }
  .story-card .step__index { margin-bottom: 10px; }
  .distribution-step .story-card > .step__index,
  .track-step .story-card > .step__index { margin: -18px -18px 14px; padding: 8px 18px; }
  .physiology-step > .story-card { padding-left: 30px; }
  .physiology-step .story-card .step__index { font-size: 19px; }
  .story-card > .lecture-note { font-size: 19px; margin-top: 11px; }
  .bib__header, .bib__footer { padding: 9px 20px; }
  .bib__header { padding-inline: 32px; }
  .bib__footer { margin-top: 16px; }
  .bib__footer b { font-size: 21px; }
  .bib > .step__index { padding: 12px 20px 0; }
  .bib > .step__date, .history-step.is-active .bib > .step__date {
    padding-inline: 20px; font-size: 34px; margin: 10px 0 12px;
  }
  .history-step .bib h3 { padding-inline: 20px; font-size: 25px; }
  .bib > p:last-of-type, .history-step.is-active .bib > p:last-of-type { padding-inline: 20px; margin-top: 12px; }
  .training-step .calendar-note h3 { font-size: 29px; }
  .training-step .calendar-note .step__index { font-size: 19px; }
  .training-step .calendar-note > p:not(.step__index,.calendar-card-note) { margin-top: 12px; line-height: 1.5; }
  .session-jot { margin: 12px 0; padding-block: 4px; font-size: 22px; }
  .session-jot i { font-size: 19px; }
  .training-step .calendar-note .calendar-card-note { font-size: 19px; margin-top: 12px; }
  .calendar-card-source { margin-top: 12px; }
  .calendar-extra { margin-top: 14px; padding-top: 10px; }
  .calendar-extra summary { font-size: 19px; }
  .history .city-lights circle { animation: none; opacity: .45; }
}