:root {
  --midnight: #09070D;
  --plum: #2A1028;
  --garnet: #8F1D3D;
  --rose: #F0A7B8;
  --brass: #D7B46A;
  --cream: #F7E8C8;
  --absinthe: #A7C957;
  --blue: #171D3A;
  --title: Bodoni 72, Didot, Georgia, serif;
  --jp: Hiragino Mincho ProN, Yu Mincho, serif;
  --grotesque: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --whisper: Cormorant Garamond, Garamond, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--cream);
  font-family: var(--grotesque);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 30% 20%, rgba(240,167,184,.16), transparent 22%),
    radial-gradient(circle at 72% 44%, rgba(215,180,106,.11), transparent 24%),
    repeating-linear-gradient(90deg, rgba(247,232,200,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.stage-light {
  position: fixed;
  inset: -20% -10%;
  pointer-events: none;
  z-index: 2;
  opacity: .62;
  background: radial-gradient(ellipse at 50% 0%, rgba(215,180,106,.22), transparent 48%);
  transform: translate3d(0, var(--light-y, 0px), 0);
}

.program-spine {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 9px;
  border: 1px solid rgba(215,180,106,.55);
  background: linear-gradient(180deg, rgba(9,7,13,.86), rgba(42,16,40,.74));
  box-shadow: 0 0 30px rgba(0,0,0,.55), inset 0 0 24px rgba(215,180,106,.08);
}
.spine-mark {
  color: rgba(247,232,200,.58);
  text-decoration: none;
  writing-mode: vertical-rl;
  letter-spacing: .14em;
  font-size: 10px;
  text-transform: uppercase;
  transition: color .35s, text-shadow .35s;
}
.spine-mark span { color: var(--brass); font-family: var(--jp); margin-bottom: 5px; }
.spine-mark.active { color: var(--cream); text-shadow: 0 0 12px var(--rose); }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(70px, 8vw, 120px) clamp(24px, 6vw, 90px) clamp(60px, 7vw, 100px) clamp(64px, 9vw, 140px);
}
.room::after {
  content: attr(data-room);
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: rgba(215,180,106,.23);
  font-family: var(--jp);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: 11px;
}
.room-heading { position: relative; z-index: 5; max-width: 780px; }
.room-number { color: var(--absinthe); font-family: var(--jp); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; }
h1, h2, h3 { font-family: var(--title); font-weight: 500; margin: 0; }
h2 { font-size: clamp(48px, 8vw, 116px); line-height: .86; color: var(--cream); text-shadow: 0 0 22px rgba(240,167,184,.18); }
.room-heading p, .usher-note, .pen-note { font-family: var(--whisper); font-style: italic; font-size: clamp(18px, 2vw, 28px); color: rgba(247,232,200,.78); }

.marquee-room {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top, var(--blue), transparent 46%), linear-gradient(155deg, var(--midnight), var(--plum) 55%, var(--midnight));
}
.velvet-fall { position: absolute; top: 0; bottom: 0; width: 25vw; z-index: 3; background: repeating-linear-gradient(90deg, #180713 0 18px, var(--garnet) 19px 24px, #2b0b21 25px 44px); filter: drop-shadow(0 0 28px #000); transition: transform 1.6s cubic-bezier(.2,.7,.05,1); }
.velvet-fall.left { left: 0; transform: translateX(var(--curtain-left, -82%)); }
.velvet-fall.right { right: 0; transform: translateX(var(--curtain-right, 82%)); }
.fan-rays { position: absolute; width: min(94vw, 980px); aspect-ratio: 1.8; top: 7vh; left: 50%; transform: translateX(-50%); transform-origin: bottom center; opacity: .9; }
.fan-rays i { position: absolute; bottom: 0; left: 50%; width: 2px; height: 100%; background: linear-gradient(var(--brass), transparent); transform-origin: bottom; opacity: 0; animation: rayIgnite 1.8s forwards; box-shadow: 0 0 18px var(--brass); }
.fan-rays i:nth-child(1){ transform: rotate(-56deg); animation-delay:.15s}.fan-rays i:nth-child(2){ transform: rotate(-42deg); animation-delay:.28s}.fan-rays i:nth-child(3){ transform: rotate(-28deg); animation-delay:.42s}.fan-rays i:nth-child(4){ transform: rotate(-14deg); animation-delay:.55s}.fan-rays i:nth-child(5){ transform: rotate(0deg); animation-delay:.7s}.fan-rays i:nth-child(6){ transform: rotate(14deg); animation-delay:.86s}.fan-rays i:nth-child(7){ transform: rotate(28deg); animation-delay:1s}.fan-rays i:nth-child(8){ transform: rotate(42deg); animation-delay:1.16s}.fan-rays i:nth-child(9){ transform: rotate(56deg); animation-delay:1.32s}
@keyframes rayIgnite { to { opacity: .92; } }
.rose-reflection { position: absolute; width: 38vw; height: 18vh; border-radius: 50%; background: linear-gradient(100deg, transparent, rgba(240,167,184,.2), transparent); filter: blur(8px); animation: drift 9s infinite alternate ease-in-out; }
.r1 { top: 18%; left: -8%; transform: rotate(-18deg); }.r2 { bottom: 18%; right: -10%; transform: rotate(20deg); animation-delay: -4s; }
@keyframes drift { to { translate: 9vw -3vh; opacity: .42; } }
.marquee-frame { position: relative; z-index: 6; width: min(890px, 88vw); min-height: 54vh; display: grid; place-items: center; text-align: center; padding: clamp(34px, 5vw, 70px); border: 3px double var(--brass); background: radial-gradient(circle at center, rgba(143,29,61,.28), rgba(9,7,13,.84) 65%); box-shadow: 0 0 0 11px rgba(215,180,106,.08), inset 0 0 70px rgba(0,0,0,.8), 0 26px 90px #000; }
.jp-label { font-family: var(--jp); color: var(--rose); letter-spacing: .42em; margin: 0; }
.marquee-title { font-size: clamp(58px, 11vw, 152px); line-height: .78; color: var(--cream); text-shadow: 0 0 6px var(--cream), 0 0 30px var(--brass), 4px 6px 0 var(--garnet); animation: titleGlow 4s infinite alternate; }
@keyframes titleGlow { to { text-shadow: 0 0 10px var(--cream), 0 0 44px var(--rose), 4px 6px 0 var(--garnet); } }
.subtitle { font-family: var(--whisper); font-style: italic; font-size: clamp(20px, 3vw, 36px); color: var(--brass); }
.bulb-border { position:absolute; inset: 12px; border: 1px solid rgba(215,180,106,.55); background-image: radial-gradient(circle, var(--brass) 0 3px, transparent 4px); background-size: 34px 34px; mask: linear-gradient(#000 0 0) top/100% 8px no-repeat, linear-gradient(#000 0 0) bottom/100% 8px no-repeat, linear-gradient(#000 0 0) left/8px 100% no-repeat, linear-gradient(#000 0 0) right/8px 100% no-repeat; animation: bulbs 1.7s steps(2) infinite; }
@keyframes bulbs { 50% { filter: brightness(.45); } }
.usher-note { position: absolute; z-index: 7; bottom: 8vh; max-width: 520px; text-align:center; }

.ticket-room { background: linear-gradient(180deg, var(--midnight), var(--blue) 52%, var(--plum)); perspective: 1200px; }
.diagonal-heading { transform: rotate(-3deg); margin-left: 5vw; }
.ticket-hangers { position: relative; height: 64vh; margin-top: -4vh; display: flex; align-items: flex-start; justify-content: space-around; gap: 18px; transform-style: preserve-3d; }
.ticket-strip { --sway: 4deg; position: relative; width: clamp(116px, 13vw, 178px); min-height: 430px; padding: 66px 18px 24px; color: var(--midnight); background: linear-gradient(var(--cream), #e8cf91); border: 2px solid var(--brass); clip-path: polygon(0 0,100% 0,100% 100%,53% 96%,0 100%); box-shadow: 0 24px 45px rgba(0,0,0,.52); transform-origin: top center; animation: sway 4.8s infinite ease-in-out alternate; cursor: pointer; }
.ticket-strip::before { content:""; position:absolute; top:0; left:0; right:0; height:42px; background: radial-gradient(circle, var(--midnight) 0 5px, transparent 6px) 0 50%/20px 20px repeat-x; opacity:.75; }
.ticket-strip span { writing-mode: vertical-rl; font-family: var(--title); font-size: 40px; color: var(--garnet); line-height: 1; }
.ticket-strip b { position:absolute; right:16px; bottom:24px; color: var(--brass); font-family: var(--jp); font-size: 44px; }
.ticket-strip p { font-size: 12px; letter-spacing:.08em; text-transform:uppercase; }
.depth-a { transform: translateZ(120px) rotate(2deg); animation-delay: -.5s; }.depth-b { transform: translateZ(-80px) rotate(-4deg); margin-top: 7vh; animation-delay:-1.3s; }.depth-c { transform: translateZ(40px) rotate(5deg); margin-top: 13vh; animation-delay:-2.2s; }
@keyframes sway { to { rotate: var(--sway); } }
.critic-note { position:absolute; right:8vw; bottom:9vh; max-width:420px; padding:20px 24px; border:1px solid var(--brass); background:rgba(9,7,13,.74); color:var(--cream); font-family:var(--whisper); font-size:24px; font-style:italic; box-shadow:inset 0 0 28px rgba(215,180,106,.09); }

.evidence-room { background: radial-gradient(ellipse at 70% 20%, rgba(240,167,184,.14), transparent 35%), linear-gradient(145deg, var(--plum), var(--midnight) 70%); }
.tabletop { position: relative; min-height: 78vh; transform: rotateX(8deg) rotateZ(-3deg); border: 2px solid rgba(215,180,106,.4); background: linear-gradient(135deg, rgba(247,232,200,.08), rgba(23,29,58,.42)), repeating-linear-gradient(90deg, transparent 0 54px, rgba(215,180,106,.08) 55px 56px); box-shadow: inset 0 0 100px rgba(0,0,0,.65), 0 35px 90px #000; padding: 56px; }
.evidence-heading { transform: rotateZ(3deg); }
.perfume-bottle { position:absolute; width:150px; height:250px; text-align:center; cursor:pointer; }
.bottle-one { right:20%; top:18%; }.bottle-two { right:8%; bottom:14%; transform: scale(.86) rotate(9deg); }
.stopper { width:56px; height:34px; margin:auto; background:linear-gradient(90deg, var(--brass), var(--cream), var(--brass)); border-radius:8px 8px 2px 2px; }
.bottle-glass { height:180px; border:2px solid rgba(240,167,184,.8); border-radius:26px 26px 50px 50px; background:linear-gradient(120deg, rgba(240,167,184,.2), rgba(247,232,200,.04)); box-shadow: inset 12px 0 25px rgba(247,232,200,.12), 0 0 28px rgba(240,167,184,.18); }
.perfume-bottle span { color:var(--brass); font-family:var(--title); font-size:28px; }
.vapor-phrase { position:absolute; right:22%; top:10%; max-width:300px; color:var(--rose); font-family:var(--whisper); font-style:italic; font-size:24px; opacity:.8; filter:blur(.1px); transition: opacity .4s, transform .4s; }
.vapor-phrase.bloom { animation: vaporBloom 1.6s ease-out; }
@keyframes vaporBloom { 0%{opacity:0; transform:translateY(18px) scale(.9); filter:blur(8px)} 45%{opacity:1; filter:blur(0)} 100%{opacity:.75; transform:translateY(-14px) scale(1.04); filter:blur(2px)} }
.blotter-card { position:absolute; left:12%; bottom:12%; width:min(430px, 42vw); padding:32px; color:var(--midnight); background:var(--cream); box-shadow:0 18px 40px rgba(0,0,0,.45); transform:rotate(5deg); }
.pin { position:absolute; right:20px; top:16px; width:18px; height:18px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 6px rgba(215,180,106,.25); }
.blotter-card h3 { color:var(--garnet); font-size:34px; }.blotter-card p { font-family:var(--whisper); font-style:italic; font-size:24px; }
.matchbook { position:absolute; left:50%; bottom:18%; width:150px; height:95px; padding:18px; background:var(--garnet); color:var(--cream); transform:rotate(-12deg); border:1px solid var(--brass); text-transform:uppercase; letter-spacing:.14em; }
.matchbook em { display:block; color:var(--brass); margin-top:12px; font-family:var(--whisper); text-transform:none; }
.wax-seal { position:absolute; left:46%; top:42%; width:115px; height:115px; border:0; border-radius:50%; background:radial-gradient(circle, #c03051, var(--garnet)); color:var(--cream); font-family:var(--title); font-size:27px; box-shadow:0 9px 0 #5d0d25, 0 0 30px rgba(143,29,61,.7); cursor:pointer; transition:transform .25s, filter .25s; }
.wax-seal.pressed { transform:translateY(7px) scale(.95); filter:saturate(1.4); }
.pen-note { position:absolute; left:49%; top:60%; width:360px; border-bottom:2px solid var(--brass); transform:rotate(2deg); }

.balcony-room { background: radial-gradient(ellipse at 50% 0, rgba(215,180,106,.17), transparent 44%), linear-gradient(180deg, var(--blue), var(--midnight)); }
.balcony-arch { position:absolute; left:-10%; right:-10%; bottom:8%; height:42vh; border-radius:50% 50% 0 0; border-top:18px solid var(--brass); background:linear-gradient(180deg, rgba(42,16,40,.2), rgba(9,7,13,.96)); box-shadow:0 -24px 60px rgba(0,0,0,.7); }
.balcony-heading { margin-left:auto; text-align:right; }
.verdict-rail { position:relative; z-index:5; display:grid; grid-template-columns:repeat(4, minmax(150px,1fr)); gap:22px; margin-top:15vh; }
.verdict { min-height:260px; padding:28px; border:1px solid rgba(215,180,106,.48); background:linear-gradient(180deg, rgba(247,232,200,.08), rgba(42,16,40,.75)); box-shadow:inset 0 0 40px rgba(215,180,106,.06), 0 24px 55px rgba(0,0,0,.45); transform:translateY(var(--lift,0)); transition:transform .35s, box-shadow .35s; }
.verdict:hover { transform:translateY(-16px); box-shadow:0 0 40px rgba(240,167,184,.22); }
.verdict h3 { font-size:42px; color:var(--brass); }.verdict p { color:rgba(247,232,200,.72); font-family:var(--whisper); font-style:italic; font-size:20px; }
.opera-glasses { width:120px; height:58px; margin-bottom:28px; background:radial-gradient(circle at 30% 50%, transparent 0 24px, var(--brass) 25px 31px, transparent 32px), radial-gradient(circle at 70% 50%, transparent 0 24px, var(--brass) 25px 31px, transparent 32px); border-bottom:8px solid var(--brass); }
.moon-phase { width:82px; height:82px; border-radius:50%; background:radial-gradient(circle at 64% 50%, var(--midnight) 0 34px, transparent 35px), var(--cream); box-shadow:0 0 24px var(--cream); margin-bottom:28px; }
.lip-seal { width:96px; height:56px; border-radius:60% 45% 60% 45%; background:var(--rose); color:var(--garnet); display:grid; place-items:center; font-family:var(--title); transform:rotate(-9deg); margin-bottom:36px; }
.seat-number { width:90px; height:90px; border:2px solid var(--brass); border-radius:12px; display:grid; place-items:center; color:var(--absinthe); font-size:26px; box-shadow:inset 0 0 25px rgba(167,201,87,.15); margin-bottom:28px; }

.archive-room { background:linear-gradient(90deg, var(--garnet), var(--plum) 18%, var(--midnight) 50%, var(--plum) 82%, var(--garnet)); }
.curtain { position:absolute; top:0; bottom:0; width:52%; z-index:4; background:repeating-linear-gradient(90deg, #360819 0 20px, var(--garnet) 21px 32px, #180713 33px 58px); box-shadow:inset 0 0 70px #000; transition:transform 1.2s cubic-bezier(.22,.8,.18,1); }
.curtain-left { left:0; transform:translateX(var(--archive-left, -38%)); }.curtain-right { right:0; transform:translateX(var(--archive-right, 38%)); }
.archive-wall { position:relative; z-index:5; min-height:75vh; padding:44px; border:2px double var(--brass); background:rgba(9,7,13,.72); box-shadow:inset 0 0 80px rgba(215,180,106,.08); }
.plaque-wall { display:grid; grid-template-columns:repeat(3, minmax(180px,1fr)); gap:22px; margin-top:48px; }
.plaque { position:relative; min-height:150px; padding:24px; border:1px solid var(--brass); background:linear-gradient(135deg, rgba(215,180,106,.16), rgba(23,29,58,.38)); overflow:hidden; }
.plaque::after { content:""; position:absolute; inset:0; translate:-120% 0; background:linear-gradient(100deg, transparent, rgba(240,167,184,.22), transparent); animation: shimmer 5s infinite; }
.plaque:nth-child(2n)::after { animation-delay:-2s; }
@keyframes shimmer { 45%,100% { translate:120% 0; } }
.plaque span { color:var(--absinthe); font-size:12px; letter-spacing:.2em; }.plaque b { display:block; color:var(--brass); font-family:var(--title); font-size:32px; margin:8px 0; }.plaque p { margin:0; font-family:var(--whisper); font-style:italic; color:rgba(247,232,200,.75); font-size:20px; }
.program-button { display:inline-block; margin-top:34px; padding:14px 22px; color:var(--midnight); background:var(--cream); border:1px solid var(--brass); text-decoration:none; text-transform:uppercase; letter-spacing:.16em; font-size:12px; box-shadow:5px 5px 0 var(--brass); }

@media (max-width: 850px) {
  .program-spine { left: 6px; }
  .room { padding-left: 48px; }
  .ticket-hangers { overflow-x: auto; justify-content: flex-start; }
  .ticket-strip { flex: 0 0 138px; }
  .tabletop { transform: none; min-height: 920px; padding: 28px; }
  .blotter-card { width: 72vw; left: 8%; }
  .perfume-bottle { right: 8%; }
  .matchbook, .wax-seal, .pen-note { left: 14%; }
  .verdict-rail, .plaque-wall { grid-template-columns: 1fr; }
  .balcony-heading { text-align: left; }
}