/* Vax and the Virus — responsive web edition.
 *
 * Two layouts, one markup tree:
 *
 *   Wide  — the page is a fixed-aspect box. Art fills it, the text panel is
 *           positioned at its measured coordinates, and type is sized in cqw
 *           so the whole page scales as a unit. 12pt on a 468pt-wide page is
 *           2.564% of the width, hence 2.564cqw. This is the 2017 design.
 *
 *   Narrow — art and text stack. Type switches to rem so it stays readable on
 *            a phone instead of shrinking with the artwork. This is why the
 *            artwork is extracted with the white panel removed: at this size
 *            the panel is drawn by CSS and grows with the text.
 */

:root {
  --page-w: 468;             /* pt, interior trim 6.5in */
  --page-h: 612;             /* pt, interior trim 8.5in */
  --body-pt: 12;
  --leading: 1.2;            /* 14.4pt / 12pt */
  --radius-pt: 18;
  --ink: #1a1a1a;
  --paper: #ffffff;
  --surround: #2f3a42;
}

@font-face {
  font-family: 'Orchidea Pro';
  src: url('fonts/orchidea-pro-medium.woff2') format('woff2'),
       url('fonts/orchidea-pro-medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font-family: 'Orchidea Pro', Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

.book {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.masthead {
  color: #fff;
  text-align: center;
  padding: 2rem 1rem 0.5rem;
}
/* When embedded in vaxbook.com/book/ the host page already shows the
 * title, so ?embed=1 suppresses this masthead. */
.is-embedded .masthead { display: none; }
.is-embedded .book { padding-top: .75rem; }

.masthead h1 { margin: 0 0 .25rem; font-size: clamp(1.6rem, 5vw, 2.6rem); }
.masthead p  { margin: 0; opacity: .8; font-size: .95rem; }

/* ---------------------------------------------------------------- page --- */

.page {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--page-w) / var(--page-h);
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgb(0 0 0 / .35);
}
.page--cover { aspect-ratio: 936 / 612; }   /* wraparound cover is a spread */

.page__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page__panel {
  position: absolute;
  background: var(--paper);
  border-radius: calc(var(--radius-pt) / var(--page-w) * 100cqw);
  padding: calc(1.6 / var(--page-w) * 100cqw);
}
.page--nopanel .page__panel { background: none; }
/* p20's panel is an ellipse in the original artwork, not a rounded rect. */
.page--ellipse .page__panel { border-radius: 50%; }

.page__text {
  position: absolute;
  font-size: calc(var(--body-pt) / var(--page-w) * 100cqw);
  line-height: var(--leading);
  margin: 0;
}
.page__text p { margin: 0 0 1.2em; }
.page__text p:last-child { margin-bottom: 0; }

.page__num {
  position: absolute;
  right: .5rem;
  bottom: .35rem;
  font: 600 .7rem/1 system-ui, sans-serif;
  color: #fff;
  opacity: .45;
  mix-blend-mode: difference;
}

/* -------------------------------------------------------------- narrow --- */
/* Below this width the fixed layout makes body type too small to read, so the
 * page stops being a fixed-aspect box and becomes art-above-text. */

@media (max-width: 640px) {
  .book { gap: 2.5rem; padding-inline: .5rem; }

  .page {
    container-type: normal;
    aspect-ratio: auto;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .page__art {
    position: static;
    height: auto;
    aspect-ratio: var(--page-w) / var(--page-h);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgb(0 0 0 / .35);
  }
  .page--cover .page__art { aspect-ratio: 936 / 612; }

  /* The panel and the text are SIBLINGS, so both going static would leave an
   * empty panel with the text flowing out below it — dark text on a dark
   * background. Drop the panel element and let the text block BE the panel. */
  .page__panel { display: none; }

  .page__text {
    position: static;
    inset: auto;
    width: auto !important;
    height: auto !important;
    margin-top: .75rem;
    padding: 1rem 1.1rem;
    background: var(--paper);
    border-radius: 12px;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .page__num { position: static; align-self: flex-end; color: #fff; opacity: .5; mix-blend-mode: normal; margin-top: .25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}