:root {
  /* Playfair-elegant typography with refined deco contrast: Playfair Display** wordmark glows letter by letter; Inter** only for tiny metadata chips. */
  --gold: #D8A441;
  --vermilion: #E15F3F;
  --apricot: #F6B16A;
  --plum: #241426;
  --copper: #9C4B2E;
  --cream: #F7E4BE;
  --ink: #3B2019;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--plum);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(246, 177, 106, .45), transparent 26rem),
    linear-gradient(180deg, #241426 0%, #3B2019 48%, #9C4B2E 74%, #E15F3F 100%);
  z-index: -5;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(216,164,65,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(247,228,190,.05) 1px, transparent 1px);
  background-size: 5.5rem 100%, 100% 3rem;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -4;
}

.city-glow {
  position: fixed;
  left: 50%;
  top: 0;
  width: min(22vw, 18rem);
  height: 100vh;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(216,164,65,.38), rgba(246,177,106,.5), rgba(216,164,65,.38), transparent);
  filter: blur(10px);
  opacity: .68;
  pointer-events: none;
  z-index: -3;
}

.sunburst {
  position: fixed;
  top: -10rem;
  left: 50%;
  width: 42rem;
  height: 42rem;
  margin-left: -21rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(216,164,65,.46) 0deg 6deg, transparent 6deg 13deg);
  mask: radial-gradient(circle, transparent 0 16%, #000 17% 62%, transparent 63%);
  animation: rotateBurst 30s linear infinite;
  z-index: -2;
}

.sunburst span {
  position: absolute;
  inset: 25%;
  border: 1px solid rgba(247,228,190,.45);
  border-radius: 50%;
  box-shadow: 0 0 5rem rgba(225,95,63,.4);
}

.skyline {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 100vh;
  width: 24vw;
  pointer-events: none;
  z-index: -1;
}
.skyline-left { left: 0; justify-content: flex-start; }
.skyline-right { right: 0; justify-content: flex-end; }
.skyline i {
  display: block;
  width: 4.2vw;
  min-width: 3rem;
  background:
    linear-gradient(90deg, transparent 45%, rgba(216,164,65,.45) 46% 48%, transparent 49%),
    repeating-linear-gradient(180deg, rgba(246,177,106,.38) 0 .45rem, transparent .45rem 1.4rem),
    linear-gradient(180deg, rgba(59,32,25,.92), rgba(36,20,38,.96));
  border: 1px solid rgba(216,164,65,.32);
  clip-path: polygon(0 10%, 25% 10%, 25% 0, 75% 0, 75% 10%, 100% 10%, 100% 100%, 0 100%);
}
.skyline i:nth-child(1) { height: 58vh; }
.skyline i:nth-child(2) { height: 76vh; }
.skyline i:nth-child(3) { height: 48vh; }
.skyline i:nth-child(4) { height: 68vh; }
.skyline i:nth-child(5) { height: 39vh; }

.elevator-nav {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .55rem;
  padding: .6rem;
  border: 1px solid rgba(216,164,65,.7);
  background: linear-gradient(180deg, rgba(59,32,25,.85), rgba(36,20,38,.84));
  box-shadow: 0 0 1.8rem rgba(216,164,65,.2);
}
.elevator-nav a {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--gold);
  text-decoration: none;
  font: 700 .74rem/1 "Cinzel", serif;
  border: 1px solid rgba(247,228,190,.36);
  background: rgba(36,20,38,.68);
  transition: background .3s, color .3s, transform .3s;
}
.elevator-nav a.active,
.elevator-nav a:hover { background: var(--gold); color: var(--plum); transform: scale(1.08); }

.boulevard {
  position: relative;
  min-height: 100vh;
}
.boulevard::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 1.7rem var(--apricot);
  z-index: 1;
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: 8rem clamp(1.5rem, 8vw, 8rem);
  display: grid;
  align-content: center;
  overflow: hidden;
}
.scene::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 12rem;
  background: linear-gradient(135deg, transparent 48%, rgba(216,164,65,.3) 49%, transparent 51%), repeating-linear-gradient(90deg, rgba(247,228,190,.12) 0 .5rem, transparent .5rem 1.4rem);
  transform: perspective(18rem) rotateX(62deg);
  transform-origin: bottom;
  opacity: .55;
}

