.flipbook-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 18, 15, 0.92);
}

.flipbook-overlay.is-open {
  display: flex;
}

.flipbook-shell {
  position: relative;
  /* a definite width plus a separate max-height does not reliably
     co-resolve with aspect-ratio, so the vertical budget (minus the
     footer bar + gap) is folded into the width formula via the page
     ratio, leaving width as the single definite dimension.
     --ratio-w/--shell-max-width switch to the two-page spread values
     (see .is-landscape below) once StPageFlip itself decides there's
     room for a double-page spread, so this formula and the stage's
     aspect-ratio always describe whatever StPageFlip is actually
     rendering instead of assuming single-page. --shell-vh/--footer-
     reserve are pulled out separately (rather than baked in as 92vh/
     60px) because a phone rotated to landscape needs a much tighter
     budget to still clear the two-page threshold - see the compact
     landscape media query near the bottom of this file. */
  --ratio-w: 500;
  --ratio-h: 707;
  --shell-max-width: 900px;
  --shell-vh: 92vh;
  --footer-reserve: 60px;
  width: min(94vw, var(--shell-max-width), (var(--shell-vh) - var(--footer-reserve)) * var(--ratio-w) / var(--ratio-h));
  display: flex;
  flex-direction: column;
}

/* Set on .flipbook-overlay (see flipbook.js) once StPageFlip reports
   'landscape' orientation, i.e. the viewport is wide enough to show two
   pages side by side like an open book. */
.flipbook-overlay.is-landscape .flipbook-shell {
  --ratio-w: 1000;
  --shell-max-width: 1050px;
}

.flipbook-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-w) / var(--ratio-h);
}

.flipbook-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

/* Nudges touch-screen visitors on the single-page view to rotate their
   phone for the two-page spread - shown/hidden via .is-visible from
   maybeShowRotateHint()/hideRotateHint() in flipbook.js (auto-hides
   after ROTATE_HINT_DURATION, or sooner on tap/flip/rotate). Sits above
   the book (see z-index) but stays out of the way of the actual page
   content and footer controls. */
.flipbook-rotate-hint {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%) translateY(-6px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(94%, 340px);
  background: rgba(20, 18, 15, 0.88);
  color: #fff;
  padding: 12px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flipbook-rotate-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.flipbook-rotate-hint__icon {
  flex-shrink: 0;
  animation: flipbook-rotate-hint-wiggle 1.8s ease-in-out infinite;
}

.flipbook-rotate-hint span {
  font-size: 13px;
  line-height: 1.35;
}

@keyframes flipbook-rotate-hint-wiggle {
  0%,
  10% {
    transform: rotate(0deg);
  }
  45%,
  55% {
    transform: rotate(-90deg);
  }
  90%,
  100% {
    transform: rotate(0deg);
  }
}

.flipbook-zoomwrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  touch-action: none;
  /* Gives .flipbook-backcover's rotateY below actual 3D depth instead of
     just squashing it flat - without this on an ancestor, a rotateY
     transform has no vanishing point and looks like a horizontal scale.
     Harmless for its other children (.flipbook-book, the zoom images),
     none of which use a 3D transform themselves. */
  perspective: 1600px;
}

.flipbook-overlay.is-zoomed .flipbook-zoomwrap {
  cursor: grab;
}

.flipbook-zoom-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.flipbook-overlay.is-zoomed .flipbook-zoom-img {
  display: block;
}

/* StPageFlip clears its <canvas> to white every frame and, on the
   opening spread (showCover: true), only ever draws the cover onto the
   right half - the left half just stays that plain white fill (confirmed
   against the vendored bundle's clear()). This sits on top of that blank
   half showing the magazine's last page instead, so the book opens with
   its back cover visible behind the front cover like a real one. Only
   relevant in two-page mode (.is-landscape) - in single-page mode the
   cover already fills the whole view, there's no blank half to cover.
   Hidden while zoomed since setZoomImagesForCurrentSpread() (flipbook.js)
   already leaves the left zoom image blank for this same cover spread.

   It's a static <img>, not a real StPageFlip page, so it can't join the
   canvas's own curl animation - swapping it via display/opacity alone
   made it look like a photo just popping in and out instead of an actual
   page. Hinging it around its own right edge (the book's spine) and
   rotating it away in 3D, timed to roughly match StPageFlip's default
   1000ms flippingTime, reads as it swinging shut with the rest of the
   book instead. */
.flipbook-backcover {
  position: absolute;
  inset: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 100% 50%;
  transform: rotateY(-115deg);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transition: transform 0.9s ease, opacity 0.5s ease;
}

.flipbook-overlay.is-landscape.is-cover:not(.is-zoomed) .flipbook-backcover {
  transform: rotateY(0deg);
  opacity: 1;
  pointer-events: auto;
}

/* Mirror of .flipbook-backcover above, for the closing spread: when the
   book's last page ends up alone (hasTrailingSoloPage() in flipbook.js),
   StPageFlip shows it alone on the left with the right half blank - this
   fills that blank half with the front cover instead, hinged at its own
   left edge (the spine) so it swings in from the opposite side. */
.flipbook-frontcover {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 0% 50%;
  transform: rotateY(115deg);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transition: transform 0.9s ease, opacity 0.5s ease;
}

.flipbook-overlay.is-landscape.is-last-page:not(.is-zoomed) .flipbook-frontcover {
  transform: rotateY(0deg);
  opacity: 1;
  pointer-events: auto;
}

