@media (min-width: 480px) {
  .scene-header { padding-inline: 28px; }
  .scene-footer { padding-inline: 24px; }
  .letter-button { padding-inline: 18px; }
  .letter-button span { display: inline; }
  .track-info { width: 118px; }
}
@media (min-width: 700px) {
  .scene-header { min-height: 85px; padding: 25px 35px 15px; }
  .garden { height: calc(100vh - 163px - var(--safe-top) - var(--safe-bottom)); height: calc(100dvh - 163px - var(--safe-top) - var(--safe-bottom)); min-height: 450px; }
  .scene-footer { padding: 15px 30px calc(18px + var(--safe-bottom)); }
  .scene-hint { display: block; }
  .letter-paper { padding: 42px 54px 35px; }
  .letter-paper .close-button { margin-right: -37px; }
  .photo-frame { padding: 7px 7px 9px; }
}
@media (min-width: 1100px) {
  .volume { display: block !important; width: 55px !important; margin-right: 12px !important; }
  .scene-header { padding-inline: 45px; }
  .scene-footer { padding-inline: 40px; }
  .photo-copy { padding: 36px; }
  .photo-surface { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .photo-surface .close-button { position: absolute; right: 0; top: 0; }
  .expanded-photo { max-height: 75dvh; }
}
@media (max-width: 359px) {
  .scene-header { padding-inline: 12px; gap: 8px; }
  .garden-title { gap: 5px; }
  .garden-title img { width: 19px; height: 19px; }
  .dedication { font-size: .55rem; letter-spacing: .05em; }
  .scene-footer { padding-inline: 10px; }
  .photo-caption { padding-top: 4px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .scene-header { min-height: 48px; padding: 9px 20px; }
  .garden { height: calc(100dvh - 118px - var(--safe-top) - var(--safe-bottom)); min-height: 190px; }
  .experience { padding-bottom: calc(70px + var(--safe-bottom)); }
  .scene-footer { padding-top: 5px; padding-bottom: calc(8px + var(--safe-bottom)); }
  .scene-hint { display: none; }
  .intro .eyebrow { margin-bottom: .5rem; }
  .enter-flower { width: 85px; height: 100px; margin-bottom: .6rem; }
  .enter-flower img { width: 70px; height: 100px; }
  .intro h1 { font-size: 1.7rem; }
  .intro-subtitle { margin-top: .7rem; }
  .intro-rule, .intro-footnote { display: none; }
  .heart p { font-size: .8rem; }
  .keepsake { display: none; }
  .letter-paper { padding-top: 22px; }
  .letter-flower { height: 55px; margin-bottom: 8px; }
  .photo-surface { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .photo-caption { display: none; }
  .photo--polaroid .photo-frame { padding-bottom: 12px; }
  .photo-surface .close-button { position: absolute; right: 0; top: 0; }
  .expanded-photo { max-height: 82dvh; }
}