/* The sticky scene follows the visible viewport when the phone's browser bars move. */
.day-scroll-stage{height:100dvh}
.day-scroll .day-stops button{transition:color .2s ease,opacity .2s ease}
@media(hover:hover) and (pointer:fine){
 body .day-scroll .day-stops button:hover{box-shadow:none;filter:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
 .day-scroll .day-stops button:hover:before{background:#ffffffa6}
}
/* The longer English title has its own proportions. */
html[lang=en] .hero-wordmark{max-width:calc(100% - 400px)}
html[lang=en] .hero-wordmark h1{font-size:clamp(100px,17.5vw,260px)}
html[lang=en] .hero-wordmark h1>strong{white-space:nowrap}
.page-home:not(.header-condensed) .site-header{background:var(--shell-bg)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(min-width:761px) and (max-width:1199px){html[lang=en] .hero-wordmark h1{font-size:15.5vw}}
@media(max-width:760px){
 .page-home:not(.header-condensed) .site-header .header-inner{height:64px!important;min-height:64px!important}
 .day-scroll-stage{min-height:100dvh}
 .day-scroll .day-stops{bottom:max(24px,env(safe-area-inset-bottom))}
 .day-scroll .day-path-result>div{bottom:104px}
 html[lang=en] .hero-wordmark{right:24px;max-width:none}
 html[lang=en] .hero-wordmark h1{font-size:clamp(94px,34vw,190px)}
 html[lang=en] .hero-wordmark h1>span{font-size:clamp(30px,9vw,40px);margin-bottom:12px}
 html[lang=en] .hero-wordmark .hero-whisper{font-size:clamp(23px,6.5vw,30px);margin-left:0}
}
@media(max-width:760px) and (max-height:650px){
 .day-scroll .day-path-title{padding-top:100px}
 .day-scroll .day-path-title .day-scroll-hint{margin-top:5px}
 .day-scroll .day-path-result h3{font-size:34px;margin-bottom:12px}
 .day-scroll .day-path-result p{font-size:13px;line-height:1.5}
 .day-scroll .day-path-result .text-link{margin-top:10px}
}