:root {
  --ink: #09070A;
  --aubergine: #17101A;
  --parchment: #F3E4C4;
  --vellum: #C9B077;
  --oxblood: #7A1F2B;
  --brass: #B8893B;
  --green: #0C5B47;
  --violet: #8B5CF6;
  --ember: #E54B3F;
  --bodoni: "Bodoni Moda", serif;
  --mono: "Azeret Mono", monospace;
  --news: "Newsreader", serif;
  --stamp: "Chivo", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--parchment);
  font-family: var(--news);
  background:
    radial-gradient(circle at 50% 8%, rgba(184, 137, 59, .18), transparent 28rem),
    radial-gradient(circle at 15% 40%, rgba(122, 31, 43, .2), transparent 34rem),
    linear-gradient(180deg, var(--ink), var(--aubergine) 35%, var(--ink) 100%);
  overflow-x: hidden;
}

.grain, .inspection-sweep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.grain {
  opacity: .14;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 12% 24%, rgba(243, 228, 196, .2) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(115deg, transparent 0 7px, rgba(201, 176, 119, .08) 8px 9px);
}
.inspection-sweep {
  opacity: .25;
  background: linear-gradient(105deg, transparent 0 48%, rgba(139, 92, 246, .18) 50%, transparent 53%);
  transform: translateX(-120%);
  animation: sweep 9s ease-in-out infinite;
}

.settlement-cord {
  position: fixed;
  top: 9vh;
  right: 2.5vw;
  width: 1px;
  height: 82vh;
  background: linear-gradient(var(--brass), var(--oxblood), var(--brass));
  z-index: 60;
}
.cord-knot {
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-7px, -7px);
  box-shadow: 0 0 0 4px rgba(184, 137, 59, .08);
  transition: .4s ease;
}
.cord-knot:nth-child(1) { top: 0; }
.cord-knot:nth-child(2) { top: 19%; }
.cord-knot:nth-child(3) { top: 38%; }
.cord-knot:nth-child(4) { top: 57%; }
.cord-knot:nth-child(5) { top: 76%; }
.cord-knot:nth-child(6) { top: 100%; }
.cord-knot span {
  position: absolute;
  right: 22px;
  top: -4px;
  color: var(--vellum);
  font: 600 10px var(--mono);
  opacity: .55;
  white-space: nowrap;
}
.cord-knot::after {
  content: attr(data-chamber);
  position: absolute;
  right: 62px;
  top: -5px;
  color: var(--parchment);
  font: 700 9px var(--stamp);
  letter-spacing: .16em;
  opacity: 0;
  white-space: nowrap;
  transition: .35s ease;
}
.cord-knot.active, .cord-knot:hover { background: var(--brass); box-shadow: 0 0 22px rgba(184, 137, 59, .55); }
.cord-knot.active::after, .cord-knot:hover::after { opacity: .8; }

.chamber {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: 8vh 8vw;
}
.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(201, 176, 119, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 176, 119, .035) 1px, transparent 1px);
  background-size: 88px 88px;
  transform: rotate(-8deg) scale(1.2);
}
.lamp {
  position: absolute;
  top: -18vh;
  left: 50%;
  width: 32vw;
  height: 62vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0, rgba(243, 228, 196, .55), rgba(184, 137, 59, .15) 35%, transparent 72%);
  filter: blur(12px);
}
.floor-rings {
  position: absolute;
  inset: 8vh 12vw;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 58px, rgba(184, 137, 59, .16) 60px 62px),
    radial-gradient(ellipse at center, transparent 42%, rgba(9, 7, 10, .55) 75%);
  transform: rotate(-4deg);
}

