:root {
  --bottle: #102A1F;
  --cream: #F4E8C8;
  --cordial: #F6C84C;
  --brass: #A6783A;
  --ink: #241712;
  --absinthe: #9EBB5A;
  --wax: #8F2632;
  --porcelain: #C8D7D2;
  --display: "Cinzel Decorative", "Baskerville", "Times New Roman", serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --round: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bottle);
  color: var(--cream);
  font-family: var(--serif);
}

.velvet-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(158,187,90,.18), transparent 30%),
    radial-gradient(circle at 75% 10%, rgba(166,120,58,.14), transparent 28%),
    radial-gradient(circle at 55% 80%, rgba(36,23,18,.55), transparent 42%),
    repeating-linear-gradient(115deg, rgba(244,232,200,.025) 0 1px, transparent 1px 7px),
    var(--bottle);
  filter: saturate(.9);
  animation: velvetBreath 7s ease-in-out infinite;
}

@keyframes velvetBreath {
  0%, 100% { opacity: .84; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.015); }
}

.marginalia-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(58px, 7vw, 92px);
  z-index: 6;
  border-right: 1px solid rgba(166,120,58,.65);
  background: linear-gradient(90deg, rgba(36,23,18,.72), rgba(16,42,31,.28));
  display: grid;
  place-items: center;
  color: var(--brass);
}

.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--jp);
  letter-spacing: .32em;
  font-size: .9rem;
}

.rail-number {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-family: var(--round);
  color: var(--cordial);
}

