:root {
  --lacquer: #110B0A;
  --brass: #B78A3B;
  --foil: #E7C982;
  --seal: #C33A2E;
  --paper: #F3E7CF;
  --aubergine: #2A1628;
  --patina: #4B6F5A;
  --lamp-x: 50%;
  --lamp-y: 20%;
  --foil-intensity: .72;
  --drawer-offset: 0px;
  --title-font: "Cormorant Garamond", "Times New Roman", serif;
  --jp-font: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui-font: "Commissioner", Inter, system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --registry-codes-sparingly: "IBM Plex Mono";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--lacquer); }

body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(231, 201, 130, .18) 0%, rgba(183, 138, 59, .08) 18%, rgba(17, 11, 10, 0) 44%),
    linear-gradient(115deg, var(--lacquer), var(--aubergine) 48%, var(--lacquer));
  font-family: var(--ui-font);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    repeating-linear-gradient(90deg, rgba(231, 201, 130, .035) 0 1px, transparent 1px 84px),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 24%),
    repeating-linear-gradient(28deg, transparent 0 8px, rgba(243,231,207,.018) 8px 9px);
  mix-blend-mode: screen;
}

.ledger-theater { position: relative; }

.lacquer-stage {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(231, 201, 130, calc(var(--foil-intensity) * .28)) 0%, rgba(183, 138, 59, .12) 18%, rgba(17, 11, 10, .92) 62%),
    linear-gradient(140deg, var(--lacquer), var(--aubergine) 52%, var(--lacquer));
}

.lacquer-stage::before {
  content: "";
  position: absolute;
  inset: 2.5vw;
  border: 1px solid rgba(231, 201, 130, .34);
  outline: 8px double rgba(183, 138, 59, .16);
  pointer-events: none;
  z-index: 1;
}

.lacquer-stage::after {
  content: "本舗 本舗 本舗 本舗 本舗";
  position: absolute;
  inset: 0;
  color: rgba(243, 231, 207, .035);
  font-family: var(--jp-font);
  font-size: clamp(3rem, 12vw, 12rem);
  letter-spacing: .2em;
  line-height: 1.45;
  transform: rotate(-16deg) scale(1.15);
  z-index: 0;
}

.elevator {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 14px;
  padding: 18px 10px;
  border-left: 1px solid rgba(231, 201, 130, .5);
  background: linear-gradient(180deg, rgba(17,11,10,.2), rgba(183,138,59,.13), rgba(17,11,10,.2));
}

.elevator-tick {
  width: 38px;
  height: 18px;
  color: var(--brass);
  background: transparent;
  border: 0;
  border-top: 1px solid currentColor;
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: .16em;
  cursor: pointer;
  opacity: .55;
  transition: color .4s ease, transform .4s ease, opacity .4s ease;
}

.elevator-tick.active { color: var(--foil); opacity: 1; transform: translateX(-10px); }

.kicker, .drawer-number, .brass-label, .scroll-hint, .engraved-numerals {
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .72rem;
  color: var(--foil);
}

h1, h2 {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 600;
  line-height: .88;
  letter-spacing: .02em;
}

h1 { font-size: clamp(5rem, 17vw, 16rem); }
h2 { font-size: clamp(3.5rem, 10vw, 10rem); }

.ledger-caption {
  max-width: 480px;
  font-family: var(--jp-font);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.8;
  color: rgba(243, 231, 207, .84);
}

.locked-monogram { --foil-intensity: .55; }
.door-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(231,201,130,.12), transparent 8%, transparent 92%, rgba(231,201,130,.08)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    var(--lacquer);
  box-shadow: inset 0 0 70px rgba(0,0,0,.9);
  transition: transform 1s cubic-bezier(.22,.9,.16,1);
}
.door-left { left: 0; border-right: 1px solid rgba(231,201,130,.5); }
.door-right { right: 0; border-left: 1px solid rgba(231,201,130,.5); }
.locked-monogram.open .door-left { transform: translateX(-82%); }
.locked-monogram.open .door-right { transform: translateX(82%); }

.latch-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  z-index: 6;
  background: linear-gradient(var(--foil), var(--brass), transparent);
  box-shadow: 0 0 18px var(--foil);
  animation: latchTravel 2.8s ease-in-out infinite;
}

