/* ═══════════════════════════════════════════════════════════════════════════
   journey.css: the Journey page (/journey/). Markup: src/pages/journey.html · behaviour: src/js/pages/journey.js.

   The device is the wheel. Its rim, straightened, is a toothed rail that runs down the page; a cog rolls
   along it with the scroll and lights each stop as it reaches it. Everything here is sized from one
   number: the rail's pitch (--jp, one tooth and one gap). The cog is the logo's wheel at the size whose
   teeth fit that pitch, so the two really mesh.

     1 head       white: the lockup, one sentence, a large wheel, three numbers on colour panels
     2 find       cream: the record on a short rail (the same rail, lying down)
     3 the track  five chapters on their own grounds (white, cream, white, wine, cream)
     4 next       aubergine: the coming days and the Join action

   Colour: tokens and the b-* vocabulary only (src/css/bright.css). The grounds are white, cream and wine;
   the six area colours are accents (data-area). The page is complete with scripts off and under reduced
   motion: the "unlit" looks below exist only while journey.js has armed the track.
   ═══════════════════════════════════════════════════════════════════════════ */

.page--journey {
  --jp: .4375rem;                                              /* the pitch: a whole number of pixels, so a long row of teeth never drifts */
  --ju: calc(var(--jp) / var(--j-pitch-u, 27.062));            /* one unit of the wheel's own drawing (the wheel's box is 240 of them) */
  --j-cog: calc(var(--ju) * 240);                              /* the box of a wheel that meshes with the rail */
  --j-rack: calc(var(--ju) * var(--j-depth-u, 21.938));        /* the rail's depth: its base and its teeth */
  --j-rack-at: calc(var(--ju) * (120 - var(--j-reach-u, 116.339)));   /* where the rail's back stands in the cog's box */
  --j-gap: clamp(.75rem, .35rem + 1.8vw, 2rem);                /* from the spine to a card */
  --j-side: calc((100% - min(100% - 2 * var(--gutter), var(--container, 76rem))) / 2);   /* the container's edge, from a full-width parent */
  --j-in: 0rem;                                                /* how far inside the container the spine starts (a little outside it on a phone) */
  --j-spine-x: calc(var(--j-side) + var(--j-in));              /* the spine's start edge: at the container's edge; in the middle from 46rem */
  --j-vh: 100vh;                                               /* the window's height: the small viewport where the browser knows it */
  --j-line: calc(var(--header-h) + (var(--j-vh) - var(--header-h)) * .42 - var(--j-cog) / 2);   /* where the cog rides in the window */
  --j-rail: var(--ink-a20);
}
@supports (block-size: 100svh) { .page--journey { --j-vh: 100svh; } }
@media (max-width: 29.99rem) { .page--journey { --j-gap: .5rem; --j-in: -.5rem; } }
@media (min-width: 30rem) { .page--journey { --jp: .5rem; } }
@media (min-width: 46rem) { .page--journey { --j-spine-x: calc(50% - var(--j-cog) / 2); } }
@media (min-width: 64rem) { .page--journey { --jp: .625rem; } }
@media (min-width: 90rem) { .page--journey { --jp: .75rem; } }
.page--journey .b-ground--wine { --j-rail: var(--white-a40); }

/* ───────────────────────────────────────────────────────────────── 1 head ── */
.page--journey .journey-head {
  position: relative;
  padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.5rem, .6rem + 3.6vw, 4.5rem)) clamp(2.75rem, 2rem + 3.4vw, 5.5rem);
}
.page--journey .journey-head__grid { position: relative; display: grid; gap: var(--space-m); }
.page--journey .journey-head__words { position: relative; z-index: 1; display: grid; gap: clamp(1rem, .8rem + 1vw, 1.75rem); justify-items: start; }
.page--journey .journey-head__lead { max-inline-size: 31em; color: var(--fg); text-wrap: pretty; }

/* The large wheel stands whole beside the words from 46rem. Under that the title needs the whole width (its own
   wheel is the large one there), so the second wheel is not shown: it must never stand over the words. */
.page--journey .journey-head__art { display: none; }
.page--journey .journey-bigwheel {
  position: relative;
  display: block;
  overflow: hidden;                          /* a turning square reaches past its box at the corners: the wheel itself never does */
  aspect-ratio: 1;
  color: var(--wheel-colour);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
html.js .page--journey .journey-bigwheel { cursor: grab; }
html.js .page--journey .journey-bigwheel.is-held { cursor: grabbing; }
.page--journey .journey-bigwheel__rotor { display: block; inline-size: 100%; block-size: 100%; }
.page--journey .journey-bigwheel__rotor > .wheel { display: block; inline-size: 100%; block-size: 100%; }
.page--journey .journey-bigwheel.is-live .journey-bigwheel__rotor { will-change: transform; }
@media (min-width: 46rem) {
  /* The words take what they need (the title is one line, its second line too); the wheel takes the rest. */
  .page--journey .journey-head__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-m); }
  .page--journey .journey-head__art { display: block; justify-self: end; inline-size: clamp(11.5rem, -6.5rem + 38vw, 27rem); margin-block: clamp(-2rem, -3vw, -.5rem); }
}

/* Three true numbers on colour panels. They roll in, count up and lean to the pointer. */
.page--journey .journey-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.625rem, .3rem + 1.4vw, 1.25rem);
  margin: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.page--journey .journey-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: .25rem .75rem;
  padding: clamp(1rem, .7rem + 1.6vw, 2rem);
}
.page--journey .journey-number > * { margin: 0; }
.page--journey .journey-number .b-number { grid-column: 1; font-size: clamp(3.25rem, 2rem + 5.6vw, 6.5rem); }
.page--journey .journey-number__mark { --m: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); grid-column: 2; grid-row: 1; align-self: start; }
.page--journey .journey-number .b-number__label { grid-column: 1 / -1; max-inline-size: 15em; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); text-wrap: balance; }
@media (max-width: 35.99rem) {
  /* Three across would squeeze the words: each panel becomes a row, the number first. */
  .page--journey .journey-numbers { grid-template-columns: minmax(0, 1fr); }
  .page--journey .journey-number { grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; padding: .875rem 1.125rem; }
  .page--journey .journey-number .b-number { grid-column: 1; font-size: 3.25rem; }
  .page--journey .journey-number .b-number__label { grid-column: 2; grid-row: 1; max-inline-size: none; }
  .page--journey .journey-number__mark { display: none; }
}

