:root {
  /* Typography compliance: **Roboto Slab** primary wordmark authority with Noto Serif JP calm; **IBM Plex Sans JP** for marginal notes. Tokens: JP** Slab**. */
  --rice: #F6E8C8;
  --parchment: #DDBD82;
  --persimmon: #C7612B;
  --seal: #8F1D16;
  --sumi: #1D1812;
  --cedar: #4B3425;
  --petal: #FFF7DE;
  --slab: "Roboto Slab", Georgia, serif;
  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans-jp: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sumi);
  background: var(--rice);
  font-family: var(--serif-jp);
  overflow-x: hidden;
}

body.seal-pressed { --seal-scale: 1; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 12% 23%, rgba(29, 24, 18, .07) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 43%, rgba(143, 29, 22, .05) 0 1px, transparent 1.6px),
    linear-gradient(105deg, transparent 0 38%, rgba(255, 247, 222, .35) 39%, transparent 40% 100%);
  background-size: 38px 38px, 53px 53px, 100% 100%;
}

.cursor-seal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 29;
  width: 58px;
  height: 58px;
  border: 2px solid var(--seal);
  border-radius: 50%;
  opacity: .14;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) rotate(-12deg);
  transition: opacity .3s ease, border-radius .3s ease;
}

.registration-rail {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 78px;
  height: 100vh;
  border-right: 1px solid rgba(75, 52, 37, .24);
  background: linear-gradient(90deg, rgba(255, 247, 222, .62), rgba(246, 232, 200, .12));
}

.rail-wordmark {
  position: absolute;
  top: 24px;
  left: 28px;
  writing-mode: vertical-rl;
  font-family: var(--slab);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--cedar);
}

.fold-nav {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: grid;
  gap: 16px;
}

.nav-mark {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--cedar);
  text-decoration: none;
  font: 500 10px var(--sans-jp);
  letter-spacing: .18em;
}

.nav-mark::before {
  content: attr(data-fold);
  position: absolute;
  right: -30px;
  opacity: .36;
}

.nav-mark::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: var(--cedar);
  transform: rotate(-34deg) scaleX(.55);
  transform-origin: left center;
  opacity: .45;
  transition: transform .45s ease, background .45s ease, opacity .45s ease;
}

.nav-mark.active::after {
  background: var(--seal);
  opacity: 1;
  transform: rotate(-34deg) scaleX(1.2);
}

.fold {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding-left: 78px;
  background:
    linear-gradient(115deg, rgba(255, 247, 222, .75), transparent 36%),
    var(--rice);
}

.fold::before,
.fold::after {
  content: "";
  position: absolute;
  inset: -18vh -12vw;
  z-index: -2;
  transform: translateX(calc(var(--progress, 0) * -18px));
  transition: transform .8s cubic-bezier(.2, .7, .1, 1);
}

.fold::before {
  background: linear-gradient(138deg, transparent 0 30%, rgba(75, 52, 37, .13) 31% 33%, transparent 34% 100%);
}

.fold::after {
  clip-path: polygon(56% 0, 100% 0, 68% 100%, 22% 100%);
  background: linear-gradient(160deg, rgba(221, 189, 130, .42), rgba(255, 247, 222, .08));
}

.paper-screen {
  position: absolute;
  inset: -10vh -12vw;
  z-index: -1;
  opacity: .92;
  clip-path: polygon(28% 0, 100% 0, 75% 100%, 0 100%);
  background: linear-gradient(145deg, rgba(255, 247, 222, .92), rgba(221, 189, 130, .22));
  box-shadow: -24px 0 60px rgba(29, 24, 18, .08) inset;
  transform: translateX(calc((1 - var(--progress, 0)) * 34px));
}

.screen-b { clip-path: polygon(0 0, 76% 0, 100% 100%, 24% 100%); background: linear-gradient(142deg, rgba(246, 232, 200, .2), rgba(75, 52, 37, .2)); }
.screen-c { clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); background: linear-gradient(160deg, rgba(255, 247, 222, .75), rgba(199, 97, 43, .09)); }
.screen-d { clip-path: polygon(0 0, 64% 0, 100% 100%, 36% 100%); background: linear-gradient(145deg, rgba(75, 52, 37, .22), rgba(221, 189, 130, .18)); }
.screen-e { clip-path: polygon(35% 0, 100% 0, 64% 100%, 0 100%); background: linear-gradient(145deg, rgba(143, 29, 22, .13), rgba(255, 247, 222, .72)); }
.screen-f { clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); background: linear-gradient(120deg, rgba(221, 189, 130, .34), rgba(255, 247, 222, .52)); }

