:root {
  --reagent-lavender: #9E8CFF;
  --old-label-ochre: #BFA35A;
  --tarnished-silver: #B9C3C7;
  --oxidized-teal: #2C6F73;
  --moonlit-paper: #E7E0CF;
  --wax-carmine: #C3485B;
  --vitrine-blue: #172A38;
  --deep-ink: #10131C;
  --title: "Libre Baskerville", serif;
  --copy: "Bricolage Grotesque", sans-serif;
  --label: "Commissioner", sans-serif;
  --mono: "Azeret Mono", monospace;
  --compliance-phrase: "Interactions should reward exploration: hovering can magnifier";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moonlit-paper);
  background:
    radial-gradient(circle at 16% 8%, rgba(158, 140, 255, .17), transparent 28rem),
    radial-gradient(circle at 88% 24%, rgba(44, 111, 115, .2), transparent 30rem),
    linear-gradient(130deg, var(--deep-ink), #0b0d14 52%, var(--vitrine-blue));
  font-family: var(--copy);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(231, 224, 207, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 224, 207, .035) 1px, transparent 1px),
    radial-gradient(circle, rgba(231, 224, 207, .28) 1px, transparent 1.5px);
  background-size: 72px 72px, 72px 72px, 19px 19px;
  mix-blend-mode: screen;
}

.exchange-cabinet { position: relative; }

.ambient-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.dust { position: absolute; width: .32rem; height: .32rem; border-radius: 50%; background: var(--tarnished-silver); filter: blur(1px); opacity: .25; animation: drift 13s linear infinite; }
.mote-a { left: 18%; top: 18%; }
.mote-b { left: 68%; top: 38%; animation-delay: -4s; }
.mote-c { left: 41%; top: 73%; animation-delay: -8s; }
.serial-rain { position: absolute; right: -13rem; top: 6rem; color: rgba(185,195,199,.18); font: 500 .7rem/1 var(--mono); letter-spacing: .3em; writing-mode: vertical-rl; }

.classification-tabs {
  position: fixed;
  z-index: 12;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.classification-tabs a {
  color: rgba(231,224,207,.66);
  text-decoration: none;
  font: 600 .62rem/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .55rem;
  border-left: 2px solid rgba(191,163,90,.35);
  background: rgba(16,19,28,.46);
  backdrop-filter: blur(8px);
  transition: color .4s, border-color .4s, transform .4s;
}

.classification-tabs a.active { color: var(--moonlit-paper); border-color: var(--wax-carmine); transform: translateX(.5rem); }

.chamber {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: 7vw 8vw 6vw 12vw;
  overflow: hidden;
}

.chamber::after {
  content: attr(data-chamber);
  position: absolute;
  right: 5vw;
  top: 6vh;
  font: 600 clamp(3rem, 10vw, 9rem)/1 var(--mono);
  color: rgba(185,195,199,.05);
  z-index: -1;
}

.vitrine {
  border: 1px solid rgba(185,195,199,.28);
  background:
    linear-gradient(135deg, rgba(231,224,207,.08), rgba(23,42,56,.42) 52%, rgba(158,140,255,.08)),
    rgba(16,19,28,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 2rem 5rem rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
}

.vitrine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 0 35%, rgba(255,255,255,.13) 36%, transparent 46% 100%);
  opacity: .36;
}

.accession, .mono {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .19em;
  color: var(--old-label-ochre);
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--title); font-weight: 700; }
h1 { font-size: clamp(2.2rem, 7vw, 7.7rem); letter-spacing: -.055em; }
h2 { font-size: clamp(2rem, 6vw, 6.5rem); line-height: .95; }
h3 { font-family: var(--title); font-size: clamp(1.3rem, 2.2vw, 2.4rem); color: var(--moonlit-paper); }
p { font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.5; }

