@font-face {
  font-family: 'Noto Serif Display';
  src: url('fonts/NotoSerifDisplay-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif Display';
  src: url('fonts/NotoSerifDisplay-Italic-Variable.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* Cormorant has no Greek. This face has Greek and Cyrillic, and runs larger, so it is set a little smaller and lighter. */
html:lang(el), html:lang(ru) {
  --serif: 'Noto Serif Display', Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
}
html:lang(el) h1, html:lang(ru) h1 {
  font-size: clamp(3.2rem, 5.4vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
}
html:lang(el) :is(h2, h3), html:lang(ru) :is(h2, h3) { font-weight: 400; letter-spacing: -.02em; }
html:lang(el) h1 em, html:lang(ru) h1 em { font-weight: 400; }
html:lang(el) .process-copy > h2, html:lang(ru) .process-copy > h2,
html:lang(el) .availability h2, html:lang(ru) .availability h2 { font-size: clamp(2.7rem, 4.2vw, 4.6rem); line-height: 1.05; }
html:lang(el) .steps h3, html:lang(ru) .steps h3 { font-size: clamp(1.4rem, 1.9vw, 1.95rem); }
html:lang(el) .outfit h3, html:lang(ru) .outfit h3 { font-size: clamp(2.05rem, 2.85vw, 3.15rem); line-height: 1.05; }
html:lang(el) :is(.outfit, .editorial) figcaption, html:lang(ru) :is(.outfit, .editorial) figcaption { font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.3; }
html:lang(el) .editorial figcaption, html:lang(ru) .editorial figcaption { font-size: .92rem; }
@media (max-width: 900px) and (min-width: 761px) {
  html:lang(el) h1, html:lang(ru) h1 { font-size: clamp(2.7rem, 5.7vw, 3.5rem); }
}
@media (max-width: 760px) {
  html:lang(el) h1, html:lang(ru) h1 { font-size: clamp(2.25rem, 11.1vw, 4.75rem); }
}