/* =========================================================
   HERO CTA — Shimmer button (PILL OUTLINE, rounded + thinner shimmer)
   Fixes:
   - “square” look: force pill radius + proper ring clipping
   - shimmer too wide: shrink ring thickness + narrow the highlight band
========================================================= */

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes spin { to { --spin: 360deg; } }

@keyframes shinePulse {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes textSheen {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

/* ===============================
   Base button
=============================== */
.hero-ember .hero-cta .btn-shimmer{
  /* pill geometry */
  --pill-radius: 999px;    /* FORCE true pill */
  --ring: 6px;             /* thinner outline */

  /* palette */
  --btn-base: #2A1238;
  --btn-base-2: #3D1D4C;
  --btn-text: #E7D7F7;
  --btn-glow: #E378A8;
  --btn-glow-2: #F8B5D2;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .8em 1.6em;      /* a touch wider reads more “pill” */
  border-radius: var(--pill-radius);
  text-decoration: none;
  font-family: var(--nav-font);
  font-weight: 600;

  isolation: isolate;
  overflow: hidden;         /* keep ring perfectly clipped */
  background-clip: padding-box;

  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--btn-base), #000 6%) 0%,
    var(--btn-base-2) 55%,
    color-mix(in srgb, var(--btn-base), #000 14%) 100%
  );

  border: 1px solid color-mix(in srgb, var(--btn-glow), #fff 70%);

  box-shadow:
    0 10px 26px rgba(18, 10, 30, 0.22),
    0 2px 6px rgba(18, 10, 30, 0.14),
    inset 0 -12px 22px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14);

  transform: translateY(0) scale(1);
  transition: transform .55s cubic-bezier(.2,.9,.2,1),
              box-shadow .55s cubic-bezier(.2,.9,.2,1);
}

@media (hover:hover){
  .hero-ember .hero-cta .btn-shimmer:hover:not(:active){
    transform: translateY(-2px) scale(1.06);
    box-shadow:
      0 16px 34px rgba(18, 10, 30, 0.26),
      0 5px 14px rgba(18, 10, 30, 0.16),
      inset 0 0 0 transparent,
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
}
.hero-ember .hero-cta .btn-shimmer:active{
  transform: translateY(-1px) scale(1.03);
}

/* ===============================
   Text
=============================== */
.hero-ember .hero-cta .btn-shimmer .btn-text{
  position: relative;
  z-index: 3;

  color: var(--btn-text);
  letter-spacing: 0.01em;

  /* subtle text sheen (optional) */
  background-image: linear-gradient(
    120deg,
    transparent,
    rgba(248,181,210,0.55) 42%,
    rgba(227,120,168,0.65) 50%,
    transparent 58%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 240% 240%;
  background-position: 120% center;
  background-repeat: no-repeat;
}

@media (hover:hover){
  .hero-ember .hero-cta .btn-shimmer:hover .btn-text{
    animation: textSheen .66s ease-in 1 both;
  }
}

/* ==========================================
   Shimmer ring (pill outline)
   - thinner ring (var(--ring))
   - narrower highlight band in conic gradient
========================================== */
.hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring{
  position: absolute;
  inset: 0;
  border-radius: var(--pill-radius);
  pointer-events: none;
  z-index: 2;

  padding: var(--ring);

  /* narrower highlight band: keep the bright slice tight */
  background: conic-gradient(
    from var(--spin),
    transparent 0%,
    transparent 34%,
    rgba(248, 181, 210, 0.00) 39%,
    rgba(248, 181, 210, 0.80) 42%,
    rgba(227, 120, 168, 0.72) 45%,
    rgba(248, 181, 210, 0.00) 48%,
    transparent 54%,
    transparent 100%
  );

  mix-blend-mode: plus-lighter;
  opacity: 0;
  animation: spin 1s linear infinite;

  /* True pill-ring cutout */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ring glow strokes */
.hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring::before,
.hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring::after{
  content:"";
  position:absolute;
  inset: var(--ring);
  border-radius: var(--pill-radius);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring::before{
  box-shadow:
    0 0 8px 2px rgba(248, 181, 210, 0.55),
    0 0 18px 4px rgba(227, 120, 168, 0.45);
}

.hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 6px rgba(248, 181, 210, 0.22);
}

@media (hover:hover){
  .hero-ember .hero-cta .btn-shimmer:hover .btn-shimmer-ring{
    opacity: 1;
  }
  .hero-ember .hero-cta .btn-shimmer:hover .btn-shimmer-ring::before,
  .hero-ember .hero-cta .btn-shimmer:hover .btn-shimmer-ring::after{
    opacity: 1;
    animation: shinePulse 1.2s ease-in 1 forwards;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-ember .hero-cta .btn-shimmer .btn-shimmer-ring{
    animation: none !important;
  }
  .hero-ember .hero-cta .btn-shimmer:hover .btn-text{
    animation: none !important;
  }
}

/* === ONLY change: make the button text visible (white-ish) === */
/* Paste this AFTER the existing block so it wins. */

.hero-ember .hero-cta .btn-shimmer .btn-text{
  /* force readable text */
  color: var(--btn-text, #E7D7F7) !important;

  /* remove the transparent + clip sheen behavior */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  animation: none; /* keeps everything else unchanged */
}

/* Optional: if you want a *very* subtle lift for legibility on video */
.hero-ember .hero-cta .btn-shimmer .btn-text{
  text-shadow: 0 1px 8px rgba(0,0,0,0.28);
}

/* =========================================================
   HERO — Mobile CTA push-down (extra spacing)
========================================================= */
@media (max-width: 575.98px){
  #hero .hero-cta{
    margin-top: clamp(2.75rem, 8vw, 3.5rem) !important;
  }
}

/* =========================================================
   HERO — Mobile: force CTA lower (final)
========================================================= */
@media (max-width: 575.98px){
  .hero-cta{
    transform: translateY(2.25rem); /* tweak if needed */
  }

  /* Prevent bottom clipping on small screens */
  #hero{
    padding-bottom: 3rem;
  }
}

/* =========================================================
   HERO (EMBER) — Clean Single Source of Truth (v3 — Refactor)
   Goals:
   - Center the hero unit (card + cover) on desktop
   - Keep nav haze (0–10%) then progressively clearer
   - Lift hero up consistently across breakpoints
   - Prevent H1 truncation (wrap safely, balanced)
   - Keep cover sensible on large desktop (no 600px giant)
   - Remove duplicate/conflicting breakpoints
========================================================= */


/* =========================================================
   0) HERO WRAPPER + BACKGROUND VIDEO
========================================================= */

#hero.hero{
  padding: 0;
  position: relative;
  overflow: hidden;
}

#hero.hero-ember{
  position: relative;
  min-height: 100vh;
  overflow: hidden;

  /* Hazy over nav (0–10%), then progressively clearer */
  background: linear-gradient(
    180deg,
    rgba(249, 246, 242, 0.92) 0%,
    rgba(249, 246, 242, 0.86) 10%,
    rgba(251, 234, 223, 0.50) 28%,
    rgba(228, 183, 160, 0.22) 55%,
    rgba(249, 246, 242, 0.08) 78%,
    rgba(249, 246, 242, 0.02) 100%
  );
}

/* Global fixed background video */
#hero.hero-ember .global-video-bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

#hero.hero-ember .global-video-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   1) FOREGROUND SPACING (container) + GLOBAL LIFT
========================================================= */

#hero.hero-ember .container{
  position: relative;
  z-index: 1;

  /* Lift hero up across all sizes */
  padding-top: clamp(4.75rem, 8vw, 6.25rem);
  padding-bottom: clamp(4rem, 6vw, 5rem);
}

/* Tablet spacing tweak */
@media (max-width: 62em){
  #hero.hero-ember .container{
    padding-top: clamp(4.25rem, 8.5vw, 5.75rem);
  }
}

