:root {
  --rain-plaster: #ECE7DC;
  --wet-cedar: #2B2118;
  --noren-indigo: #243B5A;
  --kraft-paper: #B89B72;
  --rice-glue-white: #F8F4EA;
  --oxidized-brass: #8C6A38;
  --rain-glass-blue: #9CB8C2;
  --mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --functional: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--wet-cedar);
  background: var(--rain-plaster);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  background:
    radial-gradient(circle at 20% 30%, rgba(43,33,24,.09) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(248,244,234,.35), rgba(36,59,90,.04), rgba(248,244,234,.22));
  mix-blend-mode: multiply;
}

.rain-glass {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .45;
  background:
    linear-gradient(175deg, transparent 0 14%, rgba(156,184,194,.32) 15%, transparent 17% 100%),
    radial-gradient(ellipse at 72% 20%, rgba(156,184,194,.5) 0 2px, transparent 3px),
    radial-gradient(ellipse at 18% 60%, rgba(156,184,194,.42) 0 2px, transparent 4px);
  transform: translateY(var(--rain-offset, 0px));
}

.object-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-chip {
  width: 48px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--wet-cedar);
  background: rgba(248,244,234,.76);
  border: 1px solid rgba(140,106,56,.45);
  text-decoration: none;
  font-family: var(--functional);
  font-size: 12px;
  letter-spacing: .08em;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.nav-chip.active,
.nav-chip:hover {
  background: var(--noren-indigo);
  color: var(--rice-glue-white);
  transform: translateX(-6px);
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vw;
  overflow: hidden;
}

.plaster-field {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(140,106,56,.16) 48.1% 48.25%, transparent 48.35%),
    radial-gradient(ellipse at 76% 22%, rgba(156,184,194,.2), transparent 30%),
    var(--rain-plaster);
}

.chapter-kicker {
  margin: 0 0 18px;
  color: var(--oxidized-brass);
  font-family: var(--functional);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  letter-spacing: .08em;
}

h1 { font-size: clamp(64px, 12vw, 150px); writing-mode: vertical-rl; line-height: .95; }
h2 { font-size: clamp(36px, 6vw, 84px); line-height: 1.06; max-width: 920px; }
p { line-height: 1.9; }

.noren-threshold { min-height: 100svh; }

.noren-curtain {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr .72fr 1fr;
  transition: opacity 1s ease;
}

.noren-panel {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(248,244,234,.03) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #243B5A, #1a2d48 62%, #243B5A);
  border-right: 1px solid rgba(248,244,234,.18);
  box-shadow: inset 0 -60px 80px rgba(43,33,24,.32);
  transition: transform 1.35s cubic-bezier(.77,0,.18,1);
}

.noren-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18vh;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.22));
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}

.noren-panel.center {
  display: grid;
  place-items: center;
  color: rgba(248,244,234,.78);
  font-family: var(--mincho);
  font-size: clamp(42px, 8vw, 102px);
  letter-spacing: .3em;
  writing-mode: vertical-rl;
}

.cloth-thread {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(156,184,194,.12) 18px, transparent 19px);
}

.rain-reflection {
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(112deg, transparent 35%, rgba(156,184,194,.35), transparent 55%);
  animation: rainSweep 6s ease-in-out infinite;
}

.noren-open .noren-panel.left { transform: translateX(-86%); }
.noren-open .noren-panel.center { transform: translateY(-104%); }
.noren-open .noren-panel.right { transform: translateX(86%); }

.threshold-mark {
  width: min(760px, 70vw);
  min-height: 70vh;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
  opacity: .92;
}

.subtitle { max-width: 360px; color: rgba(43,33,24,.72); }

.stamp-seal {
  border: 2px solid var(--oxidized-brass);
  color: var(--oxidized-brass);
  background: rgba(248,244,234,.72);
  font-family: var(--functional);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(140,106,56,.18) inset;
  transition: transform .22s ease, box-shadow .45s ease, filter .45s ease;
}

.stamp-seal:hover,
.stamp-seal.pressed {
  transform: scale(.96);
  box-shadow: 0 0 28px 12px rgba(140,106,56,.18) inset;
  filter: saturate(1.2) blur(.1px);
}

