/* Content-led sizing for narrow phones, tablets, landscape, and wide displays. */
:root {
  --gutter: clamp(1.125rem, 5vw, 4.5rem);
  --section-space: clamp(3.75rem, 7.5vw, 7rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body { overflow-wrap: break-word; }
main, section, article, figure, .story-copy, .story-photo,
.birthday-copy, .birthday-image, .gallery-heading > *, .commitment {
  min-width: 0;
}

.section-pad {
  padding-block: var(--section-space);
  padding-inline: max(var(--gutter), calc((100vw - 80rem) / 2));
}

.opening {
  width: 100%;
  max-width: 62.5rem;
  padding-inline: var(--gutter);
}

.story {
  width: 100%;
  max-width: 90rem;
  padding-inline: var(--gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6.5rem);
}

.story-copy > p, .birthday-copy p, .commitment p,
.new-chapter p, .invitation p, .gallery-heading > p {
  font-size: clamp(.875rem, .8rem + .15vw, 1rem);
}

.section-heading > p { font-size: .875rem; }
.letter-paper { width: 100%; }
.letter-paper > p { font-size: clamp(.9375rem, .85rem + .18vw, 1rem); }
.letter-paper blockquote { overflow-wrap: anywhere; }
.timeline summary { grid-template-columns: 5.5rem minmax(0, 1fr) 1rem; min-height: 2.75rem; }
.timeline details p { font-size: .8125rem; }
.birthday { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.birthday-copy { padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem); }
.image-caption { max-width: calc(100% - 2rem); white-space: normal; text-align: center; line-height: 1.3; }
.gallery-heading { flex-wrap: wrap; }
.memory-caption { font-size: clamp(1.125rem, 1rem + .3vw, 1.5rem); }
.memory-caption > span, .memory-caption > i { flex-shrink: 0; }
.memory-card:nth-child(n) img { object-position: center; transform: none; }
.commitment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero h1 { font-size: clamp(3rem, 7.2vw, 6.5rem); }
.hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; padding-top: 5.5rem; }
.hero-content { width: 100%; max-width: 85rem; padding: clamp(3rem, 6vh, 6rem) var(--gutter) 7rem; }
.hero-subtitle { font-size: clamp(.875rem, .8rem + .15vw, 1rem); }
.hero-bottom { gap: 1.5rem; }
.hero-bottom > span { max-width: 33%; }
.site-header { padding-inline: var(--gutter); }
.music-toggle, .menu-toggle, .motion-toggle { min-height: 2.75rem; }
.motion-toggle { bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); left: max(.75rem, env(safe-area-inset-left, 0px)); }
.back-top { min-height: 2.75rem; align-items: center; }
.button { max-width: 100%; text-align: center; }

/* A grid reserves room for navigation, image, captions, and close controls. */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top, 0px))
           max(1rem, env(safe-area-inset-right, 0px))
           max(1rem, env(safe-area-inset-bottom, 0px))
           max(1rem, env(safe-area-inset-left, 0px));
}

.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .75rem; }
.lightbox-toolbar { gap: 1rem; }
.lightbox-stage { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: clamp(.5rem, 2vw, 2rem); }
.lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: .5rem; height: 100%; min-height: 0; max-height: 100%; margin: 0; }
.lightbox figure img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.lightbox figcaption { margin: 0; font-size: clamp(1.125rem, 2.2vw, 1.75rem); }
.lightbox figure p { margin: 0; }
.lightbox figure p[hidden] { display: none; }
.lightbox-hint { margin: 0; }
.lightbox-stage > button { position: static; align-self: center; }