.oval-desk {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(76vw, 980px);
  height: min(55vw, 600px);
  transform: translate(-50%, -50%) rotate(-3deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(23, 16, 26, .94) 0 40%, rgba(9, 7, 10, .98) 59%, rgba(184, 137, 59, .9) 60% 62%, rgba(9, 7, 10, .96) 63%),
    linear-gradient(135deg, var(--ink), var(--aubergine));
  box-shadow: 0 45px 120px rgba(0, 0, 0, .8), inset 0 0 70px rgba(184, 137, 59, .22);
}
.desk-rim {
  position: absolute;
  inset: 8%;
  border: 2px solid rgba(184, 137, 59, .8);
  border-radius: 50%;
  box-shadow: inset 0 0 22px rgba(184, 137, 59, .2), 0 0 18px rgba(184, 137, 59, .18);
}
.desk-rim span {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%) rotate(2deg);
  font: 900 clamp(3.6rem, 10vw, 10rem) var(--bodoni);
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--brass);
  text-shadow: 0 0 30px rgba(184, 137, 59, .22);
}
.ticker-ring {
  position: absolute;
  inset: 18%;
  display: grid;
  place-items: start center;
  padding-top: 12px;
  border-radius: 50%;
  color: var(--vellum);
  font: 600 11px var(--mono);
  letter-spacing: .26em;
  opacity: .66;
  animation: breathe 5s ease-in-out infinite;
}
.artifact.medallion {
  position: absolute;
  left: 50%; top: 46%;
  width: 160px; height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #F3E4C4, #C9B077 24%, #B8893B 48%, #7A1F2B 72%, #09070A 100%);
  box-shadow: 0 0 55px rgba(184, 137, 59, .55), inset 0 0 25px rgba(9, 7, 10, .55);
  animation: medallionSpin 15s linear infinite;
}
.seal-face {
  position: absolute; inset: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px dashed rgba(243, 228, 196, .58);
  color: var(--ink);
  text-align: center;
}
.seal-face b { font: 900 4rem var(--bodoni); line-height: .8; }
.seal-face small { font: 800 9px var(--stamp); text-transform: uppercase; letter-spacing: .18em; }
.orbit { position: absolute; inset: 2%; border-radius: 50%; animation: orbit 28s linear infinite; }
.orbit-b { inset: 14%; animation-duration: 38s; animation-direction: reverse; }
.orbit span {
  position: absolute;
  padding: 9px 15px;
  background: rgba(243, 228, 196, .9);
  color: var(--ink);
  font: 700 10px var(--mono);
  letter-spacing: .1em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.bid-slip { top: 9%; left: 18%; transform: rotate(-17deg); clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%); }