/* ───────────────────────────────────────────────────── 2 find your years ── */
.page--journey .journey-find__grid { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); align-items: center; }
.page--journey .journey-find__words { display: grid; gap: var(--space-s); justify-items: start; }
.page--journey .journey-find__lead { max-inline-size: 26em; margin: 0; text-wrap: pretty; }
@media (min-width: 56rem) { .page--journey .journey-find__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (min-width: 56rem) and (max-width: 79.99rem) { .page--journey .journey-find__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }   /* the title needs half the width to stay on one line ("Find your / years" between 56 and 76rem) */

.page--journey .journey-ruler { display: grid; gap: 1rem; min-inline-size: 0; }
/* What the cog stands on: the year, large, and the entry's title. */
.page--journey .journey-ruler__out { display: grid; gap: .125rem; min-block-size: 6.25rem; align-content: end; max-inline-size: none; margin: 0; }
.page--journey .journey-ruler__year {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.5rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--journey .journey-ruler__title { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.3; }
/* The bed: the rail lying down, teeth up, and the cog that rolls on it. */
.page--journey .journey-ruler__bed {
  position: relative;
  block-size: calc(var(--j-cog) - var(--j-rack-at));
  border-radius: var(--r-field);
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.page--journey .journey-ruler__bed.is-held { cursor: grabbing; }
.page--journey .journey-ruler__bed:focus-within { outline: 2px solid var(--focus); outline-offset: .5rem; }
.page--journey .journey-ruler__rack {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--j-rack);
  background: var(--j-rail);
  -webkit-mask: var(--j-rack-across) 0 0 / var(--jp) 100% repeat-x;
  mask: var(--j-rack-across) 0 0 / var(--jp) 100% repeat-x;
}
.page--journey .journey-ruler__cog {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(-1 * var(--j-rack-at));
  inline-size: var(--j-cog);
  block-size: var(--j-cog);
  overflow: hidden;
  color: var(--wheel-colour);
  will-change: transform;
}
.page--journey .journey-ruler__cog::before { content: ""; position: absolute; inset: 10.5%; border-radius: 50%; background: var(--white); }
.page--journey .journey-ruler__rotor { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.page--journey .journey-ruler__rotor > .wheel { display: block; inline-size: 100%; block-size: 100%; }

/* The stops. Without scripts: a row of years to tap. With them: a mark under the rail for every entry. */
.page--journey .journey-ruler__stops { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.page--journey .journey-ruler__stops > li { max-inline-size: none; }
.page--journey .journey-ruler__stop {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  padding-inline: .875rem;
  border-radius: var(--r-full);
  background: var(--row);
  color: var(--fg);
  font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
}
.page--journey .journey-ruler.is-live .journey-ruler__stops { position: relative; display: block; block-size: .75rem; margin-block-start: -.375rem; pointer-events: none; }
.page--journey .journey-ruler.is-live .journey-ruler__stops > li {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--j-cog) / 2 + (100% - var(--j-cog)) * var(--i) / var(--n));
  inline-size: .375rem;
  block-size: .375rem;
  margin-inline-start: -.1875rem;
  border-radius: 50%;
  background: var(--ink-a50);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
.page--journey .journey-ruler.is-live .journey-ruler__stops > li[aria-current] { background: var(--cranberry); transform: scale(2); }
.page--journey .journey-ruler.is-live .journey-ruler__stop { display: block; inline-size: 100%; block-size: 100%; min-block-size: 0; padding: 0; background: none; }
.page--journey .journey-ruler.is-live .journey-ruler__stop > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page--journey .journey-ruler__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.page--journey .journey-ruler__help { display: flex; align-items: center; gap: .625rem; margin: 0; max-inline-size: none; color: var(--fg-muted); font-size: 1rem; line-height: 1.35; }

/* ───────────────────────────────────────────────────────────── 3 the track ── */
.page--journey .journey-track { position: relative; isolation: isolate; }

/* The chapter index: five teeth in a pill that stays at the foot of the window while the track is read. */
.page--journey .journey-dock { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* The bar leaves with the track's end. It stops above the teeth of the next ground, never across them (they are
   painted over it). Under 40rem the phone block at the foot of this file says the same and makes more room. */
@media (min-width: 40.0625rem) { .page--journey .journey-dock { inset-block-end: calc(var(--seam-h) + .75rem); } }
.page--journey .journey-index {
  position: sticky;
  inset-block-start: calc(var(--j-vh) - 4.5rem - var(--dock-h, 0px));
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
}
.page--journey .journey-index__list {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin: 0;
  padding: .3125rem;
  list-style: none;
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}
.page--journey .journey-index__list > li { max-inline-size: none; }
.page--journey .journey-index__tooth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-inline-size: var(--target);
  min-block-size: var(--target);
  padding-inline: .625rem;
  border-radius: var(--r-full);
  color: var(--ink);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.page--journey .journey-index__mark {
  flex: none;
  inline-size: calc(1.0625rem * var(--tooth-ratio, 1.2));
  block-size: 1.0625rem;
  background: currentColor;
  opacity: .4;
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
.page--journey .journey-index__tooth.is-past .journey-index__mark { opacity: 1; color: var(--cranberry); }
.page--journey .journey-index__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.page--journey .journey-index__tooth[aria-current] { padding-inline: .875rem 1.125rem; background: var(--cranberry); color: var(--white); }
.page--journey .journey-index__tooth[aria-current] .journey-index__mark { opacity: 1; color: var(--white); transform: scale(1.15); }
.page--journey .journey-index__tooth[aria-current] .journey-index__name { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
.page--journey .journey-index__tooth:focus-visible { outline-offset: 2px; }
.page--journey .journey-index__tooth:active,
.page--journey .journey-index__tooth.is-pressed { background: var(--blush); }
.page--journey .journey-index__tooth[aria-current]:active { background: var(--cranberry-press); }
@media (hover: hover) and (pointer: fine) {
  .page--journey .journey-index__tooth:not([aria-current]):hover { background: var(--cream); }
  .page--journey .journey-index__tooth:not([aria-current]):hover .journey-index__mark { opacity: 1; transform: translateY(-.125rem); }
}
@media (min-width: 72rem) {
  /* Room for every name. */
  .page--journey .journey-index__name { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
  .page--journey .journey-index__tooth { padding-inline: .75rem 1rem; }
}
/* Between the phone and the width where every name fits, each tooth carries the year its chapter opens on, as a
   tick carries its figure (journey.html writes it): five teeth alone did not say where each one led. */
.page--journey .journey-index__year { display: none; }
@media (min-width: 30rem) and (max-width: 71.99rem) {
  html.js .page--journey .journey-index__tooth:not([aria-current]) { flex-direction: column; gap: .125rem; padding-inline: .5rem; vertical-align: top; }   /* top: a column has no baseline of its own, and the bar grew by three pixels */
  html.js .page--journey .journey-index__tooth:not([aria-current]) .journey-index__mark { inline-size: calc(.6875rem * var(--tooth-ratio, 1.2)); block-size: .6875rem; }
  html.js .page--journey .journey-index__tooth:not([aria-current]) .journey-index__year { display: block; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
  html.js .page--journey .journey-index__tooth.is-past:not([aria-current]) .journey-index__year { color: var(--cranberry-text); }
}
@media (max-width: 29.99rem) {
  /* No room for a name beside four teeth: the name of the chapter stands over the row. */
  .page--journey .journey-index { inset-block-start: calc(var(--j-vh) - 6.25rem - var(--dock-h, 0px)); }
  .page--journey .journey-index__list { position: relative; padding-block-start: 2rem; border-radius: 1.5rem; }
  .page--journey .journey-index__list:not(:has([aria-current])) { padding-block-start: .3125rem; border-radius: var(--r-full); }
  .page--journey .journey-index__tooth[aria-current] { padding-inline: .625rem; }
  .page--journey .journey-index__tooth[aria-current] .journey-index__name { position: absolute; inset-block-start: .5rem; inset-inline: .75rem; color: var(--ink); text-align: center; overflow: hidden; text-overflow: ellipsis; }
}
/* Without scripts nothing says which chapter is being read: the index is a plain row of the five names, in the page. */
html:not(.js) .page--journey .journey-dock { position: static; padding-block: 1.25rem; background: var(--cream); }
html:not(.js) .page--journey .journey-index { position: static; }
html:not(.js) .page--journey .journey-index__list { flex-wrap: wrap; justify-content: center; border-radius: var(--r-card); box-shadow: none; }
html:not(.js) .page--journey .journey-index__name { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }

/* The spine: over the five chapters, the lit rail and the cog. The cog is held at one height of the window
   by position: sticky (so the browser, not a script, keeps it there), and a script only turns it. */
.page--journey .journey-spine {
  position: absolute;
  inset-block: 0 var(--seam-h);            /* the cog comes to the end of the rail above the next ground's teeth, not half under them */
  inset-inline-start: var(--j-spine-x);
  z-index: 4;
  inline-size: var(--j-cog);
  pointer-events: none;
}
html:not(.js) .page--journey .journey-spine { display: none; }
/* Two columns: the rail runs down the middle, where the chapter bar is berthed at the end of the track. The cog
   stops above that berth (the bar is 3.375rem, .75rem over the teeth), not behind the bar. */
@media (min-width: 46rem) { .page--journey .journey-spine { inset-block-end: calc(var(--seam-h) + 4.625rem); } }
.page--journey .journey-cog {
  position: sticky;
  inset-block-start: var(--j-line);
  display: block;
  inline-size: var(--j-cog);
  block-size: var(--j-cog);
  overflow: hidden;
  color: var(--cranberry);
}
.page--journey .journey-cog::before { content: ""; position: absolute; inset: 10.5%; border-radius: 50%; background: var(--white); }
/* Over a deep ground (the quiet years) it is the white wheel on a hub of that ground, as every wheel on a colour is. */
.page--journey .journey-cog,
.page--journey .journey-cog::before { transition: color var(--dur-2) ease, background-color var(--dur-2) ease; }
.page--journey .journey-cog.is-on-deep { color: var(--white); }
.page--journey .journey-cog.is-on-deep::before { background: var(--wine); }
.page--journey .journey-cog.is-held { position: absolute; inset-block-start: 0; will-change: transform; }
.page--journey .journey-cog__rotor { position: relative; display: block; inline-size: 100%; block-size: 100%; will-change: transform; }
.page--journey .journey-cog__rotor > .wheel { display: block; inline-size: 100%; block-size: 100%; }

/* The rail: the wheel's rim, straightened. Each chapter carries its own length of it, in a colour that reads on
   that chapter's ground; the script sets --j-phase so that the teeth run on unbroken from one chapter to the next. */
.page--journey .journey-rail,
.page--journey .journey-lit__bar {
  -webkit-mask: var(--j-rack-down) 0 var(--j-phase, 0px) / 100% var(--jp) repeat-y;
  mask: var(--j-rack-down) 0 var(--j-phase, 0px) / 100% var(--jp) repeat-y;
}
.page--journey .journey-rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--j-spine-x) + var(--j-rack-at));
  z-index: 0;
  inline-size: var(--j-rack);
  background: var(--j-rail);
  pointer-events: none;
}
/* The lit rail: the same teeth in cranberry, shown as far as the cog has rolled (a window that slides down, and
   the bar inside it slides back up by as much: two transforms, nothing repainted). Hidden until the script arms it. */
.page--journey .journey-lit {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--j-rack-at);
  display: none;
  inline-size: var(--j-rack);
  overflow: hidden;
  transform: translate3d(0, -100%, 0);
}
.page--journey .journey-lit__bar { display: block; inline-size: 100%; block-size: 100%; background: var(--cranberry); transform: translate3d(0, 100%, 0); }
.page--journey .journey-track.is-armed .journey-lit { display: block; }
@media (prefers-reduced-motion: reduce) {
  .page--journey .journey-spine { display: none; }
}

/* A chapter: its own ground, a big heading beside the rail (a ring on the rail marks the station), and its stops. */
.page--journey .journey-chapter {
  padding-block: clamp(4.5rem, 3.2rem + 5.4vw, 8.5rem) clamp(4.5rem, 3.4rem + 5vw, 8.5rem);
}
.page--journey .journey-chapter--began { padding-block-start: calc(var(--j-cog) + clamp(3rem, 2.2rem + 3.4vw, 5.5rem)); }   /* the cog waits at the head of the track */
.page--journey .journey-chapter__inner { position: relative; z-index: 1; }
.page--journey .journey-chapter__head {
  --j-ch-fs: calc(clamp(2.125rem, 1.6rem + 2.3vw, 3.75rem) * var(--display-scale));
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-s);
  margin-block-end: clamp(2rem, 1.5rem + 2.4vw, 4rem);
  padding-inline-start: calc(var(--j-in) + var(--j-cog) + var(--j-gap));
}
/* The year the chapter opens on: a ghost numeral behind the heading, drifting a little as it passes. */
.page--journey .journey-chapter__ghost {
  position: absolute;
  inset-block: -1.5rem auto;
  inset-inline-end: 0;
  z-index: -1;
  color: var(--j-ghost, var(--ink-a06));
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 2rem + 17vw, 9rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.page--journey .journey-chapter__ghost--long { font-size: clamp(3.5rem, 1.25rem + 11vw, 6rem); }
.page--journey .journey-chapter__ghost > span { display: block; }
.page--journey .b-ground--wine .journey-chapter__ghost { --j-ghost: var(--white-a10); }
/* The station: a ring on the rail, level with the middle of the heading's wheel. */
.page--journey .journey-chapter__head::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--j-ch-fs) * var(--lockup-wheel-em, 1.8369) / 2);
  inset-inline-start: calc(var(--j-in) + var(--j-cog) / 2);
  box-sizing: border-box;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin: -.875rem 0 0 -.875rem;
  border: .3125rem solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.page--journey .journey-chapter__lockup { --lockup-fs: var(--j-ch-fs); }
.page--journey .journey-chapter__lead { max-inline-size: 30em; margin: 0; color: var(--fg); text-wrap: pretty; }

/* The stops. One column beside the rail; from 46rem they alternate, each a row lower than the one across the rail. */
.page--journey .journey-stops { display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.page--journey .journey-stop { position: relative; min-inline-size: 0; max-inline-size: none; padding-inline-start: calc(var(--j-in) + var(--j-cog) + var(--j-gap)); }
/* The node on the rail and the axle from it to the card. */
.page--journey .journey-stop__node {
  position: absolute;
  inset-block-start: 1.875rem;
  inset-inline-start: calc(var(--j-in) + var(--j-cog) / 2);
  z-index: 2;
  box-sizing: border-box;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: -.625rem 0 0 -.625rem;
  border: .25rem solid var(--bg);
  border-radius: 50%;
  background: var(--area, var(--cranberry));
  transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) ease;
}
.page--journey .journey-stop::before {
  content: "";
  position: absolute;
  inset-block-start: calc(1.875rem - .125rem);
  inset-inline-start: calc(var(--j-in) + var(--j-cog) / 2);
  z-index: 1;
  inline-size: calc(var(--j-cog) / 2 + var(--j-gap));
  block-size: .25rem;
  border-radius: var(--r-full);
  background: var(--area, var(--cranberry));
  transform-origin: 0 50%;
  transition: transform var(--dur-4) var(--ease-out);
}
@media (min-width: 46rem) {
  .page--journey .journey-chapter__head { grid-template-columns: minmax(0, 1fr) var(--j-cog) minmax(0, 1fr); column-gap: var(--j-gap); align-items: center; padding-inline-start: 0; }
  .page--journey .journey-chapter__head::before { inset-block-start: 50%; inset-inline-start: 50%; }
  .page--journey .journey-chapter__ghost { inset-block: 0; inset-inline: 0 calc(50% + var(--j-cog) / 2 + var(--j-gap)); display: grid; align-items: center; justify-content: end; overflow: hidden; font-size: clamp(8rem, 1rem + 15vw, 15rem); }
  .page--journey .journey-chapter__ghost--long { font-size: clamp(4.25rem, .5rem + 7.6vw, 7.5rem); }
  .page--journey .journey-chapter__lockup { grid-column: 3; grid-row: 1; }
  .page--journey .journey-chapter__lead { grid-column: 1; grid-row: 1; justify-self: end; text-align: end; }
  .page--journey .journey-stops { grid-template-columns: minmax(0, 1fr) var(--j-cog) minmax(0, 1fr); column-gap: var(--j-gap); row-gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
  .page--journey .journey-stop { grid-row: calc(var(--k) + 1) / span 2; align-self: start; padding-inline-start: 0; }
  .page--journey .journey-stop:last-child { grid-row-end: span 1; }   /* the last stop of a chapter has no row below it to share: with one, half its height stood empty under it (300px after 2022) */
  .page--journey .journey-stop:last-child:nth-child(2) { margin-block-start: clamp(3rem, 2rem + 4vw, 6rem); }   /* a chapter of two stops (2023 and 2024, 2025 and 2026): the second still stands a step lower than the first, not level with it */
  .page--journey .journey-stop--start { grid-column: 1; }
  .page--journey .journey-stop--end { grid-column: 3; }
  .page--journey .journey-stop--start > .journey-stop__node { inset-inline-start: calc(100% + var(--j-gap) + var(--j-cog) / 2); }
  .page--journey .journey-stop--end > .journey-stop__node { inset-inline-start: calc(-1 * (var(--j-gap) + var(--j-cog) / 2)); }
  .page--journey .journey-stop--start::before { inset-inline-start: 100%; transform-origin: 100% 50%; }
  .page--journey .journey-stop--end::before { inset-inline-start: calc(-1 * (var(--j-gap) + var(--j-cog) / 2)); }
}
@media (min-width: 46rem) and (max-width: 63.99rem) {
  /* Two narrow columns (the pane the site is looked at in is 800 wide): the chapter's title is sized to its column,
     so that it is two lines and its years one ("The second return" stood in three). */
  .page--journey .journey-chapter__head { --j-ch-fs: calc(clamp(2rem, 4.9vw, 3.125rem) * var(--display-scale)); }
}

/* A card: the year very large, the title, the text; then the number, the areas and the photographs it holds.
   Its head is a soft inner panel. A stop that belongs to an area of service wears that area's colour there. */
.page--journey .journey-card {
  --j-head-r: calc(var(--r-panel) - .5rem);                    /* the corner of the card's head: the card's own, less its padding */
  position: relative;
  display: grid;
  gap: 0;
  padding: .5rem;
  border-radius: var(--r-panel);
  background: var(--row);
  color: var(--fg);
  scroll-margin-block-start: .5rem;
}
/* An area card stands on the sand, whatever its area: the six pale tints read as pink, lilac and mauve on fields
   this large (the palette's rule: no pink grounds). The area keeps its colour in the card's head, its node and its chips. */
.page--journey .journey-card--area { background: var(--blush); }
.page--journey .journey-card__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: clamp(.75rem, .6rem + .7vw, 1.125rem) clamp(.875rem, .7rem + .9vw, 1.375rem);
  border-radius: var(--j-head-r);
}
.page--journey .journey-card__year {
  margin: 0;
  max-inline-size: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.7rem + 3.9vw, 4.75rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.page--journey .journey-card__year--long { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.125rem); }
@media (min-width: 46rem) { .page--journey .journey-card__year--long { font-size: clamp(1.875rem, 4.4vw, 3.125rem); } }   /* two columns: a long year is sized to its narrow head (between 46 and 49rem it pushed the medallion out of the card) */
.page--journey .journey-card__mark { --m: clamp(2.75rem, 2.4rem + 1vw, 3.5rem); }
.page--journey .journey-card__mark .wheel { transition: transform var(--dur-5) var(--ease-out); }
/* The plain card: under its year, a short bar of the rail's own colour. */
.page--journey .journey-card:not(.journey-card--area) > .journey-card__head::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: clamp(.875rem, .7rem + .9vw, 1.375rem);
  inline-size: 3.5rem;
  block-size: .25rem;
  border-radius: var(--r-full);
  background: var(--accent);
  transform-origin: 0 50%;
  transition: transform var(--dur-4) var(--ease-out);
}
/* The area card: the head is the area's colour, with the words that pass on it and a white medallion. */
.page--journey .journey-card--area > .journey-card__head,
.page--journey .journey-card__lit { background: var(--area); color: var(--on-area); }
.page--journey .journey-card--area > .journey-card__head .journey-card__year,
.page--journey .journey-card__lit .journey-card__year { color: inherit; }
.page--journey .journey-card--area .journey-card__mark { --m-bg: var(--white); --m-fg: var(--cranberry-press); }
/* A return (2010, 2019, 2026) is the club's own moment, so it is the one card that wears the logo's cranberry: the
   colour of the "3" on the first screen, with the same turn for its mark. Its year and its node on the rail are larger.
   (journey.html marks it; everything an area card does, it does: it waits in white and the colour crosses it.) */
