:root {
  /* DESIGN typography tokens: IBM Plex Serif** for folio numbers */
  --ink: #080706;
  --paper: #F2EBDD;
  --graphite: #3D3A35;
  --vellum: #D8D0C1;
  --leaf: #74796A;
  --blush: #B44A4A;
  --brass: #9A7A3A;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --reading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --utility: "IBM Plex Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--ink); overflow: hidden; }

body {
  font-family: var(--reading);
  background:
    radial-gradient(circle at 20% 10%, rgba(154,122,58,.18), transparent 28%),
    radial-gradient(circle at 80% 90%, rgba(116,121,106,.18), transparent 30%),
    linear-gradient(135deg, #080706 0%, #1a1713 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(242,235,221,.12) 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(216,208,193,.08) 8px);
  mix-blend-mode: screen;
}

button { font: inherit; }

.folio-shell { position: relative; width: 100vw; height: 100vh; perspective: 1800px; }

.cover-slip {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: radial-gradient(circle, rgba(216,208,193,.08), rgba(8,7,6,.92) 62%);
  transition: opacity .8s ease, transform .8s ease, visibility .8s;
}

.cover-slip.is-open { opacity: 0; transform: translateY(-4vh) rotateX(7deg); visibility: hidden; }

.cover-grain { position: absolute; inset: 6vw; border: 1px solid rgba(216,208,193,.16); box-shadow: inset 0 0 80px rgba(216,208,193,.08); }

.folio-cover {
  position: relative;
  width: min(720px, 82vw);
  min-height: min(78vh, 680px);
  padding: clamp(36px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 10% 90%, rgba(255,255,255,.04)),
    repeating-linear-gradient(105deg, #11100e 0 2px, #080706 3px 7px);
  color: var(--paper);
  border: 1px solid #3D3A35;
  box-shadow: 0 36px 70px rgba(0,0,0,.62), inset 0 0 0 12px rgba(216,208,193,.04), inset 0 0 0 13px rgba(242,235,221,.12);
  transform: rotate(-1.4deg);
}

.cover-label, .kicker, .counter-label, .plate-number, .tab, .folio-progress { font-family: var(--utility); letter-spacing: .14em; text-transform: uppercase; }

.cover-label { color: var(--vellum); font-size: 12px; margin-bottom: 5vh; }

h1, h2, h3, blockquote { font-family: var(--display); font-weight: 500; line-height: .88; margin: 0; }

h1 { font-size: clamp(64px, 12vw, 150px); letter-spacing: -.05em; text-shadow: 0 1px 0 #3D3A35, 0 8px 26px rgba(0,0,0,.8); }

.cover-subtitle { max-width: 520px; color: var(--vellum); font-size: clamp(16px, 2vw, 22px); line-height: 1.55; }

.paper-band {
  position: absolute;
  left: -4%; right: -4%; top: 52%;
  height: 78px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-top: 1px solid #3D3A35;
  border-bottom: 1px solid #3D3A35;
  color: var(--paper);
  font-family: var(--utility);
  letter-spacing: .28em;
  text-transform: uppercase;
  box-shadow: 0 15px 20px rgba(0,0,0,.45);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.cover-slip.is-open .paper-band { transform: translateX(112%) rotate(2deg); }
.hidden-seal { position: absolute; right: 16%; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--blush); color: var(--paper); font-family: var(--jp); font-style: normal; opacity: .95; }

.open-folio {
  align-self: flex-start;
  margin-top: 7vh;
  padding: 13px 18px;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--vellum);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--paper);
  transition: color .35s ease, box-shadow .35s ease;
}
.open-folio:hover { color: var(--ink); box-shadow: inset 260px 0 0 0 var(--paper); }

.chapter-tabs {
  position: fixed;
  right: 0;
  top: 15vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tab {
  width: 116px;
  padding: 10px 12px;
  border: 1px solid rgba(8,7,6,.5);
  border-right: 0;
  background: var(--vellum);
  color: var(--graphite);
  cursor: pointer;
  transform: translateX(36px);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.tab.is-current, .tab:hover { transform: translateX(0); background: var(--ink); color: var(--paper); }

.spread-track { position: relative; width: 100%; height: 100%; }

.spread {
  position: absolute;
  inset: 3.4vh 5vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--tilt, .3deg)) translateX(8vw) rotateY(-16deg);
  transform-origin: left center;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 34px 46px rgba(0,0,0,.5));
}
.spread:nth-child(2n) { --tilt: -.6deg; }
.spread.is-visible { opacity: 1; pointer-events: auto; transform: rotate(var(--tilt, .3deg)) translateX(0) rotateY(0deg); }
.spread.turning { transform: rotate(var(--tilt, .3deg)) translateX(-8vw) rotateY(14deg); opacity: 0; }

.page {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  padding: clamp(28px, 4.5vw, 74px);
  background:
    radial-gradient(circle at 30% 28%, rgba(154,122,58,.10), transparent 22%),
    repeating-linear-gradient(88deg, rgba(8,7,6,.03) 0 1px, transparent 2px 8px),
    var(--paper);
  border: 1px solid rgba(8,7,6,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 36px rgba(8,7,6,.08);
}
.left-page { border-radius: 5px 0 0 5px; }
.right-page { border-radius: 0 5px 5px 0; }
.page::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(8,7,6,.12); pointer-events: none; }
.page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,7,6,.12), transparent 12%, transparent 88%, rgba(8,7,6,.08)); pointer-events: none; }

