/* ===================== V63 HERO MARKER ROW WIDTH FIX ===================== */
@media (min-width: 769px) {
  .hero-contract {
    width: min(820px, 100%);
    max-width: 820px;
  }

  .hero-contract-promise {
    max-width: 760px;
  }

  .hero-contract-markers {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  .hero-contract-markers span {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 13px;
    padding-right: 13px;
    letter-spacing: 0.20em;
  }
}

@media (max-width: 768px) {
  .hero-contract {
    width: 100%;
  }

  .hero-contract-markers {
    flex-wrap: wrap;
  }
}


/* ===================== V64 HERO CONTRACT POSITION + HEAT BAR SCALE ===================== */
.hero-contract {
  margin-top: 8px;
}

@media (min-width: 769px) {
  .hero-contract {
    transform: translateY(-16px);
    margin-bottom: -8px;
  }

  .heat-row {
    width: min(820px, 100%);
    max-width: 820px;
    min-height: 62px;
    margin-top: 12px;
    padding: 0 28px;
    border-radius: 999px;
  }

  .heat-label {
    letter-spacing: 0.36em;
  }

  .heat-flames {
    gap: 8px;
  }

  .heat-flame {
    font-size: 17px;
  }

  .heat-note {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .hero-contract {
    margin-top: 6px;
  }

  .heat-row {
    width: 100%;
    max-width: 100%;
  }
}

/* ===================== V65 HERO LAYOUT REORDER =====================
   1) Removed top romance/author badge from markup.
   2) Moved author divider to the former badge position.
   3) Moved heat/intimacy row above the quote contract window.
*/
.hero-divider--top {
  margin: 0 0 28px;
  justify-content: flex-start;
}

.heat-row--above-contract {
  margin-top: 18px;
  margin-bottom: 18px;
}

@media (min-width: 769px) {
  .hero-divider--top {
    margin-bottom: 30px;
  }

  .heat-row--above-contract {
    margin-top: 12px;
    margin-bottom: 18px;
  }

  .hero-contract {
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  .hero-divider--top {
    margin: 0 0 18px;
    justify-content: center;
  }

  .heat-row--above-contract {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }
}


/* ===================== V67 HEAT CARD COMPACT RESTORE =====================
   Removed the oversized DESIRE SIGNAL module and restored the heat card to a
   compact premium audio-style surface. A small one-line intensity detail keeps
   the idea without increasing the card height.
*/
.heat-row--above-contract {
  width: min(760px, 100%);
  max-width: 760px;
  min-height: 0 !important;
  padding: 16px 24px !important;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.heat-row--above-contract .heat-label {
  flex: 0 0 auto;
}

.heat-row--above-contract .heat-flames {
  flex: 0 0 auto;
  margin-left: 0 !important;
}

.heat-row--above-contract .heat-note {
  flex: 0 0 auto;
  margin-left: 0 !important;
}

.heat-micro {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--ff-sans);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,217,168,0.58);
  padding: 7px 10px;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  box-shadow: inset 0 0 14px rgba(212,175,55,0.035);
  white-space: nowrap;
}

.heat-signal,
.heat-signal-kicker,
.heat-signal-value,
.heat-signal-line {
  display: none !important;
}

@media (max-width: 768px) {
  .heat-row--above-contract {
    width: min(92vw, 520px) !important;
    padding: 14px 16px !important;
    gap: 10px 12px !important;
    justify-content: flex-start !important;
  }

  .heat-row--above-contract .heat-label {
    width: 100%;
  }

  .heat-micro {
    margin-left: 0;
    font-size: 7px;
    letter-spacing: 0.22em;
    padding: 6px 9px;
  }
}

@media (max-width: 420px) {
  .heat-row--above-contract {
    padding: 13px 14px !important;
    gap: 9px !important;
  }

  .heat-row--above-contract .heat-flames {
    gap: 7px !important;
  }

  .heat-micro {
    width: auto;
    max-width: 100%;
  }
}


/* ===================== V68 FORCED PROXIMITY FULL-WIDTH + SPICE LABEL =====================
   Makes the fourth hero marker stretch across the full row for symmetry.
   RU version uses English label "Spice level" in the heat card.
*/
.hero-contract-markers {
  max-width: 760px;
}

@media (min-width: 769px) {
  .hero-contract-markers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px !important;
    width: 100%;
  }

  .hero-contract-markers span {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .hero-contract-markers span:nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .hero-contract-markers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-contract-markers span:nth-child(4) {
    flex-basis: min(100%, 310px);
    justify-content: center;
  }
}

/* ===================== V69 MOBILE STABILIZATION: HEAT / AUTHOR / PLAYLIST / FOOTER =====================
   Mobile-only repair pass based on device screenshots:
   1) Heat card no longer drifts to the right.
   2) Author block becomes a clean mobile dossier instead of a broken two-column layout.
   3) Playlist becomes a compact vertical soundtrack interface.
   4) Subscribe/footer stop overflowing horizontally and gain safe bottom spacing above audio dock.
*/
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  #hero,
  #author,
  #subscribe,
  footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 1. Compact spice/heat card alignment */
  #hero .heat-row,
  #hero .heat-row--above-contract {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 16px 14px !important;
    gap: 10px !important;
  }

  #hero .heat-label {
    width: 100% !important;
    text-align: center !important;
    letter-spacing: 0.32em !important;
    font-size: 9px !important;
  }

  #hero .heat-flames {
    justify-content: center !important;
    margin: 0 auto !important;
    gap: 9px !important;
  }

  #hero .heat-note {
    margin: 0 auto !important;
    text-align: center !important;
    letter-spacing: 0.22em !important;
  }

  #hero .heat-micro {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 2. Author: mobile dossier */
  #author {
    padding-top: 76px !important;
    padding-bottom: 86px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(212,175,55,0.07), transparent 36%),
      linear-gradient(180deg, rgba(10,8,6,0.98), rgba(4,3,3,1));
  }

  #author .author-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #author .author-left {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }

  #author .author-right {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 22px 18px !important;
    border: 1px solid rgba(212,175,55,0.20);
    border-radius: 26px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.00)),
      rgba(8,6,5,0.56);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 0 32px rgba(212,175,55,0.035),
      0 18px 46px rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #author .section-label {
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  #author .author-heading {
    font-size: clamp(38px, 13vw, 58px) !important;
    line-height: 0.98 !important;
    text-align: center !important;
    margin: 0 0 22px !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  #author .author-body {
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  #author .author-facts {
    margin-top: 24px !important;
  }

  #author .author-fact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
    padding: 14px 0 !important;
  }

  #author .af-label,
  #author .af-value {
    text-align: left !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  #author .author-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #author .author-gallery-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(212,175,55,0.38);
    box-shadow: 0 0 24px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
  }

  #author .author-gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
  }

  #author .author-quote {
    font-size: 22px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    padding: 24px 18px !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(212,175,55,0.22);
    border-bottom: 1px solid rgba(212,175,55,0.12);
    background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.06), transparent 70%);
  }

  #author .author-socials {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #author .author-social {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }


  /* 4. Subscribe and footer: prevent sideways drift */
  #subscribe {
    padding-top: 74px !important;
    padding-bottom: 88px !important;
  }

  #subscribe .subscribe-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  #subscribe .subscribe-title {
    font-size: clamp(42px, 15vw, 68px) !important;
    line-height: 1.04 !important;
  }

  #subscribe .subscribe-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #subscribe .subscribe-input,
  #subscribe .subscribe-submit {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  footer {
    padding: 54px 20px 150px !important;
  }

  footer .footer-top,
  footer .footer-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  footer .footer-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  footer .footer-links-col,
  footer .footer-link,
  footer .footer-logo-block {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  footer .footer-logo-name {
    font-size: 16px !important;
    letter-spacing: 0.26em !important;
  }

  footer .footer-lang {
    justify-content: flex-start !important;
  }

  .audio-dock {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    left: 18px !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }
}

@media (max-width: 420px) {
  #author .author-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  footer .footer-links-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===================== V70 HERO LOCK + HEAT + MARKER SHINE =====================
   1) Locks the book title as System Anomaly in RU/EN.
   2) Restores Spice level to 3/5: three flames on, two dimmed flames.
   3) Slightly enlarges the desktop 3D book.
   4) Removes the upper-left glow and top/bottom guide lines from the quote window.
   5) Adds subtle asynchronous gold glints inside the four marker plaques.
*/

/* Quote window: remove the warm glow and the top/bottom inner lines */
.hero-contract {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.010)),
    rgba(8, 6, 5, 0.34) !important;
}
.hero-contract::before,
.hero-contract::after {
  display: none !important;
}

/* Spice level: inactive icons are still flames, but visually extinguished */
.heat-flame::before {
  content: '🔥' !important;
  opacity: 0.22 !important;
  filter: grayscale(1) brightness(0.45) contrast(0.85) !important;
}
.heat-flame:not(.on) {
  border-color: rgba(212,180,106,0.12) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.015), rgba(8,7,7,0.84) 72%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}
.heat-flame.on::before {
  content: '🔥' !important;
  opacity: 0.96 !important;
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.30)) !important;
}

/* Desktop book scale: a little larger, mobile remains untouched */
@media (min-width: 769px) {
  .interactive-book .stage {
    width: 430px !important;
    height: 370px !important;
  }
  .interactive-book .book-closed {
    width: clamp(185px, 16vw, 235px) !important;
  }
}

/* Living gold glints inside the four hero markers.
   Background remains the same; this only adds moving metallic highlights. */
.hero-contract-markers span {
  --shine-x: -135%;
}
.hero-contract-markers span::after {
  background:
    linear-gradient(105deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 239, 184, 0.00) 42%,
      rgba(255, 239, 184, 0.34) 48%,
      rgba(212, 175, 55, 0.18) 52%,
      rgba(255, 248, 220, 0.00) 60%,
      transparent 100%),
    radial-gradient(circle at 50% 0%, rgba(255,245,220,0.09), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%) !important;
  background-size: 230% 100%, 100% 100%, 100% 100% !important;
  background-position: var(--shine-x) 0, center, center !important;
  animation: heroMarkerGoldGlint 5.8s ease-in-out infinite;
}
.hero-contract-markers span:nth-child(1)::after { animation-duration: 6.4s; animation-delay: -0.8s; }
.hero-contract-markers span:nth-child(2)::after { animation-duration: 5.2s; animation-delay: -2.6s; }
.hero-contract-markers span:nth-child(3)::after { animation-duration: 7.1s; animation-delay: -1.4s; }
.hero-contract-markers span:nth-child(4)::after { animation-duration: 6.0s; animation-delay: -3.3s; }

@keyframes heroMarkerGoldGlint {
  0%, 18% { --shine-x: -135%; opacity: 0.78; }
  38% { --shine-x: 125%; opacity: 1; }
  39%, 100% { --shine-x: 125%; opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-contract-markers span::after {
    animation: none !important;
    background-position: center !important;
  }
}

/* === v71 — Gothic Modern + Elegant Serif title lock ===
   Only the hero book title typography is changed. Text remains locked as: System Anomaly. */
#hero .hero-title {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  line-height: 0.92 !important;
  text-transform: none !important;
  color: #F4E8BC !important;
  text-shadow:
    0 1px 0 rgba(255,248,220,0.22),
    0 0 18px rgba(212,175,55,0.12),
    0 0 42px rgba(0,0,0,0.42) !important;
}

#hero .hero-title em {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  color: #D4AF37 !important;
  text-shadow:
    0 1px 0 rgba(255,248,220,0.16),
    0 0 18px rgba(212,175,55,0.18),
    0 0 38px rgba(196,138,94,0.12) !important;
}

@media (min-width: 769px) {
  #hero .hero-title {
    font-size: clamp(78px, 7vw, 128px) !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-title {
    font-size: clamp(54px, 16vw, 76px) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.005em !important;
  }

  #hero .hero-title em {
    letter-spacing: -0.035em !important;
  }
}

/* ===================== V72 — Gothic Modern Hero Typography + Cinematic Micro-Effects ===================== */
/* Title: Gothic Modern + Elegant Serif. The text is locked as System Anomaly. */
#hero .hero-title{
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: .88 !important;
  color: #f5e9bd !important;
  text-shadow:
    0 1px 0 rgba(255, 250, 221, .28),
    0 0 18px rgba(232, 217, 168, .10),
    0 0 42px rgba(212, 175, 55, .08),
    1px 0 0 rgba(156, 47, 47, .10),
    -1px 0 0 rgba(212, 175, 55, .08) !important;
  filter: contrast(1.04);
  transform: translateZ(0) skewX(-1.2deg);
  animation: hFadeUp .9s .3s forwards, titleInkBreathe 7.5s ease-in-out infinite !important;
}

#hero .hero-title em{
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.035em !important;
  color: #d7b928 !important;
  transform: translateX(.05em) skewX(-3deg);
  text-shadow:
    0 1px 0 rgba(255, 249, 216, .18),
    0 0 20px rgba(212, 175, 55, .20),
    0 0 44px rgba(196, 138, 94, .13) !important;
}

#hero .hero-title:hover{
  animation: titleGlitch .78s steps(2, end), titleInkBreathe 7.5s ease-in-out infinite !important;
}

@keyframes titleInkBreathe{
  0%,100%{
    text-shadow:
      0 1px 0 rgba(255, 250, 221, .26),
      0 0 16px rgba(232, 217, 168, .09),
      0 0 36px rgba(212, 175, 55, .06),
      1px 0 0 rgba(156, 47, 47, .08),
      -1px 0 0 rgba(212, 175, 55, .06);
  }
  50%{
    text-shadow:
      0 1px 0 rgba(255, 250, 221, .34),
      0 0 24px rgba(232, 217, 168, .14),
      0 0 54px rgba(212, 175, 55, .11),
      1.5px 0 0 rgba(156, 47, 47, .12),
      -1.5px 0 0 rgba(212, 175, 55, .10);
  }
}

@keyframes titleGlitch{
  0%{ transform: translate(0,0) skewX(-1.2deg); filter: contrast(1.04); }
  14%{ transform: translate(-1px,.5px) skewX(-2.4deg); filter: contrast(1.12) saturate(1.05); }
  28%{ transform: translate(1px,-.5px) skewX(.8deg); }
  42%{ transform: translate(-.5px,0) skewX(-3deg); }
  56%{ transform: translate(1.5px,.3px) skewX(-.6deg); }
  70%,100%{ transform: translate(0,0) skewX(-1.2deg); filter: contrast(1.04); }
}

/* Hero subtitle/citation typography: elegant high-contrast serif */
#hero .hero-contract-quote,
#hero .hero-tagline{
  font-family: 'Cormorant Garamond', 'Crimson Text', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
  text-rendering: geometricPrecision;
}

#hero .hero-contract-promise,
#hero .heat-row,
#hero .hero-contract-markers span{
  font-family: 'Inter', 'Aeonik', 'Söhne', system-ui, sans-serif !important;
}

/* Film grain + vignette around the hero, below content */
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.26) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 22%, transparent 78%, rgba(0,0,0,.34));
  mix-blend-mode:multiply;
}

#hero::after{
  content:'';
  position:absolute;
  inset:-10%;
  z-index:3;
  pointer-events:none;
  opacity:.115;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(232,217,168,.20) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 44%, rgba(232,217,168,.14) 0 1px, transparent 1.6px),
    radial-gradient(circle at 36% 82%, rgba(212,175,55,.12) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 58%, rgba(232,217,168,.08) 60%, transparent 66%);
  background-size: 220px 220px, 260px 260px, 180px 180px, 100% 100%;
  animation: heroDustDrift 16s linear infinite;
}

@keyframes heroDustDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-34px,-48px,0); }
}

/* Parchment/grain tactile layer for text panels without changing their design */
#hero .hero-contract,
.about-experience,
.case-file-copy,
.case-quote-card{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    radial-gradient(circle at 15% 0%, rgba(212,175,55,0.055), transparent 38%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23paper)' opacity='.24'/%3E%3C/svg%3E") !important;
  background-blend-mode: screen, normal, soft-light !important;
  background-size: auto, auto, 180px 180px !important;
}

/* Remove inner top/bottom contract lines cleanly */
#hero .hero-contract::before,
#hero .hero-contract::after{
  display:none !important;
}

/* Subtle glitch + ink bleed on hover for book and premium controls */
#hero .book-closed,
#hero .ctrl-btn,
#hero .hero-contract-markers span,
#hero .nav-cta{
  will-change: transform, filter;
}

#hero .book-closed:hover,
#hero .hero-contract-markers span:hover,
#hero .nav-cta:hover{
  filter:
    drop-shadow(0 0 12px rgba(212,175,55,.16))
    contrast(1.04) saturate(1.03);
  animation: inkBleedHover 1.2s ease-in-out both;
}

@keyframes inkBleedHover{
  0%,100%{ text-shadow: 0 0 0 transparent; }
  35%{ text-shadow: .7px 0 rgba(212,175,55,.20), -.7px 0 rgba(156,47,47,.14); }
  58%{ text-shadow: -.8px 0 rgba(212,175,55,.16), .8px 0 rgba(156,47,47,.10); }
}

/* Floating book + scroll parallax support */
#hero .interactive-book{
  --book-scroll-y: 0px;
  --book-scroll-rot: 0deg;
  transform: translate3d(0, var(--book-scroll-y), 0) rotate(var(--book-scroll-rot));
  transition: transform .22s ease-out;
}

#hero .book-closed{
  width: 190px !important;
}

@media (min-width: 900px){
  #hero .stage{
    width: 520px !important;
    height: 455px !important;
  }
  #hero .book-closed{
    width: 205px !important;
  }
  #hero .spread{
    width: 500px !important;
    height: 370px !important;
  }
}

/* Living gold shimmer inside the four marker plaques — random-feeling offsets */
#hero .hero-contract-markers span{
  overflow:hidden;
}
#hero .hero-contract-markers span::before{
  opacity:.78 !important;
}
#hero .hero-contract-markers span::after{
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(255,244,202,.00) 37%,
      rgba(255,238,177,.32) 45%,
      rgba(212,175,55,.10) 51%,
      transparent 62%,
      transparent 100%),
    radial-gradient(circle at 50% 0%, rgba(255,245,220,0.10), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 38%) !important;
  background-size: 210% 100%, auto, auto !important;
  animation: markerGoldSweep 4.8s ease-in-out infinite;
  opacity:.74;
}
#hero .hero-contract-markers span:nth-child(1)::after{ animation-duration: 4.9s; animation-delay: -.7s; }
#hero .hero-contract-markers span:nth-child(2)::after{ animation-duration: 5.6s; animation-delay: -2.1s; }
#hero .hero-contract-markers span:nth-child(3)::after{ animation-duration: 4.3s; animation-delay: -1.4s; }
#hero .hero-contract-markers span:nth-child(4)::after{ animation-duration: 6.2s; animation-delay: -3.2s; }

@keyframes markerGoldSweep{
  0%{ background-position: -160% 0, center, center; opacity:.38; }
  37%{ opacity:.82; }
  54%{ background-position: 140% 0, center, center; opacity:.68; }
  100%{ background-position: 160% 0, center, center; opacity:.38; }
}

/* Spice level remains 3/5: two off flames look like extinguished fire icons, not drops. */
#hero .heat-flame:not(.on){
  filter: grayscale(1) opacity(.24) brightness(.55) !important;
  transform: scale(.92);
}
#hero .heat-flame.on{
  filter: none !important;
}

@media (max-width: 768px){
  #hero .hero-title{
    font-size: clamp(54px, 17vw, 80px) !important;
    letter-spacing: -0.055em !important;
  }
  #hero .hero-title em{
    letter-spacing: -0.04em !important;
  }
  #hero::after{
    opacity:.075;
  }
  #hero .book-closed{
    width: 165px !important;
  }
}

/* ===================== V73 HERO LUXURY GOLD REFINEMENT =====================
   1) RU hero title locked to «Аномалия Системы», EN title locked to System Anomaly.
   2) Premium dark-luxury gold title treatment.
   3) Spice row restored visually to 3/5 and reshaped closer to the audio panel.
   4) Desktop 3D book slightly enlarged + premium back glow on hover.
   5) Quote window cleaned from upper-left warm glow and guide lines.
   6) Marker plaques reworked into slower molten-gold ingot shimmer.
*/

/* Premium dark-luxury gold book title */
#hero .hero-title{
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.90 !important;
  transform: none !important;
  filter: none !important;
  color: #f3e7b3 !important;
  background: linear-gradient(180deg,
    #fbf5d8 0%,
    #f3e4b2 18%,
    #e1c875 44%,
    #c4942f 68%,
    #f7ebbe 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,248,223,0.22),
    0 10px 26px rgba(0,0,0,0.30),
    0 0 20px rgba(212,175,55,0.14) !important;
  animation: titleLuxuryPulse 8.8s ease-in-out infinite !important;
}
#hero .hero-title em{
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg,
    #fff6d8 0%,
    #f1dd98 20%,
    #d7b54a 45%,
    #a97016 80%,
    #f8ebbe 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,249,229,0.18),
    0 0 16px rgba(212,175,55,0.20),
    0 10px 26px rgba(0,0,0,0.22) !important;
}
@keyframes titleLuxuryPulse{
  0%,100%{
    text-shadow: 0 1px 0 rgba(255,248,223,0.22), 0 10px 26px rgba(0,0,0,0.30), 0 0 20px rgba(212,175,55,0.12);
  }
  50%{
    text-shadow: 0 1px 0 rgba(255,248,223,0.28), 0 12px 30px rgba(0,0,0,0.32), 0 0 28px rgba(212,175,55,0.20);
  }
}
@media (min-width: 769px){
  #hero .hero-title{ font-size: clamp(84px, 7.3vw, 134px) !important; }
}
@media (max-width: 768px){
  #hero .hero-title{ font-size: clamp(54px, 16vw, 78px) !important; letter-spacing: -0.04em !important; }
}

/* Spice row: slightly lower, smaller, and with squarer audio-panel corners */
#hero .heat-row,
#hero .heat-row--above-contract{
  width: min(700px, 100%) !important;
  max-width: 700px !important;
  margin-top: 24px !important;
  margin-bottom: 18px !important;
  padding: 13px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, rgba(9,7,6,0.98), rgba(4,3,3,0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -12px 24px rgba(0,0,0,0.22),
    0 14px 40px rgba(0,0,0,0.18) !important;
  gap: 16px !important;
}
#hero .heat-label,
#hero .heat-note{ white-space: nowrap; }
#hero .heat-micro{
  border-radius: 14px !important;
  padding: 8px 12px !important;
  background:
    linear-gradient(180deg, rgba(28,22,12,0.56), rgba(10,8,6,0.72)) !important;
}
@media (max-width: 768px){
  #hero .heat-row,
  #hero .heat-row--above-contract{
    width: min(92vw, 560px) !important;
    margin-top: 18px !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
    gap: 10px 12px !important;
  }
  #hero .heat-micro{ margin-left: 0 !important; }
}

/* Force 3/5 visual state: render all flames via pseudo element so the last two stay dimmed */
#hero .heat-flame{
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative;
}
#hero .heat-flame::before{
  content: '🔥' !important;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  opacity: 0.18 !important;
  transform: scale(0.96);
  filter: grayscale(1) saturate(0) brightness(0.48) contrast(0.88) !important;
}
#hero .heat-flame.on::before{
  opacity: 1 !important;
  transform: scale(1);
  filter: drop-shadow(0 0 5px rgba(255,221,126,0.22)) drop-shadow(0 0 10px rgba(212,175,55,0.18)) !important;
}
#hero .heat-flame:not(.on){
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.015), rgba(8,7,7,0.86) 72%) !important;
  border-color: rgba(212,180,106,0.10) !important;
}

/* Quote window: no upper-left glow, no top/bottom guide lines */
#hero .hero-contract{
  margin-top: 8px !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.038), rgba(255,255,255,0.010)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23grain)' opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(10,8,7,0.52), rgba(8,6,5,0.40)) !important;
  background-size: auto, 190px 190px, auto !important;
  background-blend-mode: screen, soft-light, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 48px rgba(0,0,0,0.16) !important;
}
#hero .hero-contract::before,
#hero .hero-contract::after{
  display: none !important;
}

/* Marker plaques: slower molten-gold ingot shimmer, more realistic and less flashy */
#hero .hero-contract-markers span{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11,9,8,0.88), rgba(4,3,3,0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -8px 18px rgba(0,0,0,0.26),
    0 4px 12px rgba(0,0,0,0.12) !important;
}
#hero .hero-contract-markers span::before{
  content:'' !important;
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0) 40%),
    radial-gradient(circle at 18% 28%, rgba(255,244,210,0.08), transparent 34%),
    linear-gradient(180deg, rgba(196,140,46,0.05), transparent 68%) !important;
  pointer-events:none;
}
#hero .hero-contract-markers span::after{
  content:'' !important;
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 34%,
      rgba(255,244,198,0.00) 42%,
      rgba(255,241,191,0.18) 48%,
      rgba(212,175,55,0.16) 54%,
      rgba(255,244,198,0.00) 62%,
      transparent 70%,
      transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  background-size: 220% 100%, 100% 100% !important;
  background-position: -140% 0, center !important;
  animation: markerIngotFlow 10.5s ease-in-out infinite;
}
#hero .hero-contract-markers span:nth-child(1)::after{ animation-duration: 10.8s; animation-delay: -.8s; }
#hero .hero-contract-markers span:nth-child(2)::after{ animation-duration: 12.2s; animation-delay: -3.4s; }
#hero .hero-contract-markers span:nth-child(3)::after{ animation-duration: 9.6s; animation-delay: -1.9s; }
#hero .hero-contract-markers span:nth-child(4)::after{ animation-duration: 11.6s; animation-delay: -5.1s; }
@keyframes markerIngotFlow{
  0%, 100%{ background-position: -155% 0, center; opacity: .38; }
  45%{ opacity: .56; }
  60%{ background-position: 140% 0, center; opacity: .50; }
}

/* Desktop 3D book: slightly larger */
@media (min-width: 769px){
  .interactive-book .stage{
    width: 470px !important;
    height: 400px !important;
  }
  .interactive-book .book-closed{
    width: clamp(205px, 18vw, 255px) !important;
  }
  .interactive-book .spread{
    width: 360px !important;
    height: 265px !important;
  }
}

/* v74 — mobile hero reorder: quote below title, spice level below quote */
@media (max-width: 768px) {
  #hero .hero-left {
    display: flex !important;
    flex-direction: column !important;
  }

  #hero .hero-divider--top {
    order: 1 !important;
  }

  #hero .hero-title {
    order: 2 !important;
  }

  #hero .hero-contract {
    order: 3 !important;
    margin-top: 18px !important;
  }

  #hero .heat-row,
  #hero .heat-row--above-contract {
    order: 4 !important;
    margin-top: 18px !important;
  }
}


/* ===================== v75 — hero title luxury calligraphy + immersive characters ===================== */
/* Remove prior glitch/distortion effects from hero title and restyle into premium luxury calligraphy */
#hero .hero-title,
#hero .hero-title:hover{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  line-height: 0.90 !important;
  color: #f5e7c2 !important;
  text-shadow:
    0 1px 0 rgba(255,250,230,0.18),
    0 0 20px rgba(212,175,55,0.08),
    0 0 42px rgba(0,0,0,0.24) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

#hero .hero-title em{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: -0.03em !important;
  color: #d8b35a !important;
  text-shadow:
    0 1px 0 rgba(255,248,220,0.14),
    0 0 18px rgba(212,175,55,0.12) !important;
  transform: none !important;
  animation: none !important;
}

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

/* New immersive characters block */
.cast-section{
  position: relative;
  padding: 110px 0 42px;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,175,55,0.09), transparent 24%),
    radial-gradient(circle at 84% 0%, rgba(196,138,94,0.08), transparent 28%),
    linear-gradient(180deg, rgba(10,8,6,0.98) 0%, rgba(12,9,7,0.98) 100%);
}
.cast-shell{
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 38px;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(22,17,13,0.86), rgba(10,8,6,0.90)),
    radial-gradient(circle at top, rgba(255,255,255,0.035), transparent 54%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 28px 70px rgba(0,0,0,0.30);
  overflow: hidden;
}
.cast-shell::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:33px;
  pointer-events:none;
}
.cast-header{
  display:grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 22px 36px;
  align-items:end;
  margin-bottom: 34px;
}
.cast-kicker{
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.cast-title{
  font-family: var(--ff-serif);
  font-size: clamp(42px, 5.1vw, 76px);
  line-height: 0.95;
  font-weight: 400;
  color: var(--gold-light);
}
.cast-title em{
  display:block;
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}
.cast-desc{
  max-width: 680px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(248,241,227,0.80);
}
.cast-stage{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 28px;
  align-items: stretch;
}
.cast-stage-top{
  display:grid;
  grid-template-columns: minmax(0,1fr) 190px minmax(0,1fr);
  gap: 20px;
  align-items:center;
}
.cast-lead{
  position:relative;
  min-height: 510px;
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(212,175,55,0.22);
  background: #120e0b;
  cursor:pointer;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cast-lead:hover,
.cast-support-card:hover{
  transform: translateY(-6px);
  border-color: rgba(232,217,168,0.46);
  box-shadow: 0 18px 48px rgba(0,0,0,0.28), 0 0 40px rgba(212,175,55,0.10);
}
.cast-lead-image,
.cast-support-image{ position:absolute; inset:0; }
.cast-lead-image img,
.cast-support-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.cast-lead-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,8,6,0.12) 0%, rgba(9,8,6,0.34) 42%, rgba(9,8,6,0.88) 100%),
    radial-gradient(circle at 50% 10%, rgba(212,175,55,0.22), transparent 34%);
}
.cast-lead-copy{
  position:absolute;
  left:24px; right:24px; bottom:24px;
  z-index:2;
}
.cast-lead-role,
.cast-support-index,
.cast-console-code,
.cast-support-kicker,
.cast-axis-kicker{
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.cast-lead-name{
  margin: 8px 0 8px;
  font-family: var(--ff-serif);
  font-size: 34px;
  line-height: 0.96;
  font-weight: 400;
  color: var(--gold-light);
}
.cast-lead-arch{ font-family: var(--ff-sans); font-size: 12px; letter-spacing:0.20em; text-transform: uppercase; color: rgba(248,241,227,0.72); }
.cast-lead-line{ margin-top: 14px; font-size: 16px; line-height: 1.55; color: rgba(248,241,227,0.82); }
.cast-axis{
  position:relative;
  align-self:center;
  text-align:center;
  padding: 18px 10px;
}
.cast-axis-line{
  height: 1px;
  margin: 16px auto;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.65), transparent);
  position:relative;
}
.cast-axis-line::before,
.cast-axis-line::after{
  content:'';
  position:absolute;
  top:50%; width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%; background: rgba(232,217,168,0.86); box-shadow:0 0 18px rgba(232,217,168,0.34);
}
.cast-axis-line::before{ left: 18px; }
.cast-axis-line::after{ right: 18px; }
.cast-axis-title{
  font-family: var(--ff-serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--gold-light);
}
.cast-axis-title span{ display:block; font-size: 18px; font-style: italic; color: var(--gold-dark); margin: 4px 0; }
.cast-axis-copy{ margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(248,241,227,0.72); }
.cast-console{
  border-radius: 28px;
  border: 1px solid rgba(212,175,55,0.18);
  padding: 26px 24px;
  background:
    linear-gradient(180deg, rgba(18,14,11,0.96), rgba(11,9,7,0.98)),
    radial-gradient(circle at top left, rgba(212,175,55,0.08), transparent 36%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.cast-console-role{
  margin-top: 16px;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.cast-console-name{
  margin: 12px 0 8px;
  font-family: var(--ff-serif);
  font-size: 34px;
  line-height: 0.98;
  font-weight: 400;
  color: var(--gold-light);
}
.cast-console-arch{ font-family: var(--ff-sans); font-size: 12px; letter-spacing:0.2em; text-transform:uppercase; color: rgba(248,241,227,0.76); }
.cast-console-line{
  margin-top: 18px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--gold-light);
}
.cast-console-insight{
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(248,241,227,0.78);
}
.cast-console-hint{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(212,175,55,0.16);
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,241,227,0.54);
  line-height: 1.7;
}
.cast-support{
  margin-top: 28px;
  border-top: 1px solid rgba(212,175,55,0.12);
  padding-top: 24px;
}
.cast-support-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 24px;
  margin-bottom: 18px;
}
.cast-support-copy{ max-width: 720px; font-size: 16px; line-height: 1.7; color: rgba(248,241,227,0.74); }
.cast-support-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.cast-support-card{
  position:relative;
  min-height: 260px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(212,175,55,0.18);
  background: #120e0b;
  cursor:pointer;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cast-support-card::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(9,8,6,0.12), rgba(9,8,6,0.78));
}
.cast-support-copybox{
  position:absolute;
  left:16px; right:16px; bottom:16px; z-index:2;
}
.cast-support-copybox h4{
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: var(--gold-light);
}
.cast-support-copybox p{
  margin-top: 8px;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,241,227,0.68);
}
.cast-lead:focus-visible,
.cast-support-card:focus-visible{
  outline: 2px solid rgba(232,217,168,0.72);
  outline-offset: 3px;
}
@media (max-width: 1100px){
  .cast-stage{ grid-template-columns: 1fr; }
  .cast-stage-top{ grid-template-columns: minmax(0,1fr) 140px minmax(0,1fr); }
  .cast-support-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .cast-section{ padding: 84px 0 26px; }
  .cast-shell{ width:min(100% - 24px, 100%); padding: 24px 18px; border-radius: 28px; }
  .cast-header{ grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
  .cast-title{ font-size: clamp(34px, 11vw, 56px); }
  .cast-desc{ font-size: 15px; line-height: 1.72; }
  .cast-stage-top{ grid-template-columns: 1fr; gap: 16px; }
  .cast-axis{ order: 2; padding: 8px 0; }
  .cast-lead{ min-height: 360px; }
  .cast-lead-copy{ left:18px; right:18px; bottom:18px; }
  .cast-lead-name{ font-size: 28px; }
  .cast-console{ padding: 20px 18px; border-radius: 24px; }
  .cast-console-name{ font-size: 28px; }
  .cast-console-line{ font-size: 21px; }
  .cast-support-head{ display:block; }
  .cast-support-copy{ margin-top: 10px; font-size: 14px; }
  .cast-support-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cast-support-card{ min-height: 210px; border-radius: 18px; }
  .cast-support-copybox h4{ font-size: 18px; }
}
@media (max-width: 560px){
  .cast-support-grid{ grid-template-columns: 1fr 1fr; }
}


/* ===================== v76 — hero title restore + mobile book tap fix ===================== */
#hero .hero-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative;
  z-index:5;
}

