:root {
  /* palette tokens */
  --cream: #f3e6c4;
  --ink: #1a1410;
  --pine-deep: #1a3824;
  --crimson: #b5252a;
  --crimson-deep: #7a1518;

  /* role tokens — testing pineDeep background.
     Revert to a cream page by swapping --bg back to var(--cream)
     and --fg back to var(--ink), and regenerate img/qr.svg with
     foreground=1a1410 background=f3e6c4. */
  --bg: var(--pine-deep);
  --fg: var(--cream);
  --fg-rgb: 243, 230, 196; /* cream as rgb, for rgba opacity use */

  --body-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}

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

html { background: var(--bg); color-scheme: dark only; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: 8vh 4vw 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure {
  margin: 0 0 12vh;
  width: 100%;
  max-width: 900px;
}

figure:last-of-type { margin-bottom: 16vh; }

figure picture,
figure img {
  display: block;
  width: 100%;
  height: auto;
}

footer {
  text-align: center;
  padding: 4vh 6vw 8vh;
  max-width: 480px;
  margin: 0 auto;
  color: rgba(var(--fg-rgb), 0.75);
}

footer p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

footer p:last-of-type { margin-bottom: 0; }

footer a {
  color: var(--fg);
  text-decoration: underline;
}

footer a:hover { text-decoration: none; opacity: 1; }

/* Share QR — the 4th panel (a "take this with you" coda, not part of the I–II–III narrative). */
figure.share .share-card {
  aspect-ratio: 1 / 1;
  background: var(--cream);
  padding: 10% 10% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

figure.share .qr {
  width: 75%;
  height: auto;
  max-width: 560px;
  display: block;
}

figure.share .url {
  margin: 0;
  font-size: clamp(16px, 3vw, 26px);
  color: var(--ink);
  letter-spacing: 0.03em;
  font-weight: 500;
  opacity: 0.85;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Fade-in on scroll — progressively enhanced.
   If JS is off, the body never gets .fade-on-scroll and figures stay at opacity 1. */
.fade-on-scroll figure {
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.fade-on-scroll figure.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll figure,
  .fade-on-scroll figure.visible {
    opacity: 1;
    transition: none;
  }
}

/* Desktop — same column, more generous breathing room */
@media (min-width: 720px) {
  main { padding: 12vh 2rem 6vh; }
  figure { margin-bottom: 15vh; }
  figure:last-of-type { margin-bottom: 20vh; }
}

@media (min-width: 1024px) {
  main { padding: 16vh 2rem 8vh; }
  figure { margin-bottom: 18vh; }
}