:root {
  /* DESIGN typography parser tokens: Tight* Tight** copy numbers */
  --ink-black: #080706;
  --vellum-cream: #F2E4C7;
  --aged-copper: #B87333;
  --bureau-green: #1F4B3A;
  --stamp-red: #8D1F1F;
  --carbon-blue: #182B45;
  --gold-dust: #D6AA4C;
  --serif: "Cormorant Garamond", serif;
  --body: "Inter Tight", sans-serif;
  --mono: "Space Mono", monospace;
  --ceremony: "Cinzel", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-black);
  color: var(--vellum-cream);
  font-family: var(--body);
  overflow-x: hidden;
}

.desk-grain,
.lamp-glow,
.dust-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.desk-grain {
  background:
    linear-gradient(115deg, rgba(31, 75, 58, .22), transparent 35%, rgba(24, 43, 69, .35) 70%, transparent),
    repeating-linear-gradient(91deg, rgba(242, 228, 199, .025) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 30% 10%, rgba(184, 115, 51, .14), transparent 28%),
    var(--ink-black);
  transform: perspective(900px) rotateX(2deg) scale(1.02);
}

.lamp-glow {
  background: radial-gradient(circle at 42% 22%, rgba(214, 170, 76, .36), rgba(184, 115, 51, .11) 23%, transparent 49%);
  mix-blend-mode: screen;
  opacity: .9;
}

.dust-field span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-dust);
  opacity: .3;
  animation: dustDrift linear infinite;
}

@keyframes dustDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28px, -80px, 0); }
}

.object-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  width: 126px;
}

.nav-tab {
  position: relative;
  border: 1px solid rgba(184, 115, 51, .45);
  border-left: 9px solid var(--aged-copper);
  background: rgba(8, 7, 6, .72);
  color: rgba(242, 228, 199, .68);
  padding: 9px 12px;
  font-family: var(--ceremony);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.nav-tab span {
  display: block;
  color: var(--gold-dust);
  font-family: var(--mono);
  font-size: 9px;
}

.nav-tab.active {
  color: var(--vellum-cream);
  background: rgba(31, 75, 58, .74);
  transform: translateX(-13px);
}

.ribbon-bookmark {
  position: absolute;
  right: -10px;
  top: 0;
  width: 6px;
  height: 42px;
  background: linear-gradient(var(--stamp-red), #4d0f0f);
  box-shadow: 0 0 18px rgba(141, 31, 31, .55);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.desk-scene { position: relative; z-index: 5; }

.station {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 7vw 9vw;
  isolation: isolate;
}

.station::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(214, 170, 76, .08);
  transform: rotate(-2deg);
  pointer-events: none;
}

.copper-rail {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--aged-copper), var(--gold-dust), var(--aged-copper), transparent);
  box-shadow: 0 0 20px rgba(184, 115, 51, .25);
}

.rail-top { top: 12%; left: -8%; width: 78%; height: 2px; transform: rotate(-8deg); }
.rail-left { bottom: 10%; left: 12%; width: 58%; height: 2px; transform: rotate(63deg); }

.brass-nameplate {
  position: absolute;
  top: 12vh;
  left: 8vw;
  width: min(560px, 80vw);
  padding: 18px 32px 22px;
  border: 1px solid rgba(214, 170, 76, .7);
  background: linear-gradient(135deg, rgba(184, 115, 51, .42), rgba(214, 170, 76, .18), rgba(8, 7, 6, .62));
  transform: rotate(-3deg);
  box-shadow: 0 28px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(242, 228, 199, .22);
}

.microline,
.serial {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dust);
}

h1, h2, h3 {
  font-family: var(--serif);
  margin: 0;
  font-weight: 600;
  letter-spacing: .045em;
}

