:root {
  --parchment: #F3E8D1;
  --limestone: #FFF8E8;
  --sage: #8E9B76;
  --brass: #B08A45;
  --rose: #A85F5F;
  --umber: #2E261D;
  --blue: #BFD8DD;
  --olive: #4F5A3F;
  --shadow: rgba(46, 38, 29, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--umber);
  font-family: "Commissioner", Inter, sans-serif;
  background: var(--limestone);
  overflow-x: hidden;
}

.vellum-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 248, 232, .98), rgba(243, 232, 209, .62) 24%, transparent 52%),
    linear-gradient(118deg, rgba(191, 216, 221, .34), transparent 28%, rgba(176, 138, 69, .08) 59%, rgba(142, 155, 118, .2)),
    var(--parchment);
}
.vellum-field::before,
.vellum-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vellum-field::before {
  opacity: .28;
  background-image:
    repeating-linear-gradient(0deg, rgba(46, 38, 29, .045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92deg, rgba(79, 90, 63, .04) 0 1px, transparent 1px 11px);
  mix-blend-mode: multiply;
}
.vellum-field::after {
  background:
    radial-gradient(circle at 14% 18%, rgba(168, 95, 95, .12), transparent 16%),
    radial-gradient(circle at 82% 74%, rgba(142, 155, 118, .18), transparent 18%);
}

.archive-sequence { position: relative; }
.chamber {
  min-height: 100vh;
  position: relative;
  padding: 7vw 8vw 7vw 12vw;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.archive-rail {
  position: fixed;
  left: 28px;
  top: 50%;
  width: 44px;
  height: 62vh;
  transform: translateY(-50%);
  z-index: 50;
  border-left: 1px solid rgba(176, 138, 69, .72);
  border-right: 1px solid rgba(176, 138, 69, .18);
  background: linear-gradient(90deg, rgba(255, 248, 232, .66), rgba(191, 216, 221, .18));
  backdrop-filter: blur(9px);
}
.rail-title {
  position: absolute;
  top: -36px;
  left: -18px;
  width: 90px;
  color: var(--olive);
  font: 600 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  transform: rotate(-90deg);
  transform-origin: right top;
}
.rail-mark {
  position: absolute;
  left: 9px;
  color: rgba(46, 38, 29, .58);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  text-decoration: none;
  letter-spacing: .08em;
}
.rail-mark:nth-of-type(1) { top: 8%; }
.rail-mark:nth-of-type(2) { top: 34%; }
.rail-mark:nth-of-type(3) { top: 60%; }
.rail-mark:nth-of-type(4) { top: 86%; }
.rail-mark span {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--brass);
}
.rail-mark.active { color: var(--rose); }
.rail-bead {
  position: absolute;
  left: -5px;
  top: 8%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 5px rgba(176, 138, 69, .16), 0 8px 20px rgba(46, 38, 29, .22);
  transition: top .55s cubic-bezier(.2,.8,.2,1);
}

.paper-specimen {
  position: relative;
  background:
    linear-gradient(90deg, rgba(46, 38, 29, .04), transparent 8%, transparent 92%, rgba(46, 38, 29, .035)),
    radial-gradient(circle at 20% 10%, rgba(255, 248, 232, .95), transparent 34%),
    var(--parchment);
  border: 1px solid rgba(176, 138, 69, .36);
  box-shadow: 0 28px 70px var(--shadow), inset 0 0 32px rgba(255, 248, 232, .58);
}
.paper-specimen::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(176, 138, 69, .22);
  pointer-events: none;
}
.paper-specimen::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: radial-gradient(rgba(46, 38, 29, .13) .7px, transparent .8px);
  background-size: 9px 7px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.arrival-folio {
  width: min(78vw, 980px);
  min-height: 64vh;
  padding: clamp(48px, 8vw, 104px);
  transform: rotate(-3deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.folio-kicker {
  margin: 0 0 18px;
  color: var(--olive);
  font: 600 11px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .23em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: "Cormorant Garamond", Cormorant, serif; font-weight: 600; }
h1 {
  margin: 0;
  font-size: clamp(66px, 12vw, 172px);
  line-height: .82;
  color: rgba(46, 38, 29, .84);
  letter-spacing: -.07em;
  text-shadow: 0 2px 0 rgba(255,248,232,.75), 0 -1px 0 rgba(79,90,63,.22), 0 12px 24px rgba(46,38,29,.08);
}
.debossed-note {
  max-width: 540px;
  margin: 32px 0 0 auto;
  color: rgba(46, 38, 29, .72);
  font: 400 clamp(18px, 2vw, 25px)/1.5 Lora, serif;
}
.hud-frame {
  position: absolute;
  inset: 6vw 7vw;
  z-index: 3;
  pointer-events: none;
}
.hud-frame i {
  position: absolute;
  width: 72px;
  height: 72px;
  border-color: var(--brass);
  opacity: .9;
}
.hud-frame i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.hud-frame i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.hud-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.hud-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }
.coordinate {
  position: absolute;
  color: var(--brass);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
}
.coordinate.top { top: -28px; left: 95px; }
.coordinate.side { right: -48px; top: 40%; transform: rotate(90deg); }
.calibrate i { animation: drawBracket 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawBracket { from { clip-path: inset(0 100% 100% 0); opacity: 0; } to { clip-path: inset(0); opacity: .9; } }

.folio-pin {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--limestone), var(--brass));
  box-shadow: 0 5px 12px rgba(46,38,29,.25);
}
.pin-a { top: 32px; left: 44px; }
.pin-b { right: 48px; bottom: 38px; }
.specimen-seal {
  position: absolute;
  right: 9%;
  top: 14%;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(176, 138, 69, .65);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rose);
  font: 600 18px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  opacity: .76;
}
.specimen-seal span { font-size: 10px; }
.leaf-line {
  position: absolute;
  right: 10%;
  bottom: 11%;
  width: 190px;
  fill: rgba(142, 155, 118, .18);
  stroke: var(--sage);
  stroke-width: 2;
}
.glass-note {
  background: linear-gradient(135deg, rgba(191,216,221,.44), rgba(255,248,232,.42));
  border: 1px solid rgba(191,216,221,.76);
  box-shadow: 0 18px 46px rgba(46,38,29,.12), inset 0 0 24px rgba(255,248,232,.45);
  backdrop-filter: blur(13px);
  color: var(--umber);
}
.glass-note b { display: block; margin-bottom: 8px; color: var(--olive); font: 600 11px/1.2 "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.glass-note span { font-size: 14px; line-height: 1.55; }
.note-arrival { position: absolute; right: 8vw; bottom: 12vh; width: 245px; padding: 22px; transform: rotate(3deg); }

.reading-lens { grid-template-columns: 1fr; }
.excerpt-sheet {
  width: min(68vw, 830px);
  min-height: 58vh;
  padding: clamp(42px, 7vw, 86px);
  transform: rotate(2.5deg) translateX(3vw);
}
.excerpt-sheet h2,
.index-paper h2 {
  margin: 0 0 26px;
  font-size: clamp(43px, 6.8vw, 94px);
  line-height: .94;
  color: var(--umber);
}
.excerpt-sheet p:not(.folio-kicker), .index-paper p:not(.folio-kicker) {
  max-width: 620px;
  font: 400 19px/1.7 Lora, serif;
  color: rgba(46,38,29,.75);
}
.brass-rule { height: 1px; width: 60%; margin-top: 42px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.lens-ring {
  position: absolute;
  left: 9vw;
  top: 20vh;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(176,138,69,.45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191,216,221,.24), transparent 64%);
  box-shadow: inset 0 0 36px rgba(191,216,221,.34);
}
.lens-ring span { position: absolute; inset: 20%; border: 1px solid rgba(176,138,69,.24); border-radius: 50%; }
.lens-ring span:nth-child(2) { inset: 42%; border-color: rgba(79,90,63,.32); }
.lens-ring span:nth-child(3) { inset: 49% 0; height: 1px; border: 0; background: rgba(176,138,69,.5); }
.note-one { position: absolute; left: 10vw; bottom: 16vh; width: 238px; padding: 20px; transform: rotate(-4deg); }
.note-two { position: absolute; right: 8vw; top: 20vh; width: 216px; padding: 20px; transform: rotate(5deg); }
.pressed-leaf {
  position: absolute;
  width: 58px;
  height: 116px;
  border-radius: 0 85% 0 85%;
  background: linear-gradient(135deg, rgba(142,155,118,.25), rgba(79,90,63,.45));
  box-shadow: inset 10px -8px 0 rgba(255,248,232,.16);
}
.pressed-leaf::after { content: ""; position: absolute; left: 50%; top: 8%; width: 1px; height: 84%; background: rgba(79,90,63,.55); transform: rotate(-18deg); }
.citation-a { right: 22vw; bottom: 13vh; transform: rotate(41deg); }
.citation-b { left: 25vw; top: 13vh; transform: rotate(-64deg) scale(.82); }

.living-index { grid-template-columns: minmax(320px, 700px) minmax(320px, 520px); gap: 6vw; }
.index-paper { width: 100%; padding: clamp(38px, 5vw, 76px); min-height: 56vh; transform: rotate(-2deg); }
.index-seal { right: 10%; top: auto; bottom: 11%; }
.radial-map {
  position: relative;
  width: min(82vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(176,138,69,.54);
  background: radial-gradient(circle, rgba(191,216,221,.2), transparent 62%);
}
.radial-map::before, .radial-map::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(176,138,69,.2); }
.radial-map::after { inset: 36%; border-color: rgba(142,155,118,.28); }
.leaf-tab {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--umber);
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .11em;
  cursor: pointer;
}
.leaf-tab i {
  display: block;
  width: 44px;
  height: 80px;
  margin: 0 auto 8px;
  border-radius: 0 80% 0 80%;
  background: linear-gradient(145deg, rgba(142,155,118,.34), rgba(79,90,63,.68));
  border: 1px solid rgba(79,90,63,.26);
}
.tab-a { top: -18px; left: 42%; }
.tab-b { top: 22%; right: -16px; transform: rotate(54deg); }
.tab-c { bottom: 5%; right: 11%; transform: rotate(132deg); }
.tab-d { bottom: 5%; left: 10%; transform: rotate(218deg); }
.tab-e { top: 23%; left: -20px; transform: rotate(298deg); }
.map-readout {
  position: absolute;
  inset: 42% 16%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191,216,221,.8);
  background: rgba(255,248,232,.52);
  color: var(--rose);
  font: 600 12px/1.5 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-align: center;
}

