/* ==========================================================================
   Explore pages — shared layer: story mode, plan-your-visit sheet,
   the "where next" strip, the visual menu. Same tokens and type as the
   homepage; each destination adds its own small stylesheet.
   ========================================================================== */

.xp-page main { padding-top: clamp(104px, 5.5rem + 3vw, 140px); }
.confirm { font-style: normal; font-weight: 600; font-size: .78em; color: var(--red-ink); }

/* ---- Visual menu (phones): destinations with a photo each ---- */
.menu__kicker { font: 800 .75rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: var(--s4); }
.menu__links--doors { display: grid; gap: 10px; }
.menu__links--doors li a.menu__door { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(255, 255, 255, .12); text-decoration: none; }
.menu__links--doors li a.menu__door[aria-current] { background: rgba(255, 255, 255, .26); }
.menu__door img { flex: none; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.menu__door span { display: grid; gap: 2px; }
.menu__door b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.1; }
.menu__door small { font: 500 .85rem/1.3 var(--font-body); opacity: .85; letter-spacing: 0; }
.menu__door--home { padding-left: 16px !important; }

/* ---- Where next: every page ends by offering the other destinations ---- */
.xp-next { padding-block: var(--s8) var(--s9); }
.xp-next__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.035em; margin-bottom: var(--s5); }
.xp-next__row { display: grid; gap: 12px; }
.xp-next__door {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 18px 10px 10px; border-radius: 24px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: var(--sh-1); transition: translate .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.xp-next__door img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.xp-next__door span { display: grid; gap: 2px; }
.xp-next__door b { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.02em; }
.xp-next__door small { color: var(--text-2); font-size: .9rem; }
.xp-next__door:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; }
@media (hover: hover) { .xp-next__door:hover { translate: 0 -4px; box-shadow: var(--sh-2); } }
.xp-next__act { margin-top: var(--s6); }
@media (min-width: 900px) { .xp-next__row { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Story mode — full screen, tap through what the day actually has
   ========================================================================== */
.story {
  --ground: var(--ink);
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ground); color: #fff; overflow: hidden;
}
.story::backdrop { background: rgba(27, 26, 51, .7); }
.story[open] { animation: st-in .28s var(--ease-out); }
@keyframes st-in { from { opacity: 0; scale: .98; } }
.story-open { overflow: hidden; }

.story__top { position: absolute; inset: 0 0 auto; z-index: 3; padding: calc(10px + env(safe-area-inset-top)) 14px 0; background: linear-gradient(rgba(0, 0, 0, .35), transparent); }
.story__bar { display: flex; gap: 4px; }
.story__bar span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.story__bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.story__bar span.is-done i { transform: scaleX(1) !important; }
.story__btns { flex: none; display: flex; gap: 8px; }
.story__play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.story__play .i { width: 20px; height: 20px; }
.story__play .i--play, .story.is-paused .story__play .i--pause { display: none; }
.story.is-paused .story__play .i--play { display: block; }
.story__play:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.story.is-end:not(.has-next) .story__play { visibility: hidden; }
.story__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 12px; }
.story__head p { display: grid; line-height: 1.2; }
.story__head b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; }
.story__head span { font-size: .8rem; opacity: .85; }
.story__close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.story__close:focus-visible, .story__nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.story__stage { position: absolute; inset: 0; touch-action: pan-y; }
.st-frame {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column;
  padding: calc(78px + env(safe-area-inset-top)) 0 0;
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease-out), visibility 0s linear .22s;
}
.st-frame.is-on { opacity: 1; visibility: visible; transition: opacity .22s var(--ease-out); }
.st-frame img, .st-frame video { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
.st-frame figcaption { flex: none; display: grid; gap: 6px; padding: 14px 18px calc(22px + env(safe-area-inset-bottom)); }
.st-frame time { font: 800 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.st-frame figcaption span { font-size: 1.02rem; line-height: 1.45; max-width: 40ch; }

/* The last frame: what the photos add up to, and where to go next */
.st-end { background: var(--ground); z-index: 1; justify-content: center; padding-inline: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.st-end__kicker { font: 800 .75rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.st-end__text { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.25; letter-spacing: -.02em; max-width: 26ch; }
.st-end__label { margin-top: var(--s7); font: 800 .72rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.st-doors { display: grid; gap: 10px; margin-top: 12px; max-width: 420px; }
.st-door {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none;
  font: 700 1rem/1.2 var(--font-body); box-shadow: var(--gloss), var(--sh-1);
}
.st-door--visit { background: var(--red); color: #fff; }
.st-door:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Tap zones: left third goes back, the rest goes forward (like a status update).
   They stop above the caption, so text and buttons stay clickable. */
.story__nav { position: absolute; z-index: 2; top: calc(78px + env(safe-area-inset-top)); bottom: 28%; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; }
.story__nav .i { display: none; }
.story__nav--prev { left: 0; width: 34%; }
.story__nav--next { right: 0; width: 66%; }
.story.is-first:not(.has-prev) .story__nav--prev, .story.is-end:not(.has-next) .story__nav--next { display: none; }
/* On the last card the tap zones would cover its buttons: they shrink to round buttons */
.story.is-end .story__nav--next { width: 64px; height: 64px; top: calc(84px + env(safe-area-inset-top)); bottom: auto; }
.story.is-end .story__nav--next .i { display: block; margin: auto; }
.story.is-end .story__nav--prev { width: 64px; height: 64px; top: calc(84px + env(safe-area-inset-top)); bottom: auto; }
.story.is-end .story__nav--prev .i { display: block; margin: auto; }

@media (min-width: 900px) {
  .st-frame:not(.st-end) { flex-direction: row; align-items: stretch; padding: calc(84px + env(safe-area-inset-top)) 40px 40px; gap: 40px; }
  .st-frame figcaption { width: 320px; align-self: end; padding: 0 0 12px; }
  .st-frame figcaption span { font-size: 1.2rem; }
  .st-end { align-items: flex-start; padding-inline: max(40px, 12vw); }
  /* Real buttons on desktop instead of invisible tap zones */
  .story__nav { top: 50%; bottom: auto; width: 56px !important; height: 56px; margin-top: -28px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
  .story__nav .i { display: block; margin: auto; }
  .story__nav--prev { left: 18px; }
  .story__nav--next { right: 18px; }
  .story.is-end .story__nav--prev { top: 50%; }
}

/* ==========================================================================
   Plan your visit — bottom sheet on phones, a small card on desktop
   ========================================================================== */
.sheet {
  width: 100%; max-width: 100%; margin: auto 0 0; padding: 14px 22px calc(24px + env(safe-area-inset-bottom));
  border: 0; border-radius: 28px 28px 0 0; background: #fff; color: var(--ink); box-shadow: var(--sh-3);
  max-height: 92svh; overflow: auto;
}
.sheet::backdrop { background: rgba(27, 26, 51, .55); }
.sheet[open] { animation: sheet-up .35s var(--ease-out); }
@keyframes sheet-up { from { translate: 0 40%; opacity: .4; } }
.sheet__grip { width: 44px; height: 5px; border-radius: 5px; background: var(--rule); margin: 0 auto 14px; }
.sheet__close { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cream); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sheet__title { font-size: var(--fs-h3, 1.6rem); letter-spacing: -.03em; padding-right: 48px; }
.sheet__lead { margin-top: 6px; color: var(--text-2); }
.sheet .ci { margin-block: var(--s5); }
@media (min-width: 768px) {
  .sheet { max-width: 480px; margin: auto; border-radius: 28px; padding: 28px; }
  .sheet__grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story[open], .sheet[open] { animation: none; }
  .st-frame, .st-frame.is-on { transition: none; }
  .yr-occ__door { transition: none; }
  .yr-page { transition: none; }
}
@media (min-width: 900px) { .st-frame img, .st-frame video { min-width: 0; } }

/* Where am I: the current destination is marked in the nav */
.xp-page .nav__links a[aria-current="page"] { background: var(--yellow); color: var(--ink); border-radius: var(--r-pill); }

/* ---- One day turns into the next, like a cube (explore.js) ---- */
.story { perspective: 1400px; }
.story__stage { backface-visibility: hidden; }
.story__ghost { pointer-events: none; z-index: 1; }
.st-upnext {
  display: flex; align-items: center; gap: 12px; margin-top: var(--s6); max-width: 420px; width: 100%; min-height: 60px; padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 20px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; text-align: left;
}
.st-upnext small { font: 800 .7rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.st-upnext b { flex: 1; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.02em; }
.st-upnext:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (hover: hover) { .st-upnext:hover { background: rgba(255, 255, 255, .2); } }