@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('/assets/fonts/suit-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* The portrait title and its supporting information share one type system. */
.nocturne-hero .hero-copy,
.site-header .wordmark {
  font-family: 'Manrope', 'SUIT', 'Helvetica Neue', sans-serif;
  font-kerning: normal;
}
.nocturne-hero h1 {
  font-family: 'Manrope', 'Helvetica Neue', sans-serif;
  font-size: clamp(4.25rem, 7vw, 6.9rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}
html[lang=ko] .nocturne-hero h1 {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(4.5rem, 7.3vw, 7rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: .025em;
}
.nocturne-hero .hero-profession {
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.45;
  margin-top: 18px;
}
.nocturne-hero .hero-credentials {
  display: grid;
  gap: 22px;
  margin: 36px 0 0;
  max-width: 27rem;
}
.nocturne-hero .hero-credentials > div,
html[lang=ko] .nocturne-hero .hero-credentials > div {
  display: block;
  margin: 0;
}
.nocturne-hero .hero-credentials dt {
  border: 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .015em;
  color: #bec6d1;
  white-space: nowrap;
}
.nocturne-hero .hero-credentials dd {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #f4f5f7;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.nocturne-hero .hero-actions { margin-top: 32px; }
.nocturne-hero .hero-resource {
  font-size: .875rem;
  letter-spacing: .035em;
}
html[lang=ko] .nocturne-hero .hero-resource { letter-spacing: 0; }

@media (max-width: 760px) {
  .nocturne-hero h1 {
    font-size: clamp(3.5rem, 12.5vw, 5.5rem);
    line-height: 1.04;
  }
  html[lang=ko] .nocturne-hero h1 {
    font-size: clamp(4rem, 16vw, 5.5rem);
  }
  .nocturne-hero .hero-profession { font-size: 1.5rem; margin-top: 12px; }
  .nocturne-hero .hero-credentials { margin-top: 28px; gap: 18px; }
  .nocturne-hero .hero-actions { margin-top: 28px; }
}