/* Mobile has its own gutters and vertically separated hero composition. */
@media (max-width:650px) {
  /* Decorative overflow must never turn the phone page into a sideways canvas. */
  html, body { overflow-x:clip; }
  body > .wrap, .contact { padding-inline:12px; }
  .page-grid { inset-inline:12px; }

  nav {
    grid-template-columns:minmax(0,1fr) auto;
    --mobile-cta-width:90px;
    --mobile-nav-font-size:12px;
  }
  /* The CTA sits inside a 1px border and 3px padding. Match its right edge. */
  nav .nav-utilities { gap:22px; padding-inline-end:4px; }
  nav .nav-pill .navcta {
    width:var(--mobile-cta-width);
    height:31.6px;
    min-height:31.6px;
    border-radius:4px;
  }
  /* Center the unscaled cap in the button's actual track, not a 72px track. */
  .nav-cluster .surprise-switch { grid-template-columns:minmax(0,1fr); }
  nav .nav-pill { min-width:0; gap:2px; padding:3px; }
  nav .nav-pill .navlinks { flex-wrap:nowrap; padding:0; gap:0; }
  nav .navlinks a, nav .navlinks .hero-gravity-toggle, nav .navcta {
    font-size:var(--mobile-nav-font-size); padding-inline:4px;
  }
  nav .navlinks a, nav .navlinks .hero-gravity-toggle { flex-grow:1; }
  nav .navlinks a[href="#work"] { width:36px; }
  nav .navlinks a[href="#art"] { width:40px; }
  nav .navlinks a[href="#about"] { width:56px; }
  nav .navlinks .hero-gravity-toggle { width:82px; }
  /* Keep the same optical baseline as the other mobile nav labels. */
  nav .nav-pill .gravity-label { translate:0 1px; }
  nav .nav-pill .navcta { padding-inline:6px; align-self:center; }
  .surprise-switch .surprise-tooltip, .art-hero-location { display:none; }

  .art-direction-hero .sculpture-stage { height:820px; }
  .hero .direction-statement, html[lang=fi] .hero .direction-statement {
    font-size:clamp(36px,11.75vw,50px); line-height:.9;
  }
  .hero .direction-statement .statement-left {
    top:70px; left:0; right:0; width:auto;
  }
  .hero .direction-statement .statement-right {
    top:525px; bottom:auto; left:0; right:0; padding-inline-end:0;
  }
  .hero .direction-statement .statement-left > span {
    text-align:left; padding-inline:0;
  }
  .hero .direction-statement .statement-right > span {
    text-align:right; margin-left:0;
  }
  .hero .reveal-statement .statement-left .revealed-word { transform-origin:left center; }
  .character-scene { top:345px; height:330px; }
  .character-figure#designer-character { scale:1.28; }
  .character-hint { top:calc(100% + 6px); bottom:auto; }
  .thinking-scribble { top:-62px; }
  .art-direction-hero .sculpture-stage .art-hero-intro { width:100%; max-width:400px; bottom:68px; }
  .art-direction-hero .sculpture-stage .art-hero-cta { bottom:0; }
}
@media (max-width:360px) {
  nav { --mobile-cta-width:82px; --mobile-nav-font-size:11px; }
  nav .navlinks a, nav .navlinks .hero-gravity-toggle, nav .navcta {
    padding-inline:2px;
  }
  nav .navlinks a[href="#work"] { width:32px; }
  nav .navlinks a[href="#art"] { width:34px; }
  nav .navlinks a[href="#about"] { width:48px; }
  nav .navlinks .hero-gravity-toggle { width:76px; }
  nav .nav-pill .navcta { padding-inline:5px; }
}