/* Shared styles for the journey page blocks: Pearl tokens, the route map, the contents strip, the Calm switch. */
.tch-journey {
  --tch-ivory: var(--wp--preset--color--ivory, #FBF7EF);
  --tch-ocean: #F6F1E7;
  --tch-paper: #F2ECDF;
  --tch-sand: var(--wp--preset--color--sand, #E9DFCB);
  --tch-champagne: #D4B274;
  --tch-champ-line: #C4A160;
  --tch-bronze: #A67C38;
  --tch-bronze-text: #8A6528;
  --tch-ink: var(--wp--preset--color--ink, #2A2420);
  --tch-muted: #6B6158;
  --tch-hair: var(--wp--preset--color--line, #E4DAC8);
  --tch-display: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
  --tch-body: var(--wp--preset--font-family--text, "DM Sans", system-ui, sans-serif);
  --tch-gl: max(16px, env(safe-area-inset-left, 0px));
  --tch-gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
  font-family: var(--tch-body);
  color: var(--tch-ink);
  overflow-x: clip;
}
.tch-journey > * { margin-block: 0; }
/* Full bleed: undo the theme's side padding for the journey page (the footer keeps it). */
.tch-journey { margin-left: calc(-1 * var(--wp--style--root--padding-left, max(1rem, 4vw))); margin-right: calc(-1 * var(--wp--style--root--padding-right, max(1rem, 4vw))); }
/* Names: big, bold capitals in Fraunces. Set here too, so the page looks right whichever theme is active. */
.tch-journey .tch-title { font-family: var(--tch-display); font-weight: 800; text-transform: uppercase; font-variation-settings: "SOFT" 100, "WONK" 0; }
.tch-journey img, .tch-journey video { max-width: 100%; display: block; }
.tch-journey button { font: inherit; color: inherit; }
.tch-journey .tch-gutter { padding-left: var(--tch-gl); padding-right: var(--tch-gr); }
.tch-journey :focus-visible { outline: 2px solid var(--tch-bronze); outline-offset: 3px; }
.tch-sec-title { margin: 0; font-family: var(--tch-display); font-weight: 300; font-size: clamp(40px, 5.4vw, 80px); line-height: 1; letter-spacing: -.015em; }

/* Route map, shared by the opening and the story */
.tch-mapwrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.jmap { display: block; width: 100%; height: 100%; overflow: visible; }
.jmap .l { fill: var(--tch-sand); stroke: var(--tch-ocean); }
.jmap .v { fill: var(--tch-champagne); stroke: var(--tch-champ-line); }
.jmap .legs path { stroke: var(--tch-bronze); }
.jmap .air { opacity: .7; }
.jmap .stop circle { fill: var(--tch-ink); stroke: var(--tch-ocean); }
.jmap .stop text { font-family: var(--tch-display); font-style: italic; fill: var(--tch-ink); stroke: var(--tch-ocean); stroke-width: .32; paint-order: stroke; stroke-linejoin: round; }
.jmap .ring { stroke: var(--tch-bronze); opacity: 0; }

/* Contents strip, wide screens only */
.tch-rail { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 2px; background: rgba(251, 247, 239, .94); border: 1px solid var(--wp--preset--color--line, #E4DAC8); border-radius: 14px; padding: 8px 10px; }
@media (min-width: 1000px) { .tch-rail { display: flex; } }
.tch-rail button { position: relative; border: 0; background: none; padding: 5px 4px 5px 18px; font: inherit; font-size: 13px; color: #6B6158; text-align: left; cursor: pointer; }
.tch-rail button::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--wp--preset--color--line, #E4DAC8); transition: background var(--tch-t-short, 300ms), transform var(--tch-t-short, 300ms); }
.tch-rail button.on { color: var(--wp--preset--color--ink, #2A2420); }
.tch-rail button.on::before { background: #A67C38; transform: scale(1.35); }

/* The Calm motion switch stays reachable down the whole page */
.tch-calm-fixed { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.tch-calm-fixed .tch-calm-toggle { min-height: 44px; padding: .5rem 1.1rem; background: rgba(251, 247, 239, .95); box-shadow: 0 8px 28px rgba(42, 36, 32, .10); }
.tch-calm-fixed .tch-calm-toggle[aria-pressed="true"] { background: #2A2420; }