.dispatch { align-items: end; padding-bottom: 10vh; }
.table-plate {
  position: absolute;
  left: 7vw;
  right: 6vw;
  bottom: 6vh;
  height: 58vh;
  border: 1px solid rgba(176,138,69,.22);
  background: linear-gradient(135deg, rgba(255,248,232,.4), rgba(191,216,221,.18));
  box-shadow: 0 24px 80px rgba(46,38,29,.12);
  transform: rotate(-1deg);
}
.dispatch-intro { position: absolute; left: 12vw; top: 14vh; width: 300px; padding: 24px; z-index: 4; }
.paper-table { position: relative; width: min(88vw, 1050px); height: 62vh; }
.dispatch-paper { position: absolute; width: 390px; min-height: 300px; padding: 34px; cursor: pointer; }
.dispatch-paper h3 { margin: 30px 0 70px; font-size: 38px; line-height: 1; }
.dispatch-paper span { color: var(--olive); font: 500 12px/1.4 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.p-one { left: 2%; top: 25%; transform: rotate(-8deg); }
.p-two { left: 34%; top: 11%; transform: rotate(3deg); z-index: 2; }
.p-three { right: 2%; top: 29%; transform: rotate(9deg); }

.hover-scale { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, filter .45s; }
.hover-scale:hover, .leaf-tab.active {
  filter: saturate(1.06) contrast(1.03);
  box-shadow: 0 34px 86px rgba(46,38,29,.23), 0 0 0 1px rgba(176,138,69,.34);
}
.dispatch-paper:hover { transform: rotate(var(--lift-rot, 0deg)) scale(1.045) translateY(-18px); z-index: 10; }
.p-one:hover { --lift-rot: -6deg; }
.p-two:hover { --lift-rot: 2deg; }
.p-three:hover { --lift-rot: 7deg; }
.glass-note:hover, .lens-ring:hover { transform: scale(1.045) rotate(var(--note-rot, 0deg)); }
.note-arrival:hover { --note-rot: 3deg; }

.pointer-glow {
  position: fixed;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 60;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,232,.38), rgba(191,216,221,.16) 36%, transparent 70%);
  mix-blend-mode: screen;
}

.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 900px) {
  .chamber { padding: 96px 24px 96px 72px; }
  .archive-rail { left: 14px; }
  .arrival-folio, .excerpt-sheet { width: 100%; transform: rotate(0deg); }
  h1 { font-size: clamp(54px, 16vw, 100px); }
  .living-index { grid-template-columns: 1fr; }
  .note-arrival, .note-one, .note-two, .dispatch-intro { position: relative; inset: auto; margin: 22px 0; width: min(100%, 310px); }
  .paper-table { height: auto; display: grid; gap: 22px; }
  .dispatch-paper { position: relative; left: auto; right: auto; top: auto; width: 100%; transform: rotate(0deg); }
}