/* =========================================================
   Institute of Youth Future Strategy — English page overrides
   The page loads ../styles.css (Korean site) first; this file only
   adjusts what English text needs: tracking, wrapping, line lengths,
   and a wider breakpoint for the hamburger menu (longer wordmark).
   ========================================================= */

/* Typefaces (from the Claude Design EN file): Public Sans for text/UI,
   Source Serif 4 for headings. The logo keeps the brand fonts
   (Libre Franklin for the English name, IBM Plex Sans KR for the Korean name). */
:root {
  --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
/* Latin text: normal word breaking and much looser tracking than Korean */
body { font-family: var(--font-text); word-break: normal; overflow-wrap: break-word; hyphens: manual; }
.btn, .site-nav a, .policy-dialog { font-family: var(--font-text); }
.hero-title, .headline, .policy-dialog h2 {
  font-family: var(--font-serif);
  font-weight: 600;
}
.hero-title-a { font-weight: 600; }
.hero-title-b { font-weight: 700; }
.btn { border-radius: 4px; }

/* Logo: mark | English name over Korean name */
.brand { gap: var(--s-3); }
.brand-rule { width: 1px; height: 34px; background: var(--border-strong); flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-family: var(--font-en);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.brand-ko {
  font-family: var(--font-ko);
  font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}
.hero-title { max-width: none; letter-spacing: -0.03em; }
.headline { max-width: 22em; letter-spacing: -0.025em; }
.headline--sm { max-width: 20em; }
.footer-name { font-family: var(--font-en); font-weight: 600; letter-spacing: -0.005em; }
.btn { letter-spacing: 0; }

/* Body copy: comfortable English measure (~70–75 characters) */
.prose { max-width: 40em; }
.prose p, .prose li { text-wrap: pretty; }

/* Hero title size: English lines are longer than Korean ones */
.hero-title { font-size: clamp(34px, 3.9vw, 56px); }
.hero-title br { display: none; }
.hero-title-a, .hero-title-b { display: block; text-wrap: balance; }
@media (min-width: 641px) and (max-width: 900px) {
  .hero-title { font-size: 44px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 28px; line-height: 1.24; }
}
/* Footer legal links: one per line on small phones (avoids a stray "|" at a line start) */
@media (max-width: 480px) {
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .footer-legal li + li::before { content: none; }
}

/* Footer: Korean name under the English name */
.footer-ko {
  margin-top: 4px;
  font-family: var(--font-ko);
  font-size: 12px; font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(251, 251, 250, .72);
}

/* Hamburger menu from 960px down (the English wordmark + nav need more room).
   Same rules as the Korean page's ≤760px menu. */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 16px 32px -16px rgba(16, 26, 43, .25);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .no-js .nav-toggle { display: none; }
  .no-js .site-nav { position: static; display: block; box-shadow: none; border: 0; background: transparent; }
  .site-nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-2) var(--gutter) var(--s-6);
  }
  .site-nav li + li { border-top: 1px solid var(--border); }
  .site-nav a { min-height: 56px; padding: 0; font-size: 17px; width: 100%; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .site-nav li:last-child { border-top: 0; padding-top: var(--s-4); }
  .site-nav .nav-cta { margin: 0; justify-content: center; min-height: 52px; }
}
/* Mobile: the English wordmark wraps onto two lines instead of overflowing */
@media (max-width: 640px) {
  .brand-name { white-space: normal; font-size: 14px; }
  .brand-ko { font-size: 11px; }
  .brand-rule { height: 30px; }
}

/* Founding statement caption: source line + translation note on its own line */
.charter figcaption { padding-left: calc(var(--s-6) + 1.1em); text-indent: -1.1em; }   /* wrapped lines align after the dash */
.charter-note { display: block; margin-top: 2px; text-indent: 0; font-size: .875em; }