.page--journey .journey-stop--return { --area: var(--cranberry); --on-area: var(--white); }
.page--journey .journey-stop--return > .journey-stop__node { inline-size: 1.625rem; block-size: 1.625rem; margin: -.8125rem 0 0 -.8125rem; }
@media (min-width: 30rem) {
  .page--journey .journey-card--return .journey-card__year { font-size: clamp(3.25rem, 1.9rem + 4.6vw, 5.75rem); }
  .page--journey .journey-card--return .journey-card__year--long { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 3.25rem); }
  .page--journey .journey-card--return .journey-card__mark { --m: clamp(3rem, 2.6rem + 1.2vw, 4rem); }
}
@media (min-width: 46rem) { .page--journey .journey-card--return .journey-card__year--long { font-size: clamp(2.375rem, 5.4vw, 4rem); } }
.page--journey .journey-card__body { display: grid; gap: .75rem; padding: clamp(.875rem, .7rem + .9vw, 1.375rem); padding-block-start: clamp(.875rem, .7rem + .6vw, 1.125rem); }
.page--journey .journey-card__body > * { margin: 0; max-inline-size: none; }
.page--journey .journey-card__title {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-title);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.page--journey .journey-card__text { text-wrap: pretty; }
.page--journey .journey-card__stat { display: flex; align-items: center; gap: .875rem; padding: .625rem 1rem; border-radius: var(--r-card); background: var(--row-hover); }
.page--journey .journey-card--area .journey-card__stat { background: var(--white); }
.page--journey .journey-card__stat .b-number { flex: none; font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem); color: var(--cranberry-text); }
.page--journey .journey-card__stat .b-number__label { font-size: 1rem; font-weight: var(--fw-text); }
@media (min-width: 46rem) and (max-width: 63.99rem) {
  /* Two narrow columns: the words stand under the number, as on the first screen (beside it they were four lines of two words). */
  .page--journey .journey-card__stat { flex-direction: column; align-items: flex-start; gap: .125rem; padding-block: .75rem .875rem; }
  .page--journey .journey-card__stat .b-number__label { max-inline-size: none; text-wrap: balance; }
}
.page--journey .journey-card__areas { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.page--journey .journey-card__areas > li { --chip: var(--white); max-inline-size: none; font-size: 1rem; }

/* A low point of the record: an empty outline where a card would be. */
.page--journey .journey-card--low { background: transparent; box-shadow: inset 0 0 0 .125rem var(--j-rail); }
.page--journey .journey-card--low .journey-card__mark { --m-bg: var(--j-rail); --m-fg: var(--bg); }
.page--journey .journey-card--low:not(.journey-card--area) > .journey-card__head::after { background: var(--j-rail); }   /* the weight of the plain card's bar, which it follows: without :not() the accent outweighed it and a quiet year wore a lit bar */
.page--journey .journey-stop--low > .journey-stop__node,
.page--journey .journey-stop--low::before { background: var(--j-rail); }

/* Photographs: a wheel-shaped frame whose teeth turn with the scroll while the picture stays level, or, for a
   group, a wide frame with one toothed edge. Each opens like an iris and carries its dated caption. */
.page--journey .journey-card__photos { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1rem clamp(.75rem, 2vw, 1.25rem); padding-block-start: .25rem; }
.page--journey .journey-photo { display: grid; gap: .5rem; margin: 0; min-inline-size: 0; }
.page--journey .journey-photo > figcaption { max-inline-size: none; color: var(--fg-muted); font-size: 1rem; line-height: 1.35; text-wrap: balance; }
.page--journey .journey-photo__date { display: block; font-weight: var(--fw-strong); }   /* under a wheel the date has a line of its own (journey.js), so no line begins with the dot */
.page--journey .journey-photo--cog { flex: 1 1 8rem; max-inline-size: 13rem; justify-items: center; text-align: center; }
.page--journey .journey-card__photos--1 > .journey-photo--cog { flex-basis: 10rem; max-inline-size: 14rem; }
@media (max-width: 29.99rem) {
  /* Two wheels side by side on a phone, not one above the other. */
  .page--journey .journey-photo--cog { flex-basis: 6.5rem; }
  .page--journey .journey-card__photos { gap: .875rem .625rem; }
}
.page--journey .journey-photo--wide { flex: 1 1 100%; max-inline-size: min(100%, var(--max, 40rem)); }
.page--journey .journey-photo--wide > .frame { inline-size: 100%; }
.page--journey .journey-photo__iris { inline-size: 100%; aspect-ratio: 1; overflow: hidden; }   /* the turning frame is a square: its corners must not reach past the card */
.page--journey .journey-photo__gear {
  inline-size: 100%;
  block-size: 100%;
  background: var(--blush);
  -webkit-mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
  mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
}
.page--journey .journey-photo__still { inline-size: 100%; block-size: 100%; }
.page--journey .journey-photo__still > :is(picture, .ph) { display: block; inline-size: 100%; block-size: 100%; }
.page--journey .journey-photo__still img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* The awards: a wine panel with the five medals in order. Their toothed discs turn with the scroll (the years
   stay level); a press turns one over like a coin and its year is named below. */
.page--journey .journey-awards { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.5rem); padding: clamp(1.125rem, .9rem + 1.2vw, 1.75rem); background: var(--wine); color: var(--fg); }
.page--journey .journey-awards > * { margin: 0; }
.page--journey .journey-medals {
  --medal: clamp(5.75rem, 5.2rem + 1.6vw, 6.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem .5rem;
  padding: 0;
  list-style: none;
}
.page--journey .journey-medal { --medal-ribbon: var(--cranberry); flex: 0 1 calc(var(--medal) + 1.5rem); max-inline-size: none; }
.page--journey .journey-medal--changemaker { --medal-ribbon: var(--apricot); }
.page--journey .journey-medal__btn {
  display: grid;
  justify-items: center;
  inline-size: 100%;
  min-block-size: var(--target);
  margin: 0;
  padding: 0 0 .5rem;
  border: 0;
  border-radius: var(--r-card);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page--journey .journey-medal__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.page--journey .journey-medal .medal { max-inline-size: none; }
.page--journey .journey-medal .medal__name { font-size: 1rem; text-wrap: balance; }
.page--journey .journey-medal__btn { overflow: hidden; }   /* the disc is a turning square: its corners stay inside the button */
.page--journey .journey-medal__turn { position: relative; display: block; border-radius: 50%; outline: .1875rem solid transparent; outline-offset: .125rem; transition: outline-color var(--dur-2) ease; }
.page--journey .journey-medal__btn[aria-pressed="true"] .journey-medal__turn { outline-color: var(--white); }   /* the medal that is named wears a ring */
/* The years stand over the disc, not inside it: only the toothed disc turns with the scroll, so the years are level
   whatever happens (turned back by a second data-spin they stood on their head after a jump down the page). */
.page--journey .journey-medal__years { position: absolute; inset: 0; display: grid; place-items: center; color: var(--medal-on); pointer-events: none; }
.page--journey .journey-awards__out {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-block-size: 3.5rem;
  max-inline-size: none;
  padding: .5rem 1rem .5rem .5rem;
  border-radius: var(--r-card);
  background: var(--row);
  font-weight: var(--fw-strong);
  line-height: 1.3;
}
@media (prefers-reduced-motion: no-preference) {
  .page--journey .journey-medal__btn.is-turning .journey-medal__turn { animation: journey-coin .72s var(--ease-in-out); }
  @media (hover: hover) and (pointer: fine) {
    .page--journey .journey-medal__btn:hover .medal { transform: translateY(-.1875rem); }
    .page--journey .journey-medal .medal { transition: transform var(--dur-3) var(--ease-out); }
  }
}
@keyframes journey-coin {
  0% { transform: scaleX(1); }
  45% { transform: scaleX(.04); }
  55% { transform: scaleX(.04); }
  100% { transform: scaleX(1); }
}

/* The quiet years: the page grows calm. Outlined entries, one line, then nothing; the cog comes to rest there. */
.page--journey .journey-chapter--stopped { padding-block-end: 0; }
.page--journey .journey-chapter--stopped .journey-card__title { font-weight: var(--fw-light); letter-spacing: var(--tracking-light); }
.page--journey .journey-chapter--stopped .journey-chapter__head { margin-block-end: clamp(1.5rem, 1.2rem + 1.6vw, 3rem); }
.page--journey .journey-rest { min-block-size: clamp(12rem, calc(var(--j-vh) * .38), 23rem); margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); padding-inline-start: calc(var(--j-in) + var(--j-cog) + var(--j-gap)); }
.page--journey .journey-rest__line {
  max-inline-size: 16em;
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: calc(clamp(1.625rem, 1.2rem + 2vw, 2.75rem) * var(--display-scale));
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: var(--tracking-light);
  text-wrap: balance;
}
@media (min-width: 46rem) {
  /* Across the rail from the last entry, level with where the cog comes to rest. */
  .page--journey .journey-rest { display: grid; grid-template-columns: minmax(0, 1fr) var(--j-cog) minmax(0, 1fr); column-gap: var(--j-gap); align-content: start; padding-inline-start: 0; }
  .page--journey .journey-rest__line { grid-column: 1; justify-self: end; text-align: end; }
}
@media (min-width: 46rem) and (max-width: 63.99rem) {
  /* Two narrow columns: sized to its column, the line is three lines, not four short ones. */
  .page--journey .journey-rest__line { font-size: calc(clamp(1.5rem, 3.6vw, 2.25rem) * var(--display-scale)); }
}
.page--journey .journey-chapter--stopped .journey-rail { opacity: .55; }

/* ── Armed: the looks a stop has until the cog reaches it. Only while journey.js has armed the track. ── */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-stop:not(.is-on) > .journey-stop__node { transform: scale(.55); background: var(--j-rail); }
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-stop:not(.is-on)::before { transform: scaleX(0); }
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-stop:not(.is-on) .journey-card:not(.journey-card--area) > .journey-card__head::after { transform: scaleX(0); }
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-stop:not(.is-on) .journey-card__mark .wheel { transform: rotate(-60deg); }
  /* An area card's head waits in the area's pale tint; its colour then crosses it from the rail's side. */
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-card--area > .journey-card__head { background: var(--white); color: var(--ink); }
  html.js:not(.rac-failsafe) .page--journey .journey-track.is-armed .journey-card--area > .journey-card__head > .journey-card__mark { --m-bg: var(--area); --m-fg: var(--on-area); }
  .page--journey .journey-card__lit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: inherit;
    border-radius: inherit;
    clip-path: inset(0 100% 0 0 round var(--j-head-r));   /* the head's own corner: under 57rem it is tighter than 1.25rem, and the white head showed at the corners of the colour */
    transition: clip-path var(--dur-4) var(--ease-out);
    pointer-events: none;
  }
  .page--journey .journey-stop--start .journey-card__lit { clip-path: inset(0 0 0 100% round var(--j-head-r)); }
  .page--journey .journey-stop.is-on .journey-card__lit { clip-path: inset(0 0 0 0 round var(--j-head-r)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 45.99rem) {
  .page--journey .journey-stop--start .journey-card__lit { clip-path: inset(0 100% 0 0 round var(--j-head-r)); }
  .page--journey .journey-stop--start.is-on .journey-card__lit { clip-path: inset(0 0 0 0 round var(--j-head-r)); }
}

/* ──────────────────────────────────────────────────────── 4 the next chapter ── */
/* On aubergine, the palette's deepest field, as the closing call of the other pages is (the tone is b-deep, in the
   markup). Cranberry is the accent, not a wash: a whole screen of it was the pinkest thing on the site. */
.page--journey .journey-next { --bg: var(--magenta); }
@media (min-width: 56rem) {
  /* Beside the days the title has half the width: sized so that it is two lines, not three. */
  .page--journey .journey-next .lockup { --lockup-fs: calc(clamp(2.25rem, 4.1vw, 3.625rem) * var(--display-scale)); }
}
.page--journey .journey-next__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }   /* clips the wheel to the section; the section itself clips nothing, so its seam stands up into the track above */
.page--journey .journey-next__grid { position: relative; display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) { .page--journey .journey-next__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.page--journey .journey-next__words { position: relative; z-index: 1; display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); justify-items: start; }
.page--journey .journey-next__lead { max-inline-size: 30em; margin: 0; }
.page--journey .journey-next__days { position: relative; display: grid; gap: 1rem; }
.page--journey .journey-next__days > .b-eyebrow { position: relative; z-index: 1; margin: 0; }
.page--journey .journey-days { position: relative; z-index: 1; display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.page--journey .journey-days > li { max-inline-size: none; }
.page--journey .journey-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.125rem .875rem .875rem;
  border-radius: var(--r-card);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-3) var(--ease-out);
}
.page--journey .journey-day > .b-medallion { --m: 3rem; --m-bg: var(--cranberry); --m-fg: var(--white); }
.page--journey .journey-day__words { display: grid; gap: .125rem; min-inline-size: 0; }
.page--journey .journey-day__title { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-title); line-height: 1.25; }
.page--journey .journey-day__when { color: var(--ink-soft); font-size: 1rem; line-height: 1.35; }
.page--journey .journey-day__go { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--cream); color: var(--cranberry-press); transition: transform var(--dur-3) var(--ease-out); }
.page--journey .journey-day:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.page--journey .journey-day:active .journey-day__go,
.page--journey .journey-day.is-pressed .journey-day__go { transform: translate3d(.25rem, 0, 0); }
@media (hover: hover) and (pointer: fine) {
  .page--journey .journey-day:hover { transform: translate3d(.375rem, 0, 0); }
  .page--journey .journey-day:hover .journey-day__go { transform: translate3d(.25rem, 0, 0); }
}
/* A large white wheel behind the days, turning with the scroll. */
.page--journey .journey-next__wheel {
  --w: clamp(17rem, 10rem + 26vw, 30rem);
  position: absolute;
  inset-block-end: calc(var(--w) * -.22);
  inset-inline-end: calc(var(--w) * -.24);
  inline-size: var(--w);
  aspect-ratio: 1;
  color: var(--white-a16);
}
@media (min-width: 56rem) {
  .page--journey .journey-next__wheel { inset-block: 50% auto; margin-block-start: calc(var(--w) / -2); inset-inline-end: calc(var(--w) * -.2); }
}
.page--journey .journey-next__wheel > span,
.page--journey .journey-next__wheel .wheel { display: block; inline-size: 100%; block-size: 100%; }
@media (prefers-reduced-motion: reduce) {
  .page--journey .journey-day,
  .page--journey .journey-day__go,
  .page--journey .journey-index__mark,
  .page--journey .journey-stop__node,
  .page--journey .journey-stop::before { transition: none; }
}

