/* ---------------------------------------------------------------------------
   TYPE — EB Garamond + Archivo

   Display: EB Garamond Medium    Body and labels: Archivo

   Two typefaces, not three. The monospace face is gone: eyebrows, nav and
   small labels are set in Archivo, uppercase and letterspaced, which removes
   the third voice the V5.3 system had.

   Self-hosted WOFF2, so nothing is requested from Google. This file loads
   after every other stylesheet, so deleting it restores the previous type
   exactly.

   Sizes follow the type spec:
     H1 64/66 desktop, 42/44 mobile     H2 42/46 desktop, 32/36 mobile
     Body 18/28 desktop, 17/27 mobile   Label 12/16, uppercase, 0.10em
     Buttons 13px uppercase, square corners
   ------------------------------------------------------------------------- */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); }

:root {
  --type-family-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --type-family-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-family-label: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --type-body-medium-size: 1.0625rem;      /* 17px mobile */
  --type-body-medium-line-height: 1.59;    /* 27px */
  --type-body-large-line-height: 1.55;
  --type-body-small-line-height: 1.55;

  --type-label-standard-size: 0.6875rem;
  --type-label-standard-line-height: 1.36;
  --type-label-standard-tracking: 0.10em;
  --type-label-small-size: 0.6875rem;
  --type-label-small-tracking: 0.10em;
}

@media (min-width: 960px) {
  :root {
    --type-body-medium-size: 1.125rem;     /* 18px */
    --type-body-medium-line-height: 1.556; /* 28px */
    --type-label-standard-size: 0.75rem;   /* 12px */
    --type-label-standard-line-height: 1.333;
    --type-label-small-size: 0.75rem;
  }
}

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

/* Headings: EB Garamond Medium */
h1, h2, h3, h4 {
  font-family: var(--type-family-display);
  font-weight: 500;
}

h1 { font-size: 2.625rem; line-height: 1.048; letter-spacing: -0.012em; }
h2, .split__body h2 { font-size: 2rem; line-height: 1.125; letter-spacing: -0.008em; }
h3 { font-size: 1.375rem; line-height: 1.2; }

@media (min-width: 960px) {
  h1 { font-size: 4rem; line-height: 1.031; }
  h2, .split__body h2 { font-size: 2.625rem; line-height: 1.095; }
  h3 { font-size: 1.625rem; }
}

/* Body copy */
/* The lede sits at body size. A two pixel step read as a mistake rather than
   as hierarchy, so the opening sentence is now separated by space alone. */
.lede, .split__body .lede {
  font-family: var(--type-family-body);
  font-size: var(--type-body-medium-size);
  line-height: var(--type-body-medium-line-height);
}

.body-copy, .card__body, p { line-height: var(--type-body-medium-line-height); }

/* Labels and nav: Archivo, not mono */
.label {
  font-family: var(--type-family-label);
  font-weight: 600;
  letter-spacing: 0.10em;
}

.site-nav__link {
  font-family: var(--type-family-label);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Buttons.

   This file previously set a 2px radius here, on the argument that square
   corners sit better with a serif. Because this stylesheet loads last it
   beat the pill rule in style.css, so the site has been square since the
   font change. Giulia reviewed both side by side on 7 October and chose
   the pill, so the radius decision now lives in style.css and is not
   repeated here. */
.btn {
  font-family: var(--type-family-body);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding-inline: 1.9rem;
}

/* Arrow links: medium, not semibold */
.link-arrow {
  font-family: var(--type-family-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Quotes stay in the display face */
.quote__text { font-family: var(--type-family-display); font-weight: 400; }

/* Wordmark stays as designed */
.brand-lockup .wordmark { font-family: var(--type-family-display); }