.open-shop { padding: 14px 18px; cursor: pointer; }

.roof-drips {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--wet-cedar) 0 42px, transparent 42px 48px);
  opacity: .82;
}

.umbrella-shadow {
  position: absolute;
  width: 36vw; height: 16vw;
  right: 8vw; bottom: 8vh;
  border-radius: 50% 50% 10% 10%;
  background: rgba(36,59,90,.12);
  filter: blur(10px);
  transform: rotate(-8deg);
}

.ledger-counter { align-items: end; }
.scene-heading { justify-self: start; align-self: start; }
.scene-heading.narrow { max-width: 560px; }

.counter-stage {
  width: min(1120px, 86vw);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: end;
}

.ledger-book {
  position: relative;
  min-height: 420px;
  padding: 54px 44px;
  background:
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(140,106,56,.22) 50px 51px),
    linear-gradient(90deg, rgba(184,155,114,.2), transparent 12%),
    var(--rice-glue-white);
  border: 1px solid rgba(140,106,56,.35);
  box-shadow: 0 28px 70px rgba(43,33,24,.18);
}

.ledger-line {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 13px 0;
  border-bottom: 1px dotted rgba(140,106,56,.3);
  font-family: var(--functional);
}

.ledger-line span { font-family: var(--mincho); font-size: 24px; color: var(--noren-indigo); }
.ledger-line em { font-style: normal; color: rgba(43,33,24,.62); }
.ledger-seal { position: absolute; right: 42px; bottom: 38px; width: 72px; height: 72px; display: grid; place-items: center; font-size: 32px; }

.drawer-reveal {
  position: relative;
  min-height: 210px;
  padding-left: 30px;
  background: var(--wet-cedar);
  box-shadow: inset 0 15px 0 rgba(184,155,114,.12), 0 22px 60px rgba(43,33,24,.22);
  transform: translateX(34%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
}

.drawer-reveal.open,
.drawer-reveal:hover { transform: translateX(0); }

.drawer-handle {
  position: absolute;
  left: -24px; top: 50%;
  width: 48px; height: 82px;
  border: 0;
  border-radius: 28px;
  color: var(--rice-glue-white);
  background: var(--oxidized-brass);
  font-family: var(--functional);
  writing-mode: vertical-rl;
  cursor: pointer;
}

.drawer-note { padding: 42px; color: var(--rice-glue-white); }
.washi-label { display: inline-block; padding: 6px 10px; background: var(--kraft-paper); color: var(--wet-cedar); font-family: var(--functional); font-size: 12px; letter-spacing: .16em; }

.cedar-shelf {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(156,184,194,.22), transparent 32%),
    repeating-linear-gradient(90deg, rgba(248,244,234,.025) 0 3px, transparent 3px 29px),
    var(--wet-cedar);
  color: var(--rice-glue-white);
  grid-template-columns: 1.3fr .7fr;
  gap: 6vw;
}