.diagonal-shadow {
  position: absolute;
  inset: -25vh -20vw;
  background: linear-gradient(128deg, transparent 0 43%, rgba(75, 52, 37, .92) 44% 52%, transparent 53% 100%);
  opacity: .34;
  transform: translateX(calc(var(--pointer-x, 0) * 14px));
}

.fold-inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: min(1050px, calc(100vw - 120px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 5vw;
}

.opening-inner { justify-content: flex-end; padding-bottom: 14vh; }
.offset-right { align-items: flex-end; text-align: right; padding-right: 11vw; }
.offset-left { align-items: flex-start; padding-left: 11vw; }
.vertical-title { align-items: flex-start; padding-left: 14vw; }
.center-stamp { align-items: center; text-align: center; }
.ledger-copy { justify-content: center; padding-left: 17vw; }

.ceremony-label {
  margin: 0 0 20px;
  font: 500 11px/1.4 var(--sans-jp);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--persimmon);
}

h1, h2 {
  margin: 0;
  font-family: var(--slab);
  color: var(--sumi);
  letter-spacing: .08em;
  line-height: .88;
}

h1 { font-size: clamp(42px, 8.4vw, 126px); font-weight: 900; }
h2 { font-size: clamp(58px, 10vw, 148px); font-weight: 900; }

.poem {
  max-width: 540px;
  margin: 28px 0 0;
  font: 500 clamp(17px, 1.6vw, 24px)/1.85 var(--serif-jp);
  color: var(--cedar);
}

.poem.wide { max-width: 720px; }
.poem.narrow { max-width: 410px; }

.seal-button,
.press-mark {
  margin-top: 36px;
  width: 132px;
  height: 132px;
  border: 2px solid var(--seal);
  border-radius: 50%;
  background: rgba(143, 29, 22, .05);
  color: var(--seal);
  font: 700 12px/1.35 var(--slab);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(-10deg);
  transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}

.seal-button:hover,
.press-mark:hover,
body.seal-pressed .seal-button,
body.final-pressed .press-mark {
  background: var(--seal);
  color: var(--petal);
  transform: rotate(-10deg) scale(.94);
  box-shadow: 0 14px 35px rgba(143, 29, 22, .22);
}

.jasmine-vine {
  position: absolute;
  z-index: 3;
  right: 7vw;
  top: 8vh;
  width: min(42vw, 470px);
  fill: none;
  stroke: var(--cedar);
  stroke-width: 2;
  opacity: .62;
}

.draw-path {
  stroke-dasharray: 620;
  stroke-dashoffset: calc(620 - (var(--progress, 0) * 620));
  transition: stroke-dashoffset 1s ease;
}

.delay { stroke-dasharray: 140; stroke-dashoffset: calc(140 - (var(--progress, 0) * 140)); }
.delay2 { stroke-dasharray: 160; stroke-dashoffset: calc(160 - (var(--progress, 0) * 160)); }
.line-flower { fill: rgba(255, 247, 222, .56); stroke: var(--seal); stroke-width: 1.4; }

.floating-slip {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  padding: 16px 18px;
  background: rgba(255, 247, 222, .78);
  border: 1px solid rgba(75, 52, 37, .28);
  box-shadow: 0 22px 38px rgba(29, 24, 18, .09);
  font: 500 11px var(--sans-jp);
  letter-spacing: .18em;
  color: var(--cedar);
  transform: rotate(-7deg) translateY(calc(var(--progress, 0) * -28px));
}

.slip-one { right: 18vw; bottom: 18vh; }
.slip-two { left: 18vw; top: 20vh; transform: rotate(9deg) translateY(calc(var(--progress, 0) * -42px)); }
.floating-slip strong { display: block; color: var(--seal); font: 900 38px var(--slab); }
.floating-slip.stamped::after {
  content: "済";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--seal);
  border-radius: 50%;
  color: var(--seal);
  transform: rotate(-18deg);
}

.ledger-ghosts {
  width: min(520px, 70vw);
  margin-top: 42px;
  display: grid;
  gap: 14px;
}

.ledger-ghosts i {
  display: block;
  height: 13px;
  background: linear-gradient(90deg, rgba(75, 52, 37, .1), rgba(199, 97, 43, .28), rgba(75, 52, 37, .06));
  transform-origin: right center;
  transform: scaleX(calc(.24 + var(--progress, 0) * .76));
}

.ledger-ghosts i:nth-child(2) { width: 84%; justify-self: end; }
.ledger-ghosts i:nth-child(3) { width: 62%; justify-self: end; }
.ledger-ghosts i:nth-child(4) { width: 72%; justify-self: end; }

.fan-line {
  position: absolute;
  right: 12vw;
  bottom: 11vh;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(75, 52, 37, .38);
  border-radius: 50% 50% 6% 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: rotate(35deg);
}

