/* ============================================================
   ONE YEAR OF US — Single-page scrolling stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Caveat:wght@400;700&family=Syne+Mono&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* === VARIABLES === */
:root {
  --gold:   #d4a853;
  --cream:  #ede6d6;
  --paper:  #f2e8d5;
  --ink:    #0b0905;
  --max-w:  1060px;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: 'Libre Baskerville', Georgia, serif;
  line-height: 1.65;
  overflow-x: hidden;
  background: #0b0905;
  color: var(--cream);
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  opacity: 0.75;
  pointer-events: none;
  transition: transform 0.08s linear;
}

/* ============================================================
   DROP-IN ANIMATION — spring bounce
   ============================================================ */
.drop-in {
  opacity: 0;
  /* starts further away and slightly small */
  transform: translateY(100px) scale(0.86) rotate(var(--rot, 0deg));
  transition:
    opacity   0.65s ease,
    transform 0.75s cubic-bezier(0.34, 1.5, 0.64, 1); /* overshoot spring */
  will-change: transform, opacity;
}
/* CSS delay classes — used on labels, titles, notes */
.drop-in.di-1 { transition-delay: 0.10s; }
.drop-in.di-2 { transition-delay: 0.20s; }
.drop-in.di-3 { transition-delay: 0.30s; }
.drop-in.di-4 { transition-delay: 0.42s; }
.drop-in.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--rot, 0deg));
}

/* ============================================================
   COVER
   ============================================================ */
#cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #0b0905;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
#cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 680px 560px at 50% 50%, rgba(212,168,83,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Scattered cover photos */
.cover-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cover-photo {
  position: absolute;
  background: var(--paper);
  padding: 9px 9px 44px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.7);
  opacity: 0;
  animation: coverIn 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}
.cover-photo img { width: 100%; object-fit: cover; display: block; }

@keyframes coverIn {
  from { opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--r, 0deg)); }
}

.cp-1 { --r: -9deg;  left: 3%;  top: 7%;    width: clamp(140px, 21vw, 290px); animation-delay: 0.35s; }
.cp-2 { --r:  7deg;  right: 3%; top: 11%;   width: clamp(130px, 19vw, 270px); animation-delay: 0.55s; }
.cp-3 { --r: -4deg;  right: 7%; bottom: 9%; width: clamp(110px, 16vw, 230px); animation-delay: 0.75s; }
.cp-1 img { aspect-ratio: 3/4; }
.cp-2 img { aspect-ratio: 4/5; }
.cp-3 img { aspect-ratio: 1/1; }

/* Cover content */
.cover-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cover-eyebrow {
  font-family: 'Syne Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
  margin-bottom: 20px;
}
.cover-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(4.2rem, 13vw, 9.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--cream);
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
  margin-bottom: 22px;
}
.cover-title em { color: var(--gold); font-style: italic; }
.cover-sub {
  font-family: 'Caveat', cursive;
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  color: rgba(237,230,214,0.38);
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
  margin-bottom: 44px;
  max-width: 400px;
}
.cover-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  border: 1px solid rgba(212,168,83,0.35);
  border-radius: 60px;
  color: var(--cream);
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.9s forwards;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  background: transparent;
}
.cover-enter:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,168,83,0.07);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PREFACE
   ============================================================ */
#preface {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 32px;
  background: #0e0c08;
  position: relative;
}
.preface-inner { max-width: 620px; }
.preface-label {
  font-family: 'Syne Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.38em;
  color: var(--gold);
  opacity: 0.45;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.preface-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.9;
  color: rgba(237,230,214,0.82);
}
.preface-badge {
  font-family: 'Syne Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px dashed rgba(212,168,83,0.3);
  display: inline-block;
  padding: 7px 18px;
  border-radius: 30px;
  margin-top: 40px;
  opacity: 0.6;
}
.preface-scroll {
  font-family: 'Syne Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  opacity: 0.3;
  margin-top: 70px;
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:0.2} 50%{opacity:0.55} }

/* ============================================================
   CHAPTER BASE
   ============================================================ */
#timeline { background: #0b0905; }

.chapter {
  position: relative;
  border-top: 1px solid rgba(212,168,83,0.07);
  overflow: hidden; /* prevent rotated photos from causing horizontal scroll */
}
.ch-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 90px 28px 70px;
  position: relative;
  z-index: 1;
}
.ch-label {
  font-family: 'Syne Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.45;
  margin-bottom: 14px;
}
.ch-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 52px;
  max-width: 680px;
}

