/*
 * Lander: one comic panel for the hero (Eliot "speaks" the headline), then the collection as a 3D shelf of books.
 * The shelf is the memorable moment; everything else stays quiet.
 */

.he-is-lander {
  background: var(--he-paper);
}

.he-lander h2 {
  font: 700 clamp(1.9rem, 3.6vw, 2.9rem) / 1.05 var(--font-display);
  color: var(--he-ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.he-lead {
  font-size: 1.12rem;
  max-width: 56ch;
  margin: 0 0 22px;
}

.he-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* ---------- hero «Eliot in the sky» ----------
 * Layers: the sky picture (still), far items, near items, then Eliot sitting on his name.
 * Everything follows the pointer a little (parallax) and, on scroll, the scene sinks slower than the page,
 * the items drift apart and fade, and the collection rises over it through a long soft fade: no line between
 * the two, it reads as one page (js/lander.js sets --leave from 0 to 1).
 */
.he-sky {
  --scene-h: min(56.25vw, max(560px, calc(100svh - 76px)));
  --px: 0;
  --py: 0;
  --leave: 0;
  position: relative;
  z-index: 0;
}

.he-sky-scene {
  position: relative;
  height: var(--scene-h);
  overflow: hidden;
  container-type: size;
  background: linear-gradient(180deg, #8fcaf5 0%, #dff0fb 45%, #fff2dc 100%);
  transform: translate3d(0, calc(var(--leave) * var(--scene-h) * 0.4), 0);
}

/* the scene keeps its 1672 × 941 shape and covers the box, so every item stays on its spot of the picture */
.he-sky-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 177.69cqh);
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
}

/* layer 1: still */
.he-sky-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.he-fl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1 / var(--r);
  /* pointer parallax: the near items move more */
  translate: calc(var(--px) * var(--depth) * -16px) calc(var(--py) * var(--depth) * -12px);
  transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
  /* scroll: the items open out from the centre and fade, the near ones faster */
  transform: translate3d(calc(var(--dx) * var(--leave) * var(--depth) * 18cqw), calc((var(--dy) - 0.4) * var(--leave) * var(--depth) * 14cqh), 0);
  opacity: calc(1 - var(--leave) * var(--depth) * 0.95);
  animation: he-fade-in 1.2s ease backwards;
  animation-delay: calc(var(--i) * 40ms + 0.1s);
  pointer-events: none;
}

.he-fl img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 12px rgba(16, 42, 86, 0.16));
}

/* layer 2: far items, a very small slow drift */
.he-fl.is-far img {
  animation: he-drift-far calc(11s + var(--i) * 0.37s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.3s);
}

/* layer 3: near items, a little more (still gentle) */
.he-fl.is-near img {
  animation: he-drift-near calc(12s + var(--i) * 0.29s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}

/* ---------- the lockup: Eliot sitting on ELIOT (brand art, brand/lander-hero/eliot-lockup.webp) ----------
 * Marks and glow are placed in % of the lockup box, so everything scales as one piece.
 */
.he-hero-stage {
  position: absolute;
  left: 50%;
  bottom: 12cqh;
  height: min(82cqh, 92cqw * 1.067);
  aspect-ratio: 1180 / 1259;
  z-index: 2;
  translate: calc(-50% + var(--px) * -6px) calc(var(--py) * -4px);
  transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
  transform: translate3d(0, calc(var(--leave) * -12cqh), 0) scale(calc(1 - var(--leave) * 0.08));
  transform-origin: 50% 100%;
  /* he stays solid for the first part of the scroll, then fades quickly */
  opacity: calc(1.7 - var(--leave) * 2.6);
}

/* warm light behind him, with slow sun rays */
.he-hero-glow {
  position: absolute;
  left: 48%;
  top: 34%;
  width: 125%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 251, 236, 0.95), rgba(255, 246, 222, 0.62) 38%, rgba(255, 244, 214, 0.2) 62%, rgba(255, 244, 214, 0) 78%);
  pointer-events: none;
  animation: he-fade-in 1.4s ease backwards;
}

