/* Gulzar, Google Fonts; license: /fonts/gulzar-OFL.txt */
@font-face {
  font-family: 'Gulzar';
  src: url("/fonts/gulzar-regular.ttf") format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Newsreader, Google Fonts; license: /fonts/newsreader-OFL.txt */
@font-face {
  font-family: 'Newsreader';
  src: url("/fonts/newsreader-variable.ttf") format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* Host Grotesk; license: /fonts/host-grotesk-OFL.txt */
@font-face {
  font-family: "Host Grotesk";
  src: url("/fonts/host-grotesk-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk; license: /fonts/hanken-grotesk-OFL.txt */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* True italic companion; shares /fonts/hanken-grotesk-OFL.txt. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Dela Gothic One, Google Fonts; wordmark subset. License: /fonts/dela-gothic-one-OFL.txt */
@font-face {
  font-family: "Dela Gothic One";
  src: url("/fonts/dela-gothic-one-guava.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Metrics fitted to this lowercase wordmark, including the g descender. */
  ascent-override: 60%;
  descent-override: 28%;
  line-gap-override: 0%;
}

@layer base {
  :root {
    --type-brand: "Dela Gothic One", sans-serif;
    --type-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --type-heading: "Host Grotesk", var(--type-body);
    --type-heading-tracking: -.015em;
    --type-brand-tracking: -.04em;
  }
  :is(h1, h2, h3) { letter-spacing: var(--type-heading-tracking); }
}

@layer components {
  :is(.guava-landing, .blog-layout) {
    --type-heading: "Host Grotesk", var(--type-body);
    --type-heading-weight: 800;
    --type-heading-leading: 1.15;
    --type-subheading-leading: 1.25;
    --type-body-leading: 1.5;
    --type-body-size: clamp(16px, 1.25vw, 18px);
    --type-reading-measure: 65ch;
    font-family: var(--type-body);
  }
  .brand-wordmark {
    font-family: var(--type-brand);
    font-weight: 400;
    font-style: normal;
    letter-spacing: var(--type-brand-tracking);
    line-height: .9;
  }
}

@layer utilities {
  :is(.guava-landing, .blog-layout) :is(h1, h2, h3) {
    font-family: var(--type-heading);
    font-weight: var(--type-heading-weight);
    line-height: var(--type-heading-leading);
    text-wrap: balance;
    font-kerning: normal;
    font-synthesis: none;
  }
}

@layer utilities {
  :is(.guava-landing, .blog-layout) h3 { line-height: var(--type-subheading-leading); }
  :is(.guava-landing, .blog-layout) p {
    letter-spacing: normal;
    font-variant-ligatures: common-ligatures;
    text-wrap: pretty;
    hanging-punctuation: first last;
  }
  :is(.guava-landing, .blog-layout) em { font-family: var(--type-body); }
}