:root {
  /* Compliance tokens from DESIGN.md typography parser: 4** Sans** */
  --mint: #9FF0C8;
  --champagne: #F7C66A;
  --walnut: #6B3F25;
  --cream: #F5E7D0;
  --lacquer: #120B16;
  --coral: #FF5A6E;
  --plum: #3A173A;
  --cobalt: #265CFF;
  --display: "Cormorant Garamond", Georgia, serif;
  --label: "Fraunces", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --work: "Work Sans", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--lacquer); }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 80% 10%, rgba(38,92,255,.26), transparent 28rem),
    radial-gradient(circle at 15% 30%, rgba(255,90,110,.16), transparent 22rem),
    linear-gradient(130deg, #120B16 0%, #231026 48%, #120B16 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .18;
  background-image: radial-gradient(circle, rgba(245,231,208,.8) 0 1px, transparent 1px);
  background-size: 17px 19px; mix-blend-mode: overlay;
}

.lounge-walk { position: relative; z-index: 2; }
.scene {
  position: relative; min-height: 100vh; overflow: hidden; padding: 9vh 7vw;
  isolation: isolate;
}
.scene::before {
  content: attr(data-room); position: absolute; right: 4vw; top: 5vh;
  font: 600 .8rem/1 var(--work); color: rgba(247,198,106,.58); letter-spacing: .22em;
}

.matchbook-nav {
  position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 30;
  display: flex; flex-direction: column; gap: .45rem;
}
.matchbook-nav a {
  color: var(--lacquer); text-decoration: none; font: 700 .62rem/1 var(--label); text-transform: uppercase;
  letter-spacing: .12em; background: linear-gradient(110deg, var(--cream), var(--champagne));
  padding: .7rem .55rem; width: 5.4rem; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 8% 50%);
  box-shadow: 0 0 18px rgba(247,198,106,.25); transition: transform .35s cubic-bezier(.2,1.5,.3,1), background .35s;
}
.matchbook-nav a.is-active, .matchbook-nav a:hover { transform: translateX(-.55rem) rotate(-2deg); background: linear-gradient(110deg, var(--coral), var(--champagne)); }

