:root {
  --navy: #1E2B3A;
  --cream: #E7DDC8;
  --seafoam: #8FAE9D;
  --coral: #C9826B;
  --ochre: #B89A55;
  --teal: #79C7B5;
  --lavender: #8C7AAE;
  --espresso: #201B18;
  --ui: "Noto Sans", "Frutiger", "Segoe UI", system-ui, sans-serif;
  --text: "Source Sans 3", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Lexend", "Noto Sans", "Segoe UI", system-ui, sans-serif;
}

/* Design typography trace: Source Sans 3**font for longer explanatory fragments and progressive-disclosure notes. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--ui);
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .14;
  background-image: radial-gradient(circle at 20% 30%, rgba(231, 221, 200, .42) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(32, 27, 24, .55) 0 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  mix-blend-mode: soft-light;
}

.aurora-sky {
  position: fixed;
  inset: -15vh -15vw;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 110%, rgba(32, 27, 24, .85), transparent 46%), linear-gradient(180deg, var(--navy), #26354a 52%, var(--espresso));
}

.veil {
  position: absolute;
  width: 62vw;
  height: 92vh;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .42;
  transform-origin: center;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.veil-one { left: 4vw; top: 4vh; background: linear-gradient(130deg, transparent 12%, var(--teal), transparent 62%); }
.veil-two { left: 35vw; top: -8vh; background: linear-gradient(155deg, transparent 18%, var(--lavender), transparent 68%); animation-duration: 23s; }
.veil-three { right: -8vw; top: 18vh; background: linear-gradient(115deg, transparent 20%, var(--seafoam), transparent 72%); animation-duration: 28s; }

@keyframes auroraDrift {
  from { transform: translate3d(-2vw, -1vh, 0) rotate(-7deg) scale(1); }
  to { transform: translate3d(3vw, 2vh, 0) rotate(8deg) scale(1.08); }
}

.route-tabs {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 10px;
}

.route-tab {
  width: 43px;
  height: 28px;
  border: 1px solid rgba(184, 154, 85, .55);
  border-radius: 999px;
  background: rgba(30, 43, 58, .56);
  color: rgba(231, 221, 200, .66);
  letter-spacing: .16em;
  font-size: 11px;
  cursor: pointer;
  transition: background .45s ease, color .45s ease, transform .45s ease;
}

.route-tab.is-active, .route-tab:hover {
  background: var(--ochre);
  color: var(--espresso);
  transform: translateX(7px);
}

#terminal {
  position: relative;
  z-index: 1;
}

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 9vh 8vw 8vh 12vw;
  border-bottom: 1px solid rgba(184, 154, 85, .25);
  isolation: isolate;
}

.chapter::before {
  content: attr(data-room);
  position: absolute;
  top: 7vh;
  right: 8vw;
  color: rgba(231, 221, 200, .12);
  font-family: var(--display);
  font-size: clamp(5rem, 16vw, 18rem);
  line-height: .75;
  z-index: -1;
}

.chapter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16vh;
  background: linear-gradient(180deg, transparent, rgba(32, 27, 24, .52));
  z-index: 2;
  pointer-events: none;
}

.layer { will-change: transform; }

.ceiling-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15vh;
  background: linear-gradient(90deg, var(--espresso), #2f2a25 45%, var(--espresso));
  border-bottom: 3px solid rgba(184, 154, 85, .45);
}

.window-wall {
  position: absolute;
  top: 15vh;
  right: 8vw;
  display: flex;
  gap: 22px;
  opacity: .88;
}

.window {
  width: 13vw;
  height: 58vh;
  min-width: 82px;
  border: 1px solid rgba(231, 221, 200, .22);
  border-radius: 22px 22px 6px 6px;
  background: linear-gradient(180deg, rgba(121, 199, 181, .22), rgba(140, 122, 174, .18) 48%, rgba(30, 43, 58, .2)), linear-gradient(90deg, transparent 47%, rgba(231, 221, 200, .14) 49% 51%, transparent 53%);
  box-shadow: inset 0 0 40px rgba(121, 199, 181, .14), 0 20px 70px rgba(121, 199, 181, .1);
}

.window.narrow { width: 7vw; margin-top: 8vh; }
.window.soft { opacity: .55; }

.route-board {
  position: absolute;
  top: 22vh;
  left: 13vw;
  width: min(580px, 74vw);
  padding: 25px 30px 28px;
  border-radius: 24px 24px 8px 8px;
  background: rgba(32, 27, 24, .82);
  border: 1px solid rgba(184, 154, 85, .6);
  box-shadow: 0 0 42px rgba(121, 199, 181, .18), inset 0 0 0 7px rgba(231, 221, 200, .035);
}

.caption, .room-code {
  display: block;
  margin: 0 0 12px;
  color: var(--ochre);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(4rem, 12vw, 9.5rem);
  line-height: .84;
  color: var(--cream);
  text-shadow: 0 0 24px rgba(121, 199, 181, .28);
}

.route-board p {
  margin: 20px 0 0;
  color: rgba(231, 221, 200, .78);
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.sign-panel {
  position: relative;
  width: min(550px, 78vw);
  margin-left: -26vw;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 30px 30px 12px 12px;
  background: linear-gradient(135deg, rgba(231, 221, 200, .94), rgba(231, 221, 200, .74));
  color: var(--navy);
  border: 1px solid rgba(184, 154, 85, .76);
  box-shadow: 0 24px 80px rgba(32, 27, 24, .34), inset 0 0 0 8px rgba(255, 255, 255, .12);
  z-index: 5;
}

.dialogue .sign-panel, .lounge .sign-panel { margin-left: 24vw; }
.map-room .sign-panel { margin-left: -12vw; margin-top: 12vh; }
.gate .sign-panel { margin-left: 0; text-align: center; }

.sign-panel h2 {
  font-size: clamp(2.2rem, 5vw, 5.5rem);
  line-height: .96;
  color: var(--navy);
}

.ticket, .route-number {
  margin-top: 26px;
  border: 1px solid rgba(32, 27, 24, .25);
  border-radius: 999px;
  background: var(--coral);
  color: var(--cream);
  padding: 12px 20px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  cursor: pointer;
  box-shadow: 0 9px 0 rgba(32, 27, 24, .13);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.route-number { background: var(--navy); }
.ticket:hover, .route-number:hover { transform: translateY(3px); box-shadow: 0 4px 0 rgba(32, 27, 24, .2); background: var(--teal); color: var(--espresso); }

.hidden-note {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  font-family: var(--text);
  color: rgba(30, 43, 58, .86);
  line-height: 1.7;
  transition: max-height .75s ease, opacity .65s ease, margin .65s ease;
}

.hidden-note.is-open {
  max-height: 180px;
  opacity: 1;
  margin-top: 22px;
}

.chair-row {
  position: absolute;
  left: -4vw;
  bottom: 7vh;
  display: flex;
  gap: 18px;
  z-index: 8;
}

.chair-row span {
  width: 118px;
  height: 96px;
  border-radius: 48px 48px 14px 14px;
  background: linear-gradient(180deg, var(--seafoam), #607a70 72%, var(--espresso));
  box-shadow: inset 0 -18px 0 rgba(32, 27, 24, .34);
}

.chair-row span::after {
  content: "";
  display: block;
  width: 82px;
  height: 10px;
  margin: 92px auto 0;
  background: var(--espresso);
  border-radius: 999px;
}

.token {
  position: absolute;
  right: 14vw;
  bottom: 18vh;
  width: 82px;
  height: 42px;
  border: 1px solid rgba(231, 221, 200, .35);
  border-radius: 50%;
  background: radial-gradient(circle at 74% 32%, var(--teal) 0 8%, transparent 9%), linear-gradient(135deg, var(--ochre), #80652d);
  color: transparent;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(121, 199, 181, .18), inset 0 0 0 6px rgba(32, 27, 24, .16);
}

.token-message {
  position: fixed;
  right: 28px;
  bottom: 28px;
  max-width: 270px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(231, 221, 200, .9);
  color: var(--navy);
  z-index: 21;
  transform: translateY(26px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  font-family: var(--text);
}

.token-message.is-visible { opacity: 1; transform: translateY(0); }

.dialogue { background: linear-gradient(180deg, rgba(30, 43, 58, .72), rgba(32, 27, 24, .35)); }
.counter {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 24vh;
  background: linear-gradient(180deg, var(--coral), #7e4e43);
  border-top: 4px solid var(--ochre);
}

.portrait-plate {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: min(330px, 35vw);
  height: 52vh;
  border-radius: 150px 150px 20px 20px;
  background: rgba(231, 221, 200, .16);
  border: 1px solid rgba(231, 221, 200, .28);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(32, 27, 24, .28);
}

.duotone {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 45% 30%, rgba(231, 221, 200, .75) 0 10%, transparent 11%), radial-gradient(ellipse at 38% 62%, rgba(201, 130, 107, .72) 0 18%, transparent 19%), radial-gradient(ellipse at 70% 54%, rgba(143, 174, 157, .76) 0 15%, transparent 16%), linear-gradient(135deg, var(--lavender), var(--navy));
  filter: saturate(.8) contrast(.9);
  opacity: .55;
  transition: opacity 1.2s ease, filter 1.2s ease;
}

.chapter.is-paused .duotone, .portrait-plate:hover .duotone { opacity: .92; filter: saturate(1.08) contrast(1.02); }

.ticket-stack {
  position: absolute;
  right: 11vw;
  bottom: 18vh;
  width: 250px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(231, 221, 200, .18);
  backdrop-filter: blur(12px);
}

.ticket.small { margin-top: 0; background: var(--cream); color: var(--navy); }
.hidden-note.floating { color: var(--cream); }

.map-room { background: linear-gradient(180deg, rgba(143, 174, 157, .22), rgba(30, 43, 58, .72)); }
.map-lines {
  position: absolute;
  inset: 13vh 5vw 10vh 10vw;
  opacity: .7;
}
.map-lines svg { width: 100%; height: 100%; }
.map-lines path { fill: none; stroke: var(--ochre); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 18 22; filter: drop-shadow(0 0 8px rgba(121, 199, 181, .25)); }

.poster-shapes { position: absolute; right: 9vw; top: 18vh; width: 28vw; height: 48vh; }
.poster-shapes span { position: absolute; border-radius: 45% 55% 50% 30%; background: rgba(201, 130, 107, .55); }
.poster-shapes span:nth-child(1) { width: 210px; height: 130px; right: 15%; top: 5%; }
.poster-shapes span:nth-child(2) { width: 150px; height: 220px; left: 0; bottom: 10%; background: rgba(121, 199, 181, .42); }
.poster-shapes span:nth-child(3) { width: 100px; height: 100px; right: 0; bottom: 0; background: rgba(140, 122, 174, .5); }

.glass-plaque {
  position: absolute;
  right: 12vw;
  bottom: 24vh;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(231, 221, 200, .22);
  border: 1px solid rgba(231, 221, 200, .33);
  color: var(--cream);
  backdrop-filter: blur(14px);
  font-family: var(--text);
}

.lounge { background: linear-gradient(180deg, rgba(32, 27, 24, .18), rgba(30, 43, 58, .82)); }
.lounge-light {
  position: absolute;
  inset: 14vh 12vw 12vh 8vw;
  border-radius: 54px;
  background: radial-gradient(circle at 25% 45%, rgba(231, 221, 200, .18), transparent 28%), linear-gradient(90deg, rgba(143, 174, 157, .1), rgba(140, 122, 174, .18));
  border: 1px solid rgba(184, 154, 85, .22);
}
.portrait-plate.guard { left: auto; right: 10vw; top: 12vh; border-radius: 26px; }
.reflection { background: radial-gradient(ellipse at 50% 24%, rgba(231, 221, 200, .68) 0 9%, transparent 10%), radial-gradient(ellipse at 48% 50%, rgba(32, 27, 24, .86) 0 20%, transparent 21%), linear-gradient(135deg, var(--seafoam), var(--navy) 62%, var(--coral)); }

.silhouette-group, .departing-silhouettes {
  position: absolute;
  bottom: 0;
  left: 8vw;
  display: flex;
  gap: 34px;
  align-items: flex-end;
  z-index: 8;
}
.silhouette-group span, .departing-silhouettes span {
  display: block;
  width: 54px;
  height: 190px;
  border-radius: 28px 28px 8px 8px;
  background: var(--espresso);
  opacity: .84;
}
.silhouette-group span::before, .departing-silhouettes span::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: -34px auto 0;
  border-radius: 50%;
  background: var(--espresso);
}
.silhouette-group span:nth-child(2) { height: 145px; }
.silhouette-group span:nth-child(3) { height: 215px; }

.gate { background: linear-gradient(180deg, rgba(30, 43, 58, .54), rgba(121, 199, 181, .18) 54%, rgba(32, 27, 24, .62)); }
.gate-arches {
  position: absolute;
  inset: 9vh 4vw 0;
  display: flex;
  justify-content: center;
  gap: 2vw;
  opacity: .7;
}
.gate-arches span {
  width: 24vw;
  border: 2px solid rgba(231, 221, 200, .2);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(121, 199, 181, .12), transparent 58%);
  box-shadow: inset 0 0 60px rgba(121, 199, 181, .12);
}
.sign-panel.final {
  background: linear-gradient(135deg, rgba(30, 43, 58, .88), rgba(32, 27, 24, .72));
  color: var(--cream);
}
.sign-panel.final h2 { color: var(--cream); }
.sign-panel.final .hidden-note { color: rgba(231, 221, 200, .85); }
.departing-silhouettes { left: 50%; transform: translateX(-50%); gap: 7vw; }
.departing-silhouettes span { width: 38px; opacity: .68; animation: depart 9s ease-in-out infinite alternate; }
.departing-silhouettes span:nth-child(2) { height: 145px; animation-delay: -1.5s; }
.departing-silhouettes span:nth-child(3) { height: 180px; animation-delay: -3s; }
.departing-silhouettes span:nth-child(4) { height: 128px; animation-delay: -4s; }

@keyframes depart {
  from { transform: translateY(0) scale(1); opacity: .72; }
  to { transform: translateY(-24px) scale(.92); opacity: .38; }
}

@media (max-width: 780px) {
  .route-tabs { left: 12px; }
  .chapter { padding-left: 72px; padding-right: 24px; }
  .sign-panel, .dialogue .sign-panel, .lounge .sign-panel, .map-room .sign-panel { margin-left: 0; width: 100%; }
  .route-board { left: 72px; width: calc(100vw - 100px); }
  .portrait-plate, .portrait-plate.guard { width: 52vw; height: 38vh; opacity: .45; }
  .window-wall { right: -12vw; }
  .ticket-stack, .glass-plaque, .poster-shapes { display: none; }
  .chair-row span { width: 78px; }
}