/* Per-chapter accent colours */
#ch-her     .ch-label { color: #e8b090; opacity: 0.65; }
#ch-her     .ch-title { color: #edd8ca; }
#ch-ani     .ch-label { color: #88c8a0; opacity: 0.65; }
#ch-ani     .ch-title { color: #c8e8d0; }
#ch-together .ch-label { color: var(--gold); opacity: 0.55; }
#ch-arizona .ch-label { color: #e8985a; opacity: 0.65; }
#ch-arizona .ch-title { color: #f4d8b0; }
#ch-sedona  .ch-label { color: #d85a28; opacity: 0.65; }
#ch-sedona  .ch-title { color: #f4c8a0; }
#ch-silly   .ch-label { color: #ffee00; opacity: 0.7; }
#ch-silly   .ch-title {
  color: #ffee00;
  text-shadow: 3px 3px 0 #ff00cc, -2px -2px 0 #00ccff;
}
#ch-videos  .ch-label { color: #d42020; opacity: 0.65; }
#ch-videos  .ch-title { color: rgba(240,232,232,0.85); }
#ch-sleep   .ch-label { color: #c8b8ee; opacity: 0.65; }
#ch-sleep   .ch-title { color: #c8b8ee; }
#ch-accident .ch-label { color: #e8b8a0; opacity: 0.65; }
#ch-accident .ch-title { color: #f0d8c8; }
#ch-finale  .ch-label { color: var(--gold); opacity: 0.65; }

/* Per-chapter backgrounds */
#ch-ani     { background: #07090a; }
#ch-arizona { background: #100803; }
#ch-silly   { background: #080404; }
#ch-videos  { background: #080202; }
#ch-sleep   { background: linear-gradient(155deg, #06051a 0%, #0c0820 100%); }
#ch-accident { background: #0e0a08; }
#ch-finale  { background: #050408; overflow: hidden; }

/* ============================================================
   PHOTO GRID  — scattered masonry
   ============================================================ */
.ch-photos {
  columns: 2 190px;
  column-gap: 22px;
}
@media (min-width: 680px) {
  .ch-photos { columns: 3 190px; column-gap: 26px; }
}

/* ============================================================
   PHOTO ITEM  — polaroid card
   ============================================================ */
.photo-item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 22px;
  background: var(--paper);
  padding: 8px 8px 46px;
  box-shadow: 0 8px 38px rgba(0,0,0,0.55);
  /* Rotation when NOT a drop-in, or after drop-in visible */
  transition: transform 0.42s ease, box-shadow 0.42s ease;
  position: relative;
  cursor: pointer;
}

/* Vary offsets so columns feel uneven */
.ch-photos .photo-item:nth-child(4n+1) { margin-left: 5%;  width: 90%; }
.ch-photos .photo-item:nth-child(4n+2) { margin-left: 0;   width: 100%; }
.ch-photos .photo-item:nth-child(4n+3) { margin-left: 8%;  width: 88%; }
.ch-photos .photo-item:nth-child(4n)   { margin-left: 2%;  width: 96%; }

/* Vary photo aspect ratios */
.ch-photos .photo-item:nth-child(5n+1) img { aspect-ratio: 3/4; }
.ch-photos .photo-item:nth-child(5n+2) img { aspect-ratio: 1/1; }
.ch-photos .photo-item:nth-child(5n+3) img { aspect-ratio: 4/3; }
.ch-photos .photo-item:nth-child(5n+4) img { aspect-ratio: 4/5; }
.ch-photos .photo-item:nth-child(5n)   img { aspect-ratio: 3/4; }

.photo-item img,
.photo-item video {
  width: 100%;
  display: block;
  object-fit: cover;
}
/* Video inside a polaroid card — match the 4/3 photo ratio */
.photo-item--vid video {
  aspect-ratio: 4/3;
}
/* Clickable video polaroid — plays in place */
.photo-item--vid[data-expand-video] { cursor: pointer; }

/* Sleep section — photos left, video right */
.sleep-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.sleep-layout .ch-photos {
  flex: 1;
  min-width: 0;
}
.sleep-video {
  flex: 0 0 38%;
  display: flex;
  align-items: stretch;
}
.sleep-video .photo-item--vid {
  width: 100%;
  margin: 0;
}
.sleep-video .photo-item--vid video {
  aspect-ratio: auto;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .sleep-layout {
    flex-direction: column;
    gap: 0;
  }
  .sleep-video {
    flex: none;
    width: 100%;
    margin-top: 20px;
  }
}
.photo-item:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.035) !important;
  box-shadow: 0 22px 72px rgba(0,0,0,0.7);
  z-index: 20;
  position: relative;
}

/* Non-drop-in items get rotation from CSS var */
.photo-item:not(.drop-in) {
  transform: rotate(var(--rot, 0deg));
}

.pi-cap {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: #5a4030;
  text-align: center;
  padding: 10px 8px 0;
  line-height: 1.35;
  font-weight: 700;
}

