:root {
  --paper: #f2eadb;
  --ink: #2b2b2b;
  /* Artwork aspect ratio (width / height); switched to landscape below. */
  --ratio: 0.5625;
  /* How far the art may overflow the screen (width, height) before the
     lettering or email would be cropped. */
  --max-w: 1.2;
  --max-h: 1.6;
}

@media (min-aspect-ratio: 1/1) {
  :root {
    --ratio: 1.7778;
    /* Covers 4:3 screens (iPad in landscape) too. */
    --max-w: 1.35;
    /* Covers screens up to ~2.67:1 (phones in landscape with browser bars,
       ultrawide monitors) so no paper strip shows at the sides. */
    --max-h: 1.5;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* One screen: the stage is fixed and clips its own overflow, so nothing
   scrolls. html/body are left scrollable so pull-to-refresh still works. */
html,
body {
  margin: 0;
  height: 100%;
  color: var(--ink);
}

/* The root background also paints any area the browser keeps outside the
   page (e.g. beside the iPhone notch in landscape), so it repeats the paper
   over an aged-paper tone instead of leaving a flat pale strip. */
html {
  background: #dcc69c url("media/02_spine/paper_v002.webp") center / auto 100% repeat;
}

img {
  display: block;
  max-width: 100%;
}

/* position: fixed + inset: 0 tracks the visible viewport, so the artwork
   always fills the space between the browser's address bar and toolbar. */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Lets .art size itself from this box (cqw/cqh) instead of vw/dvh. */
  container-type: size;
}

/* "Cover": the smallest box of the artwork's ratio that fills the whole
   screen, cropping the overflowing side equally on both ends. On extreme
   screen shapes it's capped so the lettering is never cut off, and the
   paper background shows instead. Sizing the box (rather than object-fit)
   keeps the email's % position on the art. */
.art {
  position: relative;
  flex: none;
  width: min(max(100vw, 100vh * var(--ratio)), 100vw * var(--max-w), 100vh * var(--ratio) * var(--max-h));
  width: min(max(100vw, 100dvh * var(--ratio)), 100vw * var(--max-w), 100dvh * var(--ratio) * var(--max-h));
  /* On iPhone in landscape (viewport-fit=cover, safe areas, rotation) vw/dvh
     can disagree with the screen the stage actually covers, leaving a paper
     strip at the side. Sizing from the stage itself always matches it. */
  width: min(max(100cqw, 100cqh * var(--ratio)), 100cqw * var(--max-w), 100cqh * var(--ratio) * var(--max-h));
  aspect-ratio: var(--ratio);
}

.art picture,
.art picture img {
  width: 100%;
  height: 100%;
}

/* Email link sits just under the lettering (positions are % of artwork). */
.email {
  position: absolute;
  left: 50%;
  top: 73%;
  width: 70%;
  transform: translateX(-50%);
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

@media (min-aspect-ratio: 1/1) {
  .email {
    left: 50%;
    top: 71%;
    width: 49%;
  }
}

.email:hover {
  /* Swap the button artwork while hovered. */
}

.email:hover img {
  content: url("media/02_spine/email/email_gold_v002.webp");
}

.email:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

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