/* ==========================================================================
   About — the journey road (site/about_journey.py, js/about-journey.js)

   A soft road (a wide, barely-there bed with a faint centre line) winds down
   a light ground through five stops; a bronze line draws itself along it as
   you scroll. Each stop: a clay marker on the road, the phase copy on one
   side, a clay maquette on the other that grows phase by phase — office
   blocks on a plinth, and two pressed-in wells (team, global clients) whose
   bronze fill rises from the previous phase's level.

   Default markup = the finished state (no JS / reduced motion). The "off"
   states below apply only once JS has armed the road ([data-armed]).
   Motion is transform / opacity only. Tokens only (html[data-theme] safe).
   ========================================================================== */

.jr__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.jr__head h2 { max-width: 17ch; }
.jr__head > p { max-width: 360px; }

.jr { position: relative; padding: clamp(56px, 6vw, 88px) 0 clamp(96px, 10vw, 150px); }

/* ── the road ─────────────────────────────────────────────────────────── */
.jr__road { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0; }
.jr__road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jr__bed  { stroke: rgba(var(--shade), .075); stroke-width: 34; }
.jr__lane { stroke: rgba(var(--shade), .26); stroke-width: 1.2; stroke-dasharray: 3 11; }
.jr__ink  { stroke: var(--bronze); stroke-width: 2.6; }

.jr__origin { position: absolute; left: 0; top: 0; z-index: 1; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 6px rgba(var(--bronze-rgb), .16); opacity: 0; }
.jr[data-measured] .jr__origin { opacity: 1; }

/* ── stops ────────────────────────────────────────────────────────────── */
.jr__stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(84px, 10vw, 150px); }
.jr__stop { --sx: -46px; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 12vw, 170px) minmax(0, 1fr); }
.jr__stop--r { --sx: 46px; }

.jr__mark { grid-column: 2; grid-row: 1; justify-self: center; position: relative;
  transform: translateX(var(--sx));
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--ground-flat); box-shadow: var(--clay-sm);
  font: 400 16px/1 Newsreader, Georgia, serif; color: var(--ink-soft); letter-spacing: .02em;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.jr__stop[data-on] .jr__mark, .jr:not([data-armed]) .jr__mark {
  background: var(--bronze); color: var(--dark);
  box-shadow: var(--clay-sm), 0 0 0 7px rgba(var(--bronze-rgb), .15); }

/* the phase's years (as the live page labels them): a small Newsreader label
   in a clay pill, on the road just under the marker (the stop is one grid row,
   so the stop's own centre is the marker's centre; --sx is the marker's side
   shift, --mk its size). The pill is flush with the marker's edge on the copy's
   side and hangs toward the maquette, so it never reaches into the copy
   column. Phones: above the phase name. */
.jr__stop { position: relative; --mk: 54px; }
.jr__year { position: absolute; z-index: 2; top: calc(50% + var(--mk) / 2 + 9px);
  left: calc(50% + var(--sx) - var(--mk) / 2);
  display: inline-block; padding: 6px 11px 5px; border-radius: var(--r-pill);
  white-space: nowrap; font: 400 13px/1 Newsreader, Georgia, serif; letter-spacing: .05em;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
  background: var(--ground-flat); box-shadow: var(--clay-sm);
  transition: color .5s var(--ease); }
.jr__stop--r .jr__year { left: calc(50% + var(--sx) + var(--mk) / 2); transform: translateX(-100%); }
.jr__stop[data-on] .jr__year, .jr:not([data-armed]) .jr__year { color: var(--bronze-deep); }
.jr__copy { grid-row: 1; max-width: 470px; }
.jr__stop--l .jr__copy { grid-column: 1; justify-self: end; }
.jr__stop--r .jr__copy { grid-column: 3; justify-self: start; }
.jr__t { font: 300 clamp(1.75rem, 2.6vw, 2.375rem)/1.1 Newsreader, Georgia, serif;
  letter-spacing: -.02em; }
.jr__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.jr__list li { position: relative; padding-left: 20px;
  font: 400 15px/1.62 Inter, sans-serif; color: var(--ink-muted); }
.jr__list li::before { content: ""; position: absolute; left: 2px; top: calc(.81em - 1px); width: 7px; height: 2px;
  background: rgba(var(--bronze-rgb), .9); }

.jr__vis { grid-row: 1; container-type: inline-size; min-width: 0; }
.jr__stop--l .jr__vis { grid-column: 3; }
.jr__stop--r .jr__vis { grid-column: 1; }
.jr__stop--r .jr__vis .jm { margin-left: auto; }

/* ── the maquette ─────────────────────────────────────────────────────── */
.jm { font-size: clamp(7px, 2.75cqi, 13px); width: max-content; max-width: 100%; }
.jm__plinth { display: flex; align-items: flex-end; gap: 2.4em;
  padding: 2.4em 2.4em 1.9em; border-radius: 2em; }
.jm__offices { display: flex; align-items: flex-end; gap: 2em; }
.jm__side { display: grid; justify-items: start; gap: .9em; }
.jm__side--in { max-width: 13em; }
.jm__side--us { max-width: 7em; }
.jm__blocks { display: flex; align-items: flex-end; gap: .5em; height: 6.6em;
  padding: 0 .2em; border-bottom: 1px solid var(--line); min-width: 3em; }
.jm__b { position: relative; width: 2em; height: 4.2em; border-radius: .45em .45em .2em .2em;
  background: rgba(var(--bronze-rgb), .34); box-shadow: var(--clay-sm);
  transform-origin: 50% 100%;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(.15s + var(--d, 0) * .14s); }
