/* The books: the cover grids (home page and series pages), the series page and the book page.
   Colours come from the tokens of the home page; each series has its own glow in --c
   (lime for 3–6, amber for 7–12, silver for 13+), the same as its orb on the home page. */

.series-3-6 {
  --c: 217 237 103;
}

.series-7-12 {
  --c: 246 178 92;
}

.series-13 {
  --c: 232 236 246;
}

/* -- a grid of covers ------------------------------------------------------------------------- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.book-card-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: rgb(var(--c) / 10%);
  border: 1px solid rgb(var(--c) / 28%);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 45%);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.book-card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-card-num {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 30px;
  padding: 3px 8px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  background: rgb(var(--c));
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}

/* the titles under the covers are in the text font, like the words above the covers (2026-10-22) */
.book-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgb(0 0 0 / 70%);
}

.book-card:hover .book-card-cover,
.book-card:focus-visible .book-card-cover,
.book-grid li:has(.quick-view-btn:hover) .book-card-cover {
  border-color: rgb(var(--c) / 70%);
  box-shadow: 0 0 26px rgb(var(--c) / 35%), 0 14px 32px rgb(0 0 0 / 50%);
  transform: translateY(-4px);
}

.book-card:hover .book-card-title,
.book-card:focus-visible .book-card-title {
  color: rgb(var(--c));
}

.book-card:focus-visible {
  outline: none;
}

.book-card:focus-visible .book-card-cover {
  outline: 3px solid rgb(var(--c));
  outline-offset: 3px;
}

/* -- the series on the home page ---------------------------------------------------------------- */
/* Each series is a part of the home page about one screen high, so the forest behind has time to move
   to its own place while the visitor scrolls through it */
.series-strips {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.series-strip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: clamp(32px, 6vh, 72px);
  scroll-margin-top: 0;
}

/* On the home page the heading of a series is smaller than on a page of its own,
   so that the heading and both rows of covers fit on a laptop screen */
.series-strip .series-hero {
  margin-bottom: clamp(18px, 3.5vh, 36px);
}

.series-strip .series-orb {
  width: clamp(72px, 10vh, 104px);
  margin-bottom: 10px;
}

.series-strip .series-hero h2 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4.2vw, 48px);
}

.series-strip .series-hero p {
  font-size: 16px;
}

.series-strip .draft-note {
  margin-top: 6px;
  font-size: 13px;
}

@media (min-width: 761px) {
  .series-strip .book-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
  }

  /* covers about a quarter of the screen high, so the heading and both rows fit */
  .series-strip .book-grid {
    width: min(100%, calc((28vh - 30px) * 0.75 * 6 + 5 * 24px));
    margin-inline: auto;
  }
}

/* -- buttons ------------------------------------------------------------------------------------ */
.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  color: rgb(var(--c));
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  background: rgb(10 29 25 / 45%);
  border: 1px solid rgb(var(--c) / 55%);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pill-link:hover,
.pill-link:focus-visible {
  color: var(--green-dark);
  background: rgb(var(--c));
  border-color: rgb(var(--c));
}

.solid-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  background: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 999px;
  box-shadow: 0 0 20px rgb(217 237 103 / 30%), 0 4px 14px rgb(0 0 0 / 25%);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.solid-link:hover,
.solid-link:focus-visible {
  background: #eef888;
  box-shadow: 0 0 32px rgb(217 237 103 / 60%), 0 6px 18px rgb(0 0 0 / 30%);
}

/* -- the series page ---------------------------------------------------------------------------- */
.page-wrap {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

main.books-main {
  justify-content: flex-start;
}

.series-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 6vh, 56px);
  text-align: center;
}

/* The orb is alive like the age groups' orbs at the top of the home page: it floats, glows and its icon shines;
   the lantern's flame flickers. The orb stays in place and takes the hover; its light lifts, so the pointer
   never slips off the lifted orb and makes it flicker. The keyframes orb-float and flame-flicker are in the
   home page's own styles, the only page with series orbs. */
.series-orb {
  display: grid;
  width: 120px;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: 18px;
  -webkit-tap-highlight-color: transparent;
}

.series-orb-light {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  color: rgb(var(--c));
  /* the glow is drawn with gradients, not box-shadow, as on the age orbs */
  background:
    radial-gradient(circle, transparent 50%, rgb(var(--c) / 16%) 70%, transparent 71%),
    radial-gradient(circle at 50% 45%, rgb(var(--c) / 32%), rgb(var(--c) / 6%) 62%, transparent 72%);
  border: 1px solid rgb(var(--c) / 45%);
  border-radius: 50%;
  animation: orb-float var(--float, 5.5s) ease-in-out var(--float-delay, 0s) infinite;
  transition: transform 300ms ease;
}