/* The mobile book must remain tappable. Override earlier pointer-event locks. */
#hero .hero-right,
#hero .interactive-book,
#hero .interactive-book .scene,
#hero .interactive-book .levitate,
#hero .interactive-book .stage,
#hero .interactive-book .spread,
#hero .interactive-book .book-closed,
#hero .interactive-book .base-page,
#hero .interactive-book .flip-wrapper,
#hero .interactive-book .flip-page,
#hero .interactive-book .flip-face{
  pointer-events:auto !important;
}

#hero .interactive-book,
#hero .interactive-book .stage,
#hero .interactive-book .book-closed,
#hero .interactive-book .base-page,
#hero .interactive-book .spread{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px){
  #hero .hero-right{
    z-index: 9 !important;
  }

  #hero .interactive-book .book-closed{
    cursor:pointer;
  }
}

/* ===================== v78 — Hero CSS Consolidation =====================
   Final additive pass over v76. No rollback: only hero/book/mobile overrides.
   1) Book clickability lock.
   2) Mobile nav-to-book gap tightened to 16–28px.
   3) Luxury calligraphic title, clean quote-box, 3/5 spice state,
      slow marker shimmer, desktop Forced Proximity full-width, mobile no overflow.
*/

/* 1) Book clickability lock — exact requested scope. */
#hero .hero-right,
#hero .interactive-book,
#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page {
  pointer-events: auto !important;
}

#hero .interactive-book,
#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page,
#hero .flip-wrapper,
#hero .flip-page,
#hero .flip-face {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 3) Premium title: expensive calligraphic serif, thin gold, soft dark luxury glow. */
#hero .hero-title,
#hero .hero-title:hover {
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
  line-height: 0.90 !important;
  color: #f6e9c3 !important;
  background: linear-gradient(180deg,
    #fff7dc 0%,
    #f1dfaa 24%,
    #d4af37 54%,
    #b78322 76%,
    #f8edc8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,250,232,0.18),
    0 0 16px rgba(212,175,55,0.10),
    0 10px 34px rgba(0,0,0,0.42) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

#hero .hero-title em {
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  color: #d6b456 !important;
  background: linear-gradient(180deg,
    #fff4d3 0%,
    #ead38b 24%,
    #d0a83b 56%,
    #a86e17 82%,
    #f7e9bf 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,248,225,0.14),
    0 0 14px rgba(212,175,55,0.13),
    0 9px 28px rgba(0,0,0,0.35) !important;
  transform: none !important;
  animation: none !important;
}

/* Quote-box: clean dark glass, thin gold border only; no extra lines/glow. */
#hero .hero-contract {
  width: min(700px, 100%) !important;
  max-width: 700px !important;
  border: 1px solid rgba(212,175,55,0.24) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0.010)),
    linear-gradient(135deg, rgba(15,12,10,0.72), rgba(6,5,5,0.78)) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0.010)),
    linear-gradient(135deg, rgba(15,12,10,0.72), rgba(6,5,5,0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 0 0 1px rgba(255,244,210,0.025),
    0 18px 42px rgba(0,0,0,0.20) !important;
  overflow: hidden !important;
}

#hero .hero-contract::before,
#hero .hero-contract::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Spice level lock: 3 active flames, 2 muted flames. */
#hero .heat-flame {
  position: relative !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
}

#hero .heat-flame::before {
  content: '🔥' !important;
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 0.20 !important;
  filter: grayscale(1) saturate(0) brightness(0.50) contrast(0.90) !important;
  transform: scale(0.92) !important;
}

#hero .heat-flame.on::before {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 4px rgba(255,222,133,0.30))
    drop-shadow(0 0 10px rgba(212,175,55,0.20)) !important;
  transform: scale(1) !important;
}

/* Genre/intensity plaques: slow metallic shimmer, low opacity, different delays, no flashing. */
#hero .hero-contract-markers {
  width: 100% !important;
  max-width: 100% !important;
}

#hero .hero-contract-markers span {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.010)),
    linear-gradient(180deg, rgba(14,11,9,0.92), rgba(5,4,4,0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.070),
    inset 0 -9px 18px rgba(0,0,0,0.22),
    0 4px 12px rgba(0,0,0,0.12) !important;
}

#hero .hero-contract-markers span::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,244,210,0.055), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 48%) !important;
  pointer-events: none !important;
}

#hero .hero-contract-markers span::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 36%,
      rgba(255,241,194,0.00) 44%,
      rgba(255,235,170,0.16) 50%,
      rgba(212,175,55,0.12) 55%,
      rgba(255,241,194,0.00) 64%,
      transparent 100%) !important;
  background-size: 240% 100% !important;
  background-position: -155% 0 !important;
  animation: v78MarkerMetalShimmer 13.5s ease-in-out infinite !important;
}

#hero .hero-contract-markers span:nth-child(1)::after { animation-duration: 14.8s !important; animation-delay: -1.2s !important; }
#hero .hero-contract-markers span:nth-child(2)::after { animation-duration: 16.4s !important; animation-delay: -4.6s !important; }
#hero .hero-contract-markers span:nth-child(3)::after { animation-duration: 13.2s !important; animation-delay: -2.8s !important; }
#hero .hero-contract-markers span:nth-child(4)::after { animation-duration: 17.6s !important; animation-delay: -6.4s !important; }

@keyframes v78MarkerMetalShimmer {
  0%, 24% { background-position: -155% 0; opacity: 0.22; }
  54% { background-position: 142% 0; opacity: 0.38; }
  100% { background-position: 155% 0; opacity: 0.22; }
}

/* Desktop: Forced Proximity full-width in the marker grid. */
@media (min-width: 769px) {
  #hero .hero-contract-markers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #hero .hero-contract-markers span:nth-child(4) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* 2) Mobile: book-first layout, 16–28px visual gap after nav, no horizontal overflow. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 72px !important;
    overflow-x: hidden !important;
  }

  #hero .hero-right {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 18px auto 12px !important;
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 12 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    pointer-events: auto !important;
  }

  #hero .hero-left {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #hero .hero-title {
    font-size: clamp(48px, 15.2vw, 72px) !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  #hero .hero-contract,
  #hero .heat-row,
  #hero .heat-row--above-contract {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero .hero-contract-markers {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  #hero .hero-contract-markers span {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #hero .hero-contract-markers span:nth-child(4) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: 96px !important;
    padding-bottom: 64px !important;
  }

  #hero .hero-right {
    margin-top: 16px !important;
    margin-bottom: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #hero .hero-left {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #hero .hero-contract {
    border-radius: 20px !important;
  }

  #hero .hero-contract-markers {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-contract-markers span::after {
    animation: none !important;
    opacity: 0.24 !important;
  }
}

/* =========================================================
   v79 — Mobile Luxury Navigation Pass
   Scope: mobile nav only. Desktop nav and hero remain intact.
   ========================================================= */
.mobile-menu-toggle,
.mobile-nav-backdrop,
.mobile-nav-sheet {
  display: none;
}

@media (max-width: 768px) {
  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .nav-shell {
    z-index: 520 !important;
  }

  .nav-shell nav {
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 10px 0 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    overflow: hidden !important;
  }

  .nav-left {
    min-width: 0 !important;
    width: 100% !important;
  }

  .nav-logo-name {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(10px, 2.9vw, 12px) !important;
    letter-spacing: 0.18em !important;
    max-width: 100% !important;
  }

  .nav-logo-sub {
    font-size: clamp(6px, 1.7vw, 7px) !important;
    letter-spacing: 0.14em !important;
    opacity: 0.72 !important;
  }

  .nav-links {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    justify-content: center !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .nav-links > a {
    display: none !important;
  }

  .nav-lang {
    display: inline-flex !important;
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(32,26,22,0.88), rgba(6,5,5,0.96)) !important;
    border: 1px solid rgba(226,194,105,0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,245,214,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.7),
      0 0 18px rgba(212,175,55,0.10) !important;
  }

  .nav-lang .footer-lang-btn {
    display: none !important;
  }

  .nav-lang .footer-lang-btn.active {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid rgba(226,194,105,0.48);
    background:
      radial-gradient(circle at 30% 15%, rgba(255,246,210,0.12), transparent 38%),
      linear-gradient(180deg, rgba(35,29,24,0.92), rgba(7,6,6,0.97));
    box-shadow:
      inset 0 1px 0 rgba(255,245,214,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.78),
      0 0 22px rgba(212,175,55,0.13);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-toggle::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 0%, rgba(255,232,166,0.18) 42%, transparent 72%);
    opacity: 0.35;
    pointer-events: none;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 17px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,246,214,0.95), rgba(212,175,55,0.85));
    box-shadow: 0 0 8px rgba(212,175,55,0.24);
    transition: transform 0.24s ease, opacity 0.24s ease;
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(42deg);
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-42deg);
  }

  .nav-cta-standalone {
    display: none !important;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: block;
    background: radial-gradient(circle at 50% 0%, rgba(166,118,43,0.10), transparent 34%), rgba(4,3,3,0.62);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }

  .mobile-nav-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav-sheet {
    position: fixed;
    top: calc(max(8px, env(safe-area-inset-top)) + 74px);
    left: 10px;
    right: 10px;
    z-index: 510;
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(0.985);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }

  .mobile-nav-sheet.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .mobile-nav-panel {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(226,194,105,0.32);
    background:
      linear-gradient(135deg, rgba(255,255,255,0.045), transparent 26%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 3px, transparent 9px),
      linear-gradient(180deg, rgba(21,17,15,0.97), rgba(7,6,6,0.985));
    box-shadow:
      inset 0 1px 0 rgba(255,240,205,0.13),
      inset 0 -1px 0 rgba(0,0,0,0.78),
      0 28px 80px rgba(0,0,0,0.56),
      0 0 34px rgba(212,175,55,0.10);
  }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(226,194,105,0.16);
  }

  .mobile-nav-kicker {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: rgba(244,226,178,0.78);
    text-transform: uppercase;
  }

  .mobile-nav-title {
    margin-top: 4px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    line-height: 1;
    font-style: italic;
    color: rgba(255,245,220,0.96);
  }

  .mobile-nav-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(226,194,105,0.34);
    background: rgba(0,0,0,0.22);
    color: rgba(255,241,210,0.9);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-nav-menu {
    display: grid;
    gap: 8px;
    padding: 12px 12px 8px;
  }

  .mobile-nav-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(226,194,105,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    color: rgba(255,241,214,0.88);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-nav-menu a::after {
    content: '›';
    font-size: 20px;
    line-height: 1;
    color: rgba(212,175,55,0.78);
  }

  .mobile-nav-bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px 14px;
  }

  .mobile-nav-lang {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(226,194,105,0.22);
    background: rgba(0,0,0,0.22);
  }

  .mobile-nav-lang .footer-lang-btn {
    display: inline-flex !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .mobile-nav-lang .footer-lang-btn.active {
    background: linear-gradient(180deg, rgba(226,194,105,0.30), rgba(110,78,24,0.24)) !important;
    border-color: rgba(255,232,166,0.58) !important;
    color: rgba(255,247,222,0.98) !important;
  }

  .mobile-nav-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,226,145,0.42);
    background:
      linear-gradient(110deg, rgba(131,87,23,0.92), rgba(231,198,106,0.92) 48%, rgba(100,64,19,0.94));
    color: rgba(18,12,7,0.95);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    box-shadow: 0 12px 34px rgba(0,0,0,0.34), 0 0 22px rgba(212,175,55,0.14);
  }

  .mobile-nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.24) 42%, transparent 72%);
    opacity: 0.38;
    transform: translateX(-120%);
    animation: mobileNavCtaShimmer 7.8s ease-in-out infinite;
  }

  .mobile-nav-cta > span {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 380px) {
  .nav-shell nav {
    grid-template-columns: minmax(0, 1fr) 36px 40px !important;
    column-gap: 7px !important;
    padding-left: 11px !important;
    padding-right: 8px !important;
  }

  .nav-logo-name {
    font-size: 9.2px !important;
    letter-spacing: 0.14em !important;
  }

  .nav-logo-sub {
    font-size: 5.8px !important;
    letter-spacing: 0.10em !important;
  }

  .nav-lang {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .nav-lang .footer-lang-btn.active {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .mobile-nav-title {
    font-size: 22px;
  }

  .mobile-nav-menu a {
    min-height: 43px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-sheet,
  .mobile-nav-backdrop,
  .mobile-menu-toggle span,
  .mobile-nav-cta::before {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes mobileNavCtaShimmer {
  0%, 62% { transform: translateX(-120%); opacity: 0; }
  70% { opacity: 0.38; }
  86%, 100% { transform: translateX(125%); opacity: 0; }
}

/* ===================== V80 HERO BOOK LOCK — pointer + mobile spacing ===================== */
/* Книга всегда кликабельна / открывается на desktop и mobile */
#hero .hero-right,
#hero .interactive-book,
#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page {
  pointer-events: auto !important;
}

/* Дополнительная страховка для внутренних слоёв книги */
#hero .scene,
#hero .levitate,
#hero .flip-wrapper,
#hero .flip-page,
#hero .flip-face,
#hero .base-page-left,
#hero .base-page-right {
  pointer-events: auto !important;
}

/* Чтобы tap на телефоне работал мягко и без синего подсвечивания */
#hero .book-closed,
#hero .spread,
#hero .base-page {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Мобильный hero: маленький отступ между nav и книгой */
@media (max-width: 768px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 86px) !important;
  }

  #hero .hero-right {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }

  #hero .interactive-book,
  #hero .scene,
  #hero .levitate,
  #hero .stage {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 80px) !important;
  }

  #hero .hero-right {
    margin-top: 16px !important;
  }
}

/* =========================================================
   V81 STRUCTURE STABILIZATION PASS — FINAL OVERRIDE INDEX
   Purpose: document the active cascade without deleting legacy CSS.
   Visual intent: no redesign. Hero/book/title/mobile nav remain as in v80.

   ACTIVE FINAL ZONES AT END OF FILE:
   1) v78 — Hero CSS Consolidation: active final hero/title/quote/markers layer.
   2) v79 — Mobile Luxury Navigation Pass: active final mobile nav layer.
   3) V80 HERO BOOK LOCK: active final book pointer + mobile spacing layer.

   LEGACY / CANDIDATE CLEANUP ZONES FOR FUTURE V82+ ONLY:
   - Older mobile polish blocks around inline style block 9–10.
   - V63–V76 hero/mobile/heat passes that are superseded by v78/v80.
   - Duplicate nav/mobile sizing rules superseded by v79.

   Do not remove any legacy blocks in v81. Use V81_CSS_AUDIT_CLEANUP_MAP.md
   as the source of truth before physical deletion.
   ========================================================= */

/* V81 guard: prevent accidental horizontal spill from active mobile nav/hero layers. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #hero,
  .nav-shell,
  .mobile-nav-sheet,
  .mobile-nav-panel {
    max-width: 100vw !important;
  }
}

/* =========================================================
   V82 BOOK OPEN HOTFIX — interaction layer restoration
   Purpose: restore book opening after v81 structure stabilization without rollback.
   Scope: pointer stack only. No visual redesign.
   ========================================================= */
#hero .hero-bg,
#hero .hero-right-glow,
#hero .hero-noise,
#hero::before,
#hero::after,
#hero .hero-left,
#hero .hero-left::before,
#hero .hero-left::after,
#hero .hero-contract,
#hero .hero-contract::before,
#hero .hero-contract::after,
#hero .hero-contract-markers,
#hero .hero-contract-markers::before,
#hero .hero-contract-markers::after {
  pointer-events: none !important;
}

#hero .hero-right,
#hero .interactive-book,
#hero .interactive-book *,
#hero .scene,
#hero .levitate,
#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page,
#hero .base-page-left,
#hero .base-page-right,
#hero .flip-wrapper,
#hero .flip-page,
#hero .flip-face {
  pointer-events: auto !important;
}

#hero .hero-right {
  position: relative !important;
  z-index: 80 !important;
}

#hero .interactive-book {
  position: relative !important;
  z-index: 90 !important;
  isolation: isolate !important;
}

#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.mobile-nav-backdrop[hidden],
.mobile-nav-sheet[hidden],
.mobile-nav-sheet:not(.is-open) {
  pointer-events: none !important;
}

@media (max-width: 768px) {
  #hero .hero-right {
    z-index: 80 !important;
  }

  body:not(.mobile-nav-open) .mobile-nav-backdrop,
  body:not(.mobile-nav-open) .mobile-nav-sheet {
    pointer-events: none !important;
  }
}

/* ===================== V83 UI HOTFIX — MOBILE NAV CIRCLE + HERO QUOTE PLACEMENT ===================== */
/* Remove the extra round language chip from the mobile top nav.
   Language selection remains available inside the luxury mobile menu sheet. */
@media (max-width: 768px) {
  .nav-shell .nav-lang {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .mobile-menu-toggle {
    margin-left: auto !important;
  }
}

/* Hero quote now lives outside the contract frame, directly under the book title. */
#hero .hero-title-quote {
  display: block !important;
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin: 10px 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Cormorant Garamond', 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.08rem, 1.15vw, 1.42rem) !important;
  line-height: 1.24 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: .018em !important;
  color: rgba(249, 232, 180, .86) !important;
  text-shadow: 0 0 18px rgba(212,175,55,.12) !important;
}

#hero .hero-contract .hero-tagline,
#hero .hero-contract .hero-contract-quote {
  display: none !important;
}

#hero .hero-contract {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  #hero .hero-title-quote {
    width: min(92vw, 520px) !important;
    max-width: 92vw !important;
    margin: 8px auto 18px !important;
    text-align: center !important;
    font-size: clamp(1rem, 4.1vw, 1.22rem) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-title-quote {
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    font-size: clamp(.98rem, 4.35vw, 1.14rem) !important;
  }
}

/* =========================================================
   V84 MOBILE VISUAL QA PASS — stabilization only
   Purpose: lock the mobile visual layer after v83 without redesign.
   Scope: mobile nav sizing, menu sheet containment, hero overflow guard,
   book tap safety, and readable hero quote spacing.
   ========================================================= */
@media (max-width: 768px) {
  /* Mobile nav QA: one visible control only — logo + burger. */
  .nav-shell {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 540 !important;
  }

  .nav-shell nav {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .nav-shell .nav-links {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .mobile-menu-toggle {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }

  /* Mobile menu QA: never exceed viewport height, even on short phones. */
  .mobile-nav-sheet {
    top: calc(max(8px, env(safe-area-inset-top)) + 74px) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .mobile-nav-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: inherit !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-nav-menu a,
  .mobile-nav-close,
  .mobile-nav-cta,
  .mobile-nav-lang .footer-lang-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Hero QA: keep text, quote, contract, and book inside the viewport. */
  #hero,
  #hero .hero-left,
  #hero .hero-right,
  #hero .hero-contract,
  #hero .hero-contract-markers,
  #hero .hero-title,
  #hero .hero-title-quote,
  #hero .interactive-book,
  #hero .scene,
  #hero .levitate,
  #hero .stage {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  #hero .hero-left {
    width: min(100%, 100vw) !important;
    padding-left: clamp(14px, 4vw, 22px) !important;
    padding-right: clamp(14px, 4vw, 22px) !important;
  }

  #hero .hero-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #hero .hero-title-quote {
    overflow-wrap: anywhere !important;
  }

  #hero .hero-contract,
  #hero .hero-contract-markers {
    width: min(92vw, 560px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero .hero-contract-markers span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #hero .hero-right {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  #hero .interactive-book {
    width: min(92vw, 420px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero .stage {
    max-width: 92vw !important;
  }
}

@media (max-width: 380px) {
  .nav-shell {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .nav-shell nav {
    padding-left: 11px !important;
    padding-right: 8px !important;
    column-gap: 8px !important;
  }

  .mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .mobile-nav-sheet {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* =========================================================
   V85 CSS CONFLICT CLEANUP MAP — no deletion pass
   Purpose: document and contain the active cascade without removing legacy code.
   Active final authority order:
   1) v78 hero typography / quote / contract / marker polish
   2) v79 mobile nav structure
   3) v80 book pointer + mobile spacing lock
   4) v82 book-open hotfix
   5) v83 quote relocation + mobile circle removal
   6) v84 mobile visual QA guard
   Cleanup candidates for future physical removal:
   - old hero spacing/order blocks v55-v70 that still target #hero mobile layout
   - old marker-width / heat-scale rules that predate v78
   - old nav/mobile rules that predate the v79 mobile sheet
   This block intentionally changes only conflict-prone behavior, not the design.
   ========================================================= */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body:not(.mobile-nav-open) .mobile-nav-backdrop,
  body:not(.mobile-nav-open) .mobile-nav-sheet {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* =========================================================
   V86 HERO COMPOSITION POLISH — spacing only, no redesign
   Purpose: refine the mobile/desktop rhythm after moving the quote outside
   the contract frame. No title redesign, no book changes, no new effects.
   ========================================================= */
#hero .hero-title-quote {
  max-width: 660px !important;
  text-wrap: balance;
}

#hero .hero-contract-promise {
  text-wrap: balance;
}

@media (min-width: 769px) {
  #hero .hero-title-quote {
    margin-top: 12px !important;
    margin-bottom: 24px !important;
  }

  #hero .heat-row--above-contract {
    margin-bottom: 14px !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-title-quote {
    margin-top: 7px !important;
    margin-bottom: 17px !important;
  }

  #hero .heat-row--above-contract {
    margin-top: 2px !important;
    margin-bottom: 13px !important;
  }

  #hero .hero-contract-promise {
    line-height: 1.35 !important;
  }
}

/* =========================================================
   V87 PRODUCTION ASSET PASS — performance-safe CSS guards
   Purpose: improve rendering stability without replacing assets.
   ========================================================= */
img {
  max-width: 100%;
  height: auto;
}

.cast-lead-image img,
.cast-support-image img,
.author-gallery-card img,
.where-cover img {
  display: block;
}

#hero .hero-bg,
#hero .hero-noise,
#hero .hero-right-glow {
  contain: paint;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   V88 FINAL LAUNCH STRUCTURE GUARD — non-visual hardening
   Purpose: preserve launch-safe layout boundaries after stabilization.
   ========================================================= */
:root {
  --launch-safe-gutter: clamp(14px, 4vw, 28px);
}

section {
  scroll-margin-top: 110px;
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 92px;
  }

  .nav-shell,
  .mobile-nav-sheet,
  #hero,
  #about,
  #author,
  #gallery,
  #where {
    isolation: isolate;
  }
}


/* ===================== V89–V93 FINAL QA / RESPONSIVE / LAUNCH GUARD ===================== */
/* v89: functional click targets */
.footer-link--disabled {
  opacity: .48 !important;
  cursor: default !important;
  pointer-events: none !important;
}
.where-btn[href="#subscribe"]::after {
  content: "";
}

/* v90: responsive containment across launch breakpoints */
html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
}
body {
  min-width: 0 !important;
}
img,
video,
svg,
canvas {
  max-width: 100%;
}
#hero,
.nav-shell,
.mobile-nav-sheet,
.mobile-nav-panel,
.hero-left,
.hero-right,
.hero-contract,
.hero-contract-markers,
.heat-row,
.where-grid,
.footer-top,
.footer-bottom {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
section[id] {
  scroll-margin-top: 112px;
}

@media (max-width: 1024px) {
  .nav-shell {
    width: min(calc(100vw - 24px), 1180px) !important;
  }
  section[id] {
    scroll-margin-top: 96px;
  }
}

@media (max-width: 768px) {
  .nav-shell {
    width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
  }
  .mobile-nav-panel {
    width: min(390px, calc(100vw - 28px)) !important;
    max-height: calc(100svh - 28px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  #hero .hero-title,
  #hero .hero-title-quote,
  #hero .hero-contract,
  #hero .hero-contract-markers,
  #hero .heat-row {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hero .interactive-book,
  #hero .stage,
  #hero .scene {
    max-width: calc(100vw - 24px) !important;
  }
  .where-grid,
  .footer-top,
  .footer-links-grid {
    grid-template-columns: 1fr !important;
  }
    .where-card,
  .subscribe-inner {
    max-width: calc(100vw - 32px) !important;
  }
  section[id] {
    scroll-margin-top: 86px;
  }
}

@media (max-width: 430px) {
  #hero .hero-title {
    overflow-wrap: anywhere !important;
  }
  .hero-contract-markers,
  .heat-flames {
    flex-wrap: wrap !important;
  }
  .where-btn,
  .mobile-nav-cta,
  .nav-cta {
    min-height: 44px !important;
  }
}

@media (max-width: 390px) {
  #hero .hero-title,
  #hero .hero-title-quote,
  #hero .hero-contract,
  #hero .hero-contract-markers,
  #hero .heat-row {
    max-width: calc(100vw - 24px) !important;
  }
  .mobile-nav-panel {
    width: calc(100vw - 20px) !important;
  }
}

/* v92: performance / reduced motion launch guard */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================
   V94 RUBY PETALS MOTION PASS
   Purpose: premium atmospheric rose-petal layer using real
   transparent PNG assets. Non-interactive, fixed, lightweight.
   ========================================================== */

.ruby-petals-layer {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none !important;
  overflow: hidden;
  contain: layout style paint;
  opacity: 0.88;
  mix-blend-mode: normal;
}

.ruby-petal {
  position: absolute;
  top: -18vh;
  left: var(--petal-left, 50vw);
  width: var(--petal-size, 42px);
  height: auto;
  opacity: var(--petal-opacity, 0.58);
  transform: translate3d(0, -18vh, 0) rotate(var(--petal-rotate-start, 0deg)) scale(var(--petal-scale, 1));
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 10px rgba(174, 32, 42, 0.12));
  will-change: transform, opacity;
  animation:
    rubyPetalFall var(--petal-duration, 24s) linear var(--petal-delay, 0s) infinite,
    rubyPetalDrift var(--petal-drift-duration, 9s) ease-in-out var(--petal-delay, 0s) infinite alternate;
  backface-visibility: hidden;
}

.ruby-petal[data-depth="near"] {
  z-index: 3;
  opacity: calc(var(--petal-opacity, 0.62) + 0.08);
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(210, 48, 55, 0.16));
}

.ruby-petal[data-depth="far"] {
  z-index: 1;
  opacity: calc(var(--petal-opacity, 0.48) - 0.08);
  filter:
    blur(0.25px)
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24));
}

@keyframes rubyPetalFall {
  0% {
    transform:
      translate3d(0, -20vh, 0)
      rotate(var(--petal-rotate-start, 0deg))
      rotateX(var(--petal-tilt-x, 12deg))
      rotateY(var(--petal-tilt-y, -8deg))
      scale(var(--petal-scale, 1));
    opacity: 0;
  }
  7% {
    opacity: var(--petal-opacity, 0.58);
  }
  52% {
    transform:
      translate3d(var(--petal-mid-x, 22px), 52vh, 0)
      rotate(var(--petal-rotate-mid, 180deg))
      rotateX(calc(var(--petal-tilt-x, 12deg) * -1))
      rotateY(var(--petal-tilt-y, -8deg))
      scale(var(--petal-scale, 1));
  }
  94% {
    opacity: var(--petal-opacity, 0.58);
  }
  100% {
    transform:
      translate3d(var(--petal-end-x, -24px), 116vh, 0)
      rotate(var(--petal-rotate-end, 360deg))
      rotateX(var(--petal-tilt-x, 12deg))
      rotateY(calc(var(--petal-tilt-y, -8deg) * -1))
      scale(var(--petal-scale, 1));
    opacity: 0;
  }
}

@keyframes rubyPetalDrift {
  0% {
    margin-left: calc(var(--petal-drift, 26px) * -0.5);
  }
  100% {
    margin-left: var(--petal-drift, 26px);
  }
}

@media (max-width: 768px) {
  .ruby-petals-layer {
    opacity: 0.74;
  }

  .ruby-petal {
    width: calc(var(--petal-size, 36px) * 0.76);
    animation-duration: calc(var(--petal-duration, 24s) * 1.06), calc(var(--petal-drift-duration, 9s) * 1.05);
  }

  .ruby-petal:nth-child(n + 11) {
    display: none;
  }
}

@media (max-width: 480px) {
  .ruby-petal:nth-child(n + 9) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ruby-petals-layer {
    display: none !important;
  }
}

/* ==========================================================
   V95 BACKGROUND DIRECTION PASS — DARK LUXURY MASTER LAYER
   Purpose: replace the current background direction safely without
   changing hero/book/nav structure or adding content blocks.
   ========================================================== */
:root {
  --v95-master-bg: url("../assets/hero/master-background-main-desktop.webp");
}

html,
body {
  background: #070505 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,5,6,0.16) 0%, rgba(7,5,6,0.48) 56%, rgba(5,3,4,0.92) 100%),
    radial-gradient(ellipse at 72% 16%, rgba(212,175,55,0.055) 0%, rgba(212,175,55,0.00) 40%),
    radial-gradient(ellipse at 22% 28%, rgba(116,18,31,0.085) 0%, rgba(116,18,31,0.00) 42%),
    var(--v95-master-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.30;
  filter: saturate(1.05) contrast(1.08) brightness(0.62);
  transform: translateZ(0);
}

#hero .hero-bg {
  background:
    linear-gradient(90deg, rgba(7,5,8,0.88) 0%, rgba(7,5,8,0.54) 42%, rgba(7,5,8,0.80) 100%),
    linear-gradient(180deg, rgba(6,4,5,0.08) 0%, rgba(6,4,5,0.22) 48%, rgba(6,4,5,0.76) 100%),
    radial-gradient(ellipse at 70% 28%, rgba(212,175,55,0.095) 0%, rgba(212,175,55,0.00) 40%),
    radial-gradient(circle at center, rgba(0,0,0,0) 34%, rgba(0,0,0,0.34) 100%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.80 !important;
  filter: saturate(1.02) contrast(1.06) brightness(0.78) !important;
}

/* Keep the master background behind content and protect interactions. */
.nav-shell,
.mobile-nav-sheet,
.mobile-nav-backdrop,
#hero .hero-left,
#hero .hero-right,
#hero .interactive-book {
  isolation: isolate;
}

.ruby-petals-layer {
  z-index: 7 !important;
  pointer-events: none !important;
}

#hero .interactive-book,
#hero .stage,
#hero .book-closed,
#hero .spread,
#hero .base-page {
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  body::before {
    opacity: 0.22;
    filter: saturate(1.02) contrast(1.04) brightness(0.58);
  }
  #hero .hero-bg {
    opacity: 0.72 !important;
    background-position: center top !important;
  }
}


/* ==========================================================
   V97 HOTFIX — SAFE MASTER BACKGROUND RESTORE
   Restores the real long master image without changing layout/nav/audio/book.
   This intentionally overrides the broken V96 approach and keeps the proven V95 structure.
   ========================================================== */
:root {
  --v95-master-bg: url("../assets/hero/master-background-main-desktop.webp");
  --v97-scroll-bg-y: 0px;
  --v97-cursor-bg-x: 0px;
  --v97-cursor-bg-y: 0px;
}

html,
body {
  background: #070505 !important;
}

/* Global fixed cinematic world — visible behind sections, but never clickable. */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -5vh -4vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(7,5,6,0.06) 0%, rgba(7,5,6,0.34) 56%, rgba(5,3,4,0.82) 100%),
    radial-gradient(ellipse at 70% 14%, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.00) 42%),
    radial-gradient(ellipse at 22% 70%, rgba(116,18,31,0.10) 0%, rgba(116,18,31,0.00) 44%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.58 !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.74) !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) + var(--v97-cursor-bg-y)), 0) scale(1.035) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

/* Keep real page content above the global background. */
.nav-shell,
.mobile-nav-sheet,
.mobile-nav-backdrop,
#hero,
section,
footer,
.audio-panel {
  position: relative;
  z-index: 2;
}

/* Hero keeps its own readable overlay, but the image is restored. */
#hero {
  background: #070505 !important;
}

#hero .hero-bg {
  background:
    linear-gradient(90deg, rgba(7,5,8,0.86) 0%, rgba(7,5,8,0.50) 42%, rgba(7,5,8,0.78) 100%),
    linear-gradient(180deg, rgba(6,4,5,0.04) 0%, rgba(6,4,5,0.18) 48%, rgba(6,4,5,0.68) 100%),
    radial-gradient(ellipse at 70% 28%, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.00) 42%),
    radial-gradient(circle at center, rgba(0,0,0,0) 34%, rgba(0,0,0,0.28) 100%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.92 !important;
  filter: saturate(1.06) contrast(1.05) brightness(0.82) !important;
  transform: translate3d(0, var(--v97-scroll-bg-y), 0) scale(1.015) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

/* Fine cinematic atmosphere; does not affect layout. */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,225,170,0.08), transparent 44%),
    radial-gradient(ellipse at 50% 86%, rgba(0,0,0,0.48), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.56;
}

