/* ===== Tokens ===== */
:root {
  --paper: #e4e2de;
  --paper-2: #d6d3ce;
  --ink: #2a2a29;
  --ink-soft: #57544f;
  --line: #c5c0b8;
  --book-paper: #f1efea;
  --paper-deep: #c9c6c0;
  --gold: #c8923a;
  --gold-soft: #e9c983;
  --night: #1d1c1f;
  --night-2: #28262b;
  --night-ink: #efe9df;
  --night-soft: #b3aca0;

  --serif: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --sans: "Assistant", "Segoe UI", Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(43, 42, 40, 0.08);
  --max: 1080px;
  --gutter: clamp(16px, 4vw, 32px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute;
  inset-inline-start: 8px;
  top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 100;
}
.skip-link:focus { top: 8px; }

/* ===== Top nav ===== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(228, 226, 222, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.topnav.is-scrolled { border-bottom-color: var(--line); }

.topnav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topnav__brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.topnav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  margin: 0;
  padding: 0;
  font-size: 1rem;
}
.topnav__links a { text-decoration: none; color: var(--ink-soft); transition: color 0.2s; }
.topnav__links a:hover { color: var(--ink); }

.topnav__links a.topnav__cta {
  color: var(--ink);
  border: 1px solid var(--gold);
  padding: 4px 14px;
  border-radius: 999px;
}
.topnav__links a.topnav__cta:hover { background: var(--gold); color: #fff; }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  text-align: center;
  padding: clamp(40px, 8vw, 88px) var(--gutter) clamp(56px, 9vw, 104px);
}

.hero__portrait {
  width: clamp(220px, 58vw, 330px);
  aspect-ratio: 4 / 5;
  margin: 0 auto 32px;
  border-radius: 50% / 42%;
  overflow: hidden;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--gold-soft), var(--shadow);
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom toward the face; adjust these if the portrait photo changes. */
  object-position: 50% 0%;
  transform: scale(1.6);
  transform-origin: 58% 0%;
}

.hero__eyebrow {
  margin: 0 0 4px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  font-size: 1rem;
}

.hero__name { font-size: clamp(2.6rem, 8vw, 4.25rem); font-weight: 500; }

.hero__years {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--ink-soft);
  direction: ltr;
  unicode-bidi: isolate;
}

.hero__tagline {
  margin: 20px auto 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero__tagline::before,
.hero__tagline::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold-soft);
}

/* ===== Hero background: animated candle scene (candle-scene.js) or a video ===== */
.hero__scene,
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--dark { background: #0f0d0b; }
.hero--dark .hero__eyebrow,
.hero--dark .hero__years { color: #cfc7bb; }
.hero--dark .hero__name { color: #f6f1e8; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.hero--dark .hero__tagline { color: var(--gold-soft); }
.hero--dark .hero__portrait {
  box-shadow: 0 0 0 6px rgba(255, 236, 200, 0.08), 0 0 0 7px rgba(233, 201, 131, 0.7), 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ===== Placeholders ===== */
.placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0)),
    var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-align: center;
  padding: 12px;
}
.placeholder--portrait { background-color: #cfcbc4; }

/* ===== Sections ===== */
.section { padding: clamp(56px, 9vw, 104px) 0; background: var(--paper); }
.section--tinted { background: var(--paper-2); }
.section--dark {
  background: radial-gradient(ellipse at top, #2e2a26 0%, var(--night) 60%);
  color: var(--night-ink);
}

.section__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section__inner--narrow { max-width: 720px; }

.section__title {
  font-size: clamp(2rem, 5vw, 2.6rem);
  text-align: center;
  margin-bottom: 36px;
}
.section__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 18px auto 0;
  background: var(--gold);
}

.section__lead {
  text-align: center;
  margin: -12px 0 36px;
  color: var(--night-soft);
}

/* ===== About: storybook ===== */
.book-title {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  color: var(--ink-soft);
  margin: -12px auto 36px;
  max-width: 34ch;
}

.book { max-width: 980px; margin: 0 auto; outline: none; }
.book:focus-visible .book__page { outline: 2px solid var(--gold); outline-offset: 4px; }

.book__stage {
  display: grid;
  perspective: 3200px;
}

.book__page {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0.02)),
    var(--book-paper);
  border: 1px solid var(--line);
  border-radius: 6px 14px 14px 6px;
  box-shadow:
    0 1px 0 #fff inset,
    6px 6px 0 -2px #e6e3dd, 6px 6px 0 -1px var(--line),
    0 18px 40px rgba(43, 42, 40, 0.12);
  transform-origin: right center;
  backface-visibility: hidden;
}

