/* One quiet type scale; scene text lives beside the controls, never over faces. */
.intro h1,.ending h2,#chapter-name,.landing h2,.architecture-panel h3{font-weight:400;letter-spacing:-.05em;text-wrap:balance}
.intro h1{font-size:clamp(42px,5.6vw,88px);line-height:1.06;margin:0 0 32px}
.intro .start-button{margin-top:0}
.ending h2{font-size:clamp(38px,5vw,78px);line-height:1.07;margin:0 0 30px}
.ending-actions{margin-top:0;gap:22px}
#chapter-name{font-size:clamp(30px,3.5vw,56px);line-height:1.08;max-width:13ch}
#story-heading[data-placement=phone]{left:var(--copy-x,55%);top:var(--copy-y,178px);right:auto;bottom:auto;width:var(--copy-width,280px);max-width:none}
#story-heading[data-placement=phone] #chapter-name{font-size:clamp(24px,2.15vw,34px);line-height:1.12;max-width:none}
#story-heading #subtitle{margin-top:14px}
#management{top:190px;bottom:auto;height:max-content;max-height:calc(100svh - 272px);transform:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:24px}
#management #management-title{font-size:27px;line-height:1.1;letter-spacing:-.045em;font-weight:400;color:#293f36;margin:0 0 12px}
#management .management-intro{font-size:11px;line-height:1.65;color:#637963;margin:0 0 20px;max-width:27ch}
#management .door-permission{min-height:52px;padding:8px 10px}
#management .resident-list{margin-bottom:20px}
#management .permission-fields{gap:8px}
#management .selected-resident{padding-bottom:16px}
.landing-manifesto{padding-block:clamp(72px,9vw,140px) 60px}
.landing #product-title{font-size:clamp(56px,10vw,160px);line-height:1.02;letter-spacing:-.06em;white-space:normal;max-width:12ch;margin-left:0}
.manifesto-bottom{display:flex;justify-content:flex-end;margin-top:32px}
.architecture-sticky{min-height:0;height:100svh}
.architecture-copy{top:27%;width:42%}
.architecture-panel{transition:none;transform:none}
.architecture-panel.is-active{animation:copy-reveal .24s ease-out both}
.architecture-panel h3{font-size:clamp(40px,4.8vw,78px);line-height:1.06;max-width:12ch}
.architecture-panel p{font-size:clamp(13px,1vw,16px);line-height:1.7;max-width:29ch;margin-top:24px}
.invitation-editorial{padding-block:clamp(72px,9vw,140px)}
.invitation-intro{margin-bottom:56px;align-items:end}
.invitation-intro h2{font-size:clamp(42px,5.6vw,96px);line-height:1.07;max-width:14ch}
.invitation-intro>p{font-size:14px;line-height:1.7;max-width:26ch;padding-bottom:4px}
.entrance-portrait{margin:0}
.link-address{font-size:12px}
.limit-pair p{line-height:1.65}
.landing-questions{padding-block:clamp(72px,8vw,130px)}
.questions-heading h2{font-size:clamp(38px,4.3vw,72px);line-height:1.08;max-width:13ch}
.landing-question-list summary{font-size:clamp(16px,1.25vw,20px);line-height:1.5;padding-block:26px}
.landing-question-list details p{font-size:14px;line-height:1.8;max-width:48ch}
.landing-contact{min-height:620px;padding-block:clamp(80px,10vw,150px)}
#contact-title{font-size:clamp(46px,7.1vw,120px);line-height:1.05;max-width:15ch;letter-spacing:-.055em}
.landing-cta{margin-top:36px;font-size:14px;gap:26px}
.enquiry-dialog{width:min(620px,calc(100% - 32px));padding:38px;border-radius:12px}
#enquiry-title{font-size:clamp(32px,3vw,44px);line-height:1.08;letter-spacing:-.045em;margin:0 40px 32px 0}
.enquiry-dialog .form-row{gap:20px;margin-bottom:22px}
.enquiry-dialog .enquiry-form label{font-size:12px;line-height:1.5}
.enquiry-dialog .enquiry-form input{margin-top:8px;min-height:48px;font-size:15px}
.enquiry-dialog .apartments-field{width:calc(50% - 10px);margin-bottom:26px}
.enquiry-dialog .enquiry-submit{min-height:48px;font-size:12px}
.enquiry-dialog .enquiry-status{font-size:10px;line-height:1.65;margin-top:18px}
@keyframes copy-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
 .architecture-copy{top:22%;width:43%}
 .architecture-panel h3{font-size:clamp(34px,4.7vw,46px)}
 .architecture-panel p{max-width:25ch}
}
@media(max-width:700px){
 .intro{top:43%;right:var(--edge);max-width:none}
 .intro h1{font-size:clamp(40px,7.9vw,56px);line-height:1.07;max-width:13ch}
 .ending{top:44%;right:var(--edge)}
 .ending h2{font-size:clamp(36px,7.4vw,50px);max-width:15ch}
 #chapter-name{font-size:32px;max-width:13ch}
 #story-heading[data-placement=phone] #chapter-name{font-size:27px}
 #story-scroll .phone{max-height:calc(100svh - 280px)}
 body[data-beat=management] #story-scroll #world{top:156px;height:calc(48svh - 156px)}
 body[data-beat=management] #story-scroll #resident-hotspots,body[data-beat=management] #story-scroll #door-hotspots{top:156px;bottom:auto;height:calc(48svh - 156px)}
 body[data-beat=management] #story-scroll #management{top:48svh;bottom:64px;height:auto;max-height:none;padding:22px;transform:none}
 #management #management-title{font-size:27px}
 #management .management-intro{margin-bottom:16px}
 #management .resident-list{gap:6px;margin-bottom:20px}
 body[data-beat=management] #story-scroll #management .door-permission{min-height:54px}
 #resident-hotspots .resident-hotspot{font-size:9px;padding:5px 8px;min-height:26px}
 #door-hotspots .door-hotspot{font-size:8px;padding:5px 7px;min-height:26px}
 .landing-manifesto{padding-block:70px 44px}
 .landing #product-title{font-size:clamp(52px,10vw,72px);line-height:1.04;max-width:12ch}
 .manifesto-bottom{margin-top:28px}
 .architecture-copy{top:46px;width:auto;left:var(--lp-pad);right:var(--lp-pad)}
 .architecture-panel h3{font-size:clamp(34px,7.4vw,46px);line-height:1.07;max-width:14ch}
 .architecture-panel p{font-size:13px;line-height:1.65;max-width:28ch;margin-top:18px}
 .architecture-rail{font-size:10px;bottom:28px;padding-bottom:18px}
 .invitation-editorial{padding-block:72px}
 .invitation-intro{margin-bottom:36px}
 .invitation-intro h2{font-size:clamp(40px,8.1vw,54px);line-height:1.07}
 .invitation-intro>p{font-size:14px;line-height:1.7;margin-top:24px;max-width:30ch}
 .invitation-composition{gap:36px}
 .landing-questions{padding-block:72px}
 .questions-heading h2{font-size:clamp(38px,7.8vw,50px)}
 .landing-question-list{margin-top:36px}
 .landing-question-list summary{font-size:17px;padding-block:24px}
 .landing-question-list details p{font-size:13px;line-height:1.8;padding-right:12px}
 .landing-contact{min-height:540px;padding-block:84px}
 #contact-title{font-size:clamp(42px,8.1vw,58px);max-width:14ch}
 .landing-cta{font-size:13px;margin-top:32px;gap:24px}
 .enquiry-dialog{padding:28px 24px;max-height:calc(100svh - 24px)}
 #enquiry-title{font-size:34px;margin-bottom:28px}
 .enquiry-dialog .form-row{gap:16px;margin-bottom:20px}
 .enquiry-dialog .enquiry-form label{font-size:11px}
 .enquiry-dialog .enquiry-form input{font-size:16px;min-height:46px}
}
@media(max-width:440px){
 .enquiry-dialog .form-row{grid-template-columns:1fr;gap:20px}
 .enquiry-dialog .apartments-field{width:100%}
 .intro h1{font-size:40px}
 #story-heading[data-placement=phone] #chapter-name{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.architecture-panel.is-active{animation:none}}

/* The ending gives the building and the invitation separate areas. */
.phone{animation:none}
body[data-beat=finale] #experience #world{left:42%;width:58%;mask-image:linear-gradient(90deg,transparent,#000 18%)}
body[data-beat=finale] .ending{max-width:37%;animation:none}
@media(max-width:700px){
 body[data-beat=finale] #experience #world{left:0;top:43svh;width:100%;height:57svh;mask-image:linear-gradient(180deg,transparent,#000 18%)}
 body[data-beat=finale] .ending{top:170px;left:var(--edge);right:var(--edge);max-width:none;transform:none}
 body[data-beat=finale] .ending h2{font-size:32px;line-height:1.08;margin-bottom:20px}
 body[data-beat=finale] .ending-actions{gap:14px}
 body[data-beat=finale] .ending .start-button{min-height:44px;font-size:11px}
 body[data-beat=finale] .ending .replay-button{font-size:10px}
}

.enquiry-dialog .building-field{margin-bottom:22px}
.enquiry-dialog .form-row .apartments-field{width:auto;margin-bottom:0}
.scene-ready #scene-fallback{display:none}