/* The branded opening enhances the homepage; without JS it stays out of the way. */
html { scrollbar-gutter: stable; }
.site-splash { display: none; position: fixed; inset: 0; z-index: 300; place-items: center; background: var(--cream); opacity: 1; transition: opacity 700ms var(--ease); }
.splash-active .site-splash, .site-splash.is-leaving { display: grid; }
.splash-active, .splash-active body { overflow: hidden; }
.splash-brand { display: grid; justify-items: center; gap: 26px; padding: 32px; text-align: center; transition: transform 700ms var(--ease); }
.splash-brand img { width: 120px; height: 120px; object-fit: contain; }
.splash-name { color: var(--forest); font: 600 clamp(23px, 4.8vw, 32px)/1.2 Manrope, Arial, sans-serif; letter-spacing: -.045em; }
.splash-name span { display: block; margin-top: 13px; font: 500 10px/1.5 'DM Sans', Arial, sans-serif; letter-spacing: .34em; }
.site-splash.is-leaving { opacity: 0; pointer-events: none; }
.site-splash.is-leaving .splash-brand { transform: translateY(-8px); }
.home-page > .site-header, .home-page > main, .home-page > .site-footer { transition: opacity 700ms var(--ease); }
.splash-active .home-page > .site-header, .splash-active .home-page > main, .splash-active .home-page > .site-footer, .splash-active .skip-link { opacity: 0; }
@media (max-width: 600px) { .splash-brand { gap: 23px; } .splash-brand img { width: 100px; height: 100px; } }
@media (prefers-reduced-motion: reduce) {
  .site-splash, .splash-brand, .home-page > .site-header, .home-page > main, .home-page > .site-footer { transition: none; }
  .site-splash.is-leaving .splash-brand { transform: none; }
}