/* The phone is the primary reading surface. Desktop keeps the woodland margins. */
@media (max-width: 600px) {
  html { scroll-padding-bottom: 100px; }
  body[data-state='open'] { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .letter-world { width: calc(100% - 24px); margin-top: 124px; }
  .letter-paws { top: -123px; width: 295px; }
  .paper-inner { padding: 40px 25px 30px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .16em; }
  .timezone { font-size: 11px; letter-spacing: .035em; margin-top: 5px; }
  .event-when { font-size: 17px; }
  .hero-location { margin-top: 15px; }
  .primary-actions { max-width: none; }
  .primary-actions .button { min-height: 50px; }
  .detail-section { scroll-margin-top: 24px; scroll-margin-bottom: 110px; }
  .scene-controls { padding-top: env(safe-area-inset-top, 0px); }
  .quiet-control { min-height: 46px; font-size: 12px; padding-inline: 12px; }
  .quiet-control svg { width: 16px; height: 16px; }
  body[data-state='open'] .scene-controls {
    position: fixed;
    inset: auto auto max(12px, env(safe-area-inset-bottom, 0px)) 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border: 1px solid #ddbf9366;
    border-radius: 34px;
    box-shadow: 0 6px 20px #1c101c4a;
    background: #2a1b22e6;
    backdrop-filter: blur(15px);
  }
  body[data-state='open'] .scene-controls .quiet-control { border-color: transparent; background: transparent; }
  body[data-state='open'] .scene-controls .quiet-control:hover { background: #f1d7b516; }
  .skip-intro { bottom: max(18px, env(safe-area-inset-bottom, 0px)); font-size: 12px; min-height: 48px; }
  .forest-footer { padding-bottom: 18px; }
}

@media (max-width: 374px) {
  .paper-inner { padding-inline: 23px; }
  .falling { font-size: 35px; }
  .with-baby { font-size: 30px; }
  .vivi { font-size: 104px; }
}