.vestibule { display: grid; align-items: center; }
.drawer-pull {
  position: relative;
  width: min(72rem, 80vw);
  margin: 0 auto 4vh;
  padding: 1.3rem 5rem 1.7rem;
  border-radius: 999px;
  text-align: center;
  color: var(--deep-ink);
  background: linear-gradient(90deg, #7b6225, var(--old-label-ochre), #ead891 44%, var(--old-label-ochre), #6b541f);
  box-shadow: inset 0 .2rem .3rem rgba(255,255,255,.36), inset 0 -.4rem .65rem rgba(0,0,0,.38), 0 2rem 6rem rgba(0,0,0,.6);
  transform: translateY(var(--drawer-shift, 0));
}

.drawer-pull .accession { display: block; color: rgba(16,19,28,.72); margin-bottom: .2rem; }
.pull-screw { position: absolute; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%; background: rgba(16,19,28,.45); box-shadow: inset .2rem .2rem .35rem rgba(255,255,255,.25); }
.pull-screw.left { left: 2rem; } .pull-screw.right { right: 2rem; }
.inspection-light { position: absolute; inset: -10vh 8vw auto; height: 70vh; background: radial-gradient(ellipse at center, rgba(231,224,207,.22), transparent 62%); filter: blur(18px); animation: inspect 7s ease-in-out infinite alternate; }

.hands-path { position: relative; width: min(78rem, 82vw); height: 32rem; margin: 0 auto; border-radius: 3rem; }
.hand-cast { position: absolute; top: 21%; width: 28rem; max-width: 40vw; fill: rgba(231,224,207,.73); stroke: rgba(185,195,199,.62); stroke-width: 2; filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.5)); }
.hand-left { left: 4%; transform: rotate(-7deg); } .hand-right { right: 4%; transform: rotate(7deg); }
.provenance-thread { position: absolute; height: 2px; background: var(--wax-carmine); box-shadow: 0 0 1rem rgba(195,72,91,.6); transform-origin: left center; }
.thread-main { left: 25%; right: 25%; top: 51%; }
.provenance-thread span { position: absolute; top: -.35rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--wax-carmine); border: 2px solid var(--moonlit-paper); }
.provenance-thread span:nth-child(1) { left: 0; } .provenance-thread span:nth-child(2) { left: 48%; } .provenance-thread span:nth-child(3) { right: 0; }
.specimen-label { display: inline-block; padding: .9rem 1rem; color: var(--deep-ink); background: var(--moonlit-paper); border: 1px solid rgba(16,19,28,.2); box-shadow: .4rem .5rem 0 rgba(191,163,90,.38); font-family: var(--label); }
.specimen-label b, .specimen-label small { display: block; } .specimen-label small { margin-top: .25rem; color: rgba(16,19,28,.68); }
.label-vestibule { position: absolute; left: 8%; bottom: 7%; transform: rotate(-3deg); }
.curator-note { max-width: 38rem; color: rgba(231,224,207,.76); }
.vestibule > .curator-note { margin: -2vh auto 0; text-align: center; }