.hinge {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 86px;
  border-radius: 18px;
  background: linear-gradient(90deg, #6f4b22, var(--brass), #3c2818);
  box-shadow: inset 0 0 0 2px rgba(244,232,200,.1), 0 0 18px rgba(166,120,58,.25);
}
.hinge-top { top: 9%; }
.hinge-bottom { bottom: 9%; }

.cabinet {
  position: relative;
  z-index: 1;
  margin-left: clamp(58px, 7vw, 92px);
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(20px, .18fr) minmax(280px, 1fr) minmax(80px, .32fr);
  align-items: center;
  padding: clamp(24px, 5vw, 72px);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 5vh 8vw;
  border: 1px solid rgba(166,120,58,.48);
  clip-path: polygon(0 0, 100% 4%, 96% 100%, 3% 94%);
  box-shadow: inset 0 0 40px rgba(166,120,58,.12);
  pointer-events: none;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .08em;
  margin: 0;
  text-shadow: 0 2px 0 rgba(36,23,18,.6);
}

h1 { font-size: clamp(2.3rem, 6vw, 6.8rem); grid-column: 2; align-self: end; }
h2 { font-size: clamp(2rem, 5vw, 5.8rem); }
p { font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.6; }
.jp { font-family: var(--jp); }

.nameplate {
  position: absolute;
  top: 11vh;
  left: 13vw;
  padding: .55rem 2.2rem;
  color: var(--cream);
  font-family: var(--display);
  letter-spacing: .18em;
  border: 1px solid var(--brass);
  background: linear-gradient(120deg, #4f341b, var(--brass), #332116);
  box-shadow: inset 0 0 18px rgba(244,232,200,.18), 0 18px 50px rgba(0,0,0,.35);
  transform: rotate(-2deg);
}

.keyhole {
  position: absolute;
  right: 27vw;
  top: 30vh;
  width: 74px;
  height: 118px;
  border-radius: 48% 48% 16px 16px;
  background: radial-gradient(circle at 50% 22%, var(--ink) 0 22px, transparent 23px), linear-gradient(90deg, #6f4b22, var(--brass), #2c1b13);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(244,232,200,.18), 0 0 42px rgba(246,200,76,.18);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s;
}
.keyhole.unlocked { transform: rotateY(34deg) rotateZ(4deg); filter: brightness(1.35); }
.keyhole span { position: absolute; inset: 48px 29px 16px; background: var(--ink); border-radius: 12px; }

.pressed-daisy { position: absolute; width: 180px; height: 180px; filter: drop-shadow(0 18px 18px rgba(36,23,18,.42)); }
.pressed-daisy i {
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 78px;
  margin: -72px 0 0 -14px;
  background: radial-gradient(ellipse at 50% 18%, #fff7d9, var(--cream) 45%, rgba(246,200,76,.6));
  border: 1px solid rgba(166,120,58,.32);
  border-radius: 65% 35% 60% 40%;
  transform-origin: 50% 72px;
  opacity: .94;
}
.pressed-daisy i:nth-child(1){ transform: rotate(0deg) scaleY(.95); }
.pressed-daisy i:nth-child(2){ transform: rotate(30deg) scaleY(1.08); }
.pressed-daisy i:nth-child(3){ transform: rotate(60deg) scaleY(.88); }
.pressed-daisy i:nth-child(4){ transform: rotate(92deg) scaleY(1.02); }
.pressed-daisy i:nth-child(5){ transform: rotate(124deg) scaleY(.92); }
.pressed-daisy i:nth-child(6){ transform: rotate(154deg) scaleY(1.05); }
.pressed-daisy i:nth-child(7){ transform: rotate(184deg) scaleY(.9); }
.pressed-daisy i:nth-child(8){ transform: rotate(214deg) scaleY(1.12); }
.pressed-daisy i:nth-child(9){ transform: rotate(244deg) scaleY(.86); }
.pressed-daisy i:nth-child(10){ transform: rotate(274deg) scaleY(1); }
.pressed-daisy i:nth-child(11){ transform: rotate(306deg) scaleY(.96); }
.pressed-daisy i:nth-child(12){ transform: rotate(334deg) scaleY(1.08); }
.pressed-daisy b {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cordial), #d09b25 58%, var(--brass));
  box-shadow: inset 0 0 0 5px rgba(36,23,18,.12);
}
.daisy-hero { left: 28vw; top: 24vh; transform: rotate(-18deg); animation: petalSettle 5s ease-in-out infinite; }
@keyframes petalSettle { 50% { transform: rotate(-15deg) translateY(8px); } }

.opening-note {
  position: absolute;
  left: 18vw;
  bottom: 22vh;
  color: var(--ink);
  background: var(--cream);
  padding: .8rem 1.4rem;
  font-style: italic;
  transform-origin: top left;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
.label-peel { animation: labelPeel 6s ease-in-out infinite; }
@keyframes labelPeel { 50% { transform: rotateX(16deg) rotateZ(-2deg); } }
.locked-herbarium .jp { grid-column: 2; align-self: start; color: var(--porcelain); letter-spacing: .18em; }

.drawer-petals { background: linear-gradient(100deg, rgba(36,23,18,.72), rgba(16,42,31,.96)); }
.drawer-face {
  grid-column: 1 / 3;
  height: min(62vh, 520px);
  background: linear-gradient(135deg, #3b2519, #6d4828 48%, #2b1a13);
  border: 2px solid var(--brass);
  box-shadow: inset 0 0 0 12px rgba(166,120,58,.18), 25px 25px 80px rgba(0,0,0,.45);
  transform: translateX(var(--drawer-shift, -18%));
  transition: transform 1s cubic-bezier(.16,.84,.22,1);
  position: relative;
}
.scene.in-view .drawer-face { --drawer-shift: 9%; }
.pull { position: absolute; right: 9%; top: 50%; width: 170px; height: 34px; border: 2px solid var(--brass); border-radius: 40px; box-shadow: inset 0 0 20px rgba(246,200,76,.15); }
.drawer-title { position: absolute; left: 8%; top: 12%; font-family: var(--display); font-size: clamp(2rem,4vw,4.7rem); }
.drawer-index { position: absolute; left: 9%; bottom: 12%; font-family: var(--round); font-size: 5rem; color: rgba(246,200,76,.45); }
.specimen-drawer { position: absolute; inset: 17vh 8vw 10vh 28vw; background: var(--cream); color: var(--ink); border: 1px solid var(--brass); box-shadow: 0 20px 60px rgba(0,0,0,.35); transform: rotate(-2deg); }
.tag { position: absolute; padding: .5rem .9rem; border: 1px solid rgba(166,120,58,.55); background: rgba(244,232,200,.86); font-style: italic; }
.tag-one { left: 10%; top: 14%; }.tag-two { right: 12%; bottom: 16%; color: var(--wax); }
.daisy-a { left: 32%; top: 24%; transform: scale(.75) rotate(25deg); }.daisy-b { right: 15%; top: 12%; transform: scale(.55) rotate(-30deg); }
.spoon { position: absolute; width: 150px; height: 16px; background: linear-gradient(90deg, transparent 0 20px, var(--brass) 21px 100%); border-radius: 20px; }
.spoon::before { content:""; position:absolute; left:0; top:-13px; width:42px; height:42px; border:2px solid var(--brass); border-radius:50%; }
.spoon-one { left: 13%; bottom: 22%; transform: rotate(-18deg); }.spoon-two { right: 18%; top: 38%; transform: rotate(22deg) scale(.8); }
.root-diagram { position:absolute; left:32%; bottom:8%; width:260px; height:120px; border-left:1px solid var(--ink); opacity:.35; background: repeating-radial-gradient(ellipse at top, transparent 0 12px, rgba(36,23,18,.5) 13px 14px); clip-path: polygon(48% 0, 54% 0, 80% 100%, 20% 100%); }

.cordial-formula { background: radial-gradient(circle at 70% 50%, rgba(246,200,76,.12), transparent 34%), var(--bottle); }
.recipe-plate { grid-column: 2; max-width: 760px; min-height: 70vh; justify-self: center; position: relative; padding: clamp(32px,5vw,72px); color: var(--ink); background: radial-gradient(circle at 50% 40%, rgba(158,187,90,.18), transparent 34%), var(--cream); border: 2px solid var(--brass); border-radius: 50% 46% 48% 52%; box-shadow: 0 24px 80px rgba(0,0,0,.4); transform: rotate(var(--plate-tilt, -3deg)); transition: transform .9s ease; }
.recipe-plate h2 { color: var(--ink); font-size: clamp(2rem,4.5vw,5rem); }
.formula-number { font-family: var(--round); color: var(--wax); font-size: 2.6rem; }
.recipe-line { border-bottom: 1px solid rgba(166,120,58,.42); font-style: italic; }
.ornament-ring { position:absolute; inset:18px; border:1px dashed var(--brass); border-radius:inherit; pointer-events:none; }
.stem-lines { position:absolute; inset:auto 4% 5% 4%; width:92%; height:42%; fill:none; stroke:var(--absinthe); stroke-width:3; stroke-linecap:round; stroke-dasharray: 700; stroke-dashoffset: var(--path-offset, 700); transition: stroke-dashoffset 1.8s ease; }
.scene.in-view .stem-lines { --path-offset: 0; }
.bottle-row { grid-column: 3; display:flex; align-items:end; gap:18px; min-height:360px; }
.bottle { position:relative; width:70px; border:1px solid var(--porcelain); border-radius:20px 20px 12px 12px; background: linear-gradient(90deg, rgba(200,215,210,.18), rgba(246,200,76,.16), rgba(200,215,210,.05)); box-shadow: inset 0 -60px 45px rgba(246,200,76,.24), 0 0 35px rgba(246,200,76,.16); animation: liquidGlow 4s ease-in-out infinite; }
.bottle::before { content:""; position:absolute; left:22px; top:-80px; width:26px; height:84px; border:1px solid var(--porcelain); background:rgba(200,215,210,.08); }
.tall { height:270px; }.squat { height:190px; }.narrow { width:48px; height:235px; }
@keyframes liquidGlow { 50% { box-shadow: inset 0 -85px 60px rgba(246,200,76,.44), 0 0 55px rgba(246,200,76,.28); } }

.mirror-shelf { background: linear-gradient(115deg, #080d0b, var(--bottle) 58%, #1a100d); }
.mirror-stack { grid-column:2 / 4; position:absolute; inset:12vh 6vw 12vh 18vw; }
.mirror { position:absolute; border:1px solid rgba(200,215,210,.42); background: linear-gradient(120deg, rgba(200,215,210,.05), rgba(200,215,210,.24) 35%, rgba(36,23,18,.8)); box-shadow: inset 0 0 60px rgba(200,215,210,.08); }
.mirror-one { inset:0 20% 12% 0; transform:skewY(-4deg); }.mirror-two { inset:18% 6% 0 28%; transform:skewY(5deg); }.mirror-three { inset:8% 0 22% 72%; }
.ghost-rosette { position:absolute; right:18vw; top:18vh; width:360px; height:360px; border-radius:50%; opacity:.18; background: repeating-conic-gradient(from 10deg, var(--cream) 0 8deg, transparent 9deg 20deg), radial-gradient(circle, var(--cordial), transparent 28%); animation: rotateRosette 18s linear infinite; }
@keyframes rotateRosette { to { transform: rotate(360deg); } }
.glass-coupe { position:absolute; left:29vw; bottom:18vh; width:190px; height:240px; filter: drop-shadow(0 0 22px rgba(200,215,210,.25)); }
.bowl { position:absolute; top:0; left:20px; width:150px; height:82px; border:2px solid var(--porcelain); border-radius:10px 10px 80px 80px; background:linear-gradient(180deg, rgba(246,200,76,.18), transparent); }
.stem { position:absolute; top:82px; left:93px; width:4px; height:100px; background:var(--porcelain); }.foot { position:absolute; bottom:24px; left:45px; width:105px; height:12px; border:2px solid var(--porcelain); border-radius:50%; }
.mirror-shelf h2, .mirror-shelf p { grid-column:2; max-width:620px; z-index:2; }
.mirror-shelf p { align-self:end; color:var(--porcelain); }

.last-pressing { background: radial-gradient(circle at 50% 20%, rgba(244,232,200,.24), transparent 30%), var(--bottle); }
.paper-sheet { grid-column:2; justify-self:center; width:min(760px, 88vw); min-height:76vh; padding:clamp(34px,6vw,86px); background: linear-gradient(135deg, rgba(244,232,200,.98), rgba(244,232,200,.88)), repeating-linear-gradient(40deg, transparent 0 8px, rgba(166,120,58,.08) 9px 10px); color:var(--ink); border:1px solid var(--brass); box-shadow:0 28px 90px rgba(0,0,0,.5); position:relative; transform:rotate(1.5deg); }
.paper-sheet h2 { color:var(--ink); }.paper-sheet p { max-width:480px; }
.wax-seal { position:absolute; right:15%; bottom:18%; width:96px; height:96px; display:grid; place-items:center; border-radius:48% 52% 46% 54%; background:radial-gradient(circle at 35% 30%, #b43645, var(--wax)); color:var(--cream); font-family:var(--jp); font-size:2.5rem; box-shadow:0 10px 25px rgba(36,23,18,.3); }
.signature { position:absolute; right:12%; bottom:10%; font-family:var(--display); font-size:clamp(1.6rem,4vw,3.8rem); color:var(--brass); transform:rotate(-4deg); }
.petal { position:absolute; width:18px; height:42px; border-radius:60% 40%; background:var(--cream); border:1px solid rgba(166,120,58,.25); transform:translateY(var(--fall, -120px)) rotate(var(--rot, 0deg)); transition:transform 1.4s cubic-bezier(.2,.7,.15,1); }
.scene.in-view .petal { transform:translateY(var(--land, 260px)) rotate(calc(var(--rot, 0deg) + 120deg)); }

.chapter-dial { position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:7; display:grid; gap:14px; }
.chapter-dial button { width:42px; height:42px; border-radius:50%; border:1px solid var(--brass); background:rgba(16,42,31,.68); color:var(--cream); font-family:var(--round); cursor:pointer; transition:.35s; }
.chapter-dial button.active { background:var(--cordial); color:var(--ink); transform:scale(1.12); box-shadow:0 0 22px rgba(246,200,76,.38); }
.shelf-strip { position:fixed; right:0; top:0; bottom:0; width:clamp(42px, 6vw, 88px); z-index:5; background:linear-gradient(90deg, transparent, rgba(36,23,18,.75)); border-left:1px solid rgba(200,215,210,.18); }
.shelf-strip span { display:block; height:1px; margin-top:25vh; background:rgba(200,215,210,.32); box-shadow:0 0 18px rgba(200,215,210,.18); }

@media (max-width: 760px) {
  .scene { grid-template-columns: 1fr; padding: 76px 24px 76px 34px; }
  .marginalia-rail { width: 44px; }
  .cabinet { margin-left: 44px; }
  .shelf-strip { display:none; }
  .chapter-dial { right: 10px; gap: 8px; }
  .chapter-dial button { width: 34px; height: 34px; }
  .specimen-drawer { inset: 23vh 8vw 12vh 12vw; }
  .drawer-face { grid-column:1; }
  .bottle-row { position:absolute; right:28px; bottom:12vh; transform:scale(.68); transform-origin:bottom right; }
  .ghost-rosette { right:-90px; }
}