/* Every layout is one viewport. Only scenery is extended; the central group
   keeps its aspect ratio. All tiles meet at exact coordinates in one asset. */
:root { color-scheme: light; background: #4098f4; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
.tribute { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.book-display {
  position: absolute;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
}

.book {
  display: block;
  width: min(260px, 68vw, 22.4vh);
  width: min(260px, 68vw, 22.4dvh);
  container-type: inline-size;
  aspect-ratio: 2820 / 3649;
  padding: 0;
  border: 0;
  border-radius: 3px 7px 7px 3px;
  background: transparent;
  color: #082c48;
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}

.book:focus-visible { outline: 3px solid #fff; outline-offset: 7px; }
.book-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.book[aria-pressed="true"] .book-inner { transform: rotateY(180deg); }
.book-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 3px 7px 7px 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 38px #06233c38, 0 3px 8px #06233c33;
}
.book-front { transform: rotateY(0deg); }
.book-front img { display: block; width: 100%; height: 100%; object-fit: contain; }
.book-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 5px 0 7px #092b4820, inset -2px 0 2px #ffffff66;
}
.book-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 7%;
  transform: rotateY(180deg);
  background: linear-gradient(100deg, #f2e4c3, #fcf6e7 12%, #f7ecd2 92%, #e8d8b3);
  border: 1px solid #d9c69b;
  text-align: left;
}
.book-copy {
  display: block;
  font: 5.3cqw/1.45 Georgia, 'Times New Roman', serif;
}
.book-back-cue {
  display: block;
  padding-top: 5%;
  border-top: 1px solid #ab231d40;
  font: 3.5cqw/1.4 system-ui, sans-serif;
  color: #8f2b26;
  text-align: center;
}


@media (prefers-reduced-motion: reduce) {
  .book-inner { transition: none; }
}



/* The reverse grows for comfortable reading, still inside the viewport. */
.book[aria-pressed="true"] { width: min(320px, 86vw, 58vh); width: min(320px, 86vw, 58dvh); }
.site-actions {
  position: relative;
  z-index: 4;
  width: calc(100% - 24px);
  margin-top: 1rem;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 32px);
  max-width: 960px;
  margin-inline: auto;
}
.site-action {
  transform: scale(.7);
  transform-origin: top center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid #f8ecd0;
  border-radius: 8px;
  background: #082c48;
  color: #f8ecd0;
  box-shadow: 0 4px 16px #06233c40;
  font: 600 clamp(12px, 1.3vw, 17px)/1.35 system-ui, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  touch-action: manipulation;
}
.site-action:nth-child(2) { background: #ac1e19; color: #f8ecd0; }
.site-action:nth-child(3) { background: #f8ecd0; color: #082c48; border-color: #082c48; }
.site-action:enabled, a.site-action { cursor: pointer; }
.site-action:enabled:hover, a.site-action:hover { filter: brightness(1.12); }
.site-action:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 600px) {
  .site-action { min-height: 68px; padding: 10px 6px; }
}
@media (max-height: 350px) {
  .book-display { top: 5px; gap: 3px; }
}