/* Bookshelf hero + reading stage */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%,
      oklch(0.14 0.02 45) 0%,
      oklch(0.10 0.018 45) 45%,
      oklch(0.07 0.012 45) 85%,
      oklch(0.05 0.008 45) 100%);
  color: oklch(0.88 0.015 80);
  overflow: hidden;
  isolation: isolate;
}

/* Ambient hall — warm directional shaft from upper-left + dust-mote haze */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* warm shaft — higher and broader */
    radial-gradient(ellipse 120% 90% at var(--light-x, 22%) 0%,
      oklch(0.62 0.10 70 / 0.45) 0%,
      oklch(0.45 0.07 62 / 0.22) 28%,
      transparent 65%),
    /* soft secondary wash on the opposite side */
    radial-gradient(ellipse 60% 50% at 85% 20%,
      oklch(0.35 0.05 50 / 0.35) 0%,
      transparent 60%),
    /* floor pool */
    radial-gradient(ellipse 80% 50% at 50% 110%,
      oklch(0.14 0.02 50 / 0.6) 0%,
      transparent 70%);
  transition: background 700ms ease;
  pointer-events: none;
  z-index: 0;
}
/* Angled light shaft */
.hero::after {
  content: "";
  position: absolute;
  top: -10%; left: 0; width: 60%; height: 90%;
  background: linear-gradient(115deg,
    transparent 40%,
    oklch(0.70 0.08 72 / 0.06) 55%,
    oklch(0.75 0.08 72 / 0.10) 60%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.hero-intro {
  position: relative; z-index: 2;
  text-align: center;
  padding: 64px 40px 20px;
  transition: opacity 400ms ease;
}
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  opacity: 0.88;
}
.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: oklch(0.92 0.012 80);
}
.hero-headline .ampersand { color: var(--gold); font-style: italic; }
.hero-sub {
  margin: 18px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.82 0.012 80 / 0.55);
}

/* ---------- The bookshelf ---------- */
.bookshelf-wrap {
  position: relative; z-index: 1;
  padding: 40px 0 0;
  transition: filter 520ms var(--ease-book), opacity 520ms var(--ease-book);
}
.is-reading .bookshelf-wrap { filter: blur(6px) brightness(0.4); opacity: 0.5; }
.is-reading .hero-intro,
.is-reading .hero-subscribe { opacity: 0; pointer-events: none; }

.bookshelf {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  --light-x: 22%;
}

/* Side walls of the shelf interior — left + right, receding */
.bookshelf-wrap::before,
.bookshelf-wrap::after {
  content: "";
  position: absolute;
  top: 40px; bottom: 36px;
  width: 6%;
  pointer-events: none;
  z-index: 2;
}
.bookshelf-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    oklch(0.06 0.01 50) 0%,
    oklch(0.10 0.015 50 / 0.9) 60%,
    transparent 100%);
  box-shadow: inset -2px 0 4px oklch(0.45 0.05 65 / 0.15);
}
.bookshelf-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    oklch(0.04 0.01 50) 0%,
    oklch(0.08 0.012 50 / 0.9) 60%,
    transparent 100%);
}

/* =============================================================
   Ornate architectural elements — crown, pilasters, apron, feet
   ============================================================= */

/* Crown moulding — stepped profile with dentils */
.shelf-crown {
  position: relative;
  width: calc(100% + 120px);   /* extend into .bookshelf padding so crown spans full width with pilasters */
  margin: 0 -60px -2px;
  height: 58px;
  color: oklch(0.28 0.045 55);
  z-index: 6;
  filter: drop-shadow(0 8px 12px oklch(0 0 0 / 0.55));
}
/* Upper cap — the topmost cornice rail (aligns to pilaster outer edges) */
.shelf-crown .crown-cap {
  position: absolute; top: 0; left: 48px; right: 48px;
  height: 14px;
  background:
    linear-gradient(to bottom,
      oklch(0.40 0.05 62) 0%,
      oklch(0.30 0.045 56) 45%,
      oklch(0.22 0.04 52) 100%);
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.07 68 / 0.5),
    inset 0 -1px 0 oklch(0 0 0 / 0.4);
}
.shelf-crown .crown-cap::before {
  /* warm grain + light shaft on cap */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 26px,
      oklch(0.08 0.01 50 / 0.2) 26px 27px),
    radial-gradient(ellipse 60% 200% at 18% 50%,
      oklch(0.70 0.09 72 / 0.35), transparent 60%);
  mix-blend-mode: overlay;
}
/* Cove — inward curved shadow beneath the cap */
.shelf-crown .crown-cove {
  position: absolute; top: 14px; left: 48px; right: 48px;
  height: 14px;
  background:
    linear-gradient(to bottom,
      oklch(0.10 0.015 50) 0%,
      oklch(0.16 0.025 52) 50%,
      oklch(0.22 0.035 55) 100%);
  box-shadow: inset 0 3px 6px oklch(0 0 0 / 0.75);
}
/* Dentil band — evenly spaced teeth */
.shelf-crown .crown-dentil {
  position: absolute; top: 28px; left: 50px; right: 50px;
  height: 12px;
  background:
    /* the teeth themselves */
    repeating-linear-gradient(to right,
      oklch(0.32 0.045 58) 0 10px,
      oklch(0.14 0.02 50) 10px 16px),
    oklch(0.18 0.025 50);
  box-shadow:
    inset 0 1px 0 oklch(0.48 0.06 66 / 0.4),
    inset 0 -1px 0 oklch(0 0 0 / 0.6);
}
/* Fillet — the flat band between dentils and the shelf body */
.shelf-crown .crown-fillet {
  position: absolute; top: 40px; left: 48px; right: 48px;
  height: 8px;
  background: linear-gradient(to bottom,
    oklch(0.26 0.04 56) 0%,
    oklch(0.18 0.03 52) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.50 0.06 68 / 0.35),
    inset 0 -1px 0 oklch(0 0 0 / 0.5);
}
/* Keystone / centerpiece embellishment */
.shelf-crown .crown-keystone {
  display: none; /* replaced by the crown-plaque branding */
  position: absolute;
  left: 50%; top: 12px;
  width: 40px; height: 24px;
  transform: translateX(-50%);
  color: oklch(0.42 0.06 62);
  filter: drop-shadow(0 1px 0 oklch(0 0 0 / 0.6));
  z-index: 2;
}

