/* our-story — warm-paper editorial album
   System fonts only · zero deps · motion-gated reveals
   Design: a printed photo book. Warm paper ground, ink typography,
   photographs shown whole at their own aspect; the constellation and
   the moment form one continuous night spread before the page returns
   to paper for the close. */

/* ── tokens ───────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* paper + ink */
  --paper: #f5efe6;
  --paper-deep: #ebe2d5;
  --paper-edge: #dfd4c4;
  --ink: #221c19;
  --ink-2: #4d443e;
  --ink-3: #6f635b;
  --rule: rgba(34, 28, 25, 0.18);
  --rule-strong: rgba(34, 28, 25, 0.34);

  /* one accent: oxblood rose */
  --accent: #8c3a4b;
  --accent-soft: rgba(140, 58, 75, 0.09);

  /* night spread */
  --night: #15121b;
  --night-2: #1d1925;
  --night-ink: #f1eae0;
  --night-ink-2: #c9bfb4;
  --night-ink-3: #a3978c;
  --night-rule: rgba(241, 234, 224, 0.14);
  --night-rule-strong: rgba(241, 234, 224, 0.28);
  --gold: #d8bf8a;
  --gold-text: #e2cb9a;
  --star: #f6ecd6;

  /* per-context surface roles (night sections override) */
  --bg: var(--paper);
  --bg-2: var(--paper-deep);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --mark: var(--accent);
  --focus: var(--accent);

  --placeholder-from: #e6dccd;
  --placeholder-to: #d9cdbb;
  --placeholder-motif: rgba(140, 58, 75, 0.14);

  /* type — system stacks only; serif first-choice measured present on
     the target machine, every later name is an ordinary fallback */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
    Baskerville, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-prose: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-lede: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --text-lg: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --text-display: clamp(2.75rem, 1.25rem + 7vw, 7.25rem);
  --text-timestamp: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-prose: 1.62;

  --tracking-caps: 0.14em;
  --tracking-display: -0.015em;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(4rem, 3rem + 3vw, 6rem);
  --space-9: clamp(5rem, 3.5rem + 6vw, 9rem);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --shadow-print: 0 1px 2px rgba(34, 28, 25, 0.08), 0 8px 28px rgba(34, 28, 25, 0.1);
  --shadow-chip: 0 2px 6px rgba(34, 28, 25, 0.12), 0 10px 30px rgba(34, 28, 25, 0.14);

  --measure: 62ch;
  --measure-narrow: 50ch;

  --page-max: 76rem;
  --wall-max: 76rem;
  --page-pad-x: clamp(1.25rem, 2.5vw + 0.5rem, 3rem);

  --photo-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --lead-max-h: min(78vh, 46rem);
  --row-max-h: min(60vh, 32rem);

  --reveal-duration: 0.6s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 1rem;

  --chip-inset: 1rem;
  --badge-inset: 1rem;
}

/* ── reset / base ─────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

/* ── page rhythm ──────────────────────────────────────────────── */

#story-main {
  margin: 0;
  padding: 0 0 calc(var(--space-9) + 4rem);
}

#story-main > section {
  margin-top: var(--space-9);
  padding-inline: var(--page-pad-x);
}

#story-main > section:first-child {
  margin-top: 0;
}

[hidden] {
  display: none !important;
}

/* small centered diamond: the page's visual punctuation between movements */
.ornament,
#gallery:not([hidden])::before,
#next:not([hidden])::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 auto var(--space-8);
  background: var(--mark);
  transform: rotate(45deg);
}

/* ── shared type helpers ──────────────────────────────────────── */

.caps,
.chapter__date-range,
.hero__key-date-label,
.moment__title,
.moment-echo__year,
.entry-gate__hint,
.lightbox__count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.chapter__title,
.next__title,
.moment__timestamp,
.hero__subtitle,
.tile__caption-text {
  text-wrap: balance;
}

.chapter__body p,
.moment__body p,
.next__body p {
  text-wrap: pretty;
}

/* ── motion-safe reveal (contract unchanged) ──────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.reveal.reveal--visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .reveal-scroll {
    animation: reveal-scroll linear both;
    animation-duration: 1ms;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  @keyframes reveal-scroll {
    from {
      opacity: 0;
      transform: translateY(var(--reveal-distance));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-scroll {
    animation: none;
  }
}

/* ── photo tile (media-state foundational) ─────────────────────
   A photograph sits flat on the paper at its own aspect. Before the
   image loads the box holds a 4:3 slot; on load the engine writes the
   natural aspect inline and tags the figure with its orientation. */

.tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.tile__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: var(--shadow-print);
}

.tile__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  background:
    radial-gradient(circle at 30% 35%, var(--placeholder-motif), transparent 45%),
    linear-gradient(150deg, var(--placeholder-from), var(--placeholder-to));
  box-shadow: var(--shadow-print);
}

.tile__placeholder::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(34, 28, 25, 0.12);
  pointer-events: none;
}

/* .tile--placeholder is the media-state oracle class on <figure> */

.tile__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.tile__caption-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--leading-snug);
}

.tile__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── sample-data badge (opaque; never floats translucent over photos) ── */

.sample-badge {
  position: fixed;
  top: var(--badge-inset);
  right: var(--badge-inset);
  z-index: 100;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong);
  background: var(--paper-deep);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  box-shadow: var(--shadow-chip);
  pointer-events: none;
}

/* ── setup panel (root states a/b) ────────────────────────────── */

.setup-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--page-pad-x);
  text-align: center;
  background: var(--paper);
}

.setup-panel__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.setup-panel__body {
  margin: 0;
  max-width: 40ch;
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: var(--leading-prose);
}

.setup-panel__version {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── music chip (opaque paper jewel, bottom-right) ────────────── */

#music-chip {
  position: fixed;
  bottom: var(--chip-inset);
  right: var(--chip-inset);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  min-width: 0;
  max-width: min(17rem, calc(100vw - 2 * var(--chip-inset)));
  pointer-events: none;
}

#music-chip > * {
  pointer-events: auto;
}

#story-audio {
  display: none;
}

.music-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong);
  background: var(--paper-deep);
  color: var(--ink);
  box-shadow: var(--shadow-chip);
  max-width: 100%;
  min-height: 2.75rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.music-toggle:hover {
  border-color: var(--accent);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.music-toggle[hidden] {
  display: none !important;
}

.music-toggle__glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  line-height: 1;
  text-indent: 0.08em;
}

.music-toggle--playing .music-toggle__glyph {
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-indent: 0;
}

.music-toggle__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  max-width: 12rem;
  text-align: left;
}

.music-toggle__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.music-toggle__artist {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* play() rejection — visible aria-live line (exact SPEC phrase). */
.music-chip__live {
  min-height: 0;
  max-width: 100%;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: var(--leading-normal);
}

.music-chip__live:empty {
  display: none;
}

/* element error after play attempt — non-personal line (exact phrase). */
.music-chip__unavailable {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-chip);
}

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

/* ── hero: the title page ─────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  min-height: min(88vh, 54rem);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-9) 0 var(--space-8);
}

.hero__names {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.28em;
  max-width: 100%;
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.hero__name {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero__joiner {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72em;
  line-height: 1;
  color: var(--accent);
}

.hero__subtitle {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lede);
  font-weight: 400;
  color: var(--ink-2);
  line-height: var(--leading-normal);
}

.hero__key-dates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) 0;
  width: min(100%, 44rem);
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.hero__key-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-2) var(--space-5);
}

.hero__key-date + .hero__key-date {
  border-left: 1px solid var(--rule);
}

.hero__key-date-label {
  color: var(--accent);
}

.hero__key-date-date {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
}

.hero__key-date-elapsed {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── chapters: spreads ────────────────────────────────────────── */

.chapters-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  max-width: var(--page-max);
  margin: 0 auto;
}

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.chapter__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: var(--measure);
}

/* kicker: numeral · hairline · date range */
.chapter__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

.chapter__numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--accent);
  flex: 0 0 auto;
}

.chapter__kicker::after {
  content: "";
  flex: 1 1 1.5rem;
  height: 1px;
  background: var(--rule);
  order: 1;
}

.chapter__date-range {
  order: 2;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: 0 1 auto;
  min-width: 0;
}

.chapter__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.chapter__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.chapter__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}

.chapter__body p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-prose);
  line-height: var(--leading-prose);
}

.chapter__body p:first-child {
  color: var(--ink);
}

/* editorial photo run: a lead picture, rows of quieter ones, a
   closing picture when the count leaves one over. Rules, not
   hand placement, so any payload composes. */
