/* =============================================================================
   30-outro.css — THE HAND-OVER
   The seam where the six-chapter film releases and the shop begins.

   The brief here is the hardest one on the site: the register of the page
   changes at this line, and the reader must not feel the AUTHOR change with
   it. So nothing about the film stops abruptly. The last frame keeps burning
   underneath, lit from the upper left the way the hero is lit from its sky;
   the chapter rail comes down the right edge and lands on a terminating tick;
   the HUD keeps its instruction / progress / counter across the foot, one
   chapter further on; and the six chapters are set down once more as a credit
   index before the page lets go. A plumb line then drops out of a hairline,
   landing exactly where the pour lands, and the shop begins.

   Ownership: this file styles ONLY .journey-outro and its children. The
   journey stage, its stylesheet and its script are untouched.

   ---------------------------------------------------------------------------
   CASCADE — READ BEFORE EDITING
   assets/css/journey.css is enqueued AFTER every file in parts/ (see
   teashop_scripts() in functions.php: the parts loop runs first, the journey
   stylesheet is appended below it). So journey.css:332 `.journey-outro` at
   0-1-0 BEATS a bare `.journey-outro` here on source order, and its padding
   and two-stop background were silently winning — the whole ground of this
   section never rendered.

   Therefore: the block rule below is written `section.journey-outro`
   (0-1-1) and every child rule is parent-scoped (0-2-x). Both outrank
   journey.css's `.journey-outro`, `.journey-outro h2` and `.journey-outro p`.
   Never soften either of those selectors back to a bare class.
   ---------------------------------------------------------------------------

   PAINT ORDER inside the section's own stacking context (isolation: isolate):
     z 0  .journey-outro-film    the photograph, masked
     z 1  ::after                the scrim stack — bloom, veil, vignette, seams
     z 2  ::before               film grain, overlay-blended
     z 3  .container / rail / hud   type and furniture
   The scrim MUST NOT live inside .journey-outro-film: that element carries
   opacity and a filter, and a child of an opacity group is multiplied by it,
   which is why the previous scrim did nothing.
   ============================================================================= */

/* --- 1. The ground ---------------------------------------------------------
   A sustained darkness with a full tonal ramp, not a flat panel.

   TOP SEAM. The journey does not end on --night-2. Its last plate under the
   stage's bottom scrim renders at roughly rgb(18 23 20) at 1440x1100 — three
   times lighter than #070c08 — so a section that opened on the token stepped
   visibly darker and drew a hard full-width line across the page. The seam
   tone below is SAMPLED FROM THE RENDER, held flat for the first 12%, and
   only then allowed to fall. It is the one measured constant in this file;
   everything else is built from tokens.

   BOTTOM SEAM. The band under this one (.features-strip) lays a 62% black
   wash over the page ground, so it starts at about rgb(5 8 7). Ending on
   --color-bg (14 22 17) dropped 9/255 at the join. This ends on --night-2,
   which meets it within 3/255 — under the noise floor of the grain.
   -------------------------------------------------------------------------- */

section.journey-outro {
  /* Sampled: the journey's own last rendered frame at the boundary row. */
  --outro-seam: rgb(18 23 20);
  --outro-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --outro-frame: clamp(20px, 3.6vw, 52px);   /* the hero's own right-edge inset */

  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: clip;                /* never `hidden`: no new scroll container */
  display: flex;
  align-items: center;
  min-height: min(84vh, 880px);
  padding: clamp(132px, 15vw, 216px) 0 clamp(96px, 8.6vw, 124px);

  /* 05-motion.css gives .features-strip a --rhythm-chapter-half margin when
     it follows this section (05-motion.css:322). That silence was landing as
     a 132px band of flat body colour between two composed grounds — most of
     the dead fill the eye reads under the CTA, and a second hard edge on the
     way into it.

     The interval is not deleted, it is absorbed: these two margins collapse
     to zero, and the same distance is then carried by this section's own
     bottom padding, which arrives with the gradient, the grain and the HUD
     on it. The CTA still stands ~124px off the edge and the next chapter
     still opens on its own 69px — the silence survives, the empty band does
     not. Read from the motion system's own token so it can never drift out
     of step with whatever that workstream sets it to. */
  margin-bottom: calc(var(--rhythm-chapter-half, 0px) * -1);

  background: linear-gradient(
    180deg,
    var(--outro-seam) 0%,
    var(--outro-seam) 12%,
    color-mix(in srgb, var(--outro-seam) 74%, var(--night-2)) 34%,
    color-mix(in srgb, var(--outro-seam) 40%, var(--night-2)) 58%,
    color-mix(in srgb, var(--outro-seam) 12%, var(--night-2)) 80%,
    var(--night-2) 100%
  );
  text-align: center;
}

