:root {
  /* Compliance tokens from DESIGN.md typography parser: Condensed* Condensed** 500/700 labels */
  --violet-chrome: #7B3FF2;
  --black-cherry: #210711;
  --subway-teal: #1BB6A9;
  --lipstick-red: #E83E66;
  --brass-flash: #D6A84F;
  --champagne-paper: #F8E7C6;
  --taxi-amber: #FFB000;
  --velvet-burgundy: #4B0D22;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --serif: "Libre Baskerville", Lora, Georgia, serif;
  --utility: "IBM Plex Sans Condensed", Inter, Arial, sans-serif;
  --font-parser-token: Condense;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--champagne-paper);
  background:
    radial-gradient(circle at 20% 12%, rgba(232, 62, 102, .22), transparent 24rem),
    radial-gradient(circle at 83% 18%, rgba(123, 63, 242, .24), transparent 22rem),
    linear-gradient(125deg, var(--black-cherry), var(--velvet-burgundy) 48%, #320817 100%);
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(30deg, transparent 46%, rgba(214, 168, 79, .45) 47%, transparent 49%),
    radial-gradient(circle, rgba(248, 231, 198, .18) 1px, transparent 1px);
  background-size: 128px 74px, 13px 13px;
  mix-blend-mode: screen;
}

.city-glow {
  position: fixed;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 176, 0, .18), rgba(123, 63, 242, .08) 38%, transparent 70%);
  pointer-events: none;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.evening-map { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(214, 168, 79, .28);
}