.gutter { position: relative; background: linear-gradient(90deg, rgba(8,7,6,.24), var(--vellum) 44%, rgba(8,7,6,.24)); border-top: 1px solid rgba(8,7,6,.32); border-bottom: 1px solid rgba(8,7,6,.32); }
.gutter span { position: absolute; top: 4%; bottom: 4%; left: 50%; width: 1px; background: repeating-linear-gradient(var(--graphite) 0 10px, transparent 11px 22px); }

.kicker { font-size: 11px; color: var(--graphite); margin: 0 0 28px; }
h2 { font-size: clamp(50px, 7.4vw, 112px); letter-spacing: -.045em; max-width: 720px; }
.body-copy { max-width: 560px; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.75; color: var(--graphite); margin: 34px 0; }
.crossed-note { display: inline-block; transform: rotate(-2deg); padding: 12px 18px; background: rgba(216,208,193,.72); border: 1px solid rgba(8,7,6,.25); color: var(--graphite); text-decoration: line-through 3px var(--ink); }

.counter-block { position: absolute; left: clamp(28px, 4.5vw, 74px); bottom: clamp(28px, 4vw, 58px); display: inline-grid; gap: 8px; padding: 14px; background: #11100e; color: var(--paper); border: 2px solid var(--graphite); box-shadow: 0 10px 0 rgba(8,7,6,.18); }
.counter-block.brass { border-color: var(--brass); }
.counter-block.final { border-color: var(--blush); }
.counter-label { font-size: 10px; color: var(--vellum); }
.split-counter { display: inline-flex; min-width: 78px; justify-content: center; padding: 6px 9px; font-family: var(--utility); font-size: 36px; line-height: 1; letter-spacing: .08em; background: linear-gradient(#F2EBDD 0 48%, #D8D0C1 49% 52%, #F2EBDD 53%); color: var(--ink); border-radius: 3px; }
.split-counter.tick { animation: tick .22s ease; }
@keyframes tick { 50% { transform: rotateX(72deg) scaleY(.85); filter: brightness(.82); } }

.plate { margin: 4vh auto; width: min(430px, 80%); min-height: 520px; padding: 26px; border: 1px solid rgba(8,7,6,.35); background: rgba(216,208,193,.38); position: relative; }
.orange-wheel { width: 230px; height: 230px; margin: 70px auto 42px; border: 2px solid var(--graphite); border-radius: 50%; background: repeating-conic-gradient(from 12deg, transparent 0 14deg, rgba(8,7,6,.16) 15deg 17deg), radial-gradient(circle, transparent 0 24%, rgba(154,122,58,.2) 25% 28%, transparent 29%); box-shadow: inset 0 0 0 12px rgba(8,7,6,.08); }
.plate p { color: var(--graphite); line-height: 1.6; }
.vellum-slip, .footnote { position: absolute; right: 9%; bottom: 13%; max-width: 280px; padding: 18px; background: rgba(216,208,193,.76); border: 1px solid rgba(8,7,6,.22); box-shadow: 0 12px 16px rgba(8,7,6,.12); transform: rotate(2deg); color: var(--graphite); }

.index-card { width: min(360px, 90%); padding: 20px; display: grid; gap: 8px; background: var(--vellum); border: 1px solid rgba(8,7,6,.4); box-shadow: 8px 8px 0 rgba(8,7,6,.15); font-family: var(--utility); }
blockquote { font-size: clamp(42px, 6vw, 92px); color: var(--graphite); margin-top: 10vh; }
.botanical-stem { position: absolute; right: 17%; top: 18%; width: 4px; height: 390px; background: var(--leaf); transform: rotate(13deg); }
.botanical-stem i { position: absolute; width: 88px; height: 42px; border: 2px solid var(--leaf); border-radius: 0 80% 0 80%; background: rgba(116,121,106,.08); }
.botanical-stem i:nth-child(1) { top: 18px; right: 5px; transform: rotate(-28deg); }
.botanical-stem i:nth-child(2) { top: 86px; left: 6px; transform: scaleX(-1) rotate(-28deg); }
.botanical-stem i:nth-child(3) { top: 160px; right: 5px; transform: rotate(-28deg); }
.botanical-stem i:nth-child(4) { top: 238px; left: 6px; transform: scaleX(-1) rotate(-28deg); }
.botanical-stem i:nth-child(5) { top: 306px; right: 5px; transform: rotate(-28deg); }
.stamp { display: inline-block; margin-top: 28px; padding: 10px 16px; color: var(--blush); border: 3px double var(--blush); font-family: var(--utility); letter-spacing: .13em; transform: rotate(-8deg); }
.flower-plate { position: relative; width: 300px; height: 300px; margin: 11vh auto 0; }
.flower-plate span { position: absolute; left: 50%; top: 50%; width: 84px; height: 126px; transform-origin: 50% 100%; border: 2px solid var(--blush); border-radius: 80% 10% 80% 10%; background: rgba(180,74,74,.08); opacity: 0; }
.spread.is-visible .flower-plate span { animation: bloom .9s ease forwards; }
.flower-plate span:nth-child(1) { transform: translate(-50%,-100%) rotate(0deg); }
.flower-plate span:nth-child(2) { transform: translate(-50%,-100%) rotate(72deg); animation-delay: .08s; }
.flower-plate span:nth-child(3) { transform: translate(-50%,-100%) rotate(144deg); animation-delay: .16s; }
.flower-plate span:nth-child(4) { transform: translate(-50%,-100%) rotate(216deg); animation-delay: .24s; }
.flower-plate span:nth-child(5) { transform: translate(-50%,-100%) rotate(288deg); animation-delay: .32s; }
@keyframes bloom { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }

.flap-button { padding: 12px 18px; background: var(--graphite); color: var(--paper); border: 0; cursor: pointer; }
.receipt-flap { width: min(360px, 82%); margin-top: 18px; padding: 24px; background: var(--vellum); border: 1px dashed var(--graphite); transform: rotateX(82deg); transform-origin: top; opacity: .2; transition: transform .55s ease, opacity .55s ease; }
.receipt-flap.is-open { transform: rotateX(0deg) rotate(-2deg); opacity: 1; }
.jp-whisper { font-family: var(--jp); writing-mode: vertical-rl; position: absolute; right: 14%; top: 9%; font-size: 24px; color: var(--blush); }
.toast-seal { width: 110px; height: 110px; display: grid; place-items: center; margin: 6vh auto 5vh; border-radius: 50%; background: var(--blush); color: var(--paper); font-family: var(--jp); font-size: 52px; box-shadow: 0 0 0 12px rgba(180,74,74,.12); }
.closing-page h3 { font-size: clamp(42px, 6vw, 84px); }
.closing-page p { max-width: 460px; margin: 26px auto; font-size: 20px; line-height: 1.65; color: var(--graphite); }
.folio-progress { position: fixed; left: 24px; bottom: 20px; color: var(--vellum); font-size: 13px; z-index: 12; }

@media (max-width: 820px) {
  html, body { overflow: auto; }
  .folio-shell { min-height: 100vh; height: auto; }
  .spread-track { height: auto; padding: 3vh 4vw; }
  .spread { position: relative; inset: auto; min-height: auto; grid-template-columns: 1fr; margin-bottom: 8vh; opacity: 1; pointer-events: auto; transform: none; }
  .spread:not(.is-visible) { display: none; }
  .gutter { height: 18px; }
  .page { min-height: 72vh; }
  .chapter-tabs { top: auto; bottom: 12px; right: 12px; flex-direction: row; transform: scale(.82); transform-origin: right bottom; }
  .tab { width: auto; transform: none; border-right: 1px solid rgba(8,7,6,.5); }
  .counter-block { position: relative; left: auto; bottom: auto; margin-top: 28px; }
}