/* --- 2. The closing wide ---------------------------------------------------
   The film's last move is not a cut, it is a pull-back. Chapter six is a
   close-up — a hand, a gaiwan, a pour — and at 1440 that plate is 2400x1599
   against a 1440x880 box, so `cover` fits it almost edge to edge and what
   fills the frame is a forearm. Nothing in the crop can fix that; the frame
   is the wrong size for the subject.

   So the hand-over ends the way films end: it goes wide. Chapter five's
   plate — the road out of the mountains — is the one photograph in the set
   that is BUILT for a 1440-wide band. Mist in the top left, a ridge mass
   holding the right, and the valley floor with the river and the road across
   the bottom. It is also, precisely, what the lede under it says: "Every tea
   below came down that same road."

   Measured, that plate runs p05 27 / p50 72 / p95 192 — a full range, where
   the close-up ran flat and dark. Carried at .64 under a light filter it
   lands around p05 21 / p50 46 / p95 114 in the frame, which is the tonal
   spread the hero has and this section did not.

   THE MASK. Held at full through the whole upper half, then dissolved out
   before the section ends, so the photograph shows no edge at the bottom.
   It also rises OUT of nothing over the first fifth: the frame above this
   one is a dark interior, and a bright misty landscape switched on at full
   strength at the boundary row would draw the hardest line on the page.
   Coming up out of the dark is the dissolve — and it is what makes the join
   invisible.
   -------------------------------------------------------------------------- */

section.journey-outro .journey-outro-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../media/journey/05-mountain-road.webp");
  /* `cover`, always — the plate has to reach all four edges at every width
     this band is ever laid out at, and a percentage size cannot promise
     that on an ultrawide. Held one notch below centre so the valley floor,
     the river and the road sit under the type rather than behind it. */
  background-size: cover;
  background-position: 50% 60%;
  background-repeat: no-repeat;
  opacity: 0.84;
  /* The plate is a cold blue-teal mist; the hero's sky is amber and the page
     around it is warm green. A fifth of sepia with the saturation put back
     lands it in the same air as the rest of the site without touching a
     single colour value. */
  filter: sepia(0.2) saturate(1.18) brightness(0.94) contrast(1.05);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.32) 6%,
    rgba(0, 0, 0, 0.84) 13%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 71%,
    rgba(0, 0, 0, 0.66) 82%,
    rgba(0, 0, 0, 0.26) 90%,
    rgba(0, 0, 0, 0.07) 95%,
    transparent 99%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.32) 6%,
    rgba(0, 0, 0, 0.84) 13%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 71%,
    rgba(0, 0, 0, 0.66) 82%,
    rgba(0, 0, 0, 0.26) 90%,
    rgba(0, 0, 0, 0.07) 95%,
    transparent 99%
  );
}

/* --- 2b. The scrim ---------------------------------------------------------
   Five layers, painted top-down in the order listed. Between them they give
   the frame what the hero has and this section did not: a light source, a
   quiet band for the type, held corners, and two invisible joins.
   -------------------------------------------------------------------------- */

