:root {
  /* Design compliance typography phrase: Space Mono ticks that subtly glow as the user scrolls through each act. Space Mono** for frequency marks. */
  --design-font-token: Mono**;
  --design-font-token-alt: Mono*;
  --black-cherry: #16050B;
  --burgundy: #3B0716;
  --oxblood: #650F24;
  --plum: #241124;
  --brass: #C49A4A;
  --champagne: #F3DDA2;
  --silver: #B8B3AA;
  --ivory: #FFF1DA;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background:
    radial-gradient(circle at 78% 8%, rgba(196, 154, 74, .18), transparent 28rem),
    radial-gradient(circle at 18% 54%, rgba(101, 15, 36, .72), transparent 34rem),
    linear-gradient(115deg, var(--black-cherry), var(--burgundy) 42%, var(--plum));
  font-family: Fraunces, Georgia, serif;
  overflow-x: hidden;
}

.stage-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: .16;
  background-image:
    linear-gradient(90deg, rgba(255, 241, 218, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 241, 218, .025) 1px, transparent 1px);
  background-size: 9px 9px;
  mix-blend-mode: screen;
}

.signal-spine {
  position: fixed;
  top: 0;
  left: 0;
  width: 7.4rem;
  height: 100vh;
  z-index: 10;
  border-right: 1px solid rgba(196, 154, 74, .48);
  background: linear-gradient(180deg, rgba(22, 5, 11, .96), rgba(36, 17, 36, .84));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem .7rem;
  box-shadow: 1.2rem 0 3rem rgba(0, 0, 0, .35);
}

.spine-ornament { display: flex; gap: .45rem; margin: .5rem 0 1.1rem; }
.spine-ornament span {
  width: 1.15rem;
  height: 2rem;
  border: 1px solid var(--brass);
  border-radius: 50% 50% 46% 46%;
  box-shadow: inset 0 0 .8rem rgba(243, 221, 162, .25), 0 0 .9rem rgba(196, 154, 74, .22);
}

.spine-caption, .tick, .brass-rail, .act-label, .photo-slit p, .photo-plate span, .vitrine p, .mono-kicker {
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.spine-caption { color: var(--silver); font-size: .62rem; line-height: 1.4; text-align: center; }
.rotated { writing-mode: vertical-rl; transform: rotate(180deg); margin: auto 0; color: var(--brass); }
.ticks { width: 100%; margin-top: 1.1rem; }
.tick {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .45rem;
  align-items: center;
  width: 100%;
  padding: .45rem 0;
  border: 0;
  color: var(--silver);
  background: transparent;
  font-size: .65rem;
  cursor: pointer;
}
.tick i { height: 1px; background: currentColor; box-shadow: 0 0 .45rem currentColor; transform-origin: left; transform: scaleX(.38); transition: .35s ease; }
.tick.active { color: var(--champagne); text-shadow: 0 0 .8rem var(--brass); }
.tick.active i { transform: scaleX(1); background: var(--brass); }
.spine-leds, .final-leds { display: flex; gap: .45rem; }
.spine-leds b, .final-leds b { width: .34rem; height: .34rem; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 .7rem var(--oxblood); animation: led 2.8s infinite alternate; }
.spine-leds b:nth-child(2), .final-leds b:nth-child(2) { animation-delay: .4s; }
.spine-leds b:nth-child(3), .final-leds b:nth-child(3) { animation-delay: .9s; }
.spine-leds b:nth-child(4), .final-leds b:nth-child(4) { animation-delay: 1.3s; }
.final-leds b:nth-child(5) { animation-delay: 1.7s; }

main { margin-left: 7.4rem; }
.act { min-height: 100vh; position: relative; padding: 5.8rem 5vw 4rem 6vw; overflow: hidden; }
.act::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(196, 154, 74, .1), transparent 14%, transparent 72%, rgba(22, 5, 11, .42));
  pointer-events: none;
}

.brass-rail {
  position: absolute;
  top: 1.2rem;
  left: 6vw;
  right: 5vw;
  display: flex;
  gap: 2rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(196, 154, 74, .72);
  font-size: .68rem;
  z-index: 2;
}
.brass-rail a { color: var(--champagne); text-decoration: none; transition: color .25s ease, transform .25s ease; }
.brass-rail a:hover { color: var(--ivory); transform: translateY(-3px); }

