/* 13-responsive-phone-and-container-mirror.css — the site-wide phone blocks
   (@media 640px "large phone": hamburger nav, project copy), then the
   @container shell mirror of the site-wide
   900/800/640 rules: 900 is 07's .text-columns, 800 is 06's .contact-wrap,
   640 mirrors the Korean leading of this file's own block. The hero title's
   640px step is here in both forms (@media and
   @container). Component-specific breakpoints stay in their own files and
   have no mirror: 02's 1280px header email, 06's 640px field size (iOS focus
   zoom), 08's 640px work table, 10's and
   12's 900px stacks, 11's 700px gallery, 12's related-grid steps and its
   640px work-page reorder (lead picture under the title). The
   .page-shell squeeze the mirror answers (and the featured panel's hand-patch
   for it) is in 05. Must load after 00-12: same specificity, wins by order. */

/* — large phone — */
@media (max-width: 640px) {
  /* Korean reads cramped at small sizes — give KO extra leading on phones so the
     now-smaller body breathes (EN keeps its tighter 1.35; desktop KO stays 1.4). */
  html[lang^="ko"] body { line-height: 1.55; }

  /* logo down to ~1rem so it sits level with the brand text; drop the top-bar
     email on phones — it still lives in the contact section + footer. */
  .brand-logo { height: 1rem; }
  /* inline nav → hamburger dropdown under the fixed header */
  .menu-btn { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 59;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0 var(--bar-gutter);
    letter-spacing: 0.08em;
  }
  body.is-menu-open .site-nav { display: flex; }
  .site-nav a { padding: var(--block-space) 0; border-bottom: 1px solid var(--rule); }
  .site-nav a:last-child { border-bottom: 0; }

  /* detail page: full-width, larger body so it doesn't read as a thin column of
     fine print on a phone */
  .project-descriptions p {  line-height: 1.6; max-width: none; }
  .project-tags { max-width: none; }

}

/* ── Container-query mirror of the mobile breakpoints, keyed to .page-shell's
   own width rather than the viewport. Placed last (this file loads after
   00-12) so it always wins the cascade over every base rule, whichever file
   declares it (equal specificity → source order decides).
   On a real narrow phone this duplicates the @media rules above and in 06/07
   (harmless — same values). What it actually fixes: while a detail panel is
   open the shell is squeezed to ~50vw by the rule in 05-page-shell-split.css,
   and @media can't see that (it only ever reads the outer viewport) — so
   every section OTHER than .featured-panel (already hand-patched in 05) stayed at
   full desktop width crammed into half the screen. These rules make the
   whole shell go "mobile" together. Custom properties are set on .page-shell
   itself, not :root — :root is an ANCESTOR of the container, not a
   descendant, so a container query can never match it. */
/* phones (and the shell squeezed by the detail panel): the hero keeps the full
   display step — two-thirds of it would drop below the discipline index */
@media (max-width: 640px) { .hero-title { font-size: var(--text-display); } }
@container shell (max-width: 640px) { .hero-title { font-size: var(--text-display); } }

@container shell (max-width: 900px) {
  .text-columns { grid-template-columns: 1fr; }
}
@container shell (max-width: 800px) {
  .contact-wrap { grid-template-columns: 1fr; }
}
@container shell (max-width: 640px) {
  html[lang^="ko"] .page-shell { line-height: 1.55; }
}