/* Liive typography system: editorial, interface and utility voices */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans/mona-sans-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans Mono";
  src: url("../fonts/mona-sans/mona-sans-mono-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --font-display: "Mona Sans", Arial, sans-serif;
  --font-interface: "Mona Sans", Arial, sans-serif;
  --font-utility: "Mona Sans Mono", ui-monospace, monospace;
  --weight-display: 300;
  --weight-body: 350;
  --weight-interface: 400;
  --weight-emphasis: 600;
  --stretch-display: 90%;
  --stretch-editorial: 95%;
  --stretch-body: 100%;
  --tracking-display: -.01em;
  --tracking-body: 0;
  --type-display-size: 64px;
  --type-display-line: 1;
  --type-hero-size: 48px;
  --type-hero-line: 1;
  --type-feature-size: 48px;
  --type-feature-line: 1;
  --type-editorial-size: 36px;
  --type-editorial-line: 1.16;
  --type-section-size: 38px;
  --type-section-line: 1.1;
  --type-heading-size: 32px;
  --type-heading-line: 1.1;
  --type-subheading-size: 24px;
  --type-subheading-line: 1.2;
  --type-body-size: 16px;
  --type-body-line: 1.3;
  --type-detail-size: 14px;
  --type-detail-line: 1.3;
  --type-meta-size: 12px;
  --type-meta-line: 1.2;
  --type-utility-size: 11px;
  --type-utility-line: 1;
  --type-micro-size: 9px;
  --type-micro-line: 1;
  --type-features: "ss05" 1, "ss06" 1;
  --sans: var(--font-interface);
  --mono: var(--font-utility);
}

body {
  font-family: var(--font-interface);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--weight-body);
  font-stretch: var(--stretch-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: var(--type-features);
  font-optical-sizing: auto;
}

:is(
  h1,
  h2,
  h3,
  .hero-tagline,
  .project-title,
  .about-phrase,
  .experience-item,
  .contact-link,
  .work-tile-copy b,
  .privacy-intro
) {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
}

:is(
  .project-summary,
  .work-copy,
  .about-founder-intro,
  .about-founder-copy,
  .experience-detail p,
  .engagements-intro-copy,
  .subscription-tier__summary,
  .subscription-tier__features,
  .subscription-terms,
  .work-tile-copy span,
  .project-profile-section > span,
  .privacy-summary p,
  .privacy-content p
) {
  font-family: var(--font-interface);
  font-weight: var(--weight-body);
  font-stretch: var(--stretch-body);
  letter-spacing: var(--tracking-body);
}

.studio-manifesto__stage {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-editorial);
  letter-spacing: var(--tracking-display);
}

@media (max-width: 833px) {
  :root {
    --tracking-display: 0;
    --type-display-size: 44px;
    --type-display-line: 1;
    --type-hero-size: clamp(31px, 9.23vw, 36px);
    --type-feature-size: 36px;
    --type-feature-line: 1;
    --type-editorial-size: 24px;
    --type-editorial-line: 1.3;
    --type-section-size: 30px;
    --type-section-line: 1.1;
    --type-heading-size: 24px;
    --type-heading-line: 1.15;
    --type-subheading-size: 22px;
    --type-subheading-line: 1.2;
    --type-body-size: 15px;
    --type-detail-size: 13px;
  }
}