.route-marker, .scene-plaque, .stub-label, .poster-kicker, .verdict-kicker {
  font-family: "Cinzel", Times, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.route-marker { text-align: center; font-size: .88rem; }

.hero-scene { text-align: center; }
.wordmark {
  position: relative;
  margin: .5rem auto 1.2rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(4rem, 13vw, 13rem);
  line-height: .82;
  letter-spacing: .025em;
  color: var(--cream);
  text-shadow: 0 0 .3rem var(--cream), 0 0 1.4rem var(--gold), 0 0 4rem var(--vermilion);
}
.wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em) scale(.96);
  animation: letterGlow .9s forwards;
}
.marquee-board {
  width: min(68rem, 86vw);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: clamp(.5rem, 3vw, 2rem);
  flex-wrap: wrap;
  border: 2px solid var(--gold);
  outline: 1px solid rgba(247,228,190,.35);
  outline-offset: .5rem;
  background: rgba(59,32,25,.74);
  box-shadow: inset 0 0 2.5rem rgba(225,95,63,.3), 0 0 3rem rgba(216,164,65,.25);
}
.marquee-board span {
  font-family: "Cinzel", serif;
  color: var(--apricot);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(.75rem, 1.6vw, 1rem);
}
.hero-copy {
  width: min(38rem, 80vw);
  margin: 2rem auto 0;
  color: var(--cream);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  line-height: 1.45;
}
.deco-tower { position: absolute; bottom: 0; width: 12vw; height: 70vh; border: 1px solid rgba(216,164,65,.45); background: linear-gradient(180deg, rgba(36,20,38,.1), rgba(59,32,25,.82)); }
.tower-a { left: 8vw; clip-path: polygon(15% 0, 85% 0, 85% 8%, 100% 8%, 100% 100%, 0 100%, 0 8%, 15% 8%); }
.tower-b { right: 8vw; height: 58vh; clip-path: polygon(30% 0, 70% 0, 70% 14%, 100% 14%, 100% 100%, 0 100%, 0 14%, 30% 14%); }
.taxi-line { position: absolute; bottom: 5rem; left: -30vw; width: 28vw; height: 3px; background: linear-gradient(90deg, transparent, var(--apricot), var(--gold)); box-shadow: 0 0 1rem var(--apricot); animation: taxi 4s ease-in-out infinite; }

.scene-plaque {
  justify-self: start;
  padding: .7rem 1rem;
  margin-bottom: 2rem;
  border: 1px solid var(--gold);
  background: rgba(59,32,25,.78);
  font-size: .78rem;
}
.lobby-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.2fr) .6fr minmax(14rem, .8fr);
  gap: 2rem;
  align-items: end;
}
.ticket-stub, .brass-directory, .tram-poster, .verdict {
  color: var(--ink);
  background: linear-gradient(135deg, var(--cream), #F6B16A);
  border: 2px solid var(--gold);
  box-shadow: 1rem 1rem 0 rgba(59,32,25,.42), inset 0 0 0 .45rem rgba(216,164,65,.18);
}
.ticket-stub { padding: clamp(1.4rem, 4vw, 3rem); clip-path: polygon(0 0, 90% 0, 100% 12%, 100% 100%, 10% 100%, 0 88%); }
.ticket-stub h2, .tram-poster h2, .verdict h2 { margin: .25rem 0 1rem; font-family: "Playfair Display", serif; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: .92; color: var(--plum); }
.ticket-stub p, .tram-poster p, .verdict p { font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.35; }
.doorman { justify-self: center; width: 9rem; height: 24rem; position: relative; }
.doorman .hat { position: absolute; left: 2.2rem; top: 0; width: 4.6rem; height: 2.4rem; background: var(--gold); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.doorman .face { position: absolute; left: 2.7rem; top: 2.2rem; width: 3.6rem; height: 4rem; border-radius: 50% 50% 45% 45%; background: var(--apricot); }
.doorman .coat { position: absolute; left: .8rem; top: 6rem; width: 7.4rem; height: 17rem; background: linear-gradient(90deg, var(--plum), var(--copper)); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); border: 1px solid var(--gold); }
.doorman .ledger { position: absolute; right: -.8rem; top: 10rem; width: 3.8rem; height: 5.5rem; background: var(--cream); border: 2px solid var(--gold); transform: rotate(-10deg); }
.brass-directory { padding: 1.5rem; background: linear-gradient(180deg, var(--gold), var(--copper)); color: var(--cream); }
.brass-directory h3 { font: 700 1.4rem "Cinzel", serif; letter-spacing: .16em; text-transform: uppercase; }
.brass-directory ol { list-style: none; padding: 0; margin: 0; }
.brass-directory li { display: flex; gap: 1rem; justify-content: space-between; padding: .8rem 0; border-top: 1px solid rgba(247,228,190,.35); font-size: 1.4rem; }

.balcony-scene { padding-top: 6rem; }
.balcony-rail { position: absolute; top: 8rem; left: 8%; right: 8%; height: 4rem; border-top: 4px solid var(--gold); border-bottom: 1px solid var(--gold); background: repeating-radial-gradient(ellipse at center, transparent 0 1.2rem, rgba(216,164,65,.6) 1.25rem 1.32rem); }
.window-wall { margin-top: 5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.review-window {
  min-height: 20rem;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  text-align: center;
  color: var(--cream);
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(246,177,106,.42), rgba(36,20,38,.72));
  box-shadow: inset 0 0 2.2rem rgba(216,164,65,.2);
}
.review-window span { font-size: clamp(1.35rem, 2vw, 2rem); font-style: italic; }
.pull-quote { width: min(54rem, 86vw); margin: 3rem auto 0; font: 700 clamp(2.4rem, 6vw, 6rem)/.95 "Playfair Display", serif; color: var(--cream); text-align: center; text-shadow: 0 0 2rem rgba(225,95,63,.7); }

.alley-scene { grid-template-columns: minmax(18rem, 36rem) 1fr; gap: 4rem; align-items: center; }
.alley-scene .scene-plaque { grid-column: 1 / -1; }
.tram-poster { padding: clamp(1.5rem, 4vw, 3rem); transform: rotate(-2deg); }
.quote-ribbons { display: grid; gap: 1.2rem; }
.ribbon { position: relative; width: max-content; max-width: min(38rem, 84vw); margin: 0; padding: 1rem 1.4rem; color: var(--cream); font-size: clamp(1.4rem, 3vw, 2.4rem); background: rgba(59,32,25,.76); border: 1px solid var(--gold); box-shadow: 0 0 1.6rem rgba(246,177,106,.18); }
.ribbon:nth-child(2) { margin-left: 4rem; color: var(--apricot); }
.ribbon:nth-child(3) { margin-left: 1.5rem; }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 50%; width: 2rem; height: 1px; background: var(--gold); }
.ribbon::before { right: 100%; } .ribbon::after { left: 100%; }