section.journey-outro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* (1) TOP SEAM. Opaque at the boundary row, gone within 9%: whatever the
       last frame resolved to, the first row of this section is the same
       value, and the join has nothing to show. */
    linear-gradient(
      180deg,
      var(--outro-seam) 0%,
      color-mix(in srgb, var(--outro-seam) 46%, transparent) 4%,
      transparent 9%
    ),
    /* (2) BOTTOM SEAM. The reverse, into the band below. */
    linear-gradient(
      0deg,
      var(--night-2) 0%,
      color-mix(in srgb, var(--night-2) 82%, transparent) 7%,
      color-mix(in srgb, var(--night-2) 44%, transparent) 17%,
      color-mix(in srgb, var(--night-2) 14%, transparent) 27%,
      transparent 38%
    ),
    /* (3) THE COPY BAND. The pour runs straight through the display line, so
       the middle of the picture is veiled and the edges are left alone — the
       reverse of a vignette. */
    radial-gradient(
      68% 45% at 50% 46%,
      color-mix(in srgb, var(--night-2) 76%, transparent) 0%,
      color-mix(in srgb, var(--night-2) 52%, transparent) 56%,
      transparent 88%
    ),
    /* (4) HELD CORNERS. The section owns 900px of full-bleed height; without
       this the four corners drift to the same value as the middle and the
       frame has no edges. */
    radial-gradient(
      116% 84% at 48% 42%,
      transparent 42%,
      color-mix(in srgb, var(--night-2) 34%, transparent) 78%,
      color-mix(in srgb, var(--night-2) 66%, transparent) 100%
    ),
    /* (5) THE LIGHT SOURCE. The hero is lit by a whole sky; so is this. The
       plate brings its own mist in the top left, and this only carries that
       light a little further into the frame so the darkness has a direction
       rather than a level. Listed last, so every layer above still acts on
       it. */
    radial-gradient(
      54% 46% at 24% 26%,
      color-mix(in srgb, var(--paper) 9%, transparent) 0%,
      color-mix(in srgb, var(--paper) 4%, transparent) 46%,
      transparent 78%
    );
}

/* Film grain. 5% of a fractal-noise tile, overlaid — invisible as texture,
   decisive as the difference between "photograph" and "flat colour". */
section.journey-outro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --- 3. The column --------------------------------------------------------- */

section.journey-outro > .container {
  position: relative;
  z-index: 3;
}

section.journey-outro .journey-outro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 78ch;
  margin: 0 auto;
}

/* One soft accent bloom behind the display line — the steam off the cup the
   heading is talking about. Sits inside the container's stacking context, so
   it lifts off the photograph without ever reaching the type. */
section.journey-outro .journey-outro-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(-90px, -6vw, -40px);
  width: min(1180px, 108%);
  aspect-ratio: 2.2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--color-accent) 9%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 3%, transparent) 46%,
    transparent 72%
  );
  filter: blur(26px);
  pointer-events: none;
}

/* --- 4. The kicker ---------------------------------------------------------
   The hero's signature — 0.7rem / 0.17em / uppercase behind a hairline —
   centred for the hand-over, with the rule mirrored and fading outward on
   both sides. The number keeps counting past the film's last chapter.
   -------------------------------------------------------------------------- */

section.journey-outro .journey-outro-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px color-mix(in srgb, var(--night-2) 70%, transparent);
}

