:root {
  --lacquer: #09060A;
  --plum: #24101C;
  --champagne: #E8D6A8;
  --brass: #B98A3B;
  --rose: #B86F75;
  --teal: #2F7C78;
  --indigo: #131A38;
  --paper: #F4EBDD;
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;
  --jp: "Noto Serif JP", "Cormorant Garamond", serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--lacquer); }
body {
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
  background: linear-gradient(135deg, #09060A 0%, #24101C 38%, #131A38 72%, #2F7C78 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244,235,221,.32) 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 60%, rgba(232,214,168,.22) 0 1px, transparent 1.8px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.08) 50%, transparent 52%);
  background-size: 4px 4px, 7px 7px, 180px 180px;
}

.dust-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 35%), rgba(232,214,168,.16), transparent 18rem),
    radial-gradient(circle at 18% 74%, rgba(184,111,117,.14), transparent 18rem);
  transition: background 900ms ease;
}

.side-index {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  display: grid;
  gap: .7rem;
}
.index-tab {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: rgba(244,235,221,.58);
  font: .68rem var(--mono);
  letter-spacing: .12em;
  border-left: 1px solid rgba(185,138,59,.55);
  background: rgba(9,6,10,.35);
  backdrop-filter: blur(10px);
  transition: color 500ms ease, transform 500ms ease, background 500ms ease;
}
.index-tab.active { color: var(--champagne); transform: translateX(-.35rem); background: rgba(185,138,59,.12); }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 8rem);
  isolation: isolate;
  overflow: hidden;
}
.chamber::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -2;
  background: radial-gradient(ellipse at 22% 28%, rgba(232,214,168,.11), transparent 26%), radial-gradient(ellipse at 72% 70%, rgba(47,124,120,.13), transparent 29%);
  transform: rotate(var(--tilt, -3deg));
}
.chamber::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6rem;
  height: 12rem;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(244,235,221,.07), transparent 64%);
  filter: blur(24px);
  transform: rotate(-2deg);
}

.vertical-ribbon {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  top: 10vh;
  writing-mode: vertical-rl;
  color: rgba(232,214,168,.62);
  font: .78rem var(--jp);
  letter-spacing: .22em;
  border-right: 1px solid rgba(185,138,59,.42);
  padding-right: .75rem;
}
.catalog, .kicker {
  font-family: var(--mono);
  color: var(--brass);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .76rem;
}
h1, h2 {
  font-family: var(--serif);
  margin: 0;
  font-weight: 500;
  line-height: .9;
  color: var(--paper);
}
h1 { font-size: clamp(4.2rem, 12vw, 12rem); max-width: 11ch; }
h2 { font-size: clamp(3.5rem, 8vw, 8rem); }
p { line-height: 1.75; color: rgba(244,235,221,.74); }