.he-hero-glow::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 7deg, rgba(255, 255, 255, 0.55) 10deg, rgba(255, 255, 255, 0) 13deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 22%, #000 40%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 92%);
  mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 22%, #000 40%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 92%);
  opacity: 0.55;
  animation: he-spin 160s linear infinite;
}

.he-hero-lockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 20px 24px rgba(16, 42, 86, 0.24));
  animation: he-lockup-in 1s cubic-bezier(0.25, 1.3, 0.45, 1) backwards, he-float 6s ease-in-out 1.2s infinite;
}

/* the yellow marks of the books' story pages: a few, around him */
.he-mark {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(16, 42, 86, 0.18));
  animation: he-mark-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) backwards, he-mark-beat 3.6s ease-in-out infinite;
}

.he-mark.is-burst {
  left: 54%;
  top: -3%;
  width: 12%;
  rotate: 18deg;
  animation-delay: 1.05s, 2s;
}

.he-mark.is-dash {
  left: 9%;
  top: 22%;
  width: 8.5%;
  scale: -1 1;
  rotate: 8deg;
  animation-delay: 1.2s, 2.6s;
}

.he-mark.is-spark {
  left: 79%;
  top: 14%;
  width: 11%;
  rotate: -6deg;
  animation-delay: 1.35s, 3.2s;
}

.he-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes he-fade-in {
  from { opacity: 0; }
}

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

@keyframes he-drift-far {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes he-drift-near {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 3px -8px; rotate: 0.8deg; }
}

@keyframes he-lockup-in {
  from { opacity: 0; transform: translateY(4%) scale(0.94); }
}

@keyframes he-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1%); }
}

@keyframes he-mark-pop {
  from { opacity: 0; transform: scale(0.2); }
}

@keyframes he-mark-beat {
  0%, 82%, 100% { transform: scale(1); }
  88% { transform: scale(1.14); }
  94% { transform: scale(0.97); }
}

/* the release hero's bubble pops in; it stays readable even when the animation is paused (background tab) */
@keyframes he-pop {
  from { scale: 0.7; }
  to { scale: 1; }
}

@media (max-width: 760px) {
  .he-sky {
    --scene-h: 132vw;
  }
  .he-hero-stage {
    bottom: 10cqh;
    height: auto;
    width: 86cqw;
  }
}

.he-bubble {
  position: relative;
  background: #fff;
  border: var(--he-line) solid var(--he-ink);
  border-radius: 34px;
  box-shadow: var(--he-pop);
}

.he-hero-eyebrow {
  margin: 0 0 6px;
  font: 600 1rem var(--font-display);
  color: var(--he-orange);
}

/* sticker: age range */
.he-age {
  position: absolute;
  right: 3.5%;
  top: 7%;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  padding: 18px;
  text-align: center;
  font: 700 1.05rem / 1.05 var(--font-display);
  color: var(--he-ink);
  background: var(--he-yellow);
  clip-path: polygon(50% 0, 61% 14%, 79% 8%, 80% 26%, 98% 30%, 88% 46%, 100% 61%, 82% 69%, 84% 88%, 65% 84%, 52% 100%, 40% 85%, 21% 92%, 19% 73%, 1% 66%, 12% 50%, 2% 33%, 20% 28%, 20% 9%, 38% 14%);
  rotate: 9deg;
}

/* ---------- release hero ---------- */
.he-release {
  position: relative;
  padding: 56px 0 72px;
  background:
    linear-gradient(90deg, rgba(16, 42, 86, 0.78) 0%, rgba(16, 42, 86, 0.45) 55%, rgba(16, 42, 86, 0.15) 100%),
    var(--he-hero-bg, linear-gradient(135deg, var(--he-blue), var(--he-ink))) center / cover no-repeat;
  border-bottom: 4px solid var(--he-ink);
  overflow: hidden;
}

