/* Screen-size contract: readable pages, persistent navigation, no clipped controls. */
html{scrollbar-gutter:stable}body{min-width:0}.app,.book-area,.book,.spread,.copy-page,.nav-center{min-width:0}button,a,input{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c0e59c;outline-offset:4px}
.catalogue-mode .app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}.catalogue-mode .book{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#819b65 #152018}.catalogue-mode .spread:not(.special-spread){height:auto;min-height:100%;overflow:visible;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.catalogue-mode .spread:not(.special-spread)>.copy-page{min-width:0;overflow:visible}.catalogue-mode .spread:not(.special-spread)>.photo-page{min-height:400px}.catalogue-mode .navigation{flex-shrink:0}.finish-row-heading button,.close{min-width:44px;min-height:44px}.worksite-play,.quote-replay,.project-link{min-height:44px}.top-swatch{min-height:44px}.nav-arrow{min-width:44px;min-height:44px}.navigation .counter{white-space:nowrap}.story-phases{flex-wrap:wrap}dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}.contents-item{min-height:48px}.close{z-index:10}.finish-carousel{touch-action:pan-x pan-y}.catalogue-mode .spread.special-spread{min-height:560px;height:100%}
@media(max-width:800px),(orientation:portrait){
 .catalogue-mode .app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.catalogue-mode .topbar{height:68px;flex-shrink:0}.topbar .intro{display:none}.catalogue-tools{gap:6px}.catalogue-tools button{min-height:44px}#catalogue-fullscreen{width:44px;min-width:44px;padding:0}#fullscreen-label{display:none}.header-identity{gap:10px}.header-identity .brand img{width:72px}.header-recipient{width:100px}.header-identity .identity-divider{height:25px}
 .catalogue-mode .spread:not(.special-spread),.catalogue-mode.is-portrait .spread:not(.special-spread){display:flex;flex-direction:column;height:auto;min-height:100%;overflow:visible}.catalogue-mode .spread:not(.special-spread)>.photo-page{height:clamp(240px,35dvh,470px);min-height:240px;flex:0 0 auto}.catalogue-mode .spread:not(.special-spread)>.copy-page{flex:1 0 auto;padding:24px clamp(18px,4vw,40px) 28px;justify-content:center}.catalogue-mode .spread:not(.special-spread) h1{font-size:clamp(27px,4.5vw,42px)}.catalogue-mode .spread .lead{font-size:16px!important;line-height:1.5}.catalogue-mode .navigation{position:static;margin:8px auto;padding:6px 10px;gap:10px;width:100%;box-sizing:border-box}.navigation .nav-arrow{width:46px;height:46px;flex:0 0 46px}.navigation .nav-line{gap:8px}.navigation #current-label{font-size:14px;line-height:1.2}.navigation .counter{font-size:12px}.page-dots{gap:0;justify-content:space-between}.page-dots .page-dot{width:12px;height:18px;min-width:0;flex:1;max-width:18px;padding:0}.catalogue-mode .spread .mail-scene,.catalogue-mode .spread .quote-scene{height:auto;min-height:0!important;overflow:visible;flex:0 0 auto;padding:20px!important}.catalogue-mode .designed-quote{max-width:500px;padding:20px}.catalogue-mode .quote-line{font-size:12px;padding:13px 0}.catalogue-mode .quote-line>i,.catalogue-mode .quote-line>span{font-size:10px}.catalogue-mode .quote-summary>span{font-size:12px}.catalogue-mode .quote-summary>strong{font-size:15px}.catalogue-mode .quote-example{font-size:10px}.catalogue-mode .finish-preview .pair-object{width:140px;height:184px}.catalogue-mode .finish-preview .finish-pair{min-height:185px}.catalogue-mode .real-worksite-spread .worksite-tabs button{min-height:76px;font-size:12px!important}.catalogue-mode .real-worksite-spread .simple-technical-plan svg{max-height:155px}.catalogue-mode .real-worksite-spread .worksite-play{font-size:13px}.catalogue-mode .special-spread{min-height:560px;height:100%}
}
@media(max-width:380px){.header-identity{gap:6px}.header-identity .brand img{width:60px}.header-recipient{width:78px}.catalogue-tools #open-contents{font-size:11px;padding:0 9px}.catalogue-tools{gap:4px}.header-identity .identity-divider{display:none}.navigation .page-dots{display:none}.navigation .nav-line{flex-direction:column;gap:3px}.catalogue-cover .copy-page{padding:30px 22px!important}.catalogue-cover h1{font-size:36px!important}.catalogue-cover .cover-brand-lockup{left:22px;right:22px;width:auto}.catalogue-cover .cover-logo{max-width:110px}.catalogue-cover .recipient-logo{max-width:120px}.catalogue-cover .cover-edition{font-size:9px}.catalogue-cover .catalogue-open{font-size:14px}}
@media(orientation:landscape) and (max-height:600px){.catalogue-mode .topbar{height:56px}.topbar .intro{display:none}.catalogue-mode .navigation{margin:5px auto;padding:4px 12px;max-width:650px}.navigation .page-dots{display:none}.catalogue-mode .spread:not(.special-spread){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100%;height:auto}.catalogue-mode .spread:not(.special-spread)>.photo-page{height:auto;min-height:350px}.catalogue-mode .spread:not(.special-spread)>.copy-page{padding:25px}.catalogue-mode .special-spread{min-height:510px}.catalogue-tools button{min-height:44px}.catalogue-mode .spread .lead{font-size:15px!important}}
@media(min-width:1600px) and (orientation:landscape){.catalogue-mode .book{max-width:1560px}.catalogue-mode .spread:not(.special-spread)>.copy-page{padding-left:10%;padding-right:10%}}
@media(prefers-reduced-motion:reduce){.book *{scroll-behavior:auto!important}}
@media(min-width:801px) and (orientation:landscape){.catalogue-mode .spread:not(.special-spread){height:100%;min-height:640px}.catalogue-mode .spread:not(.special-spread)>.photo-page{height:100%}.catalogue-mode .spread:not(.special-spread)>.copy-page{justify-content:safe center}}
@media(max-width:800px),(orientation:portrait){.catalogue-mode .spread:not(.special-spread)>.photo-page:not(.mail-scene):not(.quote-scene){height:clamp(240px,35dvh,470px)!important;flex:0 0 auto!important}.catalogue-mode .real-worksite-images{position:absolute;inset:0;height:100%}.catalogue-mode .finish-spread>.finish-preview{height:250px!important}}
@media(orientation:landscape) and (max-height:600px){.catalogue-mode .spread:not(.special-spread){min-height:640px}.catalogue-mode .spread:not(.special-spread)>.photo-page:not(.mail-scene):not(.quote-scene){height:100%!important;min-height:640px}}
