/* ============================================================================
   S6 · The Train — where he has worked. Owner: js/scenes/train.js
   Default (no JS, reduced motion, motion off, phones): a vertical list of the
   nine roles: the key pose; also portrait tablets. html.js.motion at ≥768px in
   landscape: one 600vw track scrubbed right to left under the dot; time runs
   left to right.
   Paper plate, ink type: the section carries its own tokens so it reads ink on
   paper whatever plate the page is on (deep links, the still edition).
   ========================================================================== */
.scene--train {
  --fg: var(--ink);
  --fg-2: color-mix(in srgb, var(--ink) 62%, transparent);
  --fg-3: color-mix(in srgb, var(--ink) 42%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --plate-bg: var(--paper);
  --train-word: min(14vw, 24svh);
  --train-axis: 52%;
  /* Fault red, darkened for text on paper (4.9:1); --fault stays for the 2px fills */
  --train-red: #c62828;
  color: var(--ink);
  color-scheme: light;
}
.scene--train .scene__stage {
  background: var(--paper);
  color: var(--ink);
  padding: calc(var(--header-h) + 24px) var(--gutter) max(var(--gutter), 40px);
}

/* ---------- The list (default = key pose; also the phone edition) ---------- */
.scene--train .train__h {
  position: static;
}
.train__now,
.train__years,
.train__axis,
.train__bars,
.train__fill,
.train__part--merged {
  display: none;
}
.train__sub.train__sub--2 {
  display: none;
}
.train__viewport {
  position: relative;
}
.train__stops {
  display: block;
  margin: clamp(24px, 5vh, 56px) 0 0;
  border-bottom: 1px solid var(--line);
}
.train__stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 34vw) 1fr;
  column-gap: 3vw;
  align-items: baseline;
  padding: clamp(10px, 1.4vh, 18px) 0;
  border-top: 1px solid var(--line);
}
.train__word {
  grid-column: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  width: max-content;
  max-width: 100%;
  text-align: left;
  font-size: clamp(28px, 5vw, 80px);
  font-variation-settings: "wdth" 75, "wght" 900;
  font-stretch: 75%;
  line-height: 0.9;
  color: var(--ink);
}
.train__glyphs {
  display: block;
}
.train__sub {
  grid-column: 2;
  display: block;
  color: var(--fg-2);
}
.train__tag {
  display: inline-block;
  margin-right: 1em;
  color: var(--train-red);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.train__stop--along {
  padding-left: clamp(16px, 4vw, 40px);
}
.train__stop--along::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(10px, 1.4vh, 18px);
  bottom: clamp(10px, 1.4vh, 18px);
  width: 2px;
  background: var(--fault);
}
.scene--train .train__card {
  grid-column: 1 / -1;
  position: static;
  width: 100%;
  max-width: 64ch;
  margin-top: 12px;
}
.train__part + .train__part {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.train__part-h {
  display: none;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.train__aside {
  color: var(--fg-3);
  margin-top: 10px;
}
/* The counter: the last row, after CGI. The track ends on the present. Two lines: the duration in display type at
   normal width (the words are condensed, so it reads as a different voice), then AND COUNTING in mono. */
.train__count {
  margin: 0;
  padding: clamp(16px, 2.4vh, 28px) 0 0;
}
.train__count-n {
  display: block;
  font-size: clamp(28px, 5vw, 80px);
  font-variation-settings: "wdth" 100, "wght" 900;
  font-stretch: 100%;
  line-height: 0.9;
  color: var(--ink);
  white-space: nowrap;
}
.train__count-k {
  display: block;
  margin-top: 0.7em;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.scene--train .train__line {
  position: static;
  margin-top: clamp(28px, 6vh, 64px);
}

/* Phones and portrait tablets: the list, not pinned; the section is just its content height, even with motion on. */
@media (max-width: 767px), (orientation: portrait) {
  .scene--train {
    min-height: 0;
  }
  .scene--train .scene__stage {
    position: relative;
    height: auto;
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .scene--train {
    min-height: 0;
  }
  .scene--train .scene__stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding-top: calc(var(--header-h) + 16px);
  }
  .train__stop {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 6px;
    padding: 14px 0;
  }
  .train__word {
    font-size: clamp(30px, 11vw, 64px);
  }
  .train__sub {
    grid-column: 1;
    font-size: 12px;
  }
  .train__tag {
    display: block;
    margin: 0 0 2px;
  }
  .train__stop--along {
    padding-left: 18px;
  }
  .train__stop--along::before {
    top: 14px;
    bottom: 14px;
  }
  /* ≈ 9vw display type; the width axis comes in so twenty characters ("10 YEARS · 11 MONTHS") hold one line at 320 */
  .train__count {
    padding-top: 18px;
  }
  .train__count-n {
    font-size: 9vw;
    font-variation-settings: "wdth" 76, "wght" 900;
    font-stretch: 76%;
  }
  .scene--train .train__card {
    width: 100%;
  }
}

/* ---------- The track (motion edition, ≥768px, landscape; train.js TRACK_MQ mirrors this) ---------- */
@media (min-width: 768px) and (orientation: landscape) {
  html.js.motion .scene--train .scene__stage {
    padding: 0;
  }
  html.js.motion .scene--train .train__h,
  html.js.motion .scene--train .train__line {
    position: absolute;
    margin: 0;
  }
  html.js.motion .scene--train .train__line {
    z-index: 4;
    max-width: 34ch;
  }
  /* NOW and its tick follow the dot (train.js writes the transform) */
  html.js.motion .scene--train .train__now {
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(var(--header-h) + 8px);
    left: 0;
    transform: translateX(54vw) translateX(-50%);
    margin: 0;
    color: var(--ink);
    white-space: nowrap;
  }
  html.js.motion .scene--train .train__now::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    width: 1px;
    height: var(--train-tick, 0px);
    background: color-mix(in srgb, var(--ink) 45%, transparent);
  }
  html.js.motion .scene--train .train__viewport {
    position: absolute;
    inset: 0;
  }
  html.js.motion .scene--train .train__years {
    display: block;
    position: absolute;
    z-index: 0;
    top: var(--train-axis);
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
  }
  html.js.motion .scene--train .train__years span {
    position: absolute;
    top: 0;
    left: var(--x, 0px);
    transform: translate(-50%, -50%);
    font-size: var(--train-year, 16vw);
    line-height: 1;
    font-variation-settings: "wdth" 50, "wght" 900;
    font-stretch: 50%;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 22%, transparent);
    white-space: nowrap;
  }
  html.js.motion .scene--train .train__axis {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: var(--train-axis);
    height: 1px;
    background: var(--line);
  }
  html.js.motion .scene--train .train__track {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 600vw;
  }
  html.js.motion .scene--train .train__stops {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
  }
  html.js.motion .scene--train .train__stops:not(.train__stops--built) .train__stop {
    visibility: hidden;
  }
  html.js.motion .scene--train .train__stop {
    position: absolute;
    left: var(--x, 0px);
    display: block;
    width: max-content;
    min-height: 0;
    padding: 0;
    border: 0;
  }
  html.js.motion .scene--train .train__stop--along::before {
    display: none;
  }
  html.js.motion .scene--train .train__stop--lane0 {
    bottom: calc(100% - var(--train-axis) + 14px);
  }
  html.js.motion .scene--train .train__stop--lane1 {
    top: calc(var(--train-axis) + 16px);
  }
  html.js.motion .scene--train .train__stop--merged {
    display: none;
  }
  html.js.motion .scene--train .train__word {
    position: relative;
    display: block;
    min-height: 0;
    width: max-content;
    max-width: none;
    font-size: var(--train-word);
    line-height: 0.86;
    white-space: nowrap;
  }
  html.js.motion .scene--train .train__stop--dual .train__glyphs {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
  }
  html.js.motion .scene--train .train__fill {
    display: block;
    position: absolute;
    inset: 0;
    color: var(--ink);
  }
  html.js.motion .scene--train .train__bars {
    display: block;
    position: relative;
    height: 8px;
    width: var(--len, 0px);
    min-width: 2px;
    margin-top: 10px;
  }
  html.js.motion .scene--train .train__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--bx, 0px);
    width: var(--bw, 0px);
  }
  html.js.motion .scene--train .train__bar-fill {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform-origin: 0 50%;
  }
  html.js.motion .scene--train .train__bar--outline .train__bar-fill {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  html.js.motion .scene--train .train__sub {
    display: block;
    width: max-content;
    max-width: 40vw;
    margin-top: 8px;
    font-size: 12px;
    white-space: normal;
  }
  html.js.motion .scene--train .train__sub--2 {
    display: block;
    margin: 4px 0 0 var(--sx, 0px);
  }
  /* the end stop (CGI): its sublabel wraps to the width of its word or bar (never under 34ch, so it breaks after
     "Christian Dior ·") and the counter stands right after CGI instead of after a one-line sublabel (train.js writes
     --train-end-w) */
  html.js.motion .scene--train .train__stop--end .train__sub {
    max-width: max(var(--train-end-w, 40vw), 34ch);
  }
  html.js.motion .scene--train .train__tag {
    display: none;
  }
  /* XAI: the part-time superscript above lane 0, Fault red, a 2px bar */
  html.js.motion .scene--train .train__stop--part {
    bottom: var(--train-sup-b, 70%);
  }
  html.js.motion .scene--train .train__stop--part .train__word {
    font-size: max(16px, calc(var(--train-word) * 0.26));
    color: var(--train-red);
  }
  html.js.motion .scene--train .train__stop--part .train__bars {
    height: 2px;
    margin-top: 6px;
  }
  html.js.motion .scene--train .train__stop--part .train__bar-fill {
    background: var(--fault);
  }
  html.js.motion .scene--train .train__stop--part .train__sub {
    margin-top: 6px;
  }
  /* the detail cards open in place: below lane 0, above lane 1 */
  html.js.motion .scene--train .train__card {
    position: absolute;
    left: 0;
    top: calc(100% + 12px);
    width: min(360px, 40vw);
    max-width: none;
    margin: 0;
  }
  html.js.motion .scene--train .train__stop--lane1 .train__card {
    top: auto;
    bottom: calc(100% + 12px);
  }
  html.js.motion .scene--train .train__part--merged {
    display: block;
  }
  html.js.motion .scene--train .train__stop--dual .train__part-h {
    display: block;
  }
  /* the counter on the track: it rides the track right after CGI, its first line centred on the axis (the axis hairline
     stops short of it: train.js scales .train__axis), right edge on the right gutter when the track comes to rest.
     train.js writes --x and --train-count (fitted between CGI and the gutter) and its opacity. */
  html.js.motion .scene--train .train__axis {
    transform-origin: 0 50%;
  }
  html.js.motion .scene--train .train__count {
    position: absolute;
    z-index: 1;
    left: var(--x, 0px);
    top: var(--train-axis);
    width: max-content;
    margin: calc(var(--train-count, 5vw) * -0.38) 0 0;
    padding: 0;
    opacity: 0;
    white-space: nowrap;
  }
  html.js.motion .scene--train .train__count-n {
    font-size: var(--train-count, 5vw);
    font-variation-settings: "wdth" 100, "wght" 900;
    font-stretch: 100%;
    line-height: 0.86;
  }
  html.js.motion .scene--train .train__count-k {
    margin-top: clamp(8px, calc(var(--train-count, 5vw) * 0.22), 18px);
  }
  html.js.motion .scene--train .train__stops:not(.train__stops--built) ~ .train__count {
    visibility: hidden;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  html.js.motion .scene--train .train__sub {
    font-size: 13px;
  }
}

/* ---------- Short stages (laptops at 640–800px): smaller words and a smaller line, so the line keeps its own band under lane 1 ---------- */
@media (min-width: 768px) and (max-height: 800px) and (orientation: landscape) {
  .scene--train {
    --train-word: min(14vw, 21svh);
    --train-axis: 50%;
  }
  html.js.motion .scene--train .train__line {
    font-size: clamp(20px, 3.6svh, 30px);
    max-width: 30ch;
  }
}

/* ---------- Landscape phones: the track, smaller ---------- */
@media (min-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  .scene--train {
    --train-word: min(14vw, 12svh);
    --train-axis: 52%;
  }
  html.js.motion .scene--train .train__stop--lane0 {
    bottom: calc(100% - var(--train-axis) + 10px);
  }
  html.js.motion .scene--train .train__stop--lane1 {
    top: calc(var(--train-axis) + 10px);
  }
  html.js.motion .scene--train .train__bars {
    height: 6px;
    margin-top: 6px;
  }
  html.js.motion .scene--train .train__sub {
    margin-top: 5px;
  }
  html.js.motion .scene--train .train__sub {
    font-size: 11px;
  }
  html.js.motion .scene--train .train__line {
    font-size: 15px;
    max-width: none;
    bottom: 16px;
  }
}