section.journey-outro .journey-outro-kicker::before,
section.journey-outro .journey-outro-kicker::after {
  content: "";
  flex: none;
  width: clamp(34px, 5vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

section.journey-outro .journey-outro-kicker::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

/* --- 5. The display line ---------------------------------------------------
   Set to the hero's own specification: Fraunces 300, clamp to ~6.6vw, 0.92
   leading, -0.045em tracking, balanced wrap, one italic word in accent. The
   text-shadow is the journey's, so the type sits on the photograph the same
   way it does four screens above.
   -------------------------------------------------------------------------- */

section.journey-outro .journey-outro-title {
  max-width: 15ch;
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2.9rem, 6.6vw, 6.8rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 4px 44px color-mix(in srgb, var(--night-2) 72%, transparent);
}

section.journey-outro .journey-outro-title em {
  font-style: italic;
  color: var(--color-accent);
}

/* --- 6. The lede ----------------------------------------------------------- */

section.journey-outro .journey-outro-lede {
  max-width: 47ch;
  margin: clamp(24px, 2.6vw, 36px) auto 0;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font-size: clamp(1rem, 1.12vw, 1.15rem);
  line-height: 1.75;
  text-wrap: pretty;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--night-2) 78%, transparent);
}

/* --- 7. The credit index ---------------------------------------------------
   The six chapters, set down once more the way a film sets down its reels:
   numbered, hairline-linked, 0.7rem HUD type, the chapter just finished
   carrying the accent. The last thing written in the film's voice.
   -------------------------------------------------------------------------- */

section.journey-outro .journey-outro-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 22px);
  margin: clamp(44px, 5vw, 76px) 0 0;
  padding: 0;
  counter-reset: outro-chapter;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

section.journey-outro .journey-outro-credits li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}

section.journey-outro .journey-outro-credits li::before {
  counter-increment: outro-chapter;
  content: counter(outro-chapter, decimal-leading-zero);
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

section.journey-outro .journey-outro-credits li:not(:last-child)::after {
  content: "";
  flex: none;
  width: clamp(14px, 2.4vw, 34px);
  height: 1px;
  margin-left: clamp(4px, 0.8vw, 10px);
  background: linear-gradient(
    90deg,
    var(--color-border-strong),
    color-mix(in srgb, var(--color-border-strong) 24%, transparent)
  );
}

section.journey-outro .journey-outro-credits li:last-child {
  color: var(--color-accent);
}

/* --- 8. The gate -----------------------------------------------------------
   A hairline drawn across the column: the film ends on this line. A plumb
   line drops from its centre — landing on the same axis the pour lands on in
   the photograph behind it — a single light travels down it, and the label
   under it is the only thing on the page asking to be clicked.
   -------------------------------------------------------------------------- */

section.journey-outro .journey-outro-gate {
  position: relative;
  width: min(760px, 100%);
  margin: clamp(56px, 6.5vw, 104px) auto 0;
  padding-top: clamp(46px, 5vw, 72px);
}

section.journey-outro .journey-outro-gate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border) 10%,
    color-mix(in srgb, var(--paper) 30%, transparent) 50%,
    var(--color-border) 90%,
    transparent 100%
  );
}

/* The plumb line, hung from the exact centre of the rule. */
section.journey-outro .journey-outro-gate::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: clamp(46px, 5vw, 72px);
  background: linear-gradient(
    180deg,
    var(--color-border-strong) 0%,
    color-mix(in srgb, var(--color-accent) 46%, transparent) 100%
  );
  transform: translateX(-50%);
}

section.journey-outro .journey-outro-cue {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 26px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 46%, transparent);
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    color 0.4s var(--outro-ease),
    border-color 0.4s var(--outro-ease),
    background 0.4s var(--outro-ease),
    transform 0.4s var(--outro-ease);
}

/* The arrow is the same mark the journey's own CTA uses, turned down the page
   because that is where the shop is. */
section.journey-outro .journey-outro-cue::after {
  content: "\2193";
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.4s var(--outro-ease);
}

section.journey-outro .journey-outro-cue:hover,
section.journey-outro .journey-outro-cue:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 58%, transparent);
  background: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
  color: var(--ink);
  transform: translateY(-2px);
}

section.journey-outro .journey-outro-cue:hover::after,
section.journey-outro .journey-outro-cue:focus-visible::after {
  transform: translateY(3px);
}