.flipbook-overlay.is-zoomed .flipbook-book {
  /* display:none (not visibility:hidden) deliberately - removing the
     canvas from layout and letting it back in forces a real reflow when
     zooming back out, the same kind of reflow that closing/reopening the
     whole overlay gets "for free" and that seems to be what actually
     wakes a correctly-sharp repaint on iOS Safari. !important because
     StPageFlip itself sets an inline `display: block` on this element
     (confirmed at runtime), which would otherwise win over a plain class
     rule regardless of source order. */
  display: none !important;
}

.flipbook-book {
  width: 100%;
  height: 100%;
  user-select: none;
  /* StPageFlip sets an inline min-width/min-height based on its own
     "minWidth"/"minHeight" settings - those are only used here to force
     single-page mode (see flipbook.js) and would overflow narrow/short
     viewports if left in place. The stage's own responsive sizing above
     is the single source of truth for actual display size. */
  min-width: 0 !important;
  min-height: 0 !important;
}

.flipbook-book img {
  -webkit-user-drag: none;
}

.flipbook-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #14120f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1200;
}

.flipbook-close:hover {
  background: #fff;
}

.flipbook-footer {
  margin-top: 10px;
  height: 48px;
  flex-shrink: 0;
  background: #f9f9f1;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.flipbook-icon-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.flipbook-thumbs-toggle,
.flipbook-mute-toggle {
  border: none;
  background: none;
  color: #ae8649;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.flipbook-mute-toggle {
  font-size: 16px;
}

.flipbook-thumbs-toggle:hover,
.flipbook-mute-toggle:hover {
  background: rgba(174, 134, 73, 0.15);
}

.flipbook-pagenav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flipbook-prev,
.flipbook-next {
  border: none;
  background: none;
  color: #ae8649;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.flipbook-prev:hover,
.flipbook-next:hover {
  background: rgba(116, 134, 84, 0.15);
  color: #748654;
}

.flipbook-pageindicator {
  min-width: 64px;
  text-align: center;
  font-size: 14px;
  color: #4a4436;
  font-variant-numeric: tabular-nums;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 2px;
}

.flipbook-pageindicator:hover,
.flipbook-pageindicator:focus-visible {
  background: rgba(174, 134, 73, 0.15);
}

.flipbook-pagejump-form {
  display: flex;
}

.flipbook-pagejump-input {
  width: 64px;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
  color: #4a4436;
  background: #fff;
  border: 1px solid rgba(174, 134, 73, 0.5);
  border-radius: 6px;
  padding: 4px 2px;
  /* hides the native up/down spinner (Chrome/Safari) - a plain centred
     number matches the static indicator it replaces much better */
  appearance: textfield;
}

.flipbook-pagejump-input::-webkit-outer-spin-button,
.flipbook-pagejump-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.flipbook-thumbnails {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  height: 130px;
  background: #f9f9f1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  padding: 10px 6px;
  gap: 4px;
}

.flipbook-thumbnails.is-open {
  display: flex;
}

.flipbook-thumbs-scroll {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #ae8649;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 100%;
}

.flipbook-thumbs-scroll:hover {
  color: #748654;
}

.flipbook-thumbs-track {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  height: 100%;
  padding: 0 4px;
  scrollbar-width: none;
}

.flipbook-thumbs-track::-webkit-scrollbar {
  display: none;
}

.flipbook-thumb {
  flex-shrink: 0;
  width: 62px;
  border: 2px solid transparent;
  background: #fff;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.flipbook-thumb img {
  width: 100%;
  aspect-ratio: 500 / 707;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.flipbook-thumb span {
  font-size: 11px;
  color: #ae8649;
}

.flipbook-thumb.is-current {
  border-color: #ae8649;
}

.flipbook-thumb.is-current span {
  color: #748654;
  font-weight: 600;
}

body.flipbook-lock-scroll {
  overflow: hidden;
}

/* A phone rotated to landscape is short as well as wide, and the book's
   two-page spread (1000:707, wider than tall) eats height fast - the
   default 92vh/60px footer budget above never leaves enough for a phone
   to clear the two-page threshold, only tablets/desktops. Here the chrome
   around the book (outer padding, footer bar) is shrunk to reclaim as
   much of that limited height as possible. This breakpoint MUST match
   COMPACT_LANDSCAPE_QUERY in flipbook.js, which mirrors this formula to
   decide single- vs two-page mode before StPageFlip itself measures
   anything (see guessOrientation() there for why). */
@media (orientation: landscape) and (max-height: 560px) {
  .flipbook-overlay {
    padding: 6px;
  }

  .flipbook-shell {
    --shell-vh: 99vh;
    --footer-reserve: 34px;
  }

  .flipbook-footer {
    margin-top: 4px;
    height: 30px;
    border-radius: 15px;
    padding: 0 4px 0 10px;
  }

  .flipbook-thumbs-toggle,
  .flipbook-mute-toggle,
  .flipbook-prev,
  .flipbook-next {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .flipbook-mute-toggle {
    font-size: 13px;
  }

  .flipbook-pageindicator {
    min-width: 46px;
    font-size: 12px;
  }

  .flipbook-pagejump-input {
    width: 46px;
    font-size: 12px;
    padding: 2px;
  }

  .flipbook-thumbnails {
    bottom: 38px;
    height: 100px;
  }
}