/* Preserve the floating composition, with a smaller fit on phones. */
.scene-film-bar > #scene-film-name { margin-left: 0; }
.intro-panel { margin-top: 12px; }
.skills-panel { margin-top: 28px; }

@media (max-width: 700px) {
  .site-header {
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .studio {
    height: 100svh;
    min-height: calc(700px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    padding: 0;
  }
  .studio-heading { top: calc(70px + env(safe-area-inset-top, 0px)); }
  .studio-heading h1 { font-size: 15.6vw; }
  .studio-byline { font-size: 15px; margin-top: 12px; }
  .studio.has-portrait .scene {
    inset: calc(env(safe-area-inset-top, 0px) + (100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .21) 4% auto;
    height: calc((100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .54);
  }
  .studio .intro-panel {
    top: calc(env(safe-area-inset-top, 0px) + (100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .5 - 24px);
    left: 6%;
    width: 54%;
    padding: 18px 15px 13px;
    border-radius: 21px;
    margin-top: 30px;
  }
  .glass-panel h2 { font-size: 10px; margin-bottom: 12px; }
  .panel-handle { display: none; }
  .intro-copy { font-size: 11.5px; line-height: 1.5; margin-bottom: 13px; }
  .gate-form input { font-size: 16px; padding: 7px 10px; }
  .gate-form input::placeholder { font-size: 11px; }
  .gate-form button, .hero-cta { font-size: 10px; padding: 9px 6px; }
  .gate-status { font-size: 9px; margin-top: 8px; }
  .studio .skills-panel {
    top: calc(env(safe-area-inset-top, 0px) + (100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .43 - 10px);
    right: 5%;
    width: 34%;
    padding: 20px 7px 8px;
    border-radius: 20px;
    margin-top: 48px;
  }
  .skills-panel h2 { font-size: 9px; margin-bottom: 10px; }
  .skill-pill { font-size: 9px; padding: 8px 3px; }
  .studio .glass-dock {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    max-width: 94%;
    gap: clamp(4px, 1.5vw, 6px);
    padding: 8px 9px 7px;
    border-radius: 15px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .dock-icon { width: clamp(27px, 8vw, 34px); height: clamp(27px, 8vw, 34px); font-size: 17px; }
  .dock-icon.wordmark { font-size: 14px; }
  .dock-label { font-size: 7px; }
  .dock-item:hover .dock-icon, .dock-item:focus-visible .dock-icon { transform: translateY(-2px); }
  .studio-bottom { bottom: calc(4px + env(safe-area-inset-bottom, 0px)); font-size: 7px; }
}

@media (max-width: 350px) {
  .studio .intro-panel {
    top: calc(env(safe-area-inset-top, 0px) + (100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .5 - 32px);
    margin-top: 26px;
  }
}

/* Minimal, readable continuation cue. */
.studio-bottom{grid-template-columns:1fr 150px 1fr;bottom:20px}
.studio-bottom>.horizon-cue{justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:150px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;color:#344a58;text-decoration:none}
.studio-bottom>.horizon-cue[hidden]{display:none}
.horizon-cue>small{font-family:inherit;font-size:12px;font-weight:400;letter-spacing:.035em;line-height:1.4;white-space:nowrap;text-shadow:none}
.horizon-cue>span{display:block;width:42px;height:1px;margin:0;background:currentColor;border:0;border-radius:0;box-shadow:none;opacity:.55;animation:horizon-breathe 5s ease-in-out infinite}
@keyframes horizon-breathe{0%,100%{opacity:.35}50%{opacity:.65}}
.horizon-cue:focus-visible{outline:1px solid #536e81;outline-offset:3px}
.studio .glass-dock{bottom:82px}
@media(max-width:700px){.studio-bottom{grid-template-columns:1fr;bottom:calc(8px + env(safe-area-inset-bottom,0px))}.studio-bottom>span{display:none}.studio .glass-dock{bottom:calc(70px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.horizon-cue>span{animation:none}}

/* Match the adjacent studio footer caption exactly. */
.studio-bottom>.horizon-cue{color:inherit;font:inherit}
.horizon-cue>small{font:inherit;letter-spacing:inherit;line-height:inherit;text-shadow:none}