:root {
  --ink: #282018;
  --ink-soft: #4e4234;
  --ink-faint: #847561;
  --paper: #fbf6ea;
  --paper-shade: #f3ead6;
  --bg: #e5dcc8;
  --bg-edge: #d5c8ae;
  --accent: #c85a32;
  --accent-wash: rgba(200, 90, 50, 0.14);
  --ochre: #e0a43b;
  --ochre-wash: rgba(224, 164, 59, 0.2);
  --sage: #557058;
  --sage-wash: rgba(85, 112, 88, 0.16);
  --tape: rgba(242, 229, 192, 0.78);
  --leather: #3d291f;
  --leather-deep: #291b14;
  --foil: #e4c482;
  --pw: 400px; /* live page width set from JS */
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Newsreader", Georgia, serif;
  background: radial-gradient(circle at 50% 44%, #efe8d8 0%, var(--bg) 66%, var(--bg-edge) 100%);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Fine handmade paper grain across viewport */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.48;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.11 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Studio desk background & subtle drafting grid */
.desk-surface {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--ink-faint);
  background-image: radial-gradient(rgba(40, 32, 24, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

.desk-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg-word {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 16.5vw;
  letter-spacing: 0.01em;
  color: rgba(40, 32, 24, 0.042);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ==========================================================================
   TOP BAR CHROME
   ========================================================================== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(12px, 2.2vh, 24px) clamp(16px, 3vw, 40px);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  position: relative;
  z-index: 5;
  transition: opacity 0.35s ease;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-tag {
  font-family: "Caveat", cursive;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px dashed rgba(200, 90, 50, 0.42);
  padding: 1px 9px;
  border-radius: 999px;
  transform: rotate(-1.5deg);
}

.topbar-title {
  font-weight: 500;
  color: var(--ink-soft);
}

.topbar-count {
  font-family: "Fraunces", Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: rgba(251, 246, 234, 0.78);
  border: 1px solid rgba(40, 32, 24, 0.16);
  padding: 3px 10px;
  border-radius: 999px;
}

.topbar-count:empty {
  display: none;
}

/* ==========================================================================
   SCENE & BOOK STAGE
   ========================================================================== */
.scene {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  min-height: 0;
  padding: 0 12px;
}

.book-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 20px 26px rgba(32, 22, 12, 0.26))
    drop-shadow(0 4px 8px rgba(32, 22, 12, 0.14));
}

.book {
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  width: min(920px, 88vw);
  height: min(calc(min(920px, 88vw) / 1.5), 73vh);
}

@media (max-width: 640px) {
  .book {
    width: min(90vw, 344px);
    height: min(calc(min(90vw, 344px) * 1.38), 70vh);
  }
  .topbar-tag {
    display: none;
  }
  .topbar {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    padding: 10px 14px;
  }
  .topbar-count {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* ==========================================================================
   StPageFlip CORE ENGINE
   ========================================================================== */
.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  touch-action: pan-y;
  margin: 0 auto;
}
.sft__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.stf__parent canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.stf__block {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}
.stf__item {
  display: none;
  position: absolute;
  transform-style: preserve-3d;
}
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

/* ==========================================================================
   SKETCHBOOK PAGES & PAPER TEXTURE
   ========================================================================== */
#pagesrc {
  display: none;
}

.page {
  background-color: var(--paper);
  background-image:
    /* Inner spine crease shadow on left page */
    linear-gradient(to left, rgba(52, 36, 20, 0.13) 0%, rgba(52, 36, 20, 0.035) 5.5%, rgba(52, 36, 20, 0) 12%),
    /* Warm deckle edge tint */
    linear-gradient(to right, rgba(164, 130, 82, 0.11) 0%, rgba(164, 130, 82, 0) 6%),
    /* Subtle dot-grid sketchbook matrix */
    radial-gradient(rgba(40, 32, 24, 0.095) 0.85px, transparent 0.85px);
  background-size: 100% 100%, 100% 100%, calc(var(--pw) * 0.04) calc(var(--pw) * 0.04);
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.028);
  border: 1px solid rgba(40, 32, 24, 0.14);
}

.page.on-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid rgba(40, 32, 24, 0.22);
}

.page.on-right {
  background-image:
    /* Inner spine crease shadow on right page */
    linear-gradient(to right, rgba(52, 36, 20, 0.15) 0%, rgba(52, 36, 20, 0.04) 5.5%, rgba(52, 36, 20, 0) 12%),
    /* Warm deckle edge tint */
    linear-gradient(to left, rgba(164, 130, 82, 0.11) 0%, rgba(164, 130, 82, 0) 6%),
    /* Faint warm ruling lines for journal notes */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent calc(var(--pw) * 0.052 - 1px),
      rgba(200, 90, 50, 0.055) calc(var(--pw) * 0.052)
    );
  background-size: 100% 100%, 100% 100%, 100% 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Hand-sewn spine binding thread along inner gutter */
.gutter-stitch {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: calc(var(--pw) * 0.016);
  pointer-events: none;
  opacity: 0.42;
  z-index: 3;
}
.page.on-left .gutter-stitch {
  right: calc(var(--pw) * 0.004);
}
.page.on-right .gutter-stitch {
  left: calc(var(--pw) * 0.004);
}

/* Sketchbook corner pencil flourishes */
.page-corner-orn {
  position: absolute;
  width: calc(var(--pw) * 0.085);
  height: calc(var(--pw) * 0.085);
  pointer-events: none;
  opacity: 0.48;
  z-index: 1;
}
.page-corner-orn.tl {
  top: calc(var(--pw) * 0.024);
  left: calc(var(--pw) * 0.024);
}
.page-corner-orn.br {
  bottom: calc(var(--pw) * 0.024);
  right: calc(var(--pw) * 0.024);
}

.sheet {
  position: relative;
  height: 100%;
  padding: calc(var(--pw) * 0.068) calc(var(--pw) * 0.076) calc(var(--pw) * 0.092);
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.pageno {
  position: absolute;
  bottom: calc(var(--pw) * 0.036);
  font-family: "Fraunces", Georgia, serif;
  font-size: calc(var(--pw) * 0.025);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  z-index: 3;
}
.page.on-left .pageno {
  left: calc(var(--pw) * 0.076);
}
.page.on-right .pageno {
  right: calc(var(--pw) * 0.076);
}

/* ==========================================================================
   LEFT PAGE: MINIMAL CENTERED IDENTITY + CUSTOM ILLUSTRATED VIGNETTE
   ========================================================================== */
.identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: calc(var(--pw) * 0.02);
  position: relative;
}

.chapter-pill {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.036);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  padding: calc(var(--pw) * 0.004) calc(var(--pw) * 0.024);
  background: var(--accent-wash);
  border: 1px dashed rgba(200, 90, 50, 0.45);
  border-radius: 999px;
  transform: rotate(-2deg);
}