/* Ruby petals stay above the background but below nav/audio. */
.ruby-petals-layer {
  z-index: 8 !important;
  pointer-events: none !important;
}

.nav-shell { z-index: 180 !important; }
.audio-panel { z-index: 130 !important; }

@media (max-width: 768px) {
  :root { --v95-master-bg: url("../assets/hero/master-background-mobile.webp"); }
  body::before {
    inset: -3vh -18vw !important;
    opacity: 0.42 !important;
    filter: saturate(1.02) contrast(1.04) brightness(0.62) !important;
    background-position: center top !important;
  }
  #hero .hero-bg {
    opacity: 0.86 !important;
    filter: saturate(1.03) contrast(1.04) brightness(0.76) !important;
    background-position: center top !important;
    transform: translate3d(0, 0, 0) scale(1.01) !important;
  }
  #hero::after { opacity: 0.38; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  #hero .hero-bg { transform: none !important; }
}

/* ==========================================================
   V98 MOBILE BACKGROUND SCALE HOTFIX
   Purpose: stop the long master image from looking duplicated/cropped on mobile,
   keep the site layout stable, and avoid touching nav/audio/content.
   ========================================================== */

/* Desktop: keep the cinematic fill, but do not tile. */
body::before,
#hero .hero-bg {
  background-repeat: no-repeat !important;
}

/* Mobile: use one master image only in hero, scaled by width, not cover. */
@media (max-width: 768px) {
  body::before {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #hero .hero-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 0.92 !important;
    filter: saturate(1.04) contrast(1.04) brightness(0.72) !important;
    transform: none !important;
  }

  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
}

/* Extra narrow phones: keep the same rule; never use 100vw on the book column. */
@media (max-width: 480px) {
  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================
   V100 VISUAL TUNING — NEW MASTER BACKGROUND BALANCE
   Goal: keep V99 image, improve readability, scale, depth, and mobile stability
   without changing nav/audio/book/content structure.
   ========================================================== */
:root {
  --v95-master-bg: url("../assets/hero/master-background-main-desktop.webp");
}

/* Desktop global background: atmospheric only, not competing with hero. */
body::before {
  background:
    linear-gradient(180deg, rgba(7,5,6,0.10) 0%, rgba(7,5,6,0.38) 58%, rgba(5,3,4,0.88) 100%),
    radial-gradient(ellipse at 68% 18%, rgba(212,175,55,0.07) 0%, rgba(212,175,55,0.00) 42%),
    radial-gradient(ellipse at 18% 72%, rgba(116,18,31,0.09) 0%, rgba(116,18,31,0.00) 46%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center 10% !important;
  background-repeat: no-repeat !important;
  opacity: 0.46 !important;
  filter: saturate(1.05) contrast(1.04) brightness(0.70) !important;
}

/* Hero: preserve image presence, but protect title/card readability. */
#hero .hero-bg {
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.90) 0%,
      rgba(5,3,5,0.72) 28%,
      rgba(5,3,5,0.38) 52%,
      rgba(5,3,5,0.70) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.08) 0%,
      rgba(5,3,5,0.18) 48%,
      rgba(5,3,5,0.74) 100%),
    radial-gradient(ellipse at 72% 32%, rgba(212,175,55,0.13) 0%, rgba(212,175,55,0.00) 42%),
    radial-gradient(ellipse at 50% 80%, rgba(116,18,31,0.10) 0%, rgba(116,18,31,0.00) 48%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center 10% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.07) contrast(1.04) brightness(0.86) !important;
  transform: translate3d(0, var(--v97-scroll-bg-y), 0) scale(1.01) !important;
}

/* Softer cinematic sheen; avoids milky wash over the center. */
#hero::after {
  background:
    radial-gradient(ellipse at 54% 18%, rgba(255,225,170,0.045), transparent 42%),
    radial-gradient(ellipse at 50% 88%, rgba(0,0,0,0.42), transparent 58%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.34 !important;
}

/* Keep petals visible, but not above the main reading layer. */
.ruby-petals-layer {
  opacity: 0.82 !important;
}

/* Mobile: single clean hero image, scaled to the phone width, never repeated. */
@media (max-width: 768px) {
  :root {
    --v95-master-bg: url("../assets/hero/master-background-mobile.webp");
  }

  body::before {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #hero {
    background: #050304 !important;
  }

  #hero .hero-bg {
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.18) 0%,
        rgba(5,3,5,0.36) 44%,
        rgba(5,3,5,0.84) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.68) 0%,
        rgba(5,3,5,0.28) 50%,
        rgba(5,3,5,0.62) 100%),
      var(--v95-master-bg) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: saturate(1.06) contrast(1.05) brightness(0.82) !important;
    transform: none !important;
  }

  #hero::after {
    opacity: 0.22 !important;
  }

  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .ruby-petals-layer {
    opacity: 0.62 !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
  }
}


/* ==========================================================
   V101 STUDIO VISUAL PASS — SAFE LAYERED TUNING
   Scope: visual-only. No HTML layout changes. No nav/audio/book rewiring.
   Actions: stronger master image presence, cleaner readable hero, subtle dust/fog,
   better mobile crop, more dimensional petals, safer z-index stack.
   ========================================================== */
:root {
  --v101-hero-focus-x: 50%;
  --v101-hero-focus-y: 9%;
  --v101-bg-zoom: 1.012;
}

body {
  background: #050304 !important;
}

/* Keep the long master as the cinematic world behind the full page. */
body::before {
  background:
    linear-gradient(180deg, rgba(5,3,4,0.06) 0%, rgba(5,3,4,0.32) 54%, rgba(5,3,4,0.92) 100%),
    radial-gradient(ellipse at 50% 4%, rgba(255,224,166,0.08) 0%, rgba(255,224,166,0.00) 38%),
    radial-gradient(ellipse at 17% 70%, rgba(130,18,31,0.11) 0%, rgba(130,18,31,0.00) 46%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.52 !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.74) !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) * .55), 0) scale(1.018) !important;
}

/* Hero master image: less black void, more visible penthouse, protected text lane. */
#hero .hero-bg {
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.92) 0%,
      rgba(5,3,5,0.70) 27%,
      rgba(5,3,5,0.28) 54%,
      rgba(5,3,5,0.58) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.02) 0%,
      rgba(5,3,5,0.13) 46%,
      rgba(5,3,5,0.70) 100%),
    radial-gradient(ellipse at 72% 34%, rgba(231,190,94,0.16) 0%, rgba(231,190,94,0.00) 43%),
    radial-gradient(ellipse at 44% 74%, rgba(120,18,34,0.10) 0%, rgba(120,18,34,0.00) 48%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: var(--v101-hero-focus-x) var(--v101-hero-focus-y) !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.10) contrast(1.07) brightness(0.91) !important;
  transform: translate3d(var(--v97-cursor-bg-x), var(--v97-scroll-bg-y), 0) scale(var(--v101-bg-zoom)) !important;
  transform-origin: center top !important;
}

/* Add premium atmospheric veil directly on the background layer, below content. */
#hero .hero-bg::before,
#hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#hero .hero-bg::before {
  background:
    radial-gradient(ellipse at 53% 15%, rgba(255,230,175,0.09), transparent 36%),
    radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.50), transparent 56%),
    linear-gradient(90deg, rgba(0,0,0,0.20), transparent 30%, transparent 72%, rgba(0,0,0,0.22));
  opacity: 0.72;
  mix-blend-mode: soft-light;
}

#hero .hero-bg::after {
  inset: -8%;
  background-image:
    radial-gradient(circle at 20% 28%, rgba(245,220,160,0.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 42%, rgba(245,220,160,0.12) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 57%, rgba(255,222,160,0.07) 60%, transparent 67%);
  background-size: 240px 240px, 310px 310px, 100% 100%;
  opacity: 0.16;
  animation: v101DustFloat 24s linear infinite;
}

@keyframes v101DustFloat {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-42px, -64px, 0); }
}

/* Keep old hero shine from washing out the center. */
#hero::after {
  opacity: 0.24 !important;
  mix-blend-mode: screen !important;
}

/* More luxury separation for the text/card without moving anything. */
#hero .hero-left {
  text-shadow: 0 2px 18px rgba(0,0,0,0.52) !important;
}

#hero .hero-contract {
  box-shadow:
    0 22px 70px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,236,188,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

/* Book stays above atmosphere, with a slightly cleaner premium lift. */
#hero .hero-right {
  z-index: 82 !important;
}
#hero .interactive-book {
  filter: drop-shadow(0 34px 56px rgba(0,0,0,0.46)) drop-shadow(0 0 22px rgba(212,175,55,0.08)) !important;
}

/* Petals: more depth, less UI interference. */
.ruby-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9 !important;
  opacity: 0.88 !important;
  pointer-events: none !important;
  contain: layout paint style !important;
}
.ruby-petal[data-depth="far"] { filter: blur(0.7px) saturate(0.92) brightness(0.72) !important; }
.ruby-petal[data-depth="mid"] { filter: blur(0.25px) saturate(1.02) brightness(0.82) !important; }
.ruby-petal[data-depth="near"] { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)) saturate(1.10) brightness(0.88) !important; }

/* Nav/audio always stay above all cinematic material. */
.nav-shell { z-index: 220 !important; }
.mobile-nav-backdrop,
.mobile-nav-sheet { z-index: 240 !important; }
.audio-panel { z-index: 210 !important; }

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --v101-hero-focus-x: 54%;
    --v101-hero-focus-y: top;
  }
  #hero .hero-bg {
    background-size: cover !important;
  }
}

@media (max-width: 768px) {
  :root {
    --v95-master-bg: url("../assets/hero/master-background-mobile.webp");
    --v101-hero-focus-x: 50%;
    --v101-hero-focus-y: top;
  }

  body::before {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #hero {
    min-height: 100svh !important;
    background: #050304 !important;
  }

  #hero .hero-bg {
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.05) 0%,
        rgba(5,3,5,0.22) 36%,
        rgba(5,3,5,0.72) 72%,
        rgba(5,3,5,0.92) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.42) 0%,
        rgba(5,3,5,0.14) 50%,
        rgba(5,3,5,0.42) 100%),
      var(--v95-master-bg) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: saturate(1.08) contrast(1.06) brightness(0.88) !important;
    transform: none !important;
  }

  #hero .hero-bg::before {
    background:
      radial-gradient(ellipse at 50% 10%, rgba(255,230,175,0.07), transparent 34%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.42) 84%);
    opacity: 0.45;
  }

  #hero .hero-bg::after {
    display: none !important;
  }

  #hero::after {
    opacity: 0.14 !important;
  }

  #hero .hero-left,
  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #hero .interactive-book {
    filter: drop-shadow(0 22px 34px rgba(0,0,0,0.50)) !important;
  }

  .ruby-petals-layer {
    opacity: 0.58 !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
    filter: saturate(1.06) contrast(1.05) brightness(0.86) !important;
  }

  .ruby-petal[data-depth="near"] {
    opacity: 0.56 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-bg,
  #hero .hero-bg::after,
  .ruby-petal {
    animation: none !important;
    transform: none !important;
  }
}


/* ==========================================================
   V102 FIVE-TASK STUDIO PASS — SAFE ITERATION
   Scope: five controlled visual fixes only.
   1) Desktop master-background focus and depth tuning.
   2) Hero readability corridor without killing the image.
   3) Mobile crop stabilization and safer lower spacing.
   4) Petal layer refinement: richer desktop, lighter mobile.
   5) Audio/nav/book z-index and mobile collision protection.
   ========================================================== */
:root {
  --v102-hero-focus-x: 50%;
  --v102-hero-focus-y: 0%;
  --v102-bg-zoom: 1.006;
}

/* 1 — keep V99 visible, darker only where text needs protection */
#hero .hero-bg {
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.86) 0%,
      rgba(5,3,5,0.62) 25%,
      rgba(5,3,5,0.20) 52%,
      rgba(5,3,5,0.48) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.00) 0%,
      rgba(5,3,5,0.10) 44%,
      rgba(5,3,5,0.64) 100%),
    radial-gradient(ellipse at 72% 38%, rgba(222,178,86,0.13) 0%, rgba(222,178,86,0.00) 45%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: var(--v102-hero-focus-x) var(--v102-hero-focus-y) !important;
  filter: saturate(1.12) contrast(1.08) brightness(0.94) !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) * .72), 0) scale(var(--v102-bg-zoom)) !important;
}

/* 2 — premium readability corridor: text reads, image still breathes */
#hero .hero-left {
  position: relative !important;
  isolation: isolate !important;
}
#hero .hero-left::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7% -10% -9% -8%;
  border-radius: 42px;
  background:
    radial-gradient(ellipse at 44% 35%, rgba(0,0,0,0.42), transparent 67%),
    linear-gradient(90deg, rgba(0,0,0,0.46), rgba(0,0,0,0.08));
  filter: blur(10px);
  opacity: 0.82;
  pointer-events: none;
}
#hero .hero-title,
#hero .hero-title-quote,
#hero .hero-contract,
#hero .hero-contract-markers {
  position: relative !important;
  z-index: 2 !important;
}
#hero .hero-contract {
  background: linear-gradient(135deg, rgba(15,12,10,0.66), rgba(5,4,4,0.42)) !important;
}

/* 3 — mobile: no duplicated long-image blocks, better hero balance */
@media (max-width: 768px) {
  :root {
    --v102-hero-focus-x: 50%;
    --v102-hero-focus-y: top;
  }
  #hero {
    min-height: 100svh !important;
    overflow: hidden !important;
  }
  #hero .hero-bg {
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.03) 0%,
        rgba(5,3,5,0.18) 36%,
        rgba(5,3,5,0.69) 76%,
        rgba(5,3,5,0.94) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.32) 0%,
        rgba(5,3,5,0.08) 48%,
        rgba(5,3,5,0.34) 100%),
      var(--v95-master-bg) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.10) contrast(1.06) brightness(0.91) !important;
    transform: none !important;
  }
  #hero .hero-left::before {
    inset: -5% -6% -6% -6%;
    border-radius: 28px;
    opacity: 0.68;
    filter: blur(8px);
  }
  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(-2px) !important;
  }
}

/* 4 — petals: cinematic depth but less obstruction over important UI */
.ruby-petals-layer {
  z-index: 18 !important;
  opacity: 0.78 !important;
  mix-blend-mode: normal !important;
}
.ruby-petal {
  will-change: transform, opacity !important;
}
.ruby-petal[data-depth="far"] { opacity: calc(var(--petal-opacity) * .78) !important; }
.ruby-petal[data-depth="mid"] { opacity: calc(var(--petal-opacity) * .90) !important; }
.ruby-petal[data-depth="near"] { opacity: calc(var(--petal-opacity) * .84) !important; }

@media (max-width: 768px) {
  .ruby-petals-layer {
    z-index: 12 !important;
    opacity: 0.46 !important;
  }
  .ruby-petal {
    max-width: 44px !important;
  }
}

/* 5 — collision protection: audio/nav/book always stay premium and clickable */
.nav-shell,
.mobile-menu-toggle {
  z-index: 260 !important;
}
.audio-panel {
  z-index: 230 !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}
#hero .interactive-book,
#hero .hero-right {
  z-index: 90 !important;
}

@media (max-width: 768px) {
  .audio-panel {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
  }
  #hero .hero-contract {
    backdrop-filter: blur(13px) saturate(1.05) !important;
  }
}

/* ==========================================================
   V103 LEVEL 2 — FIVE ACTION STUDIO PASS
   Scope: 5 safe visual upgrades only.
   1) Heroine focal spotlight.
   2) Deeper atmospheric fog/vertical falloff.
   3) More organic ruby-petal motion curve.
   4) Finer gold dust in the air.
   5) Safer cursor micro-camera using existing CSS variables.
   ========================================================== */

/* 1 — focus the eye on the upper balcony / heroine without washing the text lane. */
#hero .hero-bg::before {
  background:
    radial-gradient(ellipse at 50% 17%, rgba(255, 224, 166, 0.16), transparent 34%),
    radial-gradient(ellipse at 54% 36%, rgba(160, 98, 48, 0.08), transparent 42%),
    radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.58), transparent 58%),
    linear-gradient(90deg, rgba(0,0,0,0.23), transparent 32%, transparent 70%, rgba(0,0,0,0.24));
  opacity: 0.78 !important;
  mix-blend-mode: soft-light !important;
}

/* 2 — atmospheric depth: darker descent, cleaner upper scene. */
#hero .hero-bg {
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.86) 0%,
      rgba(5,3,5,0.58) 24%,
      rgba(5,3,5,0.17) 52%,
      rgba(5,3,5,0.45) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.00) 0%,
      rgba(5,3,5,0.08) 31%,
      rgba(5,3,5,0.40) 72%,
      rgba(5,3,5,0.84) 100%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.34), transparent 60%),
    radial-gradient(ellipse at 72% 38%, rgba(222,178,86,0.13) 0%, rgba(222,178,86,0.00) 45%),
    var(--v95-master-bg) !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) * .72 + var(--v97-cursor-bg-y)), 0) scale(var(--v102-bg-zoom)) !important;
}

/* 3 — petals: more natural drifting path, less mechanical fall. */
@keyframes rubyPetalFall {
  0% {
    transform:
      translate3d(0, -18vh, 0)
      rotate(var(--petal-rotate-start, 0deg))
      rotateX(var(--petal-tilt-x, 12deg))
      rotateY(var(--petal-tilt-y, -8deg))
      scale(var(--petal-scale, 1));
    opacity: 0;
  }
  10% { opacity: var(--petal-opacity, 0.58); }
  27% {
    transform:
      translate3d(calc(var(--petal-mid-x, 22px) * .62), 25vh, 0)
      rotate(calc(var(--petal-rotate-mid, 180deg) * .55))
      rotateX(calc(var(--petal-tilt-x, 12deg) * -0.8))
      rotateY(var(--petal-tilt-y, -8deg))
      scale(var(--petal-scale, 1));
  }
  52% {
    transform:
      translate3d(var(--petal-mid-x, 22px), 54vh, 0)
      rotate(var(--petal-rotate-mid, 180deg))
      rotateX(calc(var(--petal-tilt-x, 12deg) * -1))
      rotateY(calc(var(--petal-tilt-y, -8deg) * .7))
      scale(var(--petal-scale, 1));
    opacity: var(--petal-opacity, 0.58);
  }
  78% {
    transform:
      translate3d(calc(var(--petal-end-x, -24px) * .62), 84vh, 0)
      rotate(calc(var(--petal-rotate-end, 360deg) * .76))
      rotateX(var(--petal-tilt-x, 12deg))
      rotateY(calc(var(--petal-tilt-y, -8deg) * -0.85))
      scale(var(--petal-scale, 1));
  }
  100% {
    transform:
      translate3d(var(--petal-end-x, -24px), 116vh, 0)
      rotate(var(--petal-rotate-end, 360deg))
      rotateX(var(--petal-tilt-x, 12deg))
      rotateY(calc(var(--petal-tilt-y, -8deg) * -1))
      scale(var(--petal-scale, 1));
    opacity: 0;
  }
}

/* 4 — gold dust: subtle luxury air, below text and book. */
#hero .hero-bg::after {
  background-image:
    radial-gradient(circle at 20% 28%, rgba(245,220,160,0.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 42%, rgba(245,220,160,0.12) 0 1px, transparent 1.6px),
    radial-gradient(circle at 44% 66%, rgba(255,225,168,0.10) 0 0.8px, transparent 1.4px),
    linear-gradient(115deg, transparent 0 57%, rgba(255,222,160,0.07) 60%, transparent 67%);
  background-size: 220px 220px, 300px 300px, 145px 145px, 100% 100% !important;
  opacity: 0.18 !important;
}

/* 5 — micro-camera is intentionally subtle; mobile remains fixed for stability. */
@media (min-width: 900px) {
  :root {
    --v102-bg-zoom: 1.012;
  }
}

@media (max-width: 768px) {
  #hero .hero-bg {
    transform: none !important;
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.02) 0%,
        rgba(5,3,5,0.15) 34%,
        rgba(5,3,5,0.66) 75%,
        rgba(5,3,5,0.94) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.30) 0%,
        rgba(5,3,5,0.07) 49%,
        rgba(5,3,5,0.32) 100%),
      var(--v95-master-bg) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  #hero .hero-bg::before {
    opacity: 0.48 !important;
    background:
      radial-gradient(ellipse at 50% 12%, rgba(255,224,166,0.08), transparent 34%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.44) 84%);
  }

  #hero .hero-bg::after {
    display: none !important;
  }
}

/* ==========================================================
   V104 ONE-MASTER-BACKGROUND HOTFIX
   Goal: remove the double-image effect. The real master image now lives only
   on body::before. The hero layer becomes transparent gradients/atmosphere only.
   ========================================================== */

/* ONE real image for the entire page. */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -3vh -3vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(5,3,4,0.04) 0%, rgba(5,3,4,0.30) 56%, rgba(5,3,4,0.90) 100%),
    radial-gradient(ellipse at 50% 8%, rgba(255,224,166,0.10) 0%, rgba(255,224,166,0.00) 38%),
    radial-gradient(ellipse at 18% 72%, rgba(130,18,31,0.10) 0%, rgba(130,18,31,0.00) 46%),
    var(--v95-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.92 !important;
  filter: saturate(1.10) contrast(1.07) brightness(0.82) !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) + var(--v97-cursor-bg-y)), 0) scale(1.018) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

/* The hero no longer contains a second copy of the same picture. */
#hero .hero-bg {
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.86) 0%,
      rgba(5,3,5,0.58) 24%,
      rgba(5,3,5,0.16) 52%,
      rgba(5,3,5,0.45) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.00) 0%,
      rgba(5,3,5,0.08) 31%,
      rgba(5,3,5,0.40) 72%,
      rgba(5,3,5,0.84) 100%),
    radial-gradient(ellipse at 50% 17%, rgba(255,224,166,0.10), transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.34), transparent 60%) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Keep atmospheric pseudo-layers, but never add another raster image. */
#hero .hero-bg::before {
  background:
    radial-gradient(ellipse at 50% 17%, rgba(255, 224, 166, 0.13), transparent 34%),
    radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.54), transparent 58%),
    linear-gradient(90deg, rgba(0,0,0,0.23), transparent 32%, transparent 70%, rgba(0,0,0,0.24)) !important;
  opacity: 0.70 !important;
  mix-blend-mode: soft-light !important;
}

@media (max-width: 768px) {
  :root {
    --v95-master-bg: url("../assets/hero/master-background-mobile.webp");
  }

  body::before {
    visibility: visible !important;
    opacity: 0.96 !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.05) 0%,
        rgba(5,3,5,0.22) 38%,
        rgba(5,3,5,0.70) 76%,
        rgba(5,3,5,0.94) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.34) 0%,
        rgba(5,3,5,0.08) 48%,
        rgba(5,3,5,0.34) 100%),
      var(--v95-master-bg) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.08) contrast(1.06) brightness(0.88) !important;
    transform: none !important;
  }

  #hero .hero-bg {
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.00) 0%,
        rgba(5,3,5,0.10) 36%,
        rgba(5,3,5,0.48) 76%,
        rgba(5,3,5,0.72) 100%) !important;
    background-size: cover !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================
   V105 HERO-ONLY MASTER BACKGROUND HOTFIX
   Goal: the raster master image belongs to the hero scene, not to the page
   before the hero. This removes the visual feeling that the background starts
   above/outside the hero and prevents a second image copy.
   ========================================================== */

/* Kill the page-level raster background from V104. */
body::before {
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  transform: none !important;
}

/* Keep the page base clean and dark. */
html,
body {
  background: #050404 !important;
}

/* The one real image now lives inside the hero only. */
#hero {
  background: #050404 !important;
  isolation: isolate !important;
}

#hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(5,3,5,0.82) 0%,
      rgba(5,3,5,0.48) 24%,
      rgba(5,3,5,0.18) 52%,
      rgba(5,3,5,0.54) 100%),
    linear-gradient(180deg,
      rgba(5,3,5,0.02) 0%,
      rgba(5,3,5,0.08) 34%,
      rgba(5,3,5,0.44) 76%,
      rgba(5,3,5,0.88) 100%),
    radial-gradient(ellipse at 50% 16%, rgba(255,224,166,0.10), transparent 34%),
    url("../assets/hero/master-background-main-desktop.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.05) brightness(0.86) !important;
  transform: translate3d(var(--v97-cursor-bg-x, 0px), var(--v97-cursor-bg-y, 0px), 0) scale(1.018) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

/* Atmosphere only. No raster image here. */
#hero .hero-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,224,166,0.12), transparent 36%),
    radial-gradient(ellipse at 18% 56%, rgba(0,0,0,0.34), transparent 44%),
    radial-gradient(ellipse at 80% 72%, rgba(0,0,0,0.42), transparent 48%) !important;
  opacity: 0.78 !important;
  mix-blend-mode: soft-light !important;
  pointer-events: none !important;
}

#hero .hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.24), transparent 34%, transparent 68%, rgba(0,0,0,0.22)),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.56) 100%) !important;
  opacity: 0.62 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  body::before {
    display: none !important;
    background: none !important;
  }

  #hero .hero-bg {
    background:
      linear-gradient(180deg,
        rgba(5,3,5,0.04) 0%,
        rgba(5,3,5,0.18) 42%,
        rgba(5,3,5,0.58) 78%,
        rgba(5,3,5,0.88) 100%),
      linear-gradient(90deg,
        rgba(5,3,5,0.28) 0%,
        rgba(5,3,5,0.06) 50%,
        rgba(5,3,5,0.30) 100%),
      url("../assets/hero/master-background-mobile.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.04) contrast(1.04) brightness(0.88) !important;
    transform: none !important;
  }

  #hero .hero-bg::before {
    opacity: 0.52 !important;
  }

  #hero .hero-bg::after {
    opacity: 0.58 !important;
  }
}

/* ==========================================================
   V106 STABLE BACKGROUND CORE — FINAL RESET
   ========================================================== */
html, body { background: #050404 !important; overflow-x: hidden !important; }
body::before, body::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; background-image: none !important; transform: none !important; filter: none !important; }
#bg-root { position: fixed !important; inset: 0 !important; z-index: -10 !important; overflow: hidden !important; pointer-events: none !important; background: #050404 !important; }
#bg-root .bg-image { position: absolute !important; inset: 0 !important; background-image: url('../assets/hero/master-background.webp') !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto !important; }
#hero { background: transparent !important; isolation: isolate !important; overflow: hidden !important; }
#hero .hero-bg, #hero .hero-bg::before, #hero .hero-bg::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; background-image: none !important; filter: none !important; transform: none !important; mix-blend-mode: normal !important; pointer-events: none !important; }
.nav-shell, .mobile-nav-backdrop, .mobile-nav-sheet, #hero, section, footer, .audio-panel, .ruby-petals-layer { position: relative; z-index: 1; }
@media (max-width: 768px) { #bg-root .bg-image { background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } #hero .hero-right { width: 100% !important; max-width: 100% !important; overflow: visible !important; } }

/* ==========================================================
   V107 BACKGROUND VISIBILITY HOTFIX — bg-root above body background
   Purpose: make the one master background actually visible while keeping it
   outside layout and behind all interface/content.
   ========================================================== */
html {
  background: #050404 !important;
}

body {
  background: transparent !important;
  overflow-x: hidden !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  transform: none !important;
  filter: none !important;
}

#bg-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #050404 !important;
  isolation: isolate !important;
}

#bg-root .bg-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('../assets/hero/master-background.webp') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

body > :not(#bg-root) {
  position: relative;
  z-index: 2;
}

#hero {
  background: transparent !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

#hero .hero-bg,
#hero .hero-bg::before,
#hero .hero-bg::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  #bg-root .bg-image {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  #hero .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* ==========================================================
   V108 STABLE ONE-BACKGROUND CORE — CLEAN ARCHITECTURE LOCK
   Scope: final background ownership pass.
   Goal: one real image only, outside layout, no hero/body duplicate images,
   no extra darkening on the artwork itself.
   ========================================================== */
:root {
  --v108-master-bg: url("../assets/hero/master-background.webp");
  --v97-scroll-bg-y: 0px;
  --v97-cursor-bg-x: 0px;
  --v97-cursor-bg-y: 0px;
}

html {
  background: #050304 !important;
}

body {
  background: transparent !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Hard kill every old global pseudo-background. */
body::before,
body::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
}

/* The only place where the master artwork is allowed to exist. */
#bg-root {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #050304 !important;
  contain: layout paint style !important;
}

#bg-root .bg-image {
  position: absolute !important;
  inset: -2vh -2vw !important;
  z-index: 0 !important;
  background-image: var(--v108-master-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(var(--v97-cursor-bg-x), calc(var(--v97-scroll-bg-y) + var(--v97-cursor-bg-y)), 0) scale(1.018) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

/* Hero must not own a second image anymore. It only holds content. */
#hero,
.hero,
.hero-section {
  background: transparent !important;
  isolation: isolate !important;
}

#hero .hero-bg,
#hero .hero-bg::before,
#hero .hero-bg::after,
.hero-bg,
.hero-bg::before,
.hero-bg::after {
  background: none !important;
  background-image: none !important;
  filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

/* Remove old hero-wide visual veils that were darkening the prepared image. */
#hero::before,
#hero::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Every real UI/content layer sits above the background layer. */
.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
#hero,
main,
section,
footer,
.audio-panel,
.ruby-petals-layer {
  position: relative;
  z-index: 2 !important;
}

.nav-shell { z-index: 220 !important; }
.mobile-nav-backdrop,
.mobile-nav-sheet { z-index: 240 !important; }
.audio-panel { z-index: 210 !important; }
.ruby-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  #bg-root .bg-image {
    inset: 0 !important;
    background-image: url("../assets/hero/master-background-mobile.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
    transform: none !important;
  }

  #hero,
  .hero,
  .hero-section {
    background: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bg-root .bg-image {
    transform: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   V109 STABLE BACKGROUND LAYOUT FIX
   One visual background only. It is outside the layout and
   does not control hero/grid/flex sizing.
   ========================================================= */
html,
body {
  background: #0A0806 !important;
  overflow-x: hidden !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#bg-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #0A0806 !important;
  isolation: isolate !important;
}

#bg-root .bg-image {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../assets/hero/master-background.webp') !important;
  background-repeat: no-repeat !important;
  background-position: right top !important;
  background-size: clamp(720px, 62vw, 980px) auto !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Dark left/readability field, not a second picture. */
#bg-root::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.74) 31%, rgba(10,8,6,0.24) 58%, rgba(10,8,6,0.18) 100%),
    linear-gradient(180deg, rgba(10,8,6,0.10) 0%, rgba(10,8,6,0.18) 55%, rgba(10,8,6,0.54) 100%);
  pointer-events: none !important;
}

/* Kill the old hero image layer completely. */
#hero {
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

#hero .hero-bg,
.hero-bg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
#hero,
section,
.audio-dock,
.ruby-petals-layer {
  position: relative;
  z-index: 2;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
.audio-dock,
.ruby-petals-layer {
  z-index: 20;
}

.ruby-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  #bg-root .bg-image {
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  #bg-root::after {
    background:
      linear-gradient(180deg, rgba(10,8,6,0.08) 0%, rgba(10,8,6,0.20) 52%, rgba(10,8,6,0.66) 100%) !important;
  }

  #hero,
  #hero .hero-left,
  #hero .hero-right {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   V110 HARD FINAL BACKGROUND + MOBILE LAYOUT OVERRIDE
   This block must stay at the VERY END of main.css.
   Goal: one background layer, no old hero/body background, no layout shift.
   ========================================================= */
html,
body {
  width: 100% !important;
  min-width: 320px !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #0A0806 !important;
}

body::before,
body::after,
#hero::before,
#hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

#bg-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #0A0806 !important;
  isolation: isolate !important;
}

#bg-root .bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../assets/hero/master-background.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

#bg-root::before,
#bg-root::after {
  content: none !important;
  display: none !important;
}

#hero .hero-bg,
.hero-bg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
#hero,
main,
section,
footer,
.audio-dock,
.ruby-petals-layer {
  position: relative;
  z-index: 2;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
.audio-dock {
  z-index: 50 !important;
}

.ruby-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 12 !important;
}

#hero {
  background: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  #hero {
    min-height: 100svh !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #bg-root {
    height: 100svh !important;
  }

  #bg-root .bg-image {
    background-size: cover !important;
    background-position: center top !important;
  }

  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: calc(env(safe-area-inset-top) + 122px) 18px calc(env(safe-area-inset-bottom) + 112px) !important;
    margin: 0 !important;
  }

  #hero .hero-left,
  #hero .hero-right {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #hero .hero-left {
    order: 1 !important;
    display: block !important;
    padding: 0 !important;
    z-index: 14 !important;
  }

  #hero .hero-right {
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin-top: 22px !important;
    z-index: 15 !important;
  }

  #hero .hero-title,
  #hero .hero-tagline,
  #hero .hero-contract,
  #hero .heat-row,
  #hero .heat-row--above-contract {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero .hero-title {
    font-size: clamp(44px, 15vw, 66px) !important;
    line-height: 0.94 !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    max-width: 72vw !important;
    width: clamp(160px, 52vw, 230px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nav-shell {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  .audio-dock {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(env(safe-area-inset-top) + 112px) !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    max-width: 74vw !important;
    width: clamp(150px, 56vw, 216px) !important;
  }

  .nav-shell {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* =========================================================
   V111 HARD LAYOUT RESTORE — ONE BACKGROUND, HERO NOT SHIFTED
   Added at the very end on purpose: this wins over legacy CSS.
   Goals:
   1) one background only (#bg-root .bg-image)
   2) desktop hero centered and not pushed right
   3) mobile hero starts at the top under nav, not after a fake background block
   4) restore visible interactive book
   5) no horizontal overflow
   ========================================================= */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #0A0806 !important;
}