.he-release-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: 48px;
  align-items: center;
}

.he-release-book {
  position: relative;
  justify-self: center;
  perspective: 1200px;
}

.he-book3d {
  position: relative;
  width: clamp(230px, 28vw, 360px);
  aspect-ratio: 4 / 5;
  transform: rotateY(-16deg) rotateX(3deg);
  transform-style: preserve-3d;
  border-radius: 6px 16px 16px 6px;
  border: 3px solid var(--he-ink);
  box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.28);
  overflow: hidden;
  background: var(--he-sky);
}

.he-book3d > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.he-book3d::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.25) 60%, rgba(0, 0, 0, 0.1));
  z-index: 2;
}

.he-book3d-logo {
  position: absolute;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  width: 28%;
  z-index: 3;
}

.he-book3d-title,
.he-book-title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  z-index: 3;
  text-align: center;
  font: 700 clamp(1.2rem, 2.2vw, 1.9rem) / 1 var(--font-display);
  color: #fff;
  -webkit-text-stroke: 5px var(--he-ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--he-ink);
  text-wrap: balance;
}

.he-burst {
  position: absolute;
  top: -22px;
  right: -34px;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  padding: 22px;
  text-align: center;
  font: 700 1.2rem / 1 var(--font-display);
  color: var(--he-ink);
  background: var(--he-yellow);
  clip-path: polygon(50% 0, 61% 14%, 79% 8%, 80% 26%, 98% 30%, 88% 46%, 100% 61%, 82% 69%, 84% 88%, 65% 84%, 52% 100%, 40% 85%, 21% 92%, 19% 73%, 1% 66%, 12% 50%, 2% 33%, 20% 28%, 20% 9%, 38% 14%);
  rotate: 12deg;
  z-index: 4;
}

.he-release.is-out .he-burst {
  background: var(--he-orange);
  color: #fff;
}

.he-release-copy {
  padding: 30px 32px 32px;
  max-width: 560px;
}

.he-release-tag {
  margin: 0 0 6px;
  font: 600 1.05rem var(--font-display);
  color: var(--he-orange);
}

.he-release-copy h1 {
  font: 700 clamp(2.1rem, 4.2vw, 3.6rem) / 1 var(--font-display);
  color: var(--he-blue);
  margin: 0 0 12px;
}

.he-release-syn {
  margin: 0 0 14px;
  font-size: 1.06rem;
}

.he-release-date {
  margin: 0 0 12px;
  font: 600 1.15rem var(--font-display);
}

