/* Language-specific reading rhythm for Noto Sans English and NanumSquareNeo Korean.
   Keep this after responsive styles so each language stays consistent. */
@font-face {
  font-family: 'InKAS Gosha';
  src: url('/assets/design/fonts/PPGoshaSans-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.inkas-word {
  font-family: 'InKAS Gosha', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit;
  letter-spacing: inherit;
}
.brand-caption-text { position: relative; display: inline-block; white-space: nowrap; }
html[lang=en] .public-design .site-header .nav,
html[lang=en] .public-design .site-header .nav :is(.navlinks,a,button,span) {
  font-family: 'InKAS Gosha', sans-serif;
}
html[lang=en] .public-design .footer .footer-brand-subheading {
  font-size: calc(9px + 2pt);
}
@media (max-width: 700px) {
  html[lang=en] .public-design .footer .footer-brand-subheading {
    font-size: calc(clamp(6.0125px,1.71125vw,7.4px) + 2pt);
  }
  html[lang=en] .public-design .footer a.footer-home { width: max-content; max-width: none; }
  html[lang=en] .public-design .footer .footer-logo { width: 132px; }
}
html[lang] .public-design .brand-caption-fitted {
  text-align: left;
  text-align-last: left;
  text-justify: auto;
  white-space: nowrap;
}
:root { --reading-line-height: 1.85; }
html[lang=en] { --reading-line-height: 1.6; }

html[lang] body.public-design { line-height: 1.5; }

/* About, News and Gallery share the same bold page-title treatment. */
html[lang] body.public-design #main :is(.about-hero, .collection-heading) h1 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.055em;
}

html[lang] body.public-design #main :is(.about-page, .connection-home) p,
html[lang] body.public-design #main .about-detail li,
html[lang] body.public-design #main .article-body {
  line-height: var(--reading-line-height);
}

/* These headings previously inherited font-dependent normal line heights. */
html[lang] body.public-design #main .about-page :is(h3, h4) {
  line-height: 1.4;
}

/* Fit English into the current Korean hero without changing Korean's layout.
   Hidden, inaccessible Korean copies reserve the exact responsive text height. */
.connection-hero-copy :is(h1, p) { position: relative; }
.connection-hero-copy .connection-copy-reference {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  font-family: 'NanumSquareNeo', Arial, sans-serif;
}
.connection-hero-copy h1 .connection-copy-reference>span { display: block; }
.connection-hero-copy p>.connection-copy-translation {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: normal;
}
.connection-hero-copy h1>.connection-copy-translation {
  display: block;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: -.055em;
}
html[lang=en] .connection-hero-copy h1>.connection-copy-reference { display: none; }
.connection-hero-copy h1>.connection-copy-translation>span { display: block; white-space: nowrap; }
.connection-hero-copy p>.connection-copy-reference { line-height: 1.85; }

/* Use Korean's type rhythm and one shared mobile footprint across languages. */
@media (max-width: 700px) {
  .connection-hero-copy { --reading-line-height: 1.85; }
  .public-design .connection-home .connection-hero-copy>.connection-kicker {
    height: 20px;
    line-height: 20px;
  }
  html[lang] .public-design .connection-home .connection-hero h1 {
    min-height: 3.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
  }
  html[lang=en] .connection-hero-copy h1>.connection-copy-reference { display: none; }
  html[lang=en] .connection-home .connection-hero h1>.connection-copy-translation {
    position: static;
    display: block;
    font-size: 1em;
    line-height: 1.2;
  }
  html[lang] .public-design .connection-home .connection-hero-copy>p {
    line-height: 1.85;
  }
  .connection-hero-copy p>.connection-copy-translation {
    display: block;
    line-height: inherit;
  }
}
