/* Layout fixes shared by the photo viewer and smaller screens. */
html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
.lightbox-stage { grid-template-columns: minmax(0, 1fr); }
.lightbox-footer { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 14px; }
.lightbox-caption { overflow-wrap: anywhere; line-height: 1.5; }
.lightbox-image-wrap, .lightbox-photo { max-height: 100%; }
.access-field button, .access-music { min-height: 44px; }
.access-music input { flex: 0 0 auto; }
.book-stage > *, .music-copy, .album-heading h3 { min-width: 0; }
.music-play { width: 44px; height: 44px; }
.letter, .photo-card figcaption { overflow-wrap: break-word; }

@media (max-width: 720px) {
  .loader { place-items: start center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
  .loader-inner { margin: auto 0; padding: 12px 0; }
  .loader-flower { width: 58px; }
  .access-form { gap: 12px; }
  .access-field input { min-height: 52px; }
  .access-form .access-music { text-align: left; line-height: 1.5; font-size: 13px; }
  .access-hint { font-size: 13px; }
  .topbar { padding-inline: 6%; }
  .brand { flex: 0 0 auto; }
  .top-date { min-width: 0; max-width: 145px; font-size: 10px; line-height: 1.5; text-align: right; }
  .menu-toggle { width: 44px; height: 44px; }
  .topnav a { display: flex; align-items: center; min-height: 46px; font-size: 12px; }
  .hero-content { width: 100%; min-height: 100svh; padding: clamp(300px, 44svh, 430px) 7% 96px; }
  .hero h1 { font-size: clamp(49px, 13.5vw, 78px); line-height: 1.02; }
  .hero .eyebrow { font-size: 10px; line-height: 1.7; margin-bottom: 18px; }
  .hero-description { max-width: 440px; font-size: 15px; line-height: 1.8; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 9px; }
  .hero-actions .button { min-height: 48px; max-width: 100%; padding: 12px 18px; font-size: 10px; line-height: 1.6; text-align: center; }
  .hero-actions .text-link, .hero-actions .share-button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 12px; }
  .hero-caption { right: 7%; left: 7%; max-width: none; bottom: 25px; font-size: 12px; line-height: 1.5; }
  .lily-art { bottom: 90px; width: 115px; opacity: .3; }
  .section { padding: 64px 6%; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: clamp(30px, 8.3vw, 43px); }
  .section-heading > p:last-child { font-size: 14px; }
  .music-section { padding: 64px 6%; }
  .music-label, .music-note, .music-status { font-size: 12px; line-height: 1.6; }
  .music-title { line-height: 1.3; white-space: normal; overflow: visible; overflow-wrap: break-word; }
  .music-card { align-items: start; }
  .music-controls { margin-top: 12px; }
  .countdown-subtitle { font-size: 13px; line-height: 1.6; }
  .countdown { width: 100%; max-width: 420px; gap: 0; justify-content: space-around; padding: 20px 6px; }
  .countdown-item { min-width: 0; flex: 1; }
  .countdown-label { font-size: 9px; letter-spacing: .07em; }
  .album-nav { gap: 8px; }
  .album-nav a { display: flex; align-items: center; min-height: 44px; font-size: 12px; }
  .lightbox { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .lightbox-stage { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
  .lightbox-footer { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
  .lightbox-arrow { width: 44px; height: 44px; }
  .lightbox-caption { font-size: 14px; }
  .letter-section { padding: 64px 6%; }
  .letter-button.envelope { height: 220px; margin-top: 35px; }
  .envelope-seal { top: 99px; }
  .envelope-to { font-size: 30px; }
  .letter { padding: 30px 23px; }
  .letter::before { line-height: 1.8; text-align: left; }
  .letter p { font-size: 17px; line-height: 1.9; }
  .letter .letter-signature { font-size: 30px !important; line-height: 1.5; }
  footer { font-size: 11px; line-height: 1.7; }
}

@media (max-width: 360px) {
  .top-date { max-width: 115px; font-size: 9px; }
  .music-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 12px; }
  .music-art { width: 44px; height: 44px; }
  .gallery { gap: 9px; }
  .photo-card figcaption { padding-inline: 2px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .loader-inner { padding: 6px 0; }
  .loader-flower { display: none; }
  .hero-content { min-height: 600px; }
  .lightbox-stage { padding-block: 5px; }
  .lightbox-caption { font-size: 12px; }
}