/* each series floats in its own time */
.series-3-6 .series-orb-light { --float-delay: 0.4s; }
.series-7-12 .series-orb-light { --float-delay: 1.6s; }
.series-13 .series-orb-light { --float-delay: 2.8s; }

.series-orb-light::before,
.series-orb-light::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* outer glow: a ring from the orb's edge outwards */
.series-orb-light::before {
  inset: -38%;
  background: radial-gradient(closest-side, transparent 55%, rgb(var(--c) / 26%) 58%, rgb(var(--c) / 9%) 76%, transparent);
}

/* the inner ring that lights up on hover */
.series-orb-light::after {
  inset: 0;
  background: radial-gradient(circle, transparent 42%, rgb(var(--c) / 30%) 70%, transparent 71%);
  opacity: 0;
}

.series-orb svg {
  width: 56%;
  height: 56%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgb(var(--c) / 80%));
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.series-orb svg .fill {
  fill: currentColor;
  stroke: none;
}

.series-orb svg .flame {
  transform-origin: 32px 40px;
  animation: flame-flicker 1.4s ease-in-out infinite alternate;
}

.series-orb.is-touched .series-orb-light {
  transform: translateY(-14px) scale(1.06);
}

.series-orb.is-touched .series-orb-light::before {
  background: radial-gradient(closest-side, transparent 55%, rgb(var(--c) / 45%) 58%, rgb(var(--c) / 16%) 80%, transparent);
}

.series-orb.is-touched .series-orb-light::after {
  opacity: 1;
}

.series-orb.is-touched svg {
  transform: rotate(-8deg) scale(1.12);
}

/* Only real pointers hover: on touch screens iOS keeps :hover after a tap and the orb stays lit */
@media (hover: hover) and (pointer: fine) {
  .series-orb:hover .series-orb-light {
    transform: translateY(-14px) scale(1.06);
  }

  .series-orb:hover .series-orb-light::before {
    background: radial-gradient(closest-side, transparent 55%, rgb(var(--c) / 45%) 58%, rgb(var(--c) / 16%) 80%, transparent);
  }

  .series-orb:hover .series-orb-light::after {
    opacity: 1;
  }

  .series-orb:hover svg {
    transform: rotate(-8deg) scale(1.12);
  }
}

.kicker-line {
  margin: 0 0 10px;
  color: var(--lime);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.series-hero h1,
.series-hero h2,
.book-info h1 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgb(0 0 0 / 45%);
}

.series-hero h1,
.series-hero h2 {
  color: rgb(var(--c));
}

.series-hero p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgb(0 0 0 / 60%);
}

.draft-note {
  margin: 14px 0 0;
  color: rgb(255 253 246 / 72%);
  font-size: 13px;
  font-style: italic;
}

/* -- the book page ------------------------------------------------------------------------------ */
.book-layout {
  display: grid;
  grid-template-columns: minmax(220px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1040px;
  margin: 0 auto;
}

.book-cover {
  position: relative;
  margin: 0;
}

.book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(var(--c) / 35%);
  border-radius: 12px;
  box-shadow: 0 0 46px rgb(var(--c) / 22%), 0 18px 44px rgb(0 0 0 / 55%);
}

.book-cover figcaption {
  margin-top: 10px;
  color: rgb(255 253 246 / 70%);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

.book-info {
  padding: clamp(22px, 3vw, 34px);
  background: rgb(10 29 25 / 58%);
  border: 1px solid rgb(var(--c) / 22%);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 35%);
  backdrop-filter: blur(6px);
}

.book-series-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -10px 0 4px;
  color: rgb(var(--c));
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}

.book-series-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.working-title {
  display: inline-block;
  margin: -4px 0 14px;
  padding: 3px 10px;
  color: rgb(var(--c));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px dashed rgb(var(--c) / 60%);
  border-radius: 999px;
}