/* ==============================================
   Crown plaque — the WhiteWings branding moment
   Sits atop the crown, projecting above it.
   ============================================== */
.crown-plaque {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 26px;
  color: var(--gold);
  z-index: 11;
  background:
    linear-gradient(180deg,
      oklch(0.24 0.04 54) 0%,
      oklch(0.18 0.03 50) 100%);
  border-top: 1px solid oklch(0.60 0.08 70 / 0.5);
  border-bottom: 1px solid oklch(0 0 0 / 0.6);
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.07 68 / 0.35),
    inset 0 -2px 4px oklch(0 0 0 / 0.45),
    0 10px 24px -6px oklch(0 0 0 / 0.75),
    0 2px 0 oklch(0 0 0 / 0.5);
  clip-path: polygon(
    0% 30%, 4% 0%, 96% 0%, 100% 30%,
    100% 70%, 96% 100%, 4% 100%, 0% 70%
  );
}
.crown-plaque::before {
  content: "";
  position: absolute;
  inset: 4px 12px;
  border: 1px solid oklch(0.55 0.08 70 / 0.3);
  pointer-events: none;
  clip-path: inherit;
}

.crown-wing {
  width: 80px;
  height: 22px;
  color: var(--gold);
  opacity: 0.85;
  flex: 0 0 auto;
}

.crown-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--gold);
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.7),
    0 0 18px oklch(0.55 0.10 72 / 0.4);
  flex: 0 0 auto;
  padding: 0 4px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .crown-plaque { padding: 8px 14px; gap: 8px; top: -18px; }
  .crown-wing { width: 40px; height: 16px; }
  .crown-wordmark { font-size: 17px; }
}