/* Lift the whole card+cover unit a touch (all breakpoints) */
#hero.hero-ember .hero-layout{
  transform: translateY(clamp(-1.25rem, -2vw, -2rem));
}


/* =========================================================
   2) SAFETY: NEUTRALIZE OLD BOOTSTRAP WIDTH HACKS
========================================================= */

@media (min-width: 992px){
  #hero.hero-ember .col-lg-5,
  #hero.hero-ember .col-lg-4{
    width: auto !important;
    flex: initial !important;
  }
}


/* =========================================================
   3) LAYOUT: GRID WRAPPER
   - Mobile stack
   - Desktop centered “unit”
========================================================= */

#hero.hero-ember .hero-layout{
  display: grid;
  align-items: start;
  gap: 1.6rem; /* mobile default */
}

/* Mobile stack */
@media (max-width: 991.98px){
  #hero.hero-ember .hero-layout{
    grid-template-columns: 1fr;
  }
  #hero.hero-ember .hero-right{
    justify-self: center;
  }
}

/* Desktop grid baseline */
@media (min-width: 992px){
  #hero.hero-ember .hero-layout{
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: minmax(660px, 1.25fr) minmax(360px, 0.75fr);
    gap: 2rem;
  }

  #hero.hero-ember .hero-right{
    justify-self: center;
  }
}


