:root {
  --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-nav: 11px;
  --type-label: 10px;
  --type-caption: 12px;
  --type-body: 15px;
  --type-question: clamp(18px, 1.65vw, 24px);
  --type-section: clamp(30px, 3.6vw, 52px);
  --type-feature: clamp(42px, 4.8vw, 72px);
}

html,
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
p,
a,
small,
strong,
span,
figcaption,
blockquote {
  font-family: var(--font-primary) !important;
}

body {
  font-size: var(--type-body);
  line-height: 1.55;
}

.site-header,
.main-nav a,
.salt-story-nav a {
  font-size: var(--type-nav);
  font-weight: 500;
  letter-spacing: .01em;
}

.section-kicker,
.salt-scene-number,
.archive-unfold-kicker,
.breath-copy small,
.breath-copy-final,
.breath-scroll-note,
.archive-unfold-note,
.salt-media figcaption span,
.familiar-placeholder figcaption span {
  font-size: var(--type-label) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.salt-summary,
.archive-unfold-copy p,
.breath-copy p,
.abstract p,
.about-view p {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.salt-media figcaption,
.familiar-placeholder figcaption {
  font-size: var(--type-caption);
  line-height: 1.45;
}

.salt-media figcaption strong,
.salt-media.editorial-crop figcaption strong {
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.salt-question,
.salt-scene--familiar .salt-question {
  font-size: var(--type-question);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.012em;
}

.salt-scene-head h3 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
}

.archive-unfold-copy h3,
.breath-copy h3 {
  font-size: var(--type-feature);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.045em;
}

.breath-copy-line {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.hero-copy h1 {
  font-size: clamp(50px, 9vw, 116px);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.055em;
}

.project-overview h2,
.directory-view h2,
.about-view h2 {
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.045em;
}

.archive-force-layer figcaption {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .07em;
}

@media (max-width: 760px) {
  :root {
    --type-body: 14px;
    --type-question: clamp(17px, 5vw, 21px);
    --type-section: clamp(28px, 8vw, 42px);
    --type-feature: clamp(38px, 11vw, 56px);
  }
}