:root {
  /* Typography compliance note: Poppins** from Google Fonts for the Futura-geometric backbone: large circular headlines; IBM Plex Mono** sparingly for catalog numbers. */
  --cream: #F6E8C8;
  --tangerine: #F28E45;
  --rose: #C86B7D;
  --burgundy: #5A2638;
  --navy: #16243D;
  --pistachio: #B9CFA4;
  --lavender: #8B7CC7;
  --headline: 'Poppins', Futura, 'Trebuchet MS', Arial, sans-serif;
  --serif: 'Libre Baskerville', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--navy);
  background:
    radial-gradient(circle at 8% 4%, rgba(242, 142, 69, .58), transparent 34rem),
    radial-gradient(circle at 85% 22%, rgba(139, 124, 199, .45), transparent 32rem),
    linear-gradient(135deg, var(--cream), #f3d9b1 42%, #e8ba9c 100%);
  font-family: var(--headline);
  overflow-x: hidden;
}

.font-ledger { position: fixed; left: -999rem; top: -999rem; font-family: "Poppins**", "Mono**", var(--headline); }
.font-ledger::before { content: "Poppins** Mono**"; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(22, 36, 61, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(90, 38, 56, .14) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.04));
  background-size: 17px 19px, 23px 21px, 100% 100%;
}

.bookmark-nav {
  position: fixed;
  z-index: 30;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem .7rem .65rem 1.05rem;
  border-radius: 999px 999px 999px 2rem;
  background: rgba(90, 38, 56, .88);
  color: var(--cream);
  box-shadow: 0 1.2rem 3rem rgba(22, 36, 61, .22);
  backdrop-filter: blur(10px);
  transform-origin: right center;
  transition: border-radius .5s ease, transform .5s ease;
}
.bookmark-nav.scrolled { border-radius: 2rem 999px 999px 2rem; transform: scaleX(1.04); }
.bookmark-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .48rem .7rem;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.bookmark-nav a:hover { background: var(--cream); color: var(--burgundy); }
.nav-code, .mono { font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; font-size: .72rem; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.3rem, 6vw, 7rem);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero { min-height: 112vh; }

.shelf-shadow {
  position: absolute;
  inset: 6% -10% auto -10%;
  height: 32vh;
  opacity: .23;
  background: repeating-linear-gradient(90deg, transparent 0 3.4rem, rgba(22,36,61,.35) 3.4rem 3.75rem), linear-gradient(var(--burgundy), transparent);
  border-radius: 0 0 48% 43%;
  filter: blur(.3px);
}

.blob {
  position: absolute;
  filter: drop-shadow(0 2rem 4rem rgba(22,36,61,.2));
  transition: border-radius 1.2s ease, clip-path 1.2s ease;
}
.blob-hero {
  width: min(78vw, 58rem);
  height: min(75vh, 43rem);
  background: radial-gradient(circle at 35% 25%, var(--cream), var(--tangerine) 48%, var(--rose));
  border-radius: 37% 63% 54% 46% / 41% 39% 61% 59%;
}
.blob-pistachio {
  inset: 9% 2% 10% 17%;
  background: radial-gradient(circle at 24% 18%, var(--pistachio), var(--lavender) 55%, var(--navy));
  clip-path: ellipse(44% 38% at 51% 49%);
}
.blob-burgundy {
  width: min(78vw, 62rem);
  height: 65vh;
  background: radial-gradient(circle at 65% 28%, var(--rose), var(--burgundy) 58%, var(--navy));
  border-radius: 60% 40% 38% 62% / 43% 56% 44% 57%;
}

.bookplate {
  position: relative;
  width: min(82vw, 38rem);
  min-height: 31rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem;
  background: rgba(246, 232, 200, .72);
  border: .16rem solid rgba(90, 38, 56, .28);
  border-radius: 19rem 17rem 13rem 16rem / 14rem 20rem 16rem 18rem;
  box-shadow: inset 0 0 0 .75rem rgba(255,255,255,.16), 0 2rem 5rem rgba(90,38,56,.22);
}
.bookplate h1 {
  margin: .35rem 0;
  color: var(--burgundy);
  font-size: clamp(4.8rem, 14vw, 12rem);
  line-height: .78;
  letter-spacing: -.08em;
  font-weight: 800;
}
.bookplate p { max-width: 28rem; margin: 1rem 0 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.8; }
.underline { width: min(88%, 32rem); height: 3.8rem; margin-top: .5rem; overflow: visible; }
.underline path { fill: none; stroke: var(--tangerine); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 540; stroke-dashoffset: 540; animation: drawUnderline 2.4s 1s ease forwards; }