/* The spine down the middle of the open book. */
.book__page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 48px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(90, 70, 40, 0.1) 50%, rgba(0, 0, 0, 0));
  pointer-events: none;
}

.book__art { margin: 0; padding: clamp(18px, 3vw, 32px); display: grid; }
.book__art-button {
  all: unset;
  display: block;
  cursor: zoom-in;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line), 0 8px 20px rgba(43, 42, 40, 0.12);
}
.book__art-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }
.book__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.book__placeholder { border-radius: 4px; border: 1px dashed var(--line); font-family: var(--serif); }

.book__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  padding-bottom: 56px;
  position: relative;
}
.book__text p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 2.2vw, 1.22rem);
  line-height: 1.95;
}
.book__folio {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
}

.book__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 28px);
  margin-top: 28px;
}
.book__counter { color: var(--ink-soft); font-size: 0.95rem; min-width: 9ch; text-align: center; }
.book__nav {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.book__nav:hover:not(:disabled) { background: var(--gold); color: #fff; }
.book__nav:disabled { opacity: 0.35; cursor: default; }

/* Page turns: a leaf with a front and back face rotates around the spine. */
.book__stage { position: relative; }
.book__face { position: absolute; inset: 0 0 auto 0; margin: 0; box-shadow: none; transform-origin: 50% 50%; }
.book__still { z-index: 1; }
.book__leaf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  transform-style: preserve-3d;
  pointer-events: none;
}
.book__leaf > .book__face { position: relative; backface-visibility: hidden; }
.book__leaf > .book__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.book__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 32, 20, 0.16), rgba(40, 32, 20, 0.02));
}

@media (max-width: 720px) {
  .book__page { grid-template-columns: 1fr; min-height: 0; }
  .book__page::after { display: none; }
  .book__art { padding-bottom: 0; }
  .book__art-button, .book__placeholder { aspect-ratio: 3 / 4; }
}
@media (min-width: 721px) {
  /* Fixed spread height so every page is the same size while turning. */
  .book__page { height: 640px; }
  .book__art { min-height: 0; }
  .book__art-button, .book__placeholder { height: 100%; min-height: 0; }
}

/* ===== Gallery ===== */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(8px, 2vw, 14px);
}

@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

.gallery__item {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.gallery__button {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  position: relative;
}
.gallery__button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: saturate(0.92);
}
.gallery__button:hover img { transform: scale(1.04); filter: saturate(1); }

/* ===== Lightbox ===== */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(20, 19, 21, 0.94);
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(20, 19, 21, 0.94); }