/* =========================================================
   4) REMOVE OLD OUTER “GLASS WRAPPER”
   (Only .hero-text-card should appear as a card)
========================================================= */

#hero.hero-ember .book-hero-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#hero.hero-ember .book-hero-content::before,
#hero.hero-ember .book-hero-content::after{
  content: none !important;
  display: none !important;
}


/* =========================================================
   5) TITLE CARD (outer)
========================================================= */

#hero.hero-ember .hero-text-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px;

  /* Slightly tighter inner padding */
  padding: 2.0rem 1.15rem 1.85rem;

  /* NEW: cap the card width so it doesn’t feel overly wide */
  width: 100%;
  max-width: 880px;          /* adjust 840–920 if you want */
  margin-inline: auto;

  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(254,254,254,0.98) 0%,
      rgba(254,254,254,0.965) 30%,
      rgba(252,249,247,0.95) 55%,
      rgba(247,241,242,0.93) 78%,
      rgba(242,238,246,0.91) 100%),
    radial-gradient(85% 85% at 52% 46%,
      rgba(250, 212, 214, 0.18) 0%,
      rgba(240, 224, 248, 0.12) 42%,
      rgba(255, 240, 225, 0.10) 72%,
      rgba(254, 254, 254,0.00) 100%);

  border: 1px solid rgba(255,255,255,0.55);

  box-shadow:
    0 22px 55px rgba(35, 22, 44, 0.18),
    0 6px 18px rgba(35, 22, 44, 0.10);

  text-align: center;
}

/* H1: safe wrapping (no truncation) */
#hero.hero-ember .hero-text-card h1{
  margin: 0 0 1rem;
  line-height: 1.02;

  white-space: normal;
  overflow: visible;
  text-overflow: initial;

  /* Makes wrap feel “designed” */
  text-wrap: balance;
}

/* Subtitle measure */
#hero.hero-ember .hero-text-card .book-subtitle{
  margin: 0 auto 1.4rem;
  max-width: 60ch;
}


/* =========================================================
   6) INNER GLASS PANEL + TEXT MEASURE
========================================================= */

#hero.hero-ember .hero-text-card .glass-panel{
  margin: 0 auto;

  /* Wider “yellow” panel inside the card */
  width: min(96%, 84ch);     /* was 92% / 74ch */
  max-width: none;

  overflow: visible;
  text-align: center;
}
#hero.hero-ember .hero-text-card .glass-panel{
  padding-inline: clamp(1rem, 1.3vw, 1.35rem);
}

