/* ==========================================================================
   The Wine Atlas — the journey below the hero
   Tokens here are scoped to the journey so the hero keeps its own palette.
   ========================================================================== */

.journey,
.rail,
.page-begin {
  --j-parchment: #f2ebdd;
  --j-linen: #e8dfcb;
  --j-burgundy: #4b1725;
  --j-cellar: #2a0c14;
  --j-olive: #7d8060;
  --j-olive-ink: #5c5f45;
  --j-champagne: #d1b68a;
  --j-charcoal: #322d28;
  --j-night: #1c1a17;

  --j-measure: 38rem;
  --j-space: clamp(5.5rem, 13vw, 11rem);
  --j-rule: color-mix(in srgb, currentColor 24%, transparent);
  --j-muted: color-mix(in srgb, currentColor 76%, transparent);
  --j-accent: var(--j-burgundy);
  --j-soft: var(--j-olive-ink);
}

/* --------------------------------------------------------------------------
   Ground colour: one viewport-sized surface that fades as the visitor travels.
   Only this layer's opacity animates, which the graphics card handles alone,
   so the fade never has to repaint the page. Ink follows on nearby stages only.
   -------------------------------------------------------------------------- */

.journey {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  background: var(--j-parchment);
  color: var(--j-charcoal);
}

.ground {
  position: sticky;
  z-index: -1;
  top: 0;
  display: block;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  pointer-events: none;
}
.ground span {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.ground .was-on { z-index: 1; opacity: 1; }
.ground .is-on {
  z-index: 2;
  opacity: 1;
  transition: opacity 1.2s var(--ease);
}
.ground [data-ground-tone="night"] { background: var(--j-night); }
.ground [data-ground-tone="parchment"] { background: var(--j-parchment); }
.ground [data-ground-tone="burgundy"] { background: var(--j-burgundy); }
.ground [data-ground-tone="linen"] { background: var(--j-linen); }
.ground [data-ground-tone="cellar"] { background: var(--j-cellar); }

.stage { transition: color 1.1s var(--ease); }
.stage[data-ink="dark"] {
  --j-accent: var(--j-champagne);
  --j-soft: color-mix(in srgb, var(--j-parchment) 74%, transparent);
  color: var(--j-parchment);
}

/* Without scripting nothing fades, so each stage carries its own ground */
html:not(.js) .ground { display: none; }
html:not(.js) .flavours { background: var(--j-burgundy); color: var(--j-parchment); }
html:not(.js) .kit { background: var(--j-linen); }
html:not(.js) .begin { background: var(--j-cellar); color: var(--j-parchment); }

/* The way onward stays closed until a destination is chosen */
.js .journey:not(.is-routed) .onward { display: none; }

.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  color: var(--j-accent);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-align: center;
  text-transform: uppercase;
}
.gate span:last-child { text-wrap: balance; }
.gate svg { width: 9px; height: 9px; }
.gate__line {
  width: 1px;
  height: 4rem;
  background: repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 11px);
  opacity: .7;
}
.journey.is-routed .gate,
html:not(.js) .gate { display: none; }
.gate.is-prompt span { animation: gate-prompt 1.4s var(--ease); }
@keyframes gate-prompt {
  30% { opacity: .35; }
}

.stage {
  position: relative;
  padding: var(--j-space) var(--gutter);
  scroll-margin-top: 0;
}

/* --------------------------------------------------------------------------
   Threshold: the hero dissolves into the first leg of the route
   -------------------------------------------------------------------------- */

.threshold {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: clamp(13rem, 34vh, 22rem);
  margin-top: -1px;
  color: var(--j-champagne);
}
.threshold::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: clamp(4rem, 14vh, 9rem);
  background: linear-gradient(180deg, rgba(28, 26, 23, 0), var(--j-night));
  pointer-events: none;
}
.threshold__line {
  width: 1px;
  flex: 1;
  background: repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 11px);
  opacity: .75;
}
.threshold__mark { margin: .75rem 0; }
.threshold__mark svg { width: 9px; height: 9px; }
.threshold__note {
  margin: 0;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .36em;
  text-indent: .36em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  color: var(--j-parchment);
}

/* --------------------------------------------------------------------------
   Shared stage type
   -------------------------------------------------------------------------- */

.stage__head { max-width: 76rem; margin: 0 auto clamp(3.5rem, 8vw, 7rem); }
.stage__head--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  max-width: none;
}

.kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.75rem;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--j-muted);
}
.kicker span {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: none;
}

.stage__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 7.4vw, 7.25rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.stage__title em {
  display: block;
  font-style: italic;
  font-weight: 300;
}
.stage__title--wide { max-width: 15em; font-size: clamp(2.75rem, 6.2vw, 6rem); }

