/* Keep the approved composition clear of notches and in-app browser controls. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --header-height: calc(var(--header-bar-height) + var(--safe-top));
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.native-scroll .site-header { padding-top: var(--safe-top); }
.native-scroll .header-inner { height: var(--header-bar-height); padding-left: max(32px, var(--safe-left)); padding-right: max(32px, var(--safe-right)); }
.native-scroll .menu-toggle { width: 44px; height: 44px; }
.native-scroll .mobile-menu, .native-scroll .mobile-submenu { padding-left: var(--safe-left); padding-right: var(--safe-right); padding-bottom: max(24px, var(--safe-bottom)); }
.native-scroll.scroll-locked #main { pointer-events: none; }
.native-scroll .sq-content { padding-left: max(32px, var(--safe-left)); padding-right: max(32px, var(--safe-right)); }
.native-scroll .story-scene { scroll-margin-top: calc(var(--header-height) + 35px); }
.native-scroll .sheet { bottom: auto; top: calc(var(--viewport-height) * .1); }
.sheet:not([open]) { display: none; }
.sheet-top { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
.close-sheet { min-height: 44px; }
.sheet-inner { padding-bottom: max(60px, calc(var(--safe-bottom) + 24px)); }
.sheet-fallback[open] { display: block; z-index: 201; }
.sheet-fallback-backdrop { position: fixed; inset: 0; z-index: 200; background: #2c262280; }
.story-film-controls button, .story-film-controls > a { min-height: 44px; }
.story-contact { display: inline-flex; align-items: center; min-height: 44px; }
.journey--cinematic { padding-left: max(28px, var(--safe-left)); padding-right: max(28px, var(--safe-right)); }
.native-scroll .contact-inner { padding-left: max(32px, var(--safe-left)); padding-right: max(32px, var(--safe-right)); }
.native-scroll .about-glass > .container { padding-left: max(clamp(32px, 5vw, 72px), var(--safe-left)); padding-right: max(clamp(32px, 5vw, 72px), var(--safe-right)); }
/* The desktop link row wraps on portrait tablets: use the existing mobile menu. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --header-bar-height: 48px; }
  .native-scroll .header-links, .native-scroll .header-actions, .formats-dropdown { display: none; }
  .native-scroll .header-inner { grid-template-columns: 44px 1fr 44px; gap: 0; }
  .native-scroll .header-inner .wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
  .native-scroll .menu-toggle { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
  .native-scroll .menu-toggle span { height: 1px; width: 22px; transition: transform .3s; }
  .native-scroll .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .native-scroll .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 767px) {
  .native-scroll .header-inner { grid-template-columns: 44px 1fr 44px; padding-left: max(10px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); }
  .native-scroll .hero-frame { --hero-screen-height: max(calc(640px + var(--safe-top) + var(--safe-bottom)), var(--viewport-height)); }
  .native-scroll .hero-identity { padding-top: calc(72px + var(--safe-top)); }
  .native-scroll .hero-frame { --hero-portrait-height: min(calc((75 * var(--hero-unit) - .5px) * 1102 / 936), calc(var(--hero-screen-height) - 490px - var(--safe-top) - var(--safe-bottom))); }
  .native-scroll .sq-content { padding-top: calc(140px + var(--safe-top)); padding-bottom: max(40px, calc(var(--safe-bottom) + 16px)); padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
  .native-scroll .story-scene { scroll-margin-top: calc(var(--header-height) + 14px); }
  .native-scroll .sheet { top: calc(var(--viewport-height) * .05); }
  .native-scroll .contact-inner, .native-scroll .about-glass > .container { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
  .journey--cinematic { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
  .native-scroll .hero-video-toggle::before { right: max(4px, var(--safe-right)); bottom: max(4px, var(--safe-bottom)); }
  .native-scroll .hero-video-toggle svg { right: max(9px, calc(var(--safe-right) + 5px)); bottom: max(9px, calc(var(--safe-bottom) + 5px)); }
}
@media (max-width: 767px) and (max-height: 720px) {
  .native-scroll .about-glass > .container { padding-left: max(20px, var(--safe-left)); padding-right: max(20px, var(--safe-right)); }
}
@media (max-width: 359px) {
  .journey--cinematic { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
}
@media (hover: none) {
  .button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-submenu, .formats-dropdown { transition: none; }
}