/* O4 artwork and looping motion copied from Templates/animations.html. */
.visitors-book {
  --cream: #F0EBDE;
  --barley: #A58A59;
  --book-ink: #1B211D;
  width: min(100%, 340px);
  margin: 40px auto 0;
  padding: 0 24px 32px;
  box-sizing: border-box;
  text-align: center;
}
.book-sketch { width: min(100%, 296px); margin: 0 auto; cursor: pointer; }
.book-sketch svg { display: block; width: 100%; height: auto; overflow: hidden; }
.book-sketch:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.visitors-book .visitors-book-copy { text-transform: none; letter-spacing: normal; color: inherit; margin: 20px 0 0; font: 400 14px/1.6 var(--font-sans); }
      .book-line { stroke: var(--book-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
      .book-paper { fill: var(--cream); }
      .book-accent { stroke: var(--barley); }
      .book-cover, .book-leaf, .book-reveal { animation: 13.4s ease-in-out infinite; }
      .book-cover { transform-origin: 0 0; animation-name: book-cover-turn; }
      .book-cover-stock { fill: var(--barley); stroke-width: .9; }
      .book-cover-title {
        fill: var(--book-ink); stroke: none;
        font-family: var(--font-serif);
        font-size: 19.5px; font-weight: 400; letter-spacing: 1px;
        text-anchor: middle;
        animation: book-title-facing 13.4s ease-in-out infinite;
      }
      @keyframes book-title-facing {
        0%, 5.820896%, 87.014925%, 100% { opacity: 1; }
        11.791045%, 81.044776% { opacity: 0; }
      }
      .book-reveal { animation-name: book-reveal; }
      .book-leaf { transform-origin: 0 0; animation-name: book-page-one; }
      .book-leaf-two { animation-name: book-page-two; }
      .book-editorial { fill: none; stroke-width: .85; }
      .book-editorial rect { stroke: var(--barley); }
      .book-editorial path { stroke: var(--book-ink); }
      /* Begin on reveal; freeze while offscreen or explicitly paused. */
      .book-sketch:not(.is-in-view) *,
      .book-sketch[aria-pressed="true"] * { animation-play-state: paused; }
      /* Keep the page-turn speeds; the closed cover rests for one second. */
      @keyframes book-cover-turn {
        0%, 92.537313%, 100% { transform: scaleX(1) skewY(0deg); }
        24.179104%, 69.701493% { transform: scaleX(-.96) skewY(5deg); }
      }
      @keyframes book-reveal {
        0%, 10.746269%, 87.164179%, 100% { opacity: 0; }
        18.80597%, 79.104478% { opacity: 1; }
      }
      @keyframes book-page-one {
        0%, 27.313433%, 88.507463%, 100% { transform: scaleX(1) skewY(0deg); }
        40.447761%, 72.38806% { transform: scaleX(-.92) skewY(4deg); }
      }
      @keyframes book-page-two {
        0%, 45.223881%, 85.820896%, 100% { transform: scaleX(1) skewY(0deg); }
        59.552239%, 72.38806% { transform: scaleX(-.90) skewY(3deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .book-cover, .book-cover-title, .book-leaf, .book-reveal { animation: none; }
        .book-reveal { opacity: 0; }
      }

/* Let the book follow the complete cup content in normal reading order. */
@media (max-width: 899px) {
  .hunt-cup-pair .hunt-cup { position: relative; top: auto; }
}
/* Tablet: preserve the existing pair and give the book a full row. */
@media (min-width: 900px) and (max-width: 1399px) {
  .hunt-cup-pair { position: relative; top: auto; row-gap: 40px; }
  .hunt-cup-pair .visitors-book { grid-column: 1 / -1; justify-self: start; margin: 0; padding: 0; }
}
@media (min-width: 600px) and (max-width: 1399px) {
  .visitors-book { text-align: left; }
  .visitors-book .book-sketch { margin-left: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visitors-book { margin-left: var(--gutter-mobile, 24px); padding-left: 0; padding-right: 0; }
}
/* A third element only when the composition has a comfortable measure. */
@media (min-width: 1400px) {
  .hunt-cup-pair {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 72px);
  }
  .hunt-cup-pair .hunt-cup { width: min(100%, 331px); justify-self: center; }
  .hunt-cup-pair .visitors-book {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    margin: 0 auto;
    padding: 0;
    width: 370px;
    max-width: calc(100% + 24px);
  }
}

@media (min-width: 1400px) {
  .visitors-book .book-sketch { width: 100%; }
  .visitors-book .visitors-book-copy { max-width: 300px; margin-inline: auto; }
}