/* Large solo photo (accident, finale) */
.photo-item--solo {
  display: block;
  max-width: 420px;
  width: 90%;
  margin: 0 auto 40px;
  break-inside: unset;
}
.photo-item--solo img { aspect-ratio: auto; max-height: 520px; object-fit: cover; }

/* ============================================================
   DIVIDER / SECTION LABEL
   ============================================================ */
.ch-divider {
  font-family: 'Syne Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  opacity: 0.3;
  margin: 56px 0 28px;
  padding-top: 36px;
  border-top: 1px solid rgba(212,168,83,0.1);
}

/* ============================================================
   VIDEOS
   ============================================================ */
.ch-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
}
.video-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 14px;
}
.video-item video { width: 100%; display: block; }
.video-item .pi-cap {
  color: rgba(237,230,214,0.65);
  padding: 10px 14px 0;
  text-align: left;
  font-size: 1.05rem;
}
.vi-num {
  font-family: 'Syne Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #d42020;
  opacity: 0.5;
  padding: 14px 14px 8px;
}

/* ============================================================
   SEDONA TIMELINE
   ============================================================ */
.ch-timeline {
  max-width: 680px;
  padding-bottom: 20px;
}
.tl-entry {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 18px;
  margin-bottom: 64px;
  position: relative;
}
.tl-entry::before {
  content: '';
  position: absolute;
  left: 13px; top: 24px; bottom: -64px;
  border-left: 2px dashed rgba(216,90,40,0.22);
}
.tl-entry:last-child::before { display: none; }
.tl-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #c1440e;
  border: 3px solid #0b0905;
  box-shadow: 0 0 0 2px rgba(193,68,14,0.3);
  margin-top: 5px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.tl-stop {
  font-family: 'Syne Mono', monospace;
  font-size: 0.61rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d85a28;
  opacity: 0.65;
  margin-bottom: 8px;
}
.tl-note {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(237,230,214,0.6);
  margin-bottom: 20px;
}
/* Mini photo grid inside each timeline stop */
.tl-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tl-photos .photo-item {
  margin-bottom: 0;
  break-inside: unset;
  display: block;
  width: 100%;
}
.tl-photos .photo-item img { aspect-ratio: 4/3; }
@media (max-width: 600px) {
  .tl-photos { gap: 10px; }
}

/* ============================================================
   ACCIDENT — embedded inside Together
   ============================================================ */
.together-aside {
  max-width: 460px;
  margin: 60px auto 0;
  text-align: center;
}
.accident-note {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 2;
  color: rgba(237,230,214,0.6);
  margin-top: 8px;
}

/* ============================================================
   SLEEPING (stars)
   ============================================================ */
.stars-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ============================================================
   FINALE
   ============================================================ */
.particles-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.finale-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.finale-headline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1.4;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 40px;
  opacity: 0.88;
  text-wrap: balance;
}
.finale-msg {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  line-height: 2;
  color: rgba(237,230,214,0.72);
  margin-bottom: 36px;
}
.finale-msg p + p { margin-top: 8px; }
.finale-stamp {
  font-family: 'Syne Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px dashed rgba(212,168,83,0.32);
  display: inline-block;
  padding: 8px 24px;
  border-radius: 30px;
  margin-bottom: 32px;
}
.finale-restart {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: rgba(237,230,214,0.28);
  border: 1px solid rgba(237,230,214,0.08);
  padding: 10px 28px;
  border-radius: 30px;
  transition: color 0.3s, border-color 0.3s;
}
.finale-restart:hover { color: var(--gold); border-color: rgba(212,168,83,0.35); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,3,2,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox-content {
  max-width: 90vw; max-height: 88vh; object-fit: contain;
  border-radius: 3px;
  transform: scale(0.94); transition: transform 0.3s ease;
}
.lightbox.active .lightbox-content { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55);
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 2001;
}
.lightbox-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  font-size: 26px; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 2001;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.14); color: #fff; }
.lightbox-arrow.prev { left: 14px; }
.lightbox-arrow.next { right: 14px; }
.lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: 'Syne Mono', monospace; font-size: 0.7rem;
  color: rgba(255,255,255,0.28);
}

/* ============================================================
   TOUCH DEVICES — disable stuck hover states
   ============================================================ */
@media (hover: none) {
  .photo-item:hover {
    transform: rotate(var(--rot, 0deg)) !important;
    box-shadow: 0 8px 38px rgba(0,0,0,0.55) !important;
    z-index: auto !important;
  }
  .photo-item:not(.drop-in):hover {
    transform: rotate(var(--rot, 0deg)) !important;
  }
}

/* ============================================================
   RESPONSIVE — Tablet  ≤ 820px
   ============================================================ */