body::before,
body::after,
#hero::before,
#hero::after,
#hero .hero-bg,
#hero .hero-right-glow {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
}

#bg-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: #0A0806 !important;
}

#bg-root .bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../assets/hero/master-background.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

#bg-root::before,
#bg-root::after {
  content: none !important;
  display: none !important;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
#hero,
main,
section,
footer,
.audio-dock,
.audio-panel,
.ruby-petals-layer {
  position: relative;
  z-index: 2;
}

.nav-shell,
.mobile-nav-backdrop,
.mobile-nav-sheet,
.audio-dock,
.audio-panel {
  z-index: 60 !important;
}

/* Desktop: rebuild only the hero geometry, not the visual design. */
@media (min-width: 769px) {
  .nav-shell {
    position: fixed !important;
    top: 12px !important;
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.92fr) minmax(260px, 0.62fr) !important;
    column-gap: clamp(32px, 6vw, 96px) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 112px clamp(28px, 7vw, 128px) 72px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #hero .hero-left {
    position: relative !important;
    order: 1 !important;
    z-index: 12 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 640px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #hero .hero-right {
    position: relative !important;
    order: 2 !important;
    inset: auto !important;
    z-index: 20 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: clamp(230px, 24vw, 370px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #hero .book-closed {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    pointer-events: auto !important;
  }
}

/* Mobile: hero is content-first; background is not a layout block. */
@media (max-width: 768px) {
  #bg-root .bg-image {
    background-size: cover !important;
    background-position: center top !important;
  }

  .nav-shell {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .nav-shell nav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top) + 118px) 18px calc(env(safe-area-inset-bottom) + 120px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #hero .hero-left {
    position: relative !important;
    order: 1 !important;
    z-index: 16 !important;
    flex: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #hero .hero-right {
    position: relative !important;
    order: 2 !important;
    inset: auto !important;
    z-index: 18 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 22px auto 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #hero .hero-title,
  #hero .hero-tagline,
  #hero .hero-contract,
  #hero .heat-row,
  #hero .heat-row--above-contract {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero .hero-title {
    font-size: clamp(42px, 14vw, 64px) !important;
    line-height: 0.95 !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: clamp(150px, 52vw, 220px) !important;
    max-width: 74vw !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #hero .book-closed {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    pointer-events: auto !important;
  }

  .audio-dock,
  .audio-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(env(safe-area-inset-top) + 110px) !important;
  }

  .nav-shell {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ===================== V112 MOBILE HERO BOOK RESTORE + SPICE ICONS =====================
   Purpose:
   1) On mobile, return the interactive book to the top of the hero content area.
   2) Prevent the stage from collapsing: the closed book is absolutely positioned, so
      the stage needs a real height on mobile and desktop.
   3) Restore 5 spice icons: 3 lit fire icons + 2 dim/extinguished fire icons.
   ================================================================================ */

/* Spice row: always show five fire icons; inactive icons are dim, not replaced by water. */
.heat-flame {
  font-size: 0 !important;
  overflow: visible !important;
}

.heat-flame::before {
  content: '🔥' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0.28 !important;
  filter: grayscale(1) brightness(0.55) saturate(0.35) !important;
  transform: scale(0.92) !important;
}

.heat-flame.on::before {
  content: '🔥' !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px rgba(212,175,55,0.38)) saturate(1.15) brightness(1.05) !important;
  transform: scale(1) !important;
}

.heat-flame:not(.on) {
  border-color: rgba(212,180,106,0.15) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(120,80,45,0.12), rgba(10,8,8,0.76) 72%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

/* Desktop: keep the book visible without allowing its internal stage to collapse. */
@media (min-width: 769px) {
  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(260px, 25vw, 390px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 420px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #hero .interactive-book .stage {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(260px, 25vw, 390px) !important;
    max-width: 100% !important;
    height: clamp(380px, 38vw, 560px) !important;
    min-height: 380px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #hero .book-closed {
    position: absolute !important;
    display: block !important;
    width: clamp(220px, 20vw, 330px) !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Mobile: book first, then title/spice/contract. No empty top void. */
@media (max-width: 768px) {
  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: calc(env(safe-area-inset-top) + 104px) 16px calc(env(safe-area-inset-bottom) + 116px) !important;
    overflow: hidden !important;
  }

  #hero .hero-right {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(210px, 50vw, 285px) !important;
    margin: 0 auto 4px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 20 !important;
  }

  #hero .hero-left {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 18 !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(58vw, 230px) !important;
    max-width: 230px !important;
    height: auto !important;
    min-height: clamp(210px, 50vw, 285px) !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #hero .interactive-book .stage {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(58vw, 230px) !important;
    max-width: 230px !important;
    height: clamp(210px, 50vw, 285px) !important;
    min-height: clamp(210px, 50vw, 285px) !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #hero .book-closed {
    position: absolute !important;
    display: block !important;
    width: min(52vw, 210px) !important;
    max-width: 210px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #hero .spread {
    width: min(82vw, 330px) !important;
    max-width: 330px !important;
  }

  #hero .hero-title {
    margin-top: 2px !important;
  }

  #hero .heat-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero .heat-flames {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 9px !important;
  }

  #hero .heat-flame {
    width: 30px !important;
    height: 30px !important;
  }

  #hero .heat-flame::before {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 96px) !important;
    gap: 8px !important;
  }

  #hero .hero-right {
    min-height: clamp(190px, 48vw, 250px) !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    width: min(54vw, 205px) !important;
    max-width: 205px !important;
    height: clamp(190px, 48vw, 250px) !important;
    min-height: clamp(190px, 48vw, 250px) !important;
  }

  #hero .book-closed {
    width: min(49vw, 190px) !important;
    max-width: 190px !important;
  }
}

/* ===================== V113 HERO STRUCTURE + BOOK/SPICE/PETALS FIX =====================
   Fixes:
   1) index.html: removed extra closing div after .hero-left.
   2) book stays inside hero and first on mobile.
   3) spice level shows 5 fire icons: 3 lit + 2 dimmed.
   4) petals are visible again.
   5) book levitation is restored; closed cover is hidden when spread opens.
   ================================================================================ */

.heat-flames {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.heat-flame {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.heat-flame::before {
  content: "🔥" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 0.28 !important;
  filter: grayscale(1) brightness(0.48) saturate(0.25) !important;
  transform: scale(0.88) !important;
  text-shadow: none !important;
}

.heat-flame.on::before {
  opacity: 1 !important;
  filter: saturate(1.18) brightness(1.08) drop-shadow(0 0 8px rgba(238, 185, 73, 0.48)) !important;
  transform: scale(1) !important;
}

.ruby-petals-layer {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.ruby-petal {
  --petal-opacity: 0.82 !important;
  opacity: var(--petal-opacity) !important;
  filter: saturate(1.15) brightness(0.92) drop-shadow(0 8px 14px rgba(0,0,0,0.42)) !important;
}
.ruby-petal[data-depth="far"] { opacity: 0.58 !important; }
.ruby-petal[data-depth="mid"] { opacity: 0.74 !important; }
.ruby-petal[data-depth="near"] { opacity: 0.88 !important; }

#hero .interactive-book .levitate {
  animation: v113BookLevitate 5.2s ease-in-out infinite !important;
  will-change: translate !important;
}
@keyframes v113BookLevitate {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}
#hero .interactive-book .aura {
  animation: auraPulse 5.2s ease-in-out infinite !important;
  opacity: 0.9 !important;
}
#hero .stage.is-open .book-closed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#hero .stage.is-open .spread {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1.08) !important;
  z-index: 50 !important;
}

@media (min-width: 769px) {
  #hero {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.95fr) minmax(300px, 0.75fr) !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: clamp(20px, 4vw, 72px) !important;
  }
  #hero .hero-left {
    grid-column: 1 !important;
    justify-self: center !important;
    max-width: 720px !important;
    width: min(720px, 88%) !important;
  }
  #hero .hero-right {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: min(420px, 32vw) !important;
    max-width: 420px !important;
    min-height: 480px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 25 !important;
  }
  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    width: min(380px, 29vw) !important;
    max-width: 380px !important;
    height: 520px !important;
    min-height: 520px !important;
  }
  #hero .book-closed {
    width: min(330px, 24vw) !important;
    max-width: 330px !important;
  }
  #hero .spread {
    width: min(720px, 58vw) !important;
    max-width: 720px !important;
    height: min(520px, 42vw) !important;
    max-height: 520px !important;
  }
}

@media (max-width: 768px) {
  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100svh !important;
    height: auto !important;
    gap: 8px !important;
    padding: calc(env(safe-area-inset-top) + 82px) 14px calc(env(safe-area-inset-bottom) + 110px) !important;
    overflow: hidden !important;
  }
  #hero .hero-right {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 244px !important;
    margin: 0 auto -2px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 30 !important;
  }
  #hero .hero-left {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 24 !important;
  }
  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: min(64vw, 250px) !important;
    max-width: 250px !important;
    height: 244px !important;
    min-height: 244px !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #hero .book-closed {
    position: absolute !important;
    display: block !important;
    width: min(58vw, 226px) !important;
    max-width: 226px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  #hero .spread {
    width: min(92vw, 390px) !important;
    max-width: 390px !important;
    height: min(64vw, 290px) !important;
    max-height: 290px !important;
  }
  #hero .stage.is-open .spread {
    transform: scale(1.02) !important;
  }
  #hero .controls,
  #hero .hint {
    display: none !important;
  }
  #hero .hero-divider { margin-top: 0 !important; }
  #hero .hero-title { margin-top: 0 !important; }
  #hero .heat-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }
  #hero .heat-flames {
    display: inline-flex !important;
    gap: 9px !important;
  }
  #hero .heat-flame {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  #hero .heat-flame::before {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 76px) !important;
    gap: 6px !important;
  }
  #hero .hero-right {
    min-height: 224px !important;
  }
  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    width: min(62vw, 226px) !important;
    max-width: 226px !important;
    height: 224px !important;
    min-height: 224px !important;
  }
  #hero .book-closed {
    width: min(56vw, 206px) !important;
    max-width: 206px !important;
  }
}

/* ===================== V115 REAL HERO STRUCTURE + MOBILE BOOK GAP FIX ===================== */
#hero .heat-row .heat-flames{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:190px!important;flex:0 0 auto!important;overflow:visible!important}
#hero .heat-row .heat-flame{position:relative!important;display:inline-grid!important;place-items:center!important;flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;border-radius:999px!important;overflow:visible!important;color:transparent!important;font-size:0!important;line-height:1!important}
#hero .heat-row .heat-flame::before{content:"🔥"!important;position:absolute!important;inset:0!important;z-index:5!important;display:grid!important;place-items:center!important;font-size:17px!important;line-height:1!important;opacity:.32!important;transform:scale(.86)!important;filter:grayscale(1) brightness(.58) saturate(.25)!important;text-shadow:none!important}
#hero .heat-row .heat-flame.on::before{opacity:1!important;transform:scale(1)!important;filter:saturate(1.2) brightness(1.1) drop-shadow(0 0 7px rgba(238,185,73,.5))!important}
.ruby-petals-layer{opacity:1!important;mix-blend-mode:normal!important}.ruby-petal{opacity:.86!important;filter:saturate(1.22) brightness(.96) drop-shadow(0 10px 16px rgba(0,0,0,.48))!important}.ruby-petal[data-depth="far"]{opacity:.62!important}.ruby-petal[data-depth="mid"]{opacity:.78!important}.ruby-petal[data-depth="near"]{opacity:.92!important}
@keyframes v115BookLevitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes v115BookLevitateMobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
#hero .interactive-book .levitate{animation:v115BookLevitate 5.4s ease-in-out infinite!important;transform-origin:center center!important}
#hero .stage.is-open .book-closed{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#hero .stage.is-open .spread{opacity:1!important;visibility:visible!important;z-index:50!important}
@media(max-width:768px){#hero{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;min-height:100svh!important;height:auto!important;padding-top:calc(env(safe-area-inset-top) + 108px)!important;padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(env(safe-area-inset-bottom) + 108px)!important;gap:8px!important;overflow:hidden!important}#hero .hero-right{order:1!important;position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-height:236px!important;height:236px!important;margin:0 auto 0!important;padding:0!important;transform:none!important;opacity:1!important;visibility:visible!important;z-index:30!important}#hero .hero-left{order:2!important;position:relative!important;width:100%!important;max-width:100%!important;margin:-6px auto 0!important;padding:0!important;text-align:center!important;transform:none!important;z-index:24!important}#hero .interactive-book,#hero .interactive-book .scene,#hero .interactive-book .levitate,#hero .interactive-book .stage{display:flex!important;align-items:center!important;justify-content:center!important;width:min(60vw,228px)!important;max-width:228px!important;height:236px!important;min-height:236px!important;margin:0 auto!important;opacity:1!important;visibility:visible!important}#hero .interactive-book .levitate{animation:v115BookLevitateMobile 5.2s ease-in-out infinite!important}#hero .book-closed{position:absolute!important;display:block!important;width:min(54vw,208px)!important;max-width:208px!important;height:auto!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;z-index:8!important}#hero .spread{width:min(94vw,392px)!important;max-width:392px!important;height:min(62vw,284px)!important;max-height:284px!important;z-index:40!important}#hero .stage.is-open .spread{transform:scale(1.02)!important}#hero .heat-row .heat-flames{min-width:176px!important;gap:7px!important}#hero .heat-row .heat-flame{flex-basis:28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}#hero .heat-row .heat-flame::before{font-size:15px!important}}
@media(max-width:480px){#hero{padding-top:calc(env(safe-area-inset-top) + 98px)!important}#hero .hero-right{height:220px!important;min-height:220px!important}#hero .interactive-book,#hero .interactive-book .scene,#hero .interactive-book .levitate,#hero .interactive-book .stage{width:min(58vw,214px)!important;max-width:214px!important;height:220px!important;min-height:220px!important}#hero .book-closed{width:min(52vw,196px)!important;max-width:196px!important}}

/* ===================== V116 CLEAN MOBILE HERO ARCHITECTURE =====================
   Purpose: stop treating mobile hero as a pile of overrides.
   Scope: mobile/tablet hero + mobile menu layering only. Desktop background/content is preserved.
   Rules:
   - fixed nav is overlay, not a layout block;
   - bg-root remains the only background system;
   - mobile hero has a deterministic grid: book first, copy second;
   - the book stage has explicit height so it cannot collapse or fall below the fold;
   - mobile menu is a fixed overlay and never pushes hero content.
   ============================================================================== */

:root {
  --v116-mobile-nav-top: max(8px, env(safe-area-inset-top));
  --v116-mobile-nav-height: 74px;
  --v116-mobile-hero-gap: 8px;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* The navigation floats above the scene. It must not create or own hero spacing. */
  .nav-shell {
    position: fixed !important;
    top: var(--v116-mobile-nav-top) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  .nav-shell nav {
    min-height: var(--v116-mobile-nav-height) !important;
    height: var(--v116-mobile-nav-height) !important;
    max-height: var(--v116-mobile-nav-height) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1190 !important;
  }

  .mobile-nav-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    pointer-events: none;
  }

  .mobile-nav-sheet:not([hidden]) {
    pointer-events: auto !important;
  }

  .mobile-nav-panel {
    position: relative !important;
    z-index: 1201 !important;
    max-height: calc(100svh - 20px) !important;
    overflow-y: auto !important;
  }

  /* One background only. It sits behind all layout and never consumes vertical space. */
  #bg-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #bg-root .bg-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('../assets/hero/master-background.webp') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  body::before,
  body::after,
  #hero::before,
  #hero::after,
  #hero .hero-bg,
  #hero .hero-right-glow,
  #hero .hero-noise {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    filter: none !important;
  }

  /* Clean mobile hero grid: book first, copy second. No fake background spacer. */
  #hero {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "book"
      "copy" !important;
    align-content: start !important;
    justify-content: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: calc(var(--v116-mobile-nav-top) + var(--v116-mobile-nav-height) + var(--v116-mobile-hero-gap)) !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 108px) !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #hero .hero-right {
    grid-area: book !important;
    order: unset !important;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(270px, 70vw, 338px) !important;
    min-height: clamp(270px, 70vw, 338px) !important;
    margin: 0 auto -4px !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 32 !important;
    box-sizing: border-box !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: min(68vw, 268px) !important;
    max-width: 268px !important;
    height: clamp(270px, 70vw, 338px) !important;
    min-height: clamp(270px, 70vw, 338px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #hero .interactive-book .levitate {
    animation: v116BookLevitateMobile 5.6s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  @keyframes v116BookLevitateMobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  #hero .book-closed {
    position: absolute !important;
    display: block !important;
    width: min(64vw, 250px) !important;
    max-width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 10 !important;
  }

  #hero .spread {
    position: absolute !important;
    width: min(94vw, 408px) !important;
    max-width: 408px !important;
    height: min(64vw, 292px) !important;
    max-height: 292px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 40 !important;
  }

  #hero .stage.is-open .book-closed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #hero .stage.is-open .spread {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.04) !important;
    z-index: 60 !important;
  }

  #hero .controls,
  #hero .hint {
    display: none !important;
  }

  #hero .hero-left {
    grid-area: copy !important;
    order: unset !important;
    position: relative !important;
    display: block !important;
    width: min(100%, 720px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: -8px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 24 !important;
    box-sizing: border-box !important;
  }

  #hero .hero-divider,
  #hero .hero-author {
    margin-top: 0 !important;
  }

  #hero .hero-title {
    margin: 0 auto 8px !important;
    font-size: clamp(46px, 14vw, 68px) !important;
    line-height: 0.92 !important;
    max-width: 100% !important;
  }

  #hero .hero-tagline {
    margin: 0 auto 14px !important;
    max-width: 94% !important;
  }

  #hero .heat-row,
  #hero .heat-row--above-contract {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 14px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #hero .heat-flames {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 178px !important;
    overflow: visible !important;
  }

  #hero .heat-flame {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  #hero .heat-flame::before {
    content: "🔥" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    opacity: 0.34 !important;
    transform: scale(0.86) !important;
    filter: grayscale(1) brightness(0.58) saturate(0.25) !important;
    text-shadow: none !important;
  }

  #hero .heat-flame.on::before {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: saturate(1.2) brightness(1.1) drop-shadow(0 0 7px rgba(238,185,73,.5)) !important;
  }

  #hero .hero-contract {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .ruby-petals-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 18 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    mix-blend-mode: normal !important;
  }

  .ruby-petal {
    opacity: 0.88 !important;
    filter: saturate(1.25) brightness(0.98) drop-shadow(0 10px 18px rgba(0,0,0,.5)) !important;
  }

  .ruby-petal[data-depth="far"] { opacity: 0.66 !important; }
  .ruby-petal[data-depth="mid"] { opacity: 0.80 !important; }
  .ruby-petal[data-depth="near"] { opacity: 0.94 !important; }
}

@media (max-width: 480px) {
  :root {
    --v116-mobile-nav-height: 70px;
    --v116-mobile-hero-gap: 6px;
  }

  .nav-shell {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  #hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: calc(var(--v116-mobile-nav-top) + var(--v116-mobile-nav-height) + var(--v116-mobile-hero-gap)) !important;
  }

  #hero .hero-right,
  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    height: clamp(258px, 72vw, 318px) !important;
    min-height: clamp(258px, 72vw, 318px) !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    width: min(72vw, 260px) !important;
    max-width: 260px !important;
  }

  #hero .book-closed {
    width: min(68vw, 244px) !important;
    max-width: 244px !important;
  }
}

/* ===================== V117 MOBILE RHYTHM + BOOK LEVITATION FIX =====================
   Scope: mobile-only micro spacing and visible book levitation.
   Keeps V116 clean hero architecture intact; does not touch desktop or background system.
   ================================================================================ */

@media (max-width: 768px) {
  :root {
    --v117-mobile-nav-book-gap: 14px;
    --v117-mobile-book-title-gap: 18px;
  }

  /* Small, intentional breathing room under the fixed mobile nav. */
  #hero {
    padding-top: calc(
      var(--v116-mobile-nav-top) +
      var(--v116-mobile-nav-height) +
      var(--v117-mobile-nav-book-gap)
    ) !important;
    row-gap: 0 !important;
  }

  /* The book remains first, but now has a clean gap before the title block. */
  #hero .hero-right {
    margin: 0 auto var(--v117-mobile-book-title-gap) !important;
  }

  #hero .hero-left {
    margin: 0 auto 0 !important;
  }

  /* Make levitation visible on mobile without fighting open/close transforms. */
  #hero .interactive-book .levitate {
    animation: v117MobileBookLevitate 4.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  /* Add a tiny independent aura drift so the movement is readable even on screenshots. */
  #hero .interactive-book .stage {
    animation: v117MobileBookMicroTilt 6.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  #hero .stage.is-open {
    animation: none !important;
    transform: none !important;
  }

  @keyframes v117MobileBookLevitate {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(-0.35deg);
    }
    50% {
      transform: translate3d(0, -16px, 0) rotate(0.45deg);
    }
  }

  @keyframes v117MobileBookMicroTilt {
    0%, 100% {
      filter: drop-shadow(0 28px 34px rgba(0,0,0,.46));
    }
    50% {
      filter: drop-shadow(0 38px 44px rgba(0,0,0,.58));
    }
  }
}

@media (max-width: 480px) {
  :root {
    --v117-mobile-nav-book-gap: 12px;
    --v117-mobile-book-title-gap: 16px;
  }

  #hero {
    padding-top: calc(
      var(--v116-mobile-nav-top) +
      var(--v116-mobile-nav-height) +
      var(--v117-mobile-nav-book-gap)
    ) !important;
  }
}

/* ===================== V118 HARD MOBILE RHYTHM + VISIBLE BOOK FLOAT =====================
   Fix after V117: make the spacing and levitation visibly obvious on mobile.
   Scope: mobile only. Background/desktop/nav structure are not changed.
   ================================================================================ */

@media (max-width: 768px) {
  :root {
    --v118-nav-to-book-gap: 30px;
    --v118-book-to-title-gap: 34px;
  }

  #hero {
    padding-top: calc(
      var(--v116-mobile-nav-top) +
      var(--v116-mobile-nav-height) +
      var(--v118-nav-to-book-gap)
    ) !important;
    row-gap: 0 !important;
  }

  #hero .hero-right {
    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: var(--v118-book-to-title-gap) !important;
    margin-left: auto !important;
  }

  #hero .hero-left {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Directly animate the closed book image so the movement is visible on mobile. */
  #hero .stage:not(.is-open) .book-closed {
    animation: v118ClosedBookVisibleFloat 3.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
  }

  /* Keep the wrapper animation too, but make it gentle so it does not fight the book image. */
  #hero .interactive-book .levitate {
    animation: v118BookWrapperFloat 5.2s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  @keyframes v118ClosedBookVisibleFloat {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1);
      filter: drop-shadow(0 24px 28px rgba(0,0,0,.48));
    }
    50% {
      transform: translate3d(0, -22px, 0) rotate(1.1deg) scale(1.015);
      filter: drop-shadow(0 42px 42px rgba(0,0,0,.62));
    }
  }

  @keyframes v118BookWrapperFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
  }

  /* When the book is open, stop the closed-cover movement completely. */
  #hero .stage.is-open .book-closed {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 480px) {
  :root {
    --v118-nav-to-book-gap: 28px;
    --v118-book-to-title-gap: 32px;
  }
}

/* ===================== V119 MOBILE HERO POLISH =====================
   Mobile-only refinement requested by user:
   1) make the floating hero book a bit smaller so the hero breathes better;
   2) rebuild the spice-level panel for a cleaner dedicated mobile layout.
   Desktop remains untouched.
   ================================================================= */

@media (max-width: 768px) {
  :root {
    --v119-mobile-book-stage: clamp(236px, 60vw, 286px);
    --v119-mobile-book-shell: min(58vw, 220px);
    --v119-mobile-book-width: min(49vw, 172px);
    --v119-mobile-spice-width: min(92vw, 390px);
  }

  /* Slightly smaller book block for cleaner hero rhythm on mobile. */
  #hero .hero-right {
    height: var(--v119-mobile-book-stage) !important;
    min-height: var(--v119-mobile-book-stage) !important;
    margin-bottom: 22px !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    width: var(--v119-mobile-book-shell) !important;
    max-width: 220px !important;
    height: var(--v119-mobile-book-stage) !important;
    min-height: var(--v119-mobile-book-stage) !important;
  }

  #hero .book-closed {
    width: var(--v119-mobile-book-width) !important;
    max-width: 172px !important;
  }

  #hero .spread {
    width: min(90vw, 360px) !important;
    max-width: 360px !important;
    height: min(56vw, 248px) !important;
    max-height: 248px !important;
  }

  /* Dedicated mobile spice panel layout. */
  #hero .heat-row,
  #hero .heat-row--above-contract {
    width: var(--v119-mobile-spice-width) !important;
    max-width: var(--v119-mobile-spice-width) !important;
    margin: 16px auto 14px !important;
    padding: 16px 14px 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "label"
      "flames"
      "note"
      "micro" !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 9px !important;
    border-radius: 22px !important;
  }

  #hero .heat-label {
    grid-area: label !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 8px !important;
    letter-spacing: 0.34em !important;
  }

  #hero .heat-flames {
    grid-area: flames !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  #hero .heat-flame {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-basis: 26px !important;
  }

  #hero .heat-flame::before {
    font-size: 14px !important;
  }

  #hero .heat-note {
    grid-area: note !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    white-space: normal !important;
  }

  #hero .heat-micro {
    grid-area: micro !important;
    margin: 0 !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    font-size: 7px !important;
    letter-spacing: 0.20em !important;
  }
}

@media (max-width: 480px) {
  :root {
    --v119-mobile-book-stage: clamp(220px, 58vw, 254px);
    --v119-mobile-book-shell: min(54vw, 194px);
    --v119-mobile-book-width: min(46vw, 154px);
    --v119-mobile-spice-width: calc(100vw - 24px);
  }

  #hero .hero-right {
    margin-bottom: 18px !important;
  }

  #hero .interactive-book,
  #hero .interactive-book .scene,
  #hero .interactive-book .levitate,
  #hero .interactive-book .stage {
    max-width: 194px !important;
  }

  #hero .book-closed {
    max-width: 154px !important;
  }

  #hero .spread {
    width: min(90vw, 330px) !important;
    max-width: 330px !important;
    height: min(54vw, 220px) !important;
    max-height: 220px !important;
  }

  #hero .heat-row,
  #hero .heat-row--above-contract {
    padding: 14px 12px 13px !important;
    gap: 8px !important;
    border-radius: 20px !important;
  }

  #hero .heat-label {
    font-size: 7px !important;
    letter-spacing: 0.32em !important;
  }

  #hero .heat-note {
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }
}

/* ===================== V124 AUDIO PANEL FIX + PREMIUM BEHAVIOR =====================
   Purpose: keep audio controls permanently visible and easy to pause/adjust.
   Scope: audio dock only. Hero/background/book/nav architecture remains untouched.
   =============================================================================== */

.audio-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 1150 !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  min-height: 74px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
  will-change: transform, opacity !important;
  contain: layout paint !important;
}

.audio-dock::before,
.audio-dock::after {
  pointer-events: none !important;
}

.audio-dock .audio-button,
.audio-dock .audio-volume-slider,
.audio-dock input,
.audio-dock button {
  pointer-events: auto !important;
}

/* Give the end of the page enough breathing room so the fixed player never hides the footer. */
body {
  padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

footer {
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 768px) {
  .audio-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
    gap: 9px !important;
    border-radius: 20px !important;
    z-index: 1150 !important;
  }

  .audio-dock .audio-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 16px !important;
  }

  .audio-dock .audio-visualizer {
    min-width: 32px !important;
    width: 32px !important;
    height: 28px !important;
    gap: 2px !important;
  }

  .audio-dock .audio-controls {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
  }

  .audio-dock .audio-track-title {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    letter-spacing: 0.20em !important;
  }

  .audio-dock .audio-volume-row {
    gap: 7px !important;
  }

  .audio-dock .audio-volume-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }

  .audio-dock .audio-volume-slider {
    min-width: 0 !important;
    width: 100% !important;
  }

  .audio-dock .audio-volume-value {
    min-width: 40px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    text-align: right !important;
  }

  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  footer {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  .audio-dock {
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 60px !important;
    padding: 7px 8px !important;
    gap: 7px !important;
  }

  .audio-dock .audio-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }

  .audio-dock .audio-visualizer {
    display: none !important;
  }

  .audio-dock .audio-track-title {
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
  }

  .audio-dock .audio-volume-value {
    min-width: 36px !important;
    font-size: 8px !important;
  }
}

/* The mobile menu should remain above the player only while open. */
.mobile-nav-backdrop:not([hidden]),
.mobile-nav-sheet:not([hidden]) {
  z-index: 1200 !important;
}

/* ===================== V125 DESKTOP AUDIO CORNER REFINEMENT =====================
   User request: desktop player should sit in the bottom-right corner and stop
   wasting empty space on the right. Mobile behavior from V124 remains unchanged.
   =============================================================================== */

@media (min-width: 769px) {
  .audio-dock {
    left: auto !important;
    right: 28px !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: 430px !important;
    max-width: min(430px, calc(100vw - 56px)) !important;
    min-height: 68px !important;
    padding: 10px 14px 10px 10px !important;
    gap: 12px !important;
    border-radius: 22px !important;
  }

  .audio-dock .audio-button {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 18px !important;
  }

  .audio-dock .audio-visualizer {
    min-width: 36px !important;
    width: 36px !important;
    height: 30px !important;
    gap: 2px !important;
    flex: 0 0 36px !important;
  }

  .audio-dock .audio-controls {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 292px !important;
    gap: 7px !important;
  }

  .audio-dock .audio-track-title {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
  }

  .audio-dock .audio-volume-row {
    gap: 8px !important;
  }

  .audio-dock .audio-volume-slider {
    min-width: 0 !important;
    width: 100% !important;
  }

  .audio-dock .audio-volume-value {
    min-width: 42px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    text-align: right !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .audio-dock {
    right: 20px !important;
    width: 390px !important;
    max-width: calc(100vw - 40px) !important;
  }

  .audio-dock .audio-controls {
    max-width: 254px !important;
  }
}

/* ===================== V126 HERO LEFT EDITORIAL REDESIGN =====================
   Scope: left hero column only. Background, book, nav, audio and V119 mobile core remain intact.
   Visual direction: clean luxury editorial, fewer heavy plaques, stronger hierarchy.
   =========================================================================== */

#hero .hero-left--editorial {
  max-width: 640px !important;
  padding-top: clamp(132px, 14vh, 178px) !important;
  padding-right: 34px !important;
  gap: 0 !important;
}

#hero .hero-left--editorial::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: max(-34px, -3vw);
  top: clamp(100px, 12vh, 142px);
  width: min(680px, 48vw);
  height: 78%;
  border-radius: 38px;
  background:
    radial-gradient(circle at 12% 18%, rgba(232,217,168,0.10), transparent 34%),
    linear-gradient(90deg, rgba(4,3,3,0.72) 0%, rgba(7,5,5,0.46) 48%, rgba(7,5,5,0.00) 100%);
  filter: blur(0.2px);
  pointer-events: none;
}

.hero-editorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 0 22px;
  font-family: var(--ff-sans);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(248,241,227,0.74);
  text-shadow: 0 0 14px rgba(212,175,55,0.12);
  opacity: 0;
  animation: hFadeUp 0.8s 0.12s forwards;
}

.hero-editorial-kicker i {
  display: block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.05), rgba(212,175,55,0.58), rgba(212,175,55,0.05));
}

#hero .hero-left--editorial .hero-title {
  max-width: 600px !important;
  margin: 0 0 16px !important;
  font-size: clamp(78px, 6.2vw, 122px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

#hero .hero-left--editorial .hero-title em {
  display: block !important;
  margin-top: 2px !important;
  padding-bottom: 0.08em !important;
}

#hero .hero-left--editorial .hero-tagline {
  max-width: 560px !important;
  margin: 0 0 22px !important;
  padding: 0 0 0 18px !important;
  border-left: 1px solid rgba(232,217,168,0.42) !important;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.28 !important;
  color: rgba(255,248,232,0.86) !important;
}

#hero .hero-contract--editorial {
  width: min(590px, 100%) !important;
  max-width: 590px !important;
  margin: 0 0 14px !important;
  padding: 20px 20px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008)),
    linear-gradient(180deg, rgba(11,9,8,0.78), rgba(5,4,4,0.70)) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -18px 30px rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(10px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(116%) !important;
}

#hero .hero-contract--editorial .hero-contract-promise {
  margin: 0 0 15px !important;
  max-width: 520px !important;
  font-family: var(--ff-sans) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(248,241,227,0.82) !important;
}

#hero .hero-left--editorial .hero-contract-markers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 100% !important;
}

#hero .hero-left--editorial .hero-contract-markers span {
  width: auto !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  background:
    linear-gradient(180deg, rgba(20,17,15,0.92), rgba(5,4,4,0.94)) !important;
}

#hero .heat-row--editorial {
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  min-height: 44px !important;
  margin: 0 0 18px !important;
  padding: 9px 14px !important;
  border-radius: 18px !important;
  gap: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.006)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(7,6,6,0.94), rgba(3,3,3,0.96)) !important;
}

#hero .heat-row--editorial .heat-label,
#hero .heat-row--editorial .heat-note,
#hero .heat-row--editorial .heat-micro {
  font-size: 8px !important;
}

#hero .heat-row--editorial .heat-flames {
  gap: 6px !important;
}