.paper {
  position: absolute;
  z-index: 5;
  background: rgba(246, 232, 200, .88);
  color: var(--burgundy);
  border: 1px solid rgba(90,38,56,.24);
  box-shadow: .3rem .8rem 2rem rgba(22,36,61,.18);
  font-family: var(--mono);
}
.clipping { padding: 1rem; line-height: 1.55; font-size: .78rem; }
.clip-a { left: 10%; top: 28%; transform: rotate(-4deg); }
.clip-b { right: 12%; top: 20%; transform: rotate(3deg); }
.clip-c { right: 17%; bottom: 17%; transform: rotate(-2deg); }
.lamp-orbit { position: absolute; left: 18%; bottom: 18%; width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle, rgba(246,232,200,.9), rgba(242,142,69,.2) 58%, transparent 70%); }

.chapter-copy { position: relative; z-index: 8; max-width: 39rem; }
.left-copy { justify-self: start; align-self: start; margin-top: 6vh; }
.center-copy { text-align: center; margin: auto; color: var(--cream); }
.chapter-copy h2, .final-slip h2 {
  margin: .7rem 0 1rem;
  font-size: clamp(2.8rem, 8vw, 7.4rem);
  line-height: .88;
  letter-spacing: -.06em;
  color: var(--burgundy);
}
.center-copy h2 { color: var(--cream); }
.serif { font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.8; }
.stamp-label { color: var(--lavender); font-weight: 600; }
.drawn-line { width: 0; height: .55rem; border-radius: 999px; background: var(--tangerine); transition: width 1.4s ease; }
.reveal { opacity: 0; transform: translateY(2rem) rotate(-1deg); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0) rotate(0deg); }
.reveal.visible .drawn-line, .drawn-line.active { width: 78%; }