@media (max-width: 820px) {
  .cp-1 { width: clamp(120px, 20vw, 210px); }
  .cp-2 { width: clamp(110px, 18vw, 190px); }
  .cp-3 { width: clamp(100px, 15vw, 160px); }
  .ch-photos { columns: 2 160px; column-gap: 18px; }
  .ch-videos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .photo-item { padding: 7px 7px 40px; }
}

/* ============================================================
   RESPONSIVE — Mobile  ≤ 600px
   ============================================================ */
@media (max-width: 600px) {

  /* --- Cover: stack vertically, photos slide below title --- */
  #cover {
    flex-direction: column;
    align-items: stretch;
    min-height: 100svh; /* safe-area-aware on iOS */
    overflow: hidden;
  }
  .cover-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 52px 24px 20px;
  }
  /* Make cover photos flow below the title */
  .cover-photos {
    position: static;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 4px 18px 32px;
    flex-shrink: 0;
  }
  .cover-photo {
    position: static;
    width: calc(33.33% - 7px);
    opacity: 1;
    animation: none; /* let them appear immediately on mobile */
    flex-shrink: 0;
  }
  .cp-1 { transform: rotate(-7deg); }
  .cp-2 { transform: rotate(5deg); }
  .cp-3 { transform: rotate(-4deg); }

  .cover-title { font-size: clamp(2.6rem, 10vw, 3.8rem); margin-bottom: 14px; }
  .cover-sub   { font-size: 0.92rem; margin-bottom: 28px; max-width: 300px; }
  .cover-enter { padding: 14px 34px; font-size: 1.1rem; min-height: 50px; }

  /* --- Preface --- */
  #preface { padding: 72px 22px 64px; }
  .preface-text { font-size: 1.02rem; }
  .preface-scroll { margin-top: 48px; }

  /* --- Chapters --- */
  .chapter { overflow: visible; }   /* prevent clipping rotated photos on mobile */
  .ch-inner { padding: 60px 16px 48px; }
  .ch-title  { font-size: 1.8rem; margin-bottom: 34px; }

  /* --- Photo grid: reliable 2-col grid, no clipping --- */
  .ch-photos {
    columns: unset;            /* kill masonry columns — unreliable on mobile */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
  }
  .ch-photos .photo-item:nth-child(4n+1),
  .ch-photos .photo-item:nth-child(4n+2),
  .ch-photos .photo-item:nth-child(4n+3),
  .ch-photos .photo-item:nth-child(4n)   { margin-left: 0; width: 100%; }
  .ch-photos .photo-item {
    display: block;            /* override inline-block from columns layout */
    break-inside: unset;
    margin-bottom: 0;          /* gap handles spacing now */
  }

  /* Uniform aspect ratio on mobile so grid rows stay even */
  .ch-photos .photo-item:nth-child(5n+1) img,
  .ch-photos .photo-item:nth-child(5n+2) img,
  .ch-photos .photo-item:nth-child(5n+3) img,
  .ch-photos .photo-item:nth-child(5n+4) img,
  .ch-photos .photo-item:nth-child(5n)   img { aspect-ratio: 3/4; }

  /* --- Photo card --- */
  .photo-item { padding: 5px 5px 34px; }
  .pi-cap { font-size: 1rem; padding: 6px 4px 0; }

  /* --- Videos: single column on mobile --- */
  .ch-videos { grid-template-columns: 1fr; gap: 16px; }
  .ch-divider { margin: 38px 0 18px; }

  /* --- Lightbox controls: bigger tap targets --- */
  .lightbox-arrow { width: 44px; height: 44px; font-size: 22px; }
  .lightbox-arrow.prev { left: 3px; }
  .lightbox-arrow.next { right: 3px; }
  .lightbox-content { max-height: 78vh; }
  .lightbox-close { width: 44px; height: 44px; top: 10px; right: 10px; }

  /* --- Sedona timeline --- */
  .tl-entry { grid-template-columns: 26px 1fr; gap: 0 12px; }
  .tl-note { font-size: 0.96rem; }

  /* --- Accident --- */
  .photo-item--solo { max-width: 100%; }
  .accident-note { font-size: 1rem; line-height: 1.9; }

  /* --- Finale --- */
  .finale-stamp { font-size: 0.52rem; letter-spacing: 0.14em; padding: 7px 14px; }
  .finale-msg   { font-size: 0.98rem; }
}

/* ============================================================
   RESPONSIVE — Very small  ≤ 375px
   ============================================================ */
@media (max-width: 375px) {
  .cover-title { font-size: 2.5rem; }
  .ch-inner { padding: 52px 14px 42px; }
  .ch-photos { gap: 10px 8px; }
  .photo-item { padding: 4px 4px 30px; }
  .ch-title { font-size: 1.6rem; }
}