/* Purposeful three-cover editorial showcase: full series is represented beyond just two featured books.
   A Promise of Fireflies is the prominent center cover; the supporting novels frame it. */
.hero .hero-arch {transform:rotate(0deg) !important;right:-1% !important;width:94% !important;border-radius:320px 320px 12px 12px !important;}
.hero .hero-cover-main,.hero .hero-cover-back,.hero .hero-cover-third {
  position:absolute !important;box-sizing:border-box !important;
  transform-origin:center center !important;
  filter:drop-shadow(0 12px 18px rgba(57,38,83,.20)) !important;
}
.hero .hero-cover-main {left:54% !important;top:13% !important;width:48% !important;max-width:252px !important;z-index:5 !important;transform:translateX(-50%) rotate(-1deg) !important;filter:drop-shadow(0 25px 21px rgba(57,38,83,.25)) !important;}
.hero .hero-cover-third {left:24% !important;top:19% !important;width:30% !important;max-width:165px !important;z-index:2 !important;transform:translateX(-50%) rotate(-7deg) !important;}
.hero .hero-cover-back {left:84% !important;right:auto !important;top:19% !important;width:30% !important;max-width:165px !important;z-index:2 !important;transform:translateX(-50%) rotate(7deg) !important;}
.hero .hero-cover-main .cover-frame,.hero .hero-cover-back .cover-frame,.hero .hero-cover-third .cover-frame {
  border:3px solid rgba(255,255,255,.94) !important;border-radius:3px !important;
  box-shadow:0 8px 22px rgba(57,38,83,.12) !important;
}
.hero .hero-cover-third .cover-frame {aspect-ratio:2/3;background:#e8dff1;overflow:hidden;}
.hero .hero-cover-third .cover-frame img {display:block;width:100%;height:100%;object-fit:cover;}
.hero .hero-art-tagline {bottom:42px !important;left:12% !important;right:6% !important;width:82% !important;max-width:420px !important;}
@media(min-width:761px) and (max-width:1100px){
  .hero .hero-cover-main{left:54% !important;top:14% !important;width:45% !important;max-width:230px !important;}
  .hero .hero-cover-third{left:25% !important;top:20% !important;width:29% !important;}
  .hero .hero-cover-back{left:83% !important;top:20% !important;width:29% !important;}
}
@media(max-width:760px){
  .hero .hero-cover-main{left:54% !important;top:12% !important;width:46% !important;max-width:none !important;}
  .hero .hero-cover-third{left:26% !important;top:18% !important;width:31% !important;max-width:none !important;transform:translateX(-50%) rotate(-5deg) !important;}
  .hero .hero-cover-back{left:82% !important;top:18% !important;width:31% !important;max-width:none !important;transform:translateX(-50%) rotate(5deg) !important;}
  .hero .hero-art-tagline {bottom:36px !important;left:10% !important;right:5% !important;width:85% !important;}
}
@media(max-width:410px){
 .hero .hero-cover-main{left:54% !important;top:14% !important;width:46% !important;}
 .hero .hero-cover-third{left:26% !important;top:20% !important;width:31% !important;}
 .hero .hero-cover-back{left:82% !important;top:20% !important;width:31% !important;}
}

/* Final hero refinement: reduce dead space between the three book covers and the story promise. */
@media (min-width: 1101px) {
  .hero .hero-art-tagline { bottom: 153px !important; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero .hero-art-tagline { bottom: 112px !important; }
}
@media (min-width: 411px) and (max-width: 760px) {
  .hero .hero-art-tagline { bottom: 92px !important; }
}
@media (max-width: 410px) {
  .hero .hero-art-tagline { bottom: 79px !important; }
}

/* Firefly choreography: frame the novel trio with two warm accents, and softly lead the eye to the tagline. */
.hero .hero-firefly--one {left:3% !important;right:auto !important;top:10% !important;bottom:auto !important;transform:rotate(-22deg) scale(.86) !important;opacity:.87 !important;z-index:6 !important;}
.hero .hero-firefly--two {right:-2% !important;left:auto !important;top:12% !important;bottom:auto !important;transform:rotate(18deg) scale(.77) !important;opacity:.88 !important;z-index:6 !important;}
.hero .hero-firefly--three {left:5% !important;right:auto !important;top:auto !important;bottom:21% !important;transform:rotate(-10deg) scale(.67) !important;opacity:.7 !important;z-index:6 !important;}
@media (max-width:760px){
 .hero .hero-firefly--one {left:1% !important;top:7% !important;transform:rotate(-20deg) scale(.67) !important;}
 .hero .hero-firefly--two {right:0% !important;top:11% !important;transform:rotate(20deg) scale(.6) !important;}
 .hero .hero-firefly--three {left:1% !important;bottom:20% !important;transform:rotate(-10deg) scale(.56) !important;}
}


/* 2026-11-06: mobile-only central alignment and contained firefly constellation.
   All cover centers and the lavender arch share the same horizontal reference. */
@media (max-width: 760px) {
  .hero .hero-art { width: 100% !important; min-width: 0 !important; margin-inline: auto !important; }
  .hero .hero-arch {
    left: 50% !important; right: auto !important; width: 94% !important;
    transform: translateX(-50%) !important;
  }
  .hero .hero-cover-main {
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
  }
  .hero .hero-cover-third {
    left: 21% !important; right: auto !important;
    transform: translateX(-50%) rotate(-5deg) !important;
  }
  .hero .hero-cover-back {
    left: 79% !important; right: auto !important;
    transform: translateX(-50%) rotate(5deg) !important;
  }
  .hero .hero-art-tagline {
    left: 50% !important; right: auto !important;
    width: 86% !important; max-width: 370px !important;
    margin: 0 !important; transform: translateX(-50%) !important;
    text-align: center !important;
  }
  .hero .hero-firefly { width: 34px !important; height: 34px !important; }
  .hero .hero-firefly--one {
    left: 13% !important; right: auto !important; top: 15% !important; bottom: auto !important;
    transform: rotate(-19deg) scale(.67) !important;
  }
  .hero .hero-firefly--two {
    left: auto !important; right: 13% !important; top: 15% !important; bottom: auto !important;
    transform: rotate(19deg) scale(.67) !important;
  }
  .hero .hero-firefly--three {
    left: 17% !important; right: auto !important; top: 66% !important; bottom: auto !important;
    transform: rotate(-9deg) scale(.55) !important;
  }
}

/* November 2026: keep all three fireflies inside the lavender arch on every device.
   These absolute-positioned accents do not contribute to the layout width. */
.hero .hero-firefly--one { left:16% !important; right:auto !important; top:29% !important; bottom:auto !important; z-index:7 !important; }
.hero .hero-firefly--two { left:auto !important; right:14% !important; top:29% !important; bottom:auto !important; z-index:7 !important; }
.hero .hero-firefly--three { left:19% !important; right:auto !important; top:61% !important; bottom:auto !important; z-index:7 !important; }
@media(max-width:760px){
 .hero .hero-firefly--one {left:16% !important;right:auto !important;top:32% !important;bottom:auto !important;}
 .hero .hero-firefly--two {left:auto !important;right:16% !important;top:32% !important;bottom:auto !important;}
 .hero .hero-firefly--three {left:19% !important;right:auto !important;top:63% !important;bottom:auto !important;}
}

/* Nov 11: fireflies appear in the lavender arch, always behind book cover artwork. */
.hero .hero-firefly { z-index:1 !important; pointer-events:none !important; }
@media (min-width:761px) {
  .hero .hero-firefly--one {left:10% !important;right:auto !important;top:67% !important;bottom:auto !important;transform:rotate(-17deg) scale(.62) !important;}
  .hero .hero-firefly--two {left:auto !important;right:9% !important;top:66% !important;bottom:auto !important;transform:rotate(17deg) scale(.62) !important;}
  .hero .hero-firefly--three {left:49% !important;right:auto !important;top:22% !important;bottom:auto !important;transform:rotate(8deg) scale(.50) !important;}
}
@media (max-width:760px) {
  .hero .hero-firefly--one {left:12% !important;right:auto !important;top:62% !important;bottom:auto !important;transform:rotate(-17deg) scale(.59) !important;}
  .hero .hero-firefly--two {left:auto !important;right:12% !important;top:62% !important;bottom:auto !important;transform:rotate(17deg) scale(.59) !important;}
  .hero .hero-firefly--three {left:49% !important;right:auto !important;top:8% !important;bottom:auto !important;transform:rotate(8deg) scale(.48) !important;}
}