/* Small-screen reading and focus space. Loaded after the existing mobile layer. */
@media(max-width:650px){
  html{scroll-padding-bottom:100px}
  main{padding-bottom:84px}
  body[data-page='fit'] main,body[data-page='private-gallery'] main{padding-bottom:0}
  main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{scroll-margin-top:calc(var(--header-offset,140px) + 12px);scroll-margin-bottom:100px}
  .page-heading{padding:18px 5% 14px}
  .page-heading>h1{font-size:31px;line-height:1.12;letter-spacing:-.8px;margin:0;max-width:100%}
  .page-heading>.eyebrow{font-size:8px;line-height:1.4;letter-spacing:1.4px;margin:0 0 7px}
  .page-heading>.lead{font-size:14px;line-height:1.5;margin:9px 0 0}
  .page-heading.mobile-intro-compact{padding-bottom:10px}
  .mobile-intro-compact .section-direction nav{gap:4px 12px;flex-wrap:wrap}
  .mobile-intro-compact .section-direction .text-link,.gallery-tabs a,.private-sections a{min-height:44px}
  .mobile-menu-button{min-height:44px!important}
  input:not([type='checkbox']):not([type='radio']),select,textarea{font-size:16px;min-height:44px}
  .table-scroll{max-width:100%;overscroll-behavior-x:contain;scroll-padding-inline:12px}
  dialog{max-height:94vh;max-height:94dvh;overflow:auto;overscroll-behavior:contain;scroll-padding-block:16px}
  #event-details-dialog{max-height:92vh;max-height:92dvh}
  dialog :is(input,select,textarea,button,a,summary):focus-visible{scroll-margin-block:20px}
  .dialog-top .close,.event-dialog-top .close{min-width:44px;min-height:44px}
  .builder-actions{flex-wrap:wrap}
  .builder-actions>.button,.builder-actions>button{min-height:44px}
}
@media(max-width:360px){.page-heading>h1{font-size:28px}}