#hero.hero-ember .hero-text-card .glass-panel .book-description{
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#hero.hero-ember .hero-text-card .glass-panel{
  margin: 0 auto;
  width: min(96%, 84ch);
  max-width: none;

  /* FIX: ensure the rounded corners actually clip everything */
  position: relative;
  border-radius: 22px;
  overflow: hidden;              /* was visible */
  background-clip: padding-box;  /* prevents corner “bleed” */
  -webkit-background-clip: padding-box;

  text-align: center;
}


/* =========================================================
   7) CTA ROW
========================================================= */

#hero.hero-ember .hero-cta{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

/* Mobile button tune */
@media (max-width: 575.98px){
  #hero.hero-ember .hero-cta{
    margin-top: 0.75rem;
    transform: translateY(-6px);
  }

  #hero.hero-ember .hero-cta .btn-outline{
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
    padding: clamp(0.65rem, 2.6vw, 0.8rem) clamp(1.2rem, 4.5vw, 1.6rem);
    border-radius: 999px;
  }
}


/* =========================================================
   8) BOOK COVER (single sizing system)
========================================================= */

#hero.hero-ember .book-cover img{
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}


/* =========================================================
   9) BREAKPOINT TUNING (single consolidated set)
========================================================= */

/* Mobile */
@media (max-width: 991.98px){
  #hero.hero-ember .book-cover{
    max-width: 340px;
    transform: none;
  }
}

/* Small desktop (992–1399): slightly reduce type + cover */
@media (min-width: 992px) and (max-width: 1399.98px){

  #hero.hero-ember .hero-text-card{
    margin-top: -18px;
    border-radius: 24px;
    padding: 1.75rem 1.35rem 1.55rem;
  }

  #hero.hero-ember .hero-text-card h1{
    font-size: clamp(2.75rem, 3.2vw, 3.4rem);
    line-height: 1.04;
  }

  #hero.hero-ember .hero-text-card .book-subtitle{
    font-size: clamp(1.0rem, 1.2vw, 1.15rem);
    max-width: 56ch;
    margin-bottom: 1.05rem;
  }

  #hero.hero-ember .hero-text-card .glass-panel{
    width: min(92%, 70ch);
  }

#hero.hero-ember .hero-text-card .glass-panel .book-description.desktop-only{
  font-size: clamp(1.30rem, 1.55vw, 1.62rem) !important;
  line-height: 1.70 !important;
  max-width: 60ch;
}

  #hero.hero-ember .book-cover{
    max-width: 330px;
    transform: translateY(0px) scale(1.0);
    transform-origin: top left;
  }
}

/* Mid desktop (1400–1599) */
@media (min-width: 1400px) and (max-width: 1599.98px){

  #hero.hero-ember .hero-text-card h1{
    font-size: clamp(3.2rem, 3.0vw, 4.0rem);
  }

  #hero.hero-ember .book-cover{
    max-width: 380px;
    transform: translateY(-12px) scale(1.02);
    transform-origin: top left;
  }
}

/* Large desktop (1600+) */
@media (min-width: 1600px){

  #hero.hero-ember .hero-text-card{
    margin-top: -40px;
  }

  #hero.hero-ember .hero-text-card h1{
    font-size: clamp(3.6rem, 3.0vw, 4.4rem);
  }

  #hero.hero-ember .book-cover{
    max-width: 460px; /* key: not 600px */
    transform: translateY(-40px) scale(1.02);
    transform-origin: top left;
  }
}

/* =========================================================
   HERO CTA — actually lift the button (wins specificity)
   Paste at the VERY END of your hero CSS
========================================================= */

/* 1) Remove extra space ABOVE the CTA (most common culprit) */
#hero.hero-ember .hero-text-card .glass-panel .book-description{
  margin-bottom: 0.65rem !important; /* try 0.5rem if you want tighter */
}

