/* Phones are the primary invitation surface. Keep the whole journey available
   to touch, allow text zoom, and leave useful space around every control. */
html {scroll-padding-block: 24px; -webkit-text-size-adjust: 100%;}
body {padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);}
input,textarea,select {font-size: max(16px, 1rem);}
button {touch-action: manipulation;}
@media (pointer: coarse) {
  button,.date-choices span {min-height: 44px;}
  .paper-link,.text-link,.sample-lines button {padding-block: 10px;}
  .motion-toggle {min-width: 104px;}
  .register-close {min-width: 88px;}
}
@media (max-width: 700px) {
  body {padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);}
  .site-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
    padding: max(16px, env(safe-area-inset-top)) 16px 12px;
    align-items: center;
  }
  .site-header .wordmark {grid-column: 1; grid-row: 1; justify-self: start; font-size: 1.08rem;}
  .site-header nav {display: contents;}
  .site-header nav>button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 2px;
    font-size: clamp(.9rem, 3.6vw, 1.05rem);
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
  }
  .site-header nav>button:nth-child(1) {grid-row: 2; grid-column: 1;}
  .site-header nav>button:nth-child(2) {grid-row: 2; grid-column: 2;}
  .site-header nav>button:nth-child(3) {display: block; grid-row: 2; grid-column: 3;}
  .site-header nav #scene-motion {grid-row: 1; grid-column: 2;}
  .site-header nav #sound-toggle {grid-row: 1; grid-column: 3; justify-content: center; gap: 5px;}
  .sound-bars {width: 12px; flex-shrink: 0;}
  .offer-ribbon {padding-inline: 16px;}
  .offer-ribbon button {width: 100%; line-height: 1.5; min-height: 44px;}
  .view {padding-left: 18px; padding-right: 18px;}
  .view h1 {overflow-wrap: break-word;}
  .intro,.folio-heading .intro {font-size: 1.18rem; line-height: 1.5;}
  .invitation-view {padding-top: 24px;}
  .invitation-view h1 {font-size: clamp(3.05rem, 11vw, 4.7rem);}
  .envelope-button {width: min(92vw, 470px);}
  .opening-skip {max-width: 100%; line-height: 1.5; padding-inline: 10px;}
  .primary-button,.outline-button,.ink-button {
    max-width: 100%;
    min-height: 48px;
    gap: 12px;
    padding: 13px 14px;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .text-link,.back-link,.paper-link,.sample-lines button {
    min-height: 44px;
    font-size: 1rem;
    line-height: 1.45;
    padding-block: 10px;
  }
  .ink-button span {margin-left: 8px;}
  .letter-paper .ink-button,.chapter-actions .ink-button,.application-paper .ink-button {font-size: 1rem;}
  .chapter-index {gap: 8px;}
  .chapter-index>button[data-chapter] {min-height: 78px; font-size: 1rem;}
  .chapter-index small {font-size: .875rem;}
  .chapter-panel h2 {font-size: 2.25rem;}
  .paper-meta {font-size: .875rem; gap: 8px 14px;}
  .paper-meta span:last-child {max-width: 100%;}
  .riddle-answer-row input,textarea#welcome-line {font-size: 1.125rem; width: 100%;}
  .riddle-answer-row input {min-height: 48px;}
  .answer-label,.paper-instruction,.note-privacy {font-size: 1rem; line-height: 1.55;}
  .date-choices {display: grid; grid-template-columns: 1fr; gap: 9px;}
  .date-choices span {font-size: 1.1rem; min-height: 48px; padding: 11px;}
  .fragment-tray button {font-size: 1rem; min-height: 48px; padding: 12px; line-height: 1.5;}
  .restored-lines li {font-size: 1.05rem; line-height: 1.5;}
  .chapter-actions {gap: 10px 20px;}
  .sample-lines {gap: 9px 20px;}
  .sample-lines button {text-align: left;}
  .note-under {font-size: .875rem; gap: 12px; flex-wrap: wrap;}
  .note-under span:last-child {white-space: nowrap; margin-left: auto;}
  .postmark-evidence {padding-inline: 0;}
  .evidence-arrival strong,.evidence-letter strong {font-size: 1.1rem; line-height: 1.45;}
  .day-tabs button {min-height: 86px;}
  .programme-margin .paper-link {font-size: 1rem;}
  .application-offer dl>div {grid-template-columns: 1fr;}
  .application-offer dt,.application-offer dd {font-size: 1rem;}
  .room-game {margin-inline: -18px; padding-inline: 22px;}
  .room-game-meta {align-items: flex-start; flex-wrap: wrap;}
  .room-game-meta span:last-child {font-size: .875rem;}
  .room-actions button>span:nth-child(2) {font-size: 1.6rem;}
  .room-actions small {font-size: 1.05rem;}
  .room-game>.primary-button {font-size: 1rem;}
  .room-response {font-size: 2rem;}
  .keepsake-cinema {margin-inline: -18px;}
  .keepsake-film-caption .primary-button {font-size: 1rem;}
  .motion-toggle {font-size: .875rem; min-height: 44px;}
  .register-slot,.register-slot:nth-child(n+7) {
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 4px 10px;
    min-height: 80px;
  }
  .register-slot>span:first-child {grid-row: 1 / 3;}
  .register-slot .register-hidden-name {grid-column: 2; font-size: 1.15rem; line-height: 1.3;}
  .register-slot small {grid-column: 2; font-size: .875rem;}
  .register-book-heading h2 {font-size: 1.6rem;}
  .register-book-top {font-size: .875rem;}
  .register-aside .register-caption {font-size: .875rem;}
  .register-dialog {max-height: 94dvh; overscroll-behavior: contain;}
  .register-close {position: sticky; top: 0; z-index: 5; padding: 8px 15px; background: #160b10f2;}
  .opening-cinema {height: 100dvh;}
  .opening-whisper {top: max(6vh, env(safe-area-inset-top));}
  .opening-cinema button {bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); min-height: 48px;}
  .story-transition button {bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px)); min-height: 48px;}
  .echo-title {flex-wrap: wrap; gap: 10px;}
  .echo-panel>.primary-button {font-size: 1rem;}
  .echo-panel>.text-link {font-size: 1rem;}
  .site-footer {padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); line-height: 1.6;}
}
@media (max-width: 360px) {
  .site-header {gap: 4px; padding-inline: 12px;}
  .site-header nav>button {font-size: .9rem;}
  .sound-bars {display: none;}
  .handwritten {font-size: 1.5rem;}
  .register-book-heading {gap: 8px;}
  .register-monogram {font-size: 3rem;}
}
@media (pointer: coarse) and (max-height: 500px) {
  .opening-whisper {font-size: 1.7rem; top: 12px;}
  .opening-cinema button {bottom: max(12px, env(safe-area-inset-bottom));}
}