/* Corner rosette blocks — cap each pilaster at the top, flush with crown */
.shelf-crown .crown-corner {
  position: absolute;
  top: 0;
  width: 54px;
  height: 58px;
  color: oklch(0.34 0.05 60);
  background:
    linear-gradient(to bottom,
      oklch(0.40 0.05 62) 0%,
      oklch(0.32 0.045 58) 40%,
      oklch(0.26 0.04 55) 100%);
  border-top: 1px solid oklch(0.55 0.07 68 / 0.5);
  border-bottom: 1px solid oklch(0 0 0 / 0.55);
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.07 68 / 0.35),
    inset 0 -2px 4px oklch(0 0 0 / 0.4);
  z-index: 10;
}
.shelf-crown .crown-corner--left  { left: -6px; border-radius: 2px 0 0 0; }
.shelf-crown .crown-corner--right { right: -6px; border-radius: 0 2px 0 0; }
.shelf-crown .crown-corner svg {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  display: block;
}
/* Warm light wash on the left corner (matches upper-left light source) */
.shelf-crown .crown-corner--left::before {
  content: "";
  position: absolute; inset: 2px;
  background: radial-gradient(ellipse 80% 80% at 25% 20%,
    oklch(0.70 0.09 72 / 0.35) 0%,
    transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.shelf-crown .crown-corner--right::before {
  content: "";
  position: absolute; inset: 2px;
  background: radial-gradient(ellipse 80% 80% at 25% 20%,
    oklch(0.60 0.07 70 / 0.2) 0%,
    transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* =============================================================
   Pilasters — unified single-element design:
   [rosette top] -- [fluted shaft] -- [rosette bottom]
   Spans from crown top to below apron. Flex handles alignment.
   ============================================================= */
.pilaster {
  position: absolute;
  top: 58px;              /* sits directly below the crown corner block */
  bottom: -46px;          /* extends below apron to sit on the ground line */
  width: 54px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  color: var(--wood-mid);
  filter: drop-shadow(0 4px 8px oklch(0 0 0 / 0.45));
}
.pilaster--left  { left: -6px; }
.pilaster--right { right: -6px; }

/* Rosette medallions at top + bottom */
.pilaster-rosette {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  z-index: 2;
}
.pilaster-rosette svg { width: 100%; height: 100%; display: block; }

/* Top rosette is now provided by the crown-corner block — hide the one on the pilaster */
.pilaster-rosette--top { display: none; }

/* Warm directional light wash (upper-left source) */
.pilaster--left .pilaster-rosette::before {
  content: "";
  position: absolute; inset: 2px;
  background: radial-gradient(ellipse at 30% 30%,
    oklch(0.55 0.08 68 / 0.35) 0%,
    transparent 65%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.pilaster--right .pilaster-rosette::before {
  content: "";
  position: absolute; inset: 2px;
  background: radial-gradient(ellipse at 70% 30%,
    oklch(0.40 0.05 60 / 0.25) 0%,
    transparent 65%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Fluted shaft — fills all remaining vertical space */
.pilaster-shaft {
  flex: 1 1 auto;
  position: relative;
  /* Slightly narrower than rosettes for refined profile — 44px inside 54px wrapper */
  margin: 0 5px;
  background:
    linear-gradient(to right,
      oklch(0.10 0.018 50) 0%,
      oklch(0.20 0.03 52) 25%,
      oklch(0.26 0.035 55) 50%,
      oklch(0.20 0.03 52) 75%,
      oklch(0.12 0.018 50) 100%);
  box-shadow:
    inset 1px 0 0 oklch(0.42 0.04 65 / 0.3),
    inset -1px 0 0 oklch(0 0 0 / 0.4);
}
/* Full-width cap at the top of the shaft — bridges the 5px gap on each side so the corner block reads as connected */
.pilaster-rosette--top + .pilaster-shaft,
.pilaster > .pilaster-shaft:first-child {
  /* handled below */
}
.pilaster::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(to bottom,
    oklch(0.30 0.04 58) 0%,
    oklch(0.22 0.035 55) 60%,
    oklch(0.16 0.025 50) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.50 0.06 66 / 0.4),
    inset 0 -1px 2px oklch(0 0 0 / 0.4);
  z-index: 3;
}
.pilaster-shaft::before {
  /* Vertical flutes */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right,
    oklch(0 0 0 / 0.35) 0 1px,
    transparent 1px 5px,
    oklch(0.50 0.05 68 / 0.12) 5px 6px,
    transparent 6px 10px);
}
.pilaster-shaft::after {
  /* Subtle lit edge on leading side */
  content: "";
  position: absolute; top: 0; bottom: 0; left: 6px;
  width: 3px;
  background: linear-gradient(to bottom,
    transparent 0%,
    oklch(0.55 0.06 68 / 0.25) 20%,
    oklch(0.55 0.06 68 / 0.3) 50%,
    oklch(0.55 0.06 68 / 0.25) 80%,
    transparent 100%);
  pointer-events: none;
}

/* Pad out the shelf to fit the new architectural frame */
.bookshelf { padding-left: 60px; padding-right: 60px; }
.bookshelf-wrap { padding-top: 0; padding-bottom: 36px; }
/* Pull back-wall side shadows so they sit inside the pilasters */
.bookshelf-wrap::before,
.bookshelf-wrap::after { top: 82px; bottom: 82px; }
.bookshelf-wrap::before { left: 60px; }
.bookshelf-wrap::after  { right: 60px; }

/* The shelf plank — walnut BACK WALL with grain */
.shelf-plank {
  position: relative;
  height: 450px;
  border-radius: 2px;
  background:
    /* top inner shadow from shelf above — strong */
    linear-gradient(to bottom,
      oklch(0 0 0 / 0.85) 0%,
      oklch(0 0 0 / 0.5) 4%,
      oklch(0 0 0 / 0.15) 12%,
      transparent 22%,
      transparent 88%,
      oklch(0 0 0 / 0.4) 98%,
      oklch(0.03 0.005 50) 100%),
    /* inner corner gradients (L/R) — walls receding */
    linear-gradient(to right,
      oklch(0 0 0 / 0.75) 0%,
      oklch(0 0 0 / 0.3) 6%,
      transparent 14%,
      transparent 86%,
      oklch(0 0 0 / 0.3) 94%,
      oklch(0 0 0 / 0.75) 100%),
    /* base wood color — WARMER so it reads as wood not black */
    linear-gradient(172deg,
      oklch(0.28 0.045 55) 0%,
      oklch(0.22 0.04 50) 40%,
      oklch(0.16 0.03 48) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.60 0.06 70 / 0.35),
    inset 0 -2px 0 oklch(0.03 0.005 50),
    0 50px 70px -20px oklch(0 0 0 / 0.95);
  overflow: visible;
}
/* Wood grain on the BACK WALL — now clearly visible */
.shelf-plank::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* knots */
    radial-gradient(ellipse 60px 12px at 18% 42%, oklch(0.08 0.015 50 / 0.6), transparent 70%),
    radial-gradient(ellipse 80px 14px at 73% 28%, oklch(0.08 0.015 50 / 0.5), transparent 70%),
    radial-gradient(ellipse 50px 10px at 48% 68%, oklch(0.08 0.015 50 / 0.55), transparent 70%),
    radial-gradient(ellipse 40px 8px at 88% 60%, oklch(0.08 0.015 50 / 0.45), transparent 70%),
    /* fine vertical grain */
    repeating-linear-gradient(90deg,
      transparent 0 28px,
      oklch(0.08 0.01 50 / 0.35) 28px 30px,
      transparent 30px 62px,
      oklch(0.52 0.07 65 / 0.12) 62px 63px,
      transparent 63px 110px),
    /* broader plank banding */
    repeating-linear-gradient(90deg,
      transparent 0 180px,
      oklch(0.10 0.015 50 / 0.4) 180px 184px,
      transparent 184px 360px);
  mix-blend-mode: overlay;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.9;
}
/* Warm rim light shaft + soft glow behind books */
.shelf-plank::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* strong directional shaft */
    radial-gradient(ellipse 45% 100% at var(--light-x, 18%) 0%,
      oklch(0.78 0.10 72 / 0.45) 0%,
      oklch(0.60 0.08 68 / 0.20) 30%,
      transparent 60%),
    /* soft center glow where books are */
    radial-gradient(ellipse 60% 70% at 50% 75%,
      oklch(0.45 0.06 65 / 0.25) 0%,
      transparent 70%);
  pointer-events: none;
  border-radius: inherit;
  transition: background 600ms ease;
  mix-blend-mode: screen;
}

/* The shelf floor — the surface the books rest on, with carved front edge */
.shelf-floor {
  position: absolute; left: -8px; right: -8px; bottom: -4px;
  height: 46px;
  background:
    /* front bullnose highlight */
    linear-gradient(to bottom,
      oklch(0.52 0.06 70 / 0.45) 0%,
      oklch(0.36 0.04 60) 3%,
      var(--wood-mid) 25%,
      var(--wood-deep) 70%,
      oklch(0.08 0.01 50) 100%);
  border-top: 1px solid oklch(0.55 0.06 70 / 0.4);
  box-shadow:
    0 -1px 0 oklch(0 0 0 / 0.5),
    0 -8px 14px -4px oklch(0 0 0 / 0.6) inset,
    0 16px 30px oklch(0 0 0 / 0.75);
  z-index: 3;
}
.shelf-floor::before {
  /* carved decorative groove */
  content: "";
  position: absolute; left: 0; right: 0; top: 11px; height: 1px;
  background: oklch(0 0 0 / 0.55);
  box-shadow: 0 1px 0 oklch(0.60 0.06 70 / 0.3);
}
.shelf-floor::after {
  /* second groove — double rule */
  content: "";
  position: absolute; left: 0; right: 0; top: 15px; height: 1px;
  background: oklch(0 0 0 / 0.35);
}

/* The row of books */
.shelf-books {
  position: absolute;
  left: 0; right: 0;
  bottom: 40px; /* sit on the carved floor */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  padding: 0 100px;
  perspective: 1400px;
  z-index: 4;
}

/* Curatorial object — small stone + pressed sprig */
.shelf-object {
  position: relative;
  width: 80px;
  min-width: 80px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 80px;
  margin-left: 14px;
  pointer-events: none;
}
.shelf-object .stone {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 18px;
  background:
    radial-gradient(ellipse 50% 70% at 35% 30%,
      oklch(0.62 0.015 80 / 0.6) 0%,
      transparent 60%),
    linear-gradient(160deg,
      oklch(0.48 0.012 80) 0%,
      oklch(0.38 0.015 78) 55%,
      oklch(0.26 0.012 75) 100%);
  border-radius: 50% 48% 52% 50% / 60% 55% 45% 40%;
  box-shadow:
    0 2px 0 oklch(0 0 0 / 0.4),
    6px 4px 10px oklch(0 0 0 / 0.65),
    inset -2px -2px 3px oklch(0 0 0 / 0.3),
    inset 2px 2px 2px oklch(1 0 0 / 0.08);
}
.shelf-object .stone::after {
  content: "";
  position: absolute;
  bottom: -6px; left: -6px; right: -14px;
  height: 6px;
  background: radial-gradient(ellipse 60% 100% at 30% 0%,
    oklch(0 0 0 / 0.6), transparent 80%);
  filter: blur(3px);
  transform: skewX(-26deg);
}
.shelf-object .sprig {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-60%) rotate(-4deg);
  width: 42px;
  height: 80px;
  color: oklch(0.48 0.04 95);
  opacity: 0.78;
  filter: drop-shadow(1px 2px 1px oklch(0 0 0 / 0.4));
}

/* Individual book (spine-view) */
.book {
  --w: 80px;
  --h: 380px;
  position: relative;
  width: var(--w);
  height: var(--h);
  cursor: pointer;
  transform-origin: bottom center;
  transition:
    transform 400ms var(--ease-book),
    filter 400ms ease;
  outline: none;
}
.book:hover { transform: translateY(-6px); }
.book:focus-visible { filter: drop-shadow(0 0 0 2px var(--gold)); }

/* Page block on top of each book (the cream head-edge of the pages) */
.book::after {
  content: "";
  position: absolute;
  top: -4px; left: 2px; right: 2px;
  height: 5px;
  background:
    repeating-linear-gradient(90deg,
      oklch(0.90 0.015 85) 0 1px,
      oklch(0.86 0.018 82) 1px 2px,
      oklch(0.88 0.016 84) 2px 3px);
  border-radius: 1px 1px 0 0;
  box-shadow:
    0 -1px 0 oklch(0.72 0.02 80 / 0.4),
    0 1px 2px oklch(0 0 0 / 0.35);
  z-index: 1;
}

/* Floor shadow cast by each book — sits on top of floor */
.book::before {
  content: "";
  position: absolute;
  bottom: -16px; left: -12px; right: -22px;
  height: 22px;
  background: radial-gradient(ellipse 60% 100% at 30% 0%,
    oklch(0 0 0 / 0.95) 0%,
    oklch(0 0 0 / 0.55) 40%,
    oklch(0 0 0 / 0.2) 70%,
    transparent 90%);
  filter: blur(5px);
  z-index: 10;
  transform: skewX(-28deg);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.book:hover::before { opacity: 0.75; transform: skewX(-22deg) translateY(3px); }

.book .spine {
  position: absolute; inset: 0;
  border-radius: 2px 3px 3px 2px;
  box-shadow:
    inset 2px 0 0 oklch(1 0 0 / 0.08),
    inset -3px 0 6px oklch(0 0 0 / 0.5),
    inset 0 2px 0 oklch(1 0 0 / 0.1),
    inset 0 -4px 6px oklch(0 0 0 / 0.6),
    2px 4px 10px oklch(0 0 0 / 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 8px 22px;
  text-align: center;
  overflow: hidden;
  transition: box-shadow 300ms ease, filter 300ms ease;
  z-index: 2;
}

/* Fabric/cloth weave texture on every spine */
.book .spine::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* horizontal weft */
    repeating-linear-gradient(0deg,
      transparent 0 2px,
      oklch(0 0 0 / 0.08) 2px 2.5px,
      transparent 2.5px 4px),
    /* vertical warp */
    repeating-linear-gradient(90deg,
      transparent 0 2px,
      oklch(1 0 0 / 0.03) 2px 2.5px,
      transparent 2.5px 4px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.book .spine::after {
  /* rim-light streak on hover */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 0%, transparent 42%,
    oklch(1 0 0 / 0.14) 50%,
    transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.book:hover .spine::after { opacity: 1; }
.book:hover .spine {
  filter: brightness(1.15);
  box-shadow:
    inset 2px 0 0 oklch(1 0 0 / 0.12),
    inset -3px 0 6px oklch(0 0 0 / 0.4),
    0 0 0 1px var(--gold-faint),
    4px 12px 28px oklch(0 0 0 / 0.7);
}

/* Head & tail bands (decorative fabric strips near top/bottom of spine) */
.book .spine-title { position: relative; z-index: 2; }
.book .spine-author { position: relative; z-index: 2; }
.book .spine-ornament { position: relative; z-index: 2; }

/* Vertical spine titles */
.spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--spine-ink, oklch(0.92 0.015 85));
  white-space: nowrap;
  margin-top: 18px;
}
.spine-author {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--spine-ink, oklch(0.92 0.015 85));
  opacity: 0.7;
  white-space: nowrap;
  margin-bottom: 14px;
}
.spine-ornament {
  width: 20px; height: 1px;
  background: var(--spine-ornament, var(--gold));
  opacity: 0.8;
}

/* Three book variants */
.book--on-returning {
  --w: 94px;
  --h: 388px;
  --spine-ink: oklch(0.88 0.025 80);
  --spine-ornament: oklch(0.75 0.11 78);
}
.book--on-returning .spine {
  background:
    /* leather grain */
    radial-gradient(ellipse 100% 60% at 50% 40%,
      oklch(0.30 0.06 30) 0%,
      oklch(0.22 0.05 28) 70%,
      oklch(0.16 0.04 25) 100%);
}
.book--on-returning .spine-title {
  font-weight: 500;
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  color: oklch(0.88 0.08 78); /* gold stamping */
}
/* gold-stamped double rule above and below the title */
.book--on-returning .spine-ornament {
  width: 28px; height: 1px;
  background: oklch(0.75 0.11 78);
  box-shadow: 0 2px 0 oklch(0.75 0.11 78 / 0.5);
}

.book--middle-of-the-map {
  --w: 108px;
  --h: 404px;
  --spine-ink: oklch(0.22 0.04 40);
  --spine-ornament: oklch(0.40 0.08 40);
}
.book--middle-of-the-map .spine {
  background:
    /* linen / buckram */
    linear-gradient(180deg,
      oklch(0.80 0.04 85) 0%,
      oklch(0.74 0.045 83) 50%,
      oklch(0.68 0.05 80) 100%);
}
.book--middle-of-the-map .spine::before {
  /* linen weave is chunkier */
  background:
    repeating-linear-gradient(0deg,
      transparent 0 2px,
      oklch(0.20 0.02 50 / 0.08) 2px 3px,
      transparent 3px 5px),
    repeating-linear-gradient(90deg,
      transparent 0 2px,
      oklch(0.95 0 0 / 0.08) 2px 3px,
      transparent 3px 5px);
  mix-blend-mode: multiply;
}
.book--middle-of-the-map .spine-title {
  font-weight: 500;
  color: oklch(0.24 0.05 38);
}

.book--field-notes {
  --w: 82px;
  --h: 366px;
  --spine-ink: oklch(0.90 0.02 80);
  --spine-ornament: oklch(0.75 0.11 78);
}
.book--field-notes .spine {
  background:
    linear-gradient(180deg,
      oklch(0.36 0.05 145) 0%,
      oklch(0.28 0.05 148) 50%,
      oklch(0.22 0.04 146) 100%);
}
.book--field-notes .spine-title {
  color: oklch(0.90 0.08 78); /* gold */
  font-size: 13px;
}

/* Pulled spine — hide when book is open at center */
.book.is-pulled {
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 500ms var(--ease-book);
}

/* Tiny embossed monogram on shelf, lower-right */
.shelf-monogram {
  position: absolute;
  right: 28px; bottom: 10px;
  font-family: var(--serif);
  font-variant: all-small-caps;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: oklch(0.68 0.07 70 / 0.55);
  text-shadow:
    0 1px 0 oklch(0.05 0.01 50),
    0 -1px 0 oklch(0.55 0.06 70 / 0.3);
}

/* ---------- Stage + open book ---------- */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 500ms var(--ease-book);
}
.stage.is-open { opacity: 1; pointer-events: auto; }

.stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%,
      oklch(0.18 0.02 50 / 0.55) 0%,
      oklch(0.04 0.01 50 / 0.92) 70%);
}

.book-open {
  position: relative;
  width: min(1080px, 92vw);
  height: min(680px, 78vh);
  transform: rotateY(-90deg) scale(0.3);
  transform-style: preserve-3d;
  perspective: 2000px;
  transition: transform var(--dur-book) var(--ease-book);
}
.stage.is-open .book-open {
  transform: rotateY(0deg) scale(1);
}

/* The two-page spread */
.spread {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--parchment);
  border-radius: 3px;
  box-shadow:
    0 60px 100px -20px oklch(0 0 0 / 0.7),
    0 0 0 1px oklch(0.04 0.01 50 / 0.5);
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease 280ms;
}
.stage.is-open .spread { opacity: 1; }