/* floor lines: structure, not decoration — read as a building at any size */
.jm__b::after { content: ""; position: absolute; inset: .7em .45em .5em;
  background: repeating-linear-gradient(180deg, rgba(var(--shade), .14) 0 1px, transparent 1px .8em); }
.jm__b--hq { height: 6em; }
.jm__b--new { background: var(--bronze); }
.jm__b--new::after { background: repeating-linear-gradient(180deg, rgba(var(--dark-rgb), .14) 0 1px, transparent 1px .8em); }
.jm__side--empty .jm__blocks::before { content: ""; width: 2em; height: 1.1em; border-radius: .35em;
  border: 1px dashed rgba(var(--shade), .36); }

.jm__k { font: 500 1em/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); }
.jm__cities { font: 400 1.1em/1.5 Inter, sans-serif; color: var(--ink-faint); }
.jm__city:not(:last-child)::after { content: " ·"; color: var(--ink-faint); font-weight: 400; }
.jm__city--new { color: var(--bronze-deep); font-weight: 500;
  transition: opacity .6s var(--ease) .5s; }

.jm__gauges { display: flex; align-items: flex-end; gap: 1.4em; align-self: stretch;
  padding-left: 2.2em; border-left: 1px solid var(--line-soft); }
.jm__g { display: grid; justify-items: center; align-items: end; gap: .75em; min-width: 4.6em;
  grid-template-rows: auto auto 2.6em; }
.jm__val { font: 300 2.3em/1 Newsreader, Georgia, serif; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity .6s var(--ease) .55s, transform .6s var(--ease) .55s; }
.jm__val sup { font-size: .5em; color: var(--bronze-deep); }
.jm__well { position: relative; width: 2em; height: 8.6em; border-radius: 1em; overflow: hidden;
  background: var(--ground-sink); box-shadow: var(--clay-in); }
.jm__fill { position: absolute; left: .32em; right: .32em; bottom: .32em; top: .32em;
  border-radius: .7em; background: var(--bronze);
  transform: translateY(calc((1 - var(--v)) * 100%));
  transition: transform 1.15s var(--ease) .2s; }
.jm__prev { position: absolute; left: .18em; right: .18em; height: 1.5px;
  bottom: calc(.32em + (100% - .64em) * var(--p)); background: rgba(var(--dark-rgb), .38); }
.jm__g--first .jm__prev { display: none; }
.jm__gk { font: 500 .95em/1.35 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; max-width: 6.4em; align-self: start; }

/* ── off (armed, stop not yet reached) ─────────────────────────────────── */
.jr[data-armed] .jr__stop:not([data-on]) .jm__b--new { opacity: 0; transform: translateY(.8em) scaleY(.25);
  transition-delay: 0s; }
.jr[data-armed] .jr__stop:not([data-on]) .jm__city--new { opacity: 0; transition-delay: 0s; }
.jr[data-armed] .jr__stop:not([data-on]) .jm__fill {
  transform: translateY(calc((1 - var(--p)) * 100%)); transition-delay: 0s; }
.jr[data-armed] .jr__stop:not([data-on]) .jm__val { opacity: 0; transform: translateY(.4em);
  transition-delay: 0s; }

/* ── tablet: tighter middle ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .jr__stop { --sx: -34px; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); }
  .jr__stop--r { --sx: 34px; }
  .jr__stop { --mk: 48px; }
  .jr__mark { width: 48px; height: 48px; font-size: 15px; }
  .jr__year { top: calc(50% + var(--mk) / 2 + 8px); font-size: 12.5px; padding: 5px 10px 4px; }
  .jr__bed { stroke-width: 28; }
}

/* ── phone: the same road down the left edge, copy + maquette beside it ── */
@media (max-width: 760px) {
  .jr { padding: 44px 0 64px; }
  .jr__stops { gap: 72px; }
  .jr__stop, .jr__stop--r { --sx: -5px; grid-template-columns: 50px minmax(0, 1fr); align-items: start;
    row-gap: 26px; }
  .jr__stop--r { --sx: 5px; }
  .jr__mark { grid-column: 1; grid-row: 1; width: 40px; height: 40px; font-size: 13.5px; }
  .jr__stop--l .jr__copy, .jr__stop--r .jr__copy { grid-column: 2; grid-row: 1; justify-self: start;
    padding-left: 8px; }
  .jr__stop--l .jr__vis, .jr__stop--r .jr__vis { grid-column: 2; grid-row: 2; padding-left: 8px; }
  .jr__stop--r .jr__vis .jm { margin-left: 0; }
  .jr__year, .jr__stop--r .jr__year { position: static; transform: none; margin: 2px 0 10px; font-size: 12.5px; }
  .jr__t { margin-top: 4px; }
  .jr__list li { font-size: 14.5px; }
  .jr__bed { stroke-width: 22; }
  .jm { font-size: clamp(6.6px, 2.95cqi, 9.5px); }
  .jm__plinth { gap: 1.8em; padding: 2em 1.9em 1.6em; }
  .jm__offices { gap: 1.6em; }
  .jm__gauges { padding-left: 1.8em; gap: 1em; }
  /* labels stay readable (≥ 12px, judge-pages) while the maquette keeps its scale */
  .jm__k, .jm__gk { font-size: 12px; letter-spacing: .1em; }
  .jm__gk { max-width: none; }
  .jm__cities { font-size: 12px; }
  .jm__side--in { max-width: 15em; }
}

@media (prefers-reduced-motion: reduce) {
  .jr__mark, .jr__year, .jm__b, .jm__city--new, .jm__val, .jm__fill { transition: none !important; }
}