.book-lead {
  margin: 0 0 14px;
  color: rgb(var(--c));
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

.book-text p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.book-facts {
  display: grid;
  gap: 6px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgb(255 253 246 / 14%);
  font-size: 14px;
}

.book-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.book-facts dt {
  color: rgb(255 253 246 / 68%);
}

.book-facts dd {
  margin: 0;
  color: var(--ink);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  color: var(--green-dark);
  font-weight: 800;
  background: var(--lime);
  border-radius: 999px;
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.book-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: 1040px;
  margin: clamp(32px, 6vh, 56px) auto 0;
}

@media (max-width: 760px) {
  .series-strips,
  .page-wrap {
    width: calc(100% - 32px);
  }

  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .book-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cover {
    width: min(100%, 340px);
    margin: 0 auto;
  }
}

/* Phones: on the home page each series is one row of covers to swipe through */
@media (max-width: 760px) {
  .series-strip .book-grid {
    display: flex;
    gap: 14px;
    margin-inline: -16px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
  }

  .series-strip .book-grid li {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }

  .series-strip {
    padding-block: 40px;
  }

  .series-hero {
    margin-bottom: 22px;
  }

  .series-orb {
    width: 88px;
    margin-bottom: 12px;
  }

  /* a gentler float on phones, as the age orbs */
  .series-orb-light {
    --bob: -6px;
  }

  .footer-links {
    justify-content: center;
    gap: 0 6px;
  }

  .footer-sep {
    display: none;
  }
}

@media (max-width: 480px) {
  .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .book-card-title {
    font-size: 14px;
  }
}

/* -- quick view (scripts/quick-view.js) ---------------------------------------------------------- */
/* A button over each cover opens the book in a dialog over the series (2026-10-22). On a computer the
   button shows on the cover when the pointer or the keyboard comes to the book; on a touch screen there is
   no hover, so a small eye button always sits in the cover's corner. A click on the cover still opens the
   book's page: the quick view only adds to it. */
.book-grid li {
  position: relative;
}

/* a box the size of the cover, over it: the button sits at its bottom */
.quick-view-zone {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 10px;
  pointer-events: none;
  transition: transform 220ms ease;
}

.book-grid li:has(.book-card:hover) .quick-view-zone,
.book-grid li:has(.quick-view-btn:hover) .quick-view-zone {
  transform: translateY(-4px);
}

.quick-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  color: var(--green-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  background: rgb(var(--c));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 50%);
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.quick-view-btn[hidden] {
  display: none;
}

.quick-view-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.quick-view-btn[aria-busy="true"] {
  cursor: progress;
}

.book-grid li:focus-within .quick-view-btn {
  opacity: 1;
  transform: none;
}

.quick-view-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .book-grid li:hover .quick-view-btn {
    opacity: 1;
    transform: none;
  }

  .quick-view-btn:hover {
    box-shadow: 0 0 22px rgb(var(--c) / 60%), 0 6px 18px rgb(0 0 0 / 50%);
  }
}

/* touch screens: a round eye button in the corner, always in view; its words are still read aloud */
@media (hover: none), (pointer: coarse) {
  .quick-view-zone {
    justify-content: flex-end;
    padding: 6px;
  }

  .quick-view-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    color: rgb(var(--c));
    background: rgb(10 29 25 / 78%);
    border: 1px solid rgb(var(--c) / 65%);
    opacity: 1;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }

  .quick-view-btn svg {
    width: 20px;
    height: 20px;
  }

  .quick-view-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* the page behind the open dialog does not scroll */
html.quick-view-open {
  overflow: hidden;
}

.quick-view {
  width: min(900px, 100% - 48px);
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: rgb(10 29 25 / 95%);
  border: 1px solid rgb(var(--c) / 40%);
  border-radius: 24px;
  box-shadow: 0 0 60px rgb(var(--c) / 16%), 0 30px 80px rgb(0 0 0 / 60%);
}

