:root {
    --basalt: #0B0A08;
    --amber: #F2A23A;
    --clay: #8A4E2A;
    --teal: #2BB6A8;
    --chalk: #E8DCC2;
    --violet: #6D4A8C;
    --rust: #B43A2E;
    --display: "Fraunces", serif;
    --mono: "Azeret Mono", monospace;
    --serif: "Cormorant Garamond", serif;
    --sketch: "Cabin Sketch", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--basalt); }

body {
    margin: 0;
    color: var(--chalk);
    background:
        radial-gradient(circle at 52% 3%, rgba(242, 162, 58, .18), transparent 18rem),
        linear-gradient(180deg, #17100c 0%, var(--basalt) 34%, #070604 100%);
    font-family: var(--serif);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(232, 220, 194, .03) 49%, transparent 50% 100%),
        repeating-linear-gradient(180deg, rgba(138, 78, 42, .08) 0 2px, transparent 2px 17px);
    mix-blend-mode: screen;
    z-index: 4;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    z-index: 10;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(232, 220, 194, .15) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(242, 162, 58, .1) 0 1px, transparent 1px),
        radial-gradient(circle at 45% 75%, rgba(43, 182, 168, .09) 0 1px, transparent 1px);
    background-size: 61px 73px, 47px 53px, 83px 91px;
}

.lantern {
    position: fixed;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    left: var(--x, 50%);
    top: var(--y, 34%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, rgba(242, 162, 58, .2), rgba(242, 162, 58, .06) 28%, transparent 67%);
    transition: width .5s ease, height .5s ease;
}

.shaft { position: relative; min-height: 600vh; }

