:root {
  --obsidian: #05040A;
  --acrylic: #111018;
  --marble: #E8E0D2;
  --vein: #8B8792;
  --cyan: #35F5FF;
  --magenta: #FF4FD8;
  --chrome: #D7B46A;
  --display: "Libre Baskerville", Georgia, serif;
  --ornament: "Cormorant Garamond", Garamond, serif;
  --sans: "Inter", Arial, sans-serif;
  --design-font-check: "Inter” captions";
  --flare-x: 24%;
  --ripple-scale: .25;
  --room-progress: 0;
}

* { box-sizing: border-box; }
html { background: var(--obsidian); color: var(--marble); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 400vh;
  overflow-x: hidden;
  font-family: var(--sans);
  background: radial-gradient(circle at calc(var(--flare-x) + 12%) 18%, rgba(53,245,255,.18), transparent 28vw), radial-gradient(circle at 74% 62%, rgba(255,79,216,.09), transparent 26vw), linear-gradient(120deg, #05040A 0%, #0a0810 44%, #05040A 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(232,224,210,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(232,224,210,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  z-index: 1;
}
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(45px); opacity: .22; }
.glow-cyan { left: calc(var(--flare-x) - 20vw); top: 5vh; background: var(--cyan); }
.glow-magenta { right: -18vw; bottom: 5vh; background: var(--magenta); opacity: .14; }
.chrome-arc { position: absolute; border: 1px solid rgba(215,180,106,.38); border-radius: 50%; filter: drop-shadow(0 0 10px rgba(215,180,106,.16)); }
.arc-one { width: 56vw; height: 26vw; left: -18vw; top: 47vh; transform: rotate(-24deg); }
.arc-two { width: 34vw; height: 18vw; right: -12vw; top: 13vh; transform: rotate(31deg); }
.accession-label { position: fixed; top: 22px; left: 24px; right: 24px; z-index: 10; display: flex; justify-content: space-between; gap: 18px; color: rgba(232,224,210,.52); font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
#narrative { position: relative; z-index: 2; }
.room { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 8vh 5vw; opacity: .54; transition: opacity .9s ease; }
.room.is-active { opacity: 1; }
.chapter-tag { position: absolute; left: 5vw; top: 12vh; color: var(--vein); font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.wordmark { position: absolute; top: 24vh; left: 8vw; margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4.2vw, 72px); letter-spacing: -.045em; text-shadow: 0 0 28px rgba(232,224,210,.12); }
.tray { width: min(1120px, 90vw); height: min(680px, 68vh); display: grid; gap: 12px; perspective: 1300px; }
.tray-foyer { grid-template-columns: 1fr 18vw 13vw; grid-template-rows: 1fr 74px; }
.tray-cabinet { grid-template-columns: 1.1fr .82fr 150px; grid-template-rows: 1fr .72fr 72px; }
.tray-signal { grid-template-columns: 1fr 220px 90px; grid-template-rows: 1fr 90px; }
.tile, .final-seal { position: relative; overflow: hidden; border: 1px solid rgba(215,180,106,.28); background: rgba(17,16,24,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -18px 44px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.48); transform: translateY(calc(34px - var(--room-progress) * 34px)) scale(calc(.985 + var(--room-progress) * .015)); opacity: calc(.35 + var(--room-progress) * .65); transition: border-color .45s ease, box-shadow .45s ease, filter .45s ease; }
.tile:hover, .final-seal:hover { border-color: rgba(53,245,255,.65); filter: brightness(1.1); }
.tile::after, .final-seal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent, rgba(255,255,255,.12), transparent 62%); opacity: .22; pointer-events: none; }
.marble-tile { background-color: var(--marble); color: var(--obsidian); background-image: radial-gradient(circle at 22% 12%, rgba(255,255,255,.82), transparent 20%), linear-gradient(135deg, rgba(139,135,146,.12), transparent 38%), linear-gradient(25deg, transparent 0 36%, rgba(139,135,146,.24) 37%, transparent 39% 62%, rgba(139,135,146,.18) 63%, transparent 65%), linear-gradient(110deg, #E8E0D2, #cfc5b6 52%, #f4eddf); }
.foyer-slab { grid-column: 2 / 4; grid-row: 1 / 3; border-radius: 4px 28px 4px 4px; }
.slit-tile { grid-column: 1; grid-row: 2; min-height: 64px; background: #08070d; }
.slit-tile span { position: absolute; left: 7%; right: 7%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--chrome), var(--cyan), transparent); box-shadow: 0 0 18px var(--cyan); }
.micro-tile { display: grid; place-items: center; background: linear-gradient(145deg, #111018, #05040A); }
.stone-dot { grid-column: 1; grid-row: 1; width: 52%; justify-self: end; align-self: end; height: 46%; }
.micro-tile i, .seal-star { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgba(255,79,216,.08), 0 0 22px var(--magenta); }
.veins { position: absolute; inset: 0; opacity: .5; background: linear-gradient(128deg, transparent 18%, rgba(139,135,146,.62) 18.4%, transparent 19.2% 54%, rgba(139,135,146,.42) 54.4%, transparent 56%), radial-gradient(ellipse at 74% 37%, transparent 39%, rgba(139,135,146,.45) 40%, transparent 41%); mix-blend-mode: multiply; }
.lens-flare { position: absolute; top: 42%; left: var(--flare-x); width: 46%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--magenta), #fff, var(--cyan), transparent); box-shadow: 0 0 10px #fff, 0 0 32px var(--cyan), 0 0 54px var(--magenta); }
.lens-flare::before { content: ""; position: absolute; width: 92px; height: 92px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 40deg, transparent, rgba(53,245,255,.4), transparent, rgba(255,79,216,.25), transparent); filter: blur(1px); }
.lens-flare.small { width: 70%; top: 58%; }
.ripple { position: absolute; left: var(--flare-x); top: 50%; width: 24vmin; height: 24vmin; transform: translate(-50%, -50%) scale(var(--ripple-scale)); border: 1px solid rgba(53,245,255,.62); border-radius: 50%; opacity: calc(.08 + var(--room-progress) * .34); box-shadow: 0 0 30px rgba(53,245,255,.24), inset 0 0 28px rgba(53,245,255,.13); }
.engraving, .inscription { position: absolute; right: 28px; bottom: 24px; margin: 0; font-family: var(--display); font-style: italic; color: rgba(5,4,10,.62); }
.edge-copy { position: absolute; right: 5vw; bottom: 10vh; max-width: 330px; margin: 0; color: rgba(232,224,210,.5); font: 500 10px/1.8 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.reflection { position: absolute; left: 7vw; bottom: 4vh; font-family: var(--display); font-size: clamp(48px, 11vw, 180px); letter-spacing: -.06em; color: rgba(232,224,210,.08); transform: scaleY(-1); filter: blur(3px); opacity: .6; }
.reflection.large { left: 38vw; color: rgba(53,245,255,.05); }
.chain-cell { grid-column: 1; grid-row: 1 / 3; }
.label-cell { grid-column: 2 / 4; grid-row: 1; padding: 32px; }
.label-cell h2, .signal-slab h2 { margin: 0; font-family: var(--ornament); font-size: clamp(72px, 14vw, 190px); font-weight: 400; line-height: .78; letter-spacing: -.08em; }
.label-cell p { max-width: 270px; font-family: var(--display); font-style: italic; color: rgba(5,4,10,.6); }
.jewel-well { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 24px; }
.jewel-well span { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, var(--marble) 42%, var(--vein)); box-shadow: 0 0 18px rgba(232,224,210,.35); }
.phone-charm { grid-column: 3; grid-row: 2; display: grid; place-items: center; padding: 18px; }
.phone-charm svg { width: 58px; fill: none; stroke: var(--chrome); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(215,180,106,.28)); }
.phone-charm p, .tiny-caption { color: var(--vein); font: 600 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.wide { grid-column: 1 / 4; grid-row: 3; }
.chain { position: absolute; border: 1px solid rgba(215,180,106,.72); border-radius: 50%; }
.chain-a { width: 75%; height: 52%; left: 11%; top: 20%; transform: rotate(-18deg); }
.chain-b { width: 52%; height: 36%; right: -8%; bottom: 10%; transform: rotate(24deg); }
.tiny-caption { position: absolute; left: 22px; bottom: 20px; }
.signal-slab { grid-column: 1 / 3; grid-row: 1 / 3; padding: 42px; }
.signal-slab h2 { position: absolute; left: 34px; bottom: 82px; color: rgba(5,4,10,.72); }
.column-fragment { position: absolute; right: 9%; top: 9%; width: 94px; height: 70%; border-left: 13px double rgba(5,4,10,.18); border-right: 13px double rgba(5,4,10,.14); opacity: .55; }
.quote-cell { grid-column: 3; grid-row: 1; padding: 24px; }
blockquote { margin: 0; font-family: var(--ornament); font-size: 31px; line-height: 1.08; color: rgba(232,224,210,.72); }
.magenta-star { grid-column: 3; grid-row: 2; }
.vertical { grid-column: 3; grid-row: 1 / 3; justify-self: end; width: 18px; }
.vertical span { top: 7%; bottom: 7%; left: 50%; width: 1px; height: auto; right: auto; background: linear-gradient(180deg, transparent, var(--cyan), var(--chrome), transparent); }
.room-final { min-height: 100vh; }
.final-seal { width: min(560px, 82vw); height: 330px; display: grid; place-items: center; text-align: center; border-radius: 2px; background: linear-gradient(145deg, rgba(17,16,24,.9), rgba(5,4,10,.94)); }
.final-seal h2 { margin: 0; font-family: var(--display); font-size: clamp(40px, 8vw, 92px); font-weight: 400; letter-spacing: -.055em; }
.final-seal i { width: 72%; height: 1px; display: block; background: linear-gradient(90deg, transparent, var(--chrome), transparent); box-shadow: 0 0 18px rgba(215,180,106,.5); }
.final-seal p { max-width: 280px; margin: 0; color: var(--vein); font: 500 10px/1.8 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.seal-star { position: absolute; right: 18%; top: 23%; }
.scroll-meter { position: fixed; right: 24px; top: 18vh; bottom: 18vh; width: 1px; background: rgba(232,224,210,.12); z-index: 10; }
#scrollFill { display: block; width: 1px; height: 0; background: linear-gradient(var(--cyan), var(--magenta), var(--chrome)); box-shadow: 0 0 12px var(--cyan); }
@media (max-width: 780px) {
  .accession-label span:nth-child(2) { display: none; }
  .tray { width: 90vw; height: 72vh; gap: 8px; }
  .tray-foyer, .tray-cabinet, .tray-signal { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .foyer-slab, .chain-cell, .label-cell, .signal-slab { grid-column: 1 / 3; grid-row: 1 / 3; }
  .slit-tile, .wide { grid-column: 1 / 3; grid-row: 3; }
  .phone-charm, .jewel-well, .quote-cell, .magenta-star, .vertical, .stone-dot { display: none; }
  .edge-copy { left: 6vw; right: 6vw; bottom: 6vh; }
}