:root {
  --ink: #11100D;
  --vellum: #E8D9B5;
  --brass: #A77B35;
  --wax: #8F1D2C;
  --teal: #0E6F68;
  --lilac: #B7A0FF;
  --amber: #F2B84B;
  --carbon: #050504;
  --serif: "Cormorant Garamond", Cormorant, serif;
  --title: "Fraunces", serif;
  --bureau: "Commissioner", Inter, sans-serif;
  --barcode: "Libre Barcode 128 Text", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--vellum);
  background: var(--carbon);
  font-family: var(--bureau);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: .16;
  background-image: radial-gradient(circle at 20% 30%, rgba(232,217,181,.25) 0 1px, transparent 1px), radial-gradient(circle at 80% 10%, rgba(167,123,53,.18) 0 1px, transparent 1px), linear-gradient(115deg, transparent 0 48%, rgba(232,217,181,.05) 49% 51%, transparent 52%);
  background-size: 31px 37px, 47px 43px, 100% 100%;
  mix-blend-mode: screen;
}

.lamp {
  position: fixed;
  width: 52vw;
  height: 52vw;
  left: var(--lamp-x, 48%);
  top: var(--lamp-y, 28%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(242,184,75,.30), rgba(232,217,181,.09) 32%, rgba(183,160,255,.035) 43%, transparent 68%);
  filter: blur(8px);
  transition: left .55s ease, top .55s ease;
}