.chapter__strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-6) var(--photo-gap);
  align-items: start;
  min-width: 0;
}

.chapter__strip-item {
  grid-column: span 6;
  min-width: 0;
}

.chapter__strip-item:first-child .tile__img,
.chapter__strip-item:first-child .tile__placeholder {
  max-height: var(--lead-max-h);
}

.chapter__strip .tile__img {
  width: auto;
  max-width: 100%;
  max-height: var(--row-max-h);
  margin: 0 auto;
}

.chapter__strip .tile__placeholder {
  max-height: var(--row-max-h);
}

.chapter__strip .tile__caption {
  justify-content: center;
  text-align: center;
  padding-inline: var(--space-2);
}

/* ── gallery: the wall (navigational; justified rows, uncropped) ──
   Each tile grows in proportion to its measured aspect ratio, so every
   row shares one height and no photograph is cropped or re-ordered.
   The trailing filler keeps the last row at the base height. */

.gallery-frame {
  max-width: var(--wall-max);
  margin: 0 auto;
}

.gallery-wall {
  /* base row height; kept small enough that any two tiles share a row */
  --row: clamp(8rem, 4rem + 9vw, 15rem);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--photo-gap);
  width: 100%;
}

.gallery-wall::after {
  content: "";
  flex: 10000 0 0;
  min-width: 0;
}

.gallery-tile {
  --ar: 1;
  display: block;
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: zoom-in;
}

.gallery-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.gallery-tile .tile {
  height: 100%;
  gap: 0;
}

.gallery-tile .tile__img,
.gallery-tile .tile__placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  object-position: center;
  box-shadow: none;
  transition: opacity 0.35s ease;
}

.gallery-tile:hover .tile__img,
.gallery-tile:focus-visible .tile__img {
  opacity: 0.92;
}

/* the wall is navigational: the caption lives in the accessible name
   and in the lightbox, not under every thumbnail */
.gallery-tile .tile__caption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-tile .tile__img,
  .gallery-tile .tile__placeholder {
    transition: none;
  }
}

/* ── lightbox (native dialog; the one surface that shows a photo whole) ── */

.lightbox {
  width: min(100vw - 1.5rem, 96rem);
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100vh - 1.5rem);
  margin: auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--night);
  color: var(--night-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: auto;
  overscroll-behavior: contain;
  --fg-2: var(--night-ink-2);
  --fg-3: var(--night-ink-3);
  --focus: var(--gold-text);
}

.lightbox::backdrop {
  background: rgba(21, 18, 27, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.lightbox__count {
  color: var(--night-ink-3);
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--night-rule-strong);
  background: transparent;
  color: var(--night-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lightbox__close:hover,
.lightbox__nav:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-text);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.lightbox__nav {
  padding-inline: 0.85rem;
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
}

.lightbox__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "prev stage next";
  align-items: center;
  gap: var(--space-4);
}

.lightbox__stage {
  display: flex;
  justify-content: center;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox__stage {
    view-transition-name: lightbox-stage;
  }
}

.lightbox__tile,
.lightbox .tile.lightbox__tile {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: var(--space-4);
}

.lightbox__tile .tile__img {
  width: auto;
  max-width: 100%;
  max-height: min(76vh, 60rem);
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  filter: none;
}

.lightbox__tile .tile__placeholder {
  width: min(100%, 40rem);
  aspect-ratio: 4 / 3;
  max-height: min(76vh, 40rem);
  margin: 0 auto;
  background:
    radial-gradient(circle at 30% 35%, rgba(216, 191, 138, 0.16), transparent 45%),
    linear-gradient(150deg, var(--night-2), #241e2d);
  box-shadow: none;
}

.lightbox__tile .tile__placeholder::after {
  border-color: var(--night-rule);
}

.lightbox__tile .tile__caption {
  justify-content: center;
  text-align: center;
  padding-inline: var(--space-4);
}

.lightbox__tile .tile__caption-text {
  font-size: var(--text-md);
  color: var(--night-ink);
}

.lightbox__tile .tile__date {
  color: var(--night-ink-3);
}

.lightbox__nav--prev {
  grid-area: prev;
}

.lightbox__nav--next {
  grid-area: next;
}

.lightbox__stage {
  grid-area: stage;
}

.lightbox__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.lightbox--single .lightbox__nav {
  display: none;
}

@media (max-width: 599px) {
  .lightbox {
    padding: var(--space-3) var(--space-3) var(--space-4);
  }

  .lightbox__body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "prev next";
    justify-items: center;
  }

  .lightbox__tile .tile__img {
    max-height: 62vh;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lightbox::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(21, 18, 27, 0.94);
  }
}

/* ── night spread: constellation + moment share one ground ────── */

#constellation,
#moment {
  --bg: var(--night);
  --bg-2: var(--night-2);
  --fg: var(--night-ink);
  --fg-2: var(--night-ink-2);
  --fg-3: var(--night-ink-3);
  --line: var(--night-rule);
  --line-strong: var(--night-rule-strong);
  --mark: var(--gold);
  --focus: var(--gold-text);
  background: var(--night);
  color: var(--night-ink);
  padding-block: var(--space-9);
}

