.journey {
  /* Chromatic System v2 — the archive stays deliberately neutral. It is the
     palette cleanser between the fruit bays and the engine, so it is the one
     zone that does NOT take a hue. Only the gold is lifted, to stop it reading
     as brown against the newly saturated sections either side of it. */
  --journey-black: #0e0e10;
  --journey-ivory: #f7f2e8;
  --journey-gold: #e0a11a;
  --journey-line: rgba(247, 242, 232, 0.24);
  position: relative;
  z-index: 0;
  isolation: isolate;
  contain: paint;
  overflow: clip;
  color: var(--journey-ivory);
  background: var(--journey-black);
}

.journey-intro {
  /* Was min(88svh,64rem) with align-content:space-between — a 634px box holding
     ~14px of ink, the register pinned to the top and the title to the bottom
     with 478px of nothing between them. Sized to its content and set as a
     bottom-aligned opener so the title leads straight into the first chapter. */
  min-height: min(46svh, 26rem);
  display: grid;
  align-content: end;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
  background: var(--journey-black, #0e0e10);
}

.journey-intro__register {
  margin: 0;
  color: rgba(246, 241, 231, 0.55);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.journey-intro__composition {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.5fr);
  gap: clamp(3rem, 9vw, 11rem);
  align-items: end;
}

.journey-intro h2 {
  margin: 0;
  font: 400 clamp(5.5rem, 14.5vw, 16rem) / 0.72 var(--font-display);
  letter-spacing: -0.072em;
}

.journey-intro__composition > div { padding-bottom: 0.8rem; }
.journey-intro__composition > div > p {
  margin: 0 0 3rem;
  font: 400 clamp(1.35rem, 2.2vw, 2.25rem) / 1.15 var(--font-display);
}
.journey-intro__composition > div > span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: rgba(246, 241, 231, 0.62);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.journey-intro__composition > div > span i { height: 1px; background: rgba(246, 241, 231, 0.25); }

.journey-archive {
  padding-top: 1rem;
  padding-bottom: clamp(8rem, 14vw, 14rem);
  background: var(--journey-black, #0e0e10);
}

/* One continuous field, Mumbai to Kolkata. No section breaks.
   The rhythm comes from two things instead of dividers: chapter 01 — the only
   commissioned chapter, and the departure — runs double-width as the anchor,
   and the remaining cards carry a per-column vertical offset so the grid reads
   as a drift rather than a wall of equal tiles. */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.9rem, 1.4vw, 1.5rem);
  row-gap: clamp(2rem, 3.4vw, 3.4rem);
  align-items: start;
}

.journey-card[data-journey-chapter="1"] {
  grid-column: span 2;
}

@media (min-width: 60rem) {
  /* Stagger only where there is room for it to read as intentional. */
  .journey-card:nth-child(4n + 2) { margin-top: clamp(1.4rem, 2.6vw, 3rem); }
  .journey-card:nth-child(4n + 3) { margin-top: clamp(0.6rem, 1.1vw, 1.3rem); }
  .journey-card:nth-child(4n + 4) { margin-top: clamp(2.2rem, 4.2vw, 4.8rem); }
}