.index-tabs {
  position: fixed;
  left: 0;
  top: 16vh;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.index-tabs a {
  width: 42px;
  height: 34px;
  color: var(--ink);
  text-decoration: none;
  display: grid;
  place-items: center;
  font: 700 11px var(--bureau);
  background: linear-gradient(90deg, #A77B35, #F2B84B 48%, #6d4c1c);
  border-radius: 0 10px 10px 0;
  box-shadow: inset -8px 0 14px rgba(17,16,13,.35), 0 5px 20px rgba(0,0,0,.45);
  transform-origin: left center;
  transition: transform .25s ease;
}
.index-tabs a:hover, .index-tabs a.active { transform: scaleX(1.28); }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 8vw, 108px);
  background: radial-gradient(circle at 72% 22%, rgba(14,111,104,.18), transparent 34%), linear-gradient(135deg, var(--carbon), var(--ink) 48%, #090806);
}

.cabinet-face { display: grid; place-items: center; perspective: 900px; }
.diagonal-rails span {
  position: absolute;
  left: -12vw;
  width: 130vw;
  height: 18px;
  border-top: 1px solid rgba(242,184,75,.62);
  border-bottom: 1px solid rgba(5,5,4,.85);
  background: linear-gradient(90deg, transparent, rgba(167,123,53,.8), rgba(242,184,75,.44), transparent);
  transform: rotate(-13deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.diagonal-rails span:nth-child(1) { top: 18vh; }
.diagonal-rails span:nth-child(2) { top: 48vh; }
.diagonal-rails span:nth-child(3) { top: 78vh; }

.drawer-wall {
  position: absolute;
  inset: 6vh 8vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1vw;
  transform: rotateY(-12deg) rotateZ(-2deg) translateX(4vw);
  transform-style: preserve-3d;
}
.drawer {
  position: relative;
  min-height: 78vh;
  padding: 5vh 1.4vw;
  background: linear-gradient(90deg, #16140f, #2a2117 12%, #0d0c09 52%, #241c13);
  border: 1px solid rgba(167,123,53,.45);
  box-shadow: inset 0 0 0 3px rgba(232,217,181,.035), inset 24px 0 30px rgba(0,0,0,.45), 18px 0 60px rgba(0,0,0,.72);
}
.drawer.open { transform: translateZ(96px) translateX(-16px); background: linear-gradient(90deg, #2b2115, #11100D 28%, #49351f 100%); }
.drawer i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 80%;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 28px;
  background: linear-gradient(#F2B84B, #A77B35 55%, #4c3414);
  box-shadow: inset 0 7px 10px rgba(255,255,255,.16), 0 15px 30px rgba(0,0,0,.6);
}
.drawer b {
  writing-mode: vertical-rl;
  letter-spacing: .24em;
  font: 700 clamp(22px, 4vw, 58px) var(--serif);
  color: rgba(232,217,181,.82);
  text-shadow: 0 1px #050504, 0 0 18px rgba(242,184,75,.22);
}
.drawer em { position: absolute; bottom: 26px; left: 22px; color: var(--brass); font: 400 12px var(--barcode); }

.engraved-plate {
  position: relative;
  z-index: 2;
  width: min(880px, 78vw);
  padding: 34px 42px 38px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(112deg, #76531f, #F2B84B 28%, #A77B35 58%, #f7d788 70%, #4f3615);
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(5,5,4,.45), inset 0 0 38px rgba(5,5,4,.35), 0 40px 90px rgba(0,0,0,.75);
  overflow: hidden;
}
.engraved-plate::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.38) 48%, transparent 62%);
  transform: translateX(var(--beam, -70%));
  transition: transform .2s linear;
}
.engraved-plate h1 { margin: 0; font: 700 clamp(52px, 9vw, 124px) var(--serif); letter-spacing: .065em; }
.engraved-plate p { margin: 8px 0 0; text-transform: uppercase; letter-spacing: .32em; font-size: 12px; }
.barcode { font: 34px var(--barcode); color: rgba(17,16,13,.7); }
.cabinet-note { position: absolute; right: 8vw; bottom: 6vh; width: 280px; color: rgba(232,217,181,.62); line-height: 1.6; }

.vestibule { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 7vw; }
.hanging-tag {
  position: relative;
  padding: 70px 48px 48px;
  color: var(--ink);
  background: linear-gradient(140deg, #E8D9B5, #d2bd8e);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 13%);
  box-shadow: 0 45px 90px rgba(0,0,0,.62), inset 0 0 60px rgba(167,123,53,.22);
}
.hanging-tag::before { content: ""; position: absolute; top: 0; left: 18%; width: 1px; height: 130vh; background: rgba(232,217,181,.35); transform: translateY(-100%); }
.pin-hole { position: absolute; top: 25px; left: 18%; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 5px rgba(167,123,53,.5); }
.hanging-tag small, .chain-copy small { color: var(--teal); text-transform: uppercase; letter-spacing: .22em; font-weight: 700; }
h2 { margin: 12px 0 18px; font: 720 clamp(42px, 6.3vw, 86px) var(--title); line-height: .9; }
.hanging-tag p, .chain-copy p, .shadow-drawer p, .window-caption { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.6; }
.folio-stack { position: relative; height: 70vh; }
.mini-folio {
  position: absolute;
  width: min(390px, 35vw);
  min-height: 360px;
  padding: 38px;
  color: var(--ink);
  background: repeating-linear-gradient(0deg, rgba(17,16,13,.035) 0 1px, transparent 1px 18px), linear-gradient(135deg, #f0dfb7, #baa06a);
  border: 1px solid rgba(167,123,53,.8);
  box-shadow: 0 35px 70px rgba(0,0,0,.55);
  transform: rotate(var(--r));
}
.mini-folio:nth-child(1) { --r: -9deg; top: 2%; left: 6%; }
.mini-folio:nth-child(2) { --r: 5deg; top: 23%; left: 28%; }
.mini-folio:nth-child(3) { --r: -2deg; top: 45%; left: 11%; }
.mini-folio span { display: block; width: 86px; height: 86px; margin-bottom: 90px; border-radius: 50%; background: radial-gradient(circle, #b92c3e, #8F1D2C 62%, #4b1119); box-shadow: 0 8px 20px rgba(143,29,44,.4), inset -12px -10px 18px rgba(0,0,0,.28); }
.mini-folio strong { display: block; font: 700 32px var(--title); }
.mini-folio em { color: var(--teal); }

.inspection { display: grid; place-items: center; background: radial-gradient(circle at 50% 68%, rgba(167,123,53,.26), transparent 38%), linear-gradient(var(--carbon), var(--ink)); }
.desk-shadow { position: absolute; bottom: 0; width: 120vw; height: 38vh; background: radial-gradient(ellipse, rgba(232,217,181,.14), transparent 60%); }
.living-folio {
  position: relative;
  width: min(650px, 84vw);
  min-height: 760px;
  padding: 56px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255,244,208,.9), #E8D9B5 54%, #c7ad76);
  border: 14px double rgba(143,29,44,.72);
  box-shadow: 0 55px 120px rgba(0,0,0,.75), inset 0 0 0 1px rgba(5,5,4,.15);
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
}
.living-folio::after { content: "[ grant ] [ territory ] [ term ] [ sublicensing ]"; position: absolute; inset: 22px; border: 1px solid rgba(14,111,104,.38); display: grid; align-items: end; justify-items: center; padding-bottom: 13px; color: rgba(14,111,104,.5); letter-spacing: .18em; font-size: 10px; pointer-events: none; }
.corner-hole { position: absolute; top: 28px; right: 28px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); }
.guilloche { position: absolute; inset: 95px 40px auto auto; width: 180px; height: 180px; border-radius: 50%; opacity: .45; background: repeating-conic-gradient(from 0deg, transparent 0 7deg, #B7A0FF 8deg 9deg, transparent 10deg 18deg), radial-gradient(circle, transparent 42%, #0E6F68 43% 45%, transparent 46%); }
.registry-label { color: var(--teal); font-weight: 800; text-transform: uppercase; letter-spacing: .23em; }
.living-folio h2 { color: var(--wax); width: 70%; }
.living-folio header p { font: 600 18px var(--serif); letter-spacing: .14em; }
.clause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 60px; }
.clause-grid div { padding: 18px; min-height: 104px; background: rgba(17,16,13,.06); border-left: 4px solid var(--brass); }
.clause-grid small { display: block; text-transform: uppercase; color: var(--teal); letter-spacing: .18em; }
.clause-grid strong { display: block; margin-top: 12px; font: 700 24px var(--serif); }
.wax-seal { position: absolute; right: 68px; bottom: 126px; width: 134px; height: 134px; border: 0; border-radius: 50%; color: #E8D9B5; font: 700 44px var(--serif); background: radial-gradient(circle at 35% 30%, #ca4555, #8F1D2C 58%, #4c1019); box-shadow: inset -15px -18px 24px rgba(0,0,0,.25), 0 14px 35px rgba(143,29,44,.5); cursor: pointer; }
.wax-seal::before { content: ""; position: absolute; inset: -12px; border-radius: 45% 55% 48% 52%; border: 2px solid rgba(143,29,44,.55); animation: waxPulse 4s ease-in-out infinite; }
.provenance-rings { position: absolute; right: 41px; bottom: 99px; width: 188px; height: 188px; opacity: 0; transition: opacity .4s; }
.provenance-rings.active { opacity: 1; }
.provenance-rings span { position: absolute; inset: var(--i, 0); border: 1px solid #B7A0FF; border-radius: 50%; animation: ringTurn 8s linear infinite; }
.provenance-rings span:nth-child(1) { --i: 0; }
.provenance-rings span:nth-child(2) { --i: 18px; animation-direction: reverse; }
.provenance-rings span:nth-child(3) { --i: 36px; }
.fine-clause { position: absolute; left: 56px; bottom: 50px; width: 52%; font-size: 13px; line-height: 1.6; }

.chain { background: radial-gradient(circle at 20% 50%, rgba(183,160,255,.14), transparent 36%), linear-gradient(140deg, #050504, #17130d); }
.chain-svg { position: absolute; inset: 16vh 0 auto; width: 100%; height: 54vh; overflow: visible; }
.chain-svg path { fill: none; stroke: rgba(183,160,255,.55); stroke-width: 2; stroke-dasharray: 9 12; }
.chain-svg text { fill: #E8D9B5; font: 700 18px var(--bureau); letter-spacing: .16em; text-transform: uppercase; }
.ribbon { position: absolute; left: 7vw; top: 47vh; width: var(--ribbon-width, 38vw); height: 18px; background: linear-gradient(90deg, #8F1D2C, #F2B84B 55%, #8F1D2C); box-shadow: 0 10px 35px rgba(143,29,44,.38); transform: rotate(-8deg); transform-origin: left center; }
.ribbon-end { position: absolute; right: -26px; top: -16px; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #F2B84B, #A77B35); box-shadow: 0 0 0 5px rgba(232,217,181,.12); cursor: grab; }
.ribbon-end:active { cursor: grabbing; }
.chain-copy { position: absolute; right: 8vw; bottom: 12vh; width: min(520px, 45vw); }
.chain-copy h2 { color: var(--vellum); }
.seal-node { position: absolute; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: var(--vellum); background: radial-gradient(circle, #a62c3a, #8F1D2C 65%, #340910); font: 700 13px var(--bureau); text-transform: uppercase; box-shadow: 0 20px 45px rgba(0,0,0,.5); }
.n1 { left: 10vw; top: 25vh; } .n2 { left: 46vw; top: 53vh; } .n3 { right: 12vw; top: 24vh; }

.revocation { display: grid; place-items: center; background: radial-gradient(circle at 48% 50%, rgba(143,29,44,.28), transparent 42%), linear-gradient(#090706, #11100D); }
.shadow-drawer { position: relative; width: min(860px, 82vw); min-height: 520px; padding: 70px; background: linear-gradient(100deg, #120d0b, #2b1716 45%, #070604); border: 1px solid rgba(143,29,44,.7); box-shadow: inset 0 0 60px rgba(0,0,0,.75), 0 40px 100px rgba(0,0,0,.7); }
.red-mark { position: absolute; right: 50px; top: 50px; color: rgba(143,29,44,.34); border: 8px solid rgba(143,29,44,.28); transform: rotate(-13deg); padding: 10px 20px; font: 800 42px var(--bureau); letter-spacing: .16em; animation: stampFade 6s ease-in-out infinite; }
.shadow-drawer h2 { color: #E8D9B5; width: 65%; }
.shadow-drawer p { width: min(550px, 70%); color: rgba(232,217,181,.75); }
.date-wheel { display: flex; gap: 12px; margin-top: 56px; }
.date-wheel span { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; color: var(--ink); background: conic-gradient(#A77B35, #F2B84B, #A77B35, #4f3512, #A77B35); font: 700 24px var(--title); animation: wheel 9s linear infinite; }
.date-wheel span:nth-child(2) { animation-duration: 11s; } .date-wheel span:nth-child(3) { animation-duration: 13s; }
.ink-bloom { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(143,29,44,.28), rgba(143,29,44,.1) 44%, transparent 66%); animation: inkBloom 7s ease-in-out infinite; }

.public-ledger { display: grid; place-items: center; background: radial-gradient(circle at 50% 18%, rgba(242,184,75,.22), transparent 25%), linear-gradient(180deg, #050504, #11100D 55%, #0E6F68 170%); }
.ledger-window { position: relative; width: min(1040px, 84vw); min-height: 680px; padding: 58px; border: 1px solid rgba(232,217,181,.35); background: linear-gradient(135deg, rgba(232,217,181,.08), rgba(14,111,104,.16)); box-shadow: inset 0 0 120px rgba(183,160,255,.08), 0 0 90px rgba(242,184,75,.12); }
.ledger-window::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(167,123,53,.36); pointer-events: none; }
.ledger-window h2 { width: min(760px, 80%); }
.seal-field { position: absolute; inset: 190px 80px 110px; }
.floating-seal { position: absolute; width: 126px; height: 126px; border: 0; border-radius: 50%; color: #E8D9B5; background: radial-gradient(circle at 32% 26%, #c34858, #8F1D2C 64%, #3b0b12); box-shadow: inset -14px -14px 22px rgba(0,0,0,.32), 0 0 45px rgba(183,160,255,.18); text-transform: uppercase; font: 800 14px var(--bureau); letter-spacing: .18em; animation: floatSeal 6s ease-in-out infinite; }
.floating-seal::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(183,160,255,.52); }
.s1 { left: 4%; top: 12%; } .s2 { left: 30%; top: 42%; animation-delay: -2s; } .s3 { left: 54%; top: 8%; animation-delay: -1s; } .s4 { right: 4%; top: 36%; animation-delay: -3s; } .s5 { left: 72%; top: 64%; animation-delay: -4s; }
.window-caption { position: absolute; left: 58px; bottom: 42px; width: min(660px, 72%); color: rgba(232,217,181,.72); }

.is-visible .hanging-tag, .is-visible .living-folio, .is-visible .shadow-drawer, .is-visible .ledger-window { animation: objectArrive 1.2s cubic-bezier(.2,.75,.18,1) both; }
.gold-speck { position: fixed; width: 4px; height: 4px; border-radius: 50%; background: #F2B84B; pointer-events: none; z-index: 5; animation: speck 1.8s ease-out forwards; }

@keyframes waxPulse { 50% { transform: scale(1.08) rotate(9deg); opacity: .5; } }
@keyframes ringTurn { to { transform: rotate(360deg); } }
@keyframes wheel { to { transform: rotate(360deg); } }
@keyframes inkBloom { 0%,100% { transform: scale(.78); opacity: .35; } 50% { transform: scale(1.35); opacity: .14; } }
@keyframes stampFade { 0%, 100% { opacity: .25; transform: rotate(-13deg) scale(.98); } 42% { opacity: .9; transform: rotate(-13deg) scale(1.04); } }
@keyframes floatSeal { 50% { transform: translateY(-26px) rotate(4deg); } }
@keyframes objectArrive { from { opacity: .15; transform: translateY(60px) rotateX(8deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
@keyframes speck { to { transform: translate(var(--sx), var(--sy)); opacity: 0; } }

@media (max-width: 820px) {
  .scene { padding: 74px 28px; }
  .drawer-wall { grid-template-columns: repeat(2, 1fr); inset: 8vh 4vw; opacity: .75; }
  .drawer { min-height: 38vh; }
  .vestibule { grid-template-columns: 1fr; }
  .folio-stack { height: 56vh; }
  .mini-folio { width: 62vw; }
  .living-folio { min-height: 720px; padding: 36px; }
  .clause-grid { grid-template-columns: 1fr; }
  .wax-seal { right: 36px; bottom: 120px; }
  .fine-clause { left: 36px; bottom: 34px; width: 55%; }
  .chain-copy { width: 78vw; right: auto; left: 28px; bottom: 8vh; }
  .shadow-drawer { padding: 42px; }
  .shadow-drawer h2, .shadow-drawer p { width: 100%; }
  .red-mark { position: relative; display: inline-block; right: auto; top: auto; font-size: 28px; margin-bottom: 24px; }
  .seal-field { inset: 240px 36px 110px; }
}