/* Cream paper grain */
.spread::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%,
      transparent 0%, oklch(0.86 0.02 85 / 0.25) 100%);
  pointer-events: none;
}

.page {
  position: relative;
  padding: 68px 72px 72px;
  overflow: hidden;
}
.page--left {
  padding-right: 56px;
  background: linear-gradient(to right, var(--parchment-2) 0%, var(--parchment) 12%);
}
.page--right {
  padding-left: 56px;
  background: linear-gradient(to left, var(--parchment-2) 0%, var(--parchment) 12%);
}

/* Gutter shadow */
.spread::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 40px;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    transparent 0%,
    oklch(0.22 0.02 50 / 0.28) 50%,
    transparent 100%);
  pointer-events: none;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 42px;
  border-bottom: 1px solid oklch(0.22 0.02 50 / 0.08);
  padding-bottom: 10px;
}
.page--right .page-head {
  flex-direction: row-reverse;
}

#reader-surface {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  max-width: 44ch;
}
#reader-surface p { margin: 0 0 14px; }
#reader-surface p:first-of-type::first-letter {
  font-size: 44px;
  line-height: 0.9;
  float: left;
  padding: 6px 10px 0 0;
  font-weight: 500;
}

.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--ink);
  vertical-align: -2px;
  animation: tw-blink 1s step-end infinite;
  margin-left: 1px;
}
.tw-cursor--done { background: var(--gold); opacity: 0.6; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* Close control */
.close-btn {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  cursor: pointer;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  transition: color 200ms ease, transform 200ms ease;
  z-index: 4;
}
.close-btn:hover { color: var(--gold-deep); transform: rotate(90deg); }
.close-btn svg { width: 14px; height: 14px; }

.stage-chrome {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.82 0.012 80 / 0.6);
  z-index: 4;
}
.stage-chrome .kbd {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-right: 6px;
}
.turn-hint {
  opacity: 0;
  transition: opacity 500ms ease;
  color: var(--gold);
}
.turn-hint.is-visible { opacity: 1; }

