/* Supplied Urbane faces: use their real weights throughout the site. */
@font-face {
  font-family: 'Urbane';
  src: url('assets/fonts/Urbane-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('assets/fonts/Urbane-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('assets/fonts/Urbane-DemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('assets/fonts/Urbane-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body {
  font-family: 'Urbane', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-kerning: normal;
}
strong, b { font-weight: 700; }

/* Light display type keeps the large statements open and spacious. */
h1 { font-weight: 300; letter-spacing: -.05em; line-height: 1.06; }
h2, .studio-copy h2, .questions h2, .contact h2, .case-intro > h2 {
  font-weight: 300;
  letter-spacing: -.04em;
}
.services .momentum h3 {
  font-weight: 300;
  letter-spacing: -.04em;
}

/* Medium gives titles, small labels and actions a clear hierarchy. */
h3, .services .package h3, .project-name, .process h3,
.case-description > h3, .retainer-name, .studio-signature > p {
  font-weight: 500;
  letter-spacing: -.025em;
}
.eyebrow, .site-header nav, .contact-link, .text-link, .button,
.guide-link, .project-view, .dialog-close, summary,
.project-category, .timeline, .retainer-term, .retainer-price > span,
.scope-note, .services .scope-note, .quiet, .case-description ul,
.case-gallery figcaption, .studio-signature p span, footer {
  font-weight: 500;
}
.site-header nav { letter-spacing: .055em; }
.eyebrow { letter-spacing: .1em; }
.package-label .eyebrow { letter-spacing: .07em; }

/* DemiBold anchors the package investments without weighing down headings. */
.services .price, .services .retainer-price {
  font-weight: 600;
  letter-spacing: -.035em;
}
.faq-email { font-weight: 600; }
details summary > span { font-weight: 300; }

@media (max-width: 700px) {
  h1 { font-size: clamp(40px, 9.1vw, 66px); letter-spacing: -.05em; }
  .site-header nav a { letter-spacing: .055em; }
  .contact h2 { font-size: clamp(36px, 9.5vw, 62px); }
}
@media (max-width: 360px) {
  h1 { font-size: clamp(30px, 10vw, 36px); }
  .services .package h3 { font-size: 34px; }
  .studio-copy h2 { font-size: 33px; }
}