#constellation:not([hidden]) + #moment {
  margin-top: 0;
  padding-top: 0;
}

#moment:not([hidden]) + #next {
  margin-top: var(--space-9);
}

/* ── constellation: night-sky field ───────────────────────────── */

.constellation-sky {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--night-rule);
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(216, 191, 138, 0.07), transparent 62%),
    linear-gradient(180deg, #17131f 0%, #1a1523 55%, #14111a 100%);
  overflow: hidden;
}

.constellation-sky__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  pointer-events: none;
}

.constellation-sky__bg {
  fill: transparent;
}

.constellation-photo-point {
  fill: rgba(216, 191, 138, 0.3);
  stroke: none;
  pointer-events: none;
}

.constellation-connector {
  stroke: rgba(226, 203, 154, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.constellation-place {
  pointer-events: none;
}

.constellation-place__star {
  fill: var(--star);
  filter: drop-shadow(0 0 3px rgba(246, 236, 214, 0.55));
}

.constellation-place--home .constellation-place__star {
  fill: var(--star);
  filter: drop-shadow(0 0 6px rgba(246, 236, 214, 0.6));
}

.constellation-place--visited .constellation-place__star {
  fill: var(--gold);
  filter: drop-shadow(0 0 4px rgba(216, 191, 138, 0.45));
}

.constellation-place--proposal .constellation-place__star {
  fill: #fff6e3;
  filter: drop-shadow(0 0 9px rgba(226, 203, 154, 0.85));
}

.constellation-place__pulse {
  stroke: rgba(226, 203, 154, 0.75);
  stroke-width: 1.25;
  fill: none;
  opacity: 0.85;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: constellation-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes constellation-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.9);
  }
}

/* Transparent focusable hits — a solid 24×24 CSS px square (WCAG 2.5.8). */
.constellation-hits {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.constellation-hit {
  position: absolute;
  width: 28px;
  height: 28px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: default;
  z-index: 1;
}

.constellation-hit:focus {
  outline: none;
}

.constellation-hit:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

.constellation-hit__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--night-rule-strong);
  background: var(--night);
  color: var(--night-ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.constellation-hit:hover .constellation-hit__label,
.constellation-hit:focus .constellation-hit__label,
.constellation-hit:focus-visible .constellation-hit__label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .constellation-place__pulse {
    animation: none;
    opacity: 0;
  }

  .constellation-hit__label {
    transition: none;
  }
}

/* ── moment: the peak of the night spread ─────────────────────── */

.moment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: var(--space-8);
}

.moment__title {
  margin: 0;
  color: var(--gold-text);
}

.moment__timestamp {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-timestamp);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--night-ink);
  max-width: 24ch;
}

.moment__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure-narrow);
}

.moment__body p {
  margin: 0;
  font-size: var(--text-lede);
  line-height: var(--leading-prose);
  color: var(--night-ink-2);
}

.moment__body p:first-child {
  color: var(--night-ink);
}

.moment-echo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  width: 100%;
  margin-top: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--night-rule);
}

.moment-echo__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
}

.moment-echo__year {
  margin: 0;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.moment-echo__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--photo-gap);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.moment-echo__photo {
  flex: 1 1 14rem;
  max-width: 24rem;
  min-width: 0;
}