section.journey-outro .journey-outro-cue:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* A single light travelling down the plumb line. Slow, long-tailed and
   mostly transparent — a descent, not a beacon. main.css already collapses
   every animation under prefers-reduced-motion. */
section.journey-outro .journey-outro-spark {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
  opacity: 0;
  animation: outro-descend 3.6s var(--outro-ease) infinite;
  pointer-events: none;
}

@keyframes outro-descend {
  0%   { opacity: 0; transform: translateY(-2px) scale(0.6); }
  12%  { opacity: 0.9; }
  62%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(clamp(46px, 5vw, 72px)) scale(0.6); }
}

/* --- 9. The frame ----------------------------------------------------------
   The hero holds its picture with four marks: the kicker top left, the
   chapter rail down the right edge, the scroll cue bottom left and the
   counter bottom right. A centred stack floating in the middle of 900px of
   full-bleed dark is not the same author. So the same furniture comes down
   here, one chapter on — the rail arriving at its terminus, and the HUD
   reading 07 / 07 with its progress line run all the way out.
   -------------------------------------------------------------------------- */

/* 9a. The rail's terminating tick, dropped out of the seam at the hero's own
       52px right inset. */
section.journey-outro .journey-outro-rail {
  position: absolute;
  z-index: 3;
  top: 0;
  right: var(--outro-frame);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  pointer-events: none;
}

section.journey-outro .journey-outro-rail-line {
  width: 1px;
  height: clamp(72px, 13vh, 150px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-border-strong) 46%,
    color-mix(in srgb, var(--color-accent) 62%, transparent) 100%
  );
}

section.journey-outro .journey-outro-rail-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--color-accent) 11%, transparent),
    0 0 18px 3px color-mix(in srgb, var(--color-accent) 34%, transparent);
}

section.journey-outro .journey-outro-rail-label {
  margin-top: 5px;
  color: color-mix(in srgb, var(--paper) 52%, transparent);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* 9b. The HUD across the foot: instruction, progress, counter. */
section.journey-outro .journey-outro-hud {
  position: absolute;
  z-index: 3;
  left: var(--outro-frame);
  /* The theme's back-to-top control is fixed at the viewport's bottom right,
     44px at a 28px inset, and it is on screen at exactly the scroll position
     this HUD is read at. The counter is held clear of its 72px footprint
     rather than being sliced in half by it. */
  right: max(var(--outro-frame), 86px);
  bottom: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  pointer-events: none;
}

section.journey-outro .journey-outro-hud-note {
  flex: none;
  white-space: nowrap;
}

/* The progress line, run all the way out and tipped in accent: the film has
   played to its end. Same hairline the journey's own progress bar uses. */
section.journey-outro .journey-outro-hud-bar {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  min-width: 40px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-border-strong) 30%, transparent) 0%,
    var(--color-border-strong) 22%,
    color-mix(in srgb, var(--color-accent) 44%, transparent) 100%
  );
}

section.journey-outro .journey-outro-hud-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: translateY(-50%);
}

section.journey-outro .journey-outro-hud-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

section.journey-outro .journey-outro-hud-count b {
  color: var(--ink);
  font-weight: 600;
}

/* --- 10. Motion ------------------------------------------------------------
   The section opts into the theme's own reveal machinery via data-reveal in
   the template; nothing here needs to hide content. This only lengthens the
   display line's entrance so the hand-over arrives slower than a grid does.
   -------------------------------------------------------------------------- */

html.ts-motion section.journey-outro .journey-outro-title {
  --reveal-rise-base: 40px;
  --reveal-blur-base: 9px;
  --reveal-dur-base: 1180ms;
}

html.ts-motion section.journey-outro .journey-outro-kicker,
html.ts-motion section.journey-outro .journey-outro-credits {
  --reveal-rise-base: 9px;
  --reveal-dur-base: 760ms;
}