.wax-tag { top: 58%; right: 7%; background: var(--oxblood) !important; color: var(--parchment) !important; border-radius: 50%; }
.escrow-tray { bottom: 10%; left: 20%; background: rgba(139, 92, 246, .22) !important; color: var(--parchment) !important; border: 1px solid rgba(139, 92, 246, .65); }
.certificate { top: 20%; right: 12%; transform: rotate(14deg); }
.small { bottom: 14%; right: 18%; }
.red { left: 9%; top: 62%; background: var(--ember) !important; }
.wordmark {
  position: absolute;
  left: 7vw; bottom: 9vh;
  margin: 0;
  font: 900 clamp(4rem, 13vw, 12rem) var(--bodoni);
  letter-spacing: .04em;
  color: rgba(243, 228, 196, .06);
  -webkit-text-stroke: 1px rgba(243, 228, 196, .24);
}
.chamber-subtitle {
  position: absolute;
  left: 8vw; bottom: 7vh;
  color: var(--vellum);
  font: 600 12px var(--mono);
  letter-spacing: .38em;
  text-transform: uppercase;
}
.pinned-label, .inspection-label {
  position: absolute;
  max-width: 360px;
  padding: 24px 26px;
  background: linear-gradient(135deg, rgba(243, 228, 196, .93), rgba(201, 176, 119, .87));
  color: var(--ink);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .42);
  transform: rotate(-4deg);
}
.pinned-label::before, .inspection-label::before {
  content: "";
  position: absolute; top: 10px; right: 12px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--brass), var(--oxblood));
}
.pinned-label span, .inspection-label h2 {
  margin: 0 0 12px;
  font-family: var(--bodoni);
  font-weight: 900;
}
.inspection-label h2 { font-size: clamp(2.1rem, 4vw, 4.8rem); line-height: .9; }
.pinned-label p, .inspection-label p { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.label-left { top: 18vh; left: 8vw; }

.weighing { background: radial-gradient(circle at 70% 42%, rgba(184, 137, 59, .16), transparent 28rem); }
.slanted-counter {
  position: absolute; inset: 30vh -10vw auto 22vw;
  height: 34vh;
  background: linear-gradient(110deg, rgba(184, 137, 59, .32), rgba(23, 16, 26, .7), rgba(9, 7, 10, .9));
  transform: rotate(-12deg);
  border-top: 1px solid rgba(184, 137, 59, .6);
  border-bottom: 1px solid rgba(184, 137, 59, .32);
}
.hanging-scale { position: absolute; left: 13vw; top: 16vh; width: 360px; height: 330px; }
.scale-beam { position: absolute; top: 70px; left: 20px; width: 320px; height: 3px; background: var(--brass); transform: rotate(-5deg); box-shadow: 0 0 16px rgba(184, 137, 59, .5); }
.scale-pan {
  position: absolute; top: 150px; width: 120px; height: 40px; border-radius: 50%;
  border: 1px solid var(--brass); color: var(--vellum); display: grid; place-items: center;
  font: 700 11px var(--mono); letter-spacing: .22em;
}
.pan-left { left: 28px; animation: panSwing 4s ease-in-out infinite; }
.pan-right { right: 35px; animation: panSwing 4s ease-in-out infinite reverse; }
.scale-pan::before { content: ""; position: absolute; bottom: 36px; width: 1px; height: 82px; background: rgba(184, 137, 59, .55); }
.deed-stack { position: absolute; left: 34vw; top: 26vh; width: min(54vw, 720px); height: 420px; transform-style: preserve-3d; }
.deed-strip {
  position: absolute; left: 0; right: 0; min-height: 78px; padding: 18px 28px;
  color: var(--ink); background: linear-gradient(90deg, var(--parchment), var(--vellum));
  border-left: 11px solid var(--brass); box-shadow: 0 18px 36px rgba(0, 0, 0, .38);
  transition: transform .5s ease, filter .5s ease;
}
.deed-strip strong { display: block; font: 900 13px var(--stamp); text-transform: uppercase; letter-spacing: .22em; color: var(--oxblood); }
.deed-strip span { font: 400 1.4rem var(--news); }
.strip-use { top: 0; transform: rotate(-7deg); }
.strip-territory { top: 92px; transform: translateX(46px) rotate(4deg); }
.strip-duration { top: 184px; transform: translateX(-22px) rotate(-3deg); }
.strip-revoke { top: 276px; transform: translateX(76px) rotate(7deg); border-left-color: var(--ember); }
.deed-stack:hover .deed-strip { filter: brightness(1.08); }
.clause-codes { position: absolute; left: 40vw; bottom: 11vh; display: flex; gap: 18px; flex-wrap: wrap; }
.clause-codes span { font: 700 10px var(--mono); color: var(--vellum); border: 1px solid rgba(201,176,119,.35); padding: 8px 12px; background: rgba(9,7,10,.58); }
.inspection-label.right { right: 8vw; top: 12vh; transform: rotate(3deg); }

.carousel { display: grid; place-items: center; }
.carousel-rail {
  position: relative; width: min(72vw, 760px); aspect-ratio: 1; border: 1px solid rgba(184, 137, 59, .48); border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .12), transparent 33%, rgba(184, 137, 59, .08) 34%, transparent 58%);
  animation: slowRotate 34s linear infinite;
}
.claim-strip {
  position: absolute; width: 210px; padding: 18px 22px; color: var(--ink);
  background: var(--parchment); box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
  font: 900 13px var(--stamp); text-transform: uppercase; letter-spacing: .16em;
  transform-origin: 50% 380px;
}
.claim-a { top: 4%; left: 50%; transform: translateX(-50%) rotate(4deg); border-top: 7px solid var(--green); }
.claim-b { right: -4%; top: 45%; transform: rotate(88deg); border-top: 7px solid var(--violet); }
.claim-c { bottom: 4%; left: 50%; transform: translateX(-50%) rotate(182deg); border-top: 7px solid var(--brass); }
.claim-d { left: -4%; top: 45%; transform: rotate(270deg); border-top: 7px solid var(--oxblood); }
.guilloche { position: absolute; width: min(78vw, 850px); opacity: .38; overflow: visible; }
.guilloche path { fill: none; stroke: var(--brass); stroke-width: 1.3; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: draw 8s ease-in-out infinite alternate; }
.inspection-label.left { left: 7vw; top: 16vh; transform: rotate(-3deg); }
.floating-stamp { position: absolute; right: 11vw; bottom: 18vh; transform: rotate(12deg); border: 3px solid var(--oxblood); color: var(--oxblood); padding: 18px 24px; font: 900 18px var(--stamp); letter-spacing: .16em; opacity: .72; animation: stampPulse 3s ease-in-out infinite; }