.he-countdown {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.he-countdown span {
  display: grid;
  justify-items: center;
  min-width: 82px;
  padding: 10px 10px 8px;
  background: var(--he-sky);
  border: 2px solid var(--he-ink);
  border-radius: 14px;
  box-shadow: var(--he-pop-sm);
}

.he-countdown b {
  font: 700 2rem / 1 var(--font-display);
  color: var(--he-blue);
  font-variant-numeric: tabular-nums;
}

.he-countdown small {
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .he-release-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .he-burst {
    right: -14px;
    width: 104px;
    height: 104px;
    font-size: 0.95rem;
  }
  .he-release-copy {
    padding: 22px 20px 24px;
  }
}

/* ---------- the collection: a 3D shelf of real-looking books (lander + /comics/) ---------- */
.he-library {
  position: relative;
  padding: 56px 0 64px;
  /* the brand sky: warm light under the hero's clouds, into Hola Eliot blue, with the printed-dot texture */
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(rgba(21, 94, 239, 0.1) 1.3px, transparent 1.8px) 0 0 / 14px 14px,
    var(--he-lib-bg, linear-gradient(180deg, #fff4e3 0%, #e7f3fd 42%, #cfe6fb 78%, #b9dcfa 100%)) center / cover no-repeat;
  border-top: 4px solid var(--he-ink);
  border-bottom: 4px solid var(--he-ink);
  overflow: hidden;
}

.he-library.has-bg {
  background: var(--he-lib-bg) center / cover no-repeat;
}

/* after the sky hero: no border, the collection rises over the hero through a long soft fade (one page, no cut) */
.he-sky + .he-library {
  --he-fade: clamp(130px, 22vh, 230px);
  z-index: 1;
  margin-top: calc(var(--he-fade) * -1);
  padding-top: calc(var(--he-fade) + 8px);
  border-top: 0;
  background: none;
  isolation: isolate;
}

.he-sky + .he-library::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(rgba(21, 94, 239, 0.1) 1.3px, transparent 1.8px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fff6e8 0%, #fff4e3 calc(var(--he-fade) + 40px), #e7f3fd 48%, #cfe6fb 80%, #b9dcfa 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) calc(var(--he-fade) * 0.3), rgba(0, 0, 0, 0.5) calc(var(--he-fade) * 0.6), rgba(0, 0, 0, 0.88) calc(var(--he-fade) * 0.85), #000 var(--he-fade));
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) calc(var(--he-fade) * 0.3), rgba(0, 0, 0, 0.5) calc(var(--he-fade) * 0.6), rgba(0, 0, 0, 0.88) calc(var(--he-fade) * 0.85), #000 var(--he-fade));
}

.he-sky + .he-library.has-bg::before {
  background: var(--he-lib-bg) center / cover no-repeat;
}

/* two yellow marks of the books around the collection title */
.he-h-mark {
  position: absolute;
  top: 50%;
  width: 0.95em;
  aspect-ratio: 1;
  background: center / contain no-repeat;
  pointer-events: none;
}

.he-h-mark.is-left {
  right: 100%;
  translate: 0.55em -82%;
  background-image: url("../brand/kdp/marks/mark-08.png");
  scale: -1 1;
  rotate: -14deg;
}

.he-h-mark.is-right {
  left: 100%;
  translate: -0.6em -70%;
  background-image: url("../brand/kdp/marks/mark-17.png");
  rotate: 10deg;
}

@media (max-width: 700px) {
  .he-sky + .he-library {
    --he-fade: 120px;
  }
  .he-h-mark {
    width: 0.7em;
  }
}

.he-library-plain {
  padding: 8px 0 60px;
  overflow: hidden;
}

.he-library-head {
  text-align: center;
}

/* the punchline, hand-lettered in the HolaEliot font with a yellow marker swoosh */
.he-library-head h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 6px;
  padding: 0 0.2em 0.32em;
  font: 700 clamp(2.2rem, 5vw, 4rem) / 1.08 "HolaEliot", var(--font-display);
  color: var(--he-blue);
  letter-spacing: 0;
  text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 255, 255, 0.95);
  rotate: -1.5deg;
  text-wrap: balance;
  isolation: isolate;
  max-width: 15em;
}

.he-library-head h2::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 12%;
  bottom: 0;
  height: 0.38em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20 C 90 6, 200 4, 396 14' fill='none' stroke='%23ffd65a' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M30 26 C 140 16, 260 15, 372 22' fill='none' stroke='%23ff8a34' stroke-width='4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
}

.he-shelf {
  --he-book-w: clamp(190px, 24vw, 300px);
  position: relative;
  height: calc(var(--he-book-w) * 1.25 + 58px);
  margin-top: 18px;
  perspective: 1500px;
}

.he-shelf-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* without the script: a simple row you can scroll */
.he-shelf:not(.is-3d) .he-shelf-track {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  padding: 12px 24px 34px;
  scroll-snap-type: x mandatory;
}

.he-shelf:not(.is-3d) .he-book {
  flex: 0 0 var(--he-book-w);
  scroll-snap-align: center;
}

.he-shelf:not(.is-3d) .he-arrow {
  display: none;
}