.journey-region {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  margin-top: clamp(2.5rem, 6vw, 7rem);
  color: rgba(246, 241, 231, 0.48);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.journey-region:first-child { margin-top: 0; }
.journey-region i { height: 1px; background: rgba(246, 241, 231, 0.16); }
.journey-region small { color: var(--journey-gold); font: inherit; font-variant-numeric: tabular-nums; }

.journey-card { min-width: 0; }
.journey-card__button {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.journey-card__frame {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--journey-black, #0e0e10);
}
.journey-card__media {
  position: absolute;
  inset: 1px 1px 11.5%;
  overflow: hidden;
  border-radius: 0.62rem 0.62rem 0 0;
  background: var(--journey-black, #0e0e10);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 31% 100%, 25% 96%, 20% 100%, 0 100%);
}
.journey-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--journey-black, #0e0e10);
}
.journey-card__primary {
  object-fit: cover;
  opacity: 0.9;
  mix-blend-mode: lighten;
  transform: scale(0.64);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-card__secondary {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Specimen plate — authored artwork for the 17 uncommissioned chapters.
   Unlike the photography it does NOT rest at 0.64 scale: the plate is composed
   to fill its frame, so it sits full-bleed and gains presence on activation
   rather than growing into place. */
.specimen-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transform: scale(1.006);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-card.is-active .specimen-plate { opacity: 1; transform: scale(1.028); }
.specimen-plate .plate__constellation { transform-origin: 50% 22%; }
/* Region rides on the card now that the continent dividers are gone. Sits in
   the frame's top-left, quiet enough that it never competes with the city. */
.journey-card__region {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  left: 0.85rem;
  color: rgba(247, 242, 232, 0.42);
  /* 0.44rem resolved to 7px, below the point this is actually readable.
     Legibility floor kept quiet by the low opacity rather than by size. */
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 300ms ease;
}
.journey-card.is-active .journey-card__region { color: var(--journey-gold, #e0a11a); }

.journey-card__outline {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.journey-card__outline path {
  fill: none;
  stroke: var(--journey-line);
  stroke-width: 1;
  transition: stroke 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-card__meta {
  position: absolute;
  z-index: 5;
  right: 1.3%;
  bottom: 0;
  left: 28%;
  height: 11.5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.45rem, 1vw, 0.9rem);
  white-space: nowrap;
}
.journey-card__meta strong,
.journey-card__meta em {
  font-size: clamp(0.66rem, 1.15vw, 0.9rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.journey-card__meta strong { overflow: hidden; color: var(--journey-ivory); text-overflow: ellipsis; }
.journey-card__meta em { flex: 0 0 auto; color: var(--journey-gold); font-variant-numeric: tabular-nums; }

.journey-card.is-media-ready.is-active .journey-card__primary { opacity: 0; transform: scale(0.68); }
.journey-card.is-media-ready.is-active .journey-card__secondary { opacity: 1; transform: scale(1); }

/* Chapters 02–09 were delivered as a single frame each. The cross-fade above
   needs two photographs, so on those cards the primary performs the reveal
   itself — same easing, same 420/460ms, one picture. Without this the archive
   shows eight of nine chapters at 36% of their frame with no payoff on hover.

   mix-blend-mode is dropped at REST rather than on activation because it is not
   an animatable property: switching it on hover would pop the shadows a frame
   before the scale began. Against the #0e0e10 card black, `lighten` was mostly
   passing the photo through anyway while flattening its darkest tones. */
.journey-card.is-single-frame .journey-card__primary { mix-blend-mode: normal; }
.journey-card.is-single-frame.is-active .journey-card__primary { opacity: 1; transform: scale(1); }

/* At rest the region label sits on card black. Once the photo fills the frame
   it sits on the photograph. Measured across the nine chapters, MEAN contrast
   under the label stays 4.1:1–8.3:1, but PEAK contrast falls below 3:1 on six
   of them where a pan rim or a garnish highlight passes beneath the text.

   A soft ramped scrim is the reflex answer and the wrong one here: the archive
   discipline check in scripts/build.js bans ramped fills and backdrop blur in
   this sheet on purpose. A flat plate sized to the label is both compliant and
   closer to the archive's existing vocabulary of flat rectangles and hairlines.
   top/left are pulled back by the padding so the glyphs do not move when it
   appears. (That check substring-matches the whole file, comments included —
   naming a banned property in prose here will fail the build.) */
.journey-card.is-single-frame .journey-card__region {
  top: calc(0.75rem - 0.3rem);
  left: calc(0.85rem - 0.5rem);
  padding: 0.3rem 0.5rem;
  background: rgba(14, 14, 16, 0);
  transition: color 300ms ease, background-color 300ms ease;
}
.journey-card.is-single-frame.is-active .journey-card__region { background: rgba(14, 14, 16, 0.74); }
.journey-card.is-active .journey-card__outline path,
.journey-card__button:focus-visible .journey-card__outline path { stroke: var(--journey-gold); }
.journey-card__button:focus-visible { outline: none; }
.journey-card__button:focus-visible .journey-card__frame::after {
  position: absolute;
  z-index: 6;
  inset: 0.35rem;
  border: 1px solid rgba(200, 134, 10, 0.65);
  border-radius: 0.38rem;
  content: "";
  pointer-events: none;
}
/* The old rule desaturated the shared placeholder to 40% to signal "pending".
   The plate carries that signal in its own type ("CHAPTER NOT YET
   COMMISSIONED"), so it is no longer greyed out — it is finished artwork. */

.journey__error {
  grid-column: 1 / -1;
  min-height: 20rem;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(246, 241, 231, 0.58);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}

.journey-overlay {
  position: fixed;
  z-index: 720;
  inset: 0;
  color: var(--journey-ivory, #f7f2e8);
}
.journey-overlay__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); opacity: 0; transition: opacity 420ms ease; }
.journey-overlay__shell {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--journey-black, #0e0e10);
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-overlay.is-open .journey-overlay__scrim { opacity: 1; }
.journey-overlay.is-open .journey-overlay__shell { opacity: 1; transform: translateY(0); }
.journey-overlay__bar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(246, 241, 231, 0.16);
  background: var(--journey-black, #0e0e10);
}
.journey-overlay__bar > span { color: rgba(246, 241, 231, 0.54); font-size: 0.57rem; font-weight: 500; letter-spacing: 0.19em; }
.journey-overlay__bar button {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0 0 1rem;
  border: 1px solid rgba(246, 241, 231, 0.24);
  background: var(--journey-black, #0e0e10);
  cursor: pointer;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease;
}
.journey-overlay__bar button i { width: 3rem; height: 3rem; display: grid; place-items: center; border-left: 1px solid rgba(246, 241, 231, 0.2); color: var(--journey-gold); font-size: 1rem; font-style: normal; }
.journey-overlay__bar button:focus-visible { outline: 1px solid var(--journey-gold); outline-offset: 3px; }
/* The chapter room takes its accent from the fruit the dish is built on. The
   archive grid outside stays deliberately neutral — this is the only zone that
   is allowed a hue, and it is one solid colour on hairlines and step numbers,
   never a wash. */
.journey-overlay__shell { --journey-accent: var(--journey-gold, #e0a11a); }
.journey-overlay__shell[data-sku="jamun"] { --journey-accent: #b083c8; }
.journey-overlay__shell[data-sku="pineapple"] { --journey-accent: #e5c04b; }

.journey-overlay__content { display: grid; grid-template-columns: minmax(24rem, 0.92fr) minmax(29rem, 1.08fr); min-height: calc(100svh - 5rem); }
/* Sticky, not just tall: Paris runs 37 steps and Copenhagen five stages, so a
   hero pinned to the top of the column would scroll away and leave the reader
   working through a method with no dish in front of them. */
.journey-overlay__hero {
  position: sticky;
  top: 5rem;
  align-self: start;
  height: calc(100svh - 5rem);
  overflow: hidden;
  background: var(--journey-black, #0e0e10);
}
.journey-overlay__hero img { width: 100%; height: 100%; object-fit: cover; }
.journey-overlay__hero.is-placeholder img { object-fit: cover; opacity: 0.58; filter: saturate(0.35); }
.journey-overlay__editorial { padding: clamp(4rem, 8vw, 9rem) clamp(2rem, 6vw, 7rem); border-left: 1px solid rgba(246, 241, 231, 0.14); }
.journey-overlay__chapter-head > span,
.journey-overlay__column-label,
.journey-overlay__moment > span,
.journey-overlay__moment small {
  display: block;
  color: var(--journey-accent);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.journey-overlay__chapter-head > p { margin: 1.1rem 0 2rem; color: rgba(246, 241, 231, 0.62); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.journey-overlay__chapter-head h2 { max-width: 11ch; margin: 0; font: 400 clamp(3.7rem, 7vw, 8rem) / 0.84 var(--font-display); letter-spacing: -0.055em; }
.journey-overlay__chapter-head .journey-overlay__subtitle { max-width: 34rem; margin: 1.6rem 0 0; color: rgba(246, 241, 231, 0.5); font-size: 0.74rem; letter-spacing: 0.02em; text-transform: none; }
.journey-overlay__chapter-head > strong { display: block; margin-top: 2rem; color: var(--journey-accent); font: 400 clamp(4rem, 8vw, 9rem) / 0.8 var(--font-display); letter-spacing: -0.05em; }

.journey-overlay__dietary { display: flex; margin: 2.4rem 0 0; padding: 0; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.journey-overlay__dietary li { padding: 0.42rem 0.7rem; border: 1px solid rgba(246, 241, 231, 0.22); color: rgba(246, 241, 231, 0.6); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; }

.journey-overlay__story { max-width: 42rem; margin: clamp(3rem, 6vw, 6rem) 0; color: rgba(246, 241, 231, 0.72); font: 400 clamp(1.25rem, 2vw, 1.8rem) / 1.45 var(--font-display); }
.journey-overlay__story p { margin: 0; }
.journey-overlay__story p + p { margin-top: 1.4rem; }

/* Column count follows the dish. Mumbai declares three timings, Beirut four,
   Copenhagen only a yield — a hard `repeat(3, 1fr)` left an empty cell on two
   of the three and split one across a phantom divider. */
.journey-overlay__facts {
  display: grid;
  grid-template-columns: repeat(var(--journey-fact-count, 3), minmax(0, 1fr));
  /* Caps the band so Copenhagen's single "Serves 4" reads as one measured cell
     rather than one label stretched across the whole column. Three or more
     facts exceed the editorial width anyway and stay fluid. */
  max-width: calc(var(--journey-fact-count, 3) * 12rem);
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  border-top: 1px solid rgba(246, 241, 231, 0.18);
  border-bottom: 1px solid rgba(246, 241, 231, 0.18);
}
.journey-overlay__facts div { padding: 1.3rem 0; }
.journey-overlay__facts div + div { padding-left: 1.2rem; border-left: 1px solid rgba(246, 241, 231, 0.16); }
.journey-overlay__facts dt { color: rgba(246, 241, 231, 0.48); font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; }
.journey-overlay__facts dd { margin: 0.45rem 0 0; font: 400 1.45rem/1 var(--font-display); }

.journey-overlay__recipe { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(18rem, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.journey-overlay__group + .journey-overlay__group { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
/* A component heading — "Rooibos syrup", "04 — Pineapple powder". Set apart
   from the column label above it so a composed recipe reads as several small
   recipes rather than one undifferentiated wall. */
.journey-overlay__group h4 {
  margin: 1.7rem 0 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--journey-accent);
  color: var(--journey-ivory, #f7f2e8);
  font: 400 1.05rem/1.2 var(--font-display);
  letter-spacing: 0.01em;
}
.journey-overlay__recipe ul,
.journey-overlay__recipe ol { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.journey-overlay__column-label + .journey-overlay__group ul,
.journey-overlay__column-label + .journey-overlay__group ol { margin-top: 1.6rem; }
.journey-overlay__recipe li { padding: 0.85rem 0; border-top: 1px solid rgba(246, 241, 231, 0.12); color: rgba(246, 241, 231, 0.68); font-size: 0.84rem; line-height: 1.55; }
/* Grouped methods keep one continuous run of numbers, so step 21 on screen is
   step 21 in the source recipe. Each <ol> is given its own `counter-reset`
   inline by the renderer — a CSS counter cannot read the `start` attribute,
   and `calc()` is not allowed in `counter-reset`. */
.journey-overlay__recipe ol { counter-reset: journey-method 0; }
.journey-overlay__recipe ol li { position: relative; padding-left: 2.2rem; counter-increment: journey-method; }
.journey-overlay__recipe ol li::before { position: absolute; left: 0; color: var(--journey-accent); content: counter(journey-method, decimal-leading-zero); font-size: 0.54rem; letter-spacing: 0.08em; }
/* The recipes carry their own emphasis — "Do NOT create mechanically perfect
   toruses", "NOT puree. NOT gel." — which is instruction, not decoration, and
   is set apart from the step rather than run into it. */
.journey-overlay__step-note {
  display: block;
  margin-top: 0.55rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--journey-accent);
  color: rgba(246, 241, 231, 0.5);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.5;
}
.journey-overlay__service { margin: 1.9rem 0 0; color: rgba(246, 241, 231, 0.58); font-size: 0.8rem; line-height: 1.6; }

.journey-overlay__moment { margin-top: clamp(4rem, 7vw, 7rem); padding-top: 1.4rem; border-top: 1px solid var(--journey-accent); }
.journey-overlay__keywords { display: flex; margin: 1.4rem 0 0; padding: 0; flex-wrap: wrap; gap: 0.55rem 1.5rem; list-style: none; }
.journey-overlay__keywords li { color: var(--journey-accent); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; }
.journey-overlay__moment p { max-width: 38rem; margin: 1.2rem 0 0; font: 400 clamp(1.35rem, 2.2vw, 2rem) / 1.25 var(--font-display); }
.journey-overlay__moment p:last-of-type { margin-bottom: 2.5rem; }
.journey-overlay__moment small { margin-bottom: 0.55rem; color: rgba(246, 241, 231, 0.43); }
.journey-overlay__moment strong { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.05em; }
.journey-overlay__pending { margin: clamp(4rem, 10vw, 10rem) 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(246, 241, 231, 0.18); color: rgba(246, 241, 231, 0.4); font-size: 0.58rem; letter-spacing: 0.17em; }

@media (hover: hover) and (pointer: fine) {
  .journey-overlay__bar button:hover { border-color: var(--journey-gold); color: var(--journey-gold); }
}

@media (min-width: 768px) {
  .journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 3vw, 3rem); }
}

@media (min-width: 1280px) {
  .journey-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .journey-intro__composition { grid-template-columns: 1fr; gap: 3rem; }
  .journey-intro h2 { font-size: clamp(5.2rem, 20vw, 10rem); }
  .journey-intro__composition > div { max-width: 25rem; }
  .journey-overlay__content { grid-template-columns: 1fr; }
  /* Single column: the hero is a lid on top of the editorial, not a companion
     beside it, so pinning it would cover the recipe as you scroll. */
  .journey-overlay__hero { position: static; height: 78svh; }
  .journey-overlay__editorial { border-top: 1px solid rgba(246, 241, 231, 0.14); border-left: 0; }
}

@media (max-width: 620px) {
  .journey-intro { min-height: 78svh; padding-top: 7.5rem; padding-bottom: 4.5rem; }
  .journey-intro h2 { font-size: clamp(5rem, 25vw, 7rem); }
  .journey-intro__composition > div > p { margin-bottom: 2rem; font-size: 1.35rem; }
  .journey-archive { padding-right: 14px; padding-left: 14px; }
  .journey-grid { column-gap: 18px; row-gap: 1.7rem; }
  .journey-region { min-height: 2.8rem; margin-top: 3.5rem; }
  .journey-card__meta { left: 22%; gap: 0.35rem; }
  .journey-card__meta strong,
  .journey-card__meta em { font-size: clamp(0.58rem, 2.65vw, 0.72rem); }
  .journey-overlay__bar { min-height: 4.5rem; }
  .journey-overlay__bar > span { max-width: 9rem; line-height: 1.45; }
  .journey-overlay__bar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .journey-overlay__bar button { padding-left: 0; }
  .journey-overlay__hero { height: 72svh; }
  .journey-overlay__editorial { padding: 3.6rem 1.15rem 6rem; }
  .journey-overlay__chapter-head h2 { font-size: clamp(3.6rem, 15vw, 5.5rem); }
  .journey-overlay__story { font-size: 1.25rem; }
  .journey-overlay__facts { grid-template-columns: 1fr; }
  .journey-overlay__facts div + div { padding-left: 0; border-top: 1px solid rgba(246, 241, 231, 0.14); border-left: 0; }
  .journey-overlay__recipe { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 300px) {
  .journey-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-card__primary,
  .journey-card__secondary,
  .journey-card__outline path,
  .journey-overlay__scrim,
  .journey-overlay__shell { transition: opacity 120ms linear; }
  .journey-card__primary,
  .journey-card__secondary,
  .journey-overlay__shell { transform: none; }
}