.balconies { background: radial-gradient(circle at 25% 55%, rgba(122, 31, 43, .26), transparent 30rem); }
.diagonal-rails { position: absolute; inset: 15vh -12vw; background: repeating-linear-gradient(148deg, transparent 0 120px, rgba(184,137,59,.42) 121px 123px, transparent 124px 180px); }
.balcony { position: absolute; width: 54vw; height: 112px; border-top: 2px solid var(--brass); background: linear-gradient(180deg, rgba(184,137,59,.18), rgba(9,7,10,.18)); transform: rotate(-10deg); }
.balcony-top { left: 34vw; top: 16vh; }
.balcony-mid { left: 17vw; top: 43vh; transform: rotate(-10deg) translateX(5vw); }
.balcony-low { left: 28vw; bottom: 16vh; }
.nameplate { position: absolute; top: -34px; left: 24px; padding: 8px 14px; color: var(--ink); background: var(--brass); font: 900 10px var(--stamp); letter-spacing: .18em; }
.empty-chair { position: absolute; left: 42%; top: 16px; width: 54px; height: 64px; border: 2px solid rgba(201,176,119,.55); border-radius: 22px 22px 4px 4px; }
.empty-chair::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -14px; height: 2px; background: rgba(201,176,119,.45); }
.sliding-slip { position: absolute; top: 42px; left: 8%; padding: 12px 18px; background: var(--parchment); color: var(--green); font: 700 11px var(--mono); letter-spacing: .1em; animation: slideBid 6s ease-in-out infinite; }
.sliding-slip.contested { color: var(--ember); animation-delay: -1.8s; }
.balcony-note { left: 7vw; top: 17vh; transform: rotate(4deg); }
.transfer-ribbon { position: absolute; right: -12vw; top: 55vh; width: 75vw; padding: 13px 0; background: var(--oxblood); color: var(--parchment); font: 900 12px var(--stamp); letter-spacing: .25em; text-align: center; transform: rotate(17deg); box-shadow: 0 20px 50px rgba(0,0,0,.44); }

.vault { display: grid; place-items: center; perspective: 1000px; }
.vault-lantern { position: absolute; top: 0; width: 24vw; height: 65vh; background: radial-gradient(ellipse at top, rgba(243,228,196,.42), rgba(184,137,59,.1) 42%, transparent 72%); filter: blur(8px); }
.escrow-cube { position: relative; width: 330px; height: 330px; transform-style: preserve-3d; transform: rotateX(-17deg) rotateY(35deg); transition: transform .25s ease; }
.cube-face { position: absolute; inset: 0; border: 1px solid rgba(139,92,246,.72); background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(243,228,196,.04)); box-shadow: inset 0 0 48px rgba(139,92,246,.18), 0 0 30px rgba(139,92,246,.26); }
.cube-face.front { transform: translateZ(165px); display: grid; place-items: end center; padding: 28px; font: 700 11px var(--mono); color: var(--vellum); letter-spacing: .18em; text-transform: uppercase; }
.cube-face.back { transform: translateZ(-165px); }
.cube-face.top { transform: rotateX(90deg) translateZ(165px); }
.cube-face.side { transform: rotateY(90deg) translateZ(165px); }
.contained-right { position: absolute; inset: 42px; display: grid; place-items: center; transform: translateZ(20px); color: var(--parchment); font: 900 4.8rem var(--bodoni); text-align: center; text-shadow: 0 0 18px var(--violet); }
.contained-right small { display: block; font: 700 10px var(--mono); letter-spacing: .2em; color: var(--vellum); }
.uv-band { position: absolute; left: 0; right: 0; height: 90px; background: linear-gradient(90deg, transparent, rgba(139,92,246,.42), transparent); mix-blend-mode: screen; animation: scan 4s ease-in-out infinite; }
.vault-note { right: 8vw; bottom: 12vh; transform: rotate(-4deg); }
.registry-beads { position: absolute; left: 10vw; bottom: 19vh; width: 320px; height: 2px; background: var(--brass); display: flex; justify-content: space-around; align-items: center; transform: rotate(-6deg); }
.registry-beads span { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--vellum), var(--brass), var(--oxblood)); animation: bead 5s ease-in-out infinite; }
.registry-beads span:nth-child(even) { animation-delay: -2s; }