.moment-echo__photo .tile__img {
  width: auto;
  max-width: 100%;
  max-height: 24rem;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.moment-echo__photo .tile__placeholder {
  background:
    radial-gradient(circle at 30% 35%, rgba(216, 191, 138, 0.16), transparent 45%),
    linear-gradient(150deg, var(--night-2), #241e2d);
  box-shadow: none;
}

.moment-echo__photo .tile__placeholder::after {
  border-color: var(--night-rule);
}

.moment-echo__photo .tile__caption {
  justify-content: center;
  text-align: center;
}

@media (min-width: 720px) {
  .moment-echo {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .moment-echo__group--then {
    padding-right: var(--space-6);
    border-right: 1px solid var(--night-rule);
  }

  .moment-echo__group--now {
    padding-left: var(--space-6);
  }
}

/* ── next: back to paper, the blank page ──────────────────────── */

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 0 var(--space-8);
}

.next__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 22ch;
}

.next__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure-narrow);
}

.next__body p {
  margin: 0;
  font-size: var(--text-lede);
  color: var(--ink-2);
  line-height: var(--leading-prose);
}

.next__body p:last-child {
  color: var(--ink-3);
  font-style: italic;
}

.next::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: var(--space-6);
  background: var(--rule-strong);
}

/* ── entry gate: tap-to-begin (guaranteed music gesture) ──────── */

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--page-pad-x);
  text-align: center;
  background: var(--paper);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.entry-gate__names {
  max-width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.25rem + 5vw, 5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.entry-gate__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink-2);
}

/* the breathing lives on the ornament, never on the text */
.entry-gate__hint::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  transform: rotate(45deg);
  animation: entry-gate-breathe 2.6s ease-in-out infinite;
}

.entry-gate--closing {
  opacity: 0;
  pointer-events: none;
}

@keyframes entry-gate-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

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

  .entry-gate__hint::after {
    animation: none;
  }
}

/* ── responsive: wide editorial spreads ───────────────────────── */

@media (min-width: 600px) {
  .chapter__strip-item {
    grid-column: span 2;
  }

  .chapter__strip-item:first-child {
    grid-column: span 6;
  }

  /* an odd picture left over closes the chapter at full width */
  .chapter__strip-item:last-child:nth-child(3n + 2) {
    grid-column: span 6;
  }

  /* two left over sit as a pair */
  .chapter__strip-item:nth-child(3n + 2):nth-last-child(2),
  .chapter__strip-item:nth-child(3n):last-child {
    grid-column: span 3;
  }

  /* exactly two pictures: a pair, no lead */
  .chapter__strip-item:first-child:nth-last-child(2),
  .chapter__strip-item:first-child:nth-last-child(2) + .chapter__strip-item {
    grid-column: span 3;
  }

  .chapter__strip-item:first-child:nth-last-child(2) .tile__img,
  .chapter__strip-item:first-child:nth-last-child(2) .tile__placeholder {
    max-height: var(--row-max-h);
  }
}

@media (max-width: 599px) {
  .chapter__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter__strip-item {
    grid-column: span 1;
  }

  .chapter__strip-item:first-child,
  .chapter__strip-item:last-child:nth-child(even) {
    grid-column: span 2;
  }

  .chapter__strip .tile__img {
    width: 100%;
    max-height: none;
  }

  .chapter__strip-item:first-child .tile__img {
    width: auto;
    max-height: 70vh;
  }
}

@media (min-width: 1200px) {
  .chapter {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-8);
  }

  .chapter__text {
    position: sticky;
    top: var(--space-6);
  }

  .chapter__strip-item {
    grid-column: span 3;
  }

  .chapter__strip-item:first-child,
  .chapter__strip-item:last-child:nth-child(even) {
    grid-column: span 6;
  }

  .chapter__strip-item:first-child:nth-last-child(2),
  .chapter__strip-item:first-child:nth-last-child(2) + .chapter__strip-item {
    grid-column: span 3;
  }
}

@media (max-width: 480px) {
  :root {
    --chip-inset: 0.75rem;
    --badge-inset: 0.75rem;
  }

  .sample-badge {
    top: auto;
    bottom: calc(var(--chip-inset) + 3.5rem);
    right: var(--badge-inset);
  }

  .hero {
    min-height: min(80vh, 40rem);
    padding-top: var(--space-8);
  }

  .gallery-wall {
    --row: 4.5rem;
  }

  .hero__key-date {
    flex: 1 1 100%;
    padding-inline: var(--space-2);
  }

  .hero__key-date + .hero__key-date {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
  }
}