/* Native San Francisco on macOS/iOS; system fallback on other platforms. */
:root {
  --sf-pro: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}
body { font-optical-sizing: auto; }
h1, h2, h3,
.person-details h3,
.service-caption h3,
.index-list .n {
  font-family: var(--sf-pro);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.hero-heading { width: clamp(280px, 26vw, 400px); }
.hero-heading .hero-name {
  font-size: clamp(46px, 3.9vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}
.section-heading h2, .person-copy > h2, .contact-title h2 {
  line-height: 1.04;
}
.service-caption h3 { line-height: 1.1; }
.index-list button { min-width: 0; }
.index-list .n { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .hero-heading { width: min(320px, calc(100% - 44px)); }
  .hero-heading .hero-name { font-size: clamp(36px, 9.5vw, 44px); }
  .section-heading h2 { font-size: clamp(38px, 9.8vw, 68px); }
  .contact-title h2 { font-size: 13vw; }
}

/* The project name over the home gallery is not the page heading (the h1 says what TeranBrand does). */
.hero-heading .hero-name { font-family: var(--sf-pro); margin: 0; }
/* The open project card names the project with heading type, without being an empty heading in the page. */
.pcard .pc-name { font-family: var(--sf-pro); font-weight: 300; letter-spacing: -.035em; line-height: 1.06; }