.he-shelf.is-3d .he-book {
  position: absolute;
  left: 50%;
  top: 22px;
  width: var(--he-book-w);
  margin-left: calc(var(--he-book-w) / -2);
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.4s ease, filter 0.4s ease;
  will-change: transform;
}

/* a book: back board + page block on the right + the cover, which opens a little on the front book */
.he-tome {
  --he-thick: clamp(9px, 1.1vw, 14px);
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  margin-right: var(--he-thick);
  color: inherit;
  text-decoration: none;
}

.he-tome::before {
  content: "";
  position: absolute;
  inset: 1.2% calc(var(--he-thick) * -1) -1.4% 2px;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(90deg, #0b2147, #17386f 40%, #0d2650);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

/* soft shadow on the ground */
.he-tome::after {
  content: "";
  position: absolute;
  left: 4%;
  right: calc(var(--he-thick) * -1.6);
  bottom: -26px;
  height: 30px;
  background: radial-gradient(closest-side, rgba(16, 42, 86, 0.38), rgba(16, 42, 86, 0) 100%);
  filter: blur(1px);
  z-index: -1;
}

.he-tome-pages {
  position: absolute;
  inset: 1.6% calc(var(--he-thick) * -0.72) 0.9% 4px;
  border-radius: 2px 6px 6px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(150, 128, 92, 0.32) 0 1px, transparent 1px 3px) right / var(--he-thick) 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(16, 42, 86, 0.07) 13px 14px) 18% 16% / 66% 62% no-repeat,
    linear-gradient(90deg, #f3ead6, #fffaf0 18%, #fbf3e3);
  box-shadow: inset -2px 0 3px rgba(120, 96, 60, 0.25);
  display: grid;
  place-items: center;
}

.he-tome-read {
  font: 700 clamp(1.1rem, 1.7vw, 1.5rem) "HolaEliot", var(--font-display);
  color: var(--he-blue);
  opacity: 0;
  translate: 18% 0;
  transition: opacity 0.35s ease 0.12s;
}

.he-tome-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 3px 9px 9px 3px;
  overflow: hidden;
  background: var(--he-sky);
  transform-origin: 0 50%;
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.65s ease;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.12), 4px 6px 14px rgba(16, 42, 86, 0.22);
}

.he-tome-cover > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the spine and its crease on the cover's left edge */
.he-tome-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0.26) 34%, rgba(0, 0, 0, 0.22) 62%, rgba(255, 255, 255, 0.12) 78%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* gloss of a laminated cover */
.he-tome-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 30%, transparent 46%, rgba(0, 0, 0, 0.06) 100%);
  z-index: 3;
  pointer-events: none;
}

.he-book-logo {
  position: absolute;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  width: 26%;
  z-index: 2;
}

.he-book-title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  z-index: 2;
  text-align: center;
  font: 700 clamp(1.2rem, 2.2vw, 1.9rem) / 1 var(--font-display);
  color: #fff;
  -webkit-text-stroke: 5px var(--he-ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--he-ink);
  text-wrap: balance;
}

.he-tome-badge {
  position: absolute;
  left: 12%;
  bottom: 4%;
  z-index: 4;
  font: 700 0.78rem / 1.1 var(--font-body);
  color: var(--he-ink);
  background: var(--he-yellow);
  border: 2px solid var(--he-ink);
  border-radius: 999px;
  padding: 4px 10px;
}

.he-tome-badge.is-amazon-only {
  background: #ffd814;
}

/* the front book: lifted, and its cover opens when you point at it */
.he-book.is-current .he-tome-cover {
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.12), 10px 16px 26px rgba(16, 42, 86, 0.3);
}

.he-book.is-current .he-tome:hover .he-tome-cover,
.he-book.is-current .he-tome:focus-visible .he-tome-cover {
  transform: perspective(1100px) rotateY(-34deg);
  box-shadow: -6px 10px 24px rgba(16, 42, 86, 0.28);
}

