:root {
  --warehouse-plaster: #D8DDE0;
  --blue-graphite: #59656F;
  --deep-shelf-shadow: #20272B;
  --faded-sage: #8FA69A;
  --pale-lichen: #C7D3CB;
  --old-inventory-paper: #F2EFE7;
  --dried-stem-ink: #4B5A4F;
  --magnetic-blue: #6E8FA3;
  --display: "Shippori Mincho", "Yu Mincho", serif;
  --accent: "Fraunces", Georgia, serif;
  --hand: "Zen Kurenaido", cursive;
  --utility: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
}

/* Design typography tokens: into eclectic Japanese herbarium/catalog voice rather than relying on overused mono or corporate sans patterns. IBM Plex Sans JP** from Google Fonts for readable body copy */

@keyframes dust-breathe {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.64; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-shelf-shadow);
  background: var(--warehouse-plaster);
  font-family: var(--utility);
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242,239,231,0.55), transparent 26vw),
    radial-gradient(circle at 88% 42%, rgba(143,166,154,0.18), transparent 28vw),
    linear-gradient(90deg, rgba(32,39,43,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(32,39,43,0.025) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(32,39,43,0.018) 0 1px, transparent 1px 7px),
    radial-gradient(circle, rgba(32,39,43,0.08) 0 0.8px, transparent 1px);
  background-size: 100% 100%, 16px 16px;
  mix-blend-mode: multiply;
  z-index: 30;
}

.cursor-field {
  position: fixed;
  width: 18px;
  height: 18px;
  border: 1px solid var(--magnetic-blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  opacity: 0.55;
  transform: translate(-50%, -50%);
}

.catalog-tabs {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab {
  width: 34px;
  padding: 8px 0;
  color: var(--blue-graphite);
  text-decoration: none;
  font: 500 10px/1 var(--utility);
  letter-spacing: 0.16em;
  text-align: center;
  border-left: 1px solid rgba(89,101,111,0.35);
  background: rgba(242,239,231,0.28);
  transform-origin: right center;
  transition: transform 240ms ease, background 240ms ease, color 240ms ease;
}

.tab.active, .tab:hover { background: rgba(110,143,163,0.18); color: var(--deep-shelf-shadow); }

.chamber {
  position: relative;
  min-height: 112vh;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(89,101,111,0.13);
}

.chamber::after {
  content: attr(data-chapter);
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: rgba(89,101,111,0.45);
  font: 400 13px/1 var(--hand);
  letter-spacing: 0.08em;
}

.threshold { min-height: 118vh; }
.label { background: linear-gradient(180deg, rgba(216,221,224,0.35), rgba(199,211,203,0.22)); }
.drawer { background: linear-gradient(180deg, rgba(216,221,224,0.75), rgba(242,239,231,0.24)); }
.seeds { background: linear-gradient(180deg, rgba(216,221,224,0.58), rgba(143,166,154,0.18)); }
.dust { background: linear-gradient(180deg, rgba(89,101,111,0.12), rgba(216,221,224,0.72)); }
.reopening { background: linear-gradient(180deg, rgba(216,221,224,0.8), rgba(242,239,231,0.62)); }

[data-depth] { will-change: transform; }

.shelf-plane {
  position: absolute;
  left: 6vw;
  right: 10vw;
  height: 16px;
  border-top: 1px solid rgba(32,39,43,0.22);
  border-bottom: 1px solid rgba(242,239,231,0.34);
  background: rgba(89,101,111,0.08);
  filter: blur(0.2px);
}

.shelf-back { top: 25vh; box-shadow: 0 34vh 0 rgba(89,101,111,0.055), 0 57vh 0 rgba(89,101,111,0.04); }
.shelf-mid { top: 62vh; left: 24vw; right: 3vw; opacity: 0.7; }
.shelf-plane.low { top: 70vh; left: 2vw; right: 22vw; }
.shelf-plane.tall { inset: 14vh auto auto 18vw; width: 1px; height: 72vh; border: 0; background: rgba(89,101,111,0.22); box-shadow: 9vw 0 rgba(89,101,111,0.08), 31vw 0 rgba(89,101,111,0.12), 54vw 0 rgba(89,101,111,0.06); }

.title-wrap {
  position: absolute;
  top: 32vh;
  left: 12vw;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 12vw, 12.5rem);
  font-weight: 400;
  letter-spacing: 0.075em;
  color: var(--deep-shelf-shadow);
  text-shadow: 0 1px 0 rgba(242,239,231,0.7);
}

.annotation, .margin-note, .hand-arrow, .closing-note {
  font-family: var(--hand);
  color: var(--dried-stem-ink);
  letter-spacing: 0.05em;
}

.annotation { margin: 0 0 12px 7px; color: var(--blue-graphite); }

.inventory-tag, .paper-slip, .envelope {
  background: rgba(242,239,231,0.68);
  border: 1px solid rgba(89,101,111,0.22);
  box-shadow: 0 28px 70px rgba(32,39,43,0.11), inset 0 0 40px rgba(216,221,224,0.32);
  backdrop-filter: blur(5px);
}

.inventory-tag {
  position: absolute;
  right: 15vw;
  top: 26vh;
  width: 218px;
  min-height: 112px;
  padding: 22px 20px;
  transform: rotate(-3deg);
}

.inventory-tag::before, .paper-slip::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-graphite);
  opacity: 0.36;
  top: 14px;
  right: 16px;
}

.inventory-tag span {
  display: block;
  font: 400 2.35rem/1.1 var(--display);
  letter-spacing: 0.12em;
}

