/* 7. The gallery. One frame per screen, no header, no padding: the pages
   carry their own white margins. A band at the bottom stays clear of the
   frame for the count and "click anywhere". */
.page-gallery { overflow: hidden; }

.gallery {
  --band: clamp(56px, 38.47px + 4.494vw, 96px);
  --inset: clamp(18px, 8.09vw - 13.55px, 90px);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

/* The whole screen is the link to the next screen. */
.screen {
  position: absolute;
  inset: 0;
  display: block;
  cursor: e-resize;
  text-decoration: none;
}
/* Right half forward, left half back: the pointer says which (gallery.js). */
.gallery.is-back .screen { cursor: w-resize; }
/* On the close, the lettering goes home (gallery.js). */
.gallery.is-home .screen { cursor: pointer; }
.screen:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.screen picture {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: var(--band);
  display: block;
}
.screen picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 120ms ease;
}
.gallery.is-leaving .screen picture img,
.gallery.is-leaving .card { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .screen picture img, .card { transition: none; }
}

/* On a phone (any portrait screen) the frame is a card of real text at one
   size, all the way through (Matt, 19 Sept), with the drawing above or below
   as the PDF has it. The landscape page is kept for everything else. */
.card { display: none; }
@media (orientation: portrait) {
  .screen picture { display: none; }
  .card {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: var(--band);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75em;
    padding: 0 var(--inset);
    /* Scales with the screen at every phone width, so a line always holds 39
       characters; lines are pre-split at build time to fit (no widows). */
    font-size: min(3.85vw, 18px);
    white-space: nowrap;
    line-height: 1.75;
    color: var(--ink);
    transition: opacity 120ms ease;
  }
  .card-words p { margin: 0; }
  .card-words p + p { margin-top: 1.75em; }
  .card-words strong { font-weight: 700; }
  .card .grey { color: var(--grey); }
  .card .become { border-bottom: 2px solid var(--ink); padding-bottom: 0.15em; }
  .card-art { display: block; height: auto; max-width: 100%; max-height: 42vh; object-fit: contain; object-position: left center; }
}

/* Count bottom left, "click anywhere" bottom right. Neither is a control in
   its own right, so a click on them still lands on the screen. */
.count, .hint {
  position: absolute;
  bottom: clamp(18px, 2.22px + 4.045vw, 54px);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
  pointer-events: none;
  z-index: 1;
}
.count { left: var(--inset); }
.hint { right: var(--inset); text-align: right; }