/* Cast Discovery: an editorial map, a quiet itinerary, and a focused audio story.
   The devices are illustrative product screens, scaled as a single composition. */
.discovery-ui {
  padding: calc(var(--u) * 1.15);
  border-color: #ffffff4d;
  background: linear-gradient(135deg, #92958c, #3d413a 48%, #71766b);
  box-shadow: none;
}
.discovery-ui .journey-screen {
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 12.1);
}
.discovery-ui.screen-paper { --screen-bg: #f4f3ec; --screen-ink: #203126; --screen-muted: #697366; }
.discovery-ui.screen-ink { --screen-bg: #17251f; --screen-ink: #f4f3ec; --screen-muted: #b3beb0; }
.discovery-ui .journey-status { font-size: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 5); }
.discovery-ui .journey-status i { width: 24%; height: calc(var(--u) * 3.8); }
.discovery-ui .discovery-signal { display: block; width: calc(var(--u) * 12); height: calc(var(--u) * 3.5); }
.discovery-signal svg { display: block; width: 100%; height: 100%; }
.discovery-ui .journey-app { min-height: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 5); gap: calc(var(--u) * 2.4); }
.discovery-ui .journey-app > strong { font-size: calc(var(--u) * 6.5); }
.discovery-ui .journey-app .discovery-app-context { margin-right: auto; padding-top: calc(var(--u) * .8); font-size: calc(var(--u) * 3.1); letter-spacing: 0; color: var(--screen-muted); }
.discovery-icon { width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); flex: none; display: block; }
.discovery-menu { display: grid; place-items: center; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border: 1px solid var(--screen-line); border-radius: 50%; }
.discovery-ui .journey-main { gap: calc(var(--u) * 3); }
.discovery-ui .journey-main > * { flex-shrink: 0; }
.discovery-location { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font: 600 calc(var(--u) * 3.2)/1.2 Graphie, Arial, sans-serif; color: var(--screen-muted); margin-bottom: calc(var(--u) * 2.4); }
.discovery-location .discovery-icon { width: calc(var(--u) * 3.7); height: calc(var(--u) * 3.7); color: #ce4929; }
.discovery-ui .discovery-heading h3 { font: 400 calc(var(--u) * 9.4)/1.02 Nimbus, Arial, sans-serif; letter-spacing: -.047em; margin: 0; }
.discovery-duration { display: flex; align-items: center; height: calc(var(--u) * 9); padding: calc(var(--u) * .8); border-radius: calc(var(--u) * 6); background: #e6e8df; }
.discovery-duration > * { flex: 1; display: grid; place-items: center; height: 100%; font-size: calc(var(--u) * 3.6); line-height: 1; font-weight: 400; color: #606d60; }
.discovery-duration > strong { color: #203126; background: #fffef8; border-radius: calc(var(--u) * 5); box-shadow: 0 1px 3px #1e332b12; }
.discovery-map-wrap { position: relative; height: calc(var(--u) * 57); margin: 0 calc(var(--u) * -2); border-radius: calc(var(--u) * 5); overflow: hidden; background: #e8e9e1; }
.discovery-map { display: block; width: 100%; height: 100%; }
.discovery-map-key { position: absolute; bottom: calc(var(--u) * 2.8); left: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2); color: #405345; background: #fffef6ee; border-radius: calc(var(--u) * 5); font: 600 calc(var(--u) * 2.7)/1 Graphie, Arial, sans-serif; }
.discovery-map-key .discovery-icon { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
.discovery-route-heading { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 2); padding-top: calc(var(--u) * .5); }
.discovery-route-heading > strong { font-size: calc(var(--u) * 4.1); font-weight: 400; letter-spacing: -.02em; }
.discovery-route-heading > span { color: var(--screen-muted); font-size: calc(var(--u) * 3.1); white-space: nowrap; }
.discovery-stops { display: flex; flex-direction: column; }
.discovery-stop { position: relative; display: flex; gap: calc(var(--u) * 2.3); align-items: center; min-height: calc(var(--u) * 13); padding: calc(var(--u) * 1.25) 0; }
.discovery-stop + .discovery-stop::before { content: ''; position: absolute; left: calc(var(--u) * 19); right: 0; top: 0; border-top: 1px solid #20312612; }
.discovery-stop-number { font: 600 calc(var(--u) * 2.7)/1 Graphie, Arial, sans-serif; color: #758172; width: calc(var(--u) * 4.7); flex: none; }
.discovery-stop-thumb { display: block; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); border-radius: calc(var(--u) * 2.7); object-fit: cover; flex: none; }
.discovery-stop > div { min-width: 0; flex: 1; }
.discovery-stop strong { display: block; font-size: calc(var(--u) * 3.75); line-height: 1.15; font-weight: 400; letter-spacing: -.02em; }
.discovery-stop small { display: block; font-size: calc(var(--u) * 2.75); line-height: 1.3; color: var(--screen-muted); margin-top: calc(var(--u) * 1); }
.discovery-stop > .discovery-icon { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); color: #7a8576; }
.discovery-coffee { display: grid; place-items: center; color: #80573b; background: #ece2d4; }
.discovery-coffee .discovery-icon { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); stroke-width: 1.3; }
.discovery-ui .discovery-start { height: calc(var(--u) * 11.8); min-height: 0; padding: 0 calc(var(--u) * 4.5); margin-top: auto; border-radius: calc(var(--u) * 7); background: var(--orange); font-size: calc(var(--u) * 4.1); line-height: 1; }
.discovery-start .discovery-icon { width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); }
.discovery-ui .journey-home { width: 28%; left: 36%; bottom: calc(var(--u) * 2.7); height: calc(var(--u) * .95); opacity: .65; }

/* Listening keeps the photography prominent and gives the player room to breathe. */
.discovery-story-photo { position: relative; height: calc(var(--u) * 73); margin: 0 calc(var(--u) * -2); border-radius: calc(var(--u) * 5); overflow: hidden; isolation: isolate; }
.discovery-story-photo > img { object-position: 45% 50%; }
.discovery-story-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#12231c28,transparent 25%,#17251f0d 42%,#12231ceb); z-index: 0; }
.discovery-story-step, .discovery-bookmark { position: absolute; top: calc(var(--u) * 3); z-index: 1; background: #17251fa3; color: #fff; backdrop-filter: blur(8px); }
.discovery-story-step { left: calc(var(--u) * 3); padding: calc(var(--u) * 1.7) calc(var(--u) * 2.3); border-radius: calc(var(--u) * 5); font: 600 calc(var(--u) * 3)/1 Graphie, Arial, sans-serif; }
.discovery-story-step > span { opacity: .65; }
.discovery-bookmark { right: calc(var(--u) * 3); display: grid; place-items: center; width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); border-radius: 50%; }
.discovery-bookmark .discovery-icon { width: calc(var(--u) * 3.9); height: calc(var(--u) * 3.9); }
.discovery-story-caption { position: absolute; z-index: 1; left: calc(var(--u) * 4.7); bottom: calc(var(--u) * 4.7); right: calc(var(--u) * 4); }
.discovery-story-caption > span { display: block; margin-bottom: calc(var(--u) * 2.2); color: #e3e9dc; font: 600 calc(var(--u) * 2.6)/1.2 Graphie, Arial, sans-serif; letter-spacing: .1em; }
.discovery-ui .discovery-story-caption h3 { font: 400 calc(var(--u) * 9.3)/1.03 Nimbus, Arial, sans-serif; letter-spacing: -.045em; color: #fffef7; }
.discovery-story-caption > p { display: flex; align-items: center; gap: calc(var(--u) * 1.1); margin: calc(var(--u) * 2.7) 0 0; font-size: calc(var(--u) * 3); line-height: 1.2; color: #e3e8dc; }
.discovery-story-caption .discovery-icon { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); }
.discovery-audio { padding-top: calc(var(--u) * 1.8); }
.discovery-audio-label { display: flex; align-items: center; justify-content: space-between; color: #bcc7b8; margin-bottom: calc(var(--u) * 3); font: 600 calc(var(--u) * 2.8)/1 Graphie, Arial, sans-serif; }
.discovery-audio-label > span:first-child { display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.discovery-audio-label .discovery-icon { width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); color: var(--acid); }
.discovery-audio > strong { display: block; font-size: calc(var(--u) * 5.6); font-weight: 400; line-height: 1.15; letter-spacing: -.026em; }
.discovery-audio > p { font-size: calc(var(--u) * 3.15); line-height: 1.3; margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 4.7); color: #bbc5b6; }
.discovery-wave { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 9); gap: calc(var(--u) * .8); }
.discovery-wave > i { display: block; flex: 1; max-width: calc(var(--u) * .72); height: var(--bar); border-radius: calc(var(--u) * .5); background: #adbc9d; opacity: .52; }
.discovery-wave > i:first-child { background: var(--acid); height: 100%; opacity: 1; }
.discovery-audio-time { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 2); color: #b3bdae; font: 600 calc(var(--u) * 2.7)/1 Graphie, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.discovery-playback { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3.5); }
.discovery-playback > span { display: grid; place-items: center; width: calc(var(--u) * 8); height: calc(var(--u) * 8); color: #d5ddcf; }
.discovery-playback .discovery-icon { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
.discovery-playback .discovery-speed { font-size: calc(var(--u) * 3.5); }
.discovery-playback .discovery-play { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--orange); color: #17251f; }
.discovery-play .discovery-icon { width: calc(var(--u) * 5.7); height: calc(var(--u) * 5.7); transform: translateX(calc(var(--u) * -.3)); }
.discovery-up-next { display: flex; gap: calc(var(--u) * 2.8); align-items: center; margin-top: auto; border-top: 1px solid #ffffff20; padding-top: calc(var(--u) * 4); }
.discovery-up-next .discovery-stop-thumb { width: calc(var(--u) * 11.5); height: calc(var(--u) * 11.5); background: #2d3d31; color: #d1c5a9; }
.discovery-up-next > div { min-width: 0; flex: 1; }
.discovery-up-next small { display: block; color: #bec9b8; font: 600 calc(var(--u) * 2.4)/1.2 Graphie, Arial, sans-serif; letter-spacing: .07em; }
.discovery-up-next strong { display: block; font-size: calc(var(--u) * 3.7); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; margin: calc(var(--u) * 1.2) 0; }
.discovery-up-next div > span { display: block; color: #b3bdae; font-size: calc(var(--u) * 2.7); line-height: 1.2; }
.discovery-up-next > .discovery-icon { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); color: #d4ddce; }

/* Keep the same phone proportions in the small homepage preview and both detail placements. */
.journey-way { gap: clamp(12px,1.35vw,22px); }
@media (max-width: 850px) {
  .entry-demo .detail-mobile-pair:has(.journey-way) { --screen-width: min(280px, calc((100vw - 64px) / 2)); }
  .journey-way { gap: 12px; }
}