:root {
  /* Control HUD labels use “Recursive” variable styling. */
  --parchment: #E8D2A4;
  --ink: #2B1B12;
  --sepia: #9B6A3D;
  --moss: #4F5A32;
  --amber: #C9822B;
  --quartz: #6E5A4A;
  --brass: #A67C3D;
  --scroll-weight: 760;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Literata", Georgia, serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(201,130,43,.38), transparent 28rem),
    radial-gradient(circle at 80% 70%, rgba(79,90,50,.28), transparent 32rem),
    linear-gradient(135deg, #2B1B12 0%, #6E5A4A 44%, #9B6A3D 100%);
  overflow-x: hidden;
}

.grain, .dust-field, .analog-hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.grain {
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(43,27,18,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(232,210,164,.25) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(43,27,18,.08) 0 1px, transparent 1px 4px);
  background-size: 17px 19px, 23px 29px, 6px 100%;
  mix-blend-mode: multiply;
}
.dust-field span {
  position: absolute; width: .35rem; height: .35rem; border-radius: 50%; background: rgba(232,210,164,.6);
  filter: blur(1px); animation: drift 14s linear infinite;
}
.dust-field span:nth-child(1){left:12%;top:80%;animation-delay:-2s}.dust-field span:nth-child(2){left:35%;top:15%;animation-delay:-7s}.dust-field span:nth-child(3){left:64%;top:72%;animation-delay:-4s}.dust-field span:nth-child(4){left:82%;top:28%;animation-delay:-9s}.dust-field span:nth-child(5){left:50%;top:52%;animation-delay:-12s}
@keyframes drift { 0%{transform:translate3d(0,15vh,0);opacity:0} 20%,70%{opacity:.75} 100%{transform:translate3d(2rem,-28vh,0);opacity:0} }

.analog-hud { z-index: 30; }
.corner { position: absolute; width: 8.5rem; height: 8.5rem; border-color: var(--brass); opacity: .88; filter: drop-shadow(0 0 .35rem rgba(201,130,43,.28)); }
.corner-tl { left: 1.4rem; top: 1.4rem; border-left: 2px solid; border-top: 2px solid; }
.corner-tr { right: 1.4rem; top: 1.4rem; border-right: 2px solid; border-top: 2px solid; }
.corner-bl { left: 1.4rem; bottom: 1.4rem; border-left: 2px solid; border-bottom: 2px solid; }
.corner-br { right: 1.4rem; bottom: 1.4rem; border-right: 2px solid; border-bottom: 2px solid; }
.corner::after { content: ""; position: absolute; inset: .7rem; border: 1px dotted rgba(166,124,61,.62); }
.hud-rail { position: absolute; left: 16vw; right: 16vw; height: 1px; display: flex; justify-content: space-between; background: linear-gradient(90deg, transparent, rgba(166,124,61,.8), transparent); }
.hud-rail.top { top: 2.25rem; } .hud-rail.bottom { bottom: 2.25rem; }
.hud-rail i { width: 1px; height: .9rem; background: var(--brass); transform: translateY(-.45rem); }
.loupe { position: absolute; right: 7vw; top: 16vh; width: 8rem; height: 8rem; border: 1px solid rgba(166,124,61,.8); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(232,210,164,.12), 0 0 0 .45rem rgba(43,27,18,.08); }
.loupe span { position: absolute; left: 50%; top: 50%; width: 150%; height: 1px; background: rgba(166,124,61,.5); transform: translate(-50%,-50%) rotate(-28deg); }
.coord { position: absolute; font-family: "Recursive", monospace; font-variation-settings: "MONO" 1, "CASL" .35, "wght" 650; color: var(--brass); letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; text-shadow: 0 1px 0 var(--ink); }
.coord-left { left: 2rem; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.coord-right { right: 2rem; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }

.ledger-index { position: fixed; z-index: 40; left: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; gap: .45rem; }
.index-tab { color: var(--ink); text-decoration: none; font-family: "Recursive", monospace; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; padding: .55rem .75rem; background: rgba(232,210,164,.62); border: 1px solid rgba(166,124,61,.65); box-shadow: .25rem .25rem 0 rgba(43,27,18,.25); transform: rotate(-1deg); transition: transform .35s ease, background .35s ease, color .35s ease; }
.index-tab span { color: var(--moss); margin-right: .35rem; }
.index-tab:nth-child(even) { transform: rotate(1deg); }
.index-tab.active { background: var(--amber); color: var(--ink); transform: translateX(.4rem) rotate(-2deg); box-shadow: inset 0 0 0 2px rgba(43,27,18,.22), .15rem .15rem 0 rgba(43,27,18,.3); }

.chamber { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) clamp(2rem, 7vw, 8rem); display: grid; align-items: center; isolation: isolate; }
.chamber::before { content:""; position:absolute; inset: clamp(1.4rem,3vw,3rem); border: 1px dashed rgba(166,124,61,.45); z-index:-1; }
.gate { background: radial-gradient(circle at 68% 30%, rgba(232,210,164,.28), transparent 23rem), linear-gradient(120deg, #E8D2A4, #9B6A3D 54%, #6E5A4A); }
.cabinet { background: radial-gradient(circle at 30% 24%, rgba(79,90,50,.35), transparent 20rem), linear-gradient(160deg, #9B6A3D, #E8D2A4 48%, #6E5A4A); }
.quartz { background: radial-gradient(circle at 70% 20%, rgba(201,130,43,.28), transparent 22rem), linear-gradient(135deg, #2B1B12, #6E5A4A 58%, #9B6A3D); color: var(--parchment); }
.stamp { background: radial-gradient(circle at 50% 50%, rgba(201,130,43,.42), transparent 25rem), linear-gradient(145deg, #E8D2A4, #A67C3D 50%, #4F5A32); }

.vellum-note { position: relative; max-width: 43rem; padding: clamp(1.3rem, 3vw, 2.3rem); background: rgba(232,210,164,.78); border: 1px solid rgba(166,124,61,.7); box-shadow: 0 1.4rem 3rem rgba(43,27,18,.3), inset 0 0 5rem rgba(155,106,61,.16); backdrop-filter: blur(3px); }
.vellum-note::after { content:""; position:absolute; inset: .55rem; border: 1px solid rgba(43,27,18,.16); pointer-events:none; }
.specimen-label, .drawer-label, .object-label, .mineral-key, .photo-caption { font-family: "Recursive", monospace; font-variation-settings: "MONO" 1, "CASL" .6, "wght" 620; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
h1, h2 { font-family: "Fraunces", serif; font-variation-settings: "SOFT" 85, "WONK" 1, "wght" var(--scroll-weight); line-height: .86; margin: .35rem 0 1.1rem; text-shadow: .05em .045em 0 rgba(155,106,61,.24), 0 0 .08em rgba(43,27,18,.18); }
h1 { font-size: clamp(3rem, 9vw, 8rem); max-width: 9ch; }
h2 { font-size: clamp(2.6rem, 6.5vw, 6rem); }
p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.72; margin: 0; }

.photo-field { position: absolute; border: .75rem solid rgba(232,210,164,.78); box-shadow: 0 2rem 4rem rgba(43,27,18,.42); filter: sepia(.82) saturate(.85) contrast(1.08); overflow: hidden; }
.large-photo { right: 8vw; top: 12vh; width: min(54vw, 48rem); height: 72vh; clip-path: polygon(3% 0, 100% 5%, 96% 98%, 0 92%); }
.mountain-pass, .portrait, .burn-mark { position: absolute; inset: 0; }
.mountain-pass { background: linear-gradient(rgba(43,27,18,.18), rgba(43,27,18,.2)), radial-gradient(circle at 35% 32%, #E8D2A4 0 9%, transparent 10%), linear-gradient(145deg, transparent 0 35%, #4F5A32 36% 48%, transparent 49%), linear-gradient(25deg, #2B1B12 0 20%, #9B6A3D 21% 44%, #E8D2A4 45% 55%, #6E5A4A 56%); }
.burn-mark { z-index: 2; background: radial-gradient(circle at 86% 17%, rgba(43,27,18,.48), transparent 17%), radial-gradient(circle at 13% 86%, rgba(43,27,18,.38), transparent 20%); mix-blend-mode: multiply; }
.photo-caption { position: absolute; left: 1rem; bottom: 1rem; color: var(--parchment); background: rgba(43,27,18,.48); padding: .45rem .6rem; z-index: 3; }
.gate-note { z-index: 4; margin-left: 4vw; transform: rotate(-1deg); }
.animated-frame { position: absolute; inset: 9vh 7vw; z-index: 3; pointer-events:none; }
.animated-frame rect, .pass-border rect { fill: none; stroke: var(--amber); stroke-width: .45; stroke-dasharray: 24 12; animation: borderRun 7s linear infinite; filter: drop-shadow(0 0 3px rgba(201,130,43,.7)); }
@keyframes borderRun { to { stroke-dashoffset: -72; } }
.stamp-mark { position: absolute; right: 18vw; bottom: 16vh; color: var(--amber); border: .26rem double var(--amber); border-radius: 50%; padding: 1.3rem .9rem; font-family:"Recursive", monospace; font-weight: 800; letter-spacing:.08em; transform: rotate(13deg); mix-blend-mode: multiply; }

.portrait-card { position: absolute; width: clamp(12rem, 20vw, 20rem); padding: .8rem .8rem 1rem; background: rgba(232,210,164,.86); border: 1px solid rgba(43,27,18,.24); box-shadow: 0 1rem 2.2rem rgba(43,27,18,.28); transition: transform .45s ease; }
.portrait-card:hover { transform: translateY(-.5rem) rotate(0deg) scale(1.03); }
.portrait-card b { display:block; margin-top:.7rem; font-family:"Fraunces", serif; font-size:1.2rem; }.portrait-card span { display:block; color: var(--quartz); font-size:.93rem; line-height:1.45; }
.portrait { position: relative; height: 14rem; filter: sepia(.9) contrast(.95); clip-path: polygon(0 4%, 96% 0, 100% 94%, 5% 100%); }
.portrait-one { background: radial-gradient(circle at 50% 28%, #E8D2A4 0 14%, transparent 15%), linear-gradient(90deg, #4F5A32 0 35%, #9B6A3D 36% 68%, #2B1B12 69%); }
.portrait-two { background: radial-gradient(ellipse at 45% 32%, #E8D2A4 0 13%, transparent 14%), linear-gradient(150deg, #6E5A4A, #C9822B 45%, #2B1B12); }
.portrait-three { background: radial-gradient(circle at 52% 30%, #E8D2A4 0 12%, transparent 13%), linear-gradient(35deg, #2B1B12, #A67C3D 52%, #4F5A32); }
.card-a{left:12vw;top:18vh;transform:rotate(-6deg)}.card-b{left:37vw;top:33vh;transform:rotate(4deg)}.card-c{right:11vw;top:16vh;transform:rotate(-2deg)}
.drawer-label { position:absolute; left:13vw; bottom:13vh; background:var(--ink); color:var(--parchment); padding:.65rem .85rem; }
.object-label { position:absolute; background: rgba(232,210,164,.75); border-left: 4px solid var(--moss); padding:.55rem .7rem; color:var(--ink); }
.moss-label{right:18vw;bottom:23vh}.pin-label{left:31vw;bottom:18vh;border-color:var(--brass)}.cabinet-note{justify-self:end;align-self:end;margin-right:5vw;max-width:36rem;transform:rotate(1deg)}

.route-map { position:absolute; inset:10vh 8vw; }
.route-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-line path { fill:none; stroke:var(--amber); stroke-width:5; stroke-linecap:round; stroke-dasharray: 18 18; filter: drop-shadow(0 0 .6rem rgba(201,130,43,.75)); animation: borderRun 9s linear infinite; }
.shard, .mica { position:absolute; background: linear-gradient(135deg, rgba(232,210,164,.75), rgba(110,90,74,.82), rgba(43,27,18,.45)); border:1px solid rgba(232,210,164,.35); box-shadow: inset 0 0 2rem rgba(232,210,164,.1), 0 1rem 2rem rgba(43,27,18,.4); animation: glint 4.8s ease-in-out infinite alternate; }
.shard-one{left:7%;top:61%;width:8rem;height:13rem;clip-path:polygon(46% 0,100% 37%,70% 100%,0 76%,15% 20%)}.shard-two{left:34%;top:43%;width:11rem;height:10rem;clip-path:polygon(12% 16%,75% 0,100% 58%,43% 100%,0 65%);animation-delay:-1s}.shard-three{right:26%;top:27%;width:9rem;height:15rem;clip-path:polygon(60% 0,100% 54%,58% 100%,12% 82%,0 24%);animation-delay:-2s}.shard-four{right:8%;top:16%;width:7rem;height:12rem;clip-path:polygon(50% 0,96% 30%,80% 88%,35% 100%,0 40%);animation-delay:-3s}.mica{width:4rem;height:4rem;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgba(201,130,43,.55)}.mica-a{left:58%;top:70%}.mica-b{left:22%;top:24%;animation-delay:-2.3s}
@keyframes glint { from{opacity:.68;transform:translateY(0) rotate(-2deg)} to{opacity:1;transform:translateY(-.7rem) rotate(2deg)} }
.quartz-note { background: rgba(43,27,18,.58); color: var(--parchment); border-color: rgba(201,130,43,.62); margin-left: 7vw; z-index:2; }
.mineral-key { position:absolute; right:10vw; bottom:12vh; color:var(--parchment); background:rgba(43,27,18,.45); padding:.7rem 1rem; border:1px solid rgba(166,124,61,.55); }.mineral-key span{display:inline-block;width:.7rem;height:.7rem;background:var(--amber);transform:rotate(45deg);margin:0 .55rem}.mineral-key span:nth-child(1){background:var(--quartz)}.mineral-key span:nth-child(3){background:var(--moss)}

.final-pass { position:relative; width:min(62rem,78vw); margin:auto; padding:clamp(2rem,5vw,4.5rem); background:rgba(232,210,164,.9); color:var(--ink); box-shadow:0 2rem 4rem rgba(43,27,18,.36), inset 0 0 8rem rgba(155,106,61,.18); transform:rotate(-1deg); }
.pass-border { position:absolute; inset:1rem; width:calc(100% - 2rem); height:calc(100% - 2rem); pointer-events:none; }.final-pass h2{font-size:clamp(3rem,8vw,7rem)}
.signature-row { margin-top:2rem; display:flex; justify-content:space-between; gap:1rem; align-items:end; border-top:1px solid rgba(43,27,18,.25); padding-top:1rem; font-family:"Recursive", monospace; text-transform:uppercase; letter-spacing:.08em; }.signature-row strong{color:var(--amber);font-size:1.2rem}.stamp-cluster{position:absolute;right:10vw;top:16vh;display:grid;gap:.7rem}.stamp-cluster i{font-family:"Recursive", monospace;font-style:normal;color:var(--amber);border:.2rem solid var(--amber);padding:.65rem 1rem;transform:rotate(8deg);background:rgba(232,210,164,.28);mix-blend-mode:multiply}.stamp-cluster i:nth-child(even){transform:rotate(-6deg)}.moss-silhouette{position:absolute;left:0;right:0;bottom:0;height:22vh;background:linear-gradient(180deg,transparent,rgba(79,90,50,.65));clip-path:polygon(0 100%,0 45%,7% 70%,13% 36%,21% 72%,29% 42%,38% 80%,47% 35%,57% 76%,67% 43%,79% 74%,90% 38%,100% 66%,100% 100%)}

.chamber > * { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
.chamber:not(.active) .vellum-note, .chamber:not(.active) .portrait-card, .chamber:not(.active) .final-pass { opacity:.55; transform: translateY(1rem) rotate(0deg); }

@media (max-width: 760px) {
  .ledger-index { left:.5rem; top:auto; bottom:1rem; transform:none; grid-template-columns:repeat(4,1fr); right:.5rem; }
  .index-tab { font-size:.62rem; padding:.45rem .35rem; text-align:center; }
  .coord, .loupe { display:none; }
  .chamber { padding:5.5rem 1.2rem 6rem; display:block; }
  .large-photo, .portrait-card, .object-label, .drawer-label, .stamp-cluster { position:relative; inset:auto; width:100%; margin:1rem 0; }
  .large-photo { height:42vh; right:auto; top:auto; }
  .cabinet-note, .gate-note, .quartz-note { margin:1rem 0; }
  .portrait-card { transform:none !important; }
  .route-map { position:relative; inset:auto; height:52vh; }
  .final-pass { width:100%; }
}