.lightbox__figure { margin: 0; padding: 56px 64px; text-align: center; }
.lightbox__figure img {
  max-width: min(92vw, 1200px);
  max-height: 78vh;
  margin: 0 auto;
  border-radius: 4px;
  object-fit: contain;
}
.lightbox__figure figcaption { margin-top: 14px; font-family: var(--serif); color: #ddd; }

.lightbox__close, .lightbox__nav {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  font-size: 2.4rem;
  line-height: 1;
  padding: 12px 16px;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 8px; inset-inline-end: 8px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox__nav--prev { inset-inline-start: 4px; }
.lightbox__nav--next { inset-inline-end: 4px; }

/* ===== Candle form ===== */
.candle-form {
  max-width: 640px;
  margin: 0 auto 64px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--night-2);
  border: 1px solid rgba(233, 201, 131, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 18px;
}

.candle-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: grid; gap: 6px; position: relative; }
.field__label { font-size: 0.98rem; color: var(--night-ink); }
.field__req { color: var(--gold-soft); }
.field__hint { color: var(--night-soft); font-size: 0.9em; }

.field input[type="text"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--night-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #7d776e; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.field [aria-invalid="true"] { border-color: #d77a6a; }

.field__counter {
  justify-self: end;
  font-size: 0.8rem;
  color: var(--night-soft);
  direction: ltr;
}

.photo-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px dashed rgba(233, 201, 131, 0.4);
  border-radius: 8px;
  cursor: pointer;
  color: var(--night-soft);
  transition: border-color 0.2s, color 0.2s;
}
.photo-picker:hover { border-color: var(--gold); color: var(--night-ink); }
.photo-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photo-picker:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.photo-picker__preview { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }

.link-button {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gold-soft);
  text-decoration: underline;
  cursor: pointer;
}

.form-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(215, 122, 106, 0.15);
  color: #f1b9ad;
  font-size: 0.98rem;
}

/* ===== Buttons ===== */
.button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--night);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border: 0;
  border-radius: 999px;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(200, 146, 58, 0.25);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(200, 146, 58, 0.4); }
.button:disabled { opacity: 0.6; cursor: wait; transform: none; }

.button--ghost {
  background: none;
  color: var(--night-ink);
  border: 1px solid rgba(233, 201, 131, 0.4);
  box-shadow: none;
  font-weight: 400;
}
.button--ghost:hover { border-color: var(--gold); box-shadow: none; }

.button__flame {
  width: 10px;
  height: 14px;
  background: radial-gradient(ellipse at 50% 70%, #fff6d6 0%, #ffd27a 45%, #e98b2a 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 2.2s infinite ease-in-out;
}

/* ===== Candle wall ===== */
.candle-count {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin: 0 0 28px;
}

.candle-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  align-items: start;
}

.candle-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
}
.candle-card.is-new { animation: arrive 0.9s ease both; border-color: rgba(233, 201, 131, 0.45); }