/* Optional soft page-turn flash */
.spread.page-turn {
  animation: page-flash 500ms ease;
}
@keyframes page-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

/* ---------- Below-the-fold home sections ---------- */
.hero-subscribe {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 56px auto 0;
  padding: 0 40px 80px;
  text-align: center;
  color: oklch(0.88 0.015 80);
  transition: opacity 400ms ease;
}
.hero-subscribe .rule {
  margin: 0 auto 24px;
  background: var(--gold);
  opacity: 0.6;
}
.hero-subscribe p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: oklch(0.88 0.015 80 / 0.8);
  margin: 0 0 24px;
}
.hero-subscribe .subscribe {
  margin: 0 auto;
  color: oklch(0.88 0.015 80);
}

.imprint-note {
  background: var(--parchment);
  padding: 96px 40px 80px;
  text-align: center;
}
.imprint-note .mark {
  margin: 0 auto 22px;
  width: 24px; height: 24px;
  border: 1px solid var(--gold);
  position: relative;
}
.imprint-note .mark::before, .imprint-note .mark::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 1px; background: var(--gold);
}
.imprint-note .mark::before { left: -11px; transform: rotate(20deg); }
.imprint-note .mark::after { right: -11px; transform: rotate(-20deg); }
.imprint-note h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  max-width: 22ch;
  margin: 0 auto 18px;
  line-height: 1.25;
}
.imprint-note p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 18px;
}
.imprint-note .more {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-faint);
  padding-bottom: 3px;
}
.imprint-note .more:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Book cover art (used on stage cover and book detail pages) ---------- */
.cover-front {
  position: relative;
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 30px 32px;
  text-align: center;
  color: oklch(0.92 0.015 85);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.06),
    0 30px 60px -20px oklch(0 0 0 / 0.6);
}
.cover-front .cover-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.cover-front .cover-rule {
  width: 28px; height: 1px;
  background: var(--gold);
  margin: 18px auto;
}
.cover-front .cover-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  opacity: 0.85;
}
.cover-front .cover-author {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.cover-front .cover-imprint {
  font-family: var(--serif);
  font-variant: all-small-caps;
  letter-spacing: 0.22em;
  font-size: 9px;
  opacity: 0.6;
  color: var(--gold);
}
.cover-on-returning {
  background: linear-gradient(180deg, oklch(0.26 0.05 30), oklch(0.18 0.04 28));
}
.cover-middle-of-the-map {
  background: linear-gradient(180deg, oklch(0.82 0.03 85), oklch(0.72 0.04 85));
  color: oklch(0.20 0.02 55);
}
.cover-middle-of-the-map .cover-imprint { color: oklch(0.38 0.06 40); }
.cover-field-notes {
  background: linear-gradient(180deg, oklch(0.32 0.04 140), oklch(0.22 0.04 142));
}

/* Stage shows cover on left page, typing on right page */
.page--left .cover-front {
  max-width: 260px;
  margin: 12px auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .hero-intro { padding: 36px 22px 12px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .hero-headline { font-size: 34px; line-height: 1.1; }
  .hero-sub { font-size: 11px; letter-spacing: 0.14em; margin-top: 14px; }

  .shelf-plank { height: 360px; }
  .shelf-books {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 40% 0 20%;  /* allow centering first/last via padding */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shelf-books::-webkit-scrollbar { display: none; }
  .book { scroll-snap-align: center; }
  .book--on-returning, .book--middle-of-the-map, .book--field-notes {
    --h: 286px;
  }
  .bookshelf { padding: 0; }
  .shelf-monogram { right: 16px; font-size: 9px; }

  .hero-subscribe { margin-top: 40px; padding: 0 22px 56px; }
  .hero-subscribe p { font-size: 16px; }

  .imprint-note { padding: 64px 22px 56px; }

  /* Open book — full viewport spread */
  .book-open { width: 100vw; height: 100vh; }
  .spread { grid-template-columns: 1fr; border-radius: 0; }
  .page--left { display: none; }
  .page--right { padding: 56px 24px 80px; }
  .spread::after { display: none; }
  .page-head { margin-bottom: 28px; font-size: 11px; }
  #reader-surface { font-size: 16px; line-height: 1.72; max-width: 100%; }
  #reader-surface p:first-of-type::first-letter {
    font-size: 36px;
    padding: 4px 8px 0 0;
  }
  .close-btn { top: 10px; right: 10px; width: 44px; height: 44px; }
  .close-btn svg { width: 18px; height: 18px; }
  .stage-chrome {
    bottom: 14px;
    gap: 10px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
    max-width: 100%;
  }
  .stage-chrome .kbd { padding: 2px 6px; margin-right: 4px; }

  /* Tweaks panel — tuck into corner, narrower */
  .tweaks-panel {
    right: 12px; bottom: 12px; left: 12px;
    width: auto; max-width: 320px; margin-left: auto;
    padding: 14px 16px 12px;
  }
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  background: oklch(0.97 0.01 85);
  color: var(--ink);
  border: 1px solid oklch(0.22 0.02 50 / 0.12);
  border-radius: 4px;
  padding: 18px 20px 16px;
  width: 260px;
  font-family: var(--sans);
  font-size: 12px;
  box-shadow: 0 20px 40px -10px oklch(0 0 0 / 0.25);
  z-index: 60;
  display: none;
}
.tweaks-panel.is-visible { display: block; }
.tweaks-panel h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid oklch(0.22 0.02 50 / 0.1);
  padding-bottom: 10px;
}
.tweaks-panel .tweak-group { margin-bottom: 14px; }
.tweaks-panel .tweak-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.tweaks-panel .tweak-opts { display: flex; gap: 6px; }
.tweaks-panel .tweak-opt {
  flex: 1;
  padding: 7px 8px;
  font-size: 11px;
  border: 1px solid oklch(0.22 0.02 50 / 0.2);
  background: transparent;
  cursor: pointer;
  text-transform: capitalize;
  color: var(--ink-soft);
  border-radius: 2px;
  transition: all 200ms ease;
  font-family: var(--sans);
}
.tweaks-panel .tweak-opt:hover { border-color: var(--gold); }
.tweaks-panel .tweak-opt.is-active {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
}

/* ==============================================
   Candle — sits on the shelf floor, lower-left.
   The flame provides ambient warm light to the shelf.
   Click anywhere on the candle to open the secret book.
   ============================================== */
.shelf-candle {
  position: relative;
  flex: 0 0 44px;
  align-self: flex-end;
  margin-left: 14px;
  width: 44px;
  height: 180px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 6;
  /* flicker driver — used by inner flame elements */
  --flicker: 1;
}
.shelf-candle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 8px;
  border-radius: 2px;
}

