/* Brochure page: the flipbook. Loaded only by brochure.html, after site.css and clean.css. */

.bro-head { padding-block: clamp(32px, 4vw, 56px) clamp(20px, 2.5vw, 32px); }
.bro-head h1 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); line-height: 0.95; letter-spacing: 0.005em;
}
.bro-head p { margin-top: 14px; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem); line-height: 1.5; max-width: 40em; color: var(--ink-soft); }

.book { padding-bottom: clamp(48px, 6vw, 88px); }
.book__frame { background: var(--lifted); border-radius: 14px; padding: clamp(14px, 2.5vw, 32px); }

/* Without JavaScript: the pages, one under the other. */
.book__stage { display: grid; gap: 20px; justify-items: center; }
.book__page { width: 100%; max-width: 520px; }
.book__page img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 2px 10px rgba(18, 17, 15, 0.18);
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.book__bar { display: none; }

/* With JavaScript: a book. Its width is held so the whole spread fits the screen height. */
.book.is-book .book__fit { margin-inline: auto; width: 100%; max-width: max(640px, calc((100svh - 160px) * 1.086)); }
.book.is-book.is-portrait .book__fit { max-width: min(520px, 100%); }
.book.is-book .book__stage { display: block; justify-items: normal; user-select: none; -webkit-user-select: none; }
/* The library's own wrapper rule is misspelt (.sft__wrapper), so its width is set here. */
.book.is-book .stf__wrapper { position: relative; width: 100%; }
.book.is-book .stf__block { left: 0; top: 0; }
.book.is-book .book__page { max-width: none; background: var(--face); }
.book.is-book .book__page img { box-shadow: none; height: 100%; object-fit: contain; }

.book.is-book .book__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin-top: 18px;
}
.book__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 48px; min-width: 48px; padding: 0 18px;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); background: var(--face);
  border: 1.5px solid var(--ink); border-radius: 3px; cursor: pointer;
}
.book__btn:hover:not(:disabled) { background: var(--ink); color: var(--tag-white); }
.book__btn:disabled { opacity: 0.35; cursor: default; }
.book__btn:focus-visible, .book:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.book__count { min-width: 8.5em; text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.15rem; font-variant-numeric: lining-nums tabular-nums; }
.book__full { margin-left: 6px; }
.book.is-portrait .book__count { min-width: 6.5em; }
.book.is-portrait .book__full { flex: 0 0 100%; max-width: 200px; margin-left: 0; }

/* Full screen: the book fills the screen on a dark ground. */
.book.is-full { background: #12110F; display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.book.is-full .book__frame { background: transparent; padding: 0; }
.book.is-full .book__fit { max-width: max(640px, calc((100svh - 110px) * 1.086)); }
.book.is-full.is-portrait .book__fit { max-width: min(100%, calc((100svh - 110px) * 0.543)); }
.book.is-full .book__count { color: var(--tag-white); }

.book__print { display: none; }

@media print {
  .book__frame { display: none !important; }
  .book__print { display: block; font-size: 1.2rem; }
}