.stage__lede {
  max-width: var(--j-measure);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.stage__head--split .stage__lede { margin-top: 0; }

.quiet-link {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: opacity .4s var(--ease);
}
.quiet-link:hover { opacity: .65; }
.stage__aside .quiet-link { margin-top: 1.5rem; color: var(--j-accent); }

.journey :focus-visible,

.btn--burgundy { background: var(--j-burgundy); color: var(--j-parchment); }
.btn--burgundy:hover { background: var(--j-cellar); }
.btn--ivory { background: var(--j-parchment); color: var(--j-burgundy); }
.btn--ivory:hover { background: var(--j-champagne); }
.btn--champagne { background: var(--j-champagne); color: var(--j-cellar); }
.btn--champagne:hover { background: var(--j-parchment); }

/* --------------------------------------------------------------------------
   01 Destination
   -------------------------------------------------------------------------- */

/* The stage is one engraved plate, gilt on dark burgundy like an atlas binding.
   Below 1100px the whole chart stays pinned above the list of places, and its
   marks can be tapped too. */
.destination { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.destination .gate { margin-inline: var(--gutter); }
html:not(.js) .destination { background: var(--j-cellar); color: var(--j-parchment); }

.plate {
  --folio-sea: var(--j-cellar);
  --folio-land: var(--j-burgundy);
  --folio-tide: color-mix(in srgb, var(--j-champagne) 30%, var(--j-burgundy));
  position: relative;
  background: var(--folio-sea);
}
.plate > noscript p { margin-inline: var(--gutter); padding-bottom: 2rem; }

.cartouche { padding: 3.5rem var(--gutter) 2.5rem; }
.cartouche .kicker { margin-bottom: 1.25rem; color: var(--j-champagne); }
.cartouche__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 12vw, 4.75rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.cartouche__title em { display: block; font-style: italic; }
.cartouche__lede { max-width: 30rem; margin: 1.25rem 0 0; line-height: 1.6; text-wrap: pretty; }
.cartouche .quiet-link { margin-top: 1rem; color: var(--j-champagne); }

.atlas {
  --view: min(100vw, 60svh); /* the width of chart in view, centred on the frame */
  min-width: 0;
  margin: 0;
  padding: 0 0 2.5rem;
  border: 0;
}

.atlas__frame {
  position: sticky;
  z-index: 2;
  top: 0;
  height: calc(var(--view) * .75);
  width: 100%;
  overflow: hidden;
  background: var(--folio-sea);
  border-block: 1px solid color-mix(in srgb, var(--j-champagne) 50%, transparent);
}
/* Crops only the empty east of the sheet, so every place stays in view */
.atlas__sheet {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--view) * .535);
  width: calc(var(--view) * 1.404);
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}

.folio { width: 100%; height: 100%; overflow: visible; }
.folio path, .folio rect { fill: none; }
.folio .folio__tide,
.folio .folio__sea { stroke-linejoin: round; }
.folio .folio__tide { stroke: var(--folio-tide); }
.folio .folio__sea { stroke: var(--folio-sea); }
.folio .folio__land {
  fill: var(--folio-land);
  stroke: var(--j-champagne);
  stroke-width: 1;
  stroke-linejoin: round;
}
.folio .folio__graticule { stroke: color-mix(in srgb, var(--j-champagne) 22%, transparent); stroke-width: .75; }
.folio .folio__river { stroke: color-mix(in srgb, var(--j-champagne) 58%, transparent); stroke-width: .9; }
.folio .folio__border { stroke: color-mix(in srgb, var(--j-champagne) 42%, transparent); stroke-width: 1; stroke-dasharray: 6 4 1 4; }
.folio .folio__inset-sea { fill: var(--folio-sea); }
.folio .folio__inset-rule { stroke: var(--j-champagne); stroke-width: 1; }
.folio .folio__route {
  stroke: var(--j-parchment);
  stroke-width: 2.5;
  stroke-dasharray: 9 10;
  transition: opacity .3s var(--ease);
}
.folio.is-unrouted .folio__route { opacity: 0; }
.folio .folio__reveal { stroke: #fff; stroke-width: 10; }
.folio__reveal.is-drawing {
  stroke-dasharray: 1;
  animation: folio-route 1.5s var(--ease) both;
}
.folio__reveal.is-drawing.is-quick { animation-duration: .7s; }
@keyframes folio-route {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.folio__label { fill: var(--j-champagne); font-family: var(--serif); font-style: italic; }
.folio__label--sea { font-size: 20px; letter-spacing: .2em; opacity: .9; }
.folio__label--country {
  font-family: var(--sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.folio__label--inset { font-size: 18px; letter-spacing: .08em; }

.mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: .375rem;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--j-parchment);
  font-family: var(--serif);
  font-size: .9375rem;
  font-style: italic;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mark::before { content: ""; position: absolute; inset: -.625rem -.5rem; } /* room for a finger */
.mark svg,
.place__pin svg { flex: none; width: 11px; height: 11px; margin-left: -5.5px; }
.mark path,
.place__pin path { fill: var(--folio-land); stroke: currentColor; stroke-width: 1; transition: fill .3s var(--ease); }
.mark--left { flex-direction: row-reverse; transform: translateX(-100%); }
.mark--left svg { margin: 0 -5.5px 0 0; }
.mark.is-selected path,
.mark.is-flicker path { fill: currentColor; }
.mark.is-selected { color: var(--j-champagne); }

/* The list of places, and the chart's markers on larger screens */
.atlas__grid { padding-inline: var(--gutter); }
.place {
  display: block;
  scroll-margin-top: calc(var(--view) * .75);
  border-bottom: 1px solid color-mix(in srgb, var(--j-champagne) 34%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.place__pin {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  min-height: 3.75rem;
  padding: .875rem 0;
}
.place__pin svg { display: none; }
.place__name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
}
.place__country {
  margin-left: auto;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--j-champagne);
}
.place.is-selected .place__name { font-style: italic; color: var(--j-champagne); }
.place input:focus-visible ~ .place__pin {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* The chosen place opens in the list */
.place__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.place.is-selected .place__detail { grid-template-rows: 1fr; }
.place__detail-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility .6s; }
.place.is-selected .place__detail-inner { visibility: visible; }

.place__image {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--j-cellar);
}
.place__image img { width: 100%; height: 100%; object-fit: cover; }
.place__stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .5rem .875rem;
  background: var(--j-burgundy);
  color: var(--j-parchment);
  font-size: .59375rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.place.is-selected .place__stamp { opacity: 1; }
.place__copy { display: block; padding: 1rem 0 1.5rem; }
.place__title,
.place__continue { display: none; }
.place.is-selected .place__continue { display: flex; width: 100%; margin-top: 1rem; }
.place__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--j-champagne);
}
.place__description { display: block; margin-top: .625rem; line-height: 1.6; text-wrap: pretty; }