/* Transparent logo framed like a taped studio swatch */
.logo-swatch {
  position: relative;
  padding: calc(var(--pw) * 0.024);
  margin: calc(var(--pw) * 0.004) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Masking tape strip at top of logo swatch */
.logo-swatch::before {
  content: "";
  position: absolute;
  top: calc(var(--pw) * -0.012);
  left: 50%;
  width: calc(var(--pw) * 0.12);
  height: calc(var(--pw) * 0.028);
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
  border-left: 1.5px dashed rgba(40, 32, 24, 0.2);
  border-right: 1.5px dashed rgba(40, 32, 24, 0.2);
  box-shadow: 0 1px 3px rgba(40, 32, 24, 0.08);
  z-index: 2;
}

.logo-frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.logo-tile {
  width: calc(var(--pw) * 0.195);
  height: calc(var(--pw) * 0.195);
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.identity .co {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--pw) * 0.055);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: calc(var(--pw) * 0.004);
}

.identity .meta {
  font-size: calc(var(--pw) * 0.0225);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.65;
}

.identity .meta .years {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.036);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
  background: var(--ochre-wash);
  padding: 0 calc(var(--pw) * 0.018);
  border-radius: 4px;
  display: inline-block;
  margin-top: calc(var(--pw) * 0.004);
}

.identity .rule {
  display: none;
}

/* Custom Illustrated Vignette on Left Page */
.vignette-box {
  width: calc(var(--pw) * 0.72);
  height: calc(var(--pw) * 0.36);
  margin-top: calc(var(--pw) * 0.008);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vignette-box svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vignette-note {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.033);
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-top: calc(var(--pw) * -0.008);
}

/* ==========================================================================
   RIGHT PAGE: STORY PROSE & MARGIN ANNOTATIONS
   ========================================================================== */
.story {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--pw) * 0.02);
  margin-bottom: calc(var(--pw) * 0.016);
}

.kicker {
  font-size: calc(var(--pw) * 0.022);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.margin-doodle-tag {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.034);
  font-weight: 600;
  color: var(--sage);
  background: var(--sage-wash);
  padding: calc(var(--pw) * 0.002) calc(var(--pw) * 0.02);
  border-radius: 999px;
  transform: rotate(1.8deg);
  white-space: nowrap;
}

.story h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--pw) * 0.058);
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: calc(var(--pw) * 0.012);
}

