/* Phone layouts share the established lettering, paper and cinematic scenes. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
button,a,input,select,textarea{touch-action:manipulation}
.room-photos{display:contents}
.room-photos>[data-room-reveal]{position:absolute;transform-origin:center}
.room-photo-controls{display:none}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden}
@media(max-width:700px){
 .visitor-settings{right:max(16px,env(safe-area-inset-right));bottom:calc(12px + var(--safe-bottom));gap:8px}
 .visitor-settings>a{display:flex;align-items:center;min-height:44px}
 .visitor-settings button{width:46px;height:46px;min-height:46px}
 .film-timecode{left:max(16px,env(safe-area-inset-left));bottom:calc(26px + var(--safe-bottom));font-size:10px}
 .journey-hint{left:max(16px,env(safe-area-inset-left));bottom:calc(78px + var(--safe-bottom));font-size:11px}
 #player~.visitor-settings>a{display:none}
 .motion-enabled .film-titles{inset:calc(85px + var(--safe-top)) 5% calc(100px + var(--safe-bottom))}
 .motion-enabled .community-moment{padding-top:calc(90px + var(--safe-top));padding-bottom:calc(90px + var(--safe-bottom))}
 .film-titles .title-scene>.eyebrow{font-size:11px;line-height:1.6;max-width:290px;margin-bottom:16px}
 .film-titles .title-scene>p:last-child{font-size:19px;line-height:1.45;max-width:300px;margin-top:20px}
 .film-titles .opening-identity{width:100%;max-width:100%}

 /* Each photograph gets room to be seen; native scrolling keeps touch and pinch native. */
 .room-layout,.cinema:not(.motion-enabled) .room-layout{inset:calc(80px + var(--safe-top)) 20px calc(82px + var(--safe-bottom));height:auto;max-width:460px;display:flex;flex-direction:column;justify-content:center;gap:12px}
 .room-layout>[data-room-reveal]{position:relative;inset:auto;width:100%;max-width:none;flex:none}
 .room-heading>.eyebrow{font-size:10px;line-height:1.5;margin-bottom:9px}
 .room-heading h2{font-size:43px;line-height:1}
 .room-heading h2 em{font-size:68px;line-height:.95;margin:3px 0 0 5%}
 .room-introduction{font-size:17px;line-height:1.4}
 .room-introduction>a{font-size:15px;min-height:44px;margin:0}
 .room-photos{display:flex;flex:none;width:calc(100% + 20px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 20px 5px 2px;touch-action:pan-x pan-y pinch-zoom}
 .room-photos::-webkit-scrollbar{display:none}
 .room-photos .polaroid{position:relative;inset:auto;display:block;flex:0 0 calc(100% - 14px);width:auto;min-width:0;--tilt:0deg;scroll-snap-align:start;padding:6px 6px 0;box-shadow:0 5px 15px #0b060b40}
 .room-photos .polaroid img{width:100%;height:clamp(120px,21svh,180px);aspect-ratio:16/9;object-fit:contain}
 .room-photos .polaroid figcaption{font-size:14px;min-height:36px;line-height:1.3}
 .room-photos .polaroid figcaption span{display:block;font-size:16px}
 .room-photo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;color:#fff5e9;text-shadow:0 1px 5px #21121c}
 .room-photo-controls p{font:11px/1.5 var(--mono)}
 .room-photo-controls>div{display:flex;gap:8px}
 .room-photo-controls button{width:44px;height:44px;border:1px solid #f3dfcd66;background:#21151f66;color:inherit;font:23px/1 Redaction,serif}
 .room-photo-controls button[aria-disabled=true]{opacity:.4}
 .room-layout .room-belonging{font-size:17px;line-height:1.4;margin:0}
 .room-layout .room-belonging br{display:none}
 .room-layout .room-links{justify-content:space-between;gap:14px;margin:0}
 .room-links button{font-size:16px;min-height:44px}
 .room-tour-moment{inset:calc(86px + var(--safe-top)) 20px calc(86px + var(--safe-bottom));justify-content:center}
 .room-tour-moment .tour-moment-heading{margin-bottom:20px}
 .tour-moment-heading h3{font-size:32px;line-height:1.15}
 .tour-moment-caption :is(a,button){font-size:16px;min-height:44px}
 .tour-chapters-list{grid-template-columns:repeat(var(--tour-chapter-count,7),minmax(128px,1fr));scroll-snap-type:x proximity}
 .tour-chapters-list li{scroll-snap-align:start}
 .tour-chapter{font-size:15px}
 .tour-chapter-time{font-size:11px}
 .room-tour-moment .tour-moment-note{font-size:16px;line-height:1.45;margin-top:16px}
 .space-viewer{padding:calc(12px + var(--safe-top)) max(16px,env(safe-area-inset-right)) calc(12px + var(--safe-bottom)) max(16px,env(safe-area-inset-left));overscroll-behavior:contain}
 .space-viewer[open]{gap:16px}
 .viewer-topline h2{font-size:25px}
 .viewer-bottom{grid-template-columns:1fr auto;gap:12px;font-size:13px}
 .viewer-bottom>a{grid-column:1/-1;justify-self:center;display:flex;align-items:center;min-height:44px}
 .viewer-print figcaption{font-size:15px;line-height:1.45;overflow-wrap:anywhere}
 .room-tour-viewer .tour-chapters-list{grid-template-columns:repeat(var(--tour-chapter-count,7),128px)}
 .invitation-ending.invitation-ending{clip-path:inset(calc(74px + var(--safe-top)) 0 0)}
 .cinema:not(.motion-enabled) .room-layout{inset:auto;gap:18px}
 .cinema:not(.motion-enabled) .room-tour-moment{margin-top:64px}

 /* The application is a letter sized for the hand, with its action close by. */
 #application{padding:12px 12px calc(28px + var(--safe-bottom))}
 .application-heading{margin:0 8px 10px;align-items:center;flex-wrap:wrap;gap:4px 18px}
 .application-choices{font-size:12px;gap:22px}
 .application-choices a{min-height:44px;display:flex;align-items:center;padding:8px 0}
 .return-link{font-size:14px;min-height:44px;padding:10px 0}
 .letter-contents{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 8px 8px;min-height:36px}
 .letter-contents .draft-note{margin:0;max-width:210px;font-size:13px;line-height:1.4}
 #clear-draft{position:static;flex:none;min-height:44px;font-size:13px;padding:8px 0}
 .application-letter{padding:22px 24px 18px;outline-offset:-7px;min-height:0;scroll-margin-top:12px}
 .letter-running-head{padding-bottom:12px;gap:14px}
 .letter-running-head>span:first-child{font-size:25px}
 .letter-running-head>span:last-child{font-size:9px;max-width:130px}
 .letter-progress{padding:13px 0 10px;font-size:10px}
 .letter-progress-track{margin-bottom:19px}
 #letter-page{min-height:0}
 #letter-page h1,#letter-page h2{font-size:31px;line-height:1.13;margin:7px 0 18px}
 #letter-page:has(h1 em) h1{font-size:31px;margin-bottom:18px}
 #letter-page:has(h1 em) h1 em{font-size:53px;line-height:1.05;margin:6px 0 18px 4px}
 #letter-page:has(h1 em) p{font-size:16px;line-height:1.5;margin:10px 0}
 #letter-page:has(h1 em) .salutation{font-size:17px;margin:0 0 15px}
 #letter-page .question-salutation{font-size:17px;margin-bottom:10px}
 #letter-page .optional-label:empty{display:none}
 #letter-page .question-note{font-size:17px;line-height:1.5;margin-bottom:18px}
 #letter-page input:not([type=radio]):not([type=checkbox]){font-size:21px;min-height:48px}
 #letter-page textarea{font-size:18px;line-height:30px;min-height:140px;background-size:auto;scroll-margin-block:24px}
 .application-letter[data-stage=question]{min-height:min(510px,calc(100svh - 220px))}
 .application-letter[data-stage=question] #letter-page{flex:1;padding-top:0}
 .application-letter[data-stage=intro] .letter-navigation{margin-top:8px}
 .letter-error:empty{min-height:0;margin:12px 0 0}
 .letter-navigation{margin-top:20px;gap:12px;flex-wrap:nowrap}
 .letter-navigation button{font-size:16px;min-height:48px}
 #letter-next{min-width:132px;justify-content:space-between;padding:12px 18px;gap:14px}
 .letter-footnote{font-size:12px;line-height:1.5;margin-top:14px}
 .application-bottom-note{font-size:14px;line-height:1.5;margin-top:20px}
 .letter-choices{gap:12px}.letter-choice{min-height:50px}
 .letter-consent{padding:10px 0}
 .letter-receipt{padding:32px 25px;min-height:0}
 .correspondence-page.keyboard-open #application{padding-bottom:calc(28px + var(--safe-bottom) + var(--keyboard-height,0px))}
 .correspondence-page.keyboard-open .letter-navigation{scroll-margin-bottom:calc(var(--keyboard-height,0px) + 24px)}

 .darkroom-page .space-index{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));overflow-x:auto;scrollbar-width:none}
 .darkroom-page .space-index>div{min-width:max-content;gap:22px;justify-content:flex-start}
 .darkroom-page .space-index a{font-size:14px;min-height:44px}
 .darkroom-page .tour-caption .quiet-link,.darkroom-page .history-sources a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
 .darkroom-page .arrival-gallery .contact-print{flex-basis:90%}
 .darkroom-page .arrival-gallery .contact-print figcaption{font-size:14px;min-height:44px}
 .darkroom-page .house-summary p span{font-size:11px}
 .darkroom-page .about-footer{padding-bottom:calc(90px + var(--safe-bottom))}
}
@media(max-width:700px) and (max-height:760px){
 .room-layout{gap:8px;top:calc(74px + var(--safe-top))}
 .room-heading h2{display:flex;align-items:baseline;gap:8px;font-size:34px}
 .room-heading h2 em{font-size:50px;line-height:1;margin:0}
 .room-heading>.eyebrow{margin-bottom:5px;font-size:10px}
 .room-introduction{font-size:16px;line-height:1.4}
 .room-introduction>a{display:inline-flex;align-items:center;font-size:13px;min-height:44px}
 .room-layout .room-belonging{display:none}
 .room-photo-controls{margin-top:-4px}
 .room-photos .polaroid img{height:clamp(100px,22svh,165px)}
 .room-links button{font-size:15px}
 .room-tour-moment .tour-moment-heading{margin-bottom:12px}
 .tour-moment-heading h3{font-size:29px}
}
@media(max-width:360px){
 .room-layout{left:16px;right:16px}.room-heading h2{font-size:29px}.room-heading h2 em{font-size:43px}
 .application-letter{padding:20px}.letter-running-head>span:last-child{max-width:108px;font-size:8px}
 .letter-navigation button{font-size:15px}#letter-next{min-width:122px;padding:12px}
}
@media(max-height:500px) and (orientation:landscape){
 .room-tour-viewer .tour-chapters{max-height:125px;overflow-y:auto}
 .space-viewer[open]{gap:8px}.viewer-bottom>a{grid-column:auto}
}
@media(max-width:700px) and (max-height:650px){
 .motion-enabled .community-moment{padding-top:calc(78px + var(--safe-top));padding-bottom:calc(78px + var(--safe-bottom))}
 .community-composition h2 em{font-size:64px;margin-top:5px}
 .community-description{margin-top:20px}
 .community-facts{margin-top:14px}
 .community-description .membership-status{margin-top:10px}
}