/* The wax column */
.candle-stick {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 14px;
  height: 86px;
  background:
    linear-gradient(to right,
      oklch(0.62 0.025 80) 0%,
      oklch(0.82 0.02 85) 20%,
      oklch(0.88 0.015 85) 50%,
      oklch(0.78 0.02 85) 80%,
      oklch(0.55 0.025 78) 100%);
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 -1px 0 oklch(0.4 0.02 75 / 0.4),
    inset 0 1px 0 oklch(0.95 0.01 85 / 0.6);
}
/* Top of candle — slight dip where wax melted */
.candle-stick::before {
  content: "";
  position: absolute;
  top: -2px; left: -1px; right: -1px;
  height: 4px;
  background: radial-gradient(ellipse at 50% 100%,
    oklch(0.4 0.03 70) 0%,
    oklch(0.75 0.02 82) 45%,
    oklch(0.85 0.015 85) 100%);
  border-radius: 50% 50% 2px 2px / 80% 80% 2px 2px;
}
/* Faint wax drips */
.candle-wax-drip {
  position: absolute;
  width: 3px;
  background: oklch(0.85 0.015 85);
  border-radius: 0 0 2px 2px;
  box-shadow: inset -1px 0 0 oklch(0.55 0.02 78 / 0.5);
}
.candle-wax-drip--1 { left: 1px; top: 18px; height: 14px; }
.candle-wax-drip--2 { right: 2px; top: 32px; height: 9px; }

