/* The room keeps its geometry while mobile browser chrome moves around it. */
@media(max-width:650px),(hover:none) and (pointer:coarse){
  .world{height:100svh;bottom:auto;overflow:visible}
  .scene-perspective{overflow:hidden}
  .room-atmosphere{bottom:calc(-5% - 100lvh + 100svh)}
  .travelling-ink{height:100svh;bottom:auto}
  body[data-mode="experience"] .arrival{height:100svh;min-height:100svh;touch-action:pan-y pinch-zoom}
  .arrival a,.arrival button{touch-action:pan-y pinch-zoom}
}

/* A portrait reading surface, with quiet space for the visitor's hands. */
@media(max-width:650px){
  :root{--mobile-gutter:clamp(22px,6.2vw,32px)}
  .masthead{height:calc(82px + env(safe-area-inset-top,0px));padding:calc(15px + env(safe-area-inset-top,0px)) calc(22px + env(safe-area-inset-right,0px)) 14px calc(22px + env(safe-area-inset-left,0px));align-items:flex-start}
  .small-name{font-size:31px;min-height:52px}
  .masthead nav{align-self:center}
  body[data-mode="experience"] .arrival-action{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  body[data-mode="experience"] .enter-link{font-size:22px;gap:12px;min-height:84px;padding:12px 18px}
  .reflection-switch{left:calc(13px + env(safe-area-inset-left,0px));bottom:calc(32px + env(safe-area-inset-bottom,0px));width:48px;height:48px;opacity:.65}
  .story-frame,.beat-host .story-frame{min-height:100svh;padding:calc(78px + env(safe-area-inset-top,0px)) calc(var(--mobile-gutter) + env(safe-area-inset-right,0px)) calc(72px + env(safe-area-inset-bottom,0px)) calc(var(--mobile-gutter) + env(safe-area-inset-left,0px))}
  .story-copy,.beat-welcome .story-copy,.beat-host .story-copy{width:430px}
  .beat-welcome .story-leading{font-size:clamp(26px,7.2vw,31px);line-height:1.31;margin-bottom:30px}
  .beat-welcome p,.beat-welcome p:last-child,.beat-host p{font-size:clamp(18px,4.85vw,20px);line-height:1.53}
  .beat-welcome p+p,.beat-host p+p{margin-top:26px}
  .beat-host h2{font-size:clamp(82px,24vw,110px);margin-bottom:29px;line-height:.92}
  .room-invitation{padding:24px 12px calc(36px + env(safe-area-inset-bottom,0px));min-height:0}
  .room-note{padding:25px clamp(22px,6vw,30px) 23px;margin:0 auto;max-width:460px}
  .note-top{font-size:12px;padding-bottom:22px;gap:14px}
  .invitation-layout{padding:32px 0 26px}
  .room-invitation h2{font-size:clamp(82px,24vw,112px);line-height:.87;margin:0 0 28px}
  .invitation-address>p{font-size:19px;line-height:1.5}
  .invitation-address>p+p{font-size:17px;line-height:1.5;margin:17px 0 36px}
  .evening-facts>div{grid-template-columns:68px minmax(0,1fr);gap:14px;padding-bottom:21px;margin-bottom:21px}
  .evening-facts dt{font-size:12px}.evening-facts dd{font-size:15px;line-height:1.55}
  .room-note .text-action{font-size:21px;min-height:60px;gap:18px;margin-top:28px}
  .note-postscript{font-size:12px;line-height:1.55}
  .invitation-colophon{padding-top:14px}
  .invitation-colophon .collaboration-credit{line-height:1.8}
  .invitation-colophon a,.invitation-colophon .quiet{min-height:44px;align-items:center}
  .invitation-colophon a{display:inline-flex;padding:5px 0}
  .invitation-colophon .quiet{margin-top:6px}
  body[data-mode="experience"] .site-footer{margin:0 calc(22px + env(safe-area-inset-right,0px)) 0 calc(22px + env(safe-area-inset-left,0px));padding:0 0 calc(22px + env(safe-area-inset-bottom,0px));gap:24px;flex-wrap:wrap}
  body[data-mode="experience"] .site-footer .quiet{min-height:44px}
  .writing{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .paper{padding:24px calc(var(--mobile-gutter) + env(safe-area-inset-right,0px)) calc(94px + env(safe-area-inset-bottom,0px)) calc(var(--mobile-gutter) + env(safe-area-inset-left,0px))}
  .paper-top>.quiet{min-height:44px}.paper h2{font-size:clamp(32px,8.7vw,39px)}
  input,textarea{font-size:17px;scroll-margin-block:28px}
  .form-actions>.quiet,.choose-answer{min-height:44px}
  body[data-mode="writing"] .site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
  .info-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;padding:18px 24px 28px}
  .info-dialog[open]{margin:auto}.dialog-top{position:sticky;top:-18px;background:var(--paper);z-index:1;padding-block:5px;margin-bottom:22px}
  .hosts-dialog .host-contact .text-action{font-size:18px}
  .completion-contact{margin:46px 0 20px;max-width:100%}
  .completion{padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .letter-view{padding-top:calc(110px + env(safe-area-inset-top,0px))}
  .reflection{--thickness:3px!important}
  .pane-front,.pane-back{box-shadow:none}
  .pane-front:after,.pane-back:after{box-shadow:inset 1px 0 #dedfc021,inset -1px 0 #05090666}
}

/* Turning a phone sideways keeps a readable page and a clear way back. */
@media(hover:none) and (pointer:coarse) and (min-width:651px) and (max-height:600px){
  .masthead{height:74px;padding-left:calc(22px + env(safe-area-inset-left,0px));padding-right:calc(22px + env(safe-area-inset-right,0px))}
  .small-name{font-size:29px}.descriptor{display:none}
  body[data-mode="experience"] .arrival-action{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  body[data-mode="experience"] .enter-link{font-size:21px;min-height:64px;gap:7px}
  .reflection-switch{bottom:calc(20px + env(safe-area-inset-bottom,0px));left:calc(20px + env(safe-area-inset-left,0px))}
  .story-frame,.beat-host .story-frame{padding:64px 15vw 52px;min-height:100svh}
  .beat-welcome .story-leading{font-size:29px}.beat-welcome p,.beat-welcome p:last-child,.beat-host p{font-size:19px}
  .beat-host h2{font-size:86px}
  .writing{display:block;padding-top:76px}.writing-aside{display:none}
  .paper{padding:22px max(8vw,env(safe-area-inset-right,0px)) 84px max(8vw,env(safe-area-inset-left,0px))}
  body[data-view="introduce"] .site-footer,body[data-view="review"] .site-footer{position:relative;inset:auto;width:auto;margin:-56px 8vw 12px;color:var(--ink)}
  body[data-view="introduce"] .site-footer>button,body[data-view="review"] .site-footer>button{color:#59624d}
  .room-invitation{padding:24px max(24px,env(safe-area-inset-right,0px)) 46px max(24px,env(safe-area-inset-left,0px))}
  .room-note{padding:28px 36px}.info-dialog{max-height:calc(100svh - 24px);overscroll-behavior:contain}
}