#hero .heat-row--editorial .heat-flame {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex-basis: 22px !important;
}

#hero .heat-row--editorial .heat-flame::before {
  font-size: 12px !important;
}

.hero-editorial-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, 100%);
  opacity: 0;
  animation: hFadeUp 0.8s 0.78s forwards;
}

.hero-editorial-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  overflow: hidden;
}

.hero-editorial-btn--primary {
  min-width: 176px;
  color: #181008;
  border: 1px solid rgba(255,239,180,0.72);
  background:
    linear-gradient(120deg, #8e621a 0%, #d6b35a 36%, #fff1b8 52%, #b98522 78%, #6f4712 100%);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.22),
    0 14px 34px rgba(0,0,0,0.32),
    0 0 28px rgba(212,175,55,0.16),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

.hero-editorial-btn--ghost {
  min-width: 176px;
  color: rgba(248,241,227,0.86);
  border: 1px solid rgba(212,175,55,0.30);
  background:
    linear-gradient(180deg, rgba(18,15,14,0.78), rgba(5,4,4,0.76));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 24px rgba(0,0,0,0.22);
}

.hero-editorial-btn:hover {
  transform: translateY(-2px);
}

.hero-editorial-btn--primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,239,180,0.34),
    0 18px 42px rgba(0,0,0,0.36),
    0 0 42px rgba(212,175,55,0.26),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

.hero-editorial-btn--ghost:hover {
  border-color: rgba(232,217,168,0.54);
  color: #fff4d0;
}

@media (max-width: 768px) {
  #hero .hero-left--editorial {
    padding-top: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  #hero .hero-left--editorial::before {
    display: none !important;
  }

  .hero-editorial-kicker {
    justify-content: center;
    margin: 0 auto 12px;
    gap: 9px;
    font-size: 7px;
    letter-spacing: 0.26em;
  }

  .hero-editorial-kicker i {
    width: 28px;
  }

  #hero .hero-left--editorial .hero-title {
    margin: 0 auto 10px !important;
    font-size: clamp(48px, 14vw, 68px) !important;
    line-height: 0.92 !important;
    max-width: 94vw !important;
  }

  #hero .hero-left--editorial .hero-tagline {
    margin: 0 auto 14px !important;
    padding: 0 !important;
    border-left: 0 !important;
    max-width: 92vw !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.24 !important;
    text-align: center !important;
  }

  #hero .hero-contract--editorial {
    width: min(92vw, 430px) !important;
    max-width: min(92vw, 430px) !important;
    margin: 0 auto 14px !important;
    padding: 17px 14px 15px !important;
    border-radius: 22px !important;
  }

  #hero .hero-contract--editorial .hero-contract-promise {
    max-width: 100% !important;
    margin: 0 0 13px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  #hero .hero-left--editorial .hero-contract-markers {
    justify-content: center !important;
    gap: 8px !important;
  }

  #hero .hero-left--editorial .hero-contract-markers span {
    min-width: min(100%, 160px) !important;
    height: 34px !important;
    justify-content: center !important;
  }

  #hero .heat-row--editorial,
  #hero .heat-row--above-contract.heat-row--editorial {
    width: min(92vw, 390px) !important;
    max-width: min(92vw, 390px) !important;
    margin: 0 auto 14px !important;
    padding: 14px 12px 13px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "flames" "note" "micro" !important;
    justify-items: center !important;
    gap: 8px !important;
  }

  .hero-editorial-cta {
    width: min(92vw, 430px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-editorial-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 18px;
    font-size: 8px;
  }
}

/* ===================== V127 HERO SPICE PANEL REFINEMENT =====================
   User request: make the Spice Level plaque match the width of the upper
   editorial information card and restore a clear 3/5 fire scale:
   3 glowing active flames + 2 dimmed inactive flames.
   Scope: hero spice panel only.
   ========================================================================== */

#hero .hero-left--editorial .heat-row--editorial,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
  width: min(590px, 100%) !important;
  max-width: 590px !important;
  min-height: 54px !important;
  margin: 0 0 18px !important;
  padding: 10px 18px !important;
  display: grid !important;
  grid-template-columns: auto auto 1fr auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 18px !important;
  border-radius: 22px !important;
  overflow: visible !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-label {
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 8px !important;
  letter-spacing: 0.32em !important;
  color: rgba(232,217,168,0.66) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flames {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 152px !important;
  margin: 0 !important;
  overflow: visible !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,244,214,0.09), transparent 44%),
    linear-gradient(180deg, rgba(20,15,12,0.92), rgba(7,6,6,0.96)) !important;
  border: 1px solid rgba(212,175,55,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 8px rgba(0,0,0,0.28) !important;
  filter: none !important;
  transform: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::before {
  content: "🔥" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 0.18 !important;
  transform: scale(0.86) !important;
  filter: grayscale(1) brightness(0.44) saturate(0.20) !important;
  text-shadow: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: inherit !important;
  background: radial-gradient(circle, rgba(212,175,55,0.00), transparent 70%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on {
  border-color: rgba(232,217,168,0.54) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,244,213,0.28), transparent 42%),
    radial-gradient(circle at 50% 68%, rgba(255,117,42,0.20), transparent 56%),
    linear-gradient(180deg, rgba(76,39,14,0.98), rgba(18,10,7,0.96)) !important;
  box-shadow:
    0 0 13px rgba(212,175,55,0.20),
    0 0 22px rgba(156,47,47,0.10),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::before {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: saturate(1.22) brightness(1.16) drop-shadow(0 0 7px rgba(238,185,73,.58)) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::after {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 68%) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-note {
  justify-self: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  color: rgba(248,241,227,0.72) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-micro {
  justify-self: end !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  font-size: 7px !important;
  letter-spacing: 0.22em !important;
  border-radius: 999px !important;
}

@media (max-width: 768px) {
  #hero .hero-left--editorial .heat-row--editorial,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
    width: min(92vw, 390px) !important;
    max-width: min(92vw, 390px) !important;
    margin: 0 auto 14px !important;
    padding: 14px 12px 13px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "flames" "note" "micro" !important;
    justify-items: center !important;
    gap: 8px !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-label { grid-area: label !important; text-align: center !important; }
  #hero .hero-left--editorial .heat-row--editorial .heat-flames { grid-area: flames !important; min-width: 156px !important; }
  #hero .hero-left--editorial .heat-row--editorial .heat-note { grid-area: note !important; justify-self: center !important; }
  #hero .hero-left--editorial .heat-row--editorial .heat-micro { grid-area: micro !important; justify-self: center !important; }
}

/* ===================== V128 SITE EDIT: SPICE FIRE + GLASS CONTRACT =====================
   User request: website edit only.
   1) Spice Level: 3 real glowing fire icons + 2 same fire icons extinguished/dimmed.
   2) Hero description/tropes window: lighter glass transparency closer to Where to Read cards.
   Scope: hero-left editorial panels only. Background/book/nav/audio/mobile core untouched.
   ================================================================================ */

#hero .hero-left--editorial .heat-row--editorial,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
  width: min(590px, 100%) !important;
  max-width: 590px !important;
  min-height: 56px !important;
  padding: 10px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(232,217,168,0.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 10px),
    rgba(7,6,6,0.68) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.26),
    0 0 0 1px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -16px 30px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(14px) saturate(122%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(122%) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flames {
  gap: 9px !important;
  min-width: 164px !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  border-radius: 50% !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,244,211,0.08), transparent 44%),
    linear-gradient(180deg, rgba(22,18,15,0.86), rgba(4,4,4,0.90)) !important;
  border: 1px solid rgba(232,217,168,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(0,0,0,0.30),
    0 0 12px rgba(0,0,0,0.22) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::before {
  content: "🔥" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  opacity: 0.34 !important;
  transform: scale(0.92) !important;
  filter: grayscale(1) brightness(0.46) saturate(0.25) contrast(0.92) !important;
  text-shadow: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::after {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(255,135,39,0.00), transparent 70%) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on {
  border-color: rgba(255,235,174,0.58) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,244,213,0.35), transparent 40%),
    radial-gradient(circle at 50% 68%, rgba(255,106,36,0.26), transparent 56%),
    linear-gradient(180deg, rgba(88,42,14,0.98), rgba(18,10,7,0.96)) !important;
  box-shadow:
    0 0 13px rgba(212,175,55,0.24),
    0 0 24px rgba(255,109,35,0.13),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::before {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  filter: saturate(1.34) brightness(1.16) drop-shadow(0 0 7px rgba(255,170,48,0.66)) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::after {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(255,168,42,0.22), transparent 70%) !important;
}

#hero .hero-contract--editorial {
  border: 1px solid rgba(232,217,168,0.28) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.070), rgba(255,255,255,0.016)),
    radial-gradient(circle at 20% 0%, rgba(212,175,55,0.060), transparent 38%),
    rgba(8,7,6,0.48) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,0.24),
    0 0 0 1px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -18px 34px rgba(0,0,0,0.16) !important;
  backdrop-filter: blur(16px) saturate(124%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(124%) !important;
}

#hero .hero-contract--editorial .hero-contract-promise {
  color: rgba(248,241,227,0.88) !important;
}

#hero .hero-left--editorial .hero-contract-markers span {
  border-color: rgba(212,175,55,0.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.006)),
    rgba(8,7,7,0.50) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

@media (max-width: 768px) {
  #hero .hero-left--editorial .heat-row--editorial,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
    width: min(92vw, 390px) !important;
    max-width: min(92vw, 390px) !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-flames {
    min-width: 165px !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-flame {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-basis: 26px !important;
  }
}

/* ===================== V129 CODE-ONLY HOTFIX: HERO SPICE FIRE ICONS =====================
   Scope: hero Spice Level card only.
   Keeps V128 glass contract, background, book, nav, audio and mobile core untouched.
   Goal: reference-style round gold-rim fire icons: 3 lit + 2 dim/extinguished.
   ================================================================================ */

#hero .hero-left--editorial .heat-row--editorial,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
  width: min(590px, 100%) !important;
  max-width: 590px !important;
  min-height: 58px !important;
  grid-template-columns: auto auto 1fr auto !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flames {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 176px !important;
  margin: 0 !important;
  overflow: visible !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  border: 1px solid rgba(212,175,55,0.36) !important;
  background:
    radial-gradient(circle at 50% 29%, rgba(255,238,181,0.10), transparent 38%),
    radial-gradient(circle at 50% 74%, rgba(0,0,0,0.44), transparent 62%),
    linear-gradient(180deg, rgba(24,19,15,0.92), rgba(5,5,5,0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -7px 12px rgba(0,0,0,0.42),
    0 0 0 1px rgba(0,0,0,0.42),
    0 0 12px rgba(212,175,55,0.08) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::before {
  content: "🔥" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: initial !important;
  opacity: 0.24 !important;
  transform: translateY(-0.5px) scale(0.84) !important;
  filter: grayscale(1) brightness(0.40) saturate(0.16) contrast(0.92) !important;
  text-shadow: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame::after {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle, rgba(255,184,63,0.28), transparent 64%) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on,
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(-n + 3) {
  border-color: rgba(255,229,153,0.76) !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,247,212,0.38), transparent 36%),
    radial-gradient(circle at 50% 56%, rgba(255,126,35,0.34), transparent 58%),
    linear-gradient(180deg, rgba(103,49,15,0.98), rgba(20,9,6,0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -8px 14px rgba(59,16,5,0.42),
    0 0 0 1px rgba(0,0,0,0.36),
    0 0 13px rgba(255,184,63,0.26),
    0 0 24px rgba(255,103,35,0.15) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::before,
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(-n + 3)::before {
  opacity: 1 !important;
  transform: translateY(-0.5px) scale(1.05) !important;
  filter: saturate(1.48) brightness(1.20) contrast(1.05) drop-shadow(0 0 7px rgba(255,173,46,0.72)) !important;
  text-shadow:
    0 0 7px rgba(255,208,103,0.40),
    0 0 13px rgba(255,102,31,0.26) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame.on::after,
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(-n + 3)::after {
  opacity: 1 !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame:not(.on),
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(n + 4) {
  border-color: rgba(212,175,55,0.30) !important;
  background:
    radial-gradient(circle at 50% 27%, rgba(232,217,168,0.06), transparent 36%),
    linear-gradient(180deg, rgba(18,16,14,0.88), rgba(4,4,4,0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -7px 12px rgba(0,0,0,0.46),
    0 0 0 1px rgba(0,0,0,0.42),
    0 0 8px rgba(212,175,55,0.04) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame:not(.on)::before,
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(n + 4)::before {
  content: "🔥" !important;
  opacity: 0.26 !important;
  transform: translateY(-0.5px) scale(0.86) !important;
  filter: grayscale(1) brightness(0.36) saturate(0.12) contrast(0.88) !important;
  text-shadow: none !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-flame:not(.on)::after,
#hero .hero-left--editorial .heat-row--editorial .heat-flame:nth-child(n + 4)::after {
  opacity: 0 !important;
}

@media (max-width: 768px) {
  #hero .hero-left--editorial .heat-row--editorial,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial {
    width: min(92vw, 390px) !important;
    max-width: min(92vw, 390px) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "flames" "note" "micro" !important;
    justify-items: center !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-flames {
    min-width: 170px !important;
    gap: 8px !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-flame {
    flex-basis: 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  #hero .hero-left--editorial .heat-row--editorial .heat-flame::before {
    font-size: 16px !important;
  }
}

/* ===================== V130 CODE-ONLY HOTFIX: HERO BOOK LEVITATION RESTORE =====================
   Scope: interactive hero book motion only.
   Restores visible levitation on desktop and mobile without changing HTML, JS, background,
   nav, audio, book asset, mobile layout core, or Spice Level styling.
   ============================================================================================ */

#hero .interactive-book .levitate {
  animation: v130HeroBookLevitateDesktop 5.6s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

#hero .interactive-book .aura {
  animation: v130HeroBookAuraPulse 5.6s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: v130HeroClosedBookBreathDesktop 5.6s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

#hero .stage.is-open .book-closed {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#hero .stage.is-open .spread {
  animation: none !important;
}

@keyframes v130HeroBookLevitateDesktop {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.25deg);
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(0.35deg);
  }
}

@keyframes v130HeroClosedBookBreathDesktop {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.35deg);
    filter:
      drop-shadow(0 38px 54px rgba(0,0,0,0.70))
      drop-shadow(0 0 42px rgba(201,169,110,0.10));
  }
  50% {
    transform: translate3d(0, -7px, 0) scale(1.012) rotate(0.45deg);
    filter:
      drop-shadow(0 52px 66px rgba(0,0,0,0.82))
      drop-shadow(0 0 54px rgba(232,212,160,0.18));
  }
}

@keyframes v130HeroBookAuraPulse {
  0%, 100% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(1.13);
  }
}

@media (max-width: 768px) {
  #hero .interactive-book .levitate {
    animation: v130HeroBookLevitateMobile 4.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: v130HeroClosedBookBreathMobile 4.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
  }

  #hero .interactive-book .aura {
    animation: v130HeroBookAuraPulseMobile 4.8s ease-in-out infinite !important;
  }

  #hero .stage.is-open .book-closed {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@keyframes v130HeroBookLevitateMobile {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.35deg);
  }
  50% {
    transform: translate3d(0, -13px, 0) rotate(0.45deg);
  }
}

@keyframes v130HeroClosedBookBreathMobile {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.75deg);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,0.48));
  }
  50% {
    transform: translate3d(0, -9px, 0) scale(1.014) rotate(0.75deg);
    filter: drop-shadow(0 40px 42px rgba(0,0,0,0.62));
  }
}

@keyframes v130HeroBookAuraPulseMobile {
  0%, 100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .interactive-book .levitate,
  #hero .stage:not(.is-open) .book-closed,
  #hero .interactive-book .aura {
    animation-duration: 9s !important;
  }
}

/* ===================== V131 CODE-ONLY HOTFIX: HERO BOOK LEVITATION AMPLITUDE + =====================
   Scope: interactive hero book motion only.
   Slightly increases desktop and mobile levitation amplitude while preserving existing layout,
   background, nav, audio, Spice Level, book assets, HTML, JS, and mobile core.
   ================================================================================================ */

#hero .interactive-book .levitate {
  animation: v131HeroBookLevitateDesktopMore 5.4s ease-in-out infinite !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: v131HeroClosedBookBreathDesktopMore 5.4s ease-in-out infinite !important;
}

@keyframes v131HeroBookLevitateDesktopMore {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.32deg);
  }
  50% {
    transform: translate3d(0, -25px, 0) rotate(0.52deg);
  }
}

@keyframes v131HeroClosedBookBreathDesktopMore {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.42deg);
    filter:
      drop-shadow(0 38px 54px rgba(0,0,0,0.70))
      drop-shadow(0 0 42px rgba(201,169,110,0.10));
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.016) rotate(0.58deg);
    filter:
      drop-shadow(0 58px 72px rgba(0,0,0,0.84))
      drop-shadow(0 0 58px rgba(232,212,160,0.20));
  }
}

@media (max-width: 768px) {
  #hero .interactive-book .levitate {
    animation: v131HeroBookLevitateMobileMore 4.65s ease-in-out infinite !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: v131HeroClosedBookBreathMobileMore 4.65s ease-in-out infinite !important;
  }
}

@keyframes v131HeroBookLevitateMobileMore {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.42deg);
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(0.58deg);
  }
}

@keyframes v131HeroClosedBookBreathMobileMore {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.85deg);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,0.48));
  }
  50% {
    transform: translate3d(0, -12px, 0) scale(1.018) rotate(0.9deg);
    filter: drop-shadow(0 44px 46px rgba(0,0,0,0.64));
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .interactive-book .levitate,
  #hero .stage:not(.is-open) .book-closed {
    animation-duration: 9s !important;
  }
}

/* ===================== V132 CODE-ONLY HOTFIX: STRONG HERO BOOK LEVITATION =====================
   Scope: hero interactive book motion only.
   Fixes weak desktop movement and restores clearly visible mobile levitation by animating the
   outer .interactive-book shell with independent translate/rotate properties, so mobile
   transform overrides on inner book elements cannot suppress the float.
   Keeps background, nav, audio, Spice Level, HTML, JS, assets and mobile layout core untouched.
   ============================================================================================= */

#hero .hero-right .interactive-book {
  animation: v132HeroBookShellLevitateDesktop 3.85s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: translate, rotate, filter !important;
}

#hero .interactive-book .levitate {
  animation: v132HeroBookInnerLevitateDesktop 3.85s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: v132HeroClosedBookBreathDesktop 3.85s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

#hero .interactive-book .aura {
  animation: v132HeroBookAuraPulseDesktop 3.85s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

@keyframes v132HeroBookShellLevitateDesktop {
  0%, 100% {
    translate: 0 0;
    rotate: -0.35deg;
    filter: none;
  }
  50% {
    translate: 0 -42px;
    rotate: 0.65deg;
    filter: drop-shadow(0 26px 22px rgba(0,0,0,0.16));
  }
}

@keyframes v132HeroBookInnerLevitateDesktop {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.006);
  }
}

@keyframes v132HeroClosedBookBreathDesktop {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.35deg);
    filter:
      drop-shadow(0 38px 54px rgba(0,0,0,0.70))
      drop-shadow(0 0 42px rgba(201,169,110,0.10));
  }
  50% {
    transform: translate3d(0, -14px, 0) scale(1.022) rotate(0.75deg);
    filter:
      drop-shadow(0 66px 82px rgba(0,0,0,0.86))
      drop-shadow(0 0 66px rgba(232,212,160,0.24));
  }
}

@keyframes v132HeroBookAuraPulseDesktop {
  0%, 100% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.20);
  }
}

@media (max-width: 768px) {
  #hero .hero-right .interactive-book {
    animation: v132HeroBookShellLevitateMobile 3.55s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: translate, rotate, filter !important;
  }

  #hero .interactive-book .levitate {
    animation: v132HeroBookInnerLevitateMobile 3.55s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: v132HeroClosedBookBreathMobile 3.55s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
  }

  #hero .interactive-book .aura {
    animation: v132HeroBookAuraPulseMobile 3.55s ease-in-out infinite !important;
  }
}

@keyframes v132HeroBookShellLevitateMobile {
  0%, 100% {
    translate: 0 0;
    rotate: -0.45deg;
    filter: none;
  }
  50% {
    translate: 0 -34px;
    rotate: 0.75deg;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,0.18));
  }
}

@keyframes v132HeroBookInnerLevitateMobile {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(1.008);
  }
}

@keyframes v132HeroClosedBookBreathMobile {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.7deg);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,0.50));
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.02) rotate(0.9deg);
    filter: drop-shadow(0 48px 48px rgba(0,0,0,0.68));
  }
}

@keyframes v132HeroBookAuraPulseMobile {
  0%, 100% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* ===================== V133 CODE-ONLY HOTFIX: SMOOTHER BOOK LEVITATION TEMPO =====================
   Scope: hero interactive book motion timing only.
   Keeps the V132 levitation amplitude and keyframes intact, but slows the loop slightly and uses
   a softer ease curve so the motion reads smoother on both desktop and mobile.
   Background, book assets, nav, audio, Spice Level, HTML, JS and mobile-core remain untouched.
   ================================================================================================ */

#hero .hero-right .interactive-book {
  animation: v132HeroBookShellLevitateDesktop 4.85s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
}

#hero .interactive-book .levitate {
  animation: v132HeroBookInnerLevitateDesktop 4.85s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: v132HeroClosedBookBreathDesktop 4.85s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
}

#hero .interactive-book .aura {
  animation: v132HeroBookAuraPulseDesktop 4.85s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
}

@media (max-width: 768px) {
  #hero .hero-right .interactive-book {
    animation: v132HeroBookShellLevitateMobile 4.65s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
  }

  #hero .interactive-book .levitate {
    animation: v132HeroBookInnerLevitateMobile 4.65s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: v132HeroClosedBookBreathMobile 4.65s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
  }

  #hero .interactive-book .aura {
    animation: v132HeroBookAuraPulseMobile 4.65s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
  }
}

/* ===================== V134 CODE-ONLY HOTFIX: SILKIER BOOK BREATH RHYTHM =====================
   Scope: hero book breathing rhythm only.
   Keeps V133 levitation amplitude and tempo intact. Smooths only the visible breathing layer
   — book shadow/scale and aura pulse — with extra in-between keyframes for a softer inhale/exhale.
   Background, book assets, nav, audio, Spice Level, HTML, JS and mobile-core remain untouched.
   ============================================================================================ */

#hero .stage:not(.is-open) .book-closed {
  animation: v134HeroClosedBookBreathDesktopSilk 4.85s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

#hero .interactive-book .aura {
  animation: v134HeroBookAuraPulseDesktopSilk 4.85s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

@keyframes v134HeroClosedBookBreathDesktopSilk {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.35deg);
    filter:
      drop-shadow(0 38px 54px rgba(0,0,0,0.70))
      drop-shadow(0 0 42px rgba(201,169,110,0.10));
  }
  25% {
    transform: translate3d(0, -5px, 0) scale(1.007) rotate(0.05deg);
    filter:
      drop-shadow(0 48px 64px rgba(0,0,0,0.76))
      drop-shadow(0 0 50px rgba(218,192,135,0.15));
  }
  50% {
    transform: translate3d(0, -14px, 0) scale(1.022) rotate(0.75deg);
    filter:
      drop-shadow(0 66px 82px rgba(0,0,0,0.86))
      drop-shadow(0 0 66px rgba(232,212,160,0.24));
  }
  75% {
    transform: translate3d(0, -5px, 0) scale(1.007) rotate(0.05deg);
    filter:
      drop-shadow(0 48px 64px rgba(0,0,0,0.76))
      drop-shadow(0 0 50px rgba(218,192,135,0.15));
  }
}

@keyframes v134HeroBookAuraPulseDesktopSilk {
  0%, 100% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    opacity: 0.60;
    transform: translate(-50%, -50%) scale(1.08);
  }
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.20);
  }
  75% {
    opacity: 0.60;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (max-width: 768px) {
  #hero .stage:not(.is-open) .book-closed {
    animation: v134HeroClosedBookBreathMobileSilk 4.65s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
  }

  #hero .interactive-book .aura {
    animation: v134HeroBookAuraPulseMobileSilk 4.65s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
  }
}

@keyframes v134HeroClosedBookBreathMobileSilk {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.7deg);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,0.50));
  }
  25% {
    transform: translate3d(0, -4px, 0) scale(1.006) rotate(-0.05deg);
    filter: drop-shadow(0 34px 38px rgba(0,0,0,0.58));
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.02) rotate(0.9deg);
    filter: drop-shadow(0 48px 48px rgba(0,0,0,0.68));
  }
  75% {
    transform: translate3d(0, -4px, 0) scale(1.006) rotate(-0.05deg);
    filter: drop-shadow(0 34px 38px rgba(0,0,0,0.58));
  }
}

@keyframes v134HeroBookAuraPulseMobileSilk {
  0%, 100% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(0.96);
  }
  25% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(1.02);
  }
  50% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(1.12);
  }
  75% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* ===================== V136 CODE-ONLY HOTFIX: ONE-BREATH BOOK LEVITATION =====================
   Scope: hero book levitation rhythm only.
   Reverts the V135 organic/irregular movement by starting from V134, then applies a single
   continuous, wave-like breathing cycle: smooth rise, soft top hold, smooth return. The V132/V134
   amplitude is preserved; only the rhythm/easing is made slower and more fluid.
   Background, nav, audio, HTML, JS, assets, Spice Level and mobile-core remain untouched.
   ========================================================================================== */

#hero .hero-right .interactive-book {
  animation: v136HeroBookShellLevitateDesktopBreath 5.85s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  transform-origin: center center !important;
  will-change: translate, rotate, filter !important;
}

#hero .interactive-book .levitate {
  animation: v136HeroBookInnerLevitateDesktopBreath 5.85s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: v136HeroClosedBookBreathDesktopOne 5.85s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

#hero .interactive-book .aura {
  animation: v136HeroBookAuraPulseDesktopOne 5.85s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  will-change: transform, opacity !important;
}

@keyframes v136HeroBookShellLevitateDesktopBreath {
  0%, 100% {
    translate: 0 0;
    rotate: -0.35deg;
    filter: none;
  }
  12.5% {
    translate: 0 -6px;
    rotate: -0.24deg;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.04));
  }
  25% {
    translate: 0 -21px;
    rotate: 0.05deg;
    filter: drop-shadow(0 10px 11px rgba(0,0,0,0.08));
  }
  37.5% {
    translate: 0 -36px;
    rotate: 0.43deg;
    filter: drop-shadow(0 20px 18px rgba(0,0,0,0.13));
  }
  50% {
    translate: 0 -42px;
    rotate: 0.65deg;
    filter: drop-shadow(0 26px 22px rgba(0,0,0,0.16));
  }
  62.5% {
    translate: 0 -36px;
    rotate: 0.43deg;
    filter: drop-shadow(0 20px 18px rgba(0,0,0,0.13));
  }
  75% {
    translate: 0 -21px;
    rotate: 0.05deg;
    filter: drop-shadow(0 10px 11px rgba(0,0,0,0.08));
  }
  87.5% {
    translate: 0 -6px;
    rotate: -0.24deg;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.04));
  }
}

@keyframes v136HeroBookInnerLevitateDesktopBreath {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  12.5% {
    transform: translate3d(0, -1px, 0) scale(1.0008);
  }
  25% {
    transform: translate3d(0, -4px, 0) scale(1.0025);
  }
  37.5% {
    transform: translate3d(0, -7px, 0) scale(1.0048);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.006);
  }
  62.5% {
    transform: translate3d(0, -7px, 0) scale(1.0048);
  }
  75% {
    transform: translate3d(0, -4px, 0) scale(1.0025);
  }
  87.5% {
    transform: translate3d(0, -1px, 0) scale(1.0008);
  }
}

@keyframes v136HeroClosedBookBreathDesktopOne {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.35deg);
    filter:
      drop-shadow(0 38px 54px rgba(0,0,0,0.70))
      drop-shadow(0 0 42px rgba(201,169,110,0.10));
  }
  12.5% {
    transform: translate3d(0, -2px, 0) scale(1.002) rotate(-0.22deg);
    filter:
      drop-shadow(0 42px 58px rgba(0,0,0,0.72))
      drop-shadow(0 0 45px rgba(206,176,118,0.12));
  }
  25% {
    transform: translate3d(0, -7px, 0) scale(1.008) rotate(0.02deg);
    filter:
      drop-shadow(0 50px 66px rgba(0,0,0,0.76))
      drop-shadow(0 0 52px rgba(218,192,135,0.16));
  }
  37.5% {
    transform: translate3d(0, -12px, 0) scale(1.018) rotate(0.48deg);
    filter:
      drop-shadow(0 60px 76px rgba(0,0,0,0.82))
      drop-shadow(0 0 61px rgba(227,204,150,0.21));
  }
  50% {
    transform: translate3d(0, -14px, 0) scale(1.022) rotate(0.75deg);
    filter:
      drop-shadow(0 66px 82px rgba(0,0,0,0.86))
      drop-shadow(0 0 66px rgba(232,212,160,0.24));
  }
  62.5% {
    transform: translate3d(0, -12px, 0) scale(1.018) rotate(0.48deg);
    filter:
      drop-shadow(0 60px 76px rgba(0,0,0,0.82))
      drop-shadow(0 0 61px rgba(227,204,150,0.21));
  }
  75% {
    transform: translate3d(0, -7px, 0) scale(1.008) rotate(0.02deg);
    filter:
      drop-shadow(0 50px 66px rgba(0,0,0,0.76))
      drop-shadow(0 0 52px rgba(218,192,135,0.16));
  }
  87.5% {
    transform: translate3d(0, -2px, 0) scale(1.002) rotate(-0.22deg);
    filter:
      drop-shadow(0 42px 58px rgba(0,0,0,0.72))
      drop-shadow(0 0 45px rgba(206,176,118,0.12));
  }
}

@keyframes v136HeroBookAuraPulseDesktopOne {
  0%, 100% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(1);
  }
  12.5% {
    opacity: 0.70;
    transform: translate(-50%, -50%) scale(1.02);
  }
  25% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1.08);
  }
  37.5% {
    opacity: 0.49;
    transform: translate(-50%, -50%) scale(1.16);
  }
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.20);
  }
  62.5% {
    opacity: 0.49;
    transform: translate(-50%, -50%) scale(1.16);
  }
  75% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1.08);
  }
  87.5% {
    opacity: 0.70;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@media (max-width: 768px) {
  #hero .hero-right .interactive-book {
    animation: v136HeroBookShellLevitateMobileBreath 5.55s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }

  #hero .interactive-book .levitate {
    animation: v136HeroBookInnerLevitateMobileBreath 5.55s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: v136HeroClosedBookBreathMobileOne 5.55s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }

  #hero .interactive-book .aura {
    animation: v136HeroBookAuraPulseMobileOne 5.55s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }
}

@keyframes v136HeroBookShellLevitateMobileBreath {
  0%, 100% {
    translate: 0 0;
    rotate: -0.45deg;
    filter: none;
  }
  12.5% {
    translate: 0 -5px;
    rotate: -0.30deg;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.04));
  }
  25% {
    translate: 0 -17px;
    rotate: -0.02deg;
    filter: drop-shadow(0 8px 9px rgba(0,0,0,0.08));
  }
  37.5% {
    translate: 0 -29px;
    rotate: 0.46deg;
    filter: drop-shadow(0 14px 14px rgba(0,0,0,0.13));
  }
  50% {
    translate: 0 -34px;
    rotate: 0.75deg;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,0.18));
  }
  62.5% {
    translate: 0 -29px;
    rotate: 0.46deg;
    filter: drop-shadow(0 14px 14px rgba(0,0,0,0.13));
  }
  75% {
    translate: 0 -17px;
    rotate: -0.02deg;
    filter: drop-shadow(0 8px 9px rgba(0,0,0,0.08));
  }
  87.5% {
    translate: 0 -5px;
    rotate: -0.30deg;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.04));
  }
}

@keyframes v136HeroBookInnerLevitateMobileBreath {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  12.5% {
    transform: translate3d(0, -1px, 0) scale(1.001);
  }
  25% {
    transform: translate3d(0, -3px, 0) scale(1.003);
  }
  37.5% {
    transform: translate3d(0, -5px, 0) scale(1.006);
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(1.008);
  }
  62.5% {
    transform: translate3d(0, -5px, 0) scale(1.006);
  }
  75% {
    transform: translate3d(0, -3px, 0) scale(1.003);
  }
  87.5% {
    transform: translate3d(0, -1px, 0) scale(1.001);
  }
}

@keyframes v136HeroClosedBookBreathMobileOne {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-0.7deg);
    filter: drop-shadow(0 24px 30px rgba(0,0,0,0.50));
  }
  12.5% {
    transform: translate3d(0, -1px, 0) scale(1.002) rotate(-0.50deg);
    filter: drop-shadow(0 27px 32px rgba(0,0,0,0.53));
  }
  25% {
    transform: translate3d(0, -4px, 0) scale(1.006) rotate(-0.10deg);
    filter: drop-shadow(0 33px 36px rgba(0,0,0,0.57));
  }
  37.5% {
    transform: translate3d(0, -8px, 0) scale(1.015) rotate(0.52deg);
    filter: drop-shadow(0 42px 44px rgba(0,0,0,0.63));
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.02) rotate(0.9deg);
    filter: drop-shadow(0 48px 48px rgba(0,0,0,0.68));
  }
  62.5% {
    transform: translate3d(0, -8px, 0) scale(1.015) rotate(0.52deg);
    filter: drop-shadow(0 42px 44px rgba(0,0,0,0.63));
  }
  75% {
    transform: translate3d(0, -4px, 0) scale(1.006) rotate(-0.10deg);
    filter: drop-shadow(0 33px 36px rgba(0,0,0,0.57));
  }
  87.5% {
    transform: translate3d(0, -1px, 0) scale(1.002) rotate(-0.50deg);
    filter: drop-shadow(0 27px 32px rgba(0,0,0,0.53));
  }
}