/* Brass holder — a small dish at the base */
.candle-holder {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -6px;
  height: 10px;
  background: linear-gradient(to bottom,
    oklch(0.50 0.08 72) 0%,
    oklch(0.42 0.07 68) 50%,
    oklch(0.28 0.05 62) 100%);
  border-radius: 50% 50% 4px 4px / 80% 80% 4px 4px;
  box-shadow:
    inset 0 1px 0 oklch(0.70 0.08 75 / 0.5),
    inset 0 -1px 0 oklch(0.15 0.02 55);
}
.candle-holder-base {
  position: absolute;
  left: -7px;
  right: -7px;
  bottom: -10px;
  height: 6px;
  background: radial-gradient(ellipse at 50% 0%,
    oklch(0.42 0.07 68) 0%,
    oklch(0.25 0.04 60) 70%,
    oklch(0.15 0.02 55) 100%);
  border-radius: 50%;
  box-shadow:
    0 2px 6px oklch(0 0 0 / 0.5),
    0 1px 0 oklch(0.55 0.07 70 / 0.3);
}

/* Wick */
.candle-wick {
  position: absolute;
  left: 50%;
  bottom: 98px;
  transform: translateX(-50%);
  width: 1.2px;
  height: 7px;
  background: linear-gradient(to top,
    oklch(0.18 0.02 40) 0%,
    oklch(0.28 0.03 50) 60%,
    oklch(0.18 0.02 40) 100%);
  border-radius: 1px;
  z-index: 2;
}