.inventory-tag small { color: var(--blue-graphite); font: 400 0.72rem/1.4 var(--utility); text-transform: uppercase; letter-spacing: 0.16em; }

.vine, .botanical, .root-map, .kura-roof, .sprout {
  position: absolute;
  fill: none;
  stroke: var(--dried-stem-ink);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.64;
  pointer-events: none;
}

.vine-hero { width: 72vw; height: 46vh; top: 18vh; left: 9vw; z-index: 2; }
.leaf { fill: rgba(143,166,154,0.18); stroke: var(--dried-stem-ink); }
.fern { width: 34vw; height: 72vh; right: 6vw; top: 12vh; }
.fronds path, .root-map path:not(.draw-path), .kura-roof path:not(.draw-path) { stroke: rgba(75,90,79,0.52); }
.root-map { width: 60vw; height: 44vh; right: 6vw; top: 34vh; opacity: 0.47; }
.kura-roof { width: 48vw; height: 24vh; right: 8vw; top: 48vh; stroke: rgba(32,39,43,0.42); }
.sprout { width: 28vw; height: 56vh; left: 13vw; top: 25vh; }

.draw-path { stroke-dasharray: var(--path-length, 900); stroke-dashoffset: var(--path-length, 900); }

.paper-slip {
  position: absolute;
  width: min(430px, 72vw);
  padding: 34px 34px 38px;
}

.left-slip { left: 9vw; top: 27vh; transform: rotate(1.5deg); }
.lower-slip { left: 16vw; bottom: 20vh; transform: rotate(-1.2deg); }
.right-slip { right: 15vw; top: 30vh; transform: rotate(1deg); }
.final-slip { right: 14vw; top: 31vh; transform: rotate(-1.5deg); }

.catalog-no {
  display: block;
  margin-bottom: 18px;
  color: var(--magnetic-blue);
  font: 500 0.68rem/1 var(--utility);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 18px;
  font: 300 clamp(2.4rem, 5vw, 5.9rem)/0.92 var(--accent);
  color: var(--deep-shelf-shadow);
  letter-spacing: -0.04em;
}

.paper-slip p {
  margin: 0;
  color: var(--blue-graphite);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
}

.wall-marks {
  position: absolute;
  left: 50%;
  top: 8vh;
  width: 1px;
  height: 72vh;
  background: repeating-linear-gradient(to bottom, rgba(89,101,111,0.28) 0 1px, transparent 1px 18px);
  box-shadow: 18px 0 rgba(89,101,111,0.08), -22px 0 rgba(89,101,111,0.06);
}

.margin-note { position: absolute; left: 19vw; bottom: 17vh; font-size: 1.55rem; transform: rotate(-8deg); }

.drawer-stack {
  position: absolute;
  left: 42vw;
  top: 12vh;
  width: 45vw;
  height: 54vh;
}
.drawer-stack div {
  position: absolute;
  left: calc(var(--i, 0) * 1px);
  right: 0;
  height: 32%;
  border: 1px solid rgba(89,101,111,0.15);
  background: rgba(242,239,231,0.22);
}
.drawer-stack div:nth-child(1) { top: 0; transform: translateX(-42px); }
.drawer-stack div:nth-child(2) { top: 33%; transform: translateX(18px); }
.drawer-stack div:nth-child(3) { top: 66%; transform: translateX(-12px); }

.envelope {
  position: absolute;
  right: 18vw;
  bottom: 18vh;
  width: 260px;
  height: 146px;
  transform: rotate(4deg);
}
.envelope::before, .envelope::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 49.5%, rgba(89,101,111,0.2) 50%, transparent 50.5%); }
.envelope::after { transform: scaleX(-1); }
.envelope span { position: absolute; left: 22px; bottom: 18px; font: 1.2rem var(--hand); color: var(--dried-stem-ink); }

.seed-cloud, .seed-grid { position: absolute; inset: 0; pointer-events: none; }
.seed {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--deep-shelf-shadow);
  opacity: 0.28;
  transition: transform 650ms cubic-bezier(.2,.8,.2,1), opacity 650ms ease;
}
.seed.aligned { opacity: 0.55; background: var(--magnetic-blue); }

.hand-arrow { position: absolute; left: 18vw; top: 30vh; font-size: 2rem; color: var(--blue-graphite); transform: rotate(-7deg); }
.shadow-shelves { position: absolute; inset: 18vh 7vw auto 7vw; height: 64vh; background: repeating-linear-gradient(to bottom, transparent 0 70px, rgba(32,39,43,0.16) 71px 73px, rgba(242,239,231,0.2) 74px 76px); filter: blur(0.7px); }
.pale-door { position: absolute; left: 8vw; top: 18vh; width: 58vw; height: 68vh; border: 1px solid rgba(89,101,111,0.13); background: linear-gradient(90deg, rgba(242,239,231,0.18), rgba(242,239,231,0.52), rgba(199,211,203,0.16)); }
.closing-note { position: absolute; right: 17vw; bottom: 20vh; font-size: 1.45rem; color: var(--dried-stem-ink); }

.magnetic { transition: transform 260ms cubic-bezier(.2,.8,.2,1); }

@media (max-width: 760px) {
  .catalog-tabs { right: 8px; }
  .title-wrap { left: 7vw; top: 32vh; }
  h1 { font-size: clamp(3.4rem, 15vw, 6rem); }
  .inventory-tag { right: 8vw; top: 55vh; }
  .paper-slip { left: 7vw; right: auto; width: 78vw; }
  .right-slip, .final-slip { right: 10vw; left: auto; }
  .fern, .root-map, .kura-roof, .sprout { width: 76vw; opacity: 0.35; }
}