.title-Squiggle {
  width: 100%;
  height: calc(var(--pw) * 0.024);
  margin-bottom: calc(var(--pw) * 0.034);
  display: block;
  overflow: visible;
}

.story p {
  font-size: calc(var(--pw) * 0.0355);
  line-height: 1.58;
  color: var(--ink-soft);
  margin-bottom: calc(var(--pw) * 0.036);
}

.story p:last-of-type {
  margin-bottom: 0;
}

.story p:first-of-type::first-letter {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: calc(var(--pw) * 0.096);
  line-height: 0.82;
  color: var(--accent);
  float: left;
  padding-right: calc(var(--pw) * 0.018);
  padding-top: calc(var(--pw) * 0.01);
}

/* Bottom margin annotation & mini sketch on right page */
.story-margin-footer {
  margin-top: calc(var(--pw) * 0.032);
  padding-top: calc(var(--pw) * 0.018);
  border-top: 1px dashed rgba(40, 32, 24, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pw) * 0.02);
}

.hand-annotation {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.034);
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.15;
}

.margin-spot-svg {
  width: calc(var(--pw) * 0.15);
  height: calc(var(--pw) * 0.068);
  flex: none;
}

/* ==========================================================================
   FRONT & BACK COVERS
   ========================================================================== */
.coverpage,
.backcoverpage {
  background: radial-gradient(circle at 35% 25%, #4d3529 0%, var(--leather) 58%, var(--leather-deep) 100%);
  border-radius: calc(var(--pw) * 0.032);
}

.cover,
.backcover {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--foil);
  border: 1px solid rgba(228, 196, 130, 0.42);
  outline: 1px dashed rgba(228, 196, 130, 0.22);
  outline-offset: calc(var(--pw) * 0.018);
  margin: calc(var(--pw) * 0.055);
  padding: calc(var(--pw) * 0.05);
  box-shadow: inset 0 0 calc(var(--pw) * 0.12) rgba(0, 0, 0, 0.38);
}

.c-orn {
  font-size: calc(var(--pw) * 0.028);
  letter-spacing: 0.55em;
  margin-bottom: calc(var(--pw) * 0.04);
  opacity: 0.8;
  padding-left: 0.55em;
}

.cover-illustration {
  width: calc(var(--pw) * 0.36);
  height: calc(var(--pw) * 0.28);
  margin-bottom: calc(var(--pw) * 0.04);
}

.c-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--pw) * 0.098);
  letter-spacing: 0.02em;
}

.c-sub {
  font-size: calc(var(--pw) * 0.026);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: calc(var(--pw) * 0.028);
  opacity: 0.88;
}

.c-hand-sub {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.042);
  color: #f3d99e;
  margin-top: calc(var(--pw) * 0.016);
  opacity: 0.85;
}

.c-open {
  margin-top: calc(var(--pw) * 0.09);
  font-size: calc(var(--pw) * 0.023);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0.72;
  padding: calc(var(--pw) * 0.012) calc(var(--pw) * 0.036);
  border: 1px solid rgba(228, 196, 130, 0.36);
  border-radius: 999px;
}

.backcover-emblem {
  width: calc(var(--pw) * 0.32);
  height: calc(var(--pw) * 0.24);
  margin-bottom: calc(var(--pw) * 0.04);
  opacity: 0.85;
}

.backcover span {
  font-family: "Fraunces", Georgia, serif;
  font-size: calc(var(--pw) * 0.032);
  letter-spacing: 0.2em;
  opacity: 0.85;
}

.backcover small {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.036);
  margin-top: calc(var(--pw) * 0.018);
  opacity: 0.68;
}

/* ==========================================================================
   BOTTOM DOCK NAVIGATION
   ========================================================================== */
.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(12px, 2.4vh, 26px);
  position: relative;
  z-index: 5;
  transition: opacity 0.35s ease;
}

.caption-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 18ch;
}