/* If your byline has extra margin pushing everything down */
#hero.hero-ember .hero-text-card .glass-panel h3{
  margin-bottom: 0.85rem !important; /* tweak 0.65–1rem */
}

/* 2) Reduce inner panel bottom padding (space BELOW the CTA) */
#hero.hero-ember .hero-text-card .glass-panel{
  padding-bottom: 0.75rem !important; /* tighten the “floor” */
}

/* 3) Nudge the CTA up directly (bulletproof) */
#hero.hero-ember .hero-text-card .glass-panel .hero-cta{
  margin-top: 0.35rem !important;      /* less gap above */
  transform: translateY(-17px) !important; /* physically lifts it */
}

/* Mobile: slightly less lift so it doesn’t crowd */
@media (max-width: 575.98px){
  #hero.hero-ember .hero-text-card .glass-panel .hero-cta{
    transform: translateY(-6px) !important;
    margin-top: 0.25rem !important;
  }
}

/* =========================================================
   HERO — Yellow panel readability (TYPOGRAPHY ONLY)
   No font-size, no margins/padding, no transforms.
   Paste at VERY END.
========================================================= */

/* Body copy inside yellow panel */
#hero.hero-ember .hero-text-card .glass-panel .book-description{
  /* darker ink for contrast on warm bg */
  color: rgba(34, 22, 48, 0.88) !important;

  /* slightly stronger weight without reflowing like size/line-height would */
  font-weight: 500 !important;

  /* subtle clarity lift (doesn't change box metrics) */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.35),
    0 0.5px 0 rgba(0,0,0,0.04);

  /* better rendering (WebKit/macOS) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Make the emphasized title phrase read, not fade */
#hero.hero-ember .hero-text-card .glass-panel .book-description em{
  color: rgba(34, 22, 48, 0.92) !important;
  font-weight: 600 !important;
}

/* Optional: byline readability, also typography-only */
#hero.hero-ember .hero-text-card .glass-panel h3{
  color: rgba(34, 22, 48, 0.90) !important;
}



/* =========================================================
   Small desktops: nudge the whole hero unit to the RIGHT
   (prevents the card from feeling glued to the left edge)
   Paste at VERY END
========================================================= */

/* “Small desktop” feel — adjust range if you want */
@media (min-width: 992px) and (max-width: 1499.98px){

  /* Option A (recommended): shift the entire unit right */
  #hero.hero-ember .hero-layout{
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(clamp(14px, 2vw, 36px)) translateY(clamp(-1.25rem, -2vw, -2rem)) !important;
  }

}

/* =========================================================
   BOOKFX — Clean interactive book (NO overlays)
   Scoped to .bookfx-hero-right
========================================================= */

.bookfx-hero-right{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Big, responsive vertical room (hero-friendly) */
  min-height: clamp(40rem, 60vw, 54rem);

  display: grid;
  place-items: center;
}

/* Stage fills the column (no max-width cap) */
.bookfx-hero-right .bookfx-stage{
  width: 100%;
  height: clamp(40rem, 60vw, 54rem);
  display: grid;
  place-items: center;
  position: relative;
}

/* ---- Responsive sizing vars ---- */
.bookfx-hero-right{
  /* Book size */
  --bookW: clamp(18rem, 24vw, 28rem);
  --bookH: clamp(26rem, 34vw, 40rem);

  /* Shadow size/placement */
  --shadowW: clamp(14rem, 20vw, 24rem);
  --shadowY: clamp(4.5rem, 7vw, 7.5rem);

  /* Lift: more lift as screens get smaller */
  --bookLift: -4rem;
}

/* More lift as width decreases */
@media (max-width: 1199.98px){ .bookfx-hero-right{ --bookLift: -5.25rem; } }
@media (max-width: 991.98px){  .bookfx-hero-right{ --bookLift: -6.25rem; } }
@media (max-width: 767.98px){  .bookfx-hero-right{ --bookLift: -7.25rem; } }
@media (max-width: 575.98px){  .bookfx-hero-right{ --bookLift: -8rem; } }

