:root {
  /* compliance terms: JP** navigation fragments Interpret “yamichika” mountain */
  --cave: #090706;
  --clay: #9B4F2F;
  --plum: #5B1828;
  --amber: #D99A4E;
  --paper: #E8D8B8;
  --moss: #34452D;
  --soot: #1D1915;
  --rain: #6F8790;
  --mincho: "Zen Old Mincho", "Shippori Mincho", Georgia, "Times New Roman", serif;
  --sansjp: "IBM Plex Sans JP", Inter, ui-sans-serif, system-ui, sans-serif;
  --hand: "Nanum Pen Script", "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cave); }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 0%, rgba(217,154,78,.12), transparent 25rem),
    linear-gradient(180deg, #090706 0%, #1D1915 28%, #22120f 49%, #10120d 76%, #090706 100%);
  font-family: var(--sansjp);
  overflow-x: hidden;
}

.grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .34; mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 18% 23%, rgba(232,216,184,.12) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 41%, rgba(111,135,144,.10) 0 1px, transparent 1.8px),
    radial-gradient(circle at 39% 81%, rgba(153,79,47,.12) 0 1px, transparent 1.5px);
  background-size: 47px 53px, 71px 67px, 29px 31px;
}

.lamp-cursor {
  position: fixed; width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem; border-radius: 50%; z-index: 10; pointer-events: none;
  background: radial-gradient(circle, rgba(217,154,78,.19), rgba(217,154,78,.055) 34%, transparent 70%);
  filter: blur(10px); transform: translate3d(50vw, 38vh, 0); transition: opacity .5s ease; opacity: .78;
}

.descent-depth, .chamber-nav {
  position: fixed; z-index: 30; font-family: var(--sansjp); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(232,216,184,.62);
}
.descent-depth { left: 1.1rem; bottom: 1rem; }
.chamber-nav { right: 1rem; top: 50%; transform: translateY(-50%); display: grid; gap: .9rem; }
.chamber-nav a { color: rgba(232,216,184,.48); text-decoration: none; writing-mode: vertical-rl; transition: color .35s, text-shadow .35s; }
.chamber-nav a.active { color: var(--amber); text-shadow: 0 0 18px rgba(217,154,78,.75); }

.stair-map { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: .9; }
.stair-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#stairPath { stroke: rgba(232,216,184,.08); stroke-width: .9; stroke-dasharray: 2 8; }
.ember-crack { stroke: var(--amber); stroke-width: .42; filter: drop-shadow(0 0 10px rgba(217,154,78,.75)); stroke-dasharray: 1300; stroke-dashoffset: var(--draw, 1300); }

.chamber {
  position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; padding: 9vh 8vw;
  background:
    radial-gradient(ellipse at var(--lx, 45%) var(--ly, 44%), rgba(217,154,78,.105), transparent 28rem),
    radial-gradient(ellipse at 15% 80%, rgba(52,69,45,.16), transparent 26rem),
    radial-gradient(ellipse at 90% 30%, rgba(91,24,40,.16), transparent 23rem);
}
.chamber::before {
  content: ""; position: absolute; inset: -2rem; z-index: -2;
  background-image: radial-gradient(circle at 25% 30%, rgba(232,216,184,.07) 0 1px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(153,79,47,.08) 0 1.3px, transparent 2px);
  background-size: 4rem 4.4rem, 6rem 5rem; filter: blur(.2px);
}
.chamber::after {
  content: ""; position: absolute; inset: 4vh 4vw; z-index: -1; border-radius: 42% 58% 49% 51% / 8% 12% 9% 11%;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(9,7,6,.62) 74%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 52%, transparent 78%); mask-image: radial-gradient(ellipse at center, black 52%, transparent 78%);
}

h1, h2 { font-family: var(--mincho); font-weight: 400; margin: .2rem 0 1rem; line-height: .95; color: var(--paper); text-wrap: balance; }
h1 { font-size: clamp(5rem, 17vw, 17rem); letter-spacing: -.08em; }
h2 { font-size: clamp(2.8rem, 8vw, 8rem); letter-spacing: -.055em; }
p { font-family: "Shippori Mincho", Georgia, serif; font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.8; color: rgba(232,216,184,.78); max-width: 34rem; }
b { font-family: var(--sansjp); color: var(--amber); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }

