/* Load last. Keep the delivered-frame and reading-card centers consistent when
   a desktop scrollbar appears; the reserved gutter uses the woodland color. */
html {
  scrollbar-gutter: stable;
  scrollbar-color: #89624d #302326;
}

/* The landing artwork was authored with a 380px pair in a 1280x720 frame.
   Match that cover ratio, cap unusually tall windows, and keep small screens
   free of horizontal overflow. Visible toes end at source row448 in the
   bitmap's intrinsic1024px width. */
.letter-paws {
  --paw-paper-top: 156px;
  --paw-continuity-minimum: calc((var(--paw-paper-top) + 6px) / .4375);
  --paw-continuity-width: min(620px, calc(100vw - 24px), max(var(--paw-continuity-minimum), 29.6875vw, 52.7777778vh));
  width: var(--paw-continuity-width);
  top: calc(6px - var(--paw-continuity-width) * .4375);
}

/* The cropped upper leg edge must reach the viewport instead of floating over
   the forest in a short window. Match the existing card-top breakpoints. */
@media (min-width: 1600px) {
  .letter-paws { --paw-paper-top: 185px; }
}

@media (min-width: 601px) and (max-width: 800px) {
  .letter-paws { --paw-paper-top: 145px; }
}

/* Portrait landing artwork: 310px pair in a 450x800 frame. Preserve the same
   six-pixel grip on the paper regardless of the resulting paw size. */
@media (max-width: 600px) {
  .letter-paws {
    --paw-paper-top: 124px;
    --paw-continuity-width: min(calc(100vw - 24px), max(var(--paw-continuity-minimum), 68.8888889vw, 38.75vh));
  }
}