/* Dayra experience: gate, surface UI, the underwater hub, menu, cursor. */
:root {
  --ink: #0f2f3c; --ink-soft: rgba(15, 47, 60, .72); --paper: #fbf7f0; --sea: #06a5e7; --ember: #ff7a45;
  --f-body: "Bricolage Grotesque", system-ui, sans-serif; --f-serif: "Instrument Serif", Georgia, serif;
  --f-word: "Josefin Sans", var(--f-body); --f-night: "Anton", Impact, sans-serif; --f-ar: "Lalezar", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1); --gut: clamp(16px, 2.6vw, 36px);
}
html[data-sky="night"] { --ink: #f3ead9; --ink-soft: rgba(243, 234, 217, .74); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.xp { background: #0d1f2a; color: var(--ink); font-family: var(--f-body); overflow: hidden; -webkit-font-smoothing: antialiased; }
:where(.xp) a { color: inherit; }
:where(.xp) button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xp :focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 999px; }

.xp-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }

/* shared pieces */
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: #fff; color: #0f2f3c; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .4s var(--ease), background-color .3s; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.pill:hover { transform: translateY(-2px); }
.pill--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.pill svg { width: 13px; height: 13px; }
.round { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #0f2f3c; display: inline-grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); transition: transform .4s var(--ease); }
.round:hover { transform: scale(1.06); }

/* ---------------------------------------------------------------- gate */
.xp-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; color: #fff; overflow: hidden; background: #c9b597; }
.xp-gate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: gate-drift 24s ease-in-out infinite alternate; }
.xp-gate__shade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(10, 30, 40, .38), rgba(10, 30, 40, .12) 70%), linear-gradient(180deg, rgba(10, 30, 40, .25), rgba(10, 30, 40, 0) 30%, rgba(10, 30, 40, .35)); }
@keyframes gate-drift { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.xp-gate__in { position: relative; display: grid; justify-items: center; text-align: center; gap: 18px; padding: 24px; }

/* ---------------------------------------------------------------- chrome */
.xp-ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease), color .8s; }
.xp-ui.is-on { opacity: 1; }
.xp-ui a, .xp-ui button { pointer-events: auto; }
.xp-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gut); }
.xp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.xp-brand .brand__mark { width: 34px; height: 34px; color: var(--ink); }
.xp-brand span { font-family: var(--f-word); font-weight: 300; font-size: 20px; letter-spacing: .34em; text-transform: uppercase; padding-top: 3px; }
.xp-nav { display: flex; align-items: center; gap: 6px; }
.xp-nav a { font-size: 17px; text-decoration: none; padding: 6px 12px; }
.xp-nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.xp-dots { display: inline-flex; gap: 4px; }
.xp-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.xp-cta { position: absolute; left: 50%; top: 66%; transform: translate(-50%, 0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.xp-cta.is-off { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.xp-cta .pill { pointer-events: auto; }

.xp-station { position: absolute; left: 50%; bottom: 112px; width: min(560px, calc(100% - 2 * var(--gut))); transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.xp-station.is-on { opacity: 1; }
.xp-station.is-on a, .xp-station.is-on button { pointer-events: auto; }
.xp-station a, .xp-station button { pointer-events: none; }
.xp-station h2 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: clamp(44px, 5.4vw, 76px); line-height: .95; text-shadow: 0 1px 24px rgba(0, 0, 0, .18); }
.xp-station p { margin: 12px auto 18px; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.xp-station__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.xp-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px var(--gut) 22px; }
.xp-foot__l { display: flex; align-items: center; gap: 10px; }
.xp-foot__r { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 14px; }
.xp-next { min-height: 46px; font-size: 15px; }
.xp-next i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(255, 122, 69, .6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(255, 122, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 69, 0); } }
.xp-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.xp-bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
[data-sound][aria-pressed="true"] .xp-bars i { animation: eq .9s ease-in-out infinite; }
[data-sound][aria-pressed="true"] .xp-bars i:nth-child(2) { animation-delay: .15s; }
[data-sound][aria-pressed="true"] .xp-bars i:nth-child(3) { animation-delay: .3s; }
[data-sound][aria-pressed="true"] .xp-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }

.xp-stations { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .78); color: #0f2f3c; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.xp-stations button { border: 0; background: transparent; border-radius: 999px; min-height: 36px; padding: 0 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.xp-stations button[aria-current="true"] { background: #0f2f3c; color: #fff; }
.xp-stations .xp-arrow { width: 36px; padding: 0; font-size: 16px; }

.xp-mode svg { width: 20px; height: 20px; }
html[data-route="night"] .xp-mode .moon, html:not([data-route="night"]) .xp-mode .sun { display: none; }

/* ---------------------------------------------------------------- hub (underwater) */
.xp-hub { position: fixed; inset: 0; z-index: 15; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; color: #f2fbfb; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.xp-hub::-webkit-scrollbar { display: none; }
.xp-hub.is-on { visibility: visible; }
.xp-hub__in { position: relative; width: min(1200px, 100%); margin: 0 auto; padding: 128px var(--gut) 140px; }
.xp-hub::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(4, 50, 66, .42), rgba(4, 50, 66, .08) 38%, rgba(4, 40, 56, .3)); pointer-events: none; }
.xp-hub__title, .xp-hub__sub { position: relative; text-shadow: 0 2px 30px rgba(0, 40, 55, .45); }
.xp-ui.is-under .xp-stations, .xp-ui.is-under .xp-cta, .xp-ui.is-under .xp-station, .xp-ui.is-under .xp-time, .xp-ui.is-under .xp-mode { opacity: 0; pointer-events: none !important; }
.xp-ui.is-under { color: #f2fbfb; }
.xp-ui.is-under .xp-brand .brand__mark { color: #f2fbfb; }
.xp-stations, .xp-cta, .xp-time, .xp-mode { transition: opacity .6s var(--ease); }
.xp-hub__title { text-align: center; margin: 0 0 6px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(52px, 7vw, 104px); line-height: .95; }
.xp-hub__title em { font-style: italic; }
.xp-hub__sub { text-align: center; margin: 0 auto 28px; max-width: 46ch; color: rgba(242, 251, 251, .82); font-size: 17px; line-height: 1.5; }
.xp-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.xp-chips button { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 14px; cursor: pointer; backdrop-filter: blur(8px); }
.xp-chips button[aria-pressed="true"] { background: #fff; color: #0f2f3c; }
.xp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); perspective: 1200px; }
.xp-card { display: block; text-decoration: none; color: inherit; transform-origin: 50% 100%; }
.xp-card[hidden] { display: none; }
.xp-card__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .08); box-shadow: 0 40px 70px -40px rgba(0, 20, 30, .7); }
.xp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.xp-card:hover .xp-card__img img { transform: scale(1.04); }
.xp-card__meta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 14px 2px 12px; border-bottom: 1px solid rgba(242, 251, 251, .4); }
.xp-card__meta b { font-weight: 500; font-size: 19px; }
.xp-card__meta span { grid-column: 1; color: rgba(242, 251, 251, .8); font-size: 15px; }
.xp-card__meta svg { grid-row: 1 / 3; grid-column: 2; width: 13px; height: 13px; }
.xp-hub__up { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 22; }