/* On very large screens: slightly more lift */
@media (min-width: 1400px){
  .bookfx-hero-right{ --bookLift: -6.25rem; }
}

/* Ground shadow */
.bookfx-hero-right .bookfx-shadow{
  position: absolute;
  left: 50%;
  bottom: var(--shadowY);
  transform: translateX(-50%) translateY(var(--bookLift));
  width: var(--shadowW);
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.00) 70%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Book sizing */
.bookfx-hero-right .books__item{
  height: var(--bookH);
  transform: translateY(var(--bookLift));
  will-change: transform;
  z-index: 2;
}

.bookfx-hero-right .books__container{
  width: var(--bookW);
  height: 100%;
  position: relative;
}

.bookfx-hero-right .books__cover{
  height: 100%;
  position: relative;
}

/* Hitbox */
.bookfx-hero-right .books__hitbox{
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

/* Back cover (subtle) */
.bookfx-hero-right .books__back-cover{
  position: absolute;
  width: 96%;
  height: 96%;
  top: 2%;
  left: 2%;
  background: #111;
  border-radius: 0 7px 7px 0;
  /* constrained shadow so it won’t create top haze */
  box-shadow: 1px 3px 6px -4px rgba(0,0,0,0.14);
  z-index: -10;
}

/* Pages container */
.bookfx-hero-right .books__inside{
  position: absolute;
  width: 90%;
  height: 94%;
  top: 3%;
  left: 5%;
  z-index: 0;
}

/* Pages (nearly flat—avoid top rim) */
.bookfx-hero-right .books__page{
  position: absolute;
  top: 0;
  right: 0;
  width: 98%;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 0 7px 7px 0;
  box-shadow: 0 1px 2px -2px rgba(0,0,0,0.10);
  transform-origin: right center;
  z-index: -5;
}

/* Front cover image (THIS is the critical shadow tuning)
   - shadows are pushed DOWN/RIGHT
   - negative spread confines blur so it doesn't bloom upward
*/
.bookfx-hero-right .books__image{
  position: relative;
  height: 100%;
  line-height: 0;
  border-radius: 2px 7px 7px 2px;

  box-shadow:
    rgba(0,0,0,0.06)  10px 22px 22px -20px,
    rgba(0,0,0,0.09)  34px 30px 46px -30px;

  transform-origin: left center;
  will-change: transform, box-shadow;
  z-index: 10;

  /* reduce subpixel seams */
  overflow: hidden;
}

.bookfx-hero-right .books__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 7px 7px 2px;
  display: block;            /* important: removes faint top line/inline gaps */
  transform: translateZ(0);  /* helps with anti-alias edge artifacts */
}

/* Spine sheen */
.bookfx-hero-right .books__effect{
  position: absolute;
  width: 26px;
  height: 100%;
  margin-left: 14px;
  top: 0;
  border-left: 2px solid rgba(0,0,0,0.06);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.00) 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* Light wash (kept subtle to avoid top artifacts) */
.bookfx-hero-right .books__light{
  position: absolute;
  inset: 0;
  border-radius: 2px 7px 7px 2px;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.40) 100%
  );
  opacity: 0.10;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Mobile refinements */
@media (max-width: 576px){
  .bookfx-hero-right{
    min-height: 560px;
    --bookW: clamp(16rem, 58vw, 20rem);
    --bookH: clamp(24rem, 78vw, 30rem);
  }
  .bookfx-hero-right .bookfx-stage{
    height: 560px;
  }
}

/* =========================================================
   BOOKFX FINAL OVERRIDES — LEFT corners + LEFT spine groove
   Paste AFTER all existing BookFX CSS
========================================================= */

/* LEFT corners only (TL + BL). Keep right corners subtle. */
.hero-right.bookfx-hero-right .books__image{
  border-radius: 18px 8px 8px 18px !important;   /* TL TR BR BL */
  overflow: hidden !important;
}