/* Surprise me */
.surprise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.25rem;
  align-items: center;
  margin: 2.5rem var(--gutter) 0;
  padding: 1.5rem;
  background: var(--j-parchment);
  color: var(--j-charcoal);
}
.surprise__compass {
  grid-row: span 2;
  width: 4.5rem;
  height: auto;
  color: var(--j-burgundy);
}
.surprise__compass.is-turning { animation: compass 1.3s var(--ease); }
@keyframes compass {
  to { transform: rotate(720deg); }
}
.surprise__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 1.1;
}
.surprise__title em { display: block; font-style: italic; color: var(--j-burgundy); }
.surprise p { margin: 0; line-height: 1.5; text-wrap: pretty; }
.surprise .btn { grid-column: 1 / -1; width: 100%; margin-top: .75rem; }

@media (min-width: 1100px) {
  /* Everything on the plate is measured from it, so the chart reads the same on any width */
  .plate { container-type: inline-size; overflow: hidden; }
  .atlas { position: relative; padding: 0; }
  .atlas__frame { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
  .atlas__sheet { inset: 0; width: 100%; transform: none; }
  .atlas__marks { display: none; }

  .cartouche {
    position: absolute;
    z-index: 3;
    left: 3.5cqw;
    top: 3.5cqw;
    width: 24cqw;
    padding: 2cqw 2.2cqw;
    border: 1px solid var(--j-champagne);
    outline: 1px solid color-mix(in srgb, var(--j-champagne) 60%, transparent);
    outline-offset: -.5rem;
    background: var(--folio-sea);
  }
  .cartouche .kicker { margin-bottom: 1cqw; }
  .cartouche__title { font-size: 3.6cqw; }
  .cartouche__lede { margin-top: 1cqw; font-size: clamp(.875rem, 1.15cqw, 1.25rem); line-height: 1.5; }
  .cartouche .quiet-link { margin-top: .5cqw; }

  .atlas__grid { padding: 0; }
  .place { border: 0; }
  .place__pin {
    position: absolute;
    z-index: 2;
    left: var(--x);
    top: var(--y);
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: 0 .625rem 0 0;
    color: var(--j-parchment);
    transform: translateY(-50%);
  }
  .place__pin--left {
    flex-direction: row-reverse;
    padding: 0 0 0 .625rem;
    transform: translate(-100%, -50%);
  }
  .place__pin svg { display: block; }
  .place__pin--left svg { margin: 0 -5.5px 0 0; }
  .place__name { font-size: clamp(1.25rem, 1.75cqw, 2.125rem); font-style: italic; font-weight: 400; white-space: nowrap; }
  .place__country { display: none; }
  .place.is-selected .place__name { color: inherit; }
  .place:hover .place__pin path,
  .place.is-selected .place__pin path,
  .place.is-flicker .place__pin path,
  .place:has(input:focus-visible) .place__pin path { fill: currentColor; }

  /* One tipped-in leaf at the chart's edge: the place in hand, else the chosen one */
  .place__detail,
  .surprise {
    position: absolute;
    top: 3.5cqw;
    bottom: 3.5cqw;
    right: 5cqw;
    width: 24cqw;
    margin: 0;
    background: var(--j-parchment);
    color: var(--j-charcoal);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(22, 10, 13, .7);
  }
  .place__detail {
    z-index: 2;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
  }
  .place__detail-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    visibility: inherit;
  }
  .place.is-selected .place__detail,
  .place:hover .place__detail,
  .place.is-flicker .place__detail,
  .place:has(input:focus-visible) .place__detail {
    z-index: 3;
    opacity: 1;
    visibility: visible;
  }
  .atlas__grid:has(.place:hover) .place.is-selected:not(:hover) .place__detail,
  .atlas__grid:has(.is-flicker) .place.is-selected:not(.is-flicker) .place__detail {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
  }
  .place__image { flex: 1; min-height: 0; aspect-ratio: auto; margin: .625rem .625rem 0; }
  .place__copy { flex: none; padding: 1.2cqw 1.5cqw 1.5cqw; }
  .place__title {
    display: block;
    font-family: var(--serif);
    font-size: 2.9cqw;
    font-weight: 300;
    line-height: 1.02;
  }
  .place__meta { margin-top: .5cqw; color: var(--j-olive-ink); }
  .place__description { margin-top: .75cqw; font-size: clamp(.9375rem, 1.1cqw, 1.1875rem); line-height: 1.5; }
  .place.is-selected .place__continue {
    margin-top: .9cqw;
    gap: .625rem;
    padding-inline: .5rem;
    font-size: clamp(.65625rem, .82cqw, .71875rem);
    letter-spacing: .16em;
    background: var(--j-burgundy);
    color: var(--j-parchment);
  }
  .place.is-selected .place__continue:hover { background: var(--j-cellar); }

  .surprise {
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 1cqw;
    padding: 2.5cqw;
    text-align: center;
  }
  .surprise__compass { grid-row: auto; width: 9cqw; margin-bottom: 1cqw; }
  .surprise__title { font-size: 2.3cqw; }
  .surprise p { max-width: 18em; }
  .surprise .btn { grid-column: auto; margin-top: 1cqw; }
  .atlas.has-choice .surprise { visibility: hidden; }

  /* The plate fills the screen whatever its shape. The sheet covers it, up to the
     point where the pins would slip behind the leaf; any cropping favours the
     open sea, and past that limit the chart sits centred on the sea colour. */
  .js .destination { height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
  .js .plate { container-type: size; height: 100%; }
  .js .atlas {
    --sheet-w: min(max(100cqw, 100cqh * 16 / 9), 112cqw);
    --sheet-h: calc(var(--sheet-w) * 9 / 16);
    --sheet-x: calc((100cqw - var(--sheet-w)) * .3);
    --sheet-y: min((100cqh - var(--sheet-h)) * .5, (100cqh - var(--sheet-h)) * .8);
    position: absolute;
    inset: 0;
  }
  .js .atlas__frame {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-block: 0;
  }
  .js .atlas__sheet {
    inset: auto;
    left: var(--sheet-x);
    top: var(--sheet-y);
    width: var(--sheet-w);
    height: var(--sheet-h);
    aspect-ratio: auto;
  }
  .js .place__pin {
    left: calc(var(--sheet-x) + var(--fx) * var(--sheet-w));
    top: calc(var(--sheet-y) + var(--fy) * var(--sheet-h));
  }
  .js .destination .gate {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 1rem;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   02 Discover
   -------------------------------------------------------------------------- */

.story { padding: 0; }

.chapter {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--j-night);
  --j-muted: color-mix(in srgb, var(--j-parchment) 86%, transparent);
  --j-rule: color-mix(in srgb, var(--j-parchment) 50%, transparent);
  color: var(--j-parchment);
}
.chapter__images { position: absolute; inset: 0; }
.chapter__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.chapter__image.is-current { opacity: 1; }
.chapter__images::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 19, 16, 0) 18%, rgba(22, 19, 16, .56) 52%, rgba(22, 19, 16, .86) 100%);
}