@keyframes v136HeroBookAuraPulseMobileOne {
  0%, 100% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(0.96);
  }
  12.5% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.98);
  }
  25% {
    opacity: 0.54;
    transform: translate(-50%, -50%) scale(1.02);
  }
  37.5% {
    opacity: 0.41;
    transform: translate(-50%, -50%) scale(1.08);
  }
  50% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(1.12);
  }
  62.5% {
    opacity: 0.41;
    transform: translate(-50%, -50%) scale(1.08);
  }
  75% {
    opacity: 0.54;
    transform: translate(-50%, -50%) scale(1.02);
  }
  87.5% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-right .interactive-book,
  #hero .interactive-book .levitate,
  #hero .stage:not(.is-open) .book-closed,
  #hero .interactive-book .aura {
    animation-duration: 9s !important;
  }
}

/* ===================== V137 CODE-ONLY HOTFIX: CLEAN SOFT BOOK LEVITATION =====================
   Scope: hero book motion only.
   Removes the choppy multi-layer movement by making the outer book shell the only levitating layer.
   Inner levitate/book image transforms are neutralized so the book moves as one continuous breath.
   Background, nav, audio, HTML, JS, assets, Spice Level and mobile-core remain untouched.
   ================================================================================================= */

#hero .hero-right .interactive-book {
  animation: v137HeroBookSoftFloatDesktop 6.9s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: translate !important;
}

#hero .interactive-book .levitate {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
}

#hero .stage:not(.is-open) .book-closed {
  animation: none !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  filter:
    drop-shadow(0 42px 58px rgba(0,0,0,0.72))
    drop-shadow(0 0 48px rgba(201,169,110,0.12)) !important;
  will-change: auto !important;
}

#hero .interactive-book .aura {
  animation: v137HeroBookAuraSoftBreathDesktop 6.9s ease-in-out infinite !important;
  will-change: opacity !important;
}

@keyframes v137HeroBookSoftFloatDesktop {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -42px;
  }
}

@keyframes v137HeroBookAuraSoftBreathDesktop {
  0%, 100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(1.02);
  }
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.13);
  }
}

@media (max-width: 768px) {
  #hero .hero-right .interactive-book {
    animation: v137HeroBookSoftFloatMobile 6.4s ease-in-out infinite !important;
    transform-origin: center center !important;
    will-change: translate !important;
  }

  #hero .interactive-book .levitate {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }

  #hero .stage:not(.is-open) .book-closed {
    animation: none !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
    filter: drop-shadow(0 28px 34px rgba(0,0,0,0.54)) !important;
    will-change: auto !important;
  }

  #hero .interactive-book .aura {
    animation: v137HeroBookAuraSoftBreathMobile 6.4s ease-in-out infinite !important;
  }
}

@keyframes v137HeroBookSoftFloatMobile {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -34px;
  }
}

@keyframes v137HeroBookAuraSoftBreathMobile {
  0%, 100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 0.36;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-right .interactive-book,
  #hero .interactive-book .aura {
    animation-duration: 10s !important;
  }
}

/* ===================== V138 CODE-ONLY HOTFIX: PREMIUM HERO QUOTE EMPHASIS =====================
   Scope: hero title quote only.
   Makes the tagline read more like a premium editorial quote without changing the hero layout,
   book, background, nav, audio, mobile-core, or contract structure.
   ============================================================================================= */

#hero .hero-title-quote {
  position: relative !important;
  isolation: isolate !important;
  width: min(640px, 100%) !important;
  max-width: 640px !important;
  margin: 12px 0 24px !important;
  padding: 14px 24px 14px 34px !important;
  border: 1px solid rgba(216, 177, 86, 0.12) !important;
  border-left: 1.5px solid rgba(223, 188, 103, 0.52) !important;
  border-radius: 0 18px 18px 0 !important;
  background:
    linear-gradient(90deg,
      rgba(15, 11, 9, 0.42) 0%,
      rgba(19, 14, 11, 0.26) 46%,
      rgba(19, 14, 11, 0.10) 72%,
      rgba(19, 14, 11, 0.00) 100%) !important;
  backdrop-filter: blur(7px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(118%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 186, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.14) !important;
  font-family: 'Cormorant Garamond', 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.1rem, 1.18vw, 1.46rem) !important;
  line-height: 1.22 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0.012em !important;
  color: rgba(246, 233, 195, 0.96) !important;
  text-shadow:
    0 0 16px rgba(212, 175, 55, 0.10),
    0 1px 0 rgba(0, 0, 0, 0.30) !important;
}

#hero .hero-title-quote::before {
  content: "\201C";
  position: absolute !important;
  left: 10px !important;
  top: -8px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.2rem, 2.6vw, 3.2rem) !important;
  line-height: 1 !important;
  color: rgba(223, 188, 103, 0.72) !important;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.18) !important;
  pointer-events: none !important;
}

#hero .hero-title-quote::after {
  content: "";
  position: absolute !important;
  left: 0 !important;
  top: 16% !important;
  bottom: 16% !important;
  width: 2px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg,
    rgba(223, 188, 103, 0.00) 0%,
    rgba(223, 188, 103, 0.78) 22%,
    rgba(244, 221, 163, 0.92) 50%,
    rgba(223, 188, 103, 0.62) 78%,
    rgba(223, 188, 103, 0.00) 100%) !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.15) !important;
  pointer-events: none !important;
}

@media (min-width: 769px) {
  #hero .hero-title-quote {
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-title-quote {
    width: min(92vw, 540px) !important;
    max-width: 92vw !important;
    margin: 10px auto 18px !important;
    padding: 16px 18px 14px 22px !important;
    border-radius: 16px !important;
    text-align: center !important;
    font-size: clamp(1.02rem, 4.05vw, 1.2rem) !important;
    line-height: 1.24 !important;
    background:
      linear-gradient(180deg,
        rgba(18, 13, 10, 0.44) 0%,
        rgba(18, 13, 10, 0.28) 100%) !important;
  }

  #hero .hero-title-quote::before {
    left: 12px !important;
    top: -6px !important;
    font-size: clamp(2rem, 8.2vw, 2.8rem) !important;
  }

  #hero .hero-title-quote::after {
    left: 14% !important;
    right: 14% !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 1.5px !important;
    background: linear-gradient(90deg,
      rgba(223, 188, 103, 0.00) 0%,
      rgba(223, 188, 103, 0.55) 18%,
      rgba(244, 221, 163, 0.90) 50%,
      rgba(223, 188, 103, 0.55) 82%,
      rgba(223, 188, 103, 0.00) 100%) !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-title-quote {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding: 15px 16px 14px 18px !important;
    font-size: clamp(1rem, 4.2vw, 1.12rem) !important;
  }
}

/* ===================== V139 CODE-ONLY HOTFIX: HERO QUOTE PREMIUM DENSITY REFINEMENT =====================
   Scope: hero quote only.
   Fixes V138 issues: removes the overlapping opening quote, makes the quote visually denser,
   richer, and more editorial-premium through typography and a cleaner plaque treatment.
   No changes to hero structure, book, nav, audio, background, HTML, JS, or mobile-core.
   ====================================================================================================== */

#hero .hero-title-quote {
  position: relative !important;
  isolation: isolate !important;
  width: min(650px, 100%) !important;
  max-width: 650px !important;
  margin: 14px 0 24px !important;
  padding: 16px 26px 16px 30px !important;
  border: 1px solid rgba(220, 187, 103, 0.16) !important;
  border-left: 2px solid rgba(230, 198, 115, 0.74) !important;
  border-radius: 0 18px 18px 0 !important;
  background:
    linear-gradient(90deg,
      rgba(16, 12, 10, 0.56) 0%,
      rgba(18, 13, 10, 0.36) 44%,
      rgba(18, 13, 10, 0.14) 78%,
      rgba(18, 13, 10, 0.00) 100%) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 186, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.16) !important;
  font-family: 'Cormorant Garamond', 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.16rem, 1.2vw, 1.52rem) !important;
  line-height: 1.2 !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: 0.004em !important;
  color: rgba(248, 236, 203, 0.98) !important;
  text-shadow:
    0 0 16px rgba(212, 175, 55, 0.10),
    0 1px 1px rgba(0, 0, 0, 0.28) !important;
}

/* remove V138 oversized decorative quote that overlapped the first letter */
#hero .hero-title-quote::before {
  content: "" !important;
  display: none !important;
}

/* replace it with a cleaner premium accent line under the quote */
#hero .hero-title-quote::after {
  content: "" !important;
  position: absolute !important;
  left: 30px !important;
  right: auto !important;
  bottom: 8px !important;
  top: auto !important;
  width: 132px !important;
  height: 1.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(230, 198, 115, 0.00) 0%,
    rgba(230, 198, 115, 0.78) 12%,
    rgba(247, 226, 170, 0.98) 48%,
    rgba(230, 198, 115, 0.52) 78%,
    rgba(230, 198, 115, 0.00) 100%) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
  pointer-events: none !important;
}

@media (min-width: 769px) {
  #hero .hero-title-quote {
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-title-quote {
    width: min(92vw, 540px) !important;
    max-width: 92vw !important;
    margin: 10px auto 18px !important;
    padding: 15px 18px 19px 18px !important;
    border-left: 1px solid rgba(220, 187, 103, 0.18) !important;
    border-radius: 16px !important;
    text-align: center !important;
    font-size: clamp(1.04rem, 4.15vw, 1.22rem) !important;
    line-height: 1.23 !important;
    font-weight: 600 !important;
    background:
      linear-gradient(180deg,
        rgba(18, 13, 10, 0.54) 0%,
        rgba(18, 13, 10, 0.30) 100%) !important;
  }

  #hero .hero-title-quote::after {
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    width: min(120px, 34vw) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-title-quote {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding: 14px 16px 18px 16px !important;
    font-size: clamp(1rem, 4.24vw, 1.14rem) !important;
  }

  #hero .hero-title-quote::after {
    width: min(104px, 32vw) !important;
  }
}


/* ===================== V139 FIX: CLEAN HERO QUOTE MARKS, NO STRIKE LINE =====================
   Scope: hero quote only.
   Removes the unwanted decorative line from V139 and prevents pseudo quote marks/accent lines
   from appearing over the text. Quote marks are now real text in index.html.
   ================================================================================ */

#hero .hero-title-quote {
  text-decoration: none !important;
}

#hero .hero-title-quote::before,
#hero .hero-title-quote::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ===================== V139 FIX: GUILLEMETS + HERO NAV GAP CORRECTION =====================
   Scope: first hero screen only.
   - The quote now uses real guillemets « » in HTML.
   - Removes old pseudo quote/line decorations.
   - Reduces the excessive gap between fixed nav and hero content without changing nav design,
     background, book, audio, JS, assets, or lower sections.
   ================================================================================ */

#hero .hero-title-quote::before,
#hero .hero-title-quote::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#hero .hero-title-quote {
  text-decoration: none !important;
}

/* Desktop: raise hero content slightly by reducing top padding and lifting the stack. */
@media (min-width: 769px) {
  #hero {
    padding-top: clamp(68px, 7vh, 92px) !important;
  }

  #hero .hero-left,
  #hero .hero-left--editorial {
    transform: translateY(-14px) !important;
  }

  #hero .hero-right {
    transform: translateY(-10px) !important;
  }
}

/* Mobile: also reduce nav-to-book/hero gap safely. */
@media (max-width: 768px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 88px) !important;
  }

  #hero .hero-right {
    transform: translateY(-6px) !important;
  }

  #hero .hero-left,
  #hero .hero-left--editorial {
    margin-top: -8px !important;
  }
}

@media (max-width: 390px) {
  #hero {
    padding-top: calc(env(safe-area-inset-top) + 82px) !important;
  }
}


/* ===================== V139 HOTFIX: EN HERO QUOTE GUILLEMETS MATCH RU =====================
   Scope: hero quote only.
   English quote now uses the same visible « » quotation style as Russian.
   Quote marks are real text in HTML/JS, not pseudo-elements.
   ================================================================================ */

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


/* ===================== V150 CODE-ONLY: HERO CONTRACT MORE TRANSPARENT =====================
   Scope: hero contract window only.
   Makes the main description/trope window more transparent while preserving readability.
   Does not change nav, background, book, petals, audio, JS, or lower sections.
   ================================================================================ */

#hero .hero-contract--editorial {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.050), rgba(255,255,255,0.008)),
    radial-gradient(circle at 22% 0%, rgba(212,175,55,0.040), transparent 38%),
    rgba(8,7,6,0.30) !important;
  border-color: rgba(232,217,168,0.22) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,0.18),
    0 0 0 1px rgba(212,175,55,0.055),
    inset 0 1px 0 rgba(255,255,255,0.075),
    inset 0 -14px 28px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(13px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(116%) !important;
}

#hero .hero-contract--editorial .hero-contract-promise {
  color: rgba(248,241,227,0.90) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.34) !important;
}

/* Keep the four plaques readable on the lighter glass panel. */
#hero .hero-left--editorial .hero-contract-markers span {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.008)),
    rgba(7,6,6,0.46) !important;
  border-color: rgba(212,175,55,0.34) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.20),
    0 0 0 1px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(255,245,219,0.11),
    inset 0 -8px 15px rgba(0,0,0,0.20) !important;
}


/* ===================== V152 CODE-ONLY: DIAGNOSE + SAFE PATCH 1 + VISUAL CONTRACT =====================
   Scope: documentation + inert design tokens + one invisible language-risk cleanup.
   - Safe Patch 1 removes the hardcoded Russian event badge from CSS by using attr(data-badge).
   - Visual Contract tokens are intentionally NOT force-applied to live layout yet.
   - No hero/nav/audio/interactive-book/petals/layout changes.
   ===================================================================================================== */

:root {
  /* Glass system */
  --kaq-glass-hero-bg: rgba(8, 7, 6, 0.30);
  --kaq-glass-section-bg: rgba(10, 8, 7, 0.58);
  --kaq-glass-card-bg: rgba(12, 10, 9, 0.52);
  --kaq-glass-card-bg-strong: rgba(9, 7, 6, 0.72);
  --kaq-glass-border-soft: rgba(232, 217, 168, 0.18);
  --kaq-glass-border-gold: rgba(212, 175, 55, 0.30);
  --kaq-glass-blur-hero: 13px;
  --kaq-glass-blur-section: 10px;

  /* Gold system */
  --kaq-gold-primary: #D4AF37;
  --kaq-gold-soft: rgba(212, 175, 55, 0.58);
  --kaq-gold-muted: rgba(196, 138, 94, 0.42);
  --kaq-gold-line: rgba(212, 175, 55, 0.24);
  --kaq-gold-glow: rgba(212, 175, 55, 0.14);

  /* Ruby system */
  --kaq-ruby-primary: #8F1D2C;
  --kaq-ruby-deep: #4A0A13;
  --kaq-ruby-soft: rgba(143, 29, 44, 0.34);
  --kaq-ruby-glow: rgba(210, 48, 55, 0.16);

  /* Spacing rhythm */
  --kaq-section-pad-y: clamp(84px, 9vw, 132px);
  --kaq-section-pad-x: clamp(18px, 4vw, 56px);
  --kaq-section-max: 1180px;
  --kaq-card-radius: 24px;
  --kaq-card-radius-large: 32px;
  --kaq-card-gap: clamp(18px, 2.2vw, 32px);

  /* Background / depth */
  --kaq-section-shadow: 0 24px 70px rgba(0, 0, 0, 0.30);
  --kaq-section-inner-line: inset 0 1px 0 rgba(255, 245, 219, 0.07);
  --kaq-section-bg-mask: linear-gradient(180deg, rgba(7, 6, 6, 0.48), rgba(7, 6, 6, 0.68));

  /* CTA hierarchy */
  --kaq-cta-primary-bg: linear-gradient(135deg, #F1D98A 0%, #D4AF37 42%, #8F6426 100%);
  --kaq-cta-primary-text: #120D08;
  --kaq-cta-secondary-bg: rgba(10, 8, 7, 0.48);
  --kaq-cta-secondary-border: rgba(212, 175, 55, 0.34);

  /* Typography hierarchy */
  --kaq-title-tight: -0.045em;
  --kaq-kicker-track: 0.34em;
  --kaq-body-leading: 1.72;
}

/* Visual Contract — application rules for future passes:
   1) Hero glass can stay more transparent and atmospheric.
   2) Lower-section glass should be darker and more readable than hero glass.
   3) Gold is reserved for borders, CTA priority, key words, and micro-light; not every line.
   4) Ruby is a brand accent/petal color, not a universal text color.
   5) Section backgrounds should feel like one continuous cinematic world.
   6) CTA hierarchy: one primary action per view, secondary actions quieter.
   7) Typography: cinematic serif for titles, clean sans for UI/kickers/body support.
*/


/* ===================== V153 CODE-ONLY: SAFE PATCH 2 — LOWER SECTION STABILITY PREP =====================
   Scope: lower content sections only.
   Purpose: prepare non-hero sections for later visual alignment without changing hero/nav/audio/book/petals.
   Changes are structural/stability-oriented:
   - creates a safe stacking context for each lower section
   - standardizes anchor scroll offset below fixed nav
   - does not apply new glass colors, backgrounds, shadows, or layout redesigns yet
   ===================================================================================================== */

#about,
#reading-map,
#gallery,
#chr-section,
#excerpt,
#author,
#where,
#subscribe,
footer {
  position: relative;
  isolation: isolate;
  scroll-margin-top: 112px;
}

@media (max-width: 768px) {
  #about,
  #reading-map,
  #gallery,
  #chr-section,
  #excerpt,
  #author,
  #where,
  #subscribe,
  footer {
    scroll-margin-top: 92px;
  }
}

/* ===================== V154 CODE-ONLY: SAFE PATCH 3 — LOWER SECTIONS VISUAL ALIGNMENT =====================
   Scope: lower content sections only.
   Guardrails:
   - no hero changes
   - no nav changes
   - no audio changes
   - no interactive-book changes
   - no petals changes
   Purpose: gently align the lower sections with the V152 Visual Contract while preserving current layout.
   This pass adds cinematic depth, consistent glass surfaces, refined gold/ruby accents, and safer section rhythm.
   ===================================================================================================== */

#about,
#reading-map,
#gallery,
#chr-section,
#excerpt,
#author,
#where,
#subscribe {
  overflow: hidden;
}

#about::before,
#reading-map::before,
#gallery::before,
#chr-section::before,
#excerpt::before,
#author::before,
#where::before,
#subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(212, 175, 55, 0.045), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(143, 29, 44, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(7, 6, 6, 0.12), rgba(7, 6, 6, 0.36));
  opacity: 0.72;
}

#about > *,
#reading-map > *,
#gallery > *,
#chr-section > *,
#excerpt > *,
#author > *,
#where > *,
#subscribe > * {
  position: relative;
  z-index: 1;
}

#gallery,
#excerpt,
#author,
#where,
#subscribe {
  background: transparent !important;
  border-top-color: var(--kaq-gold-line) !important;
}

#about .about-exp-shell,
#reading-map .reading-map-shell,
#gallery .gallery-intro,
#gallery .gallery-grid,
#chr-section .cast-shell,
#excerpt .excerpt-inner,
#author .author-layout,
#where .where-grid,
#subscribe .subscribe-inner {
  max-width: var(--kaq-section-max);
}

#about .about-exp-card,
#about .about-exp-system,
#about .about-exp-quote,
#reading-map .rm-card,
#reading-map .rm-core,
#gallery .gallery-item,
#chr-section .cast-lead,
#chr-section .cast-console,
#chr-section .cast-support-card,
#excerpt .excerpt-inner,
#author .author-right,
#author .author-quote,
#where .where-card,
#subscribe .subscribe-inner {
  border-color: var(--kaq-glass-border-soft) !important;
  box-shadow:
    var(--kaq-section-inner-line),
    0 18px 48px rgba(0, 0, 0, 0.22);
}

#gallery .gallery-item,
#excerpt .excerpt-inner,
#author .author-right,
#where .where-card,
#subscribe .subscribe-inner {
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.035), rgba(255, 244, 214, 0.012)),
    var(--kaq-glass-card-bg) !important;
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

#excerpt .excerpt-inner,
#subscribe .subscribe-inner {
  border: 1px solid var(--kaq-glass-border-gold);
  border-radius: var(--kaq-card-radius-large);
  padding: clamp(34px, 5vw, 64px);
}

#where .where-card {
  border-radius: var(--kaq-card-radius);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

#where .where-card:hover {
  transform: translateY(-3px);
  border-color: var(--kaq-glass-border-gold) !important;
  box-shadow:
    var(--kaq-section-inner-line),
    0 24px 58px rgba(0, 0, 0, 0.30),
    0 0 28px var(--kaq-gold-glow);
}

#about .about-exp-kicker,
#reading-map .section-label,
#gallery .section-label,
#chr-section .cast-kicker,
#author .section-label,
#where .section-label {
  color: var(--kaq-gold-soft) !important;
  letter-spacing: var(--kaq-kicker-track);
}

#about h2,
#reading-map h2,
#gallery h2,
#chr-section .cast-title,
#author .author-heading,
#where h2,
#subscribe .subscribe-title {
  letter-spacing: var(--kaq-title-tight);
  text-wrap: balance;
}

#reading-map em,
#gallery em,
#chr-section em,
#author .author-heading em,
#where em,
#subscribe .subscribe-title em {
  color: var(--kaq-gold-primary) !important;
  text-shadow: 0 0 22px var(--kaq-gold-glow);
}

#reading-map .rm-chip,
#reading-map .rm-warning,
#author .author-social,
#where .where-btn,
#subscribe .subscribe-submit {
  border-color: var(--kaq-cta-secondary-border) !important;
}

#subscribe .subscribe-submit {
  background: var(--kaq-cta-primary-bg) !important;
  color: var(--kaq-cta-primary-text) !important;
}

@media (max-width: 768px) {
  #about::before,
  #reading-map::before,
  #gallery::before,
  #chr-section::before,
  #excerpt::before,
  #author::before,
  #where::before,
  #subscribe::before {
    opacity: 0.52;
  }

  #gallery .gallery-item,
  #excerpt .excerpt-inner,
  #author .author-right,
  #where .where-card,
  #subscribe .subscribe-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #excerpt .excerpt-inner,
  #subscribe .subscribe-inner {
    border-radius: 22px;
    padding: 28px 18px;
  }

  #where .where-card:hover {
    transform: none;
  }
}

/* ===================== V155 CODE-ONLY: SAFE PATCH 4 — VISUAL QA + PERFORMANCE SAFETY GUARD =====================
   Scope: lower content sections only.
   Guardrails:
   - no hero changes
   - no nav changes
   - no audio changes
   - no interactive-book changes
   - no petals changes
   Purpose: protect the V154 lower-section visual alignment from touch-device hover sticking,
   reduce expensive glass effects on tablets/mobiles, and respect reduced-motion preferences.
   =============================================================================================================== */

@media (hover: none), (pointer: coarse) {
  #about *,
  #reading-map *,
  #gallery *,
  #chr-section *,
  #excerpt *,
  #author *,
  #where *,
  #subscribe * {
    transition-duration: 120ms !important;
  }

  #where .where-card:hover,
  #gallery .gallery-item:hover,
  #reading-map .rm-card:hover,
  #chr-section .cast-support-card:hover,
  #author .author-social:hover,
  #subscribe .subscribe-submit:hover {
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  #about .about-exp-card,
  #about .about-exp-system,
  #about .about-exp-quote,
  #reading-map .rm-card,
  #reading-map .rm-core,
  #gallery .gallery-item,
  #chr-section .cast-lead,
  #chr-section .cast-console,
  #chr-section .cast-support-card,
  #excerpt .excerpt-inner,
  #author .author-right,
  #author .author-quote,
  #where .where-card,
  #subscribe .subscribe-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #about::before,
  #reading-map::before,
  #gallery::before,
  #chr-section::before,
  #excerpt::before,
  #author::before,
  #where::before,
  #subscribe::before {
    opacity: 0.48;
  }
}

@media (max-width: 480px) {
  #about .about-exp-card,
  #about .about-exp-system,
  #about .about-exp-quote,
  #reading-map .rm-card,
  #reading-map .rm-core,
  #gallery .gallery-item,
  #chr-section .cast-lead,
  #chr-section .cast-console,
  #chr-section .cast-support-card,
  #excerpt .excerpt-inner,
  #author .author-right,
  #author .author-quote,
  #where .where-card,
  #subscribe .subscribe-inner {
    box-shadow:
      var(--kaq-section-inner-line),
      0 14px 34px rgba(0, 0, 0, 0.20) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about *,
  #reading-map *,
  #gallery *,
  #chr-section *,
  #excerpt *,
  #author *,
  #where *,
  #subscribe * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  #where .where-card:hover,
  #gallery .gallery-item:hover,
  #reading-map .rm-card:hover,
  #chr-section .cast-support-card:hover,
  #author .author-social:hover,
  #subscribe .subscribe-submit:hover {
    transform: none !important;
  }
}

/* ===================== V156 CODE-ONLY: SAFE PATCH 5 — WHERE + SUBSCRIBE CONVERSION POLISH =====================
   Scope: conversion blocks only.
   Guardrails:
   - no hero changes
   - no nav changes
   - no audio changes
   - no interactive-book changes
   - no petals changes
   Purpose: make Where to Read and Subscribe read as premium launch/conversion panels while staying inside
   the established dark-luxury visual contract and preserving performance guards from V155.
   ================================================================================================================ */

#where,
#subscribe {
  --kaq-conversion-card-bg:
    linear-gradient(180deg, rgba(255, 244, 214, 0.052), rgba(255, 244, 214, 0.016) 42%, rgba(10, 8, 6, 0.54)),
    linear-gradient(135deg, rgba(212, 175, 55, 0.040), rgba(156, 47, 47, 0.024) 46%, rgba(0, 0, 0, 0));
  --kaq-conversion-line: rgba(212, 175, 55, 0.26);
  --kaq-conversion-line-strong: rgba(230, 201, 132, 0.44);
  --kaq-conversion-shadow: 0 24px 68px rgba(0, 0, 0, 0.34);
}

#where {
  padding-top: clamp(88px, 8vw, 128px) !important;
  padding-bottom: clamp(84px, 8vw, 122px) !important;
}

#where .where-grid {
  width: min(100%, var(--kaq-section-max));
  margin-inline: auto;
  gap: clamp(18px, 2.2vw, 28px) !important;
  align-items: stretch;
}

#where .where-card {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(30px, 3vw, 42px) clamp(22px, 2.6vw, 34px) !important;
  text-align: left !important;
  background: var(--kaq-conversion-card-bg), var(--kaq-glass-card-bg) !important;
  border-color: var(--kaq-conversion-line) !important;
  box-shadow: var(--kaq-section-inner-line), var(--kaq-conversion-shadow) !important;
}

#where .where-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 0%, rgba(230, 201, 132, 0.12), transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(156, 47, 47, 0.10), transparent 34%);
  opacity: 0.76;
}

#where .where-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(230, 201, 132, 0.58), transparent);
  opacity: 0.82;
}

#where .where-card:nth-child(2) {
  border-color: var(--kaq-conversion-line-strong) !important;
  transform: translateY(-4px);
}

#where .where-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% -10%, rgba(230, 201, 132, 0.17), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(156, 47, 47, 0.11), transparent 34%);
  opacity: 0.94;
}

#where .where-card[style*="border-color"] > div[style*="position:absolute"] {
  top: 14px !important;
  left: auto !important;
  right: 16px !important;
  transform: none !important;
  border: 1px solid rgba(10, 8, 6, 0.24);
  border-radius: 999px;
  padding: 6px 13px !important;
  background: linear-gradient(135deg, #f1d789, #c9a96e 48%, #8f6b2d) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28), 0 0 18px rgba(212, 175, 55, 0.16);
  color: #120d08 !important;
  font-size: 8px !important;
  letter-spacing: 0.24em !important;
}

#where .where-platform {
  margin-bottom: 16px !important;
  color: var(--kaq-gold-primary) !important;
  line-height: 1.35;
}

#where .where-desc {
  flex: 1 1 auto;
  margin-bottom: 26px !important;
  color: rgba(248, 241, 227, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.78 !important;
}

#where .where-price {
  margin-top: auto;
  margin-bottom: 6px !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1;
  letter-spacing: -0.015em;
}

#where .where-price-note {
  min-height: 1.3em;
  margin-bottom: 22px !important;
  color: rgba(201, 169, 110, 0.72) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#where .where-btn {
  display: inline-flex !important;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(156, 47, 47, 0.035)),
    rgba(10, 8, 6, 0.36);
  color: rgba(248, 241, 227, 0.86) !important;
  border-color: rgba(212, 175, 55, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.09);
  letter-spacing: 0.22em !important;
  line-height: 1.25;
}

#where .where-btn.ru {
  color: rgba(232, 241, 255, 0.88) !important;
  border-color: rgba(96, 160, 216, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(96, 160, 216, 0.085), rgba(212, 175, 55, 0.030)),
    rgba(10, 8, 6, 0.32);
}

@media (hover: hover) and (pointer: fine) {
  #where .where-card:hover {
    transform: translateY(-5px);
  }

  #where .where-card:nth-child(2):hover {
    transform: translateY(-7px);
  }

  #where .where-btn:hover,
  #subscribe .subscribe-submit:hover {
    border-color: rgba(230, 201, 132, 0.68) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 214, 0.18),
      0 0 26px rgba(212, 175, 55, 0.16);
  }
}

#subscribe {
  padding-top: clamp(82px, 7vw, 116px) !important;
  padding-bottom: clamp(100px, 9vw, 140px) !important;
}

#subscribe .subscribe-inner {
  position: relative;
  overflow: hidden;
  width: min(100%, 760px);
  text-align: center;
  background:
    radial-gradient(circle at 50% -18%, rgba(230, 201, 132, 0.15), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(156, 47, 47, 0.10), transparent 32%),
    var(--kaq-conversion-card-bg),
    rgba(10, 8, 6, 0.64) !important;
  border-color: var(--kaq-conversion-line-strong) !important;
  box-shadow:
    var(--kaq-section-inner-line),
    0 30px 86px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(212, 175, 55, 0.065) !important;
}

#subscribe .subscribe-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(230, 201, 132, 0.10), transparent),
    repeating-linear-gradient(135deg, rgba(255, 244, 214, 0.018) 0 1px, transparent 1px 9px);
  opacity: 0.52;
}

#subscribe .subscribe-inner > * {
  position: relative;
  z-index: 1;
}

#subscribe .subscribe-icon {
  margin-bottom: 22px !important;
  color: rgba(230, 201, 132, 0.74) !important;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.18);
}

#subscribe .subscribe-title {
  margin-bottom: 18px !important;
  font-size: clamp(42px, 5.2vw, 64px) !important;
}

#subscribe .subscribe-sub {
  width: min(100%, 560px);
  margin: 0 auto 34px !important;
  color: rgba(248, 241, 227, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.86 !important;
}

#subscribe .subscribe-form {
  width: min(100%, 560px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 999px;
  border-color: rgba(212, 175, 55, 0.40) !important;
  background: rgba(5, 4, 3, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.07), 0 18px 36px rgba(0, 0, 0, 0.28);
}

#subscribe .subscribe-input {
  min-height: 50px;
  padding-left: 24px !important;
  color: rgba(248, 241, 227, 0.90) !important;
}

#subscribe .subscribe-input:focus {
  background: rgba(255, 244, 214, 0.026);
}

#subscribe .subscribe-submit {
  min-height: 50px;
  padding-inline: 28px !important;
  border-left: 1px solid rgba(10, 8, 6, 0.20) !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

#subscribe .subscribe-note {
  width: min(100%, 580px);
  margin: 18px auto 0 !important;
  color: rgba(248, 241, 227, 0.42) !important;
  line-height: 1.8;
}

@media (max-width: 900px) {
  #where .where-grid {
    grid-template-columns: 1fr !important;
    width: min(100%, 620px);
  }

  #where .where-card,
  #where .where-card:nth-child(2) {
    transform: none !important;
  }

  #where .where-card[style*="border-color"] > div[style*="position:absolute"] {
    top: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 640px) {
  #where,
  #subscribe {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #where .where-card {
    text-align: center !important;
    padding: 34px 20px 24px !important;
  }

  #where .where-desc {
    margin-inline: auto;
  }

  #where .where-btn {
    min-height: 48px;
    padding-inline: 14px !important;
    letter-spacing: 0.16em !important;
  }

  #subscribe .subscribe-inner {
    padding: 34px 18px !important;
  }

  #subscribe .subscribe-form {
    display: grid !important;
    grid-template-columns: 1fr;
    border-radius: 26px;
  }

  #subscribe .subscribe-input {
    min-height: 52px;
    text-align: center;
    padding-inline: 16px !important;
  }

  #subscribe .subscribe-submit {
    min-height: 50px;
    border-left: 0 !important;
    border-top: 1px solid rgba(10, 8, 6, 0.22) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #where .where-card,
  #where .where-btn,
  #subscribe .subscribe-submit {
    transition-duration: 1ms !important;
  }
}


/* ===================== V157 CODE-ONLY: SAFE PATCH 6 — ABOUT / READING EXPERIENCE POLISH =====================
   Scope: About / Reading Experience section only.
   Guardrails:
   - no hero changes
   - no nav changes
   - no audio changes
   - no interactive-book changes
   - no petals changes
   Purpose: raise the emotional-selling About block to the same premium dark-romance level as the hero while
   preserving the existing section architecture and mobile performance guards.
   ============================================================================================================== */