.quick-view::backdrop {
  background: rgb(5 15 12 / 72%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.quick-view[open] {
  animation: quick-view-in 220ms ease-out;
}

@keyframes quick-view-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.qv-panel {
  position: relative;
  display: grid;
  grid-template-areas:
    "cover head"
    "cover text"
    "cover footer";
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 32px;
  max-height: min(88vh, 700px);
  padding: 32px;
}

/* a sideways drag changes the book (scripts/quick-view.js); up and down still scroll the text */
.qv-panel {
  touch-action: pan-y;
}

.qv-cover {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.qv-panel.is-dragging,
.qv-panel.is-dragging .qv-cover {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.qv-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.qv-close {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ink);
  background: rgb(255 253 246 / 8%);
  border: 1px solid rgb(255 253 246 / 22%);
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.qv-close:hover {
  background: rgb(255 253 246 / 16%);
  border-color: rgb(255 253 246 / 45%);
}

.qv-cover {
  grid-area: cover;
  align-self: start;
  margin: 0;
}

.qv-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: rgb(var(--c) / 10%);
  border: 1px solid rgb(var(--c) / 35%);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 55%);
}

.qv-cover figcaption {
  margin-top: 8px;
  color: rgb(255 253 246 / 65%);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

.qv-head {
  grid-area: head;
  padding-right: 52px;
}

.qv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
  color: rgb(var(--c));
  font-size: 13px;
  font-weight: 800;
}

.qv-badge {
  padding: 3px 10px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgb(255 253 246 / 10%);
  border: 1px solid rgb(255 253 246 / 22%);
  border-radius: 999px;
}

.qv-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  outline: none;
}

.qv-working {
  margin: 6px 0 0;
  color: rgb(255 253 246 / 70%);
  font-size: 13px;
  font-style: italic;
}

.qv-working[hidden] {
  display: none;
}

/* a long back-cover text scrolls inside, so the way to the book's page stays in view */
.qv-text {
  grid-area: text;
  min-height: 0;
  margin-top: 18px;
  padding-right: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.qv-text:focus-visible {
  outline: 2px solid rgb(var(--c));
  outline-offset: 4px;
  border-radius: 6px;
}

.qv-lead {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 700;
}

.qv-body p {
  margin: 0 0 10px;
}

.qv-source {
  margin: 14px 0 0;
  color: rgb(255 253 246 / 78%);
  font-size: 14px;
}

.qv-source-label {
  color: rgb(var(--c));
  font-weight: 800;
}

.qv-footer {
  grid-area: footer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 253 246 / 12%);
}

.qv-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qv-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: rgb(var(--c));
  background: transparent;
  border: 1px solid rgb(var(--c) / 50%);
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.qv-arrow:hover:not(:disabled) {
  color: var(--green-dark);
  background: rgb(var(--c));
}

.qv-arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

.qv-count {
  min-width: 64px;
  color: rgb(255 253 246 / 78%);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.qv-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  background: rgb(var(--c));
  border-radius: 999px;
  box-shadow: 0 0 20px rgb(var(--c) / 30%);
  transition: box-shadow 200ms ease;
}

.qv-open:hover {
  box-shadow: 0 0 32px rgb(var(--c) / 55%);
}

.qv-open-arrow {
  transition: transform 200ms ease;
}

.qv-open:hover .qv-open-arrow {
  transform: translateX(3px);
}

/* phones: a sheet from the bottom of the screen; the cover is small beside the title, and the arrows
   and the way to the book's page stay at the bottom, in view without scrolling */
@media (max-width: 640px) {
  .quick-view {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }

  .quick-view[open] {
    animation-name: quick-view-up;
  }

  .qv-panel {
    grid-template-areas:
      "cover head"
      "text text"
      "footer footer";
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    max-height: 88svh;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  }

  .qv-cover figcaption {
    display: none;
  }

  .qv-head {
    align-self: center;
    padding-right: 44px;
  }

  .qv-close {
    top: 10px;
    right: 10px;
  }

  .qv-title {
    font-size: 22px;
  }

  .qv-text {
    margin-top: 16px;
  }

  .qv-footer {
    flex-wrap: nowrap;
    margin-top: 12px;
    padding-top: 12px;
  }

  .qv-count {
    min-width: 0;
  }

  .qv-open {
    flex: 1;
    gap: 6px;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@keyframes quick-view-up {
  from {
    transform: translateY(40px);
  }
}

/* narrow phones: the counter gives its room to the way to the book's page (the arrows stay) */
@media (max-width: 420px) {
  .qv-count {
    display: none;
  }

  .qv-open {
    font-size: 13px;
  }
}

/* the smallest phones: the way to the book's page on its own row, the arrows and the counter under it */
@media (max-width: 360px) {
  .qv-footer {
    flex-wrap: wrap;
  }

  .qv-open {
    flex: 1 1 100%;
    order: -1;
  }

  .qv-nav {
    justify-content: space-between;
    width: 100%;
  }

  .qv-count {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-card-cover,
  .pill-link,
  .solid-link {
    transition: none;
  }

  .book-card:hover .book-card-cover,
  .book-card:focus-visible .book-card-cover {
    transform: none;
  }

  /* the series orbs stand still and the flame does not flicker; the hover still lights them */
  .series-orb-light,
  .series-orb svg .flame {
    animation: none;
  }

  /* the quick view appears without sliding */
  .quick-view[open] {
    animation: none;
  }

  .quick-view-zone,
  .quick-view-btn {
    transition: none;
  }
}