/* ---------------------------------------------------------------- menu */
.xp-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(560px, 100%); background: #f3eee6; color: #0f2f3c; transform: translateX(102%); transition: transform .9s var(--ease); display: flex; flex-direction: column; padding: 22px clamp(24px, 4vw, 56px) 32px; }
.xp-menu.is-open { transform: none; }
.xp-menu__close { align-self: flex-end; }
.xp-menu nav { display: grid; gap: 2px; margin-top: auto; }
.xp-menu nav a { font-family: var(--f-serif); font-size: clamp(44px, 6vw, 72px); line-height: 1.02; text-decoration: none; }
.xp-menu nav a:hover { font-style: italic; }
.xp-menu__foot { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.xp-menu__foot a { text-decoration: none; display: block; padding: 2px 0; }
.xp-menu__foot a:hover { text-decoration: underline; }
.xp-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(5, 20, 28, .35); opacity: 0; pointer-events: none; transition: opacity .6s; }
.xp-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- cursor */
.xp-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1.5px solid #fff; mix-blend-mode: difference; pointer-events: none; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s; display: grid; place-items: center; }
.xp-cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.xp-cursor.is-pearl { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 255, 255, .9); mix-blend-mode: normal; border-color: transparent; }
.xp-cursor span { font-size: 12px; color: #0f2f3c; opacity: 0; transition: opacity .3s; }
.xp-cursor.is-pearl span { opacity: 1; }
@media (hover: none) { .xp-cursor { display: none; } }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 860px) {
  .xp-nav { display: none; }
  .xp-foot { grid-template-columns: 1fr auto; }
  .xp-foot__c { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .xp-foot__r .xp-time { display: none; }
  .xp-stations button:not(.xp-arrow):not([aria-current="true"]) { display: none; }
  .xp-station { bottom: 150px; }
  .xp-cta { top: 64%; }
  .xp-cards { grid-template-columns: 1fr; }
  .xp-next span { display: none; }
}

/* ---------------------------------------------------------------- no WebGL / reduced motion */
.no-gl .xp-gl { display: none; }
.no-gl body.xp { background: #0b4a63; }
@media (prefers-reduced-motion: reduce) {
  .xp-gate__img { animation: none; }
  .xp * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- v5: underwater gate, routes, dial */
.has-gl .xp-gate { background: transparent; }
.has-gl .xp-gate__img, .has-gl .xp-gate__shade { display: none; }
.xp-gate__in { text-shadow: 0 2px 24px rgba(0, 40, 55, .35); }

.xp-choose { position: absolute; left: 50%; top: 64%; transform: translate(-50%, 14px); text-align: center; opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.xp-choose.is-on { opacity: 1; transform: translate(-50%, 0); }
.xp-choose.is-on button { pointer-events: auto; }
.xp-choose button { pointer-events: none; }
.xp-choose__q { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.xp-choose__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pill svg.sun, .pill svg.moon { width: 18px; height: 18px; }
.pill--glass { background: rgba(255, 255, 255, .28); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.xp-hint { position: absolute; left: 50%; top: calc(64% + 112px); transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transition: opacity .8s var(--ease) .4s; }
.xp-hint.is-on { opacity: 1; }


.xp-dial { display: flex; align-items: center; gap: 10px; }
.round--sm { width: 36px; height: 36px; font-size: 15px; }
.xp-dial__ring { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.xp-dial__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.xp-dial__ring circle { fill: rgba(255, 255, 255, .5); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.xp-dial__ring circle.p { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: calc(131.95 * (1 - var(--p, 0))); }
html[data-sky="night"] .xp-dial__ring circle { fill: rgba(8, 18, 28, .45); stroke: rgba(243, 234, 217, .25); }
html[data-sky="night"] .xp-dial__ring circle.p { stroke: #f3ead9; }
.xp-dial__ring span { position: relative; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-ui.is-under .xp-dial, .xp-ui.is-under .xp-choose, .xp-ui.is-under .xp-hint, .xp-ui.is-under .xp-stop { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 860px) {
  .xp-choose { top: 62%; }
  .xp-hint { top: calc(62% + 150px); }
}
.has-gl .xp-gate { color: #0f2f3c; }
.has-gl .xp-gate__in { text-shadow: 0 1px 20px rgba(255, 255, 255, .45); }
.has-gl .xp-gate { place-items: end center; padding-bottom: 11vh; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- v6: the nights, under the sea */
.xp-nights { position: fixed; inset: 0; z-index: 25; pointer-events: none; color: #f3ead9; visibility: hidden; }
.xp-nights.is-on { visibility: visible; }
.xp-nights__intro { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; pointer-events: none; }
.xp-nights__intro h2 { margin: 0; font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: .92; text-shadow: 0 2px 40px rgba(0, 0, 0, .5); }
.xp-anton { font-family: var(--f-night); text-transform: uppercase; letter-spacing: .01em; }
.xp-nights__intro em { font-family: var(--f-serif); font-style: italic; }
.xp-nights__intro p { margin: 14px 0 0; font-size: 15px; color: rgba(243, 234, 217, .78); }
.xp-nights__bar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }
.xp-nights .pill--glass { color: #f3ead9; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(243, 234, 217, .5); }
.xp-cap { position: absolute; right: var(--gut); top: 50%; width: min(380px, calc(100% - 2 * var(--gut))); transform: translate(20px, -50%); padding: 24px; border-radius: 18px; background: rgba(4, 14, 22, .74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.xp-cap.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.xp-cap__meta { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; color: #ffb59b; }
.xp-cap h3 { margin: 0; font-family: var(--f-night); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 3.2vw, 48px); line-height: .95; }
.xp-cap h3 em { display: block; margin-top: 6px; font-family: var(--f-serif); text-transform: none; font-size: .62em; color: rgba(243, 234, 217, .85); }
.xp-cap__lineup { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(243, 234, 217, .8); }
.xp-cap__lineup:empty { display: none; }
.xp-cap__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.xp-cap .pill { min-height: 42px; font-size: 15px; }
.xp-cap__nav { display: flex; gap: 8px; margin-top: 16px; }
.xp-cap__close { position: absolute; right: 12px; top: 12px; }
.xp-cursor.is-grab { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.xp-cursor.is-grabbing { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(255, 255, 255, .25); }
.xp-ui.is-under .xp-foot__l .xp-next { opacity: 0; pointer-events: none !important; }
.xp-hint { top: calc(64% + 20px); }
@media (max-width: 860px) {
  .xp-cap { left: 50%; right: auto; top: auto; bottom: 92px; transform: translate(-50%, 20px); }
  .xp-cap.is-on { transform: translate(-50%, 0); }
  .xp-nights__intro { top: 11vh; }
  .xp-hint { top: calc(62% + 20px); }
}

/* ---------------------------------------------------------------- v7: the walk (walk.js) */
/* The walk canvas sits over the WebGL canvas; main.js fades it in after the rise. */
.xp-walk { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; height: 100dvh; display: block; opacity: 0; pointer-events: none; }
html.is-walk, html.is-walk body.xp { overscroll-behavior: none; }
html.is-walk .xp-mode { display: none; }
/* a soft paper haze at the top and bottom keeps the ink readable over the footage */
.xp-veil { display: none; position: absolute; inset: 0; pointer-events: none; transition: opacity .8s var(--ease);
  background: linear-gradient(180deg, rgba(251, 247, 240, .5), rgba(251, 247, 240, 0) 130px), linear-gradient(0deg, rgba(251, 247, 240, .45), rgba(251, 247, 240, 0) 160px); }
html.is-walk .xp-veil { display: block; }
.xp-ui.is-under .xp-veil, .xp-ui.is-under .xp-title, .xp-ui.is-under .xp-load { opacity: 0 !important; }

/* the headline after the rise (the 3D route draws its own in WebGL) */
.xp-title { position: absolute; left: 0; right: 0; top: 18vh; text-align: center; color: var(--ink); pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); text-shadow: 0 0 42px rgba(251, 247, 240, .8), 0 0 14px rgba(251, 247, 240, .55); }
.xp-title.is-on { opacity: 1; transform: none; }
.xp-title p { margin: 0; }
.xp-title .xp-title__k { display: inline-block; margin-bottom: 14px; padding: 6px 14px 6px 17px; border-radius: 999px; background: rgba(251, 247, 240, .72); font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.xp-title__a { font-family: var(--f-serif); font-style: italic; font-size: clamp(54px, 8.4vw, 132px); line-height: .9; }
.xp-title__b { font-size: clamp(48px, 7.4vw, 118px); font-weight: 400; letter-spacing: -.03em; line-height: .95; }

/* the walk is still loading where you are */
.xp-load { display: none; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 11px; border-radius: 999px; background: rgba(251, 247, 240, .8); color: #0f2f3c; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s var(--ease); }
html.is-walk .xp-load { display: inline-flex; }
.xp-load.is-on { opacity: 1; }
.xp-load i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: xp-spin .9s linear infinite; }
@keyframes xp-spin { to { transform: rotate(360deg); } }

/* the hints, over footage */
html.is-walk .xp-hint { padding: 9px 16px; border-radius: 999px; background: rgba(251, 247, 240, .74); color: #0f2f3c; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 860px) {
  .xp-title { top: 15vh; }
  .xp-title .xp-title__k { font-size: 11px; letter-spacing: .26em; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-load i { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* ---------------------------------------------------------------- v8: booking, captions, the phone card */
/* The Book pill, always on: two stacked labels crossfade while the pill eases to the new width. */
.xp-book { min-height: 42px; padding: 0 18px 0 16px; gap: 8px; font-size: 15px; background: #0f2f3c; color: #fff; }
.xp-book__in { position: relative; display: inline-block; height: 1.3em; transition: width .5s var(--ease); }
.xp-book__t { position: absolute; left: 0; top: 0; line-height: 1.3; white-space: nowrap; opacity: 0; transition: opacity .45s var(--ease); }
.xp-book__t.is-on { opacity: 1; }
.xp-ui.is-under .xp-book { background: #f3ead9; color: #0f2f3c; }
@media (max-width: 860px) {
  .xp-book { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .xp-book svg { display: none; }
}
@media (max-width: 400px) {
  .xp-brand { gap: 9px; }
  .xp-brand span { font-size: 17px; letter-spacing: .26em; }
}

/* ---------------------------------------------------------------- the dream lens switch (walk only) */
.xp-lens { display: none; align-items: center; gap: 9px; min-height: 38px; padding: 0 15px 0 11px; border: 0; border-radius: 999px; background: rgba(251, 247, 240, .74); color: #0f2f3c; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .4s var(--ease), background-color .3s; }
html.is-walk.has-gl .xp-lens { display: inline-flex; }
.xp-lens:hover { background: rgba(251, 247, 240, .92); }
.xp-lens:focus-visible { outline: 2px solid #0f2f3c; outline-offset: 3px; }
.xp-lens__sw { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(15, 47, 60, .22); transition: background-color .3s var(--ease); }
.xp-lens__sw i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--ease); }
.xp-lens[aria-pressed="true"] .xp-lens__sw { background: #0f2f3c; }
.xp-lens[aria-pressed="true"] .xp-lens__sw i { transform: translateX(12px); }
.xp-ui.is-under .xp-lens { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .xp-lens { min-height: 34px; padding: 0 12px 0 9px; font-size: 12px; } }
@media (max-width: 560px) { .xp-lens { padding: 0 9px; } .xp-lens__t { display: none; } }

/* ---------------------------------------------------------------- v9: the gate, composed
   The beach seen up through the surface is the picture; the brand sits top left where it
   stays once you're in; one line in the serif; the Enter pill fills as the place loads. */
.xp-gate__brand { position: absolute; top: 18px; left: var(--gut); z-index: 1; display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.xp-gate__brand .brand__mark { width: 34px; height: 34px; color: currentColor; }
.xp-gate__brand span { font-family: var(--f-word); font-weight: 300; font-size: 20px; letter-spacing: .34em; text-transform: uppercase; padding-top: 3px; }
.xp-gate__in { gap: 30px; }
.xp-gate__line { margin: 0; max-width: 24ch; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.1vw, 48px); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 1px 24px rgba(0, 0, 0, .28); }
.xp-gate__btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; }
.xp-gate__go { position: relative; overflow: hidden; min-width: 210px; justify-content: center; background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .6s var(--ease), color .6s var(--ease), transform .4s var(--ease); }
.xp-gate__go::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .16; transform-origin: 0 50%; transform: scaleX(var(--load, 0)); transition: transform .6s var(--ease), opacity .4s; }
.xp-gate__go > span { position: relative; display: inline-flex; align-items: center; gap: 10px; transition: opacity .5s var(--ease); }
.xp-gate__enter { position: absolute !important; opacity: 0; }
.xp-gate.is-ready .xp-gate__go { background: #0f2f3c; color: #fff; box-shadow: none; }
.xp-gate.is-ready .xp-gate__go::before { opacity: 0; }
.xp-gate.is-ready .xp-gate__load { position: absolute; opacity: 0; }
.xp-gate.is-ready .xp-gate__enter { position: relative !important; opacity: 1; }
.xp-gate:not(.is-ready) .xp-gate__go { cursor: progress; }
.xp-gate:not(.is-ready) .xp-gate__go:hover { transform: none; }
.xp-gate__quiet { background: none; border: 0; padding: 8px 2px; color: inherit; font: inherit; font-size: 15px; cursor: pointer; opacity: 0; transition: opacity .8s var(--ease) .15s;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 100% 1px no-repeat; }
.xp-gate.is-ready .xp-gate__quiet { opacity: .85; }
.xp-gate__quiet:hover { opacity: 1; }
.has-gl .xp-gate__line { text-shadow: 0 0 30px rgba(220, 250, 248, .55); }
.has-gl .xp-gate.is-ready .xp-gate__go { background: #0f2f3c; color: #fff; }
.xp-gate__go:focus-visible, .xp-gate__quiet:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 860px) {
  .xp-gate__brand { top: 16px; gap: 9px; }
  .xp-gate__brand span { font-size: 17px; letter-spacing: .26em; }
  .has-gl .xp-gate { padding-bottom: max(5vh, 28px); }
  .xp-gate__in { gap: 22px; }
  .xp-gate__line { font-size: 26px; max-width: 19ch; }
  .xp-gate__btns { flex-direction: column; gap: 6px; }
}

/* ---------------------------------------------------------------- v9: words in the haze
   No boxes. A stop's words sit in the lens haze at the lower edge, on a soft patch of mist in
   the colour of the hour (--haze, from main.js), and come into focus line by line as you slow
   down. While you walk fast they go soft with the picture (--spd, 0-1). */
.xp-ui { --haze: 243 230 209; --spd: 0; }
html[data-sky="night"] .xp-ui { --haze: 8 18 28; }
.xp-stop { position: absolute; left: var(--gut); bottom: 118px; width: min(480px, calc(100% - 2 * var(--gut))); margin: 0; padding: 0; color: var(--ink); pointer-events: none;
  filter: blur(calc(var(--spd) * 5px)); }
html[data-sky="night"] .xp-stop { color: #f3ead9; }
.xp-stop::before { content: ""; position: absolute; inset: -90px -140px -80px -110px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease);
  background: radial-gradient(closest-side, rgb(var(--haze) / .8), rgb(var(--haze) / .5) 52%, rgb(var(--haze) / 0)); }
.xp-stop.is-on::before { opacity: 1; }
.xp-stop > * { opacity: 0; filter: blur(10px); transform: translateY(10px); transition: opacity .6s var(--ease), filter .8s var(--ease), transform .9s var(--ease); }
.xp-stop.is-on > * { opacity: 1; filter: blur(0); transform: none; }
.xp-stop.is-on > :nth-child(2) { transition-delay: .08s; }
.xp-stop.is-on > :nth-child(3) { transition-delay: .16s; }
.xp-stop.is-on > :nth-child(4) { transition-delay: .24s; }
.xp-stop.is-on a { pointer-events: auto; }
.xp-stop a { pointer-events: none; }
.xp-stop__time { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-stop__time::after { content: ""; width: 0; height: 1px; background: currentColor; opacity: .45; transition: width 1.4s var(--ease) .3s; }
.xp-stop.is-on .xp-stop__time::after { width: 64px; }
.xp-stop h2 { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(46px, 4.7vw, 74px); line-height: .94; letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 0 36px rgb(var(--haze) / .9); }
.xp-stop__line { margin: 14px 0 14px; max-width: 36ch; font-size: 16px; line-height: 1.5; text-shadow: 0 0 16px rgb(var(--haze) / .95), 0 0 2px rgb(var(--haze) / .6); }
.xp-stop__go { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0 7px; color: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: background-size .5s var(--ease); }
.xp-stop__go:hover { background-size: 35% 1.5px; }
.xp-stop__go svg { width: 12px; height: 12px; }
.xp-stop__go:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.xp-stop__last { margin: 14px 0 0; font-size: 13px; opacity: .75; }

/* Passing captions drift up past you as you walk (--k: -1 coming, 0 here, 1 gone, from walk.js)
   and come into focus as they arrive. */
.xp-caption { position: absolute; left: 50%; top: 30%; width: min(820px, calc(100% - 2 * var(--gut))); margin: 0; text-align: center; text-wrap: balance; pointer-events: none;
  font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 62px); line-height: 1.04; color: var(--ink);
  text-shadow: 0 0 46px rgb(var(--haze) / .95), 0 0 14px rgb(var(--haze) / .7);
  transform: translate(-50%, calc(var(--k, 0) * -44px)); opacity: 0; filter: blur(12px); transition: opacity 1s var(--ease), filter 1.2s var(--ease); }
.xp-caption.is-on { opacity: 1; filter: blur(calc(var(--spd) * 4px)); }
.xp-ui.is-under .xp-caption { opacity: 0 !important; }

/* The opening words and the hint, without pills or capitals: they arrive into focus too. */
.xp-title { filter: blur(14px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease); text-shadow: 0 0 42px rgb(var(--haze) / .9), 0 0 14px rgb(var(--haze) / .6); }
.xp-title.is-on { filter: blur(0); }
.xp-title .xp-title__k { margin-bottom: 16px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 15px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
html.is-walk .xp-hint { padding: 0 0 14px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink); text-shadow: 0 0 16px rgb(var(--haze) / .95); }
html.is-walk .xp-hint::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 10px; background: currentColor; transform-origin: 50% 0; animation: xp-drip 2.2s var(--ease) infinite; }
@keyframes xp-drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(6px); opacity: 0; } }

@media (max-width: 860px) {
  .xp-stop, html.is-walk .xp-stop { left: 22px; right: 22px; width: auto; bottom: 172px; display: block; transform: none; }
  .xp-stop::before { inset: -80px -60px -70px -60px; }
  .xp-stop h2 { font-size: 40px; }
  .xp-stop__time { margin-bottom: 8px; font-size: 12px; }
  .xp-stop__line { margin: 10px 0 8px; font-size: 14.5px; line-height: 1.45; }
  .xp-caption { top: 26%; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-stop, .xp-caption.is-on { filter: none; }
  .xp-stop > *, .xp-title { filter: none !important; transform: none !important; }
  .xp-caption { filter: none !important; transform: translate(-50%, 0) !important; }
  html.is-walk .xp-hint::after { animation: none; }
}

/* ---------------------------------------------------------------- v14: light letters or dark ink
   One softer serif, centred. The words are light with a soft shadow in the hour's colour, and
   turn to the hour's dark ink where the picture behind them is bright (data-ink="dark" on .xp-ui,
   set per stop in walk.json). The logo, the Book pill and the buttons always take the same ink.
   --tone (the hour's deep colour) and --haze come from main.js. Night and under the sea keep
   their own colours. */
:root { --f-soft: "Newsreader", Georgia, "Times New Roman", serif; }
.xp-ui { --tone: 78 56 40; }
html.is-walk .xp-ui:not(.is-under) { color: #fbf4ea; --ga: .16; --gl: rgba(255, 255, 255, .5); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"]:not(.is-under) { color: rgb(var(--tone)); --ga: .24; --gl: rgb(var(--tone) / .32); }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) :is(.xp-head, .xp-foot, .xp-title, .xp-caption, .xp-stop, .xp-hint),
html.is-walk[data-sky="night"] .xp-ui:not(.is-under) :is(.xp-head, .xp-foot, .xp-title, .xp-caption, .xp-stop, .xp-hint) {
  text-shadow: 0 0 1.5px rgb(var(--tone) / .4), 0 0 18px rgb(var(--tone) / .6); }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) .xp-brand .brand__mark { filter: drop-shadow(0 0 10px rgb(var(--tone) / .5)); }
html.is-walk .xp-ui:not(.is-under) .xp-brand .brand__mark { color: currentColor; transition: color .8s var(--ease); }
html.is-walk .xp-ui { transition: opacity 1s var(--ease), color .8s var(--ease); }

/* the shade at the top and bottom edges, under light letters only (the old paper veil goes) */
html.is-walk .xp-veil { background: linear-gradient(rgb(var(--tone) / .3), rgb(var(--tone) / 0) 24%, rgb(var(--tone) / 0) 62%, rgb(var(--tone) / .38)); opacity: 1; }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] .xp-veil { opacity: 0; }

/* glass buttons in the ink of the words */
html.is-walk .xp-ui:not(.is-under) :is(.xp-book, .round, .xp-lens, .xp-next, .xp-load) {
  background: rgb(255 255 255 / var(--ga)); color: inherit; box-shadow: inset 0 0 0 1px var(--gl);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); transition: color .8s var(--ease), background-color .8s var(--ease), box-shadow .8s var(--ease), transform .4s var(--ease); }
html.is-walk .xp-ui:not(.is-under) .xp-book { min-height: 40px; padding: 0 18px; font-family: var(--f-soft); font-size: 15px; letter-spacing: .03em; }
html.is-walk .xp-ui:not(.is-under) .xp-book svg { display: none; }
html.is-walk .xp-ui:not(.is-under) .round { width: 42px; height: 42px; }
html.is-walk .xp-ui:not(.is-under) .xp-next { font-family: var(--f-soft); }
/* the dial: one quiet capsule, ↑ time ↓ */
html.is-walk .xp-ui:not(.is-under) .xp-dial { gap: 2px; height: 42px; padding: 0 4px; border-radius: 999px; background: rgb(255 255 255 / var(--ga)); box-shadow: inset 0 0 0 1px var(--gl);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); transition: box-shadow .8s var(--ease); }
html.is-walk .xp-ui:not(.is-under) .xp-dial .round--sm { width: 34px; height: 34px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .78; }
html.is-walk .xp-ui:not(.is-under) .xp-dial .round--sm:hover { opacity: 1; transform: none; }
html.is-walk .xp-dial__ring { width: auto; height: auto; padding: 0 8px; }
html.is-walk .xp-dial__ring svg { display: none; }
html.is-walk .xp-dial__ring span { font-family: var(--f-soft); font-size: 15px; font-weight: 400; letter-spacing: .04em; }
/* the lens switch: a small outline switch in the same ink */
html.is-walk .xp-ui:not(.is-under) .xp-lens { min-height: 42px; padding: 0 14px 0 12px; font-family: var(--f-soft); font-size: 14px; font-weight: 400; }
html.is-walk .xp-lens__sw { width: 26px; height: 14px; background: none !important; box-shadow: inset 0 0 0 1px currentColor; }
html.is-walk .xp-lens__sw i { left: 3px; top: 3px; width: 8px; height: 8px; background: currentColor; box-shadow: none; }
html.is-walk .xp-lens[aria-pressed="true"] .xp-lens__sw i { transform: translateX(12px); }
html.is-walk .xp-lens:focus-visible { outline-color: currentColor; }
html.is-walk .xp-load { position: absolute; right: 0; bottom: calc(100% + 8px); font-family: var(--f-soft); letter-spacing: .04em; text-transform: none; font-size: 13px; }
html.is-walk .xp-foot__r { position: relative; }

/* the opening words, in the middle of the screen */
html.is-walk .xp-title { top: 50%; transform: translateY(calc(-56% + 14px)); color: inherit; }
html.is-walk .xp-title.is-on { transform: translateY(-56%); }
html.is-walk .xp-title .xp-title__k { margin-bottom: 12px; font-family: var(--f-soft); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: .02em; }
html.is-walk .xp-title__a, html.is-walk .xp-title__b { font-family: var(--f-soft); font-style: italic; font-weight: 300; font-size: clamp(52px, 7vw, 112px); line-height: .95; letter-spacing: -.02em; }
html.is-walk .xp-hint { top: auto; bottom: 104px; color: inherit; font-family: var(--f-soft); font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: 0; }

/* passing words, in the middle */
html.is-walk .xp-caption { top: 50%; color: inherit; font-family: var(--f-soft); font-weight: 300; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1;
  transform: translate(-50%, calc(-50% + var(--k, 0) * -24px)); }

/* a stop: centred and low, so the view stays clear; no time (the dial has it) */
html.is-walk .xp-stop { left: 50%; right: auto; bottom: 108px; width: min(600px, calc(100% - 2 * var(--gut))); transform: translateX(-50%); text-align: center; color: inherit; }
html.is-walk .xp-stop__time { display: none; }
html.is-walk .xp-stop h2 { font-family: var(--f-soft); font-weight: 300; font-size: clamp(38px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.015em; text-shadow: inherit; }
html.is-walk .xp-stop__line { max-width: 40ch; margin: 12px auto 16px; font-family: var(--f-soft); font-weight: 300; font-size: 19px; line-height: 1.38; text-wrap: pretty; text-shadow: inherit; }
html.is-walk .xp-stop__go { padding: 0 0 5px; font-family: var(--f-soft); font-weight: 400; font-size: 16px; background-size: 100% 1px; }
html.is-walk .xp-stop__go:hover { background-size: 35% 1px; }
html.is-walk .xp-stop__go svg { display: none; }
html.is-walk .xp-stop__last { font-family: var(--f-soft); font-style: italic; font-size: 15px; }
html.is-walk .xp-stop::before { inset: -70px -90px -60px; background: radial-gradient(closest-side, rgb(var(--tone) / .3), rgb(var(--tone) / .1) 60%, rgb(var(--tone) / 0)); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] .xp-stop::before { background: radial-gradient(closest-side, rgb(var(--haze) / .74), rgb(var(--haze) / .3) 60%, rgb(var(--haze) / 0)); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] :is(.xp-stop h2, .xp-caption, .xp-title) { text-shadow: 0 0 30px rgb(var(--haze) / .6); }

@media (max-width: 860px) {
  html.is-walk .xp-foot { grid-template-columns: 1fr auto 1fr; padding-bottom: 22px; }
  html.is-walk .xp-foot__c { grid-column: auto; grid-row: auto; }
  html.is-walk .xp-next { display: none; }
  html.is-walk .xp-ui:not(.is-under) .xp-lens { padding: 0; width: 42px; justify-content: center; }
  html.is-walk .xp-stop { left: 26px; right: 26px; width: auto; bottom: 92px; transform: none; }
  html.is-walk .xp-stop h2 { font-size: 36px; }
  html.is-walk .xp-stop__line { margin: 10px auto 14px; font-size: 17px; }
  html.is-walk .xp-stop__go { font-size: 15px; }
  html.is-walk .xp-caption { font-size: 32px; }
  html.is-walk .xp-title__a, html.is-walk .xp-title__b { font-size: 54px; }
  html.is-walk .xp-hint { bottom: 92px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-walk .xp-title, html.is-walk .xp-title.is-on { transform: translateY(-56%) !important; }
  html.is-walk .xp-caption { transform: translate(-50%, -50%) !important; }
}

/* ---------------------------------------------------------------- v15: words that melt while you move
   The words stay for their stretch of the walk. While you move (--tspd, 0-1, from main.js) the
   block softens and each word (.xp-w) drifts and fades, most at the ends of the lines; when you
   stop, everything settles back sharp. */
html.is-walk .xp-w { display: inline-block; }
html.is-walk .is-melt .xp-w { will-change: transform, opacity; }
html.is-walk .xp-stop { filter: blur(calc(var(--tspd, 0) * 4px)); }
html.is-walk .xp-caption, html.is-walk .xp-caption.is-on { transition: opacity .9s var(--ease); filter: blur(calc(var(--tspd, 0) * 5px)); transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  html.is-walk .xp-stop, html.is-walk .xp-caption, html.is-walk .xp-caption.is-on { filter: none; }
}

/* ---------------------------------------------------------------- v16: words on glass
   Each place gets one moment: its words sit on a pane of frosted glass in the colour of the
   hour, only while you're there (walk.json "show"), with picture alone in between. Light words
   get a darkened pane, dark words a light one. While you move the pane thins and the words drift
   and soften; the booking button stays clear and solid. */
html.is-walk .xp-ui { --pa: .3; --panel: var(--tone); --pline: rgba(255, 255, 255, .2); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] { --pa: .52; --panel: var(--haze); --pline: rgba(255, 255, 255, .55); }
html.is-walk .xp-stop, html.is-walk .xp-caption, html.is-walk .xp-caption.is-on {
  background: rgb(var(--panel) / calc(var(--pa) * (1 - var(--tspd, 0) * .55)));
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px var(--pline), 0 34px 70px -36px rgb(var(--tone) / .65);
  filter: none; }
html.is-walk .xp-stop::before { display: none; }
html.is-walk .xp-stop { bottom: 92px; width: min(540px, calc(100% - 2 * var(--gut))); padding: 26px 34px 26px; border-radius: 30px;
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .6s var(--ease), transform .9s var(--ease); }
html.is-walk .xp-stop.is-on { opacity: 1; transform: translate(-50%, 0); }
/* the words inside: they focus in when the pane arrives, and go soft while you move */
html.is-walk .xp-stop > .xp-stop__words { opacity: 1; transform: none; transition: none; filter: blur(calc(var(--tspd, 0) * 3.5px)); }
html.is-walk .xp-stop__words > * { opacity: 0; filter: blur(8px); transform: translateY(8px); transition: opacity .6s var(--ease) .1s, filter .8s var(--ease) .1s, transform .9s var(--ease) .1s; }
html.is-walk .xp-stop.is-on .xp-stop__words > * { opacity: 1; filter: blur(0); transform: none; }
html.is-walk .xp-stop.is-on .xp-stop__words > :nth-child(2) { transition-delay: .18s; }
html.is-walk .xp-stop__line { margin: 10px auto 0; }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) :is(.xp-stop, .xp-caption) { text-shadow: 0 0 14px rgb(var(--tone) / .35); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] :is(.xp-stop h2, .xp-caption) { text-shadow: none; }
/* the booking button: solid, always clear */
html.is-walk .xp-stop__go, html.is-walk .xp-stop__go:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 0 24px 0 26px; border-radius: 999px;
  background: #fbf4ea; color: rgb(var(--tone)); font-family: var(--f-soft); font-size: 17px; font-weight: 400; letter-spacing: .01em; text-shadow: none;
  box-shadow: 0 14px 30px -16px rgb(var(--tone) / .8); }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] :is(.xp-stop__go, .xp-stop__go:hover) { background: rgb(var(--tone)); color: #fbf4ea; }
html.is-walk .xp-stop__go svg { display: inline-block; width: 12px; height: 12px; }
html.is-walk .xp-stop.is-on .xp-stop__go { opacity: calc(1 - var(--tspd, 0) * .2); transition: opacity .5s var(--ease) .2s, transform .5s var(--ease), box-shadow .4s; }
html.is-walk .xp-stop.is-on .xp-stop__go:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgb(var(--tone) / .9); }
html.is-walk .xp-stop__go:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* a passing line: a smaller pane that hugs the words, in the middle */
html.is-walk .xp-caption { width: max-content; max-width: min(640px, calc(100% - 40px)); padding: 16px 30px 18px; border-radius: 26px; transition: opacity .8s var(--ease); }
html.is-walk .xp-caption__in { display: block; filter: blur(calc(var(--tspd, 0) * 4px)); }
@media (max-width: 860px) {
  html.is-walk .xp-stop { left: 14px; right: 14px; width: auto; bottom: 80px; padding: 20px 20px 20px; border-radius: 26px; transform: translateY(14px); }
  html.is-walk .xp-stop.is-on { transform: none; }
  html.is-walk .xp-stop h2 { font-size: 31px; }
  html.is-walk .xp-stop__line { font-size: 16px; line-height: 1.38; }
  html.is-walk .xp-stop__go, html.is-walk .xp-stop__go:hover { min-height: 46px; margin-top: 16px; font-size: 16px; }
  html.is-walk .xp-caption { padding: 14px 22px 16px; font-size: 27px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-walk .xp-stop__words, html.is-walk .xp-caption__in { filter: none !important; }
}

/* ---------------------------------------------------------------- v17: the guided walk
   Words only come up once you've arrived at a moment, so the pane, the words and the button
   arrive together, as one. */
html.is-walk .xp-stop { transition: opacity .45s var(--ease), transform .6s var(--ease); }
html.is-walk .xp-stop__words > * { transition: opacity .45s var(--ease), filter .55s var(--ease), transform .6s var(--ease); }
html.is-walk .xp-stop.is-on .xp-stop__words > :nth-child(2) { transition-delay: 0s; }
html.is-walk .xp-stop > .xp-stop__go, html.is-walk .xp-stop.is-on > .xp-stop__go { filter: none; transform: none; transition: opacity .45s var(--ease), transform .4s var(--ease), box-shadow .4s; }
html.is-walk .xp-stop.is-on > .xp-stop__go { opacity: 1; }
html.is-walk .xp-stop.is-on > .xp-stop__go:hover { transform: translateY(-2px); }
html.is-walk .xp-caption { transition: opacity .45s var(--ease); }

/* ---------------------------------------------------------------- v18: words in the space
   No more panes. The words of each moment are drawn into the WebGL picture (main.js, world.js):
   they come out of the distance as you walk toward a place, hold while you're there, and you
   pass through them as you walk on. The HTML words below stay in place, invisible, for screen
   readers and as the layout the picture copies. With the lens off they are what you see. */
html.is-walk .xp-stop, html.is-walk .xp-caption, html.is-walk .xp-caption.is-on { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; filter: none; }
html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { opacity: 1; transform: translateX(-50%); transition: none; padding: 0; bottom: 104px; width: min(640px, calc(100% - 2 * var(--gut))); }
html.is-walk .xp-stop:not(.is-on), html.is-walk .xp-caption:not(.is-on) { visibility: hidden; }
html.is-walk .xp-stop > .xp-stop__words { filter: none; }
html.is-walk .xp-stop__words > *, html.is-walk .xp-stop.is-on .xp-stop__words > * { opacity: 1; filter: none; transform: none; transition: none; }
html.is-walk .xp-stop__words { transform-origin: 50% -60%; }
html.is-walk .xp-caption, html.is-walk .xp-caption.is-on { opacity: 1; transition: none; padding: 0; width: min(760px, calc(100% - 40px)); max-width: none; }
html.is-walk .xp-caption__in { filter: none; }
html.gl-words .xp-stop__words, html.gl-words .xp-caption__in, html.gl-words .xp-title p { color: transparent !important; text-shadow: none !important; }
html.gl-words .xp-title, html.gl-words .xp-title.is-on { filter: none; transition: none; transform: translateY(-56%); }
html.is-walk:not(.gl-words) .xp-ui:not([data-ink="dark"]) :is(.xp-stop__words, .xp-caption__in) { text-shadow: 0 0 2px rgb(var(--tone) / .45), 0 0 22px rgb(var(--tone) / .6); }
html.is-walk .xp-stop__go, html.is-walk .xp-stop__go:hover { margin-top: 24px; }
html.is-walk .xp-stop > .xp-stop__go { transition: transform .4s var(--ease), box-shadow .4s; }
@media (max-width: 860px) {
  html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { left: 20px; right: 20px; width: auto; transform: none; bottom: 90px; }
}

/* ---------------------------------------------------------------- v19: sharp words on phones
   A phone draws the picture at reduced resolution to stay smooth, so there the words stay HTML
   (sharp at any size), moved through the space the same way, on a soft cloud of the hour's light
   instead of the picture-drawn haze. The opening title sweeps in with the same light band. */
html.is-walk:not(.gl-words) .xp-stop__words, html.is-walk:not(.gl-words) .xp-caption__in { position: relative; }
html.is-walk:not(.gl-words) .xp-stop__words::before, html.is-walk:not(.gl-words) .xp-caption__in::before { content: ""; position: absolute; inset: -40% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--tone) / .36), rgb(var(--tone) / .15) 60%, rgb(var(--tone) / 0)); }
html.is-walk:not(.gl-words):not([data-sky="night"]) .xp-ui[data-ink="dark"] :is(.xp-stop__words, .xp-caption__in)::before { background: radial-gradient(closest-side, rgb(var(--haze) / .8), rgb(var(--haze) / .36) 60%, rgb(var(--haze) / 0)); }
html.is-walk:not(.gl-words) .xp-title.is-on p { -webkit-mask-image: linear-gradient(105deg, #000 45%, transparent 55%); mask-image: linear-gradient(105deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: xp-sweep 1.9s cubic-bezier(.5, 0, .2, 1) both; }
html.is-walk:not(.gl-words) .xp-title.is-on p:nth-child(2) { animation-delay: .12s; }
html.is-walk:not(.gl-words) .xp-title.is-on p:nth-child(3) { animation-delay: .24s; }
@keyframes xp-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { html.is-walk .xp-title.is-on p { animation: none; -webkit-mask-image: none; mask-image: none; } }

/* ---------------------------------------------------------------- v20: the Book button in the dial
   No button over the picture: at a bookable place the clock capsule at the bottom opens into the
   button (on a phone the clock steps aside and the capsule becomes the button), and closes back
   into the clock as you walk on. Solid, in the ink of the words. */
html.is-walk .xp-stop__go { display: none !important; }
.xp-dial__go { display: none; }
html.is-walk .xp-dial__go { display: inline-flex; align-items: center; gap: 9px; height: 34px; max-width: 0; margin-left: 0; padding: 0; overflow: hidden; white-space: nowrap; border-radius: 999px;
  background: #fbf4ea; color: rgb(var(--tone)); font-family: var(--f-soft); font-size: 15px; letter-spacing: .01em; text-decoration: none; text-shadow: none; opacity: 0; pointer-events: none;
  transition: max-width .6s var(--ease), padding .6s var(--ease), margin .6s var(--ease), opacity .35s var(--ease), background-color .8s var(--ease), color .8s var(--ease); }
html.is-walk .xp-dial.has-go .xp-dial__go { max-width: 340px; margin-left: 6px; padding: 0 16px 0 18px; opacity: 1; pointer-events: auto; }
html.is-walk:not([data-sky="night"]) .xp-ui[data-ink="dark"] .xp-dial__go { background: rgb(var(--tone)); color: #fbf4ea; }
html.is-walk .xp-dial__go svg { flex: none; width: 11px; height: 11px; }
html.is-walk .xp-dial__go:hover { filter: brightness(1.06); }
html.is-walk .xp-dial__go:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 860px) {
  html.is-walk .xp-ui:not(.is-under) .xp-dial .round--sm, html.is-walk .xp-dial__ring { overflow: hidden; transition: width .5s var(--ease), max-width .5s var(--ease), padding .5s var(--ease), opacity .3s var(--ease); }
  html.is-walk .xp-dial__ring { max-width: 90px; }
  html.is-walk .xp-ui:not(.is-under) .xp-dial.has-go { gap: 0; }
  html.is-walk .xp-ui:not(.is-under) .xp-dial.has-go .round--sm { width: 0; padding: 0; border: 0; opacity: 0; }
  html.is-walk .xp-dial.has-go .xp-dial__ring { max-width: 0; padding: 0; opacity: 0; }
  html.is-walk .xp-dial.has-go .xp-dial__go { margin-left: 0; }
}

/* ---------------------------------------------------------------- v21: room to breathe, and the gate at dawn
   The words sit in the lower third (not on the bottom edge), the bar lifted a little. The gate's
   type and buttons match the rest of the site: the softer serif, a cream glass button, the quiet
   way in in light italic. */
html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { bottom: 132px; }
@media (max-width: 860px) {
  html.is-walk .xp-foot { padding-bottom: 32px; }
  html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { bottom: calc(126px + 6vh); }
  html.is-walk .xp-hint { bottom: calc(118px + 6vh); }
}
.has-gl .xp-gate { color: #233536; }
.xp-gate__line, .has-gl .xp-gate__line { font-family: var(--f-soft, "Newsreader", Georgia, serif); font-style: italic; font-weight: 300; letter-spacing: -.012em; line-height: 1.08; text-shadow: 0 0 34px rgba(250, 244, 232, .65), 0 0 12px rgba(250, 244, 232, .4); }
.xp-gate__go { font-family: var(--f-soft, "Newsreader", Georgia, serif); font-size: 17px; font-weight: 400; letter-spacing: .01em; color: #233536;
  background: rgba(251, 244, 234, .32); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); }
.xp-gate__go::before { background: #233536; }
.xp-gate.is-ready .xp-gate__go, .has-gl .xp-gate.is-ready .xp-gate__go { background: rgba(251, 244, 234, .9); color: #233536; box-shadow: 0 16px 36px -20px rgba(20, 40, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .75); }
.xp-gate__go svg { width: 12px; height: 12px; }
.xp-gate__quiet { font-family: var(--f-soft, "Newsreader", Georgia, serif); font-style: italic; font-size: 16px; letter-spacing: .01em; }

/* ---------------------------------------------------------------- v22: the day's chapters, the bar lifted, the Book chooser
   Along the bottom edge, the walk's chapters, evenly spaced on a thin line that fills as the
   day goes on; the one you're in is lit, any can be tapped to go there. The bar with the clock
   and the Book button sits above it, and the words above that. */
.xp-chap { display: none; }
html.is-walk .xp-chap { --n: 6; --cp: 0; position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: block; width: min(660px, calc(100% - 2 * var(--gut)));
  transform: translateX(-50%); color: inherit; transition: opacity .6s var(--ease); }
html.is-walk .xp-ui.is-under .xp-chap { opacity: 0; pointer-events: none; }
.xp-chap ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.xp-chap button { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 4px 0 0; border: 0; background: none; color: inherit; font: 400 13px/1 var(--f-soft); letter-spacing: .02em; white-space: nowrap; cursor: pointer; opacity: .6; transition: opacity .4s var(--ease); }
.xp-chap button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.xp-chap li.is-past button::after { opacity: 1; }
.xp-chap li.is-on button { opacity: 1; }
.xp-chap li.is-on button::after { opacity: 1; transform: scale(1.45); }
.xp-chap button:hover { opacity: 1; }
.xp-chap button:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.xp-chap__line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); bottom: 3px; height: 1px; pointer-events: none; }
.xp-chap__line::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .3; }
.xp-chap__line i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cp) * 100%); background: currentColor; }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) .xp-chap,
html.is-walk[data-sky="night"] .xp-ui:not(.is-under) .xp-chap { text-shadow: 0 0 1.5px rgb(var(--tone) / .4), 0 0 18px rgb(var(--tone) / .6); }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) .xp-chap button::after,
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) .xp-chap__line { filter: drop-shadow(0 0 6px rgb(var(--tone) / .55)); }

/* the bar (with the Book button) and the words, lifted above the chapters */
html.is-walk .xp-foot { padding-bottom: 60px; }
html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { bottom: 170px; }
html.is-walk .xp-hint { bottom: 146px; }
.has-gl .xp-gate { padding-bottom: 15vh; }
@media (max-width: 860px) {
  html.is-walk .xp-chap { width: calc(100% - 24px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .xp-chap button { gap: 7px; font-size: 11.5px; letter-spacing: .01em; }
  .xp-chap button .xp-chap__long { display: none; }
  html.is-walk .xp-foot { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  html.is-walk .xp-stop, html.is-walk .xp-stop.is-on { bottom: calc(160px + 6vh); }
  html.is-walk .xp-hint { bottom: calc(152px + 6vh); }
  .has-gl .xp-gate { padding-bottom: max(10vh, 56px); }
}

/* the Book chooser: what would you like to book? */
.xp-bookwrap { position: relative; display: inline-flex; }
.xp-pick { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 300px; padding: 8px; border-radius: 22px; background: rgba(251, 244, 234, .92); color: #233536; text-shadow: none; text-align: left;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 26px 50px -26px rgba(20, 30, 30, .55), inset 0 0 0 1px rgba(255, 255, 255, .7);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: 100% 0; pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.xp-pick.is-open { opacity: 1; transform: none; pointer-events: auto; }
.xp-pick__q { margin: 8px 14px 6px; font: italic 400 14px/1.3 var(--f-soft); opacity: .7; }
.xp-pick a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 15px; color: inherit; text-decoration: none; font: 400 17px/1.25 var(--f-soft); }
.xp-pick a small { display: block; margin-top: 3px; font-size: 13px; opacity: .62; }
.xp-pick a:hover, .xp-pick a:focus-visible { background: rgba(35, 53, 54, .07); outline: none; }
.xp-pick a svg { flex: none; width: 11px; height: 11px; opacity: .55; }
@media (max-width: 860px) { .xp-pick { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; transform-origin: 50% 0; } }
@media (prefers-reduced-motion: reduce) { .xp-pick { transition: opacity .2s; transform: none; } }

/* new words start hidden: wordsFrame gives them their look (opacity, scale, blur) the moment they
   arrive, so a stop's words never flash at full strength before fading in from the distance */
html.is-walk .xp-stop > .xp-stop__words, html.is-walk .xp-caption > .xp-caption__in { opacity: 0; }

/* no "Loading the walk" pill: the chapter line shows how far the walk has loaded (a lighter
   stretch ahead of you, like a video's buffer), and its tip breathes while the walk waits there */
html.is-walk .xp-load { display: none; }
.xp-chap__line b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cl, 1) * 100%); background: currentColor; opacity: .32; transition: width .8s var(--ease); }
.xp-chap__line b::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .4s var(--ease); }
.xp-chap.is-on .xp-chap__line b::after { animation: xp-chap-wait 1.3s ease-in-out infinite; }
@keyframes xp-chap-wait { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .xp-chap.is-on .xp-chap__line b::after { animation: none; opacity: .8; } }

/* a journey button (it walks you on) points down the walk, a booking button out of it */
html.is-walk .xp-dial__go svg { transition: transform .4s var(--ease); }
html.is-walk .xp-dial__go.is-journey svg { transform: rotate(45deg); }

/* ---------------------------------------------------------------- v34: detours
   A stop's button opens the place's photos around you (drawn in WebGL, over the walk softened
   behind). Here: the few words and buttons that go with them, in the walk's own voice (the soft
   serif, cream on the picture, glass buttons), and the sheet that rises with the details. */
html.is-detour .xp-ui { opacity: 0 !important; pointer-events: none !important; transition: opacity .5s var(--ease); }
html.is-detour .xp-ui * { pointer-events: none !important; }
.xp-det { position: fixed; inset: 0; z-index: 30; color: #fbf4ea; font-family: var(--f-soft); --t: var(--tone, 60 58 54); }
.xp-det[hidden] { display: none; }
.xp-det:focus { outline: none; }
.xp-det__stage { position: absolute; inset: 0; touch-action: none; }
/* a soft shade at the top and bottom edges, in the ink of the hour, so the words and buttons read
   on any photo (it comes and goes with the detour) */
.xp-det::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(rgb(var(--t) / .32), rgb(var(--t) / 0) 22%, rgb(var(--t) / 0) 58%, rgb(var(--t) / .5)); }
.xp-det.is-on::before { opacity: 1; }
.xp-det :is(.xp-det__back, .xp-det__title, .xp-det__hint, .xp-det__bar, .xp-det__cap) { transition: opacity .7s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.xp-det:not(.is-on) :is(.xp-det__back, .xp-det__title, .xp-det__bar) { opacity: 0; pointer-events: none; transition-duration: .35s; transition-delay: 0s !important; }
.xp-det:not(.is-on) .xp-det__title { transform: translateY(14px); filter: blur(6px); }
.xp-det:not(.is-on) .xp-det__bar { transform: translate(-50%, 14px); }
.xp-det:not(.is-on) .xp-det__back { transform: translateY(-8px); }
.xp-det.is-on .xp-det__back { transition-delay: .55s; }
.xp-det.is-on .xp-det__title { transition-delay: .75s; }
.xp-det.is-on .xp-det__bar { transition-delay: 1s; }
/* glass, like the walk's buttons */
.xp-det__back, .xp-det .round { background: rgb(var(--t) / .26); color: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
.xp-det__back { position: absolute; left: var(--gut); top: calc(var(--gut) + env(safe-area-inset-top)); min-height: 42px; padding: 0 18px 0 15px; gap: 9px; font-family: var(--f-soft); font-size: 15px; font-weight: 400; letter-spacing: .02em; }
.xp-det__back svg { width: 13px; height: 13px; }
.xp-det__back:hover { transform: translateX(-2px); }
.xp-det .round { width: 38px; height: 38px; font-size: 15px; }
/* the place's name, bottom left, like the words of a stop */
.xp-det__title { position: absolute; left: var(--gut); bottom: 116px; max-width: min(620px, calc(100% - 2 * var(--gut))); pointer-events: none; text-shadow: 0 0 22px rgb(var(--t) / .45); }
.xp-det__title h2 { margin: 0; font-family: var(--f-soft); font-style: italic; font-weight: 300; font-size: clamp(46px, 5.4vw, 88px); line-height: .95; letter-spacing: -.02em; }
.xp-det__title p { margin: 14px 0 0; font-size: 18px; line-height: 1.4; opacity: .92; }
.xp-det__hint { position: absolute; left: 50%; top: calc(var(--gut) + 12px + env(safe-area-inset-top)); margin: 0; transform: translateX(-50%); font-style: italic; font-size: 15px; white-space: nowrap; opacity: 0; pointer-events: none; text-shadow: 0 0 12px rgb(var(--t) / .8), 0 0 2px rgb(var(--t) / .5); transition: opacity .8s var(--ease); }
.xp-det.is-on .xp-det__hint.is-on { opacity: .95; transition-delay: 1.4s; }
/* the button to the details: solid, the one clear thing to do */
.xp-det__bar { position: absolute; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
.xp-det__more { min-height: 50px; padding: 0 24px 0 26px; gap: 10px; background: #fbf4ea; color: rgb(var(--t)); font-family: var(--f-soft); font-size: 17px; font-weight: 400; letter-spacing: .01em; box-shadow: 0 16px 34px -18px rgb(var(--t) / .9); }
.xp-det__more svg { width: 12px; height: 12px; }
.xp-det__more[hidden] { display: none; }
/* a photo, picked: its caption under it, with the way to the next */
.xp-det__cap { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 2 * var(--gut)); padding: 6px; border-radius: 999px;
  background: rgb(var(--t) / .42); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.xp-det__cap.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: .2s; }
.xp-det__cap p { margin: 0 10px; min-width: 0; font-size: 17px; line-height: 1.25; text-align: center; text-shadow: 0 0 14px rgb(var(--t) / .4); }
.xp-det__cap small { margin-left: 10px; font-size: 13px; opacity: .72; white-space: nowrap; }
.xp-det__cap .round { box-shadow: none; background: rgb(255 255 255 / .14); }
.xp-det.has-focus :is(.xp-det__title, .xp-det__bar), .xp-det.has-sheet :is(.xp-det__title, .xp-det__bar, .xp-det__hint) { opacity: 0 !important; pointer-events: none; transition-delay: 0s !important; }
.xp-det.has-focus .xp-det__title { transform: translateY(10px); }
/* the sheet: the details, rising over the photos */
.xp-sheet { position: absolute; left: 50%; bottom: 0; display: flex; flex-direction: column; width: min(780px, 100%); height: min(86vh, 980px); border-radius: 28px 28px 0 0;
  background: #fbf6ee; color: rgb(var(--t)); box-shadow: 0 -30px 90px -40px rgb(0 0 0 / .55);
  transform: translate(-50%, 104%); transition: transform .85s cubic-bezier(.22, .8, .18, 1); visibility: hidden; }
.xp-sheet.is-on { transform: translate(-50%, 0); visibility: visible; }
.xp-sheet:not(.is-on) { transition: transform .6s cubic-bezier(.5, 0, .75, 0), visibility 0s .6s; }
.xp-sheet__grab { display: grid; justify-items: center; gap: 8px; padding: 14px 0 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.xp-sheet__grab i { width: 44px; height: 4px; border-radius: 2px; background: currentColor; opacity: .22; }
.xp-sheet__grab span { font-family: var(--f-soft); font-style: italic; font-size: 14px; opacity: .6; }
.xp-sheet__grab:hover span { opacity: .9; }
.xp-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(22px, 5vw, 60px) 56px; outline: none; -webkit-overflow-scrolling: touch; }
.xp-sheet__head { position: sticky; top: 0; z-index: 1; padding: 8px 0 18px; background: linear-gradient(#fbf6ee 82%, rgb(251 246 238 / 0)); }
.xp-sheet__head h2 { margin: 0; font-family: var(--f-soft); font-style: italic; font-weight: 300; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; }
.xp-sheet__tabs { display: flex; gap: 6px; margin-top: 16px; }
.xp-sheet__tabs button { padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: inherit; font-family: var(--f-soft); font-size: 16px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(var(--t) / .3); transition: background-color .3s, color .3s; }
.xp-sheet__tabs button[aria-selected="true"] { background: rgb(var(--t)); color: #fbf6ee; box-shadow: none; }
.xp-sheet__hours { margin: 4px 0 8px; font-family: var(--f-soft); font-style: italic; font-size: 15px; opacity: .7; }
.xp-sheet__sec h3 { margin: 30px 0 6px; font-family: var(--f-soft); font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
.xp-sheet__sec ul { margin: 0; padding: 0; list-style: none; }
.xp-sheet__sec li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; border-top: 1px solid rgb(var(--t) / .12); font-family: var(--f-soft); }
.xp-sheet__n b { font-size: 17px; font-weight: 500; }
.xp-sheet__n small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; opacity: .7; }
.xp-sheet__p { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-sheet__note { margin: 30px 0 0; font-family: var(--f-soft); font-style: italic; font-size: 14px; opacity: .6; }
@media (max-width: 860px) {
  .xp-det__title { bottom: calc(104px + env(safe-area-inset-bottom)); }
  .xp-det__title h2 { font-size: clamp(40px, 11vw, 58px); }
  .xp-det__title p { font-size: 16px; margin-top: 10px; }
  .xp-det__hint { left: var(--gut); top: calc(var(--gut) + 56px + env(safe-area-inset-top)); transform: none; white-space: normal; max-width: 70%; font-size: 14px; }
  .xp-sheet { height: 92vh; height: 92dvh; border-radius: 22px 22px 0 0; }
  .xp-det__cap p { font-size: 15px; margin: 0 4px; }
  .xp-det__cap small { display: block; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-det *, .xp-sheet { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* v38: the name steps back once you walk in; the collage gets the screen */
.xp-det__label { position: absolute; right: var(--gut); top: calc(var(--gut) + 10px + env(safe-area-inset-top)); margin: 0; font-style: italic; font-size: 19px; letter-spacing: .01em;
  text-shadow: 0 0 14px rgb(var(--t) / .7), 0 0 2px rgb(var(--t) / .4); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.xp-det.is-on.is-compact .xp-det__label { opacity: .95; transform: none; transition-delay: .35s; }
.xp-det.is-compact .xp-det__title { opacity: 0 !important; transform: translateY(12px); filter: blur(4px); transition-duration: .7s; transition-delay: 0s !important; }
.xp-det.is-compact .xp-det__hint { opacity: 0 !important; }
.xp-det.has-sheet .xp-det__label { opacity: 0 !important; }
@media (max-width: 860px) { .xp-det__label { top: calc(var(--gut) + 9px + env(safe-area-inset-top)); font-size: 17px; } }

/* v39: the other sheets (a cabin, day use, weddings, getting here, the story) */
.xp-sheet__lead { margin: 10px 0 0; font-family: var(--f-soft); font-size: 17px; line-height: 1.5; opacity: .82; max-width: 56ch; }
.xp-sheet__head .xp-sheet__lead + .xp-sheet__tabs { margin-top: 14px; }
.xp-sheet__book, .xp-sheet__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 34px 0 6px; }
.xp-sheet__book p { flex-basis: 100%; margin: 0; font-family: var(--f-soft); font-style: italic; font-size: 14px; opacity: .62; }
.xp-sheet__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: rgb(var(--t)); color: #fbf6ee; font-family: var(--f-soft); font-size: 17px; text-decoration: none; transition: transform .4s var(--ease); }
.xp-sheet__cta:hover { transform: translateY(-2px); }
.xp-sheet__cta svg { width: 12px; height: 12px; }
.xp-sheet__cta--line { background: none; color: inherit; box-shadow: inset 0 0 0 1px rgb(var(--t) / .35); }
.xp-sheet__text { margin-top: 18px; font-family: var(--f-soft); font-size: 17px; line-height: 1.6; max-width: 60ch; }
.xp-sheet__text h3 { margin: 30px 0 6px; font-style: italic; font-weight: 400; font-size: 26px; }
.xp-sheet__text p { margin: 0 0 14px; }
.xp-sheet__time li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.xp-sheet__time b { font-family: var(--f-soft); font-style: italic; font-weight: 400; font-size: 18px; }
.xp-sheet__time span { font-family: var(--f-soft); font-size: 15.5px; line-height: 1.5; opacity: .85; }
.xp-sheet__faq details { border-top: 1px solid rgb(var(--t) / .12); }
.xp-sheet__faq summary { padding: 13px 0; font-family: var(--f-soft); font-size: 17px; cursor: pointer; list-style: none; }
.xp-sheet__faq summary::-webkit-details-marker { display: none; }
.xp-sheet__faq summary::after { content: "+"; float: right; opacity: .5; }
.xp-sheet__faq details[open] summary::after { content: "–"; }
.xp-sheet__faq p { margin: 0 0 14px; font-family: var(--f-soft); font-size: 15.5px; line-height: 1.55; opacity: .8; }
.xp-sheet__body:focus, .xp-sheet__body:focus-visible { outline: none; }

/* v40: the bar under a picked print: the count (and a price), never squeezed */
.xp-det__cap p { white-space: nowrap; }
.xp-det__cap p span:empty { display: none; }
.xp-det__cap p span:empty + small { margin-left: 0; }
@media (max-width: 860px) { .xp-det__cap small { display: inline; margin: 0 0 0 8px; } .xp-det__cap p span:empty + small { margin-left: 0; } }
/* v55: a sheet scrolls as one page; only the menu keeps its title and Food/Drinks tabs pinned */
.xp-sheet__head { position: static; background: none; }
.xp-sheet__head:has(.xp-sheet__tabs) { position: sticky; background: linear-gradient(#fbf6ee 82%, rgb(251 246 238 / 0)); }
/* the sheet takes focus when it opens: no ring, and none of the rounding the focus style gives buttons
   (border-radius on a scrolling box clips its content to an oval) */
.xp-sheet__body:focus, .xp-sheet__body:focus-visible, .xp-det:focus, .xp-det:focus-visible { outline: none; border-radius: 0; }

/* ---------------------------------------------------------------- v57: the header, quiet
   The acacia mark alone on the left; on the right two words in the walk's own serif, the same size
   on one line: Book and Menu. Nothing boxed, no glass. A hairline draws under a word on hover (and
   while the Book chooser is open). The gate's mark sits exactly where the header's will be, so it
   stays put when the walk begins. */
.xp-head, .xp-gate__brand { height: 88px; padding: 0 var(--gut); }
.xp-gate__brand { top: 0; left: 0; display: flex; align-items: center; gap: 0; }
.xp-brand { gap: 0; }
.xp-brand > span, .xp-gate__brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xp-brand .brand__mark, .xp-gate__brand .brand__mark { width: 30px; height: 30px; }
html.is-walk .xp-ui:not(.is-under):not([data-ink="dark"]) .xp-head .xp-brand .brand__mark, .xp-head .xp-brand .brand__mark { filter: none; } /* flat: no glow */
.xp-head__end { display: flex; align-items: center; gap: 34px; }
html body .xp-ui .xp-head .xp-word.xp-word {
  position: relative; display: inline-flex; align-items: center; height: 44px; min-height: 0; width: auto; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: inherit; font: 400 19px/1 var(--f-soft); letter-spacing: .005em; text-decoration: none; cursor: pointer; transform: none; }
html body .xp-ui .xp-head .xp-word.xp-word svg { display: none; }
.xp-head .xp-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; opacity: .85;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--ease); }
.xp-head .xp-word:hover::after, .xp-head .xp-word:focus-visible::after, .xp-head .xp-word[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.xp-head .xp-word:focus-visible { outline: none; }
.xp-head .xp-book__in { height: 1em; }
.xp-head .xp-book__t { line-height: 1; } /* the same line box as Menu: one baseline */
@media (max-width: 860px) {
  .xp-head, .xp-gate__brand { height: 72px; }
  .xp-head__end { gap: 26px; }
  html body .xp-ui .xp-head .xp-word.xp-word { height: 40px; font-size: 17px; }
  .xp-head .xp-word::after { bottom: 8px; }
  .xp-brand .brand__mark, .xp-gate__brand .brand__mark { width: 28px; height: 28px; }
}

/* the gate's words rise in as the loader's light clears (main.js: .is-shown) */
.xp-gate__in > *, .xp-gate__brand { transition: opacity 1.3s cubic-bezier(.2, .7, .2, 1), transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.xp-gate__in > :nth-child(2) { transition-delay: .2s; }
.xp-gate:not(.is-shown) .xp-gate__in > *, .xp-gate:not(.is-shown) .xp-gate__brand { opacity: 0; transform: translateY(18px); }
.xp-gate:not(.is-shown) .xp-gate__brand { transform: none; }
@media (prefers-reduced-motion: reduce) { .xp-gate__in > *, .xp-gate__brand { transition-duration: .3s; transform: none !important; } }

/* v61: landing from the doorway. While the doorway fades away over the live walk, the interface and
   the headline under it are simply there, with no entrance of their own (or they'd dip and stagger
   in behind the doorway's identical copy). */
html.is-landing .xp-ui, html.is-landing .xp-ui .xp-title, html.is-landing .xp-ui .xp-title *, html.is-landing .xp-ui .xp-head, html.is-landing .xp-ui .xp-head * { transition: none !important; }
html.is-walk .xp-title.is-shown p { animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* its light sweep played in the doorway */
/* A stop whose picture leaves room on one side (walk.json "side": "left" | "right"): the words go there,
   off the subject, aligned to that side. Only stops that set it; every other stop is unchanged. */
html.is-walk .xp-stop[data-side="left"] { left: max(var(--gut), 7vw); right: auto; width: min(460px, 40vw); transform: none; text-align: left; bottom: 30vh; }
html.is-walk .xp-stop[data-side="right"] { left: auto; right: max(var(--gut), 7vw); width: min(460px, 40vw); transform: none; text-align: right; bottom: 30vh; }
/* on a phone's narrow view, the free wall for such a stop is above the subject */
@media (max-width: 860px) {
  html.is-walk .xp-stop:is([data-side="left"], [data-side="right"]) { left: 50%; right: auto; top: 112px; bottom: auto; width: min(600px, calc(100% - 2 * var(--gut))); transform: translateX(-50%); text-align: center; }
}
/* walk.json "place": "high" (only stops that set it): on a phone the words sit clear of the dial's button */
@media (max-width: 860px) { html.is-walk .xp-stop[data-place="high"] { bottom: 172px; } }
/* The walk takes the finger's swipes itself (walk.js): the picture never pans or bounces with them. */
.xp-walk { touch-action: none; }
/* For now: the Tune panel (main.js tunePanel), to try the dream lens and the walking bob. */
.xp-tune { position: fixed; z-index: 40; left: var(--gut); top: 88px; font-family: var(--f-soft); color: #2f2a24; }
.xp-tune[hidden] { display: none; }
.xp-tune__open { -webkit-appearance: none; appearance: none; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(251, 244, 234, .86); color: inherit; font: italic 400 15px/1 var(--f-soft); cursor: pointer; box-shadow: 0 10px 30px -18px rgba(20, 30, 30, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xp-tune__panel { position: absolute; left: 0; top: 44px; width: 260px; padding: 14px 16px 12px; border-radius: 20px; background: rgba(251, 244, 234, .94); box-shadow: 0 24px 50px -24px rgba(20, 30, 30, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.xp-tune.is-open .xp-tune__panel { opacity: 1; visibility: visible; transform: none; }
.xp-tune__h { margin: 0 0 10px; font: italic 400 14px/1.2 var(--f-soft); opacity: .7; }
.xp-tune__row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; font-size: 17px; cursor: pointer; }
.xp-tune__row input { width: 20px; height: 20px; accent-color: #4e3828; }
.xp-tune__slide { display: flex; align-items: center; gap: 10px; }
.xp-tune__slide input { flex: 1; accent-color: #4e3828; touch-action: pan-x; }
.xp-tune__slide input:disabled { opacity: .35; }
.xp-tune__slide output { width: 44px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.xp-tune__note { margin: 12px 0 8px; font-size: 12.5px; line-height: 1.35; opacity: .7; }
.xp-tune__reset { -webkit-appearance: none; appearance: none; padding: 0; border: 0; background: none; color: inherit; font: italic 400 14px/1.4 var(--f-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html:not(.is-walk) .xp-tune, html.is-detour .xp-tune, body:has(.xp-ui.is-under) .xp-tune, body:has(.xp-menu.is-open) .xp-tune { display: none; }

.xp-sheet__cta.is-soon { opacity: .55; cursor: default; pointer-events: none; } /* booking not open yet (site.bookingOpen) */