.paper-name {
  position: absolute; top: 13vh; left: 9vw; display: grid; gap: .5rem; padding: 1.2rem 2rem 1.4rem;
  color: var(--soot); background: linear-gradient(135deg, rgba(232,216,184,.92), rgba(232,216,184,.62));
  clip-path: polygon(2% 10%, 96% 2%, 100% 84%, 88% 100%, 5% 92%); transform: rotate(-3deg);
  box-shadow: 0 1.5rem 5rem rgba(0,0,0,.6);
}
.paper-name span { font-family: var(--hand); font-size: clamp(2.3rem, 5vw, 5rem); color: var(--plum); }
.paper-name small { font-family: var(--sansjp); letter-spacing: .16em; text-transform: uppercase; font-size: .66rem; }
.street-slab { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(29,25,21,.98), rgba(9,7,6,.98)); }
.drain {
  position: absolute; right: 18vw; bottom: 18vh; width: clamp(7rem, 13vw, 13rem); height: clamp(2.8rem, 5vw, 5rem); border: 0; border-radius: 55%; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(217,154,78,.85), rgba(217,154,78,.28) 35%, rgba(9,7,6,.8) 65%);
  box-shadow: 0 0 4rem rgba(217,154,78,.55), inset 0 0 1.2rem #090706; transform: rotate(-9deg); transition: transform 1s ease, width 1s ease, box-shadow 1s ease;
}
.drain.open { width: clamp(11rem, 23vw, 23rem); transform: rotate(-9deg) scaleY(1.23); box-shadow: 0 0 7rem rgba(217,154,78,.88), inset 0 0 2rem #090706; }
.drain i { position: absolute; top: 18%; bottom: 18%; width: 7%; background: rgba(9,7,6,.72); border-radius: 99px; }
.drain i:nth-child(1){left:18%}.drain i:nth-child(2){left:32%}.drain i:nth-child(3){left:47%}.drain i:nth-child(4){left:62%}.drain i:nth-child(5){left:76%}
.tag { position: absolute; font-family: var(--hand); font-size: 1.65rem; color: rgba(232,216,184,.7); }
.tag-street { right: 10vw; top: 29vh; transform: rotate(5deg); }
.first-crack { position: absolute; right: 29vw; bottom: 8vh; width: 1px; height: 38vh; background: linear-gradient(var(--amber), transparent); transform: rotate(27deg); box-shadow: 0 0 18px var(--amber); opacity: .58; }

.root { background-color: #11100c; }
.roots span { position: absolute; top: -8vh; width: .45rem; height: 60vh; background: linear-gradient(#090706, #34452D, transparent); border-radius: 50%; transform-origin: top; filter: drop-shadow(0 0 8px #090706); }
.roots span:nth-child(1){left:8%;transform:rotate(-18deg)}.roots span:nth-child(2){left:31%;height:80vh;transform:rotate(22deg)}.roots span:nth-child(3){right:22%;height:70vh;transform:rotate(-31deg)}.roots span:nth-child(4){right:7%;transform:rotate(14deg)}
.plaque-left { position: absolute; left: 10vw; top: 18vh; }
.stone-steps { position: absolute; right: 16vw; top: 17vh; width: 31vw; height: 70vh; }
.stone-steps span { position: absolute; width: 11rem; height: 2.5rem; background: linear-gradient(90deg, #1D1915, #6F8790 55%, #090706); border-radius: 50%; opacity: .55; box-shadow: 0 .8rem 2rem rgba(0,0,0,.6); }
.stone-steps span:nth-child(1){right:0;top:0}.stone-steps span:nth-child(2){right:20%;top:16%}.stone-steps span:nth-child(3){right:4%;top:31%}.stone-steps span:nth-child(4){right:33%;top:49%}.stone-steps span:nth-child(5){right:16%;top:66%}.stone-steps span:nth-child(6){right:45%;top:82%}
.hand-note { position: absolute; right: 24vw; bottom: 12vh; font-family: var(--hand); color: var(--amber); transform: rotate(-8deg); }

.noren { position: absolute; top: 0; left: 11vw; display: flex; filter: drop-shadow(0 1.8rem 2rem rgba(0,0,0,.5)); }
.noren span { width: 8vw; height: 34vh; background: linear-gradient(#5B1828, rgba(91,24,40,.22)); margin-right: .4rem; clip-path: polygon(0 0,100% 0,92% 82%,68% 100%,28% 91%,0 100%); }
.ledge-copy { position: absolute; right: 11vw; top: 20vh; text-align: right; }
.ledge-copy p { margin-left: auto; }
.countertop { position: absolute; left: 8vw; bottom: 10vh; width: 78vw; height: 18vh; border-radius: 52% 48% 0 0; background: linear-gradient(180deg, #9B4F2F, #1D1915 70%); box-shadow: inset 0 1rem 2rem rgba(217,154,78,.12), 0 -2rem 8rem rgba(217,154,78,.08); }
.cup { position: absolute; bottom: 10vh; width: 7rem; height: 5.2rem; border-radius: 38% 44% 48% 50%; background: radial-gradient(ellipse at 50% 12%, #E8D8B8 0 12%, #9B4F2F 13% 54%, #5B1828); box-shadow: inset -.6rem -.5rem 1rem rgba(9,7,6,.35), 0 0 2rem rgba(217,154,78,.14); }
.cup em { position: absolute; inset: .7rem .8rem auto; height: 1.1rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(9,7,6,.75), rgba(217,154,78,.25)); animation: ripple 3.8s infinite ease-in-out; }
.cup-a{left:15vw}.cup-b{left:34vw;transform:rotate(-4deg) scale(.82)}.cup-c{right:18vw;transform:rotate(5deg) scale(1.08)}
.moths span { position: absolute; width: .45rem; height: .25rem; background: var(--paper); border-radius: 50%; box-shadow: 0 0 14px var(--amber); animation: moth 8s infinite ease-in-out; }
.moths span:nth-child(1){right:29vw;top:24vh}.moths span:nth-child(2){right:18vw;top:36vh;animation-delay:-2s}.moths span:nth-child(3){right:38vw;top:42vh;animation-delay:-5s}

.ferment { background-color: #120908; }
.jar-label { position: absolute; left: 9vw; top: 14vh; }
.jar-wall { position: absolute; right: 9vw; bottom: 8vh; width: 45vw; height: 72vh; }
.jar { position: absolute; bottom: 0; width: 10rem; height: 18rem; border-radius: 44% 44% 18% 18%; background: linear-gradient(90deg, #1D1915, #9B4F2F, #5B1828 84%); box-shadow: inset 1rem 0 2rem rgba(232,216,184,.08), 0 2rem 4rem rgba(0,0,0,.55); }
.jar::before { content:""; position:absolute; left:22%; right:22%; top:-1rem; height:3rem; border-radius:50%; background:#1D1915; border: .3rem solid #9B4F2F; }
.jar span { position: absolute; left: 18%; top: 35%; padding: .55rem .9rem; background: #E8D8B8; color:#5B1828; font-family: var(--hand); font-size: 1.5rem; transform: rotate(-7deg); }
.jar:nth-child(1){left:0}.jar.tall{left:11rem;height:25rem}.jar.dark{left:23rem;height:21rem;background:linear-gradient(90deg,#090706,#34452D,#1D1915)}.jar.squat{left:34rem;height:13rem;bottom:1rem}
.plum-skins i { position: absolute; width: 3.2rem; height: 2rem; background: var(--plum); border-radius: 60% 35% 55% 45%; opacity: .58; filter: blur(.2px); }
.plum-skins i:nth-child(1){left:35%;top:26%}.plum-skins i:nth-child(2){left:45%;top:56%}.plum-skins i:nth-child(3){right:18%;top:18%}.plum-skins i:nth-child(4){left:16%;bottom:12%}

.rain { background-color: #0b0d0c; }
.rain-copy { position: absolute; right: 9vw; top: 15vh; text-align: right; }
.rain-copy p { margin-left: auto; }
.rain-bowls { position: absolute; left: 8vw; bottom: 13vh; width: 56vw; height: 45vh; }
.bowl { position: absolute; width: 17rem; height: 6rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(111,135,144,.9), rgba(52,69,45,.35) 48%, #090706 70%); box-shadow: 0 0 4rem rgba(111,135,144,.28), inset 0 -1rem 1rem rgba(9,7,6,.8); }
.bowl span { position:absolute; inset:1rem; border:1px solid rgba(232,216,184,.24); border-radius:50%; animation:ripple 3.2s infinite; }
.bowl.small{left:24rem;top:9rem;transform:scale(.66)}.bowl.wide{left:8rem;top:18rem;transform:scale(1.18,.8)}
.raindrop { position: absolute; top: -10vh; width: 1px; height: 5rem; background: linear-gradient(transparent, #6F8790); opacity: .4; animation: drop linear infinite; }

.ember { background: radial-gradient(circle at 45% 70%, rgba(217,154,78,.18), transparent 34rem), #090706; }
.ember-door { position: absolute; left: 11vw; top: 18vh; width: 23vw; height: 64vh; border-radius: 50% 50% 8% 8% / 27% 27% 4% 4%; background: radial-gradient(ellipse at 50% 85%, rgba(217,154,78,.9), rgba(91,24,40,.34) 30%, rgba(9,7,6,.94) 68%); box-shadow: inset 0 0 4rem #090706, 0 0 7rem rgba(217,154,78,.22); }
.final-counter { position: absolute; left: 24vw; right: 8vw; bottom: 9vh; height: 16vh; border-radius: 50% 50% 0 0; background: linear-gradient(#9B4F2F, #1D1915); }
.constellation-cups span { position: absolute; width: 3.4rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(ellipse, #E8D8B8 12%, #D99A4E 19%, #5B1828 54%, #090706 72%); box-shadow: 0 0 2rem rgba(217,154,78,.4); }
.constellation-cups span:nth-child(1){left:16%;top:-1rem}.constellation-cups span:nth-child(2){left:34%;top:1.8rem}.constellation-cups span:nth-child(3){left:51%;top:-.4rem}.constellation-cups span:nth-child(4){left:66%;top:2.2rem}.constellation-cups span:nth-child(5){left:82%;top:.1rem}
.last-inscription { position: absolute; right: 10vw; top: 18vh; text-align: right; }
.stamp { display: inline-block; border: 1px solid rgba(217,154,78,.55); color: var(--amber); padding: .5rem .9rem; transform: rotate(3deg); font-family: var(--sansjp); letter-spacing: .16em; }

.reveal { opacity: 0; transform: translateY(3rem); filter: blur(8px); transition: opacity 1.3s ease, transform 1.3s ease, filter 1.3s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

@keyframes ripple { 0%,100%{transform:scale(.82);opacity:.55} 50%{transform:scale(1.08);opacity:1} }
@keyframes moth { 0%,100%{transform:translate(0,0) rotate(0deg)} 35%{transform:translate(-2rem,1rem) rotate(25deg)} 70%{transform:translate(1rem,-1.6rem) rotate(-35deg)} }
@keyframes drop { to { transform: translateY(118vh); opacity: 0; } }

@media (max-width: 760px) {
  .chamber { padding: 8vh 7vw; }
  .chamber-nav { display: none; }
  .paper-name { left: 5vw; right: 12vw; }
  .drain { right: 12vw; bottom: 17vh; }
  .plaque-left, .ledge-copy, .jar-label, .rain-copy, .last-inscription { position: relative; left: auto; right: auto; top: auto; text-align: left; margin-top: 14vh; }
  .stone-steps, .jar-wall, .rain-bowls { opacity: .65; transform: scale(.72); transform-origin: right bottom; }
  .countertop { width: 110vw; left: -8vw; }
  .ember-door { width: 48vw; left: 5vw; opacity: .7; }
}