/* English typography follows the shared design system with room for longer words. */
html[lang="en"] { hyphens: auto; }
html[lang="en"] .hero-content h1 { font-size: clamp(48px, 4.8vw, 72px); letter-spacing: -.055em; max-width: 650px; }
html[lang="en"] .hero-description { max-width: 400px; }
html[lang="en"] .hero-actions { flex-wrap: wrap; }
html[lang="en"] .hero-secondary { white-space: nowrap; }
html[lang="en"] .feature-content h3 { font-size: clamp(42px, 4.5vw, 64px); }
html[lang="en"] .feature-tagline { font-size: 23px; line-height: 1.35; }
html[lang="en"] .feature-description { max-width: 300px; line-height: 1.6; }
html[lang="en"] .feature-tags { flex-wrap: wrap; }
html[lang="en"] .chapter-copy h3 { font-size: 35px; }
html[lang="en"] .chapter-copy .chapter-evidence { flex-wrap: wrap; }
html[lang="en"] .chapter-tagline { line-height: 1.4; }
html[lang="en"] .contribution-steps { flex-wrap: wrap; }
html[lang="en"] .studio-principles { flex-wrap: wrap; }
html[lang="en"] .product-title-row h1 > span { display: block; margin: 14px 0 0; font-size: 14px; letter-spacing: .15em; }
html[lang="en"] .tread-card h3 > span { display: block; max-width: 80%; margin: 9px 0 0; line-height: 1.5; }
html[lang="en"] .board-meta { gap: 18px; flex-wrap: wrap; }
html[lang="en"] .site-header nav { gap: 24px; }
html[lang="en"] .site-header .language-link { font-size: 12px; }
html[lang="en"] .language-link { white-space: nowrap; }
html[lang="en"] .range-label { gap: 12px; }
html[lang="en"] .range-label output { white-space: nowrap; }
html[lang="en"] .document-info h3 { line-height: 1.4; }
html[lang="en"] .notebook-heading h2, html[lang="en"] .section-heading h2, html[lang="en"] .materials-heading h2 { line-height: 1.2; }
@media (max-width: 1024px) and (min-width: 768px) {
  html[lang="en"] .site-header nav { gap: 17px; }
  html[lang="en"] .site-header .brand-logo { width: 140px; }
  html[lang="en"] .feature-content { width: 55%; }
}
@media (max-width: 767px) {
  html[lang="en"] body > main > header { height: auto; min-height: 80px; flex-wrap: wrap; padding-block: 20px; gap: 16px; font-size: 10px; }
  html[lang="en"] body > main > header img { width: 115px; }
  html[lang="en"] .hero-content h1 { font-size: clamp(40px, 8.5vw, 62px); line-height: 1.18; }
  html[lang="en"] .hero-description { max-width: 340px; }
  html[lang="en"] .hero-actions { gap: 18px; }
  html[lang="en"] .hero-bottom { gap: 18px; }
  html[lang="en"] .hero-bottom > span { flex: 1 1 0; min-width: 0; line-height: 1.6; }
  html[lang="en"] .hero-bottom > a { flex: 0 0 auto; gap: 10px; white-space: nowrap; }
  html[lang="en"] .hero-actions .button { gap: 15px; }
  html[lang="en"] .home-page .site-header nav > a.language-link { display: inline-flex; }
  html[lang="en"] .site-header nav { gap: 12px; }
  html[lang="en"] .site-header .brand-logo { width: 124px; }
  html[lang="en"] .nav-idea, html[lang="en"] .home-page .nav-idea { padding: 10px 12px; font-size: 10px; gap: 8px; }
  html[lang="en"] .feature-content h3 { font-size: 43px; }
  html[lang="en"] .feature-tagline { font-size: 21px; }
  html[lang="en"] .product-title-row h1 { font-size: clamp(42px, 11vw, 60px); }
  html[lang="en"] .tread-intro h1 { font-size: clamp(40px, 10vw, 56px); }
  html[lang="en"] .tread-intro h2 { font-size: 26px; }
  html[lang="en"] .chapter-copy h3 { font-size: 31px; }
  html[lang="en"] .collection-intro h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.18; }
  html[lang="en"] .studio-copy h2 { line-height: 1.2; }
  html[lang="en"] .site-footer .footer-links { gap: 12px; }
  html[lang="en"] .section-heading, html[lang="en"] .materials-heading { gap: 22px; }
}
@media (max-width: 480px) {
  html[lang="en"] .site-header nav > a:nth-child(2) { display: none; }
  html[lang="en"] .site-header .brand-logo { width: 108px; }
  html[lang="en"] .site-header nav { gap: 10px; }
  html[lang="en"] .site-header { gap: 10px; }
  html[lang="en"] .nav-idea { font-size: 9px; }
  html[lang="en"] .hero-content h1 { font-size: clamp(38px, 9vw, 43px); }
  html[lang="en"] .collection-intro h1 { font-size: 28px; }
  html[lang="en"] .feature-topline { flex-wrap: wrap; gap: 12px; }
  html[lang="en"] .feature-tags { gap: 6px; }
  html[lang="en"] .feature-bottom { gap: 12px; }
}