/* 02-header-and-korean-type.css — the fixed site header (brand, nav, hamburger,
   KR/EN toggle), with the site-wide Korean tracking, word-spacing and leading in
   the middle. css/header.css, linked after, restyles the header; phones: 13. */

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--bar-gutter);
  font-family: var(--sans);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.site-header .brand {
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
}
.site-header .brand a { display: inline-flex; align-items: center; }
/* Brand wordmark — "STstudio" text in EN; the Korean 생태제작소 SVG logo in KO.
   initLang() (js/site/language.js) sets html[lang] from the saved language
   (localStorage), so this also flips on work pages. onerror falls back to the
   text if the SVG fails to load. */
.brand-logo {
  height: 20px;
  width: auto;
  display: none;
  filter: brightness(0) invert(1);   /* any source colour → white for the dark header */
}
html[lang^="ko"] .brand:not(.is-logo-failed) .brand-logo { display: block; }
html[lang^="ko"] .brand:not(.is-logo-failed) .brand-text { display: none; }

/* Korean tracking — Hangul sets tight, so the wide editorial
   tracking on labels/eyebrows (0.08–0.18em, tuned for Latin)
   reads too loose in Korean. Pull these back to ~0.02em in KO only;
   English keeps its original spacing. */
html[lang^="ko"] .section-label,
html[lang^="ko"] .hero-eyebrow,
html[lang^="ko"] .statement-foot,
html[lang^="ko"] .text-columns dt {
  letter-spacing: 0.02em;
}

/* Korean word-spacing — Hangul sets the spaces between 어절 wider than Latin
   needs, so the body prose (the only copy that's Korean) reads slightly gappy.
   Pull the inter-word gap in a touch, KO only; English is untouched. */
html[lang^="ko"] .hero-lede,
html[lang^="ko"] .text-columns p,
html[lang^="ko"] .service-item,
html[lang^="ko"] .project-descriptions p {
  word-spacing: -0.06em;
}

/* Korean line-height — Hangul has no ascenders/descenders to breathe, so the
   default 1.35 reads cramped in KO. Open the leading to 1.4 (KO only; headings
   keep their own tight line-heights, so only running prose loosens). */
html[lang^="ko"] body {
  line-height: 1.4;
  word-break: keep-all;   /* break Korean between words, not inside them */
}
/* top menu — several routes into the work: landing scroll, dense index, about */
.site-nav {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--inline-space);
  font-family: var(--sans);
  letter-spacing: 0.06em;
  text-transform: none;
}
.site-nav a { color: var(--ink); transition: opacity 0.2s ease; }
.site-nav a:hover { opacity: 0.55; }

/* hamburger — hidden on desktop; two bars that cross into an X when open */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  flex: none;             /* never let the flex column compress a bar */
  width: 100%;
  height: 2px;            /* 1px bars render at uneven sub-pixel thickness — 2px is crisp + even */
  background: var(--ink);
  transition: transform 220ms var(--ease-out);
}
body.is-menu-open .menu-btn span:first-child { transform: translateY(calc((var(--sp-2) + 2px) / 2)) rotate(45deg); }
body.is-menu-open .menu-btn span:last-child  { transform: translateY(calc((var(--sp-2) + 2px) / -2)) rotate(-45deg); }

/* the long email eats the header at laptop widths — drop it early */
@media (max-width: 1280px) {
  .site-header .header-contact { display: none; }
}

.site-header .header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-column: 3;
}

.site-header .header-contact {
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: var(--sans);
}

/* KR / EN toggle — injected into .header-actions by initLang() (js/site/language.js) */
.site-header .header-actions { gap: var(--inline-space); }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.lang-toggle [data-lang] { color: var(--muted); transition: color 0.2s ease; }
.lang-toggle [data-lang].is-on { color: var(--ink); }
.lang-toggle .lang-toggle-separator { color: var(--muted-dark); }
.lang-toggle:hover [data-lang]:not(.is-on) { color: var(--ink-soft); }