/* phone review */
/* What the walk at 390 × 844 found (WebKit, English and Traditional Chinese), put right for phones only.
   Nothing here reaches past 40rem. */
@media (max-width: 40rem) {
  /* The end of the track. The chapter bar is carried off with the track's last pixels: it stood on the foot of
     the last card, with the teeth of the next ground across its own foot. It now has a berth of its own between
     the two (the room is only made where the bar floats: with scripts). */
  .page--journey .journey-dock { inset-block-end: calc(var(--seam-h) + .75rem); }
  html.js .page--journey .journey-chapter--back { padding-block-end: calc(var(--seam-h) + 5.25rem); }
  /* The cog stops above that berth, as it does from 46rem: with a year under each tooth the bar reaches the
     rail, and the cog ended half behind the bar's corner. */
  .page--journey .journey-spine { inset-block-end: calc(var(--seam-h) + 4.625rem); }
  /* Clear of the phone's home bar where the page itself reaches the foot of the screen (a web app on the home
     screen, a browser inside another app). Where the browser's own bar stands there instead, the small viewport
     has already allowed for it and nothing is added. */
  @supports (block-size: 100dvh) {
    .page--journey .journey-index { inset-block-start: calc(var(--j-vh) - 4.5rem - var(--dock-h, 0px) - max(0px, var(--safe-b) - .625rem - (100dvh - 100svh))); }
  }
  /* (Two things found here are put right at their source now, for every width: the bar under a quiet year is the
     rail's grey by the weight of its own rule, with the card's rules; and the three numbers lean about their own
     middle, because journey.js no longer leaves the corner their entrance swung from as an inline origin.) */
}
@media (max-width: 29.99rem) {
  /* The bar with a name over it is taller: so is its berth, and its distance from the home bar. */
  html.js .page--journey .journey-chapter--back { padding-block-end: calc(var(--seam-h) + 7rem); }
  .page--journey .journey-spine { inset-block-end: calc(var(--seam-h) + 6.3125rem); }
  @supports (block-size: 100dvh) {
    .page--journey .journey-index { inset-block-start: calc(var(--j-vh) - 6.25rem - var(--dock-h, 0px) - max(0px, var(--safe-b) - .6875rem - (100dvh - 100svh))); }
  }
  /* Before the first chapter is being read the bar has no name over it. It keeps the room for one, so the row
     of teeth does not drop when the name arrives. */
  html.js .page--journey .journey-index__list:not(:has([aria-current])) { margin-block-start: 1.6875rem; }
  /* A tooth still to come is a control with no word beside it: a shade firmer, so it reads on the white bar. */
  .page--journey .journey-index__mark { opacity: .5; }
  /* The number a card holds: a little more room for its words. */
  .page--journey .journey-card__stat { gap: .75rem; padding-inline: .875rem; }
  /* A pair of wheels: one under the other, the first toward the rail and the second away from it, each large
     enough to show its people. Side by side each was a thumbnail 7rem across, and its caption a column of
     single words. (A browser that cannot tell the first of a pair keeps them side by side.) */
  @supports selector(:has(+ *)) {
    .page--journey .journey-photo--cog:has(+ .journey-photo--cog),
    .page--journey .journey-photo--cog + .journey-photo--cog { flex: 1 1 100%; max-inline-size: none; }
    .page--journey .journey-photo--cog:has(+ .journey-photo--cog) > .journey-photo__iris,
    .page--journey .journey-photo--cog + .journey-photo--cog > .journey-photo__iris { inline-size: 10.5rem; }
    .page--journey .journey-photo--cog:has(+ .journey-photo--cog) { justify-items: start; text-align: start; }
    .page--journey .journey-photo--cog + .journey-photo--cog { justify-items: end; text-align: end; }
  }
}
@media (min-width: 22.5rem) and (max-width: 29.99rem) {
  /* A return (2010, 2019, 2026) is a bigger moment on a phone as well: its year and its mark the size they
     reach at 30rem, scaled to the head they stand in. (Under 22.5rem the head has no room to spare.) */
  .page--journey .journey-card--return .journey-card__year { font-size: clamp(2.75rem, 13.3vw, 3.25rem); }
  .page--journey .journey-card--return .journey-card__year--long { font-size: clamp(2rem, 10.2vw, 2.5rem); }
  .page--journey .journey-card--return .journey-card__mark { --m: 3rem; }
  /* The medals stand two abreast on every phone from 22.5rem. (At that width two of their own measure missed
     by a few pixels, and the five stood in one long column.) */
  .page--journey .journey-medal { flex-basis: calc(50% - .25rem); }
  /* The chapter bar: each tooth carries the year its chapter opens on, as it does from 30rem (five bare teeth
     did not say where each one led). The chapter being read keeps its name over the row. */
  html.js .page--journey .journey-index__tooth:not([aria-current]) { flex-direction: column; gap: .125rem; padding-inline: .375rem; vertical-align: top; }   /* top: a column has no baseline of its own, and its line grew by a few pixels */
  html.js .page--journey .journey-index__tooth:not([aria-current]) .journey-index__mark { inline-size: calc(.6875rem * var(--tooth-ratio, 1.2)); block-size: .6875rem; }
  html.js .page--journey .journey-index__tooth:not([aria-current]) .journey-index__year { display: block; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
  html.js .page--journey .journey-index__tooth.is-past:not([aria-current]) .journey-index__year { color: var(--cranberry-text); }
}
@media (max-width: 21.24rem) {
  /* The narrowest phones. A card keeps to its own width whatever it holds (a Chinese phrase that may not be
     broken, beside a number, pushed three cards past the edge of the screen), and the words of a number go
     under it when there is no room beside. */
  .page--journey .journey-card { grid-template-columns: minmax(0, 1fr); }
  .page--journey .journey-card__stat { flex-wrap: wrap; row-gap: .125rem; }
  .page--journey .journey-card__year--long { font-size: 1.625rem; }   /* 1998–2000 and its mark, inside the head */
}
/* (The white that showed at the corners of an area card's lit head on a phone is put right at its source now:
   --j-head-r, with the card's rules.) */