#about.about-experience {
  padding-top: clamp(96px, 10vw, 152px) !important;
  padding-bottom: clamp(92px, 9vw, 142px) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(230, 201, 132, 0.15), transparent 38%),
    radial-gradient(circle at 12% 42%, rgba(143, 29, 44, 0.115), transparent 34%),
    radial-gradient(circle at 88% 68%, rgba(212, 175, 55, 0.055), transparent 32%),
    linear-gradient(180deg, rgba(8, 6, 5, 0.18), rgba(4, 3, 3, 0.38)) !important;
}

#about.about-experience::before {
  opacity: 0.28 !important;
  background:
    linear-gradient(90deg, transparent 0, rgba(230, 201, 132, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, transparent 0, rgba(230, 201, 132, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 18%, rgba(156, 47, 47, 0.10), transparent 38%) !important;
  background-size: 92px 92px, 92px 92px, auto !important;
}

#about.about-experience::after {
  opacity: 0.72;
  background: linear-gradient(180deg, transparent, rgba(230,201,132,0.32), rgba(143,29,44,0.24), rgba(230,201,132,0.18), transparent) !important;
}

#about .about-exp-shell {
  width: min(1140px, 100%) !important;
}

#about .about-exp-topline {
  width: min(860px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(38px, 4vw, 56px) !important;
}

#about .about-exp-kicker,
#about .about-exp-code {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 9px 14px 8px;
  border: 1px solid rgba(212, 175, 55, 0.20);
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.06), 0 10px 24px rgba(0, 0, 0, 0.20);
}

#about .about-exp-code {
  color: rgba(230, 201, 132, 0.82) !important;
  border-color: rgba(230, 201, 132, 0.26);
}

#about .about-exp-intro {
  max-width: 940px !important;
  margin-bottom: clamp(44px, 5vw, 66px) !important;
}

#about .about-exp-intro p {
  width: min(760px, 100%);
  margin-inline: auto !important;
  margin-bottom: 18px !important;
  color: rgba(230, 201, 132, 0.78) !important;
  line-height: 1.72;
}

#about .about-exp-intro h2 {
  font-size: clamp(36px, 5.4vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: rgba(248, 241, 227, 0.96) !important;
  text-shadow: 0 0 34px rgba(212, 175, 55, 0.12), 0 18px 44px rgba(0, 0, 0, 0.36) !important;
}

#about .about-exp-system {
  width: min(820px, 100%) !important;
  margin-bottom: clamp(54px, 5vw, 76px) !important;
  overflow: hidden;
  border-color: rgba(230, 201, 132, 0.30) !important;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.060), rgba(255, 244, 214, 0.016)),
    rgba(10, 8, 6, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.09),
    0 28px 76px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(212, 175, 55, 0.05) !important;
}

#about .system-row {
  padding: 21px 18px !important;
}

#about .system-row span {
  color: rgba(248, 241, 227, 0.48) !important;
}

#about .system-row strong {
  color: rgba(230, 201, 132, 0.88) !important;
}

#about .about-exp-grid {
  gap: clamp(18px, 2vw, 26px) !important;
  margin-bottom: clamp(62px, 6vw, 84px) !important;
}

#about .about-exp-card {
  min-height: 300px !important;
  padding: clamp(30px, 3vw, 42px) clamp(24px, 2.7vw, 34px) !important;
  border-radius: 30px;
  border-color: rgba(212, 175, 55, 0.25) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(230, 201, 132, 0.135), transparent 38%),
    linear-gradient(180deg, rgba(255, 244, 214, 0.044), rgba(255, 244, 214, 0.012)),
    rgba(10, 8, 6, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.08),
    0 28px 72px rgba(0, 0, 0, 0.32),
    0 0 34px rgba(212, 175, 55, 0.045) !important;
}

#about .about-exp-card-center {
  background:
    radial-gradient(circle at 50% -8%, rgba(156, 47, 47, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 244, 214, 0.050), rgba(255, 244, 214, 0.012)),
    rgba(10, 8, 6, 0.70) !important;
  border-color: rgba(230, 201, 132, 0.34) !important;
}

#about .about-exp-card::before {
  inset: 14px !important;
  border-radius: 22px;
  border-color: rgba(230, 201, 132, 0.12) !important;
}

#about .about-exp-card::after {
  opacity: 0.74;
}

#about .about-exp-label {
  color: rgba(230, 201, 132, 0.90) !important;
}

#about .about-exp-card p {
  max-width: 30ch;
  color: rgba(248, 241, 227, 0.86) !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.68 !important;
}

#about .about-exp-evidence {
  width: min(980px, 100%) !important;
  gap: clamp(20px, 2.4vw, 32px) !important;
  margin-bottom: clamp(60px, 6vw, 84px) !important;
}

#about .about-exp-quote {
  border-radius: 28px;
  border-color: rgba(230, 201, 132, 0.25) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(230, 201, 132, 0.11), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.056), rgba(255,255,255,0.012)),
    rgba(7, 5, 5, 0.74) !important;
  box-shadow:
    inset 0 0 34px rgba(212,175,55,0.042),
    0 30px 76px rgba(0,0,0,0.36) !important;
}

#about .about-exp-quote span {
  color: rgba(230, 201, 132, 0.76) !important;
}

#about .about-exp-quote p {
  color: rgba(248, 241, 227, 0.94) !important;
  font-size: clamp(18px, 1.9vw, 23px) !important;
  line-height: 1.6 !important;
}

#about .about-exp-final {
  width: min(860px, 100%) !important;
  padding: clamp(38px, 4.8vw, 58px) clamp(22px, 3vw, 38px) !important;
  border: 1px solid rgba(230, 201, 132, 0.24);
  border-left: 0;
  border-right: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(230, 201, 132, 0.13), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(143, 29, 44, 0.10), transparent 42%) !important;
}

#about .about-exp-final p:first-child {
  color: rgba(248, 241, 227, 0.94) !important;
}

#about .about-exp-final p + p {
  color: rgba(230, 201, 132, 0.90) !important;
}

@media (hover: hover) and (pointer: fine) {
  #about .about-exp-card {
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }

  #about .about-exp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(230, 201, 132, 0.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 214, 0.10),
      0 34px 82px rgba(0, 0, 0, 0.38),
      0 0 38px rgba(212, 175, 55, 0.07) !important;
  }

  #about .about-exp-card-center:hover {
    transform: translateY(20px);
  }
}

@media (max-width: 900px) {
  #about.about-experience {
    padding-top: 88px !important;
    padding-bottom: 92px !important;
  }

  #about .about-exp-system,
  #about .about-exp-card,
  #about .about-exp-quote {
    border-radius: 24px;
  }

  #about .about-exp-card,
  #about .about-exp-card-center {
    min-height: auto !important;
  }

  #about .about-exp-card p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  #about .about-exp-topline {
    margin-bottom: 30px !important;
  }

  #about .about-exp-kicker,
  #about .about-exp-code {
    justify-content: center;
    width: 100%;
    min-height: 32px;
    padding-inline: 12px;
    letter-spacing: 0.18em !important;
  }

  #about .about-exp-intro p {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  #about .about-exp-intro h2 {
    font-size: clamp(34px, 12vw, 48px) !important;
    line-height: 1.02 !important;
  }

  #about .about-exp-system {
    border-radius: 22px;
  }

  #about .system-row {
    padding: 18px 14px !important;
  }

  #about .about-exp-card,
  #about .about-exp-quote {
    padding: 28px 20px !important;
  }

  #about .about-exp-final p {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about .about-exp-card {
    transition-duration: 1ms !important;
  }
}

/* ==========================================================
   V166 CODE-ONLY: FINAL MASTER BACKGROUND LOCK
   Scope:
   - production background only;
   - BG Lab/test UI removed;
   - selected master background locked;
   - GSAP/fallback motion variables preserved.
   ========================================================== */

:root {
  --kaq-bg-image: url("../assets/hero/master-background-selected.webp");
  --kaq-bg-y: 0px;
  --kaq-bg-pos-y: 0%;
  --kaq-bg-scale: 1.075;
  --kaq-bg-brightness: 0.86;
  --kaq-bg-saturation: 1.08;
  --kaq-bg-contrast: 1.06;
}

#bg-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #050404 !important;
  isolation: isolate !important;
}

#bg-root .bg-image {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -7vh !important;
  bottom: auto !important;
  width: 100% !important;
  height: 114vh !important;
  z-index: 0 !important;
  background-image: var(--kaq-bg-image) !important;
  background-size: cover !important;
  background-position: center var(--kaq-bg-pos-y) !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter:
    saturate(var(--kaq-bg-saturation))
    contrast(var(--kaq-bg-contrast))
    brightness(var(--kaq-bg-brightness)) !important;
  transform: translate3d(0, var(--kaq-bg-y), 0) scale(var(--kaq-bg-scale)) !important;
  transform-origin: center top !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

@media (max-width: 768px) {
  :root {
    --kaq-bg-image: url("../assets/hero/master-background-selected-mobile.webp");
    --kaq-bg-y: 0px !important;
    --kaq-bg-pos-y: 0% !important;
    --kaq-bg-scale: 1 !important;
    --kaq-bg-brightness: 0.84;
  }

  #bg-root .bg-image {
    top: 0 !important;
    height: 100% !important;
    transform: none !important;
    will-change: auto !important;
    background-position: center top !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bg-root .bg-image {
    transform: none !important;
    will-change: auto !important;
  }
}


/* ==========================================================
   V167 CODE-ONLY: SEAMLESS SECTION TRANSITION + LIGHT GLOW REMOVAL
   Scope:
   - remove hard horizontal section separation over the master background;
   - remove section-level radial light glows / spotlight overlays;
   - keep cards, typography, hero, nav, audio, book, petals and background image unchanged.
   ========================================================== */

#about,
#reading-map,
#gallery,
#chr-section,
#excerpt,
#author,
#where,
#subscribe,
footer {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#about::before,
#about::after,
#reading-map::before,
#reading-map::after,
#gallery::before,
#gallery::after,
#chr-section::before,
#chr-section::after,
#excerpt::before,
#excerpt::after,
#author::before,
#author::after,
#where::before,
#where::after,
#subscribe::before,
#subscribe::after,
footer::before,
footer::after {
  content: "" !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* The first lower block used to create a visible rectangular band under the hero.
   Keep the content, remove only the section-wide glow/mask. */
#about.about-experience {
  background: transparent !important;
  box-shadow: none !important;
}

#about.about-experience::before,
#about.about-experience::after {
  content: "" !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep the master image cinematic but remove any perceived global spotlight from section masks. */
#bg-root::before,
#bg-root::after {
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ===================== V169 HERO / CONTRACT PLAQUES GLASS PASS =====================
   Scope:
   1) Remove only the large outer window behind the left hero content.
   2) Upgrade the four hero contract markers with richer glass + gold living sheen.
   No size/layout change intended.
   ================================================================================ */
#hero .hero-left,
#hero .hero-left--editorial {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#hero .hero-left::before,
#hero .hero-left::after,
#hero .hero-left--editorial::before,
#hero .hero-left--editorial::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

#hero .hero-left--editorial .hero-contract-markers {
  gap: 18px !important;
}

#hero .hero-left--editorial .hero-contract-markers span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 24%, rgba(22,18,16,0.40) 100%),
    linear-gradient(135deg, rgba(212,175,55,0.07) 0%, rgba(255,255,255,0.02) 34%, rgba(0,0,0,0.14) 100%),
    rgba(10,8,7,0.36) !important;
  border: 1px solid rgba(212,175,55,0.34) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.20),
    0 0 0 1px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -12px 22px rgba(0,0,0,0.24),
    inset 0 0 24px rgba(255,217,128,0.04) !important;
  backdrop-filter: blur(10px) saturate(126%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(126%) !important;
}

#hero .hero-left--editorial .hero-contract-markers span::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 18%, rgba(255,255,255,0.00) 42%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.045) 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 82% 78%, rgba(255,214,120,0.11) 0%, rgba(255,214,120,0.035) 18%, rgba(255,214,120,0) 46%) !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#hero .hero-left--editorial .hero-contract-markers span::after {
  content: '' !important;
  position: absolute !important;
  inset: -24% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0.00) 34%,
      rgba(255,250,233,0.08) 43%,
      rgba(255,232,170,0.18) 49%,
      rgba(255,250,233,0.07) 55%,
      rgba(255,255,255,0.00) 66%,
      rgba(255,255,255,0) 78%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.88 !important;
  transform: translateX(-135%) rotate(7deg) !important;
  animation: v169GlassGoldSweep 8.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#hero .hero-left--editorial .hero-contract-markers span:nth-child(1)::after { animation-duration: 7.6s !important; animation-delay: -0.8s !important; }
#hero .hero-left--editorial .hero-contract-markers span:nth-child(2)::after { animation-duration: 9.1s !important; animation-delay: -3.2s !important; }
#hero .hero-left--editorial .hero-contract-markers span:nth-child(3)::after { animation-duration: 8.2s !important; animation-delay: -1.6s !important; }
#hero .hero-left--editorial .hero-contract-markers span:nth-child(4)::after { animation-duration: 9.7s !important; animation-delay: -4.4s !important; }

#hero .hero-left--editorial .hero-contract-markers span:hover {
  border-color: rgba(233, 197, 91, 0.46) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.24),
    0 0 0 1px rgba(212,175,55,0.12),
    0 0 18px rgba(212,175,55,0.12),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -14px 24px rgba(0,0,0,0.24) !important;
}

#hero .hero-left--editorial .hero-contract-markers span > * {
  position: relative;
  z-index: 2;
}

@keyframes v169GlassGoldSweep {
  0% {
    transform: translateX(-138%) rotate(7deg);
    opacity: 0;
  }
  10% {
    opacity: 0.78;
  }
  46% {
    opacity: 0.92;
  }
  64% {
    opacity: 0.26;
  }
  100% {
    transform: translateX(138%) rotate(7deg);
    opacity: 0;
  }
}


/* ===================== V170 READING MAP + WHERE PRICE POLISH =====================
   1) Where to Read: all three price values set to Free (HTML updated).
   2) Tropes chips: aligned as ровные full-width plaques like warnings.
   3) Middle orbit ring: remove transparency from the outer running-light ring.
   ============================================================================== */
#reading-map .rm-chip-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 31px 0 0 !important;
}

#reading-map .rm-chip {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 42px !important;
  padding: 12px 14px 12px 42px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(212,175,55,0.24) !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.10), rgba(0,0,0,0.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

#reading-map .rm-chip::before {
  left: 14px !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(212,175,55,0.34) !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,241,205,0.95) 0 28%, rgba(212,175,55,0.82) 29% 46%, rgba(212,175,55,0.10) 47% 100%) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.18) !important;
}

#reading-map .rm-core-ring {
  border: 1px solid rgba(212,175,55,0.48) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(24,19,17,0.98) 0%, rgba(16,13,12,0.98) 54%, rgba(9,8,8,0.98) 100%),
    conic-gradient(from 120deg,
      rgba(24,20,18,0.96) 0 14%,
      rgba(212,175,55,0.48) 14% 24%,
      rgba(24,20,18,0.96) 24% 50%,
      rgba(156,47,47,0.30) 50% 63%,
      rgba(24,20,18,0.96) 63% 100%) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.10),
    0 0 26px rgba(212,175,55,0.10),
    inset 0 0 26px rgba(0,0,0,0.34) !important;
  filter: none !important;
}

#reading-map .rm-core-ring::after {
  background: rgba(6,5,5,0.96) !important;
  border-color: rgba(255,255,255,0.09) !important;
}


/* ===================== V171 SPICE NOTE GOLD + RED FRAME =====================
   User request: make "18+ Explicit" a bit bolder, realistic gold, and place it
   inside a framed plaque with a red outline.
   Scope: hero spice level note only.
   ========================================================================== */
#hero .hero-left--editorial .heat-row--editorial .heat-note,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(156, 47, 47, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(34, 12, 12, 0.88), rgba(10, 7, 7, 0.94)) !important;
  box-shadow:
    0 0 0 1px rgba(156, 47, 47, 0.16),
    0 10px 22px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 16px rgba(156,47,47,0.10) !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  color: #f0d79a !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  text-shadow:
    0 1px 0 rgba(255,245,214,0.18),
    0 0 10px rgba(212,175,55,0.14) !important;
  position: relative !important;
  overflow: hidden !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-note::before,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 42%),
    radial-gradient(circle at 18% 20%, rgba(255,226,156,0.12), transparent 34%);
}

#hero .hero-left--editorial .heat-row--editorial .heat-note > *,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note > * {
  position: relative;
  z-index: 1;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #hero .hero-left--editorial .heat-row--editorial .heat-note,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
    background-image:
      linear-gradient(180deg, rgba(34,12,12,0.88), rgba(10,7,7,0.94)),
      linear-gradient(180deg, #fff4cc 0%, #e5c26a 34%, #c6912a 62%, #fff1bf 100%) !important;
    background-origin: border-box, border-box !important;
    background-clip: padding-box, text !important;
    -webkit-background-clip: padding-box, text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-left--editorial .heat-row--editorial .heat-note,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 8px !important;
  }
}


/* ===================== V172 READING MAP SYMMETRY + PULSING RUNNER =====================
   Scope:
   1) Add one more warning item for visual symmetry with Tropes.
   2) Return the pulsing running light in the central ring.
   3) Add one extra living detail: a subtle inner breathing aura / text float.
   ====================================================================================== */

#reading-map .rm-warning-list {
  gap: 12px !important;
}

#reading-map .rm-warning {
  min-height: 42px !important;
}

#reading-map .rm-core {
  isolation: isolate !important;
}

/* Pulsing runner light around the center ring */
#reading-map .rm-core::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 35%, rgba(255,246,216,1) 0%, rgba(255,229,150,0.98) 18%, rgba(212,175,55,0.96) 42%, rgba(156,47,47,0.72) 68%, rgba(156,47,47,0.00) 100%) !important;
  box-shadow:
    0 0 10px rgba(255,227,145,0.88),
    0 0 22px rgba(212,175,55,0.55),
    0 0 34px rgba(156,47,47,0.30) !important;
  transform-origin: center center !important;
  animation: rmCoreRunnerOrbit 5.6s linear infinite !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#reading-map .rm-core-ring {
  border: 1px solid rgba(212,175,55,0.52) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.10),
    0 0 22px rgba(212,175,55,0.12),
    inset 0 0 26px rgba(0,0,0,0.34) !important;
  animation: rmRotate 18s linear infinite, rmCoreRingBreath 5.2s ease-in-out infinite !important;
}

#reading-map .rm-core-ring::after {
  background: rgba(6,5,5,0.97) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 20px rgba(212,175,55,0.05),
    0 0 18px rgba(212,175,55,0.06) !important;
  animation: rmCoreInnerBreath 5.4s ease-in-out infinite !important;
}

#reading-map .rm-core-text {
  z-index: 3 !important;
}

#reading-map .rm-core-text strong {
  animation: rmCoreTextFloat 6.4s ease-in-out infinite !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.06),
    0 0 14px rgba(212,175,55,0.08) !important;
}

#reading-map .rm-core-text em {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 14px rgba(156,47,47,0.12) !important;
}

@keyframes rmCoreRunnerOrbit {
  0% {
    transform: rotate(0deg) translateY(-94px) scale(0.82);
    opacity: 0.62;
  }
  12% {
    transform: rotate(43deg) translateY(-94px) scale(1.08);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg) translateY(-94px) scale(0.88);
    opacity: 0.76;
  }
  37% {
    transform: rotate(133deg) translateY(-94px) scale(1.16);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) translateY(-94px) scale(0.84);
    opacity: 0.68;
  }
  62% {
    transform: rotate(223deg) translateY(-94px) scale(1.14);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg) translateY(-94px) scale(0.86);
    opacity: 0.76;
  }
  87% {
    transform: rotate(313deg) translateY(-94px) scale(1.10);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) translateY(-94px) scale(0.82);
    opacity: 0.62;
  }
}

@keyframes rmCoreRingBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,0.10),
      0 0 18px rgba(212,175,55,0.08),
      inset 0 0 22px rgba(0,0,0,0.32);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,0.16),
      0 0 28px rgba(212,175,55,0.16),
      0 0 18px rgba(156,47,47,0.10),
      inset 0 0 26px rgba(0,0,0,0.34);
  }
}

@keyframes rmCoreInnerBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      inset 0 0 16px rgba(212,175,55,0.04),
      0 0 10px rgba(212,175,55,0.04);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 0 22px rgba(212,175,55,0.08),
      0 0 16px rgba(212,175,55,0.08);
  }
}

@keyframes rmCoreTextFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (max-width: 1024px) {
  #reading-map .rm-core::before {
    animation-duration: 6.1s !important;
    transform: rotate(0deg) translateY(-76px) scale(0.82);
  }

  @keyframes rmCoreRunnerOrbit {
    0% { transform: rotate(0deg) translateY(-76px) scale(0.82); opacity: 0.62; }
    12% { transform: rotate(43deg) translateY(-76px) scale(1.08); opacity: 1; }
    25% { transform: rotate(90deg) translateY(-76px) scale(0.88); opacity: 0.76; }
    37% { transform: rotate(133deg) translateY(-76px) scale(1.16); opacity: 1; }
    50% { transform: rotate(180deg) translateY(-76px) scale(0.84); opacity: 0.68; }
    62% { transform: rotate(223deg) translateY(-76px) scale(1.14); opacity: 1; }
    75% { transform: rotate(270deg) translateY(-76px) scale(0.86); opacity: 0.76; }
    87% { transform: rotate(313deg) translateY(-76px) scale(1.10); opacity: 1; }
    100% { transform: rotate(360deg) translateY(-76px) scale(0.82); opacity: 0.62; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core::before,
  #reading-map .rm-core-ring,
  #reading-map .rm-core-ring::after,
  #reading-map .rm-core-text strong {
    animation: none !important;
  }
}


/* ===================== V173 SPICE NOTE BURGUNDY FRAME + NAV CORE =====================
   User request:
   1) Make the frame brighter and more burgundy.
   2) Make “18+ · Explicit” sharper, a little bolder, in the same gold family
      as the play/pause icon, and give the inside the same dark-nav background feel.
   Scope: hero spice note only.
   ================================================================================ */
#hero .hero-left--editorial .heat-row--editorial .heat-note,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
  min-height: 35px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1.4px solid rgba(126, 26, 46, 0.96) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,245,220,0.10) 0%, rgba(255,245,220,0.03) 14%, rgba(255,245,220,0.00) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.025) 8%, rgba(0,0,0,0.00) 16%),
    linear-gradient(180deg, rgba(21,18,16,0.96) 0%, rgba(11,9,9,0.98) 52%, rgba(6,5,6,0.99) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(126, 26, 46, 0.34),
    0 0 18px rgba(126, 26, 46, 0.18),
    0 10px 22px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 2px 6px rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.72),
    inset 0 -8px 18px rgba(0,0,0,0.24) !important;
  color: #e8d9a8 !important;
  -webkit-text-fill-color: #e8d9a8 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-shadow:
    0 1px 0 rgba(255,248,224,0.16),
    0 0 4px rgba(201,169,110,0.20),
    0 0 10px rgba(201,169,110,0.10) !important;
  backdrop-filter: blur(10px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(118%) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-note::before,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 10%, rgba(255,255,255,0) 28%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 8px
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.72 !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-note::after,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,218,0.08),
    inset 0 -1px 0 rgba(255,255,255,0.02) !important;
}

#hero .hero-left--editorial .heat-row--editorial .heat-note > *,
#hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note > * {
  position: relative !important;
  z-index: 2 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #hero .hero-left--editorial .heat-row--editorial .heat-note,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-image:
      radial-gradient(circle at 20% 18%, rgba(255,245,220,0.10) 0%, rgba(255,245,220,0.03) 14%, rgba(255,245,220,0.00) 34%),
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.025) 8%, rgba(0,0,0,0.00) 16%),
      linear-gradient(180deg, rgba(21,18,16,0.96) 0%, rgba(11,9,9,0.98) 52%, rgba(6,5,6,0.99) 100%) !important;
    color: #e8d9a8 !important;
    -webkit-text-fill-color: #e8d9a8 !important;
  }
}

@media (max-width: 768px) {
  #hero .hero-left--editorial .heat-row--editorial .heat-note,
  #hero .hero-left--editorial .heat-row--above-contract.heat-row--editorial .heat-note {
    min-height: 33px !important;
    padding: 0 15px !important;
    font-size: 8.4px !important;
  }
}


/* V194 cleanup: removed superseded V174 reading-map radar block. V190/V194 now own this element. */

/* ===================== V176 HERO QUOTE FRAME REMOVAL + NAV-STYLE MARKERS =====================
   Scope:
   1) Remove the frame/plaque around the hero quote.
   2) Give the 4 hero marker chips the same premium inner design language as the nav.
   No layout restructuring.
   ============================================================================================ */

/* 1) Hero quote — remove frame, plaque, border, glow rails. Keep only the text itself. */
#hero .hero-title-quote {
  width: min(650px, 100%) !important;
  max-width: 650px !important;
  margin: 14px 0 22px !important;
  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

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

@media (max-width: 768px) {
  #hero .hero-title-quote {
    width: min(92vw, 540px) !important;
    max-width: 92vw !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* 2) Four chips — keep size, but make the interior premium like nav. */
#hero .hero-contract-markers {
  gap: 10px !important;
}

#hero .hero-contract-markers span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 221, 120, 0.36) !important;
  background: linear-gradient(145deg, #312314 0%, #161008 42%, #312314 100%) !important;
  color: rgba(245, 233, 201, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 226, 132, 0.14),
    0 0 8px rgba(255, 205, 74, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.48) !important;
}

#hero .hero-contract-markers span::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 28%,
    rgba(255,248,220,0.30) 50%,
    rgba(255,255,255,0) 72%
  ) !important;
  background-size: 220% 100% !important;
  animation: heroMarkerNavShine 6s linear infinite !important;
  opacity: 0.28 !important;
  pointer-events: none !important;
}

#hero .hero-contract-markers span::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 18%,
      rgba(255,255,255,0.00) 44%),
    linear-gradient(180deg,
      rgba(82,56,18,0.20) 0%,
      rgba(34,22,8,0.08) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#hero .hero-contract-markers span:nth-child(2)::before { animation-delay: 0.8s !important; }
#hero .hero-contract-markers span:nth-child(3)::before { animation-delay: 1.6s !important; }
#hero .hero-contract-markers span:nth-child(4)::before { animation-delay: 2.4s !important; }

@keyframes heroMarkerNavShine {
  0% { background-position: 200% 0; }
  100% { background-position: -40% 0; }
}


/* ===================== V190 READING MAP RING — FULL CIRCULAR LIVING GLINT =====================
   User request:
   The light glint on the consent orb ring should become alive and run around the whole circle.
   Scope: only the central reading-map orb.
   ============================================================================================== */
#reading-map .rm-core {
  isolation: isolate !important;
}

/* keep the orbit runner, but make it subtler so the ring sweep is the star */
#reading-map .rm-core::before {
  width: 13px !important;
  height: 13px !important;
  margin: -6.5px 0 0 -6.5px !important;
  opacity: 0.92 !important;
  box-shadow:
    0 0 10px rgba(255, 237, 168, 0.90),
    0 0 20px rgba(212, 175, 55, 0.52),
    0 0 30px rgba(156, 47, 47, 0.18) !important;
  animation: rmCoreRunnerOrbitV190 7.2s linear infinite !important;
}

/* soften the outer locator beam so it supports the ring instead of overpowering it */
#reading-map .rm-core::after {
  opacity: 0.68 !important;
  filter: blur(0.25px) drop-shadow(0 0 8px rgba(255, 231, 154, 0.20)) !important;
  animation: rmLocatorSweepV190 8.8s linear infinite !important;
}

/* base luxury dark ring */
#reading-map .rm-core-ring {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(228, 188, 73, 0.78) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 13, 12, 0.98) 0%, rgba(10, 9, 9, 0.985) 58%, rgba(7, 7, 7, 0.99) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 222, 128, 0.09),
    0 0 24px rgba(212, 175, 55, 0.12),
    0 0 40px rgba(156, 47, 47, 0.07),
    inset 0 0 28px rgba(0, 0, 0, 0.54) !important;
  animation: rmCoreRingBreathV190 5.6s ease-in-out infinite !important;
}

/* the living ring glint itself — bright gold head + warm gold band + ruby tail */
#reading-map .rm-core-ring::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    conic-gradient(from 270deg,
      rgba(255, 245, 212, 0.00) 0deg,
      rgba(255, 245, 212, 0.00) 244deg,
      rgba(156, 47, 47, 0.10) 258deg,
      rgba(156, 47, 47, 0.26) 275deg,
      rgba(212, 175, 55, 0.18) 292deg,
      rgba(234, 192, 79, 0.42) 305deg,
      rgba(255, 235, 160, 0.86) 316deg,
      rgba(255, 250, 218, 1.0) 322deg,
      rgba(255, 229, 132, 0.80) 330deg,
      rgba(212, 175, 55, 0.30) 340deg,
      rgba(255, 245, 212, 0.00) 352deg,
      rgba(255, 245, 212, 0.00) 360deg) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 21px), #000 calc(100% - 9px), transparent calc(100% - 6px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 21px), #000 calc(100% - 9px), transparent calc(100% - 6px)) !important;
  opacity: 0.98 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 235, 160, 0.40))
    drop-shadow(0 0 18px rgba(212, 175, 55, 0.24))
    drop-shadow(0 0 18px rgba(156, 47, 47, 0.10)) !important;
  animation: rmRingGlintOrbitV190 6.4s linear infinite !important;
}

/* keep the center dark and readable */
#reading-map .rm-core-ring::after {
  content: '' !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 243, 210, 0.07), rgba(255, 243, 210, 0.00) 28%),
    linear-gradient(180deg, rgba(16, 14, 13, 0.985) 0%, rgba(8, 8, 8, 0.992) 60%, rgba(5, 5, 5, 0.995) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(212, 175, 55, 0.04),
    0 0 12px rgba(0, 0, 0, 0.20) !important;
}

#reading-map .rm-core-text {
  z-index: 4 !important;
}

@keyframes rmRingGlintOrbitV190 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rmLocatorSweepV190 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rmCoreRunnerOrbitV190 {
  0%   { transform: rotate(0deg) translateY(-101px) scale(0.84); opacity: 0.74; }
  20%  { transform: rotate(72deg) translateY(-101px) scale(1.02); opacity: 0.98; }
  40%  { transform: rotate(144deg) translateY(-101px) scale(0.90); opacity: 0.82; }
  60%  { transform: rotate(216deg) translateY(-101px) scale(1.04); opacity: 1; }
  80%  { transform: rotate(288deg) translateY(-101px) scale(0.88); opacity: 0.80; }
  100% { transform: rotate(360deg) translateY(-101px) scale(0.84); opacity: 0.74; }
}

@keyframes rmCoreRingBreathV190 {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 128, 0.09),
      0 0 20px rgba(212, 175, 55, 0.10),
      0 0 34px rgba(156, 47, 47, 0.05),
      inset 0 0 24px rgba(0, 0, 0, 0.50);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 128, 0.16),
      0 0 28px rgba(212, 175, 55, 0.18),
      0 0 44px rgba(156, 47, 47, 0.11),
      inset 0 0 28px rgba(0, 0, 0, 0.56);
  }
}

@media (max-width: 1024px) {
  @keyframes rmCoreRunnerOrbitV190 {
    0%   { transform: rotate(0deg) translateY(-84px) scale(0.84); opacity: 0.74; }
    20%  { transform: rotate(72deg) translateY(-84px) scale(1.02); opacity: 0.98; }
    40%  { transform: rotate(144deg) translateY(-84px) scale(0.90); opacity: 0.82; }
    60%  { transform: rotate(216deg) translateY(-84px) scale(1.04); opacity: 1; }
    80%  { transform: rotate(288deg) translateY(-84px) scale(0.88); opacity: 0.80; }
    100% { transform: rotate(360deg) translateY(-84px) scale(0.84); opacity: 0.74; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core::before,
  #reading-map .rm-core::after,
  #reading-map .rm-core-ring,
  #reading-map .rm-core-ring::before {
    animation: none !important;
  }
}


/* ===================== V192 ABOUT INTRO — LUXURY GLASS WINDOW PASS =====================
   User request: put the first About-book headline text into a window matching the
   premium glass cards below. Scope: About intro only.
   ================================================================================ */
#about .about-exp-intro {
  position: relative !important;
  width: min(1540px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin: 0 auto clamp(50px, 5.2vw, 76px) !important;
  padding: clamp(34px, 4.6vw, 72px) clamp(28px, 6vw, 84px) !important;
  text-align: center !important;
  overflow: hidden !important;
  border-radius: clamp(28px, 3vw, 44px) !important;
  border: 1px solid rgba(224, 188, 91, 0.28) !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(230, 201, 132, 0.12), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(156, 47, 47, 0.070), transparent 34%),
    linear-gradient(180deg, rgba(255, 244, 214, 0.052), rgba(255, 244, 214, 0.014)),
    rgba(8, 7, 6, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.09),
    inset 0 -1px 0 rgba(212, 175, 55, 0.055),
    0 30px 82px rgba(0, 0, 0, 0.34),
    0 0 44px rgba(212, 175, 55, 0.050) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

/* inner fine frame, like the lower cards */
#about .about-exp-intro::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(12px, 1.3vw, 18px) !important;
  border-radius: calc(clamp(28px, 3vw, 44px) - 10px) !important;
  border: 1px solid rgba(230, 201, 132, 0.115) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.045),
    0 0 28px rgba(212, 175, 55, 0.035) !important;
}