h1 { font-size: clamp(54px, 9vw, 132px); line-height: .82; color: var(--vellum-cream); text-shadow: 0 1px 0 #000, 0 0 18px rgba(214, 170, 76, .16); }
h2 { font-size: clamp(42px, 7vw, 104px); line-height: .9; }
h3 { font-size: clamp(28px, 3vw, 44px); }
p { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.35; }

.licence-folio {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: min(620px, 78vw);
  height: min(620px, 70vh);
}

.vellum-sheet,
.licence-card,
.held-note,
.archive-card,
.chapter-slip {
  background:
    radial-gradient(circle at 20% 15%, rgba(214, 170, 76, .24), transparent 24%),
    repeating-linear-gradient(0deg, rgba(8,7,6,.035) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, rgba(242, 228, 199, .96), rgba(242, 228, 199, .82));
  color: var(--ink-black);
  border: 1px solid rgba(184, 115, 51, .42);
  box-shadow: 0 36px 70px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,255,255,.22);
}

.vellum-sheet { position: absolute; padding: 34px; }
.sheet-primary { inset: 5% 4% 6% 0; transform: rotate(5deg); animation: folioSlide 1.4s cubic-bezier(.2,.8,.16,1) both; }
.ghost-sheet { inset: 11% 9% 0 7%; opacity: .32; }
.ghost-a { transform: rotate(-7deg); background-color: rgba(242,228,199,.5); }
.ghost-b { transform: rotate(13deg) translate(28px, -18px); background-color: rgba(24,43,69,.28); }

@keyframes folioSlide {
  from { transform: translate(38vw, 12vh) rotate(17deg); opacity: 0; }
  to { transform: translate(0, 0) rotate(5deg); opacity: 1; }
}

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 42px; }
.stamp-red {
  display: inline-block;
  color: var(--stamp-red);
  border: 3px solid var(--stamp-red);
  padding: 6px 10px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
}
.tilted { transform: rotate(-8deg); }
.microprint-strip,
.perforated-slip,
.redacted-strip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.microprint-strip { position: absolute; bottom: 18px; left: 34px; right: 34px; border-top: 1px dashed rgba(8,7,6,.32); padding-top: 10px; }

.guilloche-field {
  position: absolute;
  inset: 14px;
  opacity: .16;
  background:
    radial-gradient(ellipse at center, transparent 30%, var(--aged-copper) 31% 32%, transparent 33%),
    repeating-radial-gradient(ellipse at center, transparent 0 10px, rgba(31,75,58,.8) 11px 12px);
  border-radius: 50%;
  animation: guillochePulse 6s ease-in-out infinite;
}

@keyframes guillochePulse { 50% { transform: scale(1.04) rotate(2deg); opacity: .24; } }

