/* Mobile first: single-column reading and a vertical timeline. */
@media (max-width: 479px) {
  .hero h1 { font-size: clamp(2.7rem, 12.8vw, 3.8rem); }
  .masthead { align-items: flex-start; }
  .masthead-note { max-width: 7rem; text-align: right; font-size: .59rem; }
  .hero-content { padding-block: 2.7rem 3rem; }
  .hero-content .eyebrow { font-size: .56rem; letter-spacing: .17em; }
  .hero-bottom { font-size: .58rem; letter-spacing: .08em; }
  .hero-bottom > span:last-child { display: none; }
  .scroll-cue { max-width: 11rem; text-align: right; line-height: 1.5; }
  .scroll-cue i { flex-shrink: 0; }
  .music-control { padding: .4rem; }
  .music-control-copy { display: none; }
  .letter-sheet { padding-right: 3rem; }
}
@media (min-width: 480px) and (max-width: 599px) {
  .letter-sheet { padding-right: 8.25rem; }
}
@media (min-width: 600px) and (max-width: 843px) {
  .letter-sheet { padding-right: 6rem; }
}
@media (min-width: 600px) {
  .album { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .album .photo-main { grid-column: 1; grid-row: 1; width: 100%; }
  .landscape { aspect-ratio: 16 / 10; }
  .album .photo-portrait { width: 100%; grid-column: 2; grid-row: 1; margin-top: 4rem; }
  .album .photo-detail { grid-column: 1 / -1; grid-row: 2; width: 36%; justify-self: center; }
  .photo-small { grid-column: 2; width: 95%; }
  .reunion-art { max-width: 440px; margin-inline: auto; }
  .letter-panel-inner { padding-inline: 1.5rem; }
}
@media (min-width: 768px) {
  .beginning-photo { margin-top: 4rem; }
  .reunion-memories { grid-template-columns: .7fr 1.25fr .7fr; gap: 2.5rem; align-items: center; max-width: 900px; }
  .reunion-wide { grid-column: 2; grid-row: 1; width: 100%; }
  .reunion-last { margin-top: 3rem; }
  .beginnings { padding-block: 7rem 8rem; }
  .timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4.5rem; }
  .timeline li { padding: 0 1.8rem 0 0; border-left: none; }
  .timeline li:last-child { padding-right: 0; }
  .timeline li::before { top: calc(4.18rem + 2rem + 4px); bottom: auto; left: 9px; right: 0; width: auto; height: 1px; transform-origin: left; z-index: 1; }
  .timeline-year { margin-bottom: 2rem; }
  .timeline-point { position: relative; inset: auto; margin-bottom: 2rem; }
  .timeline li::after { content: ""; height: 1px; background: #c5916859; position: absolute; top: calc(4.18rem + 2rem + 4px); left: 9px; right: 0; }
  .timeline li:last-child::after { background: linear-gradient(90deg, #c5916859, transparent); }
  .timeline h3 { font-size: 1.55rem; }
  .album-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .album-heading > p { max-width: 18rem; padding-bottom: .35rem; }
  .learning-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; }
  .learning-copy { margin: 0; }
  .interlude { padding-block: 6rem 4rem; }
  .reunion-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .reunion-art { width: 100%; }
  .reunion-copy { margin-top: 0; }
  .letter { padding-top: 5rem; }
  .letter-reserved { margin-top: 7rem; }
}
@media (min-width: 1024px) {
  .masthead { padding-block: 2rem; }
  .hero-content { padding-block: 3rem; }
  .hero-intro { font-size: 1rem; }
  .hero-bottom { font-size: .76rem; }
  .memories { padding-top: 7rem; }
  .album { grid-template-columns: 1fr 1fr; gap: 2.5rem 4rem; max-width: 850px; margin-inline: auto; }
  .album .photo-main { width: 78%; transform: rotate(-2deg); }
  .album .photo-portrait { width: 92%; margin-top: 6rem; transform: rotate(3deg); }
  .album .photo-detail { width: 33%; transform: rotate(-2deg); }
  .photo-small { grid-column: 3; grid-row: 2; width: 88%; margin-top: 3rem; transform: rotate(-3deg); }
  .photo-placeholder > span:not(.photo-mark) { font-size: 1.25rem; }
  .learning { padding-top: 7rem; }
  .learning-layout { gap: 7rem; }
  .reunion { padding-block: 3rem 7rem; }
  .reunion-layout { gap: 7rem; }
}
/* Short landscape screens retain natural scroll instead of clipping the cover. */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-content { padding-block: 2rem; }
  .hero { min-height: 100svh; }
}
@media print {
  body, .chapter { background: #fff; color: #26171d; }
  .hero { min-height: auto; }
  .start-link, .skip-link, .hero-orbit, .envelope-button, .letter-reserved figcaption, .letter-close, .music-control { display: none; }
  .photo-frame, .letter-reserved { break-inside: avoid; }
  .letter-panel[hidden] { display: grid; }
  .letter-panel { grid-template-rows: 1fr; margin-top: 2rem; opacity: 1; }
  .letter-sheet { box-shadow: none; transform: none; }
}