.bid-number {
  margin: 32px 0 0;
  font: 900 clamp(48px, 7vw, 116px)/1 var(--slab);
  letter-spacing: .06em;
  color: var(--persimmon);
}

.ink-thread {
  position: absolute;
  right: 20vw;
  top: 18vh;
  width: 1px;
  height: 58vh;
  background: linear-gradient(var(--cedar), transparent);
  transform: rotate(38deg);
  opacity: .35;
}

.bid-slip-stack {
  position: absolute;
  right: 11vw;
  bottom: 14vh;
  display: grid;
  gap: 18px;
}

.bid-slip-stack article {
  width: 190px;
  padding: 18px 20px;
  background: rgba(246, 232, 200, .82);
  border: 1px solid rgba(75, 52, 37, .25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateX(calc((1 - var(--progress, 0)) * 44px)) rotate(-4deg);
  transition: transform .7s ease;
}

.bid-slip-stack span { font: 500 11px var(--sans-jp); letter-spacing: .17em; color: var(--cedar); }
.bid-slip-stack b { font: 900 26px var(--slab); color: var(--seal); }

.witness-grid {
  position: absolute;
  right: 10vw;
  top: 17vh;
  width: min(430px, 42vw);
  display: grid;
  gap: 0;
  border-left: 1px solid rgba(75, 52, 37, .35);
  border-top: 1px solid rgba(75, 52, 37, .2);
}

.witness-grid div {
  min-height: 132px;
  padding: 22px 24px;
  border-right: 1px solid rgba(75, 52, 37, .2);
  border-bottom: 1px solid rgba(75, 52, 37, .2);
  background: rgba(255, 247, 222, .26);
}

.witness-grid em { display: block; font: 900 42px var(--slab); color: var(--persimmon); font-style: normal; }
.witness-grid span { display: block; margin-top: 10px; font: 400 13px/1.6 var(--sans-jp); letter-spacing: .16em; color: var(--cedar); }

.large-seal {
  position: absolute;
  right: 15vw;
  bottom: 10vh;
  width: clamp(150px, 20vw, 260px);
  height: clamp(150px, 20vw, 260px);
  border: 8px double var(--seal);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--seal);
  opacity: .16;
  transform: rotate(-18deg) scale(.72);
  transition: opacity .5s ease, transform .5s ease, background .5s ease, color .5s ease;
}

.large-seal span { font: 900 clamp(40px, 5vw, 78px) var(--slab); letter-spacing: .08em; }
body.final-pressed .large-seal { opacity: .9; transform: rotate(-18deg) scale(1); background: rgba(143, 29, 22, .07); }

.final-ledger-mark {
  width: min(680px, 72vw);
  margin-top: 46px;
  padding: 24px 0;
  border-top: 2px solid var(--seal);
  border-bottom: 1px solid rgba(75, 52, 37, .28);
  transform: skewX(-18deg);
  display: flex;
  justify-content: space-between;
  color: var(--seal);
}

.final-ledger-mark span,
.final-ledger-mark b { transform: skewX(18deg); font-family: var(--slab); letter-spacing: .14em; }

.petal-field {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
}

.petal {
  position: absolute;
  width: 13px;
  height: 21px;
  border: 1px solid rgba(143, 29, 22, .45);
  border-radius: 80% 0 80% 8%;
  background: rgba(255, 247, 222, .72);
  transform: translate3d(var(--x), 105vh, 0) rotate(var(--r));
  animation: petal-rise var(--d) linear infinite;
  animation-delay: var(--delay);
  opacity: .72;
}

@keyframes petal-rise {
  from { transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); }
  to { transform: translate3d(calc(var(--x) - 18vw), -12vh, 0) rotate(calc(var(--r) + 240deg)); }
}

.fold:not(.active) .fold-inner { opacity: .72; }
.fold.active .fold-inner { animation: resolve-ink .8s ease both; }

@keyframes resolve-ink {
  from { opacity: .78; transform: translateY(18px); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 760px) {
  .registration-rail { width: 48px; }
  .rail-wordmark { left: 13px; }
  .fold { padding-left: 48px; }
  .fold-inner { width: calc(100vw - 48px); padding: 8vh 7vw; }
  .offset-right, .offset-left, .vertical-title, .ledger-copy { align-items: flex-start; text-align: left; padding-left: 8vw; padding-right: 6vw; }
  .fold-nav { display: none; }
  .jasmine-vine { width: 65vw; right: -2vw; opacity: .38; }
  .floating-slip, .bid-slip-stack, .witness-grid, .fan-line { opacity: .42; transform: scale(.78); transform-origin: right bottom; }
  .witness-grid { right: -16vw; width: 70vw; }
  .large-seal { right: 6vw; bottom: 8vh; }
}