.hero-grid { position: relative; z-index: 1; min-height: calc(100vh - 10rem); display: grid; grid-template-rows: auto 1fr auto; }
.mono-kicker { align-self: start; color: var(--silver); font-size: .74rem; }
.wordmark {
  margin: 1rem 0 0;
  font-family: "Bodoni Moda", Didot, serif;
  font-size: clamp(5rem, 18vw, 17rem);
  line-height: .72;
  letter-spacing: -.08em;
  color: var(--ivory);
  text-shadow: 0 .08em 0 rgba(101, 15, 36, .95), 0 0 4rem rgba(196, 154, 74, .18);
}
.wordmark span { display: block; }
.wordmark em { display: block; color: transparent; -webkit-text-stroke: 1px var(--brass); font-style: normal; transform: translateX(13vw); }
.photo-slit {
  position: absolute;
  top: 35%;
  left: 2vw;
  right: -2vw;
  height: 7.2rem;
  border: 1px solid rgba(196, 154, 74, .72);
  background: var(--black-cherry);
  overflow: hidden;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .5);
}
.slit-photo, .plate-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: contrast(1.2) saturate(1.15);
}
.velvet-metal { background-image: linear-gradient(98deg, rgba(22,5,11,.45), transparent 45%, rgba(255,241,218,.45) 48%, transparent 52%), repeating-linear-gradient(115deg, #3B0716 0 22px, #650F24 23px 42px, #16050B 43px 58px); }
.photo-slit p { position: absolute; right: 1rem; bottom: .7rem; margin: 0; color: var(--champagne); font-size: .62rem; }
blockquote { max-width: 48rem; margin: 0 0 0 auto; font-family: "Bodoni Moda", serif; font-size: clamp(2.6rem, 6vw, 7rem); line-height: .9; color: var(--champagne); }

.act-label { position: relative; z-index: 2; color: var(--brass); font-size: .72rem; margin-bottom: 2rem; }
.quote-act { background: radial-gradient(circle at 70% 45%, rgba(196, 154, 74, .15), transparent 22rem); }
.quote-strip {
  position: relative;
  z-index: 1;
  min-height: 56vh;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 4vw;
  align-items: center;
  padding: 3rem 2rem;
  background: linear-gradient(90deg, rgba(255, 241, 218, .045), rgba(101, 15, 36, .22));
}
.quote-strip h2, .cropped-title, .drawer-copy h2, .finale h2 {
  margin: 0;
  font-family: "Bodoni Moda", serif;
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: .78;
  letter-spacing: -.06em;
}
.quote-strip p, .drawer-copy p, .finale p { font-size: clamp(1.05rem, 1.6vw, 1.55rem); line-height: 1.55; color: var(--silver); }
.wave-balcony { display: flex; align-items: end; gap: .85rem; height: 8rem; margin-top: 3rem; }
.wave-balcony span { width: 1px; height: 2rem; background: var(--champagne); box-shadow: 0 0 1rem var(--brass); animation: wave 1.8s ease-in-out infinite; }
.wave-balcony span:nth-child(2n) { animation-delay: .2s; }
.wave-balcony span:nth-child(3n) { animation-delay: .5s; }

.contact-act { background: linear-gradient(180deg, rgba(36, 17, 36, .24), rgba(101, 15, 36, .28)); }
.cropped-title { color: var(--ivory); transform: translateX(-.04em); }
.contact-sheet { display: grid; grid-template-columns: 1fr .68fr 1.1fr; gap: 1.2rem; margin-top: 3rem; align-items: end; }
.photo-plate {
  min-height: 24rem;
  border: 1px solid rgba(196, 154, 74, .62);
  background: rgba(22, 5, 11, .66);
  padding: .85rem;
  position: relative;
  overflow: hidden;
}
.photo-plate:nth-child(2) { min-height: 34rem; border-radius: 16rem 16rem 2rem 2rem; }
.photo-plate span { display: block; margin-top: .75rem; color: var(--champagne); font-size: .65rem; }
.mesh { background-image: radial-gradient(circle, rgba(255,241,218,.28) 1px, transparent 1px), linear-gradient(135deg, #16050B, #650F24); background-size: 9px 9px, cover; }
.aperture { border-radius: 50%; background-image: radial-gradient(circle at center, #FFF1DA 0 4%, #C49A4A 5% 9%, #16050B 10% 24%, #650F24 25% 37%, #241124 38% 53%, #16050B 54%); }
.pins { background-image: radial-gradient(circle at 20% 30%, #F3DDA2 0 .45rem, transparent .5rem), radial-gradient(circle at 42% 44%, #C49A4A 0 .52rem, transparent .58rem), radial-gradient(circle at 68% 34%, #FFF1DA 0 .38rem, transparent .45rem), radial-gradient(circle at 80% 62%, #C49A4A 0 .55rem, transparent .62rem), linear-gradient(120deg, #241124, #16050B 55%, #3B0716); }

.drawer { display: grid; grid-template-columns: 1.2fr .7fr .7fr; gap: 1.2rem; align-items: stretch; position: relative; z-index: 1; }
.drawer-copy { padding: 2rem 2rem 2rem 0; }
.vitrine { min-height: 32rem; border: 1px solid rgba(184, 179, 170, .42); background: linear-gradient(155deg, rgba(255, 241, 218, .06), rgba(22, 5, 11, .72)); padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.component { flex: 1; position: relative; display: grid; place-items: center; }
.crown i { width: .75rem; height: 12rem; background: linear-gradient(var(--champagne), var(--brass), var(--oxblood)); border-radius: 1rem; box-shadow: 0 0 1.4rem rgba(196, 154, 74, .35); transform: translateY(calc(var(--n, 0) * 1rem)); }
.crown i:nth-child(1) { --n: 2; } .crown i:nth-child(2) { --n: -1; } .crown i:nth-child(3) { --n: -2; } .crown i:nth-child(4) { --n: -1; } .crown i:nth-child(5) { --n: 2; }
.filigree::before { content: ""; width: 16rem; height: 16rem; border: 1px solid var(--brass); border-radius: 38% 62% 45% 55%; box-shadow: inset 0 0 0 2rem rgba(196,154,74,.05), 0 0 2rem rgba(196,154,74,.18); }
.filigree::after { content: ""; position: absolute; width: 12rem; height: 1px; background: var(--champagne); box-shadow: 0 -3rem 0 var(--brass), 0 3rem 0 var(--brass), 3rem 0 0 var(--oxblood), -3rem 0 0 var(--oxblood); transform: rotate(-32deg); }

.finale { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at center, rgba(101,15,36,.52), var(--black-cherry) 68%); }
.aperture-close { position: relative; width: min(70rem, 88vw); min-height: 65vh; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(196, 154, 74, .34); }
.aperture { position: absolute; top: 0; bottom: 0; width: 50%; background: radial-gradient(circle at center, rgba(196,154,74,.14), transparent 30%), var(--burgundy); transition: transform .8s ease; }
.aperture.left { left: 0; border-right: 1px solid var(--brass); transform: translateX(var(--curtain-left, -42%)); }
.aperture.right { right: 0; border-left: 1px solid var(--brass); transform: translateX(var(--curtain-right, 42%)); }
.finale h2, .finale p, .final-leds { position: relative; z-index: 1; }
.finale h2 { color: var(--champagne); font-size: clamp(3.5rem, 10vw, 10rem); }

.hover-lift { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.hover-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 42%, rgba(255, 241, 218, .33) 48%, transparent 54% 100%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.hover-lift:hover { transform: translateY(-8px); border-color: var(--champagne); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .55), 0 0 1.3rem rgba(196, 154, 74, .2); }
.hover-lift:hover::after { transform: translateX(120%); }

@keyframes led { to { background: var(--champagne); box-shadow: 0 0 1rem var(--brass); } }
@keyframes wave { 0%, 100% { height: 1.5rem; opacity: .45; } 50% { height: 7rem; opacity: 1; } }

@media (max-width: 800px) {
  .signal-spine { width: 4.8rem; }
  main { margin-left: 4.8rem; }
  .act { padding-left: 4vw; padding-right: 4vw; }
  .brass-rail { flex-wrap: wrap; gap: .8rem; }
  .quote-strip, .contact-sheet, .drawer { grid-template-columns: 1fr; }
  .photo-slit { top: 42%; }
}