/* Short phone viewports need a separate composition, including after rotation. */
@media (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  :root { --phone-nav-height:60px; --phone-gutter:max(28px,5vw); }
  html.cinema-compact { --phone-nav-height:56px; }
  .stage, .thread-story-stage { height:var(--cinema-viewport-height,100dvh); }
  .navigation { height:var(--phone-nav-height); margin:0; padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right)); }
  .navigation .mark { min-width:0; }
  .navigation .mark img { width:108px; height:38px; }
  .navigation .mobile-menu-toggle { min-height:48px; }
  .mobile-menu { width:100%; height:var(--cinema-viewport-height,100dvh); max-height:var(--cinema-viewport-height,100dvh); padding-inline:max(28px,env(safe-area-inset-left)) max(28px,env(safe-area-inset-right)); padding-bottom:max(14px,env(safe-area-inset-bottom)); }
  .mobile-menu-header { min-height:var(--phone-nav-height); }
  .mobile-menu h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .mobile-menu-links { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin-top:8px; }
  .mobile-menu-links a { min-height:48px; padding:8px 0; font-size:19px; }
  .mobile-menu-links .mobile-menu-project { grid-column:1/-1; min-height:48px; margin-top:12px; padding:10px 16px; font-size:16px; }
  .mobile-menu-language { margin-top:12px; padding-top:8px; }

  /* Keep the headline and copy in one flow: absolute bottom alignment can
     collide with the headline while Safari's browser controls are visible. */
  .stage .intro { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:49vw; height:100%; padding:calc(var(--phone-nav-height) + 12px) 0 32px var(--phone-gutter); }
  .stage .intro>.eyebrow { flex:none; font-size:7px; margin-bottom:8px; }
  .stage .intro h1 { flex:none; font-size:clamp(28px,4vw,44px); max-width:100%; }
  html[lang=ko] .stage .intro h1 { font-size:clamp(25px,3.6vw,39px); max-width:100%; line-height:1.15; }
  .stage.has-hero-film .intro-bottom { position:static; flex:none; margin-top:14px; width:100%; }
  .stage .intro-copy, .stage .intro-copy p { max-width:100%; }
  .stage .intro-copy p { font-size:11px; line-height:1.45; margin-bottom:8px; }
  .stage .hero-services { font-size:7px; margin-bottom:8px; }
  .stage .intro-actions { flex-wrap:nowrap; gap:18px; }
  .stage .intro-actions .primary { min-height:44px; padding:10px 16px; gap:24px; }
  .stage .intro-actions .secondary-link { min-height:44px; font-size:10px; }
  .stage .shot-label { display:none; }
  .melli-hero-film__greet { left:54%; right:auto; top:var(--hero-band-top); width:40%; height:var(--hero-band-height); }
  .melli-hero-film__media, .melli-hero-film__ending { -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .stage .stage-footer, .thread-story-stage>.stage-footer { left:var(--phone-gutter); right:var(--phone-gutter); bottom:12px; padding-top:8px; font-size:7px; }
  .stage-footer .wordmark, .stage-footer .frame-index { display:none; }
  .stage .stage-footer, .thread-story-stage>.stage-footer { justify-content:center; }
  .stage-footer .wordmark, .stage-footer .scroll-hint { font-size:7px; }
  .stage .collection-caption { top:calc(var(--phone-nav-height) + 16px); font-size:8px; }
  .stage .collection-bottom { bottom:32px; font-size:8px; }
  .stage .film-card { width:30vw; height:calc(var(--cinema-viewport-height,100dvh)*.60); padding:14px; }
  .stage .film-card h2, html[lang=ko] .stage .film-card h2 { font-size:clamp(18px,2.5vw,25px); max-width:calc(100% - 28px); bottom:46px; }
  .stage .film-card>p { font-size:8px; line-height:1.35; max-width:calc(100% - 28px); bottom:12px; }
  .stage .film-card .watch-label { width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .stage .card-top { font-size:7px; }
  .stage .card-top .thread-knot { font-size:20px; }

  /* Crop empty studio space so the yarn drawings and final close-up fill the
     same visible stage. All four connected figures remain inside the width. */
  .thread-story-media { left:50%; right:auto; top:calc(var(--phone-nav-height) + (100% - var(--phone-nav-height) - 32px)/2); width:min(100vw,calc((var(--cinema-viewport-height,100dvh) - var(--phone-nav-height) - 32px)*16/9/.88)); transform:translate(-50%,-50%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 96%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .thread-story-stage>.outro { justify-content:center; padding:calc(var(--phone-nav-height) + 12px) var(--phone-gutter) 45px; }
  .thread-story-stage>.outro h2, html[lang=ko] .thread-story-stage>.outro h2 { font-size:clamp(28px,4vw,44px); margin:10px 0 12px; }
  .thread-story-stage>.outro>p:not(.eyebrow) { max-width:44vw; font-size:11px; line-height:1.5; margin-bottom:12px; }
  .thread-story-stage>.outro .primary { min-height:44px; padding:10px 16px; }

  .work-library { padding:64px var(--phone-gutter); scroll-margin-top:76px; }
  .portfolio-page .work-library { padding-top:calc(var(--phone-nav-height) + 26px); }
  .work-library .sc-heading { display:grid; grid-template-columns:1.05fr 1fr; gap:28px; margin-bottom:26px; }
  .work-library .sc-eyebrow { font-size:9px; margin-bottom:12px; }
  .portfolio-page .sc-heading h1, .work-library .sc-heading h2 { font-size:clamp(30px,4vw,42px); }
  html[lang=ko] .portfolio-page .sc-heading h1, html[lang=ko] .work-library .sc-heading h2 { font-size:clamp(26px,3.4vw,36px); }
  .work-library .sc-intro { margin:0; font-size:12px; line-height:1.6; }
  .work-library .sc-film-featured { grid-template-columns:1.1fr 1fr; min-height:0; align-items:start; }
  .work-library .sc-film-featured .sc-feature-image { min-height:0; height:auto; aspect-ratio:16/9; }
  .work-library .sc-feature-copy { padding:20px; }
  .work-library .sc-feature-copy h3, html[lang=ko] .work-library .sc-feature-copy h3 { font-size:28px; margin-bottom:14px; }
  .work-library .sc-category { font-size:9px; margin-bottom:12px; }
  .work-library .sc-description { font-size:12px; line-height:1.6; margin-bottom:14px; }
  .work-library .sc-tags { margin-bottom:16px; }
  .work-library .sc-product-link { min-height:0; gap:12px; padding:10px; }
  .work-library .sc-product-link>img { width:66px; height:84px; padding:6px; }
  .work-library .sc-product-brand { font-size:16px; }
  .work-library .sc-product-name, .work-library .sc-product-action { font-size:12px; }
  .work-library .sc-tile-product .sc-product-link { min-height:108px; }
  .work-library .sc-dialog { max-height:calc(var(--cinema-viewport-height,100dvh) - 16px); padding:12px 16px; }
  .work-library .sc-dialog-heading { position:sticky; top:-12px; z-index:3; background:#241b21; padding-block:8px; margin-bottom:10px; }
  .work-library .sc-dialog-heading h2 { font-size:22px; }
  .melli-youtube-frame { width:min(100%,calc((var(--cinema-viewport-height,100dvh) - 112px)*16/9)); height:auto; min-height:0; aspect-ratio:16/9; margin-inline:auto; }
  .melli-youtube-link { min-height:44px; display:inline-flex; align-items:center; margin-top:8px; }
  .film-dialog { max-height:calc(var(--cinema-viewport-height,100dvh) - 16px); overflow:auto; }
  .film-dialog .player-heading { position:sticky; top:0; z-index:3; background:#261d1b; }

  .enquiry-page-main { padding:calc(var(--phone-nav-height) + 30px) var(--phone-gutter) 60px; }
  .enquiry-layout { grid-template-columns:1fr 1fr; max-width:1000px; gap:40px; }
  .enquiry-intro h1, html[lang=ko] .enquiry-intro h1 { font-size:36px; margin-bottom:22px; }
  .enquiry-intro>.eyebrow { font-size:9px; margin-bottom:18px; }
  .enquiry-intro>p:not(.eyebrow) { font-size:13px; margin-bottom:18px; }
  .enquiry-email { font-size:15px; }
  .contact-enquiry-form { scroll-margin-top:76px; }
  .services, .faq-section, .contact-section, .ending { scroll-margin-top:76px; }
}
@media (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  html.cinema-compact .stage .hero-services, html.cinema-compact .stage .intro>.eyebrow { display:none; }
  html.cinema-compact .stage .intro { padding-top:calc(var(--phone-nav-height) + 10px); padding-bottom:28px; }
  html.cinema-compact .stage .intro h1 { font-size:clamp(22px,calc(var(--cinema-viewport-height)*.083),28px); }
  html.cinema-compact[lang=ko] .stage .intro h1 { font-size:clamp(20px,calc(var(--cinema-viewport-height)*.075),25px); }
  html.cinema-compact .stage .intro-bottom { margin-top:12px; }
  html.cinema-compact .stage .intro-copy p { font-size:10px; line-height:1.4; }
  html.cinema-compact .thread-story-stage>.outro { padding-top:calc(var(--phone-nav-height) + 10px); padding-bottom:30px; }
  html.cinema-compact .thread-story-stage>.outro h2 { font-size:26px; margin-block:6px 8px; }
  html.cinema-compact .thread-story-stage>.outro>p:not(.eyebrow) { font-size:10px; margin-bottom:8px; }
  html.cinema-tight .stage .intro { padding-top:calc(var(--phone-nav-height) + 8px); padding-bottom:24px; }
  html.cinema-tight .stage .intro h1 { font-size:22px; }
  html.cinema-tight[lang=ko] .stage .intro h1 { font-size:20px; }
  html.cinema-tight .stage .intro-bottom { margin-top:8px; }
  html.cinema-tight .stage .intro-copy p { font-size:9.5px; line-height:1.32; margin-bottom:6px; }
  html.cinema-tight .thread-story-stage>.outro { padding-top:calc(var(--phone-nav-height) + 8px); padding-bottom:26px; }
  html.cinema-tight .thread-story-stage>.outro>.eyebrow { display:none; }
  html.cinema-tight .thread-story-stage>.outro h2 { font-size:22px; margin-block:4px 6px; }
  html.cinema-tight .thread-story-stage>.outro>p:not(.eyebrow) { font-size:9px; line-height:1.3; margin-bottom:6px; }
}