/* Bokah Media — single mobile portrait design system. Desktop is untouched. */
@media (max-width: 700px) and (orientation: portrait) {
  :root { --mp-gutter: clamp(16px, 4.6vw, 20px); --mp-radius: 14px; --mp-border: rgba(255,255,255,.12); --mp-panel: linear-gradient(180deg,rgba(14,21,24,.94),rgba(7,10,11,.92)); }
  /* Initial loading must never animate or anchor the document. Navigation
     handlers request smooth scrolling explicitly after the page is ready. */
  html {
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
    overflow-x: clip !important;
  }
  html body {
    font-size: 15px;
    overflow-anchor: none !important;
    overflow-x: clip !important;
  }
  html body #showreel { overflow-anchor: none !important; }
  html body #showreel,
  html body #about,
  html body #cinematography,
  html body #photography,
  html body #ai-visuals,
  html body #behind-scene,
  html body #contact,
  html body .portfolio-section.alt-bg {
    background: transparent !important;
    background-image: none !important;
  }
  html body #showreel, html body #about, html body #cinematography, html body #photography, html body #ai-visuals, html body #behind-scene, html body #contact { width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; }
  html body #showreel { padding:28px var(--mp-gutter) 46px !important; }
  html body #about, html body #cinematography, html body #photography, html body #ai-visuals, html body #behind-scene, html body #contact { padding:58px var(--mp-gutter) 62px !important; }

  /* Navigation scales continuously from compact 320px phones to 430px phones. */
  html body #main-nav { width:100% !important; height:clamp(52px,14vw,60px) !important; min-height:52px !important; padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)) !important; box-sizing:border-box !important; }
  html body #main-nav .nav-inner { width:100% !important; height:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; gap:clamp(5px,1.6vw,9px) !important; padding-inline:0 !important; }
  html body #main-nav .nav-logo { min-width:0 !important; flex:1 1 auto !important; gap:clamp(6px,1.8vw,10px) !important; overflow:hidden !important; }
  html body #main-nav .logo-img { width:clamp(28px,8.5vw,34px) !important; height:clamp(28px,8.5vw,34px) !important; flex:0 0 auto !important; }
  html body #main-nav .logo-name { max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:clamp(.69rem,2.95vw,.82rem) !important; letter-spacing:.012em !important; line-height:1.05 !important; }
  html body #main-nav .logo-sub { display:none !important; }
  html body #main-nav .language-switcher { flex:0 0 auto !important; width:auto !important; min-width:0 !important; padding:3px 5px !important; gap:3px !important; border-radius:999px !important; }
  html body #main-nav .language-switcher a { min-width:0 !important; padding:4px 4px !important; font-size:clamp(.45rem,1.8vw,.54rem) !important; letter-spacing:0 !important; white-space:nowrap !important; }
  html body #main-nav .language-flag { width:clamp(10px,2.8vw,13px) !important; height:clamp(10px,2.8vw,13px) !important; }
  html body #main-nav .nav-toggle { display:flex !important; flex:0 0 auto !important; width:clamp(38px,10vw,42px) !important; height:clamp(38px,10vw,42px) !important; min-height:0 !important; border-radius:50% !important; }
  html body #main-nav .nav-links { top:calc(100% + 8px) !important; right:var(--mp-gutter) !important; left:auto !important; width:min(82vw,260px) !important; max-height:calc(100dvh - 84px) !important; overflow:auto !important; padding:8px !important; border-radius:14px !important; }
  html body #main-nav .nav-links li, html body #main-nav .nav-link { width:100% !important; }
  html body #main-nav .nav-link { min-height:42px !important; padding:10px 12px !important; border-radius:9px !important; font-size:clamp(.62rem,2.8vw,.72rem) !important; letter-spacing:.12em !important; }

  /* Desktop order translated to a phone: brand story, profile, skills. */
  html body #about .about-inner > .bokah-brand-panel { order:1 !important; }
  html body #about .about-inner > .about-left { order:2 !important; }
  html body #about .about-inner > .about-right { order:3 !important; }

  /* Keep the desktop logo hierarchy visible in the compact header: mark on
     the left, name and slogan stacked in the available text column. */
  html.lang-ko body #main-nav .nav-logo,
  html:not(.lang-ko) body #main-nav .nav-logo {
    display:grid !important;
    grid-template-columns:clamp(28px,8.5vw,34px) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:clamp(6px,1.8vw,10px) !important;
    row-gap:1px !important;
    align-items:center !important;
  }
  html.lang-ko body #main-nav .logo-img,
  html:not(.lang-ko) body #main-nav .logo-img { grid-row:1 / span 2 !important; grid-column:1 !important; }
  html.lang-ko body #main-nav .logo-name,
  html:not(.lang-ko) body #main-nav .logo-name { grid-row:1 !important; grid-column:2 !important; }
  html.lang-ko body #main-nav .logo-sub,
  html:not(.lang-ko) body #main-nav .logo-sub {
    display:block !important;
    grid-row:2 !important;
    grid-column:2 !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:clamp(.44rem,1.7vw,.54rem) !important;
    line-height:1.05 !important;
    letter-spacing:.04em !important;
    color:rgba(181,224,240,.72) !important;
  }

  /* Neutralize legacy reveal states that could leave a loaded panel invisible. */
  html body .reveal,
  html body .reveal.visible,
  html body .reveal.reveal-observed,
  html body .reveal.reveal-observed.visible,
  html body .bokah-brand-panel.reveal,
  html body .bokah-brand-panel.reveal.visible,
  html body .bokah-brand-panel.reveal .bokah-brand-copy,
  html body .bokah-brand-panel.reveal.visible .bokah-brand-copy,
  html body .bokah-brand-panel.reveal .bokah-logo-card,
  html body .bokah-brand-panel.reveal.visible .bokah-logo-card { opacity:1 !important; visibility:visible !important; transform:none !important; animation:none !important; }

  #about .about-inner { display:flex !important; flex-direction:column !important; gap:18px !important; width:100% !important; max-width:none !important; min-height:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
  #about .about-left, #about .about-right, #about .bokah-brand-panel, #contact .contact-inner { width:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; box-sizing:border-box !important; border:1px solid var(--mp-border) !important; border-radius:var(--mp-radius) !important; background:var(--mp-panel) !important; box-shadow:0 16px 40px rgba(0,0,0,.2) !important; }
  #about .about-left { display:block !important; padding:20px !important; }
  #about .about-photo-wrap { width:min(48vw,178px) !important; height:min(48vw,178px) !important; margin:0 auto !important; }
  #about .about-bio-block { width:100% !important; padding:22px 0 0 !important; border:0 !important; background:transparent !important; }
  #about .about-name, #contact .contact-name { font-size:clamp(1.15rem,6vw,1.42rem) !important; line-height:1.18 !important; letter-spacing:.07em !important; }
  #about .about-bio p, #about .bokah-brand-copy > p:not(.label-tag), #contact .contact-copy-body { width:100% !important; max-width:none !important; margin:0 0 12px !important; font-size:.82rem !important; line-height:1.76 !important; letter-spacing:.005em !important; text-align:left !important; text-align-last:left !important; word-spacing:normal !important; }
  #about .about-resume-btn, #contact .cf-submit { min-height:46px !important; border-radius:999px !important; }
  #about .about-right { padding:20px !important; }
  #about .skills-list { gap:10px !important; }
  #about .skill-item { width:100% !important; min-height:0 !important; padding:13px 14px !important; box-sizing:border-box !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; }
  #about .bokah-brand-panel { display:block !important; padding:22px 18px !important; min-height:0 !important; height:auto !important; align-content:start !important; grid-template-rows:none !important; }
  #about .bokah-brand-copy { width:100% !important; min-height:0 !important; }
  #about #brand-story-body-1 > p { margin:0 0 12px !important; }
  #about .bokah-logo-evolution { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin-top:20px !important; }
  #about .bokah-logo-card { width:100% !important; min-height:0 !important; box-sizing:border-box !important; border-radius:10px !important; padding:13px !important; }

  #contact .contact-inner { display:grid !important; grid-template-columns:1fr !important; padding:0 !important; transform:none !important; }
  #contact .contact-profile, #contact .contact-form { width:100% !important; max-width:none !important; min-height:0 !important; box-sizing:border-box !important; padding:22px 18px 24px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #contact .contact-photo-wrap { width:112px !important; height:112px !important; transform:none !important; }
  #contact .contact-btn { width:44px !important; height:44px !important; transform:none !important; }
  #contact .cf-input, #contact input, #contact textarea { width:100% !important; min-height:44px !important; box-sizing:border-box !important; padding:10px 12px !important; border-radius:9px !important; font-size:16px !important; line-height:1.4 !important; }
  #contact .cf-textarea { min-height:122px !important; }
  #contact .cf-submit { width:100% !important; }

  /* Very narrow phones: keep the language control and menu from competing. */
  @media (max-width: 350px) {
    html body #main-nav .language-switcher a { padding-inline:3px !important; }
    html body #main-nav .logo-name { max-width:78px !important; font-size:.62rem !important; }
    #showreel .hero-btn { font-size:.55rem !important; letter-spacing:.02em !important; }
  }

  /* Final visual authority: preserve the desktop component language on a
     portrait phone while changing only width, stacking and readable scale. */
  html.lang-ko body #showreel,
  html:not(.lang-ko) body #showreel {
    background:transparent !important;
    background-image:none !important;
  }

  html body #about .about-left,
  html body #about .about-right,
  html body #about .bokah-brand-panel,
  html body #contact .contact-profile,
  html body #contact .contact-form {
    background:transparent !important;
  }

  html body #about .about-right,
  html body #about .bokah-brand-panel,
  html body #contact .contact-form {
    border-top:1px solid rgba(132,132,132,.16) !important;
  }

  /* The desktop hero media treatment is the reference; only its width is
     fluid on a phone. */
  html.lang-ko body #showreel .showreel-player,
  html:not(.lang-ko) body #showreel .showreel-player {
    border:1px solid rgba(151,211,238,.18) !important;
    border-radius:18px !important;
    box-shadow:0 24px 64px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html body .portfolio-section .video-card,
  html body .portfolio-section .photo-card,
  html body .portfolio-section .ai-card {
    border:1px solid rgba(222,239,246,.13) !important;
    border-radius:8px !important;
    box-shadow:0 16px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html body .portfolio-section .video-card,
  html body .portfolio-section .photo-card { background:rgba(20,20,20,.6) !important; }
  html body .portfolio-section .ai-card { background:linear-gradient(135deg,rgba(106,176,212,.14),rgba(255,255,255,.035)),rgba(12,12,12,.92) !important; }

  html body .portfolio-section .video-card-thumb,
  html body .portfolio-section .photo-card-img,
  html body .portfolio-section .ai-card img {
    display:block !important;
    width:100% !important;
    object-fit:cover !important;
  }
  html body .portfolio-section .video-card-thumb { aspect-ratio:16/9 !important; }
  html body .portfolio-section .photo-card-img { aspect-ratio:3/2 !important; }
  html body .portfolio-section .ai-card img { aspect-ratio:16/11 !important; }

  /* Final phone proportions: one readable card lane, compact category
     control, and the same complete-frame intent without letterboxing video. */
  /* Mobile portrait gallery composition requested by the desktop reference:
     six rows of two video thumbnails and six rows of three photo thumbnails.
     The data count controls the final row; desktop remains untouched. */
  html.lang-ko body #cinematography #video-grid-all,
  html:not(.lang-ko) body #cinematography #video-grid-all,
  html.lang-ko body #behind-scene #video-grid-all,
  html:not(.lang-ko) body #behind-scene #video-grid-all {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html.lang-ko body #photography #photo-grid-all,
  html:not(.lang-ko) body #photography #photo-grid-all,
  html.lang-ko body #behind-scene #photo-grid-all,
  html:not(.lang-ko) body #behind-scene #photo-grid-all {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  html.lang-ko body #cinematography .video-card .video-card-thumb,
  html:not(.lang-ko) body #cinematography .video-card .video-card-thumb,
  html.lang-ko body #behind-scene .video-card .video-card-thumb,
  html:not(.lang-ko) body #behind-scene .video-card .video-card-thumb {
    width:100% !important;
    height:100% !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    object-position:center !important;
    background:none !important;
  }

  html.lang-ko body #cinematography .cat-select,
  html:not(.lang-ko) body #cinematography .cat-select,
  html.lang-ko body #photography .cat-select,
  html:not(.lang-ko) body #photography .cat-select,
  html.lang-ko body #ai-visuals .cat-select,
  html:not(.lang-ko) body #ai-visuals .cat-select,
  html.lang-ko body #behind-scene .cat-select,
  html:not(.lang-ko) body #behind-scene .cat-select {
    width:min(100%,230px) !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 auto 16px 0 !important;
    padding:0 34px 0 12px !important;
    border-radius:12px !important;
    font-size:12.5px !important;
    line-height:12.5px !important;
    background-size:15px 15px !important;
    background-position:calc(100% - 11px) 50% !important;
  }

  html.lang-ko body .portfolio-section .section-title,
  html:not(.lang-ko) body .portfolio-section .section-title {
    font-size:clamp(1.08rem,5.5vw,1.35rem) !important;
    line-height:1.15 !important;
    letter-spacing:.06em !important;
  }
  html.lang-ko body #cinematography .section-title,
  html:not(.lang-ko) body #cinematography .section-title,
  html.lang-ko body #photography .section-title,
  html:not(.lang-ko) body #photography .section-title,
  html.lang-ko body #ai-visuals .section-title,
  html:not(.lang-ko) body #ai-visuals .section-title,
  html.lang-ko body #behind-scene .section-title,
  html:not(.lang-ko) body #behind-scene .section-title {
    font-size:clamp(1.08rem,5.5vw,1.35rem) !important;
    line-height:1.15 !important;
  }
  html.lang-ko body #about .label-tag,
  html:not(.lang-ko) body #about .label-tag,
  html.lang-ko body #contact .label-tag,
  html:not(.lang-ko) body #contact .label-tag {
    font-size:.62rem !important;
    line-height:1.3 !important;
    letter-spacing:.16em !important;
  }

  html.lang-ko body #contact .contact-form .cf-submit,
  html:not(.lang-ko) body #contact .contact-form .cf-submit,
  html.lang-ko body #contact .cf-submit,
  html:not(.lang-ko) body #contact .cf-submit {
    color:#eaf7fb !important;
    -webkit-text-fill-color:#eaf7fb !important;
    font-size:.68rem !important;
    line-height:1.2 !important;
    letter-spacing:.12em !important;
    text-shadow:0 1px 8px rgba(0,0,0,.35) !important;
  }
  html.lang-ko body #contact .cf-submit span,
  html:not(.lang-ko) body #contact .cf-submit span { color:inherit !important; -webkit-text-fill-color:inherit !important; }
}