.chapter::after {
  content: attr(data-chapter);
  position: absolute;
  right: -1rem;
  bottom: 1.5rem;
  font-family: var(--utility);
  font-size: clamp(3rem, 13vw, 13rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 168, 79, .18);
  letter-spacing: -.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.hex-field,
.hex-scene,
.mirror-grid,
.final-map {
  display: grid;
  grid-template-columns: repeat(8, minmax(72px, 1fr));
  grid-auto-rows: 82px;
  gap: 12px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hex {
  border: 2px solid var(--brass-flash);
  color: var(--champagne-paper);
  background:
    linear-gradient(145deg, rgba(248, 231, 198, .06), transparent 40%),
    var(--velvet-burgundy);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  box-shadow: inset 0 0 25px rgba(33, 7, 17, .8), 0 12px 35px rgba(33, 7, 17, .42);
  min-width: 0;
  cursor: pointer;
  transition: transform .24s ease, filter .24s ease, background .24s ease;
  font: inherit;
  position: relative;
  padding: 1rem;
}

.hex:hover,
.hex.open {
  transform: translateY(-8px) rotate(-1.5deg) scale(1.035);
  filter: drop-shadow(0 0 18px rgba(255, 176, 0, .35));
  background: linear-gradient(145deg, rgba(232, 62, 102, .28), rgba(75, 13, 34, .98));
}

.hex span,
.hex strong,
.hex small,
.hex em,
.hex p,
.hex b { position: relative; z-index: 1; }

.token {
  display: grid;
  place-items: center;
  font-family: var(--utility);
  text-transform: uppercase;
  color: var(--brass-flash);
  animation: pulsePin 2.1s ease-in-out infinite;
}

.token span { font-size: 2.5rem; line-height: 1; }
.token em,
.mini em,
.charm em { font-style: normal; font-size: .7rem; letter-spacing: .09em; color: var(--champagne-paper); }

.phone { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.receipt { grid-column: 7 / span 2; grid-row: 1 / span 2; background-color: #6c102b; }
.subway { grid-column: 7 / span 2; grid-row: 5 / span 2; border-color: var(--subway-teal); color: var(--subway-teal); }
.lipstick { grid-column: 2 / span 2; grid-row: 6 / span 2; border-color: var(--lipstick-red); color: var(--lipstick-red); }
.martini { grid-column: 5 / span 2; grid-row: 7 / span 2; border-color: var(--taxi-amber); color: var(--taxi-amber); }

.wordmark-a,
.wordmark-b,
.wordmark-c {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(4.4rem, 11vw, 10rem);
  line-height: .75;
  letter-spacing: -.07em;
  text-shadow: 0 4px 0 var(--black-cherry), 0 0 34px rgba(214, 168, 79, .27);
}

.wordmark-a { grid-column: 2 / span 4; grid-row: 1 / span 3; }
.wordmark-b { grid-column: 4 / span 4; grid-row: 3 / span 3; background: #5b0f28; }
.wordmark-c { grid-column: 1 / span 4; grid-row: 4 / span 3; border-color: var(--lipstick-red); }

.big-note {
  grid-column: 4 / span 3;
  grid-row: 6 / span 2;
  background:
    repeating-linear-gradient(0deg, rgba(33, 7, 17, .08), rgba(33, 7, 17, .08) 5px, transparent 5px, transparent 10px),
    var(--champagne-paper);
  color: var(--black-cherry);
  text-align: center;
}

.big-note small,
.room-label,
.tray-kicker {
  font-family: var(--utility);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.big-note strong { display: block; font-family: var(--display); font-size: 3rem; line-height: .8; color: var(--velvet-burgundy); }
.big-note b { font-family: var(--utility); font-size: .8rem; color: var(--lipstick-red); text-transform: uppercase; }

.marquee-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  margin: 0;
  padding: .8rem;
  background: var(--taxi-amber);
  color: var(--black-cherry);
  font-family: var(--utility);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
  animation: ticker 18s linear infinite;
}

.route-line {
  position: absolute;
  inset: 17% 9%;
  border: 3px dashed rgba(27, 182, 169, .55);
  clip-path: polygon(6% 36%, 32% 36%, 43% 12%, 69% 12%, 86% 55%, 61% 84%, 21% 72%);
  opacity: .55;
}

.room-label {
  position: absolute;
  top: 1.4rem;
  left: clamp(1rem, 5vw, 5rem);
  color: var(--brass-flash);
  font-size: .85rem;
}

.room {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.room strong,
.mirror-panel strong,
.night strong {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: .82;
  letter-spacing: -.05em;
}

.room p,
.mirror-panel p,
.night p {
  max-width: 24rem;
  margin: .7rem auto 0;
  font-size: .95rem;
  line-height: 1.55;
}

.primary { grid-column: 1 / span 5; grid-row: 2 / span 4; border-color: var(--taxi-amber); }
.teal { border-color: var(--subway-teal); }
.hex-scene .teal { grid-column: 4 / span 4; grid-row: 5 / span 3; background: #0d514e; }
.mini { display: grid; place-items: center; text-align: center; font-family: var(--utility); }
.hex-scene .mini:nth-of-type(3) { grid-column: 7 / span 2; grid-row: 2 / span 2; background: var(--champagne-paper); color: var(--black-cherry); }
.hex-scene .mini:nth-of-type(4) { grid-column: 2 / span 2; grid-row: 6 / span 2; border-color: var(--lipstick-red); }

.bar-room { background: radial-gradient(circle at 50% 45%, rgba(232, 62, 102, .2), transparent 25rem); }
.orbit-wrap { width: min(1050px, 100%); margin: 0 auto; min-height: 620px; position: relative; }
.velvet { position: absolute; inset: 10% 25%; }
.charm { position: absolute; width: 170px; height: 150px; display: grid; place-items: center; font-family: var(--utility); text-align: center; }
.charm:nth-of-type(2) { left: 8%; top: 20%; border-color: var(--violet-chrome); }
.charm:nth-of-type(3) { right: 9%; top: 17%; border-color: var(--taxi-amber); }
.charm:nth-of-type(4) { left: 14%; bottom: 12%; background: var(--champagne-paper); color: var(--black-cherry); }
.charm:nth-of-type(5) { right: 18%; bottom: 8%; border-color: var(--subway-teal); }

.mirror-grid .mirror-panel { grid-column: 2 / span 5; grid-row: 2 / span 5; background: linear-gradient(135deg, rgba(123, 63, 242, .38), rgba(75, 13, 34, .95)); }
.napkin { grid-column: 6 / span 3; grid-row: 1 / span 3; display: grid; place-items: center; background: var(--champagne-paper); color: var(--velvet-burgundy); font-family: var(--display); font-size: clamp(1.7rem, 4vw, 3.6rem); text-align: center; }
.stamp { grid-column: 1 / span 3; grid-row: 6 / span 2; display: grid; place-items: center; color: var(--lipstick-red); background: #2c0714; font-family: var(--utility); transform: rotate(-5deg); }

.final-map .night { grid-column: 3 / span 5; grid-row: 2 / span 5; background: linear-gradient(150deg, var(--black-cherry), #351038 60%, var(--velvet-burgundy)); border-color: var(--violet-chrome); }
.final-map .mini:nth-of-type(2) { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.final-map .mini:nth-of-type(3) { grid-column: 2 / span 2; grid-row: 5 / span 2; }
.final-map .mini:nth-of-type(4) { grid-column: 7 / span 2; grid-row: 6 / span 2; }
.amber { border-color: var(--taxi-amber); color: var(--taxi-amber); }

.disclosure-tray {
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  width: min(360px, calc(100vw - 2.4rem));
  z-index: 8;
  padding: 1.35rem 1.5rem 1.2rem;
  background:
    repeating-linear-gradient(0deg, rgba(33, 7, 17, .05), rgba(33, 7, 17, .05) 6px, transparent 6px, transparent 12px),
    var(--champagne-paper);
  color: var(--black-cherry);
  border: 2px solid var(--brass-flash);
  box-shadow: 0 20px 60px rgba(33, 7, 17, .55);
  transform: translateY(-140%);
  transition: transform .32s cubic-bezier(.2, .9, .2, 1);
}

.disclosure-tray.open { transform: translateY(0); }
.disclosure-tray p { margin: .45rem 1.6rem 0 0; line-height: 1.5; font-family: var(--serif); }
.tray-kicker { color: var(--lipstick-red); font-weight: 700; font-size: .75rem; }
.tray-close { position: absolute; top: .4rem; right: .55rem; border: 0; background: transparent; color: var(--velvet-burgundy); font-size: 1.7rem; cursor: pointer; }

.chapter-rail {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: grid;
  gap: .45rem;
}

.chapter-rail button {
  border: 1px solid rgba(214, 168, 79, .68);
  background: rgba(33, 7, 17, .7);
  color: var(--champagne-paper);
  font-family: var(--utility);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .45rem .55rem;
  cursor: pointer;
}

.chapter-rail button.active { background: var(--brass-flash); color: var(--black-cherry); }

.route-lit { animation: routeFlash .7s ease; }
.calendar-tile.flipped { transform: rotateY(180deg) translateY(-8px); background: var(--lipstick-red); color: var(--champagne-paper); }
.expand-room.expanded { inset: 2% 12%; z-index: 3; border-color: var(--taxi-amber); }

@keyframes pulsePin { 0%, 100% { filter: drop-shadow(0 0 0 rgba(214, 168, 79, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(214, 168, 79, .7)); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-42%); } }
@keyframes routeFlash { 0% { box-shadow: 0 0 0 rgba(27, 182, 169, 0); } 50% { box-shadow: 0 0 36px rgba(27, 182, 169, .8); } 100% { box-shadow: 0 0 0 rgba(27, 182, 169, 0); } }

@media (max-width: 820px) {
  .chapter { padding: 5rem 1rem; }
  .hex-field,
  .hex-scene,
  .mirror-grid,
  .final-map { grid-template-columns: repeat(4, minmax(64px, 1fr)); grid-auto-rows: 76px; gap: 9px; }
  .phone { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .receipt { grid-column: 3 / span 2; grid-row: 1 / span 2; }
  .wordmark-a { grid-column: 1 / span 4; grid-row: 3 / span 2; }
  .wordmark-b { grid-column: 1 / span 4; grid-row: 5 / span 2; }
  .wordmark-c { grid-column: 1 / span 4; grid-row: 7 / span 2; }
  .subway, .lipstick, .martini, .big-note { grid-column: span 2; grid-row: span 2; }
  .primary, .hex-scene .teal, .mirror-grid .mirror-panel, .napkin, .stamp, .final-map .night, .final-map .mini:nth-of-type(n), .hex-scene .mini:nth-of-type(n) { grid-column: 1 / span 4; grid-row: span 3; }
  .orbit-wrap { min-height: 780px; }
  .velvet { inset: 5% 5% auto; height: 280px; }
  .charm { width: 46%; height: 140px; }
  .charm:nth-of-type(2), .charm:nth-of-type(4) { left: 0; }
  .charm:nth-of-type(3), .charm:nth-of-type(5) { right: 0; }
  .charm:nth-of-type(2), .charm:nth-of-type(3) { top: 390px; }
  .charm:nth-of-type(4), .charm:nth-of-type(5) { bottom: 15px; }
  .chapter-rail { left: .5rem; top: auto; bottom: .5rem; transform: none; grid-auto-flow: column; }
  .chapter-rail button { font-size: .68rem; padding: .35rem; }
}