.ledger { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(184,137,59,.2), transparent 36rem); }
.ledger-book { position: relative; width: min(82vw, 1020px); height: 620px; display: grid; grid-template-columns: 1fr 1fr; transform: rotate(-2deg); filter: drop-shadow(0 42px 80px rgba(0,0,0,.65)); transition: transform .25s ease; }
.page { position: relative; padding: 58px; color: var(--ink); background: linear-gradient(135deg, var(--parchment), var(--vellum)); border: 1px solid rgba(122,31,43,.25); overflow: hidden; }
.page-left { border-radius: 22px 4px 4px 22px; }
.page-right { border-radius: 4px 22px 22px 4px; box-shadow: inset 24px 0 34px rgba(122,31,43,.16); }
.page h2 { margin: 0 0 28px; font: 900 clamp(3rem, 6vw, 6rem)/.88 var(--bodoni); color: var(--oxblood); }
.page p { font-size: 1.42rem; line-height: 1.42; max-width: 420px; }
.ledger-lines span { display: block; height: 1px; margin: 28px 0; background: rgba(122,31,43,.32); }
.entry-code { font: 700 12px var(--mono); letter-spacing: .18em; color: var(--green); }
.final-fragments { position: absolute; left: 58px; right: 58px; top: 145px; height: 175px; }
.final-fragments i { position: absolute; display: block; height: 48px; background: rgba(122,31,43,.18); border-left: 7px solid var(--brass); }
.final-fragments i:nth-child(1) { left: 0; width: 66%; top: 0; }
.final-fragments i:nth-child(2) { right: 0; width: 48%; top: 42px; border-left-color: var(--green); }
.final-fragments i:nth-child(3) { left: 12%; width: 70%; top: 88px; border-left-color: var(--violet); }
.final-fragments i:nth-child(4) { right: 12%; width: 38%; top: 134px; border-left-color: var(--ember); }
.stamp-button { position: absolute; right: 70px; bottom: 84px; border: 3px solid var(--oxblood); background: transparent; color: var(--oxblood); padding: 18px 26px; font: 900 18px var(--stamp); letter-spacing: .18em; transform: rotate(-7deg); cursor: pointer; }
.stamp-button.stamped { animation: stampHit .5s ease; background: rgba(122,31,43,.1); }
.ink-bloom { position: absolute; right: 165px; bottom: 137px; width: 20px; height: 20px; border-radius: 50%; background: var(--oxblood); opacity: 0; transform: scale(.2); filter: blur(.4px); }
.ink-bloom.bloom { animation: bloom 1.4s ease forwards; }
.closing-bell { position: absolute; top: 12vh; left: 50%; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; color: var(--brass); font-size: 4rem; animation: bell 4s ease-in-out infinite; }

@keyframes sweep { 0%, 58% { transform: translateX(-120%); } 72%, 100% { transform: translateX(120%); } }
@keyframes breathe { 50% { opacity: 1; text-shadow: 0 0 18px var(--brass); } }
@keyframes medallionSpin { to { transform: translate(-50%, -50%) rotateY(360deg) rotateZ(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes panSwing { 50% { transform: translateY(18px) rotate(4deg); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stampPulse { 50% { opacity: 1; transform: rotate(12deg) scale(1.04); } }
@keyframes slideBid { 50% { transform: translateX(38vw); } }
@keyframes scan { 0%,100% { top: 18vh; opacity: .18; } 50% { top: 68vh; opacity: .72; } }
@keyframes bead { 50% { transform: translateX(28px); } }
@keyframes stampHit { 35% { transform: rotate(-7deg) scale(.88); } 70% { transform: rotate(-7deg) scale(1.08); } }
@keyframes bloom { to { opacity: .78; transform: scale(7.5); } }
@keyframes bell { 50% { transform: rotate(5deg); text-shadow: 0 0 20px var(--brass); } }

@media (max-width: 800px) {
  .settlement-cord { right: 14px; }
  .chamber { padding: 7vh 5vw; }
  .oval-desk { width: 94vw; height: 68vh; }
  .artifact.medallion { width: 120px; height: 120px; }
  .deed-stack { left: 7vw; width: 82vw; top: 34vh; }
  .hanging-scale { left: 4vw; transform: scale(.72); transform-origin: left top; }
  .inspection-label.right, .inspection-label.left, .balcony-note, .vault-note, .pinned-label { left: 6vw; right: auto; top: 8vh; max-width: 76vw; }
  .carousel-rail { width: 86vw; }
  .claim-strip { width: 155px; font-size: 10px; }
  .balcony { width: 82vw; left: 8vw; }
  .ledger-book { height: auto; grid-template-columns: 1fr; }
  .page { min-height: 430px; padding: 34px; }
}