/* Typography by art direction. Fonts are local; long-form text stays sans-serif. */
@font-face {
  font-family: 'QZW Portfolio Sans';
  src: url('assets/fonts/QZWSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'QZW Portfolio Sans';
  src: url('assets/fonts/QZWSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'QZW Portfolio Serif';
  src: url('assets/fonts/QZWSerif-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
html[data-style=engineering],
html[data-style=editorial] {
  --sans: 'Manrope', 'QZW Portfolio Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --editorial-heading: 'Manrope', 'QZW Portfolio Serif', 'Noto Serif CJK SC', 'Songti SC', serif;
  font-family: var(--sans);
}
html[data-style=engineering] :is(h1, h2, h3, .brand, .intro-lead) {
  font-family: var(--sans);
  letter-spacing: 0;
}
html[data-style=engineering] .intro-column h1,
html[data-style=engineering] .intro-column h1 > span {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.025em;
}
html[data-style=engineering] .page-lead h1,
html[data-style=engineering] .contact-intro h1 {
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.4;
}
html[data-style=engineering] .intro-lead { font-weight: 700; line-height: 1.6; }
html[data-style=engineering] .block-heading h2 { font-size: 18px; font-weight: 700; }
html[data-style=engineering] .brand { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.04em; }
html[data-style=editorial] :is(.intro-column h1, .intro-lead, .page-lead h1,
  .contact-intro h1, .block-heading h2, .project-card h2, .dialog-content h2) {
  font-family: var(--editorial-heading);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
}
html[data-style=editorial] .intro-column h1 > span {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .02em;
}
html[data-style=editorial] .project-card h2 > button {
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.5;
}
html[data-style=editorial] .portfolio-download > .download-heading {
  font-family: var(--editorial-heading);
  font-weight: 600;
  letter-spacing: .015em;
}
html[data-style=editorial] .paper-content h2 > span {
  font-family: var(--editorial-heading);
  font-weight: 600;
  line-height: 1.7;
}
html[data-style=editorial] .site-menu nav > a > span {
  font-family: var(--editorial-heading);
  font-weight: 600;
  letter-spacing: .02em;
}
html[data-style=editorial] :is(.editorial-masthead, .brand, .paper-content h2) {
  font-family: 'Manrope', var(--sans);
}
html[data-style=editorial] .editorial-masthead > span {
  font-size: clamp(44px, 6.5vw, 100px);
  letter-spacing: -.055em;
  font-weight: 650;
}
html[data-style=editorial] .intro-column h1 { font-size: clamp(30px, 3vw, 44px); }
html[data-style=editorial] .intro-lead { font-size: clamp(28px, 3.3vw, 47px); line-height: 1.6; }
html[data-style=editorial] .contact-intro h1 { font-size: clamp(40px, 4.5vw, 64px); }
html[data-style=editorial] .block-heading h2 { font-size: 20px; }
html[data-style=engineering] .intro-summary,
html[data-style=editorial] .intro-summary { line-height: 1.95; }
html[data-style=engineering] .project-card h2,
html[data-style=editorial] .project-card h2 { line-height: 1.5; min-height: 3em; }
@media (max-width: 680px) {
  html[data-style=editorial] .editorial-masthead > span { font-size: clamp(50px, 12vw, 76px); }
  html[data-style=engineering] .intro-column h1 { font-size: 34px; }
  html[data-style=editorial] .intro-column h1 { font-size: 29px; }
  html[data-style=editorial] .intro-lead { font-size: 34px; }
  html[data-style=editorial] .page-lead h1 { font-size: 35px; }
  html[data-style=editorial] .contact-intro h1 { font-size: 40px; }
  html[data-style=engineering] .project-card h2,
  html[data-style=editorial] .project-card h2 { min-height: 0; }
  html[data-style=engineering] .brand,
  html[data-style=editorial] .brand { font-size: 20px; }
}
@media (max-width: 380px) {
  html[data-style=engineering] .intro-column h1 { font-size: 30px; }
  html[data-style=editorial] .intro-column h1 { font-size: 25px; }
  html[data-style=editorial] .intro-lead { font-size: 30px; }
  html[data-style=engineering] .brand,
  html[data-style=editorial] .brand { font-size: 18px; }
}