.chapter__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 7rem var(--gutter) clamp(2.5rem, 6vw, 5rem);
}
.chapter--arrival .chapter__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26rem;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}

.chapter .kicker { margin-bottom: .75rem; }
.chapter .kicker b { font-weight: inherit; }

.chapter__name {
  margin: 0 0 0 -.03em;
  font-family: var(--serif);
  font-size: clamp(5.25rem, 12.8vw, 11.5rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.015em;
}
.chapter__motto {
  margin: 1.125rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-style: italic;
  font-weight: 300;
}

.chapter__note {
  padding-top: 1rem;
  border-top: 1px solid var(--j-rule);
}
.chapter__note p:last-child {
  margin: 0;
  line-height: 1.6;
  text-wrap: pretty;
}

.chapter__statement { max-width: 57.5rem; }
.chapter__line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.625rem);
  font-weight: 300;
  line-height: 1.1;
  text-wrap: pretty;
}

.chapter--plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  background: none;
  --j-muted: color-mix(in srgb, currentColor 76%, transparent);
  --j-rule: color-mix(in srgb, currentColor 24%, transparent);
  color: inherit;
}
.chapter--plate .chapter__line { font-size: clamp(2rem, 3.2vw, 2.875rem); line-height: 1.14; }
.chapter--plate .ledger { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

[data-swap] { transition: opacity .32s var(--ease); }
[data-swap].is-changing { opacity: 0; }

.chart { margin: 0; }
/* Beside the text, the map and its caption always fit on one screen */
@media (min-width: 1100px) {
  .chapter--plate .chart {
    justify-self: end;
    width: min(100%, calc((100vh - 12rem) * var(--map-ratio, 1)));
    width: min(100%, calc((100svh - 12rem) * var(--map-ratio, 1)));
  }
}
.chart__plate {
  padding: .5rem;
  border: 1px solid var(--j-rule);
}
.chart__map {
  width: 100%;
  height: auto;
  background: #ece3d0;
  color: var(--j-charcoal);
}
.map__water { fill: #c9cdbd; fill-rule: evenodd; }
.map__contour {
  fill: none;
  stroke: var(--j-olive);
  stroke-width: .6;
  opacity: .62;
}
.map__contour--index { stroke-width: 1; opacity: .9; }
.map__grid {
  fill: none;
  stroke: var(--j-burgundy);
  stroke-width: .5;
  stroke-dasharray: 1 5;
  opacity: .4;
}
.map__border {
  fill: none;
  stroke: var(--j-burgundy);
  stroke-width: .9;
  stroke-dasharray: 7 3 1.5 3;
  opacity: .6;
}
.map__river {
  fill: none;
  stroke: #5f7a7d;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__neat {
  fill: none;
  stroke: var(--j-charcoal);
  stroke-width: 1;
  opacity: .5;
}
.map__label {
  fill: var(--j-charcoal);
  font-family: var(--serif);
  font-size: 19px;
  paint-order: stroke;
  stroke: #ece3d0;
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.map__label--heart { font-size: 24px; font-style: italic; fill: var(--j-burgundy); }
.map__label--water,
.map__label--range {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.map__label--water { fill: #4c6467; stroke: none; }
.map__label--range { fill: var(--j-olive-ink); }
.map__dot--town { fill: var(--j-charcoal); }
.map__dot--heart {
  fill: var(--j-burgundy);
  stroke: #ece3d0;
  stroke-width: 2;
}

.chart__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin: 1rem 0 0;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--j-soft);
}
.chart__title > span { white-space: nowrap; }
.chart__title em {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
}
.ledger { margin: 1rem 0 0; }
.ledger div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .625rem 0;
  border-top: 1px solid var(--j-rule);
  font-size: .875rem;
}
.ledger dt { color: var(--j-soft); }
.ledger dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.2;
  text-align: right;
}

/* --------------------------------------------------------------------------
   03 Flavours
   -------------------------------------------------------------------------- */

.flavours { padding: 0; }

.cinema {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.cinema__image { position: absolute; inset: 0; }
/* Lifts the glow in the glass clear of the headline */
@media (min-width: 768px) {
  .cinema__image { top: -22%; }
}
.cinema__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.09);
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cinema__image img { will-change: transform; }
}
.cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 6, 9, 0) 32%, rgba(20, 6, 9, .7) 47%, rgba(20, 6, 9, .86) 100%);
  pointer-events: none;
}
.cinema__copy {
  position: relative;
  z-index: 1;
  color: var(--j-parchment);
  width: 100%;
}
.cinema__copy .kicker { margin-bottom: 1rem; color: var(--j-champagne); }
.cinema__copy .stage__title em { color: var(--j-champagne); }
.cinema__title {
  font-size: clamp(3.75rem, 11.4vw, 10.75rem);
  line-height: .92;
  letter-spacing: -.02em;
}
.cinema__foot {
  display: flex;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
}
.cinema__foot p { margin: 0; }