.rooftop-scene { justify-items: center; text-align: center; }
.water-tower { position: absolute; top: 8rem; right: 14vw; width: 8rem; height: 12rem; border: 2px solid var(--gold); border-radius: 50% 50% 8% 8%; background: rgba(59,32,25,.74); box-shadow: 0 4rem 0 -3.6rem var(--gold); }
.verdict { width: min(56rem, 86vw); padding: clamp(1.5rem, 5vw, 4rem); }
.guestbook { display: inline-block; margin-top: 1rem; padding: .9rem 1.4rem; color: var(--plum); text-decoration: none; font: 700 .8rem "Cinzel", serif; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--plum); background: var(--gold); }
.star-drop { margin-top: 2rem; color: var(--gold); font-size: 6rem; text-shadow: 0 0 2rem var(--apricot); transform: translateY(-2rem) rotate(-12deg); animation: starPulse 2.6s ease-in-out infinite; }

.revealable { opacity: 0; transform: translateY(3rem); transition: opacity .9s ease, transform .9s ease; }
.revealable.in-view { opacity: 1; transform: translateY(0); }

@keyframes rotateBurst { to { transform: rotate(360deg); } }
@keyframes letterGlow { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes taxi { 0% { left: -35vw; opacity: 0; } 15%, 70% { opacity: 1; } 100% { left: 110vw; opacity: 0; } }
@keyframes starPulse { 0%, 100% { filter: brightness(1); transform: translateY(-1rem) rotate(-12deg) scale(1); } 50% { filter: brightness(1.4); transform: translateY(0) rotate(8deg) scale(1.1); } }

@media (max-width: 900px) {
  .scene { padding: 6rem 1.4rem; }
  .elevator-nav { right: .4rem; }
  .lobby-grid, .alley-scene { grid-template-columns: 1fr; }
  .doorman { display: none; }
  .window-wall { grid-template-columns: 1fr 1fr; }
  .review-window { min-height: 13rem; }
  .deco-tower, .skyline { opacity: .35; }
}

@media (max-width: 560px) {
  .window-wall { grid-template-columns: 1fr; }
  .marquee-board { outline-offset: .25rem; }
  .ribbon:nth-child(2), .ribbon:nth-child(3) { margin-left: 0; }
}