.chapter-title { position: relative; z-index: 2; max-width: 48rem; }
.skewed { transform: rotate(-4deg); margin-left: 42vw; }
.drawer-slab { position: absolute; width: min(52rem, 58vw); min-height: 62vh; left: 10vw; top: 23vh; padding: 2rem; transform: translateX(var(--drawer-open, -8vw)) rotate(-2deg); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.chamber.in-view .drawer-slab { transform: translateX(0) rotate(-2deg); }
.receipt-ghost { position: relative; min-height: 28rem; padding: 3rem 2.2rem; color: var(--deep-ink); background: linear-gradient(180deg, rgba(231,224,207,.94), rgba(231,224,207,.74)); border-radius: .5rem; overflow: hidden; }
.receipt-ghost h3 { color: var(--deep-ink); margin: 2rem 0 1rem; }
.receipt-ghost ul { padding-left: 1.1rem; font-size: 1.1rem; line-height: 1.7; }
.perforation { position: absolute; left: 0; right: 0; height: 1rem; background: radial-gradient(circle, var(--deep-ink) 0 .18rem, transparent .2rem) repeat-x; background-size: 1rem 1rem; opacity: .35; }
.perforation.top { top: .5rem; }
.carbon-layer { position: absolute; inset: auto 2rem 2rem; padding: 1.2rem; border: 1px dashed var(--reagent-lavender); color: rgba(158,140,255,.84); font-family: var(--mono); opacity: .24; transform: translateY(1.5rem); transition: opacity .5s, transform .5s; }
.receipt-ghost:hover .carbon-layer, .receipt-ghost.active .carbon-layer { opacity: .9; transform: translateY(0); }
.stamp-impression { position: absolute; right: 2rem; top: 4rem; border: .22rem solid var(--wax-carmine); color: var(--wax-carmine); padding: .6rem .9rem; font: 700 1rem/1 var(--label); text-transform: uppercase; transform: rotate(12deg); opacity: .82; }
.specimen-strip { position: absolute; right: 8vw; bottom: 10vh; display: grid; gap: .7rem; font-family: var(--mono); color: var(--old-label-ochre); }
.specimen-strip span { border: 1px solid rgba(191,163,90,.4); padding: .55rem .7rem; background: rgba(16,19,28,.52); }
.inspection-lens { position: absolute; right: 20vw; top: 47vh; width: 10rem; height: 10rem; border: .5rem solid rgba(185,195,199,.55); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(231,224,207,.14), 0 1rem 3rem rgba(0,0,0,.42); transform: translate(var(--lens-x,0), var(--lens-y,0)); transition: transform .18s linear; }
.inspection-lens::after { content: ""; position: absolute; width: 5rem; height: .5rem; right: -4.2rem; bottom: .6rem; background: rgba(185,195,199,.5); transform: rotate(43deg); transform-origin: left center; }

.aviary { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 4vw; }
.tall { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.aviary-case { position: relative; min-height: 70vh; border-radius: 4rem 1rem 5rem 1rem; }
.bird-path { position: absolute; border-top: 1px dashed rgba(195,72,91,.7); transform: rotate(var(--rot)); width: var(--w); left: var(--x); top: var(--y); }
.path-one { --rot: -18deg; --w: 68%; --x: 10%; --y: 34%; } .path-two { --rot: 20deg; --w: 72%; --x: 14%; --y: 57%; }
.bird-path i { position: absolute; top: -.35rem; width: 0; height: 0; border-left: .75rem solid var(--tarnished-silver); border-top: .35rem solid transparent; border-bottom: .35rem solid transparent; animation: migrate 4.8s ease-in-out infinite; }
.bird-path i:nth-child(1) { left: 8%; } .bird-path i:nth-child(2) { left: 36%; animation-delay: -.9s; } .bird-path i:nth-child(3) { left: 68%; animation-delay: -1.8s; } .bird-path i:nth-child(4) { left: 88%; animation-delay: -2.7s; }
.counterparty-tag { position: absolute; padding: .8rem .9rem; color: var(--deep-ink); background: var(--moonlit-paper); font: 700 1rem/1.1 var(--label); text-transform: uppercase; box-shadow: .5rem .5rem 0 rgba(158,140,255,.24); }
.counterparty-tag em { font: 400 .85rem/1.2 var(--copy); text-transform: none; color: rgba(16,19,28,.65); }
.tag-a { left: 8%; top: 16%; transform: rotate(-4deg); } .tag-b { right: 11%; top: 40%; transform: rotate(5deg); } .tag-c { left: 27%; bottom: 12%; transform: rotate(-2deg); }
.inset { position: absolute; right: 9%; bottom: 7%; max-width: 21rem; }
.thread-aviary { left: 36vw; top: 50%; width: 42vw; transform: rotate(-26deg); }
.thread-aviary span:nth-child(4) { right: 28%; }

.reliquary { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.reliquary-title { align-self: start; margin-top: 10vh; }
.escrow-jar { position: relative; justify-self: center; width: min(25rem, 38vw); height: 35rem; border-radius: 12rem 12rem 4rem 4rem; overflow: visible; transform: rotate(3deg); }
.jar-lid { position: absolute; left: 13%; right: 13%; top: -2rem; height: 3rem; border-radius: 1rem; background: linear-gradient(90deg, #6b541f, var(--old-label-ochre), #e5cf82); box-shadow: inset 0 -.4rem .7rem rgba(0,0,0,.4); }
.jar-glass { position: absolute; inset: 2rem 1.4rem 8rem; border-radius: 10rem 10rem 3rem 3rem; border: 1px solid rgba(185,195,199,.45); background: linear-gradient(135deg, rgba(185,195,199,.12), rgba(158,140,255,.11)); overflow: hidden; }
.shell { position: absolute; width: 5rem; height: 3rem; border-radius: 50%; background: radial-gradient(ellipse at 30% 35%, var(--moonlit-paper), var(--old-label-ochre)); bottom: 2.2rem; }
.shell-one { left: 4rem; transform: rotate(-18deg); } .shell-two { right: 3.7rem; bottom: 4.5rem; transform: rotate(19deg); }
.tally-bone { position: absolute; left: 42%; bottom: 3.3rem; width: 2rem; height: 8rem; border-radius: 2rem; background: var(--tarnished-silver); transform: rotate(14deg); }
.wax-seal { position: absolute; left: 50%; top: 43%; width: 5rem; height: 5rem; margin-left: -2.5rem; border-radius: 48% 52% 44% 56%; background: var(--wax-carmine); box-shadow: inset -.4rem -.5rem 0 rgba(0,0,0,.16), 0 0 2rem rgba(195,72,91,.45); }
.jar-label { position: absolute; left: 50%; bottom: 1.2rem; width: 18rem; transform: translateX(-50%) rotate(-2deg); }
.stamp-press { position: absolute; left: 23vw; bottom: 14vh; width: 8rem; height: 8rem; display: grid; place-items: center; border: .28rem solid var(--wax-carmine); border-radius: 50%; color: var(--wax-carmine); font: 700 .9rem/1.1 var(--label); text-align: center; text-transform: uppercase; transform: translateY(var(--stamp-drop, -1.2rem)) rotate(-13deg); transition: transform .3s; }
.reliquary.in-view .stamp-press { animation: stamp 1.7s ease-in-out infinite; }

.tidepool { display: grid; align-items: center; }
.pool-title { margin-left: auto; text-align: right; }
.pool { position: relative; min-height: 62vh; border-radius: 47% 53% 42% 58%; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(44,111,115,.45), rgba(23,42,56,.5) 60%, rgba(16,19,28,.7)); }
.ripple-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ripple { fill: none; stroke: var(--reagent-lavender); stroke-width: 3; stroke-dasharray: 10 18; opacity: .6; animation: rippleFlow 7s linear infinite; }
.r2 { stroke: var(--tarnished-silver); animation-delay: -2s; } .r3 { stroke: var(--old-label-ochre); animation-delay: -4s; }
.coin-rubbing { position: absolute; display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid rgba(231,224,207,.3); color: rgba(231,224,207,.36); font: 700 3rem/1 var(--title); background: repeating-radial-gradient(circle, rgba(231,224,207,.12) 0 .15rem, transparent .18rem .42rem); }
.coin-a { left: 18%; top: 24%; } .coin-b { right: 20%; top: 32%; } .coin-c { left: 48%; bottom: 18%; }
.pool-label { position: absolute; left: 7%; bottom: 8%; max-width: 28rem; }

.lantern { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5vw; }
.ledger-lantern { position: relative; min-height: 70vh; border-radius: 3rem; overflow: hidden; }
.lantern-glow { position: absolute; inset: 17% 21%; border-radius: 50%; background: radial-gradient(circle, rgba(231,224,207,.8), rgba(191,163,90,.32) 38%, rgba(158,140,255,.18) 65%, transparent 72%); filter: blur(7px); animation: glow 4s ease-in-out infinite alternate; }
.ledger-pages { position: absolute; left: 18%; right: 18%; top: 21%; bottom: 18%; display: grid; align-content: center; gap: .8rem; transform: rotate(-3deg); }
.ledger-pages span { display: block; padding: .8rem 1rem; color: var(--deep-ink); background: rgba(231,224,207,.82); font: 500 1.1rem/1 var(--label); box-shadow: .4rem .4rem 0 rgba(16,19,28,.26); }
.ledger-moth { position: absolute; width: 2.4rem; height: 1.2rem; background: var(--tarnished-silver); border-radius: 50% 50% 0 0; opacity: .75; animation: moth 8s ease-in-out infinite; }
.ledger-moth::before, .ledger-moth::after { content: ""; position: absolute; top: .2rem; width: 1.5rem; height: 1rem; background: rgba(231,224,207,.65); border-radius: 50%; }
.ledger-moth::before { left: -1rem; transform: rotate(-35deg); } .ledger-moth::after { right: -1rem; transform: rotate(35deg); }
.moth-a { left: 20%; top: 22%; } .moth-b { right: 18%; top: 36%; animation-delay: -2.4s; } .moth-c { left: 54%; bottom: 20%; animation-delay: -5s; }
.final-placard { max-width: 39rem; padding: 2rem; border-left: 3px solid var(--old-label-ochre); background: rgba(16,19,28,.38); }
.final-placard h2 { font-size: clamp(2rem, 4vw, 4.7rem); }

.interactive-specimen { transition: transform .45s ease, box-shadow .45s ease; }
.interactive-specimen:hover, .interactive-specimen.active { transform: translateY(-.6rem) rotate(var(--tilt, 0deg)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2.5rem 6rem rgba(0,0,0,.55); }
.escrow-jar:hover, .escrow-jar.active { --tilt: 5deg; }
.ledger-lantern:hover, .ledger-lantern.active { --tilt: -2deg; }

@keyframes drift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(4rem,-10rem,0); } }
@keyframes inspect { from { transform: translateX(-5vw) rotate(-4deg); opacity: .65; } to { transform: translateX(5vw) rotate(4deg); opacity: 1; } }
@keyframes migrate { 50% { transform: translateY(-1rem) rotate(6deg); filter: drop-shadow(0 0 .8rem rgba(158,140,255,.8)); } }
@keyframes stamp { 0%, 62%, 100% { transform: translateY(-1.2rem) rotate(-13deg); } 72% { transform: translateY(1rem) rotate(-13deg) scale(.96); } }
@keyframes rippleFlow { to { stroke-dashoffset: -140; } }
@keyframes glow { from { opacity: .68; transform: scale(.96); } to { opacity: 1; transform: scale(1.07); } }
@keyframes moth { 0%, 100% { transform: translate(0,0) rotate(0); } 35% { transform: translate(2rem,-3rem) rotate(16deg); } 70% { transform: translate(-1.4rem,2rem) rotate(-11deg); } }

@media (max-width: 800px) {
  .classification-tabs { display: none; }
  .chamber { padding: 6rem 1.1rem 4rem; }
  .drawer-pull { width: 100%; padding: 1.2rem 3rem; }
  .hands-path { width: 100%; height: 28rem; }
  .hand-cast { max-width: 58vw; }
  .skewed { margin-left: 0; }
  .drawer-slab { position: relative; width: 100%; left: auto; top: auto; margin-top: 2rem; }
  .inspection-lens { display: none; }
  .aviary, .reliquary, .lantern { grid-template-columns: 1fr; }
  .tall { writing-mode: horizontal-tb; transform: none; justify-self: start; }
  .escrow-jar { width: 92vw; }
  .thread-aviary { display: none; }
}