.candle-card__name { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.candle-card__meta { margin: 0 0 8px; font-size: 0.88rem; color: var(--night-soft); }
.candle-card__message { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: #ddd6ca; font-size: 1.02rem; }

.candle-card__photo {
  all: unset;
  display: block;
  margin-top: 14px;
  cursor: zoom-in;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}
.candle-card__photo:focus-visible { outline: 2px solid var(--gold); }
.candle-card__photo img { max-height: 220px; width: 100%; object-fit: cover; }

.candle-empty { text-align: center; color: var(--night-soft); }
.candle-more { text-align: center; margin-top: 32px; }

/* The candle */
.candle { position: relative; width: 34px; height: 76px; }
.candle__body {
  position: absolute;
  bottom: 0;
  left: 7px;
  width: 20px;
  height: 46px;
  border-radius: 3px 3px 4px 4px;
  background: linear-gradient(90deg, #d9ccb4, #f6eedf 45%, #cdbfa5);
}
.candle__body::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 9px;
  width: 2px;
  height: 7px;
  background: #3a332b;
  border-radius: 1px;
}
.candle__flame {
  position: absolute;
  top: 4px;
  left: 10px;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 72%, #fffaf0 0%, #ffe39a 35%, #f5a53c 75%, rgba(233, 120, 30, 0.9) 100%);
  box-shadow: 0 0 18px 6px rgba(255, 190, 90, 0.28), 0 0 40px 14px rgba(255, 170, 60, 0.1);
  transform-origin: 50% 90%;
  animation: flicker 2.6s infinite ease-in-out;
}
.candle-card:nth-child(3n+1) .candle__flame { animation-duration: 2.2s; animation-delay: -0.4s; }
.candle-card:nth-child(3n+2) .candle__flame { animation-duration: 3s; animation-delay: -1.1s; }

@keyframes flicker {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); opacity: 1; }
  25% { transform: scale(0.95, 1.06) rotate(1.5deg); opacity: 0.94; }
  50% { transform: scale(1.03, 0.96) rotate(-0.5deg); opacity: 1; }
  75% { transform: scale(0.97, 1.04) rotate(1deg); opacity: 0.96; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 36px var(--gutter);
  background: var(--night);
  color: var(--night-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}
.footer p { margin: 0; }

/* ===== Transitions between sections =====
   Each section is a sheet that slides up over the one before it. The sheet
   arrives slightly narrower with rounded top corners and settles to full
   width as it reaches the top. The section it covers sinks back: its content
   drifts down more slowly than the page and a soft shade darkens it. Content
   inside each sheet then rises into place piece by piece. A gold bar at the
   top shows how far down the page you are. */
:root { --sheet-overlap: clamp(28px, 5vw, 48px); }

.hero { padding-bottom: calc(clamp(56px, 9vw, 104px) + var(--sheet-overlap)); }
.hero__content { position: relative; z-index: 1; }

main > .section {
  position: relative;
  margin-top: calc(-1 * var(--sheet-overlap));
  border-radius: var(--sheet-overlap) var(--sheet-overlap) 0 0;
  box-shadow: 0 -22px 44px -18px rgba(20, 18, 16, 0.35);
  transform-origin: 50% 0;
}
main > .section:nth-child(1) { z-index: 1; }
main > .section:nth-child(2) { z-index: 2; }
main > .section:nth-child(3) { z-index: 3; }
.section > .section__inner { position: relative; z-index: 1; }

/* The shade that darkens a section, or the header, as the next one covers it. */
.hero::after,
main > .section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: #14120f;
  opacity: 0;
  pointer-events: none;
}

@keyframes revealOnScroll {
  from { opacity: 0; transform: translateY(44px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroSink {
  to { opacity: 0; transform: translateY(22vh) scale(0.94); }
}
@keyframes sheetArrive {
  from { scale: 0.94; border-radius: calc(var(--sheet-overlap) * 1.6) calc(var(--sheet-overlap) * 1.6) 0 0; }
  to { scale: 1; border-radius: 0; }
}
@keyframes contentSink {
  to { transform: translateY(12vh) scale(0.97); opacity: 0.55; }
}
@keyframes shade {
  to { opacity: 0.45; }
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.scroll-progress { display: none; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: revealOnScroll both cubic-bezier(0.2, 0.7, 0.25, 1);
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
    will-change: transform, opacity;
  }

  /* The header content sinks and fades while the first sheet slides over it. */
  .hero__content {
    animation: heroSink both linear;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  .hero::after {
    animation: shade both linear;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  /* Arriving: the sheet widens and its corners flatten on the way up. */
  main > .section {
    animation: sheetArrive both cubic-bezier(0.25, 0.6, 0.3, 1);
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }

  /* Leaving: the content drifts down and dims under the next sheet. The last
     section has nothing covering it, so it stays put. */
  main > .section:not(:last-child) > .section__inner {
    animation: contentSink both linear;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  main > .section:not(:last-child)::after {
    animation: shade both linear;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  .scroll-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: linear-gradient(270deg, var(--gold-soft), var(--gold));
    transform-origin: right center;
    animation: progressGrow linear both;
    animation-timeline: scroll(root);
  }
}

/* Browsers without scroll timelines: app.js adds .io-reveal and flips
   .is-visible with an IntersectionObserver, so content still rises in and
   the sheets keep their overlapping look. Without JS, content just shows. */
@supports not (animation-timeline: view()) {
  .io-reveal .reveal {
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.25, 1);
    will-change: transform, opacity;
  }
  .io-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(44px); }
}

/* ===== Small screens ===== */
@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .topnav__brand { display: none; }
  .topnav__inner { justify-content: center; }
  .candle-form__row { grid-template-columns: 1fr; }
  .lightbox__figure { padding: 56px 12px; }
  .lightbox__nav { top: auto; bottom: 12px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .io-reveal .reveal:not(.is-visible) { opacity: 1; transform: none; will-change: auto; }
}