.crest-wrap {
  z-index: 8;
  text-align: center;
  width: min(86vw, 1100px);
  position: relative;
  padding: 8vh 4vw;
}
.crest-glint {
  position: absolute;
  inset: 8% 15%;
  background: linear-gradient(110deg, transparent 35%, rgba(231,201,130,.8), transparent 46%);
  transform: translateX(-120%);
  animation: crestGlint 4.5s .5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.scroll-hint { position: absolute; bottom: 7vh; z-index: 8; color: rgba(231,201,130,.7); }
.engraved-numerals { position: absolute; top: 7vh; left: 7vw; z-index: 8; font-family: var(--mono-font); color: rgba(231,201,130,.5); }
.deco-corner { position: absolute; width: 160px; height: 160px; z-index: 7; border-color: var(--brass); opacity: .72; }
.corner-nw { top: 4vw; left: 4vw; border-top: 2px solid; border-left: 2px solid; }
.corner-se { right: 4vw; bottom: 4vw; border-right: 2px solid; border-bottom: 2px solid; }

.drawer-of-origins { place-items: stretch; padding: 8vw; }
.stage-title { align-self: start; z-index: 3; max-width: 780px; }
.drawer-plane { position: absolute; z-index: 3; display: grid; gap: 22px; width: min(42vw, 560px); }
.drawer-left-stack { left: 4vw; bottom: 10vh; transform: rotate(-6deg) translateY(var(--drawer-offset)); }
.drawer-right-stack { right: 4vw; top: 24vh; transform: rotate(7deg) translateY(calc(var(--drawer-offset) * -1)); }
.drawer {
  min-height: 150px;
  padding: 28px 30px;
  color: var(--lacquer);
  background:
    linear-gradient(100deg, rgba(255,255,255,.22), transparent 28%),
    repeating-linear-gradient(0deg, rgba(42,22,40,.08) 0 1px, transparent 1px 22px),
    var(--paper);
  border: 8px solid rgba(183,138,59,.72);
  box-shadow: 0 28px 60px rgba(0,0,0,.52), inset 0 0 0 1px rgba(17,11,10,.28);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.drawer.is-visible { transform: translateX(0) rotate(0deg); }
.drawer-a, .drawer-b { transform: translateX(-22vw); }
.drawer-c, .drawer-d { transform: translateX(22vw); }
.drawer p { margin: 18px 0 0; font-family: var(--jp-font); font-size: 1.1rem; line-height: 1.55; }
.drawer-number { color: var(--seal); font-family: var(--mono-font); }
.brass-label { display: inline-block; margin-left: 18px; color: var(--lacquer); border: 1px solid var(--brass); padding: 6px 12px; }
.claim-ticket { position: absolute; right: 13vw; bottom: 9vh; z-index: 4; color: var(--paper); background: var(--seal); padding: 18px 38px; font-family: var(--mono-font); transform: rotate(5deg); box-shadow: 0 18px 34px rgba(0,0,0,.5); }

.counter-under-lamp { --lamp-x: 45%; --lamp-y: 10%; }
.lamp-beam { position: absolute; top: -5vh; left: 26vw; width: 42vw; height: 78vh; background: radial-gradient(ellipse at top, rgba(231,201,130,.55), rgba(183,138,59,.14) 32%, transparent 70%); filter: blur(5px); z-index: 1; animation: shadowDrift 7s ease-in-out infinite alternate; }
.glass-counter { position: absolute; left: 9vw; right: 9vw; bottom: 12vh; height: 28vh; z-index: 3; border-top: 2px solid rgba(231,201,130,.72); background: linear-gradient(180deg, rgba(243,231,207,.08), rgba(75,111,90,.13) 38%, rgba(17,11,10,.72)); box-shadow: 0 -20px 90px rgba(231,201,130,.12); }
.object-silhouette { position: absolute; left: 38%; bottom: 52%; width: 170px; height: 230px; background: linear-gradient(160deg, var(--aubergine), var(--lacquer)); border-radius: 50% 50% 16% 16% / 28% 28% 12% 12%; box-shadow: 22px 35px 70px rgba(0,0,0,.72), inset 12px 0 0 rgba(231,201,130,.08); }
.counter-reflection { position: absolute; inset: 12% 8%; background: linear-gradient(115deg, transparent, rgba(231,201,130,.24), transparent 45%); opacity: .55; }
.counter-copy { position: absolute; top: 16vh; right: 9vw; z-index: 4; width: min(42vw, 620px); }
.brass-rail { z-index: 4; position: absolute; padding: 14px 22px; border-top: 1px solid var(--foil); color: var(--paper); font-family: var(--ui-font); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; background: linear-gradient(90deg, rgba(183,138,59,.25), transparent); }
.brass-rail strong { display: block; margin-top: 8px; font-family: var(--jp-font); font-size: 1.1rem; letter-spacing: .05em; text-transform: none; color: var(--foil); }
.rail-one { left: 12vw; top: 25vh; }
.rail-two { left: 57vw; bottom: 29vh; }

.seal-corridor { background: linear-gradient(90deg, var(--lacquer), var(--aubergine), var(--lacquer)); }
.corridor-perspective { position: relative; z-index: 3; width: min(1120px, 86vw); height: 76vh; perspective: 900px; display: grid; place-items: center; }
.foil-border { position: absolute; top: 0; bottom: 0; width: 17%; border: 2px solid rgba(231,201,130,.62); background: repeating-linear-gradient(45deg, transparent 0 16px, rgba(231,201,130,.22) 16px 17px); }
.border-left { left: 0; transform: rotateY(47deg); transform-origin: left; }
.border-right { right: 0; transform: rotateY(-47deg); transform-origin: right; }
.certificate { position: absolute; background: var(--paper); color: var(--lacquer); padding: 42px; border: 14px double var(--brass); box-shadow: 0 24px 70px rgba(0,0,0,.55); font-family: var(--jp-font); }
.cert-one { width: min(570px, 54vw); left: 20%; top: 18%; }
.cert-two { width: min(430px, 40vw); right: 13%; bottom: 10%; transform: rotate(6deg); }
.red-seal { float: right; display: grid; place-items: center; width: 86px; height: 86px; margin-left: 20px; border-radius: 18%; background: var(--seal); color: var(--paper); font-family: var(--jp-font); font-size: 2.6rem; transform: rotate(-7deg) scale(.88); transition: transform .45s cubic-bezier(.2,1.7,.2,1); }
.certificate.is-stamped .red-seal { transform: rotate(-7deg) scale(1.08); }

.original-wrapper { background: var(--lacquer); }
.tissue-wrapper {
  position: relative;
  z-index: 3;
  width: min(82vw, 1040px);
  min-height: 68vh;
  display: grid;
  place-items: center;
  color: var(--lacquer);
  background:
    radial-gradient(circle at 50% 50%, rgba(231,201,130,.28), transparent 26%),
    repeating-linear-gradient(35deg, rgba(195,58,46,.08) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(125deg, rgba(75,111,90,.10) 0 1px, transparent 1px 26px),
    var(--paper);
  border: 2px solid var(--foil);
  box-shadow: 0 30px 120px rgba(0,0,0,.7);
  transform: rotateX(12deg) scale(.88);
  transition: transform 1.1s cubic-bezier(.2,.9,.1,1);
}
.tissue-wrapper.open { transform: rotateX(0deg) scale(1); }
.fold { position: absolute; background: rgba(42,22,40,.16); }
.fold-x { left: 0; right: 0; top: 50%; height: 1px; box-shadow: 0 12px 34px rgba(42,22,40,.18); }
.fold-y { top: 0; bottom: 0; left: 50%; width: 1px; box-shadow: 12px 0 34px rgba(42,22,40,.18); }
.wrapper-mark { text-align: center; padding: 6vw; border: 1px solid rgba(183,138,59,.55); box-shadow: inset 0 0 0 12px rgba(231,201,130,.16); }
.embossed-kanji { display: block; font-family: var(--jp-font); font-size: clamp(5rem, 14vw, 13rem); color: rgba(195,58,46,.18); text-shadow: 1px 1px rgba(255,255,255,.55), -1px -1px rgba(42,22,40,.24); }
.wrapper-mark h2 { color: var(--lacquer); }
.wrapper-mark p { font-family: var(--ui-font); text-transform: uppercase; letter-spacing: .24em; color: var(--patina); }
.final-caption { position: absolute; bottom: 6vh; z-index: 4; text-align: center; }

@keyframes latchTravel { 0%,100% { clip-path: inset(0 0 96% 0); } 48% { clip-path: inset(0 0 0 0); } 72% { clip-path: inset(82% 0 0 0); } }
@keyframes crestGlint { 0%, 22% { transform: translateX(-120%); opacity: 0; } 34% { opacity: .85; } 52%, 100% { transform: translateX(120%); opacity: 0; } }
@keyframes shadowDrift { from { transform: translateX(-2vw) skewX(-5deg); opacity: .72; } to { transform: translateX(3vw) skewX(6deg); opacity: .95; } }

@media (max-width: 820px) {
  .elevator { right: 8px; }
  .drawer-plane, .counter-copy { position: relative; width: auto; left: auto; right: auto; top: auto; bottom: auto; margin-top: 28px; }
  .drawer-of-origins { display: block; padding: 16vh 8vw; }
  .drawer-left-stack, .drawer-right-stack { transform: none; }
  .cert-one, .cert-two { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 80vw; margin: 20px auto; }
  .glass-counter { left: 4vw; right: 4vw; }
  .rail-two { left: 14vw; bottom: 18vh; }
}