.caption {
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.caption-flourish {
  width: 120px;
  height: 7px;
  color: var(--accent);
  margin-top: 2px;
  opacity: 0.75;
}

.chev {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.25px solid rgba(40, 32, 24, 0.28);
  background: rgba(251, 246, 234, 0.65);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.2s ease, opacity 0.22s ease;
  box-shadow: 0 2px 6px rgba(40, 32, 24, 0.08);
}

.chev svg {
  width: 18px;
  height: 18px;
}

.chev:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.chev:active {
  transform: translateY(0);
}

.chev:disabled {
  opacity: 0.28;
  pointer-events: none;
}

@media (max-width: 640px) {
  .story p {
    font-size: calc(var(--pw) * 0.035);
    line-height: 1.52;
    margin-bottom: calc(var(--pw) * 0.03);
  }
  .story h2 {
    font-size: calc(var(--pw) * 0.055);
  }
}

/* ==========================================================================
   LOADING MOTION: TOP-EDGE BOUND BOOK RIFFLE (HEAD-ON SPINE/EDGE VIEW)
   Zero blank page faces, zero flat-plane pinwheel. Pure curved paper edges
   revolving across the bound spine from a top-down head-edge viewpoint.
   ========================================================================== */
.book.intro-hide .stf__parent {
  opacity: 0;
  pointer-events: none;
}

.book .stf__parent {
  transition: opacity 0.45s ease;
}

body.intro .topbar,
body.intro .dock {
  opacity: 0;
  pointer-events: none;
}

.intro-edge-riffle {
  position: absolute;
  inset: -12px;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-edge-riffle.is-settling {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
}

.riffle-svg {
  width: min(760px, 92vw);
  height: auto;
  max-height: 64vh;
  overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(32, 22, 12, 0.22));
}

.riffle-label {
  font-family: "Caveat", cursive;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  margin-top: 6px;
  opacity: 0.88;
}

/* ==========================================================================
   QA CORRECTIONS: MINIMAL TRANSPARENT LOGO, 320PX READABILITY, CLEAN HEADER
   ========================================================================== */

/* 1. Remove self-describing top-left "Illustrated Sketchbook" badge */
.topbar-tag {
  display: none !important;
}

/* 2. Remove all tile chrome, tape, borders & backgrounds around company logos */
.logo-swatch {
  padding: 0;
  margin: calc(var(--pw) * 0.006) 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.logo-swatch::before,
.logo-frame-svg {
  display: none !important;
  content: none !important;
}

.logo-tile {
  width: calc(var(--pw) * 0.165);
  height: calc(var(--pw) * 0.165);
  background: transparent;
  border: none;
  box-shadow: none;
}

.identity {
  gap: calc(var(--pw) * 0.016);
}

/* 3. Ensure >= 13px readable body text down to 320px & clean scrollable story region */
.page.on-right .sheet {
  min-height: 0;
  overflow: hidden;
}

.story {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(40, 32, 24, 0.24) transparent;
  padding-right: 2px;
}

.story p {
  font-size: max(13.5px, calc(var(--pw) * 0.0355));
  line-height: 1.56;
}

@media (max-width: 640px) {
  .page.on-right .sheet {
    padding: calc(var(--pw) * 0.055) calc(var(--pw) * 0.064) calc(var(--pw) * 0.082);
  }

  .story {
    justify-content: flex-start;
    padding-right: 4px;
  }

  .story::-webkit-scrollbar {
    width: 3px;
  }

  .story::-webkit-scrollbar-thumb {
    background: rgba(40, 32, 24, 0.22);
    border-radius: 999px;
  }

  .story-top {
    margin-bottom: 6px;
  }

  .kicker {
    font-size: max(10px, calc(var(--pw) * 0.022));
    letter-spacing: 0.18em;
  }

  .margin-doodle-tag {
    font-size: max(12px, calc(var(--pw) * 0.034));
  }

  .story h2 {
    font-size: max(18px, calc(var(--pw) * 0.055));
    line-height: 1.15;
    margin-bottom: 4px;
  }

  .title-Squiggle {
    height: 7px;
    margin-bottom: 10px;
    flex-shrink: 0;
  }

  .story p {
    font-size: max(13.5px, calc(var(--pw) * 0.036));
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .story p:first-of-type::first-letter {
    font-size: max(32px, calc(var(--pw) * 0.092));
    line-height: 0.84;
    padding-right: 6px;
    padding-top: 3px;
  }

  .story-margin-footer {
    margin-top: 10px;
    padding-top: 8px;
    flex-shrink: 0;
  }

  .hand-annotation {
    font-size: max(12.5px, calc(var(--pw) * 0.034));
  }
}

/* ==========================================================================
   QA HOTFIX: OPAQUE INTRO RIFFLE ISOLATION & BOUNDED MOBILE STORY SCROLL
   ========================================================================== */

/* 1. Robustly hide StPageFlip DOM children inside #book during intro */
.book > :not(.intro-edge-riffle) {
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}

.book.intro-hide > :not(.intro-edge-riffle) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.book-stage:has(.book.intro-hide) {
  filter: none;
}

body.intro .topbar,
body.intro .dock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Fully opaque warm studio backdrop on .intro-edge-riffle until settle */
.intro-edge-riffle {
  position: absolute;
  inset: -24px;
  z-index: 50;
  background: radial-gradient(circle at 50% 44%, #efe8d8 0%, var(--bg) 70%, var(--bg-edge) 100%);
  border-radius: calc(var(--pw) * 0.04);
  opacity: 1;
  transition:
    opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-edge-riffle.is-settling {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.985);
}

/* 3. Strict flex height bounding so .story scrolls cleanly at >=13.5px on 320px */
.page.on-right {
  height: 100%;
}

.page.on-right > .sheet {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.story {
  display: block;
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 641px) {
  .story {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .story > * {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .page.on-right > .sheet {
    padding: calc(var(--pw) * 0.05) calc(var(--pw) * 0.06) calc(var(--pw) * 0.085);
  }

  .story {
    display: block;
    padding-bottom: 6px;
  }
}

/* ==========================================================================
   QA REFINEMENT: SEAMLESS VIEWPORT RIFFLE, NO CARD BOX, NO LOADING LABEL
   ========================================================================== */

/* Release #book transform containing block during intro so overlay spans viewport */
.book.intro-hide {
  transform: none !important;
}

/* Full-viewport transparent stage: uses the real desk background, no inset card */
.intro-edge-riffle {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 55 !important;
  transition:
    opacity 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.intro-edge-riffle.is-settling {
  opacity: 0 !important;
  transform: scale(0.985) !important;
}

/* Remove self-narrating loading caption completely */
.riffle-label {
  display: none !important;
}

/* Immediate opacity crossfade on StPageFlip spread with no blank intermediate frame */
.book > :not(.intro-edge-riffle) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.book.intro-hide > :not(.intro-edge-riffle) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ==========================================================================
   QA HOTFIX: LOCK CONTAINING CONTEXT & ORIGIN THROUGH FULL 2850MS SETTLE
   ========================================================================== */

.book:has(> .intro-edge-riffle) {
  transform: none !important;
}

.book-stage:has(.intro-edge-riffle) {
  filter: none !important;
}

.intro-edge-riffle {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   QA HOTFIX: LOCK CONTAINING CONTEXT & ORIGIN THROUGH FULL 2850MS SETTLE
   ========================================================================== */

.book:has(> .intro-edge-riffle) {
  transform: none !important;
}

.book-stage:has(.intro-edge-riffle) {
  filter: none !important;
}

.intro-edge-riffle {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   SIMPLIFIED SKETCHBOOK PRESENTATION: NO VIGNETTES, NO DOCK/MARGIN DOODLES,
   NO LOADER, RESTRAINED WARM PAPER & TYPOGRAPHY
   ========================================================================== */

/* Hide any legacy decorative or loader selectors if present */
.desk-marks,
.topbar-tag,
.caption-flourish,
.chapter-pill,
.vignette-box,
.vignette-note,
.margin-doodle-tag,
.title-Squiggle,
.story-margin-footer,
.page-corner-orn,
.intro-edge-riffle {
  display: none !important;
}

/* Clean centered left-page identity with small transparent logo */
.identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: calc(var(--pw) * 0.038);
}

.logo-tile {
  width: calc(var(--pw) * 0.22);
  height: calc(var(--pw) * 0.22);
  background: transparent;
  border: none;
  box-shadow: none;
}

.identity .co {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--pw) * 0.06);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: 0;
}

.identity .meta {
  font-family: "Newsreader", Georgia, serif;
  font-size: max(11px, calc(var(--pw) * 0.024));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.85;
}

.identity .meta .years {
  font-family: "Newsreader", Georgia, serif;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-top: 0;
}

/* Clean right-page story header & hairline rule */
.story .kicker {
  font-size: max(10px, calc(var(--pw) * 0.023));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: calc(var(--pw) * 0.024);
}

.story h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: max(19px, calc(var(--pw) * 0.06));
  line-height: 1.14;
  color: var(--ink);
  padding-bottom: calc(var(--pw) * 0.038);
  margin-bottom: calc(var(--pw) * 0.046);
  border-bottom: 1px solid rgba(40, 32, 24, 0.16);
}

.story p {
  font-size: max(13.5px, calc(var(--pw) * 0.0375));
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: calc(var(--pw) * 0.042);
}

.story p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .page.on-right > .sheet {
    padding: calc(var(--pw) * 0.065) calc(var(--pw) * 0.07) calc(var(--pw) * 0.09);
  }

  .story .kicker {
    margin-bottom: 6px;
  }

  .story h2 {
    font-size: max(18px, calc(var(--pw) * 0.056));
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .story p {
    font-size: max(13.5px, calc(var(--pw) * 0.0375));
    line-height: 1.54;
    margin-bottom: 11px;
  }
}