/* Flame — three stacked layers with flicker animations */
.candle-flame {
  position: absolute;
  left: 50%;
  bottom: 102px;
  transform: translateX(-50%);
  width: 18px;
  height: 36px;
  pointer-events: none;
  z-index: 3;
  filter: blur(0.3px);
}
.candle-flame-outer,
.candle-flame-inner,
.candle-flame-core {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  transform-origin: 50% 100%;
}
.candle-flame-outer {
  width: 18px;
  height: 36px;
  background: radial-gradient(ellipse at 50% 80%,
    oklch(0.85 0.14 80 / 0.8) 0%,
    oklch(0.75 0.16 65 / 0.55) 40%,
    oklch(0.65 0.16 55 / 0) 80%);
  animation: flame-sway 2.4s ease-in-out infinite;
}
.candle-flame-inner {
  width: 10px;
  height: 26px;
  background: radial-gradient(ellipse at 50% 85%,
    oklch(0.95 0.12 90) 0%,
    oklch(0.85 0.15 75) 50%,
    oklch(0.70 0.16 55 / 0.6) 90%);
  animation: flame-flicker 1.1s ease-in-out infinite;
}
.candle-flame-core {
  width: 4px;
  height: 14px;
  bottom: 2px;
  background: radial-gradient(ellipse at 50% 70%,
    oklch(0.98 0.04 95) 0%,
    oklch(0.90 0.10 85) 60%,
    oklch(0.75 0.14 65 / 0.8) 100%);
  animation: flame-flicker 0.7s ease-in-out infinite reverse;
}

/* Warm halo glow extending around the flame */
.candle-halo {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, 30%);
  width: 260px;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(circle,
    oklch(0.85 0.14 75 / 0.35) 0%,
    oklch(0.75 0.14 65 / 0.18) 20%,
    oklch(0.65 0.14 60 / 0.08) 45%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: halo-pulse 3.2s ease-in-out infinite;
  z-index: 1;
}

/* Broader ambient wash cast onto the shelf back-wall */
.candle-glow {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translate(-50%, 0);
  width: 520px;
  height: 480px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%,
    oklch(0.70 0.12 70 / 0.20) 0%,
    oklch(0.60 0.12 65 / 0.10) 30%,
    oklch(0.50 0.10 60 / 0.04) 55%,
    transparent 75%);
  mix-blend-mode: screen;
  animation: glow-pulse 4.1s ease-in-out infinite;
  z-index: 0;
}

/* Hover — flame brightens a touch */
.shelf-candle:hover .candle-flame-outer { filter: brightness(1.15); }
.shelf-candle:hover .candle-halo { animation-duration: 2s; }

@keyframes flame-sway {
  0%, 100%   { transform: translateX(-50%) rotate(-1.5deg) scaleY(1);    opacity: 0.85; }
  25%        { transform: translateX(-50%) rotate(1deg)    scaleY(1.06); opacity: 0.92; }
  50%        { transform: translateX(-50%) rotate(-0.5deg) scaleY(0.97); opacity: 0.82; }
  75%        { transform: translateX(-50%) rotate(2deg)    scaleY(1.03); opacity: 0.90; }
}
@keyframes flame-flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1)    scaleX(1);    opacity: 0.95; }
  20%      { transform: translateX(-50%) scaleY(1.08) scaleX(0.95); opacity: 1;    }
  40%      { transform: translateX(-50%) scaleY(0.94) scaleX(1.04); opacity: 0.88; }
  60%      { transform: translateX(-50%) scaleY(1.05) scaleX(0.98); opacity: 0.97; }
  80%      { transform: translateX(-50%) scaleY(0.98) scaleX(1.02); opacity: 0.92; }
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.95; transform: translate(-50%, 30%) scale(1);    }
  50%      { opacity: 1;    transform: translate(-50%, 30%) scale(1.06); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1;   }
}

/* Mobile — shrink candle to fit narrower plank */
@media (max-width: 720px) {
  .shelf-candle { flex: 0 0 32px; width: 32px; height: 130px; margin-left: 10px; }
  .candle-stick { width: 11px; height: 64px; bottom: 10px; }
  .candle-wick { bottom: 74px; height: 5px; }
  .candle-flame { bottom: 78px; width: 14px; height: 28px; }
  .candle-flame-outer { width: 14px; height: 28px; }
  .candle-flame-inner { width: 8px; height: 20px; }
  .candle-flame-core  { width: 3px; height: 10px; }
  .candle-halo,
  .candle-glow { display: none; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .candle-flame-outer,
  .candle-flame-inner,
  .candle-flame-core,
  .candle-halo,
  .candle-glow { animation: none; }
}