.shelf-wall { position: relative; width: min(760px, 56vw); height: 68vh; }
.shelf-rail, .shelf-wall::before, .shelf-wall::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  background: linear-gradient(90deg, #1b140f, #4a3825, #1d1510);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
.shelf-rail { top: 12%; }
.shelf-wall::before { top: 46%; }
.shelf-wall::after { bottom: 10%; }

.shelf-object {
  position: absolute;
  border: 0;
  cursor: pointer;
  filter: blur(.8px);
  transition: transform .45s ease, filter .45s ease;
}
.shelf-object:hover,
.shelf-object.focused { transform: translateY(-10px); filter: blur(0); }
.washi-packet { left: 8%; top: 18%; width: 180px; height: 120px; background: var(--rice-glue-white); transform: rotate(-2deg); }
.ceramic-jar { left: 48%; top: 14%; width: 128px; height: 160px; border-radius: 45% 45% 18% 18%; background: #d8d1c4; }
.cedar-box { left: 18%; top: 52%; width: 250px; height: 120px; background: linear-gradient(90deg, #4b3525, #261b14); }
.receipt-stack { left: 62%; top: 56%; width: 170px; height: 128px; background: repeating-linear-gradient(0deg, var(--rice-glue-white) 0 22px, #ded5c4 22px 24px); }
.jar-lid { display: block; width: 92px; height: 22px; margin: -8px auto 0; border-radius: 50%; background: var(--rain-glass-blue); }
.drawer-pull { display: block; width: 56px; height: 14px; margin: 54px auto; border-radius: 20px; background: var(--oxidized-brass); }
.tiny { position: absolute; right: 18px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; }
.shelf-caption { max-width: 420px; transition: opacity .35s ease, filter .35s ease; }
.shelf-caption.updating { opacity: .45; filter: blur(4px); }

.wrapping-table { background: linear-gradient(180deg, var(--rain-plaster) 0 55%, var(--kraft-paper) 55%); }
.wrapping-surface { position: relative; width: min(920px, 86vw); height: 56vh; }
.paper-sheet { position: absolute; background: var(--rice-glue-white); box-shadow: 0 20px 54px rgba(43,33,24,.16); border: 1px solid rgba(140,106,56,.22); }
.sheet-one { width: 360px; height: 240px; left: 2%; top: 12%; transform: rotate(-8deg); }
.sheet-two { width: 300px; height: 230px; right: 6%; top: 0; transform: rotate(7deg); }
.fold-line { position: absolute; inset: 0 50% 0 auto; border-left: 1px dashed rgba(140,106,56,.46); }
.fold-line.diagonal { inset: 0; border-left: 0; background: linear-gradient(35deg, transparent 49.6%, rgba(140,106,56,.42) 50%, transparent 50.4%); }
.twine-card { position: absolute; left: 28%; bottom: 2%; width: 420px; min-height: 240px; padding: 76px 44px 34px; background: var(--kraft-paper); color: var(--wet-cedar); }
.twine-line { position: absolute; background: var(--oxidized-brass); transform-origin: left center; }
.twine-line.horizontal { left: 0; right: 0; top: 48%; height: 2px; animation: drawWide 2.4s ease both; }
.twine-line.vertical { top: 0; bottom: 0; left: 50%; width: 2px; animation: drawTall 2.4s ease both; }
.pressable { position: absolute; left: 50%; top: 48%; width: 74px; height: 74px; transform: translate(-50%, -50%); font-family: var(--mincho); font-size: 34px; cursor: pointer; }

.rain-garden {
  background:
    linear-gradient(180deg, rgba(36,59,90,.25), rgba(236,231,220,.88)),
    var(--rain-glass-blue);
}
.garden-glass { position: absolute; inset: 0; backdrop-filter: blur(1px); }
.bead { position: absolute; width: 9px; height: 28px; border-radius: 50%; background: rgba(248,244,234,.6); box-shadow: 0 0 18px rgba(156,184,194,.8); animation: crawl 8s linear infinite; }
.bead-one { left: 22%; top: -10%; animation-delay: 0s; }
.bead-two { left: 57%; top: -15%; animation-delay: 2s; }
.bead-three { left: 78%; top: -8%; animation-delay: 4s; }
.exit-card { position: relative; max-width: 760px; padding: 58px; background: rgba(248,244,234,.78); border: 1px solid rgba(140,106,56,.28); box-shadow: 0 30px 90px rgba(36,59,90,.18); }
.inventory-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.inventory-strip span { padding: 8px 12px; background: var(--noren-indigo); color: var(--rice-glue-white); font-family: var(--functional); font-size: 12px; letter-spacing: .14em; }

@keyframes rainSweep { 0% { transform: translateX(-30%); } 55%,100% { transform: translateX(32%); } }
@keyframes drawWide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawTall { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crawl { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(115vh); opacity: .15; } }

@media (max-width: 820px) {
  .object-nav { right: 10px; }
  .scene { padding: 18vw 7vw; }
  .threshold-mark, .counter-stage, .cedar-shelf { grid-template-columns: 1fr; }
  .threshold-mark { width: 84vw; }
  h1 { writing-mode: horizontal-tb; font-size: 22vw; }
  .shelf-wall { width: 84vw; height: 58vh; }
  .shelf-caption { align-self: start; }
  .twine-card { left: 5%; width: 86vw; }
}