/* --- 11. Narrow ------------------------------------------------------------
   Part files load after every media query in main.css, so the breakpoints
   this section needs live here.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  section.journey-outro .journey-outro-title { max-width: 13ch; }
}

@media (max-width: 1024px) {
  section.journey-outro {
    /* A tablet's content stack is shorter than a desktop's but the min-height
       is not, and the surplus is split top and bottom by the centring — which
       put ~70px of nothing under the CTA at 768 that reads as the hole this
       section was rebuilt to close. Held just above the natural height so the
       plate still has a band to fill and the foot stays measured. */
    min-height: min(74vh, 680px);
    padding-top: clamp(120px, 15vw, 196px);
  }

  section.journey-outro .journey-outro-rail-line { height: clamp(60px, 10vh, 110px); }
}

/* Below this the right edge is too narrow to carry a vertical label beside a
   centred column: the rail keeps its line and its tick, and loses its word. */
@media (max-width: 900px) {
  section.journey-outro .journey-outro-rail-label { display: none; }
}

@media (max-width: 760px) {
  section.journey-outro {
    --outro-frame: clamp(16px, 4.6vw, 30px);
    min-height: 0;
    padding: clamp(104px, 21vw, 156px) 0 clamp(84px, 16vw, 112px);
  }

  section.journey-outro .journey-outro-film {
    /* Portrait box: `cover` now crops on the WIDTH, so the frame is a
       narrow vertical slice of the plate. Taken off centre onto the lit
       side — mist above, the road below — and carried a little stronger,
       because a slice this narrow holds far less light than the band does. */
    background-position: 41% 50%;
    opacity: 0.72;
  }

  section.journey-outro .journey-outro-title {
    max-width: 11ch;
    font-size: clamp(2.5rem, 11.5vw, 4.4rem);
    line-height: 0.94;
  }

  section.journey-outro .journey-outro-lede {
    max-width: 40ch;
    font-size: 0.98rem;
    line-height: 1.7;
  }

  section.journey-outro .journey-outro-credits {
    gap: 9px clamp(9px, 3vw, 15px);
    margin-top: clamp(36px, 9vw, 56px);
    letter-spacing: 0.13em;
  }

  section.journey-outro .journey-outro-credits li { gap: 7px; }
  section.journey-outro .journey-outro-credits li:not(:last-child)::after {
    width: 11px;
    margin-left: 4px;
  }

  section.journey-outro .journey-outro-gate {
    margin-top: clamp(44px, 11vw, 72px);
    padding-top: 44px;
  }

  section.journey-outro .journey-outro-gate::after { height: 44px; }

  section.journey-outro .journey-outro-hud { gap: 12px; letter-spacing: 0.13em; }
  section.journey-outro .journey-outro-rail-line { height: 64px; }

  @keyframes outro-descend {
    0%   { opacity: 0; transform: translateY(-2px) scale(0.6); }
    12%  { opacity: 0.9; }
    62%  { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(44px) scale(0.6); }
  }
}

/* The credit index wraps here, and a wrapped row that opens with a dangling
   hairline reads as a mistake. The numbers carry the sequence on their own. */
@media (max-width: 620px) {
  section.journey-outro .journey-outro-credits {
    gap: 11px clamp(13px, 4.4vw, 20px);
    letter-spacing: 0.11em;
  }

  section.journey-outro .journey-outro-credits li:not(:last-child)::after { display: none; }
}

/* Phone: the HUD keeps the counter — the one mark that says the film is over —
   and drops the sentence it no longer has room to set. */
@media (max-width: 560px) {
  section.journey-outro .journey-outro-hud-note { display: none; }
}

@media (max-width: 480px) {
  section.journey-outro .journey-outro-kicker {
    gap: 10px;
    letter-spacing: 0.13em;
  }

  section.journey-outro .journey-outro-kicker::before,
  section.journey-outro .journey-outro-kicker::after { width: 18px; }

  section.journey-outro .journey-outro-cue {
    padding: 13px 20px;
    letter-spacing: 0.13em;
  }
}