.margin-collage { position: absolute; inset: 0; }
.index-card { width: 17rem; min-height: 9rem; padding: 1.4rem; border-radius: 1.2rem; }
.index-card span { display: block; color: var(--lavender); margin-bottom: 1.6rem; }
.index-card b { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
.card-one { right: 17%; top: 23%; transform: rotate(4deg); }
.card-two { right: 32%; bottom: 16%; transform: rotate(-5deg); }
.footnote { position: absolute; z-index: 7; display: grid; place-items: center; width: 5.3rem; height: 4.4rem; border-radius: 55% 45% 61% 39%; background: var(--pistachio); color: var(--navy); font-family: var(--mono); box-shadow: 0 1rem 2rem rgba(22,36,61,.17); }
.foot-one { left: 14%; bottom: 18%; }
.foot-two { left: 47%; top: 30%; background: var(--rose); color: var(--cream); }
.foot-three { right: 9%; bottom: 38%; background: var(--tangerine); }

.reading-room { background: linear-gradient(180deg, rgba(22,36,61,.04), rgba(90,38,56,.18)); }
.room-arch {
  position: relative;
  z-index: 4;
  width: min(86vw, 60rem);
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 4rem;
  background: radial-gradient(circle at 50% 18%, rgba(242,142,69,.75), var(--burgundy) 54%, var(--navy));
  border-radius: 49% 51% 12% 12% / 32% 35% 8% 8%;
  box-shadow: inset 0 0 0 .9rem rgba(246,232,200,.1), 0 2rem 5rem rgba(22,36,61,.3);
}
.arch-lines { position: absolute; inset: 10%; border: 2px solid rgba(246,232,200,.2); border-radius: inherit; }
.lamp { position: absolute; top: 8%; width: 11rem; height: 5.2rem; border-radius: 50%; background: radial-gradient(ellipse at center, var(--cream), rgba(242,142,69,.25) 64%, transparent 72%); filter: blur(.5px); }
.stamp-button { border: 2px solid var(--cream); border-radius: .7rem; background: transparent; color: var(--cream); padding: .9rem 1.3rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-1deg); cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.stamp-button:hover, .stamp-button.pressed { background: var(--cream); color: var(--burgundy); transform: rotate(1deg) scale(1.04); }
.spine-stack { position: absolute; left: 6%; bottom: 10%; display: flex; gap: .55rem; transform: rotate(-4deg); }
.spine-stack span { display: block; width: 2.8rem; height: 19rem; border-radius: 1.5rem; background: var(--tangerine); box-shadow: inset .7rem 0 rgba(255,255,255,.18); }
.spine-stack span:nth-child(2) { height: 23rem; background: var(--lavender); }
.spine-stack span:nth-child(3) { height: 17rem; background: var(--pistachio); }
.spine-stack span:nth-child(4) { height: 21rem; background: var(--rose); }
.spine-stack span:nth-child(5) { height: 15rem; background: var(--burgundy); }
.diagram { right: 9%; top: 18%; padding: 1.4rem; transform: rotate(5deg); }

.last-stamp { color: var(--cream); }
.final-slip { position: relative; z-index: 6; width: min(88vw, 48rem); padding: clamp(2rem, 5vw, 4.5rem); border-radius: 3rem 8rem 3rem 6rem; background: rgba(246,232,200,.9); color: var(--navy); box-shadow: 0 2rem 5rem rgba(22,36,61,.25); transform: rotate(-1.5deg); }
.final-slip h2 { color: var(--burgundy); }
.seal { display: inline-grid; place-items: center; margin-top: 1.4rem; width: 10rem; height: 10rem; border-radius: 50%; border: .45rem double var(--rose); color: var(--rose); font-family: var(--mono); font-weight: 600; transform: rotate(-12deg); transition: transform .4s ease, color .4s ease, border-color .4s ease; }
.seal.hot { color: var(--tangerine); border-color: var(--tangerine); transform: rotate(8deg) scale(1.08); }
.ink-dots { position: absolute; right: 12%; top: 16%; }
.ink-dots i { display: block; width: .8rem; height: .8rem; margin: 1.1rem; border-radius: 50%; background: var(--navy); opacity: .6; }

.catalog-card {
  position: fixed;
  z-index: 25;
  left: 1.4rem;
  bottom: 1.4rem;
  width: min(21rem, calc(100vw - 2.8rem));
  padding: 1rem 1.1rem;
  background: rgba(246,232,200,.84);
  border: 1px solid rgba(90,38,56,.32);
  border-radius: 1.1rem 1.1rem 2.7rem 1.1rem;
  box-shadow: 0 1rem 3rem rgba(22,36,61,.2);
  backdrop-filter: blur(8px);
}
.catalog-card p { margin: .45rem 0 0; font-family: var(--serif); font-size: .86rem; line-height: 1.55; }
.cursor-note { position: fixed; z-index: 50; pointer-events: none; padding: .45rem .65rem; border-radius: 999px; background: var(--navy); color: var(--cream); font-family: var(--mono); font-size: .66rem; opacity: 0; transform: translate(-50%, -160%); transition: opacity .2s ease; }
.cursor-note.show { opacity: .9; }

@keyframes drawUnderline { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .bookmark-nav { left: .8rem; right: .8rem; justify-content: center; flex-wrap: wrap; }
  .nav-code { width: 100%; text-align: center; }
  .chapter { padding-inline: 1rem; }
  .bookplate { padding: 2rem 1.2rem; min-height: 25rem; }
  .clipping, .diagram, .catalog-card { display: none; }
  .left-copy { margin-top: 12vh; }
  .card-one { right: 5%; top: 55%; }
  .card-two { left: 4%; right: auto; bottom: 8%; }
  .room-arch { width: 95vw; padding: 2rem 1.2rem; border-radius: 45% 55% 10% 10% / 22% 24% 7% 7%; }
  .spine-stack { opacity: .35; left: -2rem; }
}