.depth-line {
    position: fixed;
    top: -8vh;
    left: 50%;
    width: 10px;
    height: 116vh;
    transform: translateX(-50%);
    z-index: 6;
    background: repeating-linear-gradient(180deg, #3a2414 0 13px, #c08439 13px 17px, #3a2414 17px 30px);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(232, 220, 194, .18), 0 0 24px rgba(242, 162, 58, .24);
}

.depth-line::before,
.depth-line::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.depth-line::before { bottom: 8vh; width: 26px; height: 26px; background: var(--amber); box-shadow: 0 0 24px var(--amber); }
.depth-line::after { bottom: 3vh; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 42px solid #6f522c; border-radius: 0; }
.depth-line.water { background: linear-gradient(180deg, var(--teal), #15534d); }
.depth-line.rail { background: repeating-linear-gradient(180deg, #1d1a17 0 12px, #777 12px 15px, #1d1a17 15px 25px); }
.depth-line.root { background: repeating-linear-gradient(180deg, #201208 0 18px, var(--clay) 18px 23px, #150c07 23px 36px); }

.rope-knot { position: absolute; left: 50%; width: 34px; height: 14px; transform: translateX(-50%) rotate(-8deg); border-radius: 50%; background: #4c2b15; border: 2px solid #a66f31; }
.k1 { top: 18%; } .k2 { top: 39%; transform: translateX(-50%) rotate(11deg); } .k3 { top: 61%; } .k4 { top: 83%; transform: translateX(-50%) rotate(14deg); }

.depth-dial {
    position: fixed;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    display: grid;
    gap: .5rem;
    font: 600 .68rem var(--mono);
    color: var(--chalk);
    text-align: center;
}

.dial-label { writing-mode: vertical-rl; letter-spacing: .22em; color: var(--amber); justify-self: center; }
.dial-track { position: absolute; left: 50%; top: 2rem; bottom: 2rem; width: 1px; background: rgba(232, 220, 194, .24); }
#dialBob { position: absolute; left: -7px; top: var(--bob, 0%); width: 15px; height: 15px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px var(--amber); transition: top .25s ease; }
.depth-dial a { color: var(--chalk); text-decoration: none; background: rgba(11, 10, 8, .72); border: 1px solid rgba(232, 220, 194, .22); padding: .25rem .35rem; }

.chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 7vw, 8rem);
    display: grid;
    align-items: center;
    isolation: isolate;
}

.chamber::before,
.chamber::after { content: ""; position: absolute; left: -5vw; right: -5vw; pointer-events: none; z-index: -1; }
.chamber::before { top: -2px; height: 8rem; clip-path: polygon(0 0, 100% 0, 100% 46%, 82% 65%, 64% 38%, 43% 78%, 21% 50%, 0 72%); }
.chamber::after { bottom: -2px; height: 10rem; clip-path: polygon(0 56%, 16% 31%, 34% 70%, 50% 42%, 72% 78%, 100% 37%, 100% 100%, 0 100%); }

h1, h2, .depth-number { font-family: var(--display); font-weight: 900; line-height: .82; margin: 0; }
h1 { font-size: clamp(4.5rem, 18vw, 17rem); letter-spacing: -.08em; color: var(--chalk); text-shadow: 0 1rem 2rem rgba(0,0,0,.8), 0 0 34px rgba(242,162,58,.18); }
h2 { font-size: clamp(2.8rem, 7vw, 7rem); max-width: 11ch; color: var(--chalk); }
p { font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.22; max-width: 28rem; }
.mono, .survey-tag { font: 700 .72rem var(--mono); letter-spacing: .18em; color: var(--amber); text-transform: uppercase; }
.chalk-note { font-family: var(--sketch); color: var(--chalk); font-size: clamp(1.35rem, 2.6vw, 2.3rem); transform: rotate(-4deg); }

.surface { background: radial-gradient(circle at 50% 42%, rgba(242,162,58,.11), transparent 26rem), linear-gradient(180deg, #25170e, var(--basalt) 80%); text-align: left; }
.surface::before { background: #1b1714; height: 22vh; clip-path: polygon(0 0,100% 0,100% 88%,82% 77%,64% 95%,39% 82%,18% 91%,0 77%); }
.street-slit { position: absolute; top: 4vh; left: 50%; width: 68vw; max-width: 680px; height: 18px; transform: translateX(-50%); background: #000; border-radius: 50%; box-shadow: 0 0 24px rgba(242,162,58,.16); }
.grate { position: absolute; top: 8vh; left: 50%; width: min(720px, 78vw); height: 80px; transform: translateX(-50%) rotateX(0deg); display: flex; gap: 5%; justify-content: center; transition: transform 1s cubic-bezier(.17,.86,.25,1), top 1s ease; transform-origin: top; }
.grate.lifted { transform: translateX(-50%) rotateX(67deg) translateY(-30px); top: 4vh; }
.grate span { width: 8%; height: 100%; background: linear-gradient(90deg, #060504, #42352a, #060504); border-radius: 10px; }
.buried-title { margin-top: 22vh; max-width: 88vw; }
.rope-pull, .depth-plate, .mark-wall {
    font: 800 .78rem var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--basalt);
    background: var(--amber);
    border: 0;
    padding: 1rem 1.3rem;
    box-shadow: 0 .6rem 0 #6c3b17, 0 0 34px rgba(242,162,58,.34);
    cursor: pointer;
}
.note-surface { position: absolute; right: 8vw; bottom: 14vh; }

.cellar { background: linear-gradient(180deg, #1b0f09, #0d0907 70%); }
.cellar::before, .cellar::after { background: var(--clay); opacity: .72; }
.brass-plate { margin-left: 7vw; padding: 2rem; width: min(560px, 72vw); background: linear-gradient(135deg, rgba(138,78,42,.82), rgba(11,10,8,.62)); border: 2px solid rgba(242,162,58,.5); transform: rotate(-2deg); box-shadow: 0 1rem 4rem rgba(0,0,0,.55); }
.trapdoor { position: absolute; right: 12vw; top: 20vh; width: 18rem; height: 11rem; background: #27160b; border: 12px solid #5e361b; transform: rotate(9deg); display: grid; place-items: center; color: var(--amber); font: 800 1rem var(--mono); }
.ladder { position: absolute; left: 58%; top: 24vh; width: 76px; height: 62vh; border-left: 8px solid #6b3d1d; border-right: 8px solid #6b3d1d; transform: rotate(4deg); }
.ladder i { display: block; height: 7px; margin: 45px -4px; background: #a7662b; }
.arrow { position: absolute; bottom: 12vh; left: 16vw; }

.roots { background: radial-gradient(circle at 70% 35%, rgba(109,74,140,.18), transparent 20rem), linear-gradient(180deg, #130b07, #090705); }
.roots::before { background: #2d180c; }
.root-canopy span { position: absolute; top: -6vh; width: 16px; height: 62vh; background: linear-gradient(#3b1d0b, #100704); border-radius: 0 0 50% 50%; transform-origin: top; }
.root-canopy span:nth-child(1) { left: 14%; transform: rotate(16deg); } .root-canopy span:nth-child(2) { left: 26%; height: 78vh; transform: rotate(-10deg); } .root-canopy span:nth-child(3) { left: 48%; height: 55vh; transform: rotate(22deg); } .root-canopy span:nth-child(4) { left: 72%; height: 70vh; transform: rotate(-18deg); } .root-canopy span:nth-child(5) { left: 86%; transform: rotate(8deg); }
.wall-inscription { justify-self: end; margin-right: 6vw; transform: rotate(2deg); }
.depth-number { display: block; font-size: clamp(7rem, 18vw, 17rem); color: rgba(242,162,58,.22); margin-bottom: -2.4rem; }
.map-fragment { position: absolute; left: 9vw; bottom: 18vh; padding: 1rem; background: #cbbd9d; color: #26160c; font: 700 .8rem var(--mono); transform: rotate(-9deg); box-shadow: 0 1rem 2rem #000; }
.depth-plate { position: absolute; right: 12vw; bottom: 9vh; background: var(--clay); color: var(--chalk); box-shadow: 0 .5rem 0 #2a160b; }

.aquifer { background: linear-gradient(180deg, #070908, #041311 55%, #070604); }
.aquifer::before { background: linear-gradient(90deg, var(--clay), var(--teal), var(--clay)); opacity: .6; }
.pool { position: absolute; left: 8vw; bottom: 0; width: 72vw; height: 34vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center, rgba(43,182,168,.55), rgba(43,182,168,.18) 42%, rgba(11,10,8,.1) 70%); box-shadow: 0 0 70px rgba(43,182,168,.22); overflow: hidden; }
.pool::before { content:""; position:absolute; inset:12%; border:1px solid rgba(232,220,194,.22); border-radius:50%; animation: ripple 3.8s infinite; }
.reflection { position: absolute; left: 22%; top: 16%; font: 900 clamp(3rem, 9vw, 9rem) var(--display); color: rgba(232,220,194,.18); transform: scaleY(-1) rotate(-3deg); }
.folded-note { justify-self: end; width: min(540px, 76vw); background: rgba(232,220,194,.9); color: #180e08; padding: 2rem; clip-path: polygon(0 0, 88% 0, 100% 15%, 96% 100%, 5% 95%); transform: rotate(4deg); }
.folded-note h2, .folded-note p { color: #180e08; }
.drop-field span { position: absolute; top: 12vh; width: 7px; height: 46px; border-radius: 50%; background: var(--teal); animation: drip 2.8s infinite; }
.drop-field span:nth-child(1){left:27%;}.drop-field span:nth-child(2){left:55%;animation-delay:.7s}.drop-field span:nth-child(3){left:78%;animation-delay:1.4s}

.platform { background: linear-gradient(180deg, #0d0b09, #17120f 55%, #080706); }
.tile-wall { position: absolute; inset: 11vh 0 auto 0; height: 34vh; background: linear-gradient(rgba(232,220,194,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(232,220,194,.12) 1px, transparent 1px); background-size: 84px 45px; opacity: .7; transform: skewY(-2deg); }
.warning-label { position: relative; z-index: 1; margin-left: 8vw; width: min(610px, 78vw); padding: 1.4rem 1.8rem; background: repeating-linear-gradient(135deg, var(--rust) 0 16px, #2b130f 16px 28px); border: 2px solid var(--amber); box-shadow: 0 1rem 4rem #000; }
.warning-label p { background: rgba(11,10,8,.78); padding: 1rem; }
.minecart { position: absolute; right: 18vw; bottom: 18vh; width: 190px; height: 78px; background: #2a2520; border: 4px solid #6d6250; transform: skewX(-12deg); animation: cart 5s ease-in-out infinite; }
.minecart::before, .minecart::after { content:""; position:absolute; bottom:-28px; width:34px; height:34px; border-radius:50%; background:#070604; border:5px solid #6d6250; }
.minecart::before{left:26px}.minecart::after{right:26px}
.lever { position: absolute; right: 12vw; top: 24vh; width: 90px; height: 170px; border: 2px solid var(--chalk); border-radius: 50px; display: grid; place-items: center; cursor: grab; }
.lever b { width: 16px; height: 96px; background: var(--amber); border-radius: 20px; transform-origin: bottom; transform: rotate(var(--lever, -18deg)); transition: transform .2s ease; }
.lever em { position:absolute; top:110%; font:700 .62rem var(--mono); color:var(--amber); white-space:nowrap; }
.secret-door { position: absolute; left: 49%; bottom: 7vh; width: 220px; height: 150px; display:grid; grid-template-columns:repeat(2,1fr); gap:7px; opacity:.75; }
.secret-door span { background:#211711; border:1px solid rgba(232,220,194,.13); }

.lower-room { background: radial-gradient(circle at 52% 60%, rgba(109,74,140,.36), transparent 24rem), linear-gradient(180deg, #080607, #020202); }
.lower-room::before { background: var(--violet); opacity: .4; }
.final-plaque { justify-self: center; text-align: left; width: min(720px, 82vw); padding: 2rem; border: 1px dashed rgba(232,220,194,.36); background: rgba(11,10,8,.55); box-shadow: inset 0 0 50px rgba(109,74,140,.28); }
.mushrooms span { position:absolute; bottom: 4vh; width: 26px; height: 50px; background: #d8c4d9; border-radius: 50% 50% 8px 8px; box-shadow: 0 0 25px rgba(109,74,140,.8); }
.mushrooms span::before { content:""; position:absolute; top:-18px; left:-14px; width:54px; height:28px; background:var(--violet); border-radius:50% 50% 12px 12px; }
.mushrooms span:nth-child(1){left:13%;transform:scale(.8)}.mushrooms span:nth-child(2){left:22%;}.mushrooms span:nth-child(3){right:18%;transform:scale(1.2)}.mushrooms span:nth-child(4){right:29%;transform:scale(.65)}.mushrooms span:nth-child(5){left:69%;transform:scale(.9)}
.chalk-marks { position:absolute; right:9vw; top:19vh; display:grid; gap:1rem; font:700 2rem var(--sketch); color:var(--chalk); transform:rotate(8deg); }
.chalk-marks span { opacity:.35; transition: opacity .4s ease, transform .4s ease; }
.chalk-marks.marked span { opacity:1; transform: translateX(-12px); }
.surface-hatch { position:absolute; bottom:9vh; left:8vw; color:var(--amber); font:800 .75rem var(--mono); text-transform:uppercase; letter-spacing:.16em; }

.whisper-note { position: fixed; right: 2rem; bottom: 2rem; max-width: 320px; padding: 1rem 1.2rem; background: rgba(11,10,8,.88); color: var(--chalk); border: 1px solid var(--amber); font: 500 1.25rem var(--serif); z-index: 20; opacity: 0; transform: translateY(20px) rotate(-1deg); transition: opacity .3s ease, transform .3s ease; }
.whisper-note.show { opacity: 1; transform: translateY(0) rotate(-1deg); }

.chamber article, .chalk-note, .map-fragment, .trapdoor { opacity: .35; transform: translateY(35px) rotate(var(--r, 0deg)); transition: opacity .8s ease, transform .8s cubic-bezier(.17,.86,.25,1); }
.chamber.active article, .chamber.active .chalk-note, .chamber.active .map-fragment, .chamber.active .trapdoor { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

@keyframes ripple { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
@keyframes drip { 0% { transform: translateY(-20vh); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(65vh); opacity: 0; } }
@keyframes cart { 0%,100% { transform: translateX(0) skewX(-12deg); } 50% { transform: translateX(-38px) skewX(-12deg); } }

@media (max-width: 760px) {
    .depth-dial { display: none; }
    .depth-line { left: 90%; opacity: .65; }
    .chamber { padding-left: 1.2rem; padding-right: 1.2rem; }
    .wall-inscription, .folded-note { justify-self: start; margin-right: 0; }
    .ladder, .lever, .secret-door { opacity: .4; }
    h1 { font-size: 23vw; }
}