.hero-right.bookfx-hero-right .books__image > img.img-fluid,
.hero-right.bookfx-hero-right .books__image > img{
  border-radius: 18px 8px 8px 18px !important;   /* TL TR BR BL */
  display: block !important;
}

/* Match overlays to same rounding */
.hero-right.bookfx-hero-right .books__light{
  border-radius: 18px 8px 8px 18px !important;
}

/* LEFT spine groove: anchor it to the left edge and make it readable */
.hero-right.bookfx-hero-right .books__effect{
  left: 0 !important;            /* anchor to LEFT edge */
  top: 0 !important;
  margin-left: 0 !important;     /* stop “drifting” logic */
  width: 44px !important;        /* wider = more visible */
  height: 100% !important;

  /* A spine “indent” that reads on light covers */
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.08) 14%,
    rgba(255,255,255,0.20) 40%,
    rgba(255,255,255,0.00) 100%
  ) !important;

  /* The actual crease line */
  border-right: 1px solid rgba(0,0,0,0.18) !important;
  border-left: 0 !important;

  /* Ensure it stays on top of the cover art */
  z-index: 30 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* =========================================================
   BOOKFX — soften LEFT spine crease (less pronounced)
   Paste AFTER the last override so it wins
========================================================= */

.hero-right.bookfx-hero-right .books__effect{
  width: 26px !important;                 /* was 44px */
  opacity: 0.55 !important;              /* soften the whole effect */
  border-right: 1px solid rgba(0,0,0,0.10) !important;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.05) 22%,
    rgba(255,255,255,0.12) 58%,
    rgba(255,255,255,0.00) 100%
  ) !important;

  box-shadow: inset 8px 0 10px rgba(0,0,0,0.06) !important; /* lighter groove */
}
/* Hide BookFX on tablet + phone */
@media (max-width: 991.98px){
  .hero-right.bookfx-hero-right{
    display: none !important;
  }
}

/* HERO CTA — add a little breathing room above the button */
#hero.hero-ember .hero-cta .btn-shimmer{
  margin-top: 1.4rem !important; /* tweak: 0.25–0.6rem */
}

/* =========================================================
   TEXT DROP — Make it bigger, less “stretchy”, more elegant
   Paste AFTER existing .text-drop styles
========================================================= */

/* 1) Constrain the copy column + better padding */
.text-drop .text-drop__copy{
  /* This is the big one: fixes “stretchy” by reducing line length */
  width: min(92vw, 52ch) !important;     /* try 48–58ch */
  margin-inline: auto !important;
  padding: clamp(1.2rem, 2.6vw, 2.2rem) !important;

  text-align: center;
  text-wrap: balance;                    /* makes centered lines feel designed */
  line-height: 1.5 !important;           /* less airy than 1.7 */
}

/* 2) Base type size bump (desktop-focused) */
@media (min-width: 992px){
  .text-drop .text-drop__copy{
    font-size: clamp(1.55rem, 1.25vw, 2.05rem) !important;
  }
}

/* 3) Lead / whisper / closer tuning */
.text-drop .text-drop__line{
  margin-bottom: 0.85em !important;      /* slightly more “poem spacing” */
}

.text-drop .text-drop__line--lead{
  font-size: clamp(2.05rem, 1.75vw, 2.9rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 1.1em !important;
}

.text-drop .text-drop__line--whisper{
  font-size: 1.05em !important;
  opacity: 0.92 !important;
  font-style: italic;                    /* whisper reads better */
}

.text-drop .text-drop__line--closer{
  font-size: 1.18em !important;
  line-height: 1.38 !important;
}

/* 4) Optional: give the copy panel a cleaner readable “glass” */
.text-drop .text-drop__copy{
  background: rgba(10, 12, 22, 0.35) !important;  /* subtle */
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35) !important;
}