.lacquer-door { --tilt: 4deg; place-items: center; text-align: left; background: linear-gradient(135deg, #09060A 0%, #24101C 38%, #131A38 72%, #2F7C78 100%); }
.door-panel { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(9,6,10,.96), rgba(36,16,28,.93)); transition: transform 1400ms cubic-bezier(.2,.7,.1,1); }
.left-panel { clip-path: polygon(0 0, 50.2% 0, 48.8% 100%, 0 100%); }
.right-panel { clip-path: polygon(50% 0, 100% 0, 100% 100%, 51.2% 100%); }
.lacquer-door.open .left-panel { transform: translateX(-1.7rem) skewX(-1deg); }
.lacquer-door.open .right-panel { transform: translateX(1.7rem) skewX(1deg); }
.brass-seam { position: absolute; top: 6vh; bottom: 6vh; left: 50%; width: 2px; background: linear-gradient(180deg, #B98A3B, #E8D6A8, #B86F75); box-shadow: 0 0 24px rgba(185,138,59,.55); z-index: 3; transition: width 1400ms ease; }
.lacquer-door.open .brass-seam { width: 10px; }
.brass-seam span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); font: .9rem var(--mono); letter-spacing: .32em; color: var(--lacquer); text-shadow: 0 1px rgba(232,214,168,.55); white-space: nowrap; }
.door-glow { position: relative; z-index: 2; opacity: .22; filter: blur(10px); transform: translateY(1.5rem); transition: opacity 1400ms ease, filter 1400ms ease, transform 1400ms ease; }
.lacquer-door.open .door-glow { opacity: 1; filter: blur(0); transform: translateY(0); }
.door-note { max-width: 34rem; font-family: var(--jp); font-size: 1.08rem; }
.micro-stamps { position: absolute; bottom: 2rem; left: 8vw; font: .65rem var(--mono); letter-spacing: .42em; color: rgba(232,214,168,.18); }

.needle-drop { grid-template-columns: .75fr 1.25fr; gap: 4rem; background: linear-gradient(152deg, #09060A, #131A38 58%, #24101C); }
.chapter-copy { max-width: 26rem; transform: translateY(2rem); opacity: .35; transition: opacity 900ms ease, transform 900ms ease; }
.chamber.in-view .chapter-copy, .chamber.in-view .archive-copy, .chamber.in-view .cabinet-note { opacity: 1; transform: translateY(0); }
.groove-stage { position: relative; min-height: 36rem; }
.groove-svg { width: min(62vw, 850px); max-width: 100%; filter: drop-shadow(0 28px 45px rgba(0,0,0,.35)); }
.groove-shadow { fill: none; stroke: rgba(244,235,221,.08); stroke-width: 32; stroke-linecap: round; }
.groove-path { fill: none; stroke: url(#metal); stroke: #B98A3B; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: calc(1400 - (1400 * var(--path-progress, 0))); filter: url(#softGlow); }
.spindle { fill: var(--champagne); opacity: .8; }
.tonearm { position: absolute; top: 5.5rem; left: 57%; width: 14rem; height: .28rem; transform-origin: 92% 50%; transform: rotate(calc(-28deg + (var(--path-progress, 0) * 52deg))); background: linear-gradient(90deg, #B98A3B, #E8D6A8, #B86F75); box-shadow: 0 0 18px rgba(232,214,168,.25); transition: transform 200ms linear; }
.tonearm span { position: absolute; left: -.55rem; top: -.45rem; width: 1rem; height: 1.2rem; border-radius: 45% 45% 60% 60%; background: var(--brass); }
.path-caption { position: absolute; opacity: 0; transform: translateY(.7rem); color: var(--champagne); font: .78rem var(--mono); letter-spacing: .2em; transition: opacity 700ms ease, transform 700ms ease; }
.caption-one { left: 14%; top: 27%; } .caption-two { left: 62%; top: 34%; } .caption-three { left: 42%; top: 70%; }
.path-caption.visible { opacity: 1; transform: translateY(0); }

.echo-cabinet { grid-template-columns: 1.2fr .8fr; gap: 5rem; background: radial-gradient(ellipse at 28% 48%, rgba(185,138,59,.1), transparent 33%), linear-gradient(135deg, #24101C, #09060A 65%); }
.speaker-wrap { position: relative; width: min(56vw, 42rem); height: min(74vh, 42rem); display: grid; place-items: center; cursor: pointer; }
.speaker-cloth { width: 72%; height: 88%; border-radius: 50%; background: repeating-linear-gradient(90deg, rgba(244,235,221,.06) 0 1px, transparent 1px 7px), radial-gradient(ellipse, rgba(244,235,221,.13), rgba(9,6,10,.86) 62%); border: 1px solid rgba(232,214,168,.26); box-shadow: inset 0 0 60px rgba(0,0,0,.75), 0 35px 90px rgba(0,0,0,.45); display: grid; place-items: center; }
.speaker-cloth span { font: 1rem var(--mono); letter-spacing: .6em; color: rgba(232,214,168,.32); }
.resonance-ring { position: absolute; border-radius: 50%; border: 1px solid; opacity: 0; transform: scale(.74); transition: opacity 900ms ease, transform 1200ms cubic-bezier(.2,.7,.1,1); }
.ring-a { width: 64%; height: 78%; border-color: #B86F75; } .ring-b { width: 82%; height: 96%; border-color: #2F7C78; } .ring-c { width: 98%; height: 112%; border-color: #E8D6A8; }
.speaker-wrap.revealed .resonance-ring, .echo-cabinet.in-view .resonance-ring { opacity: .42; transform: scale(1); }
.cabinet-note { opacity: .35; transform: translateY(2rem); max-width: 28rem; }

.sleeve-archive { grid-template-columns: .8fr 1.2fr; gap: 5rem; background: linear-gradient(130deg, #09060A, #24101C 45%, #131A38); }
.archive-copy { opacity: .35; transform: translateY(2rem); max-width: 27rem; }
.sleeve-stack { position: relative; height: 38rem; transform: rotate(-3deg); }
.sleeve { position: absolute; width: clamp(15rem, 30vw, 25rem); height: clamp(20rem, 42vw, 33rem); padding: 1.2rem; border: 1px solid rgba(232,214,168,.32); background: linear-gradient(145deg, rgba(244,235,221,.18), rgba(232,214,168,.05)); backdrop-filter: blur(8px); box-shadow: 0 24px 80px rgba(0,0,0,.36); transition: transform 1000ms cubic-bezier(.2,.7,.1,1); }
.sleeve span { position: absolute; bottom: 2rem; left: 1.4rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.6rem); color: rgba(244,235,221,.82); }
.sleeve i { font: .72rem var(--mono); color: var(--brass); letter-spacing: .24em; font-style: normal; }
.sleeve-one { left: 6%; top: 1rem; transform: rotate(-12deg); } .sleeve-two { left: 16%; top: 3rem; transform: rotate(-4deg); } .sleeve-three { left: 27%; top: 5rem; transform: rotate(5deg); } .sleeve-four { left: 38%; top: 7rem; transform: rotate(13deg); }
.sleeve-stack.open .sleeve-one, .sleeve-archive.in-view .sleeve-one { transform: translateX(-2rem) rotate(-16deg); }
.sleeve-stack.open .sleeve-two, .sleeve-archive.in-view .sleeve-two { transform: translateX(.4rem) translateY(-1rem) rotate(-7deg); }
.sleeve-stack.open .sleeve-three, .sleeve-archive.in-view .sleeve-three { transform: translateX(2rem) rotate(7deg); }
.sleeve-stack.open .sleeve-four, .sleeve-archive.in-view .sleeve-four { transform: translateX(4rem) translateY(1rem) rotate(16deg); }

.last-vibration { place-items: center; text-align: center; background: radial-gradient(circle at 50% 52%, rgba(244,235,221,.16), transparent 24rem), linear-gradient(180deg, #131A38, #09060A 62%); }
.vu-shell { position: relative; max-width: 44rem; }
.rice-glow { position: absolute; inset: -6rem; background: radial-gradient(ellipse, rgba(244,235,221,.24), transparent 64%); filter: blur(26px); z-index: -1; animation: breathe 5s ease-in-out infinite; }
.vu-meter { width: min(82vw, 38rem); height: 16rem; margin: 0 auto 2rem; border-radius: 20rem 20rem 2rem 2rem; border: 1px solid rgba(232,214,168,.38); background: linear-gradient(180deg, rgba(244,235,221,.13), rgba(9,6,10,.4)); position: relative; overflow: hidden; box-shadow: inset 0 -34px 80px rgba(0,0,0,.45); }
.vu-scale { display: flex; justify-content: space-around; padding: 4rem 4rem 0; font: .78rem var(--mono); color: var(--brass); }
.needle { position: absolute; width: 2px; height: 10rem; left: 50%; bottom: 2rem; background: linear-gradient(#B86F75, #B98A3B); transform-origin: 50% 100%; transform: rotate(-18deg); transition: transform 140ms linear; }
.needle-pivot { position: absolute; left: 50%; bottom: 1.4rem; width: 1.4rem; height: 1.4rem; transform: translateX(-50%); border-radius: 50%; background: var(--champagne); box-shadow: 0 0 20px rgba(232,214,168,.45); }

@keyframes breathe { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }

@media (max-width: 860px) {
  .chamber { padding: 5rem 2rem 4rem 3.7rem; }
  .needle-drop, .echo-cabinet, .sleeve-archive { grid-template-columns: 1fr; gap: 2rem; }
  .speaker-wrap { width: 82vw; height: 34rem; }
  .groove-svg { width: 100%; }
  .side-index { right: .45rem; }
  h1 { font-size: clamp(3.6rem, 18vw, 7rem); }
}