.he-book.is-current .he-tome:hover .he-tome-read,
.he-book.is-current .he-tome:focus-visible .he-tome-read {
  opacity: 1;
}

.he-book.is-far {
  pointer-events: none;
}

.he-mascot {
  position: absolute;
  left: max(2%, calc(50% - var(--he-book-w) * 2.3));
  top: -46px;
  width: clamp(120px, 15vw, 210px);
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(16, 42, 86, 0.25));
}

.he-arrow {
  position: absolute;
  top: calc(22px + var(--he-book-w) * 0.625);
  translate: 0 -50%;
  z-index: 70;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--he-blue);
  border: var(--he-line) solid var(--he-ink);
  box-shadow: var(--he-pop);
  cursor: pointer;
}

.he-arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.he-arrow:active {
  translate: 3px calc(-50% + 3px);
  box-shadow: 2px 2px 0 var(--he-ink);
}

.he-arrow-prev {
  left: max(12px, calc(50% - 600px));
}

.he-arrow-next {
  right: max(12px, calc(50% - 600px));
}

.he-book-cta {
  text-align: center;
  margin: 18px 0 0;
}

.he-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.he-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--he-ink);
  background: #fff;
  cursor: pointer;
}

.he-dot.is-on {
  background: var(--he-blue);
  transform: scale(1.25);
}

.he-empty {
  text-align: center;
  padding: 30px 0 10px;
}

.he-empty-title {
  font: 700 1.5rem var(--font-display);
  margin: 0 0 6px;
}

@media (max-width: 700px) {
  .he-shelf {
    --he-book-w: min(60vw, 250px);
  }
  .he-arrow {
    width: 46px;
    height: 46px;
  }
  .he-mascot {
    top: -30px;
    left: 4px;
    width: 100px;
  }
}

/* ---------- characters ---------- */
.he-chars {
  padding: 64px 0;
  background: var(--he-dots), var(--he-chars-bg, var(--he-paper)) center / cover no-repeat;
}

.he-chars-row {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.he-chars-row li {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.he-chars-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(16, 42, 86, 0.2));
}

.he-chars-row span {
  font: 600 1.05rem var(--font-display);
  background: #fff;
  border: 2px solid var(--he-ink);
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: var(--he-pop-sm);
}

/* ---------- coloring ---------- */
.he-coloring {
  padding: 64px 0;
  background: var(--he-coloring-bg, #fff) center / cover no-repeat;
  border-top: 4px solid var(--he-ink);
}

.he-coloring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.he-coloring-covers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.he-coloring-covers li {
  width: 42%;
  margin-left: -9%;
  rotate: -6deg;
}

.he-coloring-covers li:first-child {
  margin-left: 0;
}

.he-coloring-covers li:nth-child(2) {
  rotate: 3deg;
  translate: 0 -12px;
}

.he-coloring-covers li:nth-child(3) {
  rotate: 9deg;
}

.he-coloring-covers img {
  border: 3px solid var(--he-ink);
  border-radius: 10px;
  box-shadow: var(--he-pop);
  background: #fff;
}

@media (max-width: 760px) {
  .he-coloring-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Amazon ---------- */
.he-amazon {
  padding: 64px 0 72px;
  background: var(--he-sky);
  border-top: 4px solid var(--he-ink);
}

.he-amazon-row {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 26px;
}

.he-amazon-row li {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.he-amazon-row img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 3px solid var(--he-ink);
  border-radius: 6px 12px 12px 6px;
  box-shadow: var(--he-pop);
}

.he-amazon-row p {
  margin: 0;
  font: 600 1.1rem var(--font-display);
}

@media (prefers-reduced-motion: reduce) {
  .he-fl,
  .he-fl img,
  .he-hero-glow,
  .he-hero-glow::after,
  .he-hero-lockup,
  .he-mark {
    animation: none !important;
  }
  .he-tome-cover {
    transition: none;
  }
  .he-shelf.is-3d .he-book {
    transition: none;
  }
}