@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
  --font-heading: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Source Serif 4", "Times New Roman", Times, serif;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

h1,
h2,
h4,
h1.home-title,
h1.home-title__sub,
h2.home-title__sub_link,
.header-title,
.header-title h1,
.header-title p,
.text-box h1,
.text-box h2,
.case-study-header,
.top-copy-case-study h1,
.container-3 h1,
.flex-container-portfolio h1,
.flex-container-portfolio-reverse h1,
.contact-banner h1,
.bold-heading,
.navigation__link,
.index-nav-link,
.index-page,
.site-menu__link,
button,
.first.standard,
.first.standard a,
.portfolio-card-title,
.duetto-prototype-caption {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

h1,
h2,
h4 {
  line-height: 1.4;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.375rem, 3.5vw, 3.25rem);
}

h2 {
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: 700;
}

.header-title,
.header-title h1 {
  font-weight: 700;
}

.header-title h1 {
  font-size: clamp(1.75rem, 5vw, 3.125rem);
  line-height: 1.4;
}

.text-box h1 {
  font-size: clamp(1.375rem, 3.5vw, 3.25rem);
  line-height: 1.4;
  font-weight: 700;
}

p,
li,
.text-box p,
.text-box li,
.paragraph-hw,
.top-copy-case-study p,
.container-3 p,
.flex-container-portfolio p,
.flex-container-portfolio-reverse p,
.contact-banner p,
.header-title p,
.project-slide-description-text,
.home-title__sub,
.copyright p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

li {
  font-size: 18px;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a {
  font-family: inherit;
}

button,
.first.standard,
.first.standard a {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Mobile — Brythm-scale typography (neils.work/brythm) */
@media (max-width: 767px) {
  body {
    font-size: 18px;
    line-height: 1.7;
  }

  p,
  li,
  .text-box p,
  .text-box li,
  .paragraph-hw,
  .top-copy-case-study p,
  .container-3 p,
  .flex-container-portfolio p,
  .flex-container-portfolio-reverse p,
  .contact-banner p,
  .project-slide-description-text,
  .home-title__sub,
  .copyright p {
    font-size: 18px;
    line-height: 1.7;
  }

  /* Page title — Brythm .page-title at ≤960px */
  .header-title h1,
  .top-copy-case-study h1 {
    font-size: 36px;
    line-height: 1.25;
  }

  /* Intro / meta line under title — Brythm .page-description */
  .header-title p,
  .top-copy-case-study p {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
  }

  /* Section headings — Brythm h3 / .project-slide-description-title at ≤812px */
  .text-box h1 {
    font-size: 22px;
    line-height: 1.35;
  }

  h2,
  .text-box h2 {
    font-size: 26px;
    line-height: 1.35;
  }

  h3 {
    font-size: 22px;
    line-height: 1.35;
    text-transform: none;
    font-weight: 700;
  }

  .tag-box h3 {
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    font-weight: 700;
  }

  .flex-container-portfolio h1,
  .flex-container-portfolio-reverse h1,
  .container-3 h1 {
    font-size: 26px;
    line-height: 1.35;
  }

  .portfolio-content p {
    font-size: 18px;
    line-height: 1.7;
  }

  a.portfolio-card.portfolio-card--overlay .card-heading {
    font-size: 14px;
    line-height: 1.35;
  }
}