/* Walk the club: full-screen stations + flights over the editorial page. */
#walk { --cw: clamp(250px, 34vw, 380px); position: fixed; inset: 0; z-index: 20; background: #1b140e; overflow: hidden; touch-action: none; }
#walk[hidden] { display: none; }
html.walk-lock, html.walk-lock body { overflow: hidden; }
body.walk #tour, body.walk .scrollbtns { visibility: hidden; }
body.walk .topbar { background: rgba(28, 20, 13, .32); border-bottom-color: rgba(214,176,108,.28); }
body.walk .wordmark, body.walk .tools button { color: #fbf1e4; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
body.walk .wordmark em { color: #e9cf96; }
body.walk .tools button b { color: #f0c98a; }
body.walk .tools button:hover { background: rgba(255,255,255,.12); border-color: rgba(214,176,108,.4); }
body.walk #lift { z-index: 24; background: rgba(28, 20, 13, .42); border-color: rgba(214,176,108,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.walk #lift button, body.walk #lift .lift-label { color: #fbf1e4; }
body.walk #lift button[aria-current="true"] { background: #f0d49a; color: #2a2118; }

.w-stage { position: absolute; inset: 0; }
.w-still, .w-flight, .w-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.w-b { opacity: 0; transition: opacity .32s ease; }
.w-b.on { opacity: 1; }
.w-flight { opacity: 0; background: transparent; }
.w-loop { opacity: 0; background: transparent; }
.w-loop.on { opacity: 1; }
.w-flight.on { opacity: 1; }

/* the station card: a clean panel, vertically centred in the space below the top bar, never taller than that space */
.w-card { position: fixed; z-index: 22; top: var(--topbar); bottom: 0; width: var(--cw); display: flex; align-items: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.w-card[data-side="left"] { left: clamp(16px, 3vw, 44px); }
/* desktop: the card stays clear of the arrow buttons at the bottom right (a long card with a photo reaches them) */
@media (min-width: 601px) { .w-card { bottom: 64px; } }
/* short windows: a slimmer photo and tighter text, so the card still fits without scrolling */
@media (min-width: 601px) and (max-height: 780px), (min-width: 601px) and (max-width: 900px) {
  .w-card .room-card .rc-photo { display: none; } /* text first when space is short (the photo is on the 2D page) */
  .w-card .room-card .rc-desc { font-size: 13px; line-height: 1.5; margin-top: 6px; }
  .w-card .room-card .rc-hero { font-size: 15px; }
  .w-card .room-card .rc-steps { margin-top: 8px; gap: 4px; } .w-card .room-card .rc-steps a { padding: 5px 10px; font-size: 13px; }
  .w-card .queue { margin-bottom: 8px; }
}
.w-card[data-side="right"] { right: clamp(70px, 6.5vw, 96px); }
.w-card.on { opacity: 1; transform: none; }
.w-card > .card { pointer-events: auto; margin: 0; width: 100%; max-height: calc(100% - 44px); overflow: auto; overscroll-behavior: contain;
  background: rgba(251, 246, 236, .93); border: 1px solid rgba(214, 176, 108, .7); box-shadow: 0 18px 50px rgba(20, 12, 4, .32);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); padding: 24px 24px 20px; }
.w-card .card h3 { font-size: clamp(26px, 2.4vw, 34px); }
.w-card .room-card { --pad-x: 24px; --pad-t: 24px; }
.w-card .room-card .rc-photo { border-radius: 0; }
.w-card .queue { margin-bottom: 14px; }
.w-card .queue .people, .w-card .queue .note { display: none; } /* no queue figures in the walk (owner, 2026-10-01); the share line stays */
.w-card .w-hero .kicker { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.w-card .w-hero h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; }
.w-card .w-hero h1 em { font-weight: 500; color: var(--green); }
.w-card .w-hero .lede { margin: 14px 0 0; font-size: 15px; color: #4a3b2c; }
.w-card .w-landing .num { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--brass); margin: 0; }
.w-card .w-landing h2 { margin: 2px 0 4px; font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); }
.w-card .w-landing > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.w-rooms { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(176,138,74,.25); display: grid; gap: 4px; }
.w-rooms button { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: transparent; border: 1px solid transparent; font-family: var(--serif); font-size: 17px; border-radius: 2px; }
.w-rooms button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--brass)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.w-rooms button:hover, .w-rooms button:focus-visible { border-color: var(--line); background: rgba(255,255,255,.55); }

.w-nav { position: fixed; z-index: 23; right: clamp(8px, 1.6vw, 22px); bottom: 18px; display: flex; gap: 6px; }
.w-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(214,176,108,.55); background: rgba(28,20,13,.45); color: #fbf1e4; font-size: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.w-nav button:hover { background: rgba(28,20,13,.65); }
.w-skip { position: fixed; z-index: 23; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(251,246,236,.92); border: 1px solid var(--line); padding: 7px 16px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.w-skip[hidden] { display: none; }
#walk.flying .w-nav { opacity: .5; }
.w-debug { position: fixed; z-index: 30; left: 8px; bottom: 8px; max-width: min(470px, 92vw); max-height: 46vh; overflow: auto; font: 11px/1.4 ui-monospace, Consolas, monospace; background: rgba(10, 8, 6, .8); color: #f2e8d8; padding: 8px 10px; border-radius: 4px; }
.w-debug[hidden] { display: none; }
.w-debug table { border-collapse: collapse; margin-top: 4px; } .w-debug td { padding: 0 6px 0 0; white-space: nowrap; }

/* phones and portrait screens: the card is a bottom sheet (scrolls inside itself), the arrows sit under the top bar */
@media (max-width: 600px) {
  .w-card, .w-card[data-side="left"], .w-card[data-side="right"] { top: auto; left: 10px; right: 10px; bottom: calc(62px + env(safe-area-inset-bottom)); width: auto; display: block; }
  .w-card > .card { max-height: 42dvh; padding: 16px 18px 14px; border-radius: 14px; }
  .w-card .card h3 { font-size: 26px; }
  .w-card .card .tagline { margin-bottom: 8px; }
  .w-card .card:not(.room-card) dl { display: none; }
  /* the room card as a bottom sheet: same order (photo, text, Enter),
     scrolling inside itself when the content is long */
  .w-card .room-card { --pad-x: 18px; --pad-t: 16px; }
  .w-card .room-card .rc-photo { display: none; } /* the sheet shares a small screen with Jade and her line: text first (the photo is on the 2D page) */
  .w-card .room-card .rc-hero { font-size: 15px; } .w-card .room-card .rc-desc { font-size: 13.5px; }
  .w-card .w-hero h1 { font-size: 34px; }
  .w-card .w-hero .lede { font-size: 14px; }
  .w-nav { top: calc(var(--topbar) + 10px); bottom: auto; right: 10px; }
  .w-skip { bottom: auto; top: calc(var(--topbar) + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .w-card { transition: opacity .2s ease; transform: none; }
}

/* Jade the concierge (js/concierge.js): standing figure + dialogue box, FF7-style, in the space the station card leaves
   free (--fl / --fr: the free region's left and right edges; the card is on the left for most rooms, on the right for Jade's). */
.w-jade, .w-dialog { --fl: 0px; --fr: 100vw; position: fixed; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.w-jade[data-side="left"], .w-dialog[data-side="left"] { --fl: calc(clamp(16px, 3vw, 44px) + var(--cw) + 16px); }
.w-jade[data-side="right"], .w-dialog[data-side="right"] { --fr: calc(100vw - var(--cw) - clamp(70px, 6.5vw, 96px) - 16px); }
.w-jade.on, .w-dialog.on { opacity: 1; }
.w-jade { z-index: 21; bottom: 0; height: min(78vh, 118vw); aspect-ratio: 2 / 3; left: calc((var(--fl) + var(--fr)) / 2); transform: translateX(-50%); }
.wj-figure { position: absolute; inset: 0; transform: scaleX(-1); filter: drop-shadow(0 0 18px rgba(255, 214, 150, .25)); }
.wj-figure img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wj-blink, .wj-talk { opacity: 0; }
.wj-blink.on, .wj-talk.on { opacity: 1; }
.wj-shadow { position: absolute; left: 12%; right: 12%; bottom: 1.2vh; height: 3vh; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); }
.w-dialog { z-index: 22; bottom: clamp(14px, 4vh, 40px); left: max(var(--fl), 16px); right: calc(100vw - var(--fr)); margin: 0 auto; max-width: 720px; pointer-events: auto;
  background: rgba(28, 20, 14, .86); color: #f3e7cf; border: 1px solid rgba(176, 138, 74, .55); padding: 14px 22px 12px; }
.w-dialog[data-side="right"] { left: 16px; }
.wd-who { margin: 0 0 3px; font: 600 17px var(--serif); color: #e7c98f; }
.wd-line { margin: 0; min-height: 3em; font-size: 15px; line-height: 1.5; color: #efe3cb; }
.w-keys { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 0 0; color: #bfa985; font-size: 11.5px; letter-spacing: .06em; }
.w-keys button { display: inline-flex; align-items: center; background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.w-keys button:hover, .w-keys button:focus-visible { border-color: rgba(201, 164, 106, .6); color: #f3e7cf; background: rgba(255, 255, 255, .06); }
.w-keys b { display: inline-block; min-width: 22px; padding: 0 5px; margin-right: 6px; border: 1px solid #c9a46a; border-radius: 4px; text-align: center; color: #f3e7cf; font-weight: 500; }
#walk.flying .w-jade, #walk.flying .w-dialog { opacity: 0; }
@media (max-width: 600px) {
  .w-jade, .w-jade[data-side] { left: 50%; height: 40dvh; bottom: auto; top: calc(var(--topbar) + 4px); }
  .w-dialog, .w-dialog[data-side] { left: 10px; right: 10px; bottom: auto; top: calc(var(--topbar) + 40dvh - 6px); max-width: none; padding: 10px 14px 12px; }
  .wd-line { font-size: 13.5px; min-height: 2.6em; }
  .w-keys { display: none; }
  /* on a phone the card sheet shares the lower part of the screen with her line */
  #walk:has(.w-dialog.on) .w-card > .card { max-height: calc(100dvh - var(--topbar) - 40dvh - 120px - 62px); }
}

/* mid-size windows (601-760 px wide): the walk keeps the desktop HUD, so the lift stays a column on the right instead of
   the 2D page's bottom bar (which would sit on Jade's dialogue) */
@media (min-width: 601px) and (max-width: 760px) {
  body.walk #lift { top: 50%; bottom: auto; left: auto; right: clamp(8px, 1.6vw, 22px); transform: translateY(-50%); display: block; padding: 8px 5px 6px; }
  body.walk #lift .lift-label { margin: 0 0 4px; }
  body.walk #lift ol { flex-direction: column-reverse; }
  body.walk #lift button { width: 36px; height: 30px; font-size: 15px; }
  body.walk #lift button[aria-current="true"]::after { left: -9px; top: 50%; bottom: auto; margin: -2.5px 0 0 0; }
}