/* Adapt the authored composition for fingers, browser chrome and safe areas. */
:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-header-base: 105px;
  --mobile-header-height: calc(var(--mobile-header-base) + var(--mobile-safe-top));
  --mobile-edge-left: max(var(--gutter), calc(var(--mobile-safe-left) + 12px));
  --mobile-edge-right: max(var(--gutter), calc(var(--mobile-safe-right) + 12px));
}
@media (min-width: 701px) {
  .hero-film-toolbar:has(.hero-scene-choices[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 1000px) {
  html { scroll-padding-top: calc(var(--mobile-header-height) + 12px); }
  .site-header {
    height: var(--mobile-header-height);
    padding-top: calc(28px + var(--mobile-safe-top));
    padding-left: var(--mobile-edge-left);
    padding-right: var(--mobile-edge-right);
  }
  .site-header .brand-mark { width: 44px; min-height: 44px; display: flex; align-items: center; }
  .site-header .wordmark { top: calc(23px + var(--mobile-safe-top)); min-height: 44px; display: flex; align-items: center; }
  .site-header .motion-control { top: calc(30px + var(--mobile-safe-top)); left: calc(var(--mobile-edge-left) + 58px); }
  .hero.video-hero, .characters, .blueprint, .access, .faq, .footer,
  .work .work-stage, .menu-panel { padding-left: var(--mobile-edge-left); padding-right: var(--mobile-edge-right); }
  .hero.video-hero { padding-top: calc(120px + var(--mobile-safe-top)); }
  .menu-panel { padding-top: calc(120px + var(--mobile-safe-top)); padding-bottom: calc(64px + var(--mobile-safe-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .menu-panel nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-foot { left: var(--mobile-edge-left); right: var(--mobile-edge-right); bottom: calc(24px + var(--mobile-safe-bottom)); }
  .menu-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-promise .hero-social-proof { min-height: 44px; margin-bottom: 10px; }
  .hero-meta a, .character-bottom .text-link, .gallery-foot a { min-height: 44px; }
  .gallery-foot { width: auto; margin-left: var(--mobile-edge-left); margin-right: var(--mobile-edge-right); }
  .character-heading > p, .learning-steps p, .access-details li, .faq details p { font-size: 16px; }
  .character-inspector-bar p { max-width: none; }
  .film-open-file { display: inline-flex; align-items: center; min-height: 44px; }
  .film-dialog {
    padding-top: calc(10px + var(--mobile-safe-top));
    padding-right: max(10px, calc(var(--mobile-safe-right) + 8px));
    padding-bottom: calc(10px + var(--mobile-safe-bottom));
    padding-left: max(10px, calc(var(--mobile-safe-left) + 8px));
  }
  .film-viewer { max-height: calc(100svh - 20px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); }
  .work .compact-study:has([data-interactive=true]) .collector {
    height: min(300px, calc(100svh - var(--mobile-header-height) - var(--mobile-safe-bottom) - 36px));
  }
}
@media (max-width: 700px) {
  :root { --mobile-header-base: 85px; }
  .site-header { padding-top: calc(20px + var(--mobile-safe-top)); }
  .site-header .brand-mark { height: 44px; }
  .site-header .wordmark { top: calc(17px + var(--mobile-safe-top)); }
  .site-header .motion-control { top: calc(18px + var(--mobile-safe-top)); left: calc(var(--mobile-edge-left) + 50px); }
  .hero.video-hero { padding-top: calc(106px + var(--mobile-safe-top)); }
  .film-screen video {
    height: min(59svh, calc(100svh - 360px - var(--mobile-safe-top) - var(--mobile-safe-bottom)));
    max-height: calc(100svh - 360px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }
  .enrolment-dock { padding-left: var(--mobile-edge-left); padding-right: var(--mobile-edge-right); }
  .footer { padding-bottom: calc(76px + var(--mobile-safe-bottom)); }
}
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  :root { --mobile-header-base: 72px; }
  .site-header { padding-top: calc(14px + var(--mobile-safe-top)); }
  .site-header .brand-mark { height: 44px; }
  .site-header .brand-mark svg { width: 34px; height: 42px; }
  .site-header .wordmark { top: calc(14px + var(--mobile-safe-top)); font-size: 21px; }
  .site-header .motion-control { top: calc(14px + var(--mobile-safe-top)); left: calc(var(--mobile-edge-left) + 50px); }
  .hero.video-hero { padding-top: calc(90px + var(--mobile-safe-top)); }
  .video-hero .hero-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px 24px;
    align-items: start;
  }
  .hero.video-hero h1 { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: clamp(60px, 11vw, 94px); margin: 0; }
  .hero-promise { display: contents; }
  .hero-promise > p:first-child { grid-column: 2; grid-row: 1; margin: 0; font-size: 16px; line-height: 1.5; }
  .hero-promise .hero-enrol { grid-column: 2; grid-row: 2; min-height: 54px; padding: 7px 8px 7px 16px; font-size: 13px; }
  .hero-enrol > svg { width: 36px; height: 36px; padding: 10px; }
  .hero-promise .hero-format-note { grid-column: 1; grid-row: 3; margin: 4px 0 0; font-size: 13px; }
  .hero-promise .hero-social-proof { grid-column: 2; grid-row: 3; margin: 4px 0 0; font-size: 12px; }
  .menu-panel { padding-top: calc(84px + var(--mobile-safe-top)); padding-bottom: calc(72px + var(--mobile-safe-bottom)); }
  .menu-panel nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 660px); gap: 12px 24px; }
  .menu-panel nav a { font-size: clamp(28px, 4.8vw, 38px); min-height: 44px; }
  .menu-foot { bottom: calc(12px + var(--mobile-safe-bottom)); gap: 16px; font-size: 11px; }
  .film-dialog { padding-top: calc(8px + var(--mobile-safe-top)); padding-bottom: calc(8px + var(--mobile-safe-bottom)); }
  .film-viewer { max-height: calc(100svh - 16px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); }
  .film-screen video {
    height: calc(100svh - 18px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
    max-height: calc(100svh - 18px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }
}
@media (min-width: 568px) and (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .work .cards-track { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 6px; }
  .work #gallery-styles .cards-track { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .work .film-trigger[data-cover=custom] { min-height: 44px; }
  .gallery-tab { min-height: 44px; }
}

/* Keep the remaining visuals and primary actions close after the copy trim. */
.kinetic-hero .hero-film-credit>.art-doodle-slot{position:relative;inset:auto;left:auto;top:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;max-width:44px;flex:0 0 44px;margin:0;order:initial}
.kinetic-hero .hero-film-credit>.art-doodle-slot>.art-doodle{width:44px;height:44px;min-height:44px}
.hero-film-credit>span:not(.art-doodle-slot){min-width:0}
.sound-transport{margin-top:0}
.workflow-heading{display:block}
.workflow-close{justify-content:flex-start;gap:0;margin-top:20px}
@media(max-width:700px){.hero-film-credit{justify-content:flex-start;gap:10px}.hero-film-credit>span:not(.art-doodle-slot){flex:1;max-width:none;text-align:left}.kinetic-hero .hero-film-credit>.art-doodle-slot{margin-left:auto}.workflow-close .pill{margin-top:0}}