.broker-ticket {
  position: absolute;
  left: 14vw;
  bottom: 12vh;
  width: 260px;
  padding: 20px 22px;
  border: 1px dashed rgba(214, 170, 76, .55);
  background: rgba(31, 75, 58, .76);
  color: var(--vellum-cream);
  transform: rotate(7deg);
  box-shadow: 0 24px 44px rgba(0,0,0,.45);
}
.broker-ticket span { display:block; font-family: var(--ceremony); color: var(--gold-dust); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.broker-ticket b { font-family: var(--serif); font-size: 30px; font-weight: 600; }

.chapter-slip {
  position: absolute;
  max-width: 470px;
  padding: 34px;
  transform: rotate(-4deg);
}
.station-reading .chapter-slip { left: 9vw; top: 18vh; }
.chapter-slip.narrow { right: 8vw; top: 14vh; transform: rotate(5deg); }

.clause-table { position: absolute; right: 10vw; bottom: 8vh; width: min(700px, 76vw); height: 62vh; }
.clause-sheet { inset: 0; transform: rotate(3deg); padding-top: 70px; }
.clause-line { font-family: var(--mono); font-size: clamp(14px, 1.5vw, 19px); border-bottom: 1px solid rgba(8,7,6,.18); padding: 13px 0; }
.clause-loupe {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  left: 52%;
  top: 34%;
  border: 10px solid rgba(184, 115, 51, .78);
  background: radial-gradient(circle at 40% 30%, rgba(242,228,199,.38), rgba(24,43,69,.2));
  box-shadow: 0 26px 46px rgba(0,0,0,.36), inset 0 0 38px rgba(255,255,255,.18);
  backdrop-filter: blur(1px) contrast(1.35) saturate(1.3);
  transform: translate(-50%, -50%) rotate(-10deg);
}
.clause-loupe::after { content:""; position:absolute; width: 92px; height: 16px; right: -72px; bottom: 12px; background: var(--aged-copper); transform: rotate(38deg); border-radius: 12px; }
.clause-loupe span { position:absolute; inset:auto 0 42%; text-align:center; font-family:var(--mono); color:var(--stamp-red); font-size: 12px; letter-spacing:.15em; }
.perforated-slip { position: absolute; left: 17vw; bottom: 12vh; color: var(--ink-black); background: var(--vellum-cream); padding: 16px 30px; border-left: 10px dotted var(--ink-black); transform: rotate(2deg); }

.matching-board { position: absolute; inset: 20vh 12vw auto 8vw; height: 56vh; }
.licence-card { position: absolute; width: min(380px, 35vw); min-height: 300px; padding: 30px; }
.left-card { left: 0; top: 8%; transform: rotate(-8deg); }
.right-card { right: 0; bottom: 2%; transform: rotate(7deg); }
.transfer-arrows { position: absolute; left: 43%; top: 42%; width: 250px; height: 90px; transform: rotate(-9deg); }
.transfer-arrows i { display:block; height:2px; margin: 22px 0; background: linear-gradient(90deg, transparent, var(--gold-dust), var(--aged-copper)); position:relative; animation: arrowPulse 2.4s ease-in-out infinite; }
.transfer-arrows i::after { content:""; position:absolute; right:0; top:-5px; border-left: 13px solid var(--aged-copper); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.transfer-arrows i:nth-child(2) { animation-delay:.25s; }
.transfer-arrows i:nth-child(3) { animation-delay:.5s; }
@keyframes arrowPulse { 50% { filter: drop-shadow(0 0 12px var(--gold-dust)); transform: translateX(18px); } }
.stamp-wheel { position:absolute; left:43%; bottom:11vh; width:180px; height:180px; border-radius:50%; border: 2px solid var(--aged-copper); background: rgba(8,7,6,.74); box-shadow: inset 0 0 34px rgba(214,170,76,.12), 0 22px 50px rgba(0,0,0,.5); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.stamp-wheel span { position:absolute; inset: 16px; color: var(--gold-dust); font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing:.14em; text-align:center; transform-origin: center 74px; }
.stamp-wheel span:nth-child(2) { transform: rotate(90deg); }
.stamp-wheel span:nth-child(3) { transform: rotate(180deg); }
.stamp-wheel span:nth-child(4) { transform: rotate(270deg); }

.escrow-drawer { position:absolute; left: 8vw; right: 9vw; bottom: 12vh; height: 54vh; perspective: 900px; }
.drawer-face { position:absolute; left:0; right:0; bottom:0; height: 185px; padding: 38px 54px; background: linear-gradient(135deg, #17392c, var(--bureau-green), #10261e); border: 1px solid rgba(214,170,76,.34); box-shadow: 0 38px 80px rgba(0,0,0,.72); z-index:3; transform: translateY(0); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.drawer-face::after { content:""; position:absolute; left:50%; top: 24px; width:190px; height:24px; transform:translateX(-50%); border: 2px solid var(--aged-copper); border-radius: 20px; }
.drawer-face span { font-family: var(--ceremony); letter-spacing:.18em; color: var(--gold-dust); }
.drawer-face b { display:block; margin-top: 32px; font-family: var(--mono); color: rgba(242,228,199,.75); }
.drawer-cavity { position:absolute; left:4%; right:4%; bottom:150px; height: 260px; background: linear-gradient(#020201, rgba(24,43,69,.44)); border: 1px solid rgba(184,115,51,.22); overflow:hidden; }
.held-note { position:absolute; left:50%; bottom: -15px; width: 420px; padding:28px; transform: translateX(-50%) rotate(-3deg); }
.escrow-drawer.open .drawer-face { transform: translateY(84px); }
.redacted-strip { position:absolute; right: 12vw; top: 18vh; padding: 18px 28px; background: var(--stamp-red); color: var(--vellum-cream); transform: rotate(8deg); box-shadow: 0 28px 50px rgba(0,0,0,.42); }
.ledger-lines { position:absolute; inset: 12vh 8vw; opacity:.18; background: repeating-linear-gradient(0deg, transparent 0 34px, var(--vellum-cream) 35px 36px), repeating-linear-gradient(90deg, transparent 0 90px, var(--carbon-blue) 91px 92px); transform: rotate(-2deg); }

.seal-press { position:absolute; left: 10vw; top: 14vh; width: 330px; height: 520px; }
.press-handle { position:absolute; left:35px; top:10px; width: 260px; height: 42px; border-radius: 24px; background: linear-gradient(90deg, var(--aged-copper), var(--gold-dust), var(--aged-copper)); transform-origin: right center; transition: transform .45s ease; }
.press-column { position:absolute; left:142px; top:45px; width: 48px; height: 310px; background: linear-gradient(90deg, #6c3d1c, var(--aged-copper), #4a260f); box-shadow: 0 26px 44px rgba(0,0,0,.46); }
.wax-impression { position:absolute; left:82px; bottom:26px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, #a82c29, var(--stamp-red)); box-shadow: inset 0 0 25px rgba(0,0,0,.33), 0 18px 48px rgba(141,31,31,.38); display:grid; place-items:center; transform: scale(.86); transition: transform .45s ease, filter .45s ease; }
.wax-impression span { font-family: var(--ceremony); letter-spacing:.18em; font-size: 14px; }
.seal-press.pressed .press-handle { transform: rotate(13deg); }
.seal-press.pressed .wax-impression { transform: scale(1); filter: saturate(1.35); }
.transfer-sheet { right: 8vw; top: 21vh; width: min(640px, 52vw); min-height: 480px; transform: rotate(4deg); }
.ink-bloom { position:absolute; left: 198px; top: 575px; width: 60px; height:60px; border-radius:50%; background: var(--stamp-red); opacity:0; filter: blur(12px); transform: scale(.1); transition: opacity .8s ease, transform .8s ease; }
.ink-bloom.bloom { opacity:.62; transform: scale(5); }

.archive-fan { position:absolute; left: 10vw; bottom: 11vh; width: 560px; height: 540px; }
.archive-card { position:absolute; left: 170px; bottom: 20px; width: 255px; height: 390px; padding: 24px; transform-origin: bottom center; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.archive-card span { font-family: var(--mono); text-transform: uppercase; color: var(--stamp-red); letter-spacing:.14em; }
.archive-fan.open .card-one { transform: rotate(-31deg) translateY(-12px); }
.archive-fan.open .card-two { transform: rotate(-15deg) translateY(-34px); }
.archive-fan.open .card-three { transform: rotate(0deg) translateY(-46px); }
.archive-fan.open .card-four { transform: rotate(16deg) translateY(-32px); }
.archive-fan.open .card-five { transform: rotate(32deg) translateY(-10px); }
.archive-slot { position:absolute; right: 10vw; top: 21vh; width: min(520px, 42vw); padding: 58px 40px 44px; background: linear-gradient(135deg, rgba(24,43,69,.82), rgba(8,7,6,.9)); border: 1px solid rgba(184,115,51,.36); box-shadow: inset 0 0 45px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.5); }
.archive-slot h2 { font-size: clamp(48px, 6vw, 90px); }
.copper-edge { display:block; height: 9px; width: 100%; margin-bottom: 34px; background: linear-gradient(90deg, transparent, var(--aged-copper), var(--gold-dust), transparent); box-shadow: 0 0 22px rgba(214,170,76,.45); }

.station:not(.is-current) .chapter-slip,
.station:not(.is-current) .licence-card,
.station:not(.is-current) .transfer-sheet,
.station:not(.is-current) .archive-slot { opacity: .48; }

@media (max-width: 900px) {
  .object-nav { right: 10px; width: 96px; }
  .station { padding: 90px 26px; }
  .brass-nameplate, .licence-folio, .chapter-slip, .clause-table, .matching-board, .escrow-drawer, .seal-press, .transfer-sheet, .archive-fan, .archive-slot { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 28px 0; }
  .station { min-height: auto; }
  .licence-folio { height: 560px; }
  .matching-board { height: 760px; }
  .licence-card { width: 82%; }
  .transfer-arrows { left: 20%; top: 45%; }
  .archive-slot { width: 100%; }
}