/* --------------------------------------------------------------------------
   04 Experience
   -------------------------------------------------------------------------- */

.kit { padding-block: 0; }
.kit__run {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto;
  column-gap: clamp(2.5rem, 5vw, 6rem);
  max-width: 96rem;
  margin: 0 auto;
}
.kit__head {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}
.kit__head .stage__title { font-size: clamp(2.75rem, 4.7vw, 4.875rem); }

.kit__table {
  position: sticky;
  z-index: 1;
  top: 0;
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  margin: 0;
}

/* Everything on the table is sized from its width, so the box scales as one object */
.kit__stage {
  --kit-shadow:
    0 .15cqw .4cqw rgba(42, 20, 12, .3),
    .6cqw 1.6cqw 3cqw rgba(42, 20, 12, .28);
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100vh - 5rem) * 1.12));
  width: min(100%, calc((100svh - 5rem) * 1.12));
  aspect-ratio: 1.12;
}
.kit__part,
.kit__tray {
  position: absolute;
  box-shadow: var(--kit-shadow);
  transition:
    transform 1.3s var(--ease),
    opacity .9s var(--ease);
}
.kit__tray,
.kit__lid {
  left: -2%;
  top: 7%;
  width: 60%;
  aspect-ratio: 870 / 750;
}
.kit__tray svg { width: 100%; height: 100%; }

.kit__lid {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  background: var(--j-burgundy);
  color: #ecd8ad;
  text-align: center;
  outline: .1cqw solid rgba(209, 182, 138, .55);
  outline-offset: -1.8cqw;
  transform: translate(72%, -5%) rotate(5deg);
  transition:
    transform 1.3s var(--ease),
    z-index 0s .75s; /* slides off on top of the tray, then settles behind it */
}
.kit__lid p { margin: 0; }
.kit__lid::after {
  content: "";
  position: absolute;
  inset: 2.3cqw;
  border: .08cqw solid rgba(209, 182, 138, .3);
}
.kit__lid svg { width: 1.2cqw; height: 1.2cqw; }
.kit__lid-mark {
  font-size: 1.2cqw;
  letter-spacing: .36em;
  text-indent: .36em;
  text-transform: uppercase;
}
.kit__lid-name {
  font-family: var(--serif);
  font-size: 5.2cqw;
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  color: var(--j-parchment);
}
.kit__lid-coords { font-size: 1.15cqw; letter-spacing: .14em; }

.kit__map {
  z-index: 2;
  left: 52%;
  top: 56%;
  width: 44%;
  aspect-ratio: 47 / 35;
  background: #eadfc8;
  color: var(--j-olive-ink);
  transform: rotate(-5deg);
}
.kit__map svg { width: 100%; height: 100%; }
.kit__map .map__label,
.kit__map .map__neat,
.kit__map .map__grid { display: none; }
.kit__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 33%, rgba(90, 70, 40, .2) 33.2%, rgba(255, 255, 255, .22) 33.6%, transparent 37%),
    linear-gradient(90deg, transparent 66%, rgba(90, 70, 40, .2) 66.2%, rgba(255, 255, 255, .22) 66.6%, transparent 70%),
    linear-gradient(180deg, transparent 49.6%, rgba(90, 70, 40, .2) 50%, rgba(255, 255, 255, .22) 50.6%, transparent 55%);
  pointer-events: none;
}

.kit__tray { z-index: 3; }

.kit__guide {
  z-index: 4;
  left: 63%;
  top: 11%;
  width: 31%;
  aspect-ratio: 34 / 47;
  padding: 1.7cqw 1.7cqw 1.7cqw 2.6cqw;
  background: linear-gradient(90deg, #ddd1b9 0, #ddd1b9 4%, var(--j-parchment) 4.6%);
  color: var(--j-burgundy);
  transform: rotate(3deg);
}
.kit__guide-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.5cqw;
  border: .08cqw solid rgba(75, 23, 37, .5);
  text-align: center;
}
.kit__guide p { margin: 0; }
.kit__guide-mark {
  font-size: .95cqw;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
}
.kit__guide img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  margin: 1.3cqw 0;
  object-fit: cover;
}
.kit__guide-name {
  font-family: var(--serif);
  font-size: 3.2cqw;
  font-style: italic;
  line-height: 1.1;
  color: var(--j-charcoal);
}
.kit__guide-kind {
  margin-top: .5cqw !important;
  font-size: .85cqw;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: var(--j-olive-ink);
}

