/* Public homepage: concise navigation, no duplicate bottom entrance. */
.brand img{width:170px}.site-sidebar{view-transition-name:site-chrome}.brand{view-transition-name:singul-brand}
@media(min-width:960px){:root{--sidebar-w:288px}}
@media(max-width:959px){
  :root{--topbar-h:calc(84px + env(safe-area-inset-top,0px))}
  .sidebar-inner{padding:env(safe-area-inset-top,0px) 16px 0;gap:8px;flex-wrap:nowrap}
  .nav-toggle{flex:none;min-width:44px;min-height:52px;justify-content:center}
  .brand{min-width:0}
}
@media(max-width:380px){.nav-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
.film-control{min-width:56px;min-height:56px}

/* The homepage is a single viewport; navigation overlays a centered stage. */
html.home-viewport{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
body.page-home{position:relative;height:100vh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
.page-home .site-body{position:absolute;inset:0;margin-left:var(--sidebar-w);height:100%;min-height:0}
.page-home .site-main.home-stage{height:100%;min-height:0;flex:1 1 0;padding:0}
.page-home .film-control{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px))}
@media(max-width:959px){
  .page-home .site-sidebar{position:absolute;inset:0 0 auto;width:100%}
  .page-home .site-body{margin-left:0}
  /* Equal space above and below keeps the animation centered in the screen. */
  .page-home .hero-film{inset:var(--topbar-h) 0}
}

/* Keep the complete five-item navigation reachable on short mobile screens. */
@media(max-width:959px){.site-nav{max-height:calc(100dvh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain}}