/* Every scene is one browser viewport; its contents may scroll on small screens. */
.horizontal-mode,.horizontal-mode body{height:100%;overflow:hidden;scroll-behavior:auto}
.horizontal-mode .header{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:30}
.horizontal-viewport{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;overflow:hidden}
.horizontal-mode main{display:flex;align-items:stretch;width:max-content;height:100%;margin:0;will-change:transform}
.horizontal-mode main>section{flex:0 0 100vw;width:100vw;height:100%;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#393939 #161616;position:relative;border-top:0;border-left:1px solid #222}
.horizontal-mode main>.hero{display:grid;padding-top:clamp(20px,5svh,54px);padding-bottom:clamp(20px,5svh,54px)}
.horizontal-mode main>.statement-space{display:flex}
.horizontal-mode .section .narrative-grid{min-height:calc(100dvh - var(--header-height) - 2 * var(--scene-padding))}
.horizontal-mode .footer{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#161616;display:none;padding:12px 0}
.horizontal-mode[data-scene="contact"] .footer{display:block}
.horizontal-mode #contact{padding-bottom:100px}
.progress{top:calc(var(--header-height) - 2px);height:2px;background:#818181;pointer-events:none}
.horizontal-mode .progress{z-index:40}
.scene-status{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.horizontal-mode main>.statement-space{overflow:hidden}
@media(min-width:801px){
 .horizontal-mode .section{padding-top:clamp(36px,6dvh,64px);padding-bottom:clamp(36px,6dvh,64px)}
 .horizontal-mode .section .narrative-grid{min-height:calc(100dvh - var(--header-height) - 2 * clamp(36px,6dvh,64px))}
 .horizontal-mode .narrative-copy .semantic-vector{min-height:170px;margin-top:32px}
 .horizontal-mode .narrative-copy .semantic-vector svg{max-height:clamp(160px,26dvh,280px)}
 .horizontal-mode #one .narrative-object{position:relative;margin-top:32px}
 .horizontal-mode #one .object{position:absolute;left:50%;top:156px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
 .horizontal-mode #one .object .flower{width:56px;height:56px}
 .horizontal-mode #one .flower-parameters{margin-top:0;gap:12px}
 .horizontal-mode #one .flower-parameters label{flex:1 1 110px}
 .horizontal-mode #one .moscow-scheme>svg{max-height:180px}
 .horizontal-mode #contact .narrative-grid{min-height:calc(100dvh - var(--header-height) - 2 * clamp(36px,6dvh,64px) - 56px)}
 .horizontal-mode #contact{padding-bottom:100px}
}
@media(max-width:800px){.horizontal-mode .section .narrative-grid{min-height:0}.horizontal-mode .section{padding-top:56px;padding-bottom:56px}.horizontal-mode .footer .wrap{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.horizontal-mode main>.hero{padding-top:24px;padding-bottom:24px}}
@media(prefers-reduced-motion:reduce){.horizontal-mode main{will-change:auto}}