/* =========================================================
   HERO — Fix “small desktop” (992–1440)
   Goals:
   - Lift the whole hero unit so CTA stays above the fold
   - Make BookFX cover larger on these desktops
   - Prevent the BookFX column from being unnecessarily tall
========================================================= */
@media (min-width: 992px) and (max-width: 1440px){

  /* 1) Reduce top/bottom padding a touch on this range */
  #hero.hero-ember .container{
    padding-top: clamp(4.1rem, 5.2vw, 5.1rem) !important;
    padding-bottom: clamp(3.25rem, 4.2vw, 4.25rem) !important;
  }

  /* 2) Lift the whole hero unit a bit more (keeps CTA above fold) */
  #hero.hero-ember .hero-layout{
    transform: translateX(clamp(14px, 2vw, 36px))
               translateY(clamp(-2.1rem, -3.2vw, -3.1rem)) !important;
  }

  /* 3) Make the BookFX column less tall and align it toward the top */
  .hero-right.bookfx-hero-right{
    min-height: clamp(30rem, 46vw, 44rem) !important; /* was clamp(40rem,60vw,54rem) */
    align-items: start !important;
    justify-items: center !important;
    padding-top: clamp(0.25rem, 1vw, 0.75rem) !important;
  }

  .hero-right.bookfx-hero-right .bookfx-stage{
    height: clamp(30rem, 46vw, 44rem) !important; /* match the column */
  }

  /* 4) Increase book size (so it doesn’t look tiny at 1366–1440) */
  .hero-right.bookfx-hero-right{
    --bookW: clamp(20rem, 28vw, 30rem) !important;  /* bigger than 24vw */
    --bookH: clamp(28rem, 38vw, 44rem) !important;  /* taller + more presence */

    /* 5) Lift the book up a bit more on these desktops */
    /* Move book DOWN a bit so the top never clips */
   /* Lift book UP a bit on small desktops (counteracts taller title card) */
--bookLift: -2.65rem !important;

    /* Keep shadow from feeling “too low” */
    --shadowY: clamp(3.5rem, 4.8vw, 5.5rem) !important;
    --shadowW: clamp(15rem, 22vw, 26rem) !important;
  }
}

@media (min-width: 1400px){
  #hero.hero-ember .hero-text-card .glass-panel .book-description.desktop-only{
    font-size: clamp(1.32rem, 1.25vw, 1.64rem) !important;
    line-height: 1.70 !important;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px){
  #hero.hero-ember .hero-text-card h1{
    font-size: clamp(3.2rem, 3.0vw, 4.0rem);
  }

  #hero.hero-ember .book-cover{
    max-width: 380px;
    transform: translateY(-12px) scale(1.02);
    transform-origin: top left;
  }

  /* NEW: lift BookFX book up on mid desktops */
  .hero-right.bookfx-hero-right{
    --bookLift: -5.25rem !important; /* try -5.0rem to be softer */
  }
}

/* =========================================================
   BOOKFX — Fix “1480px drop”
   Cause: after 1440px, BookFX column returns to place-items:center,
          so the book gets vertically centered in a tall column.
   Fix: keep BookFX aligned toward the top for 1441–1599.
   Paste at VERY END.
========================================================= */

@media (min-width: 1441px) and (max-width: 1599.98px){

  /* Keep the BookFX column from vertical-centering */
  .hero-right.bookfx-hero-right{
    place-items: start center !important;   /* was center */
    align-items: start !important;
    justify-items: center !important;

    /* tighten the column height a bit so "center" can't pull it down */
    min-height: clamp(32rem, 48vw, 46rem) !important;

    /* small top bias (safe, doesn’t affect other layouts) */
    padding-top: clamp(0.35rem, 1.2vw, 1.1rem) !important;

  --bookLift: -10.65rem !important;

  /* Make the stage match and also align to top */
  .hero-right.bookfx-hero-right .bookfx-stage{
    height: clamp(32rem, 48vw, 46rem) !important;
    place-items: start center !important;
  }
}