.floorplan { position: fixed; left: 1.5rem; bottom: 1.5rem; width: 11rem; height: 15rem; z-index: 25; opacity: .92; }
.route-track, .route-line { position: absolute; inset: 0; border-radius: 50% 42% 48% 40%; transform: rotate(-18deg); }
.route-track { border: 1px solid rgba(245,231,208,.22); background: rgba(18,11,22,.45); box-shadow: inset 0 0 24px rgba(38,92,255,.22); }
.route-line { --p: 0%; background: conic-gradient(from 235deg, var(--coral) 0 var(--p), transparent var(--p) 100%); filter: drop-shadow(0 0 9px var(--coral)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.route-dot { position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); left: 45%; top: 2%; transform: translate(-50%, -50%); }

.cropped-wordmark { position: absolute; left: -3vw; top: -3vh; font: 700 clamp(4rem, 16vw, 16rem)/.78 var(--display); letter-spacing: -.06em; color: rgba(245,231,208,.09); white-space: nowrap; }
.lacquer-facade { position: absolute; inset: 0; background: linear-gradient(100deg, #09060b, var(--lacquer) 42%, var(--plum)); z-index: -2; }
.angled-door { position: absolute; left: 44%; top: 8%; width: 38vw; height: 82vh; min-width: 310px; background: linear-gradient(135deg, #2b1728, #070408 52%, var(--walnut)); clip-path: polygon(24% 0,100% 9%,78% 100%,0 88%); box-shadow: -24px 0 50px rgba(38,92,255,.28), inset 0 0 0 2px rgba(247,198,106,.25); transform-origin: 18% 55%; transition: transform .8s cubic-bezier(.17,1.45,.34,1); }
.angled-door.open { transform: perspective(900px) rotateY(-18deg) rotateZ(2deg); }
.door-cutout { position: absolute; inset: 14% 19%; background: linear-gradient(160deg, rgba(255,90,110,.22), transparent), var(--lacquer); clip-path: polygon(42% 0,65% 0,80% 100%,23% 100%); }
.neon-sign { position: absolute; left: 52%; top: 13%; width: 17rem; height: 19rem; transform: rotate(12deg) scale(.92); filter: drop-shadow(0 0 14px var(--coral)); transition: transform .7s cubic-bezier(.18,1.7,.35,1), filter .35s; }
.neon-sign.lit { transform: rotate(8deg) scale(1); filter: drop-shadow(0 0 28px var(--coral)) drop-shadow(0 0 18px var(--cobalt)); }
.ear { position: absolute; top: .5rem; width: 3rem; height: 12rem; border: .55rem solid var(--coral); border-bottom: 0; border-radius: 80% 80% 0 0; }
.ear-left { left: 4.2rem; transform: rotate(-14deg); }.ear-right { right: 4.2rem; transform: rotate(14deg); }
.coupe { position: absolute; left: 3.7rem; bottom: 3.3rem; width: 9.5rem; height: 4.5rem; border: .55rem solid var(--coral); border-top: 0; border-radius: 0 0 8rem 8rem; }
.coupe::after { content: ""; position: absolute; left: 50%; top: 100%; width: .55rem; height: 3.6rem; background: var(--coral); box-shadow: -2.1rem 3.4rem 0 -.06rem var(--coral), 2.1rem 3.4rem 0 -.06rem var(--coral); }
.neon-sign span { position: absolute; bottom: 0; left: 1rem; font: 700 .72rem/1 var(--label); text-transform: uppercase; letter-spacing: .25em; color: var(--champagne); }
.brass-plaque, .menu-board, .mirror-ticket, .napkin, .tiny-stage, .coat-check { position: relative; width: min(35rem, 78vw); padding: 1.4rem 1.7rem; background: linear-gradient(135deg, rgba(245,231,208,.94), rgba(247,198,106,.75)); color: var(--lacquer); box-shadow: 0 24px 60px rgba(0,0,0,.36); }
.door-copy { margin-top: 44vh; transform: rotate(-3deg); clip-path: polygon(0 0,94% 0,100% 18%,92% 100%,4% 94%); }
.ticket-label { display: block; font: 700 .72rem/1 var(--label); text-transform: uppercase; letter-spacing: .22em; color: var(--walnut); margin-bottom: .6rem; }
h1,h2 { margin: 0 0 .75rem; font: 700 clamp(2.5rem, 6vw, 5.7rem)/.88 var(--display); letter-spacing: -.045em; }
.boomerang { position: absolute; width: 18rem; height: 8rem; background: linear-gradient(90deg, var(--coral), var(--champagne)); clip-path: polygon(0 15%,62% 0,100% 35%,42% 48%,78% 100%,12% 76%); opacity: .72; }
.boom-one { right: -4rem; bottom: 8vh; transform: rotate(-20deg); }.boom-two { left: 8vw; bottom: 6vh; transform: rotate(16deg); }

.scene-counter { background: radial-gradient(circle at 55% 55%, rgba(107,63,37,.72), transparent 32rem); }
.counter-curve { position: absolute; right: -16vw; top: 12vh; width: 75vw; height: 74vh; border-radius: 52% 0 0 55%; background: linear-gradient(135deg, var(--walnut), #2b130e 62%, var(--lacquer)); box-shadow: inset 28px 0 0 rgba(247,198,106,.18), 0 0 80px rgba(247,198,106,.1); }
.brass-rail { position: absolute; right: -13vw; top: 18vh; width: 70vw; height: 64vh; border: 3px solid var(--champagne); border-right: 0; border-radius: 52% 0 0 55%; filter: drop-shadow(0 0 13px rgba(247,198,106,.48)); }
.menu-board { margin-left: 8vw; margin-top: 16vh; transform: rotate(2deg); }
.coupe-object { position: absolute; right: 18vw; top: 39vh; width: 12rem; height: 8rem; border-bottom: 1.2rem solid var(--mint); border-radius: 0 0 8rem 8rem; filter: drop-shadow(0 0 22px var(--mint)); }
.coupe-object span { position: absolute; left: 18%; right: 18%; top: 1.7rem; height: .3rem; background: var(--champagne); box-shadow: 0 0 16px var(--champagne); }
.stool { position: absolute; width: 5rem; height: 5rem; border-radius: 50%; background: radial-gradient(circle, var(--plum), #140814); border: 3px solid var(--champagne); bottom: 16vh; }.stool-a { right: 34vw; }.stool-b { right: 20vw; bottom: 9vh; }

.scene-backbar { background: linear-gradient(160deg, var(--plum), var(--lacquer) 56%); }
.mirror-wall { position: absolute; left: 12vw; top: 13vh; width: 62vw; height: 58vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; transform: rotate(-2deg); }
.mirror-wall span { background: linear-gradient(135deg, rgba(38,92,255,.36), rgba(245,231,208,.1), rgba(255,90,110,.18)); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow: inset 0 0 28px rgba(245,231,208,.08); }
.mirror-ticket { margin-left: auto; margin-top: 47vh; transform: rotate(3deg); }
.bottle-shadow { position: absolute; bottom: 14vh; width: 4rem; height: 22rem; border-radius: 2rem 2rem .4rem .4rem; opacity: .55; filter: blur(.3px) drop-shadow(0 0 20px currentColor); }.bottle-shadow.cobalt { left: 20vw; background: var(--cobalt); color: var(--cobalt); }.bottle-shadow.coral { left: 30vw; height: 17rem; background: var(--coral); color: var(--coral); }
.starburst { position: absolute; width: 6rem; height: 6rem; background: var(--champagne); clip-path: polygon(50% 0,58% 36%,100% 50%,58% 64%,50% 100%,42% 64%,0 50%,42% 36%); filter: drop-shadow(0 0 12px var(--champagne)); }.star-a { right: 14vw; top: 19vh; }.star-b { left: 10vw; bottom: 12vh; transform: scale(.55); }

.scene-booth { background: radial-gradient(ellipse at 30% 50%, rgba(58,23,58,.92), transparent 38rem); }
.velvet-booth { position: absolute; left: -8vw; top: 18vh; width: 60vw; height: 62vh; background: linear-gradient(90deg, #241024, var(--plum), #5a2450); border-radius: 0 18rem 18rem 0; box-shadow: inset -18px 0 0 rgba(255,90,110,.12); }
.rope { position: absolute; right: 12vw; top: 22vh; width: 34vw; height: 34vh; border-top: .7rem solid var(--coral); border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 14px var(--coral)); }
.napkin { margin-left: 43vw; margin-top: 28vh; clip-path: polygon(0 0,100% 12%,86% 100%,8% 88%); }
.ear-shadow { position: absolute; width: 5rem; height: 16rem; border-radius: 70% 70% 0 0; background: rgba(18,11,22,.65); bottom: 8vh; }.shadow-a { left: 18vw; transform: rotate(-18deg); }.shadow-b { left: 25vw; transform: rotate(15deg); }
.terrazzo { position: absolute; inset: auto 0 0; height: 16vh; background-image: radial-gradient(circle at 10% 20%, var(--mint) 0 .22rem, transparent .24rem), radial-gradient(circle at 30% 60%, var(--champagne) 0 .18rem, transparent .2rem), radial-gradient(circle at 70% 40%, var(--coral) 0 .2rem, transparent .22rem); opacity: .38; }

.scene-stage { background: linear-gradient(145deg, #0b0710, #2b1027 60%, #130913); }
.stage-light { position: absolute; top: 0; width: 38vw; height: 90vh; background: linear-gradient(to bottom, rgba(247,198,106,.28), transparent); clip-path: polygon(45% 0,58% 0,100% 100%,0 100%); opacity: .7; }.stage-light.left { left: 4vw; transform: rotate(12deg); }.stage-light.right { right: 4vw; transform: rotate(-10deg); background: linear-gradient(to bottom, rgba(38,92,255,.26), transparent); }
.tiny-stage { margin: 13vh auto 0; transform: rotate(-1.5deg); }
.matchbook { display: block; position: relative; margin: 9vh auto; width: 18rem; min-height: 8rem; border: 0; color: var(--lacquer); background: linear-gradient(135deg, var(--coral), var(--champagne)); clip-path: polygon(0 0,100% 8%,90% 100%,8% 90%); box-shadow: 0 0 38px rgba(255,90,110,.35); transform-origin: top left; transition: transform .45s cubic-bezier(.2,1.7,.3,1); cursor: pointer; }
.matchbook.open { transform: rotate(-8deg) translateY(-.6rem); }
.matchbook span { display: block; font: 700 1.7rem/1 var(--display); }.matchbook i { display: block; margin-top: .5rem; font: 600 .72rem/1.2 var(--work); text-transform: uppercase; letter-spacing: .15em; }
.curtain-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 4rem, rgba(255,90,110,.07) 4rem 4.5rem); pointer-events: none; }

.scene-pour { background: radial-gradient(circle at 50% 45%, rgba(159,240,200,.16), transparent 20rem), linear-gradient(180deg, var(--lacquer), #070408); }
.last-glass { position: absolute; left: 12vw; top: 18vh; width: 28rem; height: 32rem; border-bottom: 2rem solid var(--champagne); border-radius: 0 0 18rem 18rem; filter: drop-shadow(0 0 28px rgba(247,198,106,.5)); }
.last-glass::before { content: ""; position: absolute; left: 12%; right: 12%; top: 11rem; height: 1rem; background: linear-gradient(90deg, var(--mint), var(--coral), var(--champagne)); box-shadow: 0 0 25px rgba(159,240,200,.7); }
.final-ears::before, .final-ears::after { content: ""; position: absolute; top: -3rem; width: 5rem; height: 17rem; border: 1rem solid var(--coral); border-bottom: 0; border-radius: 5rem 5rem 0 0; }
.final-ears::before { left: 8rem; transform: rotate(-13deg); }.final-ears::after { right: 8rem; transform: rotate(13deg); }
.coat-check { margin-left: auto; margin-top: 31vh; transform: rotate(2deg); }
.doorbell { position: absolute; right: 8vw; bottom: 10vh; color: var(--champagne); border: 1px solid rgba(247,198,106,.55); padding: 1rem 1.2rem; font: 700 1rem/1 var(--label); text-transform: uppercase; letter-spacing: .22em; box-shadow: inset 0 0 20px rgba(247,198,106,.16), 0 0 20px rgba(247,198,106,.12); }

.spring-item { opacity: .78; transform: translateY(2rem) rotate(var(--r, 0deg)) scale(.985); transition: transform .75s cubic-bezier(.18,1.62,.32,1), opacity .55s; }
.spring-item.in-view { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
.door-copy { --r: -3deg; }.menu-board { --r: 2deg; }.mirror-ticket { --r: 3deg; }.tiny-stage { --r: -1.5deg; }.coat-check { --r: 2deg; }

@keyframes flicker { 0%, 14%, 18%, 22% { opacity: .35; } 12%, 16%, 20%, 26%, 100% { opacity: 1; } }
.neon-sign.lit .ear, .neon-sign.lit .coupe { animation: flicker 1.6s both; }
.coupe-object.in-view, .last-glass.in-view { animation: wobble 1.5s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes wobble { 0% { transform: rotate(0); } 35% { transform: rotate(3deg); } 65% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

@media (max-width: 760px) {
  .matchbook-nav { display: none; }
  .floorplan { width: 7rem; height: 9rem; }
  .scene { padding: 7vh 5vw 16vh; }
  .angled-door { left: 28%; width: 75vw; }
  .neon-sign { left: 24%; top: 16%; transform: scale(.72) rotate(8deg); }
  .door-copy, .menu-board, .mirror-ticket, .napkin, .tiny-stage, .coat-check { margin-left: 0; margin-right: 0; margin-top: 48vh; }
  .counter-curve { width: 110vw; right: -55vw; }
  .mirror-wall { width: 90vw; left: 4vw; }
  .napkin { margin-top: 38vh; }
  .last-glass { width: 18rem; left: 0; opacity: .55; }
}