/* decorative corner locator circle, matching the card language */
#about .about-exp-intro::after {
  content: "" !important;
  position: absolute !important;
  width: clamp(120px, 12vw, 190px) !important;
  height: clamp(120px, 12vw, 190px) !important;
  right: clamp(-62px, -4vw, -34px) !important;
  top: clamp(-72px, -5vw, -38px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(230, 201, 132, 0.16) !important;
  box-shadow:
    0 0 42px rgba(212, 175, 55, 0.07),
    inset 0 0 28px rgba(212, 175, 55, 0.045) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.86 !important;
}

#about .about-exp-intro p,
#about .about-exp-intro h2 {
  position: relative !important;
  z-index: 1 !important;
}

#about .about-exp-intro p {
  width: min(1120px, 100%) !important;
  margin-inline: auto !important;
  margin-bottom: clamp(20px, 2vw, 30px) !important;
  color: rgba(230, 201, 132, 0.84) !important;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.10) !important;
}

#about .about-exp-intro h2 {
  max-width: 13.8em !important;
  margin-inline: auto !important;
  color: rgba(248, 241, 227, 0.965) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 34px rgba(212, 175, 55, 0.10),
    0 22px 52px rgba(0, 0, 0, 0.42) !important;
}

@media (max-width: 900px) {
  #about .about-exp-intro {
    width: min(100%, calc(100% - 20px)) !important;
    padding: 34px 22px 38px !important;
    border-radius: 28px !important;
  }

  #about .about-exp-intro::before {
    inset: 11px !important;
    border-radius: 21px !important;
  }

  #about .about-exp-intro h2 {
    max-width: 11.4em !important;
    font-size: clamp(32px, 9.2vw, 52px) !important;
    line-height: 1.02 !important;
  }
}


/* ===================== V193 NAV + HERO AUDIT CLEANUP =====================
   Scope: nav CTA, hero CTA/clickability, petal performance.
   Purpose:
   - remove conflicting old CTA layers and use one clean CTA system
   - make hero Read Now reliably clickable and target #where
   - reduce petal count/rendering cost while keeping a rich look
   - preserve book, background, reading-map radar, about-card design
   ====================================================================== */
:root {
  --kaq-cta-frame: rgba(255, 226, 146, 0.96);
  --kaq-cta-frame-hot: rgba(255, 248, 214, 1);
  --kaq-cta-text: #f4daa0;
  --kaq-cta-text-hot: #fff0bf;
  --kaq-cta-dark-top: rgba(24, 22, 19, 0.96);
  --kaq-cta-dark-mid: rgba(12, 10, 9, 0.985);
  --kaq-cta-dark-low: rgba(5, 4, 4, 1);
}

/* predictable hero/nav click stack */
#hero .hero-left,
#hero .hero-left--editorial {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

#hero .hero-right,
#hero .hero-right-glow,
#hero .hero-noise,
#hero .hero-bg {
  pointer-events: none !important;
}

#hero .interactive-book,
#hero .interactive-book * {
  pointer-events: auto;
}

#hero .hero-editorial-cta {
  position: relative !important;
  z-index: 80 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: min(520px, 100%) !important;
  margin: 0 !important;
}

#hero .hero-editorial-cta .hero-nav-cta,
#hero .hero-editorial-cta .nav-cta-standalone {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

#where {
  scroll-margin-top: 108px !important;
}

.nav-cta,
.mobile-nav-cta {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  isolation: isolate !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  border: 2px solid var(--kaq-cta-frame) !important;
  outline: 1px solid rgba(255, 230, 154, 0.36) !important;
  outline-offset: 2px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.10), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.036) 0 1px, rgba(255,255,255,0.012) 1px 3px, transparent 3px 10px),
    linear-gradient(180deg, var(--kaq-cta-dark-top), var(--kaq-cta-dark-mid) 52%, var(--kaq-cta-dark-low)) !important;
  color: var(--kaq-cta-text) !important;
  -webkit-text-fill-color: var(--kaq-cta-text) !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.72),
    0 0 10px rgba(255, 226, 154, 0.24) !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  transition: transform 0.25s ease, filter 0.28s ease, color 0.25s ease !important;
  animation: kaqV193CtaBreath 3.6s ease-in-out infinite !important;
}

.nav-cta {
  min-height: 44px !important;
  height: 44px !important;
  min-width: 164px !important;
  padding: 0 24px !important;
  border-radius: 18px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.hero-editorial-cta .hero-nav-cta {
  min-height: 44px !important;
  height: 44px !important;
  min-width: 164px !important;
  padding: 0 24px !important;
  border-radius: 18px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
}

.mobile-nav-cta {
  min-height: 48px !important;
  border-radius: 18px !important;
  padding: 0 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.nav-cta::before,
.mobile-nav-cta::before {
  content: "" !important;
  position: absolute !important;
  top: -115% !important;
  bottom: -115% !important;
  left: -130% !important;
  width: 92% !important;
  z-index: 4 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 22%,
      rgba(213, 153, 39, 0.16) 34%,
      rgba(255, 221, 117, 0.42) 43%,
      rgba(255, 249, 211, 0.86) 49%,
      rgba(255, 255, 255, 0.96) 51%,
      rgba(255, 232, 154, 0.74) 55%,
      rgba(224, 163, 51, 0.30) 66%,
      transparent 80%,
      transparent 100%) !important;
  filter: blur(0.6px) saturate(1.22) brightness(1.18) !important;
  opacity: 0 !important;
  transform: translateX(-58%) skewX(-17deg) translateZ(0) !important;
  animation: kaqV193CtaIngotGlint 3.4s cubic-bezier(.18,.68,.22,1) infinite !important;
}

.nav-cta::after,
.mobile-nav-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02) 26%, transparent 52%, rgba(0,0,0,0.22)) !important;
  opacity: 0.82 !important;
}

.nav-cta .nav-cta-text,
.nav-cta .nav-cta-label,
.mobile-nav-cta > span {
  position: relative !important;
  z-index: 7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease, transform 0.28s ease, filter 0.28s ease !important;
}

.nav-cta .nav-cta-cart {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: translateY(7px) scale(0.84) !important;
  pointer-events: none !important;
  color: #ffeba8 !important;
  -webkit-text-fill-color: #ffeba8 !important;
  filter: drop-shadow(0 0 7px rgba(255, 238, 190, 0.64)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.34)) !important;
  transition: opacity 0.22s ease, transform 0.30s cubic-bezier(.2,.8,.2,1) !important;
}

.nav-cta .nav-cta-cart svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.nav-cta .nav-cta-cart path,
.nav-cta .nav-cta-cart circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.nav-cta:hover,
.mobile-nav-cta:hover {
  transform: translateY(-1px) translateZ(0) !important;
  color: var(--kaq-cta-text-hot) !important;
  -webkit-text-fill-color: var(--kaq-cta-text-hot) !important;
  filter: brightness(1.06) saturate(1.06) !important;
  animation-duration: 2.55s !important;
}

.nav-cta:hover .nav-cta-text {
  opacity: 0 !important;
  transform: translateY(-7px) scale(0.92) !important;
  filter: blur(2px) !important;
}

.nav-cta:hover .nav-cta-cart {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.nav-cta:hover::before,
.mobile-nav-cta:hover::before {
  animation-duration: 2.35s !important;
  filter: blur(0.48px) saturate(1.30) brightness(1.28) !important;
}

@keyframes kaqV193CtaIngotGlint {
  0%, 9% {
    transform: translateX(-60%) skewX(-17deg) translateZ(0);
    opacity: 0;
  }
  24% { opacity: 0.56; }
  43% { opacity: 0.92; }
  54% { opacity: 1; }
  72% { opacity: 0.52; }
  84%, 100% {
    transform: translateX(315%) skewX(-17deg) translateZ(0);
    opacity: 0;
  }
}

@keyframes kaqV193CtaBreath {
  0%, 100% {
    border-color: rgba(255, 222, 132, 0.92);
    outline-color: rgba(255, 226, 139, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 2px 8px rgba(255,255,255,0.050),
      inset 0 -1px 0 rgba(0,0,0,0.78),
      0 10px 22px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255, 220, 130, 0.46),
      0 0 14px rgba(255, 211, 104, 0.30),
      0 0 32px rgba(212, 175, 55, 0.22),
      0 0 56px rgba(255, 224, 132, 0.10);
  }
  50% {
    border-color: rgba(255, 249, 218, 1);
    outline-color: rgba(255, 244, 198, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.26),
      inset 0 2px 9px rgba(255,255,255,0.086),
      inset 0 -1px 0 rgba(0,0,0,0.78),
      0 12px 25px rgba(0,0,0,0.30),
      0 0 0 1px rgba(255, 247, 212, 0.82),
      0 0 24px rgba(255, 232, 158, 0.56),
      0 0 50px rgba(212, 175, 55, 0.36),
      0 0 82px rgba(255, 228, 140, 0.17);
  }
}

/* Petals: lower count + cheaper rendering + no scroll-blocking layer. */
.ruby-petals-layer,
.ruby-petals-layer * {
  pointer-events: none !important;
}

.ruby-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 7 !important;
  overflow: hidden !important;
  contain: layout style paint !important;
  opacity: 0.82 !important;
  transform: translateZ(0) !important;
  will-change: auto !important;
}

.ruby-petal {
  margin-left: 0 !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  transform-origin: center center !important;
  animation: rubyPetalFall var(--petal-duration, 24s) linear var(--petal-delay, 0s) infinite !important;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,0.24)) !important;
  opacity: min(0.82, calc(var(--petal-opacity, 0.56) + 0.10)) !important;
}

.ruby-petal[data-depth="near"] {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.30)) !important;
  opacity: min(0.88, calc(var(--petal-opacity, 0.62) + 0.12)) !important;
}

.ruby-petal[data-depth="far"] {
  filter: none !important;
  opacity: min(0.62, calc(var(--petal-opacity, 0.44) + 0.06)) !important;
}

.ruby-petal:nth-child(n + 13) { display: none !important; }

@media (max-width: 768px) {
  .ruby-petals-layer { opacity: 0.72 !important; }
  .ruby-petal { width: calc(var(--petal-size, 36px) * 0.70) !important; }
  .ruby-petal:nth-child(n + 7) { display: none !important; }
}

@media (max-width: 480px) {
  .ruby-petal:nth-child(n + 5) { display: none !important; }
}

@media (max-width: 768px) {
  #hero .hero-editorial-cta {
    width: min(92vw, 430px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #hero .hero-editorial-cta .hero-nav-cta,
  #hero .hero-editorial-cta .hero-editorial-btn--ghost {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .mobile-nav-cta,
  .nav-cta::before,
  .mobile-nav-cta::before,
  .ruby-petal {
    animation-duration: 8s !important;
  }
}


/* ===================== V194 GLOBAL CLEANUP AUDIT — SITE-WIDE STABILITY PASS =====================
   Scope:
   - nav + hero click stack;
   - CTA clickability and premium glow;
   - lighter petals during scroll;
   - audio dock interaction safety;
   - stable section anchor offsets;
   - prevent decorative layers from blocking real UI.
   ============================================================================================== */

/* Anchor targets should land below the fixed nav. */
#about,
#reading-map,
#gallery,
#chr-section,
#excerpt,
#author,
#where,
#subscribe {
  scroll-margin-top: 118px !important;
}

/* Decorative global layers must never steal clicks. */
#bg-root,
#bg-root *,
.ruby-petals-layer,
.ruby-petals-layer *,
.hero-bg,
.hero-right-glow,
.hero-noise,
.hero-left--editorial::before,
.hero-left--editorial::after,
.hero-copy-shell::before,
.hero-copy-shell::after,
.about::before,
.about::after,
.section-bg,
.section-bg *,
.reading-map::before,
.reading-map::after {
  pointer-events: none !important;
}

/* Keep actual UI above atmosphere layers. */
.nav-shell {
  z-index: 220 !important;
  pointer-events: auto !important;
}

.nav-shell nav,
.nav-shell a,
.nav-shell button,
.nav-shell .nav-lang,
.mobile-menu-toggle {
  pointer-events: auto !important;
}

#hero {
  position: relative !important;
  isolation: isolate !important;
}

#hero .hero-left,
#hero .hero-copy-shell,
#hero .hero-cta-row,
#hero .hero-nav-cta,
#hero .hero-editorial-btn,
#hero .hero-right,
#hero .interactive-book,
#hero .interactive-book button {
  position: relative !important;
  pointer-events: auto !important;
}

#hero .hero-left {
  z-index: 30 !important;
}

#hero .hero-cta-row {
  z-index: 90 !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#hero .hero-nav-cta {
  z-index: 95 !important;
  margin-left: 0 !important;
}

#hero .hero-editorial-btn--ghost {
  z-index: 94 !important;
}

/* Audio panel remains clickable, but its ornamental layers do not block controls. */
.audio-dock {
  z-index: 160 !important;
  pointer-events: auto !important;
  contain: layout paint style !important;
}

.audio-dock::before,
.audio-dock::after {
  pointer-events: none !important;
}

.audio-dock button,
.audio-dock input,
.audio-dock a,
.audio-dock .audio-toggle,
.audio-dock .audio-volume {
  pointer-events: auto !important;
}

/* Petals: keep the romance, remove scroll jank. No layout-changing drift animation. */
.ruby-petals-layer {
  z-index: 8 !important;
  contain: strict !important;
  opacity: 0.82 !important;
  will-change: auto !important;
}

.ruby-petal {
  animation: rubyPetalFall var(--petal-duration, 28s) linear var(--petal-delay, 0s) infinite !important;
  will-change: transform !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28)) !important;
  transform: translate3d(0, -18vh, 0) rotate(var(--petal-rotate-start, 0deg)) scale(var(--petal-scale, 1)) !important;
}

.ruby-petal[data-depth="near"] {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34)) !important;
}

.ruby-petal[data-depth="far"] {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.20)) !important;
}

/* CTA: one final active interaction layer for both nav and hero buttons. */
.nav-cta,
.hero-nav-cta {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  border-color: rgba(255, 221, 132, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 246, 200, 0.18),
    0 0 14px rgba(255, 214, 103, 0.34),
    0 0 30px rgba(212, 175, 55, 0.20),
    0 14px 32px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62) !important;
  animation: v194CtaFrameBreath 3.9s ease-in-out infinite !important;
}

.nav-cta::before,
.hero-nav-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: -58% -90% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 37%,
      rgba(255, 226, 121, 0.08) 42%,
      rgba(255, 245, 194, 0.62) 47%,
      rgba(255, 255, 238, 0.98) 50%,
      rgba(255, 221, 93, 0.72) 53%,
      rgba(255, 226, 121, 0.10) 59%,
      transparent 66%,
      transparent 100%) !important;
  transform: translateX(-78%) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: v194CtaIngotGlint 3.55s cubic-bezier(.18,.68,.22,1) infinite !important;
}

.nav-cta::after,
.hero-nav-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.030) 0px,
      rgba(255,255,255,0.030) 1px,
      rgba(255,255,255,0.010) 2px,
      rgba(0,0,0,0.00) 7px),
    linear-gradient(180deg,
      rgba(31, 29, 25, 0.94) 0%,
      rgba(13, 12, 11, 0.98) 58%,
      rgba(8, 7, 7, 0.99) 100%) !important;
  opacity: 1 !important;
}

.nav-cta .nav-cta-text,
.nav-cta .nav-cta-cart,
.hero-nav-cta .nav-cta-text,
.hero-nav-cta .nav-cta-cart {
  position: relative !important;
  z-index: 3 !important;
}

.nav-cta:hover,
.hero-nav-cta:hover {
  border-color: rgba(255, 235, 164, 1) !important;
  box-shadow:
    0 0 0 1px rgba(255, 250, 220, 0.24),
    0 0 20px rgba(255, 223, 130, 0.44),
    0 0 42px rgba(212, 175, 55, 0.28),
    0 16px 36px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.68) !important;
}

@keyframes v194CtaFrameBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 246, 200, 0.16),
      0 0 12px rgba(255, 214, 103, 0.26),
      0 0 26px rgba(212, 175, 55, 0.16),
      0 14px 32px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 rgba(0, 0, 0, 0.60);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 246, 200, 0.26),
      0 0 20px rgba(255, 214, 103, 0.42),
      0 0 42px rgba(212, 175, 55, 0.26),
      0 14px 32px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.66);
  }
}

@keyframes v194CtaIngotGlint {
  0%   { transform: translateX(-82%) skewX(-18deg); opacity: 0; }
  14%  { opacity: 0.78; }
  44%  { opacity: 1; }
  68%  { transform: translateX(82%) skewX(-18deg); opacity: 0.82; }
  100% { transform: translateX(82%) skewX(-18deg); opacity: 0; }
}

/* Tame very heavy visual effects on mobile. */
@media (max-width: 768px) {
  #about,
  #reading-map,
  #gallery,
  #chr-section,
  #excerpt,
  #author,
  #where,
  #subscribe {
    scroll-margin-top: 96px !important;
  }

  .ruby-petals-layer {
    opacity: 0.68 !important;
  }

  .nav-cta,
  .hero-nav-cta {
    animation-duration: 4.8s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .hero-nav-cta,
  .nav-cta::before,
  .hero-nav-cta::before,
  .ruby-petal {
    animation: none !important;
  }
}


/* ===================== V196 HERO CTA REMOVAL + TOP NAV CTA STABILITY =====================
   User request:
   Completely remove the two bottom hero buttons: Read Now and Read Sample.
   Scope:
   - hero CTA row disabled/hidden defensively;
   - top nav CTA remains active;
   - lightweight petals restored from V195 without touching hero buttons.
   ======================================================================================= */

/* Hard defensive removal in case stale markup appears from cache. */
#hero .hero-editorial-cta,
#hero .hero-nav-cta,
#hero .hero-editorial-btn--ghost {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Top navigation CTA remains usable and centered. */
.nav-shell > .nav-cta.nav-cta-standalone {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 164px !important;
  height: 52px !important;
  padding: 0 32px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.nav-shell > .nav-cta .nav-cta-text,
.nav-shell > .nav-cta .nav-cta-cart {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    filter 0.26s ease !important;
}

.nav-shell > .nav-cta .nav-cta-text {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
  color: #f2d47c !important;
  -webkit-text-fill-color: #f2d47c !important;
  text-shadow:
    0 0 8px rgba(255, 219, 121, 0.50),
    0 0 16px rgba(212, 175, 55, 0.22),
    0 1px 2px rgba(0,0,0,0.42) !important;
}

.nav-shell > .nav-cta .nav-cta-cart {
  opacity: 0 !important;
  transform: translate3d(0, 5px, 0) scale(0.72) !important;
  filter: blur(1px) !important;
}

.nav-shell > .nav-cta:hover .nav-cta-text,
.nav-shell > .nav-cta:focus-visible .nav-cta-text {
  opacity: 0 !important;
  transform: translate3d(0, -5px, 0) scale(0.84) !important;
  filter: blur(1.8px) !important;
}

.nav-shell > .nav-cta:hover .nav-cta-cart,
.nav-shell > .nav-cta:focus-visible .nav-cta-cart {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
}

.nav-shell > .nav-cta .nav-cta-cart svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  overflow: visible !important;
}

.nav-shell > .nav-cta .nav-cta-cart path,
.nav-shell > .nav-cta .nav-cta-cart circle {
  fill: none !important;
  stroke: #f6d879 !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 222, 132, 0.72))
    drop-shadow(0 0 12px rgba(212, 175, 55, 0.32)) !important;
}

.nav-shell > .nav-cta::before {
  z-index: 2 !important;
}

.nav-shell > .nav-cta::after {
  z-index: 1 !important;
}

/* Petals: keep lightweight movement. */
.ruby-petals-layer {
  display: block !important;
  visibility: visible !important;
  opacity: 0.80 !important;
  pointer-events: none !important;
  contain: strict !important;
}

.ruby-petal {
  display: block !important;
  position: absolute !important;
  top: -18vh !important;
  left: var(--petal-left, 50vw) !important;
  width: var(--petal-size, 42px) !important;
  height: auto !important;
  opacity: 0 !important;
  will-change: transform, opacity !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
  transform: translate3d(0, -20vh, 0) rotate(var(--petal-rotate-start, 0deg)) scale(var(--petal-scale, 1)) !important;
  animation: kaqV196PetalFall var(--petal-duration, 30s) linear var(--petal-delay, 0s) infinite !important;
}

@keyframes kaqV196PetalFall {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -20vh, 0)
      rotate(var(--petal-rotate-start, 0deg))
      scale(var(--petal-scale, 1));
  }
  9% {
    opacity: var(--petal-opacity, 0.48);
  }
  50% {
    opacity: var(--petal-opacity, 0.48);
    transform:
      translate3d(var(--petal-mid-x, 20px), 50vh, 0)
      rotate(var(--petal-rotate-mid, 180deg))
      scale(var(--petal-scale, 1));
  }
  92% {
    opacity: var(--petal-opacity, 0.48);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--petal-end-x, -24px), 116vh, 0)
      rotate(var(--petal-rotate-end, 360deg))
      scale(var(--petal-scale, 1));
  }
}

@media (max-width: 768px) {
  .nav-shell > .nav-cta.nav-cta-standalone {
    height: 48px !important;
  }

  .ruby-petals-layer {
    opacity: 0.66 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ruby-petal {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ===================== V197 VISUAL CONSOLIDATION PASS =====================
   User fixes:
   1) About topline chips get nav-style interior.
   2) Main About intro glass window becomes more transparent.
   3) About final quote text gets a less-transparent local text backing.
   4) Reading Map consent orb is rebuilt as one unified plaque while preserving live ring effects.
   ======================================================================= */

/* 1) About top chips: nav-style dark brushed glass. */
#about .about-exp-kicker,
#about .about-exp-code {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(212, 175, 55, 0.36) !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      rgba(255, 255, 255, 0.010) 2px,
      rgba(0, 0, 0, 0.00) 8px),
    linear-gradient(180deg,
      rgba(34, 31, 27, 0.78) 0%,
      rgba(13, 12, 11, 0.84) 56%,
      rgba(7, 6, 6, 0.88) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 226, 132, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(212, 175, 55, 0.07) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}

/* 2) Main About intro glass window: more transparent, still readable. */
#about .about-exp-intro {
  border-color: rgba(224, 188, 91, 0.22) !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(230, 201, 132, 0.075), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(156, 47, 47, 0.040), transparent 34%),
    linear-gradient(180deg, rgba(255, 244, 214, 0.026), rgba(255, 244, 214, 0.006)),
    rgba(8, 7, 6, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.065),
    inset 0 -1px 0 rgba(212, 175, 55, 0.035),
    0 28px 74px rgba(0, 0, 0, 0.27),
    0 0 34px rgba(212, 175, 55, 0.032) !important;
  backdrop-filter: blur(9px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.02) !important;
}

#about .about-exp-intro::before {
  border-color: rgba(230, 201, 132, 0.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.03),
    0 0 22px rgba(212, 175, 55, 0.020) !important;
}

#about .about-exp-intro::after {
  opacity: 0.58 !important;
  border-color: rgba(230, 201, 132, 0.10) !important;
  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.035),
    inset 0 0 20px rgba(212, 175, 55, 0.026) !important;
}

/* 3) Final About text: less transparent behind the text only. */
#about .about-exp-final {
  position: relative !important;
  width: min(1180px, calc(100% - 32px)) !important;
  padding: clamp(34px, 4vw, 58px) clamp(24px, 6vw, 78px) !important;
  border-top-color: rgba(212, 175, 55, 0.26) !important;
  border-bottom-color: rgba(212, 175, 55, 0.20) !important;
  background:
    linear-gradient(180deg, rgba(6, 6, 6, 0.28), rgba(6, 6, 6, 0.34)),
    radial-gradient(circle at 50% 45%, rgba(212,175,55,0.10), transparent 66%) !important;
  backdrop-filter: blur(6px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.04) !important;
}

#about .about-exp-final::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px clamp(24px, 4vw, 70px) !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(20, 18, 15, 0.76), rgba(7, 7, 7, 0.70) 56%, rgba(7, 7, 7, 0.46) 100%) !important;
  box-shadow:
    0 0 42px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,244,214,0.035),
    inset 0 0 28px rgba(212,175,55,0.025) !important;
  z-index: 0 !important;
}

#about .about-exp-final p {
  position: relative !important;
  z-index: 1 !important;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.56),
    0 0 18px rgba(212,175,55,0.08) !important;
}

/* 4) Reading Map central orb: one unified plaque; live ring effects stay inside one circle. */
#reading-map .rm-core {
  position: relative !important;
  width: 220px !important;
  height: 220px !important;
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 18px 34px rgba(0,0,0,0.34))
    drop-shadow(0 0 22px rgba(212,175,55,0.10)) !important;
}

/* Remove separate satellite dot that made the plaque look duplicated/tripled. */
#reading-map .rm-core::before {
  display: none !important;
}

/* Keep the live sweep, but bind it to the same orb footprint. */
#reading-map .rm-core::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 220px !important;
  height: 220px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    conic-gradient(from 245deg,
      rgba(255,245,212,0.00) 0deg,
      rgba(255,245,212,0.00) 250deg,
      rgba(156,47,47,0.16) 273deg,
      rgba(212,175,55,0.22) 302deg,
      rgba(255,236,171,0.74) 323deg,
      rgba(255,255,236,0.92) 330deg,
      rgba(255,224,119,0.44) 341deg,
      rgba(255,245,212,0.00) 360deg) !important;
  -webkit-mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 29px),
      #000 calc(100% - 26px),
      #000 calc(100% - 8px),
      transparent calc(100% - 5px)) !important;
  mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 29px),
      #000 calc(100% - 26px),
      #000 calc(100% - 8px),
      transparent calc(100% - 5px)) !important;
  opacity: 0.92 !important;
  mix-blend-mode: normal !important;
  animation: rmUnifiedSweepV197 6.6s linear infinite !important;
}

#reading-map .rm-core-ring {
  position: absolute !important;
  inset: 0 !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border: 1px solid rgba(232, 190, 79, 0.82) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(28, 25, 22, 0.96) 0%, rgba(8, 8, 8, 0.985) 58%, rgba(4, 4, 4, 0.995) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 222, 128, 0.10),
    0 0 24px rgba(212, 175, 55, 0.15),
    0 0 42px rgba(156, 47, 47, 0.09),
    inset 0 0 34px rgba(0, 0, 0, 0.62) !important;
  animation: rmUnifiedBreathV197 5.8s ease-in-out infinite !important;
}

/* Live inner glint remains, now clipped into the same single orb. */
#reading-map .rm-core-ring::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    conic-gradient(from 270deg,
      rgba(255,245,212,0.00) 0deg,
      rgba(255,245,212,0.00) 246deg,
      rgba(156,47,47,0.10) 264deg,
      rgba(156,47,47,0.24) 281deg,
      rgba(212,175,55,0.20) 301deg,
      rgba(255,235,160,0.76) 318deg,
      rgba(255,250,218,0.96) 324deg,
      rgba(255,229,132,0.70) 333deg,
      rgba(255,245,212,0.00) 360deg) !important;
  -webkit-mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 36px),
      #000 calc(100% - 31px),
      #000 calc(100% - 12px),
      transparent calc(100% - 7px)) !important;
  mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 36px),
      #000 calc(100% - 31px),
      #000 calc(100% - 12px),
      transparent calc(100% - 7px)) !important;
  animation: rmUnifiedSweepV197 6.2s linear infinite !important;
}

#reading-map .rm-core-ring::after {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,243,210,0.065), transparent 28%),
    linear-gradient(180deg, rgba(15,14,13,0.985), rgba(5,5,5,0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 22px rgba(0,0,0,0.56) !important;
}

#reading-map .rm-core-text {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  margin: 0 !important;
  inset: auto !important;
  text-align: center !important;
}

@keyframes rmUnifiedSweepV197 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Needed for rm-core-ring::before, which rotates without translate. */
#reading-map .rm-core-ring::before {
  animation-name: rmUnifiedInnerSweepV197 !important;
}

@keyframes rmUnifiedInnerSweepV197 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rmUnifiedBreathV197 {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 128, 0.10),
      0 0 22px rgba(212, 175, 55, 0.12),
      0 0 38px rgba(156, 47, 47, 0.06),
      inset 0 0 32px rgba(0,0,0,0.60);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 128, 0.17),
      0 0 30px rgba(212, 175, 55, 0.19),
      0 0 48px rgba(156, 47, 47, 0.11),
      inset 0 0 36px rgba(0,0,0,0.65);
  }
}

@media (max-width: 1024px) {
  #reading-map .rm-core {
    width: 172px !important;
    height: 172px !important;
    min-height: 172px !important;
  }

  #reading-map .rm-core::after,
  #reading-map .rm-core-ring {
    width: 172px !important;
    height: 172px !important;
  }

  #reading-map .rm-core-ring::after {
    inset: 20px !important;
  }
}

@media (max-width: 560px) {
  #about .about-exp-final::before {
    inset: 12px 10px !important;
    border-radius: 22px !important;
  }
}


/* ===================== V198 PLAQUES + FINAL QUOTE CLEANUP =====================
   1) Four hero marker plaques get nav-style inner background.
   2) About final section keeps only the local text backing; remove wide mid-panel fill.
   ============================================================================ */

/* Four hero plaques: make the inner fill match nav-style dark brushed glass. */
#hero .hero-contract-markers span {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(212,175,55,0.34) !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.034) 0px,
      rgba(255,255,255,0.034) 1px,
      rgba(255,255,255,0.010) 2px,
      rgba(0,0,0,0.00) 8px),
    linear-gradient(180deg,
      rgba(35,31,26,0.78) 0%,
      rgba(14,12,10,0.86) 56%,
      rgba(7,6,6,0.92) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,226,132,0.05),
    0 10px 24px rgba(0,0,0,0.22),
    0 0 22px rgba(212,175,55,0.07) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

#hero .hero-contract-markers span::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,244,210,0.060), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.040), transparent 44%) !important;
  opacity: 1 !important;
}

#hero .hero-contract-markers span::after {
  inset: 1px !important;
  border-radius: inherit !important;
  z-index: 1 !important;
}

#hero .hero-contract-markers span > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Final about quote: remove the extra wide background between the lines.
   Keep only the local backing under the text (::before). */
#about .about-exp-final {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ===================== V199 CENTER READING MAP PLAQUE REBUILD =====================
   Full reset/rebuild for the central plaque between Tropes and Warnings.
   The HTML remains:
   <aside class="rm-core"><div class="rm-core-ring"></div><div class="rm-core-text">...</div></aside>
   =============================================================================== */

/* Reset old center-plaque layers from previous passes. */
#reading-map .rm-core,
#reading-map .rm-core::before,
#reading-map .rm-core::after,
#reading-map .rm-core-ring,
#reading-map .rm-core-ring::before,
#reading-map .rm-core-ring::after,
#reading-map .rm-core-text,
#reading-map .rm-core-text span,
#reading-map .rm-core-text strong,
#reading-map .rm-core-text em {
  box-sizing: border-box !important;
}


/* --- SUPER HIGHLIGHT QUOTE --- */
#hero .hero-title-quote {
    position: relative;
    opacity: 0;
    font-size: 1.5rem !important;
    color: #d4af37 !important;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    padding: 1.5rem 1.5rem 1.5rem 2rem !important;
    margin: 2.5rem 0 !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 100%) !important;
    border-left: 3px solid #d4af37 !important;
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0 8px 8px 0;
    max-width: 650px;
    letter-spacing: 0.02em;
    animation: hFadeUp 0.8s 0.55s forwards, quote-glow 4s ease-in-out infinite alternate;
}

#hero .hero-title-quote::before {
    content: "«" !important;
    position: absolute !important;
    left: -0.5rem !important;
    top: -1.5rem !important;
    font-size: 5rem !important;
    color: rgba(212, 175, 55, 0.15) !important;
    font-family: 'Cormorant Garamond', serif !important;
    pointer-events: none;
    line-height: 1;
}

@keyframes quote-glow {
    0% {
        box-shadow: inset 10px 0 20px -10px rgba(212, 175, 55, 0.1);
    }
    100% {
        box-shadow: inset 10px 0 30px -5px rgba(212, 175, 55, 0.3);
    }
}

/* --- RESPONSIVE FIXES FOR SUPER HIGHLIGHT QUOTE --- */
/* Widescreen (1440px+) */
@media (min-width: 1440px) {
    #hero .hero-title-quote {
        font-size: 1.8rem !important;
        max-width: 800px;
        padding: 2rem 2rem 2rem 3rem !important;
        margin: 3.5rem 0 !important;
    }
    #hero .hero-title-quote::before {
        font-size: 6rem !important;
        top: -2rem !important;
        left: -1rem !important;
    }
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    #hero .hero-title-quote {
        font-size: 1.3rem !important;
        max-width: 90%;
        padding: 1.2rem 1.2rem 1.2rem 1.5rem !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    #hero .hero-title-quote {
        font-size: 1.1rem !important;
        padding: 1rem 1rem 1rem 1.2rem !important;
        margin: 1.5rem 0 !important;
        max-width: 100%;
        line-height: 1.4;
    }
    #hero .hero-title-quote::before {
        font-size: 3.5rem !important;
        top: -1rem !important;
        left: -0.2rem !important;
    }
}

/* Very small mobile (max-width: 375px) */
@media (max-width: 375px) {
    #hero .hero-title-quote {
        font-size: 1rem !important;
        padding: 0.8rem 0.8rem 0.8rem 1rem !important;
    }
}

/* --- REDUCED MOTION FALLBACK FOR SUPER HIGHLIGHT QUOTE --- */
@media (prefers-reduced-motion: reduce) {
    #hero .hero-title-quote {
        opacity: 1 !important;
        animation: none !important;
    }
}