@media (max-width: 900px) {
  .site-header { height: 4.5rem; gap: 1rem; }
  .menu-toggle { position: static; transform: none; margin-left: auto; padding: .5rem .75rem; }
  .site-header nav { top: 4.5rem; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
  .site-header nav a { min-height: 2.75rem; }
  .hero { padding-top: 4.5rem; }
  .hero-content { max-width: 46rem; padding-top: clamp(2.5rem, 7vh, 5rem); padding-bottom: 7rem; }
  .hero h1 { font-size: clamp(3rem, 8.5vw, 4.5rem); }
  .hero-dedication { margin-top: 1.75rem; }
  .hero-eyebrow { letter-spacing: .16em; }
  .hero-eyebrow > span { flex-shrink: 0; }
  .hero-bottom { bottom: 1.75rem; }
  .story { grid-template-columns: 1fr; }
  .story-photo { width: min(100% - 1rem, 26rem); }
  .story h2, .birthday h2, .section-heading h2, .gallery-heading h2,
  .new-chapter h2 { font-size: clamp(2.5rem, 6vw, 3.75rem); }
  .birthday { grid-template-columns: 1fr; }
  .birthday-copy { padding-inline: var(--gutter); }
  .birthday-image { min-height: 0; height: clamp(22rem, 70vw, 38rem); }
  .birthday-image img { object-position: center; }
  .letter-paper { padding: clamp(1.25rem, 5vw, 3rem); padding-bottom: 3rem; }
  .letter-paper blockquote { font-size: clamp(1.5rem, 4.5vw, 2rem); }
  .wax-seal { right: 1.5rem; bottom: 2rem; }
  .gallery-heading { display: block; }
  .gallery-heading > p { max-width: 35rem; }
  .memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commitment-grid { grid-template-columns: 1fr; }
  .commitment { padding: 2rem 1rem; }
  .commitment p { max-width: 34rem; }
  .invitation h2 { font-size: clamp(2.125rem, 5.6vw, 3.25rem); }
  footer { padding-inline: var(--gutter); padding-bottom: max(5rem, env(safe-area-inset-bottom, 0px)); }
  .lightbox-stage { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 2.75rem; gap: .75rem; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox-prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lightbox-next { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (max-width: 480px) {
  .memory-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .memory-image img { aspect-ratio: 4 / 5; object-position: center; }
  .memory-card:nth-child(n) img { transform: none; object-position: center; }
  .memory-caption { font-size: 1.375rem; }
  .memory-caption i { display: inline; }
  .timeline summary { grid-template-columns: 4.5rem minmax(0, 1fr) .75rem; gap: .5rem; }
  .timeline summary > span:not(.timeline-date) { font-size: 1.25rem; }
  .photo-handwriting { font-size: 1.375rem; }
  .letter-paper blockquote br, .invitation h2 br { display: none; }
}

@media (max-width: 359px) {
  .site-header { gap: .375rem; }
  .monogram { font-size: 1.5rem; }
  .menu-toggle { padding-inline: .5rem; }
  .music-toggle { padding-inline: .625rem; }
  .hero-eyebrow { font-size: .4375rem; gap: .5rem; letter-spacing: .12em; }
  .hero-eyebrow > span { width: .75rem; }
  .hero h1 { font-size: clamp(2.375rem, 12vw, 2.75rem); }
  .hero h1 br { display: none; }
  .letter-topline { gap: .75rem; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .hero-content { padding-top: 2rem; padding-bottom: 5rem; }
  .hero-dedication { margin-top: 1rem; }
  .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
  .hero h1 br, .mobile-break { display: none; }
  .hero h1 em { display: inline-block; }
  .hero-signature { margin-top: 1rem; }
  .lightbox { padding-block: .5rem; }
  .lightbox[open] { gap: .5rem; }
  .lightbox-stage { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; grid-template-rows: minmax(0, 1fr); }
  .lightbox figure { grid-column: 2; grid-row: 1; gap: .25rem; }
  .lightbox-prev { grid-column: 1; grid-row: 1; }
  .lightbox-next { grid-column: 3; grid-row: 1; }
  .lightbox figcaption { font-size: 1.125rem; }
  .lightbox-hint { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .expand { opacity: 1; transform: none; }
  .memory-card:hover img, .memory-card:nth-child(n):hover img { transform: none; }
}

@media print {
  .hero { min-height: 0; padding-top: 0; }
  .hero-content { padding: 1rem; }
  .section-pad { padding: 2rem 1rem; }
  .memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}