/* Option 2 homepage type system. Loaded after the homepage styles only. */
:root {
  --type-small: 14px;
  --type-body: 16px;
  --type-lead: 20px;
  --type-subheading: 28px;
  --type-section: clamp(32px, 4vw, 56px);
  --type-display: clamp(56px, 8vw, 128px);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

body[data-type="archivo"] {
  font-family: "Archivo Variable", sans-serif;
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
}

/* Main reading copy and ordinary inline text use the body token. */
body[data-type="archivo"] #main-content :not(h1, h2, h3, h4, h5, h6):is(
  p, span, strong, b, small, li, dt, dd, label, input, textarea, select, button, a
) {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
}

body[data-type="archivo"] #main-content :not(h1, h2, h3, h4, h5, h6):is(strong, b) {
  font-weight: var(--weight-medium);
}

body[data-type="archivo"] #main-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Archivo Variable", sans-serif;
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

body[data-type="archivo"] #main-content h1 {
  font-size: var(--type-display);
  font-weight: var(--weight-regular);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

body[data-type="archivo"] #main-content h2 {
  font-size: var(--type-section);
  letter-spacing: -0.04em;
  line-height: 1.04;
}

body[data-type="archivo"] #main-content .consultation--integrated .consultation__copy h2 {
  font-size: var(--type-subheading);
}

body[data-type="archivo"] #main-content h3,
body[data-type="archivo"] #main-content h4,
body[data-type="archivo"] #main-content h5,
body[data-type="archivo"] #main-content h6 {
  font-size: var(--type-subheading);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

body[data-type="archivo"] #main-content :is(h1, h2, h3, h4, h5, h6) a,
body[data-type="archivo"] #main-content :is(h1, h2, h3, h4, h5, h6) span {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Hero statement and supporting line stay legible at every width. */
body[data-type="archivo"] #main-content .hero__support {
  grid-column: 8 / span 4;
  width: 100%;
  max-width: 40ch;
  margin-bottom: 1.65rem;
  font-size: var(--type-lead);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  text-wrap: pretty;
}

body[data-type="archivo"] #main-content .hero__content .button,
body[data-type="archivo"] #main-content :is(.button, button) {
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
}

body[data-type="archivo"] #main-content .eyebrow,
body[data-type="archivo"] #main-content .project-kind,
body[data-type="archivo"] #main-content .project-facts dt,
body[data-type="archivo"] #main-content .project-row dt,
body[data-type="archivo"] #main-content .founder-card p,
body[data-type="archivo"] #main-content .advisory-path > div > span,
body[data-type="archivo"] #main-content .contact-options span,
body[data-type="archivo"] #main-content .field label,
body[data-type="archivo"] #main-content .field label span,
body[data-type="archivo"] #main-content .form-actions > p {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

/* Preserve the existing navy as the readable label color on the pale about field. */
body[data-type="archivo"] #main-content .about-v2__intro .eyebrow,
body[data-type="archivo"] #main-content .partner-strip .eyebrow {
  color: #0c436a;
}

body[data-type="archivo"] #main-content .project-facts dd,
body[data-type="archivo"] #main-content .project-row dd,
body[data-type="archivo"] #main-content .project-row__main > span,
body[data-type="archivo"] #main-content .founder-card span,
body[data-type="archivo"] #main-content .achievement-grid article span {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
}

body[data-type="archivo"] #main-content .achievement-grid article strong {
  font-size: var(--type-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.04em;
  line-height: 1;
}

body[data-type="archivo"] #main-content .contact-options strong {
  font-size: var(--type-lead);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.35;
}

body[data-type="archivo"] header.site-header .desktop-nav {
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

body[data-type="archivo"] header.site-header :is(.menu-trigger, .header-contact) {
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

body[data-type="archivo"] header.site-header .brand,
body[data-type="archivo"] header.site-header .brand__name {
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Menu links use a readable heading step while their utility details stay body-sized. */
body[data-type="archivo"] .menu-overlay :not(h1, h2, h3, h4, h5, h6):is(a, span, p, strong, b) {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

body[data-type="archivo"] .menu-overlay :is(.menu-overlay__nav a, .menu-columns__primary a) {
  font-size: var(--type-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

body[data-type="archivo"] .menu-overlay :is(.menu-board__contact > p, .menu-feature__copy > span) {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
}

@media (max-width: 48rem) {
  body[data-type="archivo"] #main-content .hero h1 span + span,
  body[data-type="archivo"] #main-content .hero__support { color: #fff; }
  body[data-type="archivo"] #main-content .about-v2 .founder-card span { color: rgb(255 255 255 / 0.88); }
  body[data-type="archivo"] #main-content .about-v2__intro h2 { max-width: none; }
  body[data-type="archivo"] #main-content .consultation--integrated .consultation__copy h2 { max-width: none; }
}