.kit__cards {
  z-index: 5;
  left: 27%;
  top: 62%;
  width: 20%;
  aspect-ratio: 22 / 29;
  box-shadow: none;
  transform: rotate(-4deg);
}
.kit__cards > span,
.kit__card {
  position: absolute;
  inset: 0;
  box-shadow: var(--kit-shadow);
}
.kit__cards > span:nth-child(1) { background: #d9c8a4; transform: rotate(12deg); }
.kit__cards > span:nth-child(2) { background: #e6d9be; transform: rotate(6deg); }
.kit__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f1e6;
  color: var(--j-olive-ink);
  text-align: center;
  outline: .08cqw solid rgba(75, 23, 37, .4);
  outline-offset: -1cqw;
}
.kit__card p { margin: 0; }
.kit__card-kind {
  font-size: .8cqw;
  line-height: 1.8;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
}
.kit__card-seal {
  margin-top: 1cqw !important;
  font-family: var(--serif);
  font-size: 2.2cqw;
  font-style: italic;
  line-height: 1.1;
  color: var(--j-burgundy);
}
.kit__card-note {
  font-family: var(--serif);
  font-size: 1.1cqw;
  font-style: italic;
}
.kit__wax {
  position: absolute;
  left: 50%;
  bottom: -1.5cqw;
  width: 4.4cqw;
  height: 4.4cqw;
  margin-left: -2.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #8d3346, #5e1b2d 60%, #3c0f1c);
  box-shadow: 0 .2cqw .5cqw rgba(42, 20, 12, .45);
}
.kit__wax::after {
  content: "";
  position: absolute;
  inset: 32%;
  border: .08cqw solid rgba(228, 185, 191, .75);
  transform: rotate(45deg);
}

/* Parts wait in the box until their step. Short screens can't hold the table
   still beside the copy, so there they stay laid out, as they do without scripting. */
@media (min-height: 521px) {
  .js .kit:not(.is-open) .kit__tray { transform: translate(29%, 12%) scale(1.13); }
  .js .kit__lid:not(.is-placed) {
    z-index: 6;
    transform: translate(29%, 12%) scale(1.13);
    transition-delay: 0s;
  }
  .js .kit__guide:not(.is-placed) { opacity: 0; transform: translate(10%, -9%) rotate(9deg); }
  .js .kit__map:not(.is-placed) { opacity: 0; transform: translate(9%, 14%) rotate(-12deg); }
  .js .kit__cards:not(.is-placed) { opacity: 0; transform: translate(-16%, 22%) rotate(-11deg); }
}

/* Without tracking (no scripting, short screens) the list simply reads top to
   bottom, every item open */
.kit__packing { grid-column: 1; }
.kit__panel {
  display: flex;
  flex-direction: column;
}
.kit__panel > .kicker { margin-bottom: 1.25rem; }
.kit__marks { display: none; }
.kit__marks span { display: block; height: 82vh; height: 82svh; }
/* The last marker runs past the list's release, so the closing line holds as long as a stage */
.kit__marks span:last-child { height: 120vh; height: 120svh; }

.kit__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit__item {
  --kit-indent: 2.75rem;
  border-top: 1px solid var(--j-rule);
}
.kit__item:last-child { border-bottom: 1px solid var(--j-rule); }
.kit__label {
  gap: 0;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: color .7s var(--ease);
}
.kit__label span { width: var(--kit-indent); }
.kit__item.is-current .kit__label { color: var(--j-accent); }

/* Height eases open through the grid row, so each item keeps its natural size */
.kit__detail,
.kit__closing {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows .7s var(--ease),
    opacity .7s var(--ease);
}
.kit__detail > div,
.kit__closing > div {
  min-height: 0;
  overflow: hidden;
}
.kit__detail > div { padding-left: var(--kit-indent); }
.kit__detail h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.1vw, 2.875rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.kit__detail h3 em { display: block; color: var(--j-accent); }
.kit__detail p {
  max-width: 28rem;
  margin: .875rem 0 0;
  padding-bottom: 1.5rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.kit__quote {
  margin: 0;
  padding-block: 2rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  text-wrap: pretty;
}
.kit__quote em { display: block; color: var(--j-accent); }

@media (min-height: 521px) {
  .kit.is-tracked .kit__panel {
    position: sticky;
    top: 0;
    justify-content: center;
    height: 100vh;
    height: 100svh;
  }
  .kit.is-tracked .kit__marks {
    display: block;
    /* Starts under the rising list, so the first item opens once it is in view */
    margin-top: -60vh;
    margin-top: -60svh;
    pointer-events: none;
  }
  .kit.is-tracked .kit__item:not(.is-current) .kit__detail,
  .kit.is-tracked .kit__closing:not(.is-current) {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   05 Begin
   -------------------------------------------------------------------------- */

.begin {
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.begin__vine {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(12rem, 26vw, 26rem);
  height: auto;
  color: var(--j-champagne);
  opacity: .34;
  pointer-events: none;
}
.begin__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
}
.begin__box { margin: 0; }
@media (min-width: 768px) {
  .begin { padding-block: clamp(2rem, 7vh, var(--j-space)); }
  .begin__box svg { display: block; max-height: calc(100svh - 4rem); margin-inline: auto; }
}
.begin__copy .stage__title { font-size: clamp(3rem, 6.2vw, 6.25rem); }
.begin__copy .stage__title em { color: var(--j-champagne); }
.begin__action { margin-top: clamp(2rem, 4vw, 3rem); }
.begin__action .btn {
  min-height: 4rem;
  padding: 0 2.5rem;
  font-size: .78125rem;
}

/* --------------------------------------------------------------------------
   Journey progress: a hairline across the top that fills as the visitor travels
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  color: var(--j-charcoal);
  background: color-mix(in srgb, currentColor 14%, transparent);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .7s var(--ease),
    visibility .7s,
    color .7s var(--ease);
}
.rail.is-visible { opacity: 1; visibility: visible; }
.rail[data-over="dark"] { color: var(--j-parchment); }

.rail__fill {
  display: block;
  height: 100%;
  background: currentColor;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Reveal motion: quiet, once, and only when wanted
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .rise {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 1.3s var(--ease),
      transform 1.3s var(--ease);
  }
  .js .rise.is-in { opacity: 1; transform: none; }

  .threshold__line {
    transform-origin: top;
    animation: route-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}
@keyframes route-draw { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .surprise__compass.is-turning { animation: none; }
  .kit__part,
  .kit__tray,
  .kit__label,
  .kit__detail,
  .kit__closing { transition: none; }
  .place__detail { transition: none; }
  .chapter__image { transition: none; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .chapter--arrival .chapter__copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: var(--j-space) clamp(2.5rem, 6vw, 5rem);
  }
  .chapter--plate { min-height: 0; }
  /* Text and map take a screen each */
  .chapter--plate { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 0; }
  .chapter--plate > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    max-width: none;
    padding-block: 1.5rem;
  }
  .js .chapter--plate > .rise { transform: none; } /* these are page turns, so they fade in place */
  .chart { max-width: 40rem; }
  /* However tall the map is drawn, it and its caption fit one screen */
  .chart__plate,
  .chart__caption {
    width: min(100%, calc((100svh - 6.5rem) * var(--map-ratio, 1)));
    margin-inline: auto;
  }

  /* Where the frame is wider than the chart, the land fades out into the sea */
  .atlas__sheet { mask-image: linear-gradient(90deg, #000 90%, transparent); }

  /* The chart is drawn smaller here, so the line is heavier to match */
  .folio .folio__route { stroke-width: 5; stroke-dasharray: 16 14; }
  .folio .folio__reveal { stroke-width: 16; }
}

@media (max-width: 899px) {
  /* The box rides at the top while the copy passes below it */
  .kit__run { display: block; }
  .kit__head { min-height: 0; padding-block: var(--j-space) clamp(2rem, 6vw, 3rem); }
  .kit { --kit-table: min(42svh, 90vw); }
  .kit__table {
    top: 0;
    height: var(--kit-table);
    margin-inline: calc(var(--gutter) * -1);
    padding: .75rem var(--gutter);
    background: var(--j-linen);
  }
  .kit__stage { width: min(100%, calc((var(--kit-table) - 1.5rem) * 1.12)); }
  .kit__packing { padding-bottom: var(--j-space); }
  .kit__item { --kit-indent: 2.25rem; }
  .kit__label { min-height: 2.75rem; }
  .kit__detail > div { padding-left: 0; }
  .kit__detail h3 { font-size: 2.125rem; }
  .kit__detail p { margin-top: .5rem; padding-bottom: 1rem; font-size: 1rem; line-height: 1.5; }
  .kit__quote { padding-block: 1rem; font-size: 2.125rem; }
  .kit__marks span { height: 60svh; }
  .kit__marks span:last-child { height: 98svh; }
}

/* The list rides below the box, in whatever height the box leaves */
@media (max-width: 899px) and (min-height: 521px) {
  .kit.is-tracked {
    --kit-panel: calc(100svh - var(--kit-table));
  }
  .kit.is-tracked .kit__packing { padding-bottom: 0; } /* the box and list let go together */
  .kit.is-tracked .kit__panel {
    top: var(--kit-table);
    justify-content: flex-start;
    height: var(--kit-panel);
    padding-top: .75rem;
    overflow: hidden;
  }
  .kit.is-tracked .kit__panel > .kicker { display: none; }
  .kit.is-tracked .kit__marks { margin-top: calc(15svh - var(--kit-panel)); }
}
@media (max-width: 899px) and (max-height: 720px) {
  .kit { --kit-table: min(34svh, 90vw); }
  .kit__label { min-height: 2.375rem; }
  .kit__detail h3 { font-size: 1.75rem; }
  .kit__detail p { padding-bottom: .75rem; }
  .kit__quote { font-size: 1.75rem; }
}

@media (max-height: 520px) {
  .kit__run { display: block; }
  .kit__head { min-height: 0; padding-block: var(--j-space) 2rem; }
  .kit__table {
    position: static;
    height: auto;
    margin-inline: 0;
    padding: 0;
    background: none;
  }
  .kit__stage { width: min(100%, 34rem); }
  .kit__packing { padding-block: 2rem var(--j-space); }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .threshold::before { height: 3.5rem; }

  .stage__head--split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

  /* Headlines scale with the width, so each line of a title stays one line */
  .cinema::after {
    background: linear-gradient(180deg, rgba(20, 6, 9, 0) 20%, rgba(20, 6, 9, .82) 70%);
  }
  .cinema__title { font-size: clamp(2.75rem, 14.5vw, 3.75rem); }
  .cinema__foot { flex-direction: column; gap: .5rem; }
  .kit__head .stage__title { font-size: clamp(2.25rem, 11.2vw, 2.75rem); }

  .chapter__images::after {
    background: linear-gradient(180deg, rgba(22, 19, 16, 0) 26%, rgba(22, 19, 16, .55) 48%, rgba(22, 19, 16, .82) 68%, rgba(22, 19, 16, .9) 100%);
  }
  .chapter__name { font-size: clamp(4rem, 21.5vw, 5.25rem); line-height: .95; }
  .chapter__line { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
  .chapter--plate .chapter__line { font-size: clamp(1.625rem, 7.4vw, 2rem); }

  /* The map's lettering is drawn for a wide plate, so it needs more size on a narrow one */
  .map__label { font-size: 26px; stroke-width: 4.5px; }
  .map__label--heart { font-size: 32px; }
  .map__label--water,
  .map__label--range { font-size: 15px; }

  .begin { padding-block: 2rem 1.5rem; }
  .begin__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .begin__box { width: 100%; max-width: 26rem; margin: 0 auto; }
  /* The box takes whatever height the copy leaves */
  .begin__art { max-height: max(5.5rem, calc(100svh - 31rem)); margin-inline: auto; }
  .begin__copy .stage__title { font-size: clamp(2.5rem, 12.5vw, 3rem); }
  .begin__action { margin-top: 1.5rem; }
  .begin__action .btn { width: 100%; min-height: 3.5rem; }
  .begin__vine { opacity: .2; }
}

/* Phones with little height: the copy climbs the picture, so the shade starts sooner */
@media (max-width: 767px) and (max-height: 720px) {
  .chapter__images::after {
    background: linear-gradient(180deg, rgba(22, 19, 16, 0) 8%, rgba(22, 19, 16, .5) 34%, rgba(22, 19, 16, .8) 62%, rgba(22, 19, 16, .9) 100%);
  }
  .cinema::after {
    background: linear-gradient(180deg, rgba(20, 6, 9, .1) 0, rgba(20, 6, 9, .72) 34%, rgba(20, 6, 9, .88) 100%);
  }
}

/* "Follow the compass." needs the card's full width */
@media (max-width: 374px) {
  .surprise__title { grid-column: 1 / -1; }
  .surprise__compass { grid-row: 2; width: 3.5rem; }
  .surprise p { grid-row: 2; grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Landscape phones: a screen's height is tight, so type steps down and the
   stacked screens go side by side
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) and (max-height: 520px) {
  .cartouche { padding-block: 2rem 1.5rem; }
  .cartouche__title { font-size: clamp(2.25rem, 6vw, 3rem); }

  /* The chart holds still on the left while the places pass on the right */
  .atlas {
    --view: min(46vw, 100svh / .75);
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: start;
  }
  .atlas__frame {
    grid-row: 1 / span 2;
    height: 100svh;
    border-inline-end: 1px solid color-mix(in srgb, var(--j-champagne) 50%, transparent);
  }
  .atlas__grid { padding-inline: 1.5rem max(1.5rem, var(--gutter)); }
  .place { scroll-margin-top: .5rem; }
  .place__image { aspect-ratio: 2 / 1; }
  .surprise { margin: 1.5rem max(1.5rem, var(--gutter)) 0 1.5rem; }

  .chapter--arrival .chapter__copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding-block: 1.5rem;
  }
  .chapter__name { font-size: clamp(3rem, 8vw, 4.5rem); }
  .chapter__motto { margin-top: .5rem; font-size: 1.25rem; }
  .chapter__line { font-size: clamp(1.625rem, 4vw, 2.25rem); }
  .chapter--plate .chapter__line { font-size: clamp(1.5rem, 3.4vw, 2rem); }
  .chapter--plate .ledger { margin-top: 1rem; }
  .chapter--plate > * { padding-block: .75rem; }
  .chart__plate,
  .chart__caption { width: min(100%, calc((100svh - 5.25rem) * var(--map-ratio, 1))); }
  .chart__title { margin-top: .5rem; }

  .cinema { padding-block: 1.5rem; }
  .cinema::after {
    background: linear-gradient(180deg, rgba(20, 6, 9, .15) 0, rgba(20, 6, 9, .76) 36%, rgba(20, 6, 9, .88) 100%);
  }
  .cinema__title { font-size: clamp(2.75rem, 7vw, 4rem); }
  .cinema__foot { margin-top: 1rem; }

  .begin { padding-block: 1.5rem; }
  .begin__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; }
  .begin__box { width: 100%; margin: 0; }
  .begin__box svg,
  .begin__art { max-height: calc(100svh - 3rem); }
  .begin__copy .kicker { margin-bottom: .75rem; }
  .begin__copy .stage__title { font-size: clamp(2.25rem, 5.5vw, 3rem); }
  .begin__copy .stage__lede { margin-top: .75rem; }
  .begin__action { margin-top: 1rem; }
  .begin__action .btn { width: auto; min-height: 3.25rem; padding-inline: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Next step placeholder (begin.html)
   -------------------------------------------------------------------------- */

.page-begin {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--j-parchment);
  color: var(--j-charcoal);
}
.next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: inherit;
}
.next__image { position: relative; min-height: 40vh; background: var(--j-night); }
.next__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.next__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
}
.next__mark {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  font-size: .65625rem;
  font-weight: 400;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--j-burgundy);
}
.next__coords {
  margin: 1rem 0 0;
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--j-soft);
}
.next__notice {
  max-width: 30rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--j-rule);
  border-bottom: 1px solid var(--j-rule);
  line-height: 1.65;
}
.next__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
}
.next__actions .quiet-link { text-decoration: none; }

@media (max-width: 767px) {
  .next { grid-template-columns: minmax(0, 1fr); }
  .next__actions .btn { width: 100%; }
}

/* With no destination yet there is no picture to show */
@media (max-width: 767px), (max-height: 520px) {
  .next__image:has(img[hidden]) { display: none; }
  .next:has(img[hidden]) { grid-template-columns: minmax(0, 1fr); }
}