/* ===========================================================================
   Garlic Media - Typography

   Brand typeface: Garlic Sans.
   Consumed by: Garlic Media Landing Page, Garlic OS, Brand Guideline.
   Font binaries are produced by ./build-webfonts.py into ./webfonts/.

   COVERAGE: as of v1.100 Garlic Sans carries 100 codepoints - a space, 0-9,
   A-Z, a-z and 36 punctuation and currency marks. It sets running text on its
   own; --gm-font-text and --gm-font-display are now the same family.

   The cuts are declared as separate @font-face rules per weight rather than
   relying on synthetic bolding, so the browser always picks a real one.
   =========================================================================== */

/* --- Upright ------------------------------------------------------------ */

@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-thin.woff2") format("woff2"),
       url("webfonts/garlicsans-thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-extralight.woff2") format("woff2"),
       url("webfonts/garlicsans-extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-light.woff2") format("woff2"),
       url("webfonts/garlicsans-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-regular.woff2") format("woff2"),
       url("webfonts/garlicsans-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-medium.woff2") format("woff2"),
       url("webfonts/garlicsans-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-semibold.woff2") format("woff2"),
       url("webfonts/garlicsans-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-bold.woff2") format("woff2"),
       url("webfonts/garlicsans-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-extrabold.woff2") format("woff2"),
       url("webfonts/garlicsans-extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-black.woff2") format("woff2"),
       url("webfonts/garlicsans-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Italic (drawn at -12deg, not obliqued) ----------------------------- */

@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-thin-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-thin-italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-extralight-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-extralight-italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-light-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-light-italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-regular-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-regular-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-medium-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-medium-italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-semibold-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-semibold-italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-bold-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-bold-italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-extrabold-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-extrabold-italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Garlic Sans";
  src: url("webfonts/garlicsans-black-italic.woff2") format("woff2"),
       url("webfonts/garlicsans-black-italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --- Fallback ------------------------------------------------------------
   Garlic Sans has an x-height of 0.498em against a 0.698em cap. Left alone,
   the swap from Arial visibly reflows the page. The overrides below scale the
   fallback onto the same x-height so the swap is close to invisible.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Garlic Sans Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 96.0%;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Families */
  --gm-font-display: "Garlic Sans", "Garlic Sans Fallback", "Helvetica Neue",
                     Arial, system-ui, sans-serif;
  /* Garlic Sans gained full punctuation in v1.100, so it now carries
     running text as well as display. One family, one token. */
  --gm-font-text: var(--gm-font-display);
  --gm-font-sans: var(--gm-font-display);

  /* Weights. Garlic Sans Regular is slightly light on screen at body sizes;
     Medium is the workhorse for UI copy. */
  --gm-weight-thin: 100;
  --gm-weight-extralight: 200;
  --gm-weight-light: 300;
  --gm-weight-regular: 400;
  --gm-weight-medium: 500;
  --gm-weight-semibold: 600;
  --gm-weight-bold: 700;
  --gm-weight-extrabold: 800;
  --gm-weight-black: 900;

  /* Type scale - 1.25 (major third), 16px base.
     Display sizes carry negative tracking; a grotesque this tight opens up
     badly at large sizes without it. */
  --gm-size-display-xl: 4.5rem;   /* 72px */
  --gm-size-display-l:  3.5rem;   /* 56px */
  --gm-size-display-m:  2.75rem;  /* 44px */
  --gm-size-h1:         2.25rem;  /* 36px */
  --gm-size-h2:         1.75rem;  /* 28px */
  --gm-size-h3:         1.375rem; /* 22px */
  --gm-size-h4:         1.125rem; /* 18px */
  --gm-size-body-l:     1.125rem; /* 18px */
  --gm-size-body:       1rem;     /* 16px */
  --gm-size-body-s:     0.875rem; /* 14px */
  --gm-size-caption:    0.75rem;  /* 12px */
  --gm-size-overline:   0.6875rem;/* 11px */

  /* Line heights */
  --gm-leading-tight:   1.05;
  --gm-leading-snug:    1.2;
  --gm-leading-normal:  1.4;
  --gm-leading-relaxed: 1.6;

  /* Letter spacing */
  --gm-tracking-display: -0.03em;
  --gm-tracking-heading: -0.015em;
  --gm-tracking-body:     0;
  --gm-tracking-caption:  0.01em;
  --gm-tracking-overline: 0.08em;

  /* Measure - 60-75 characters is the readable band for this face. */
  --gm-measure: 68ch;
}

/* --- Base ---------------------------------------------------------------- */

body {
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-body);
  font-weight: var(--gm-weight-regular);
  line-height: var(--gm-leading-relaxed);
  letter-spacing: var(--gm-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Roles --------------------------------------------------------------- */

.gm-display-xl,
.gm-display-l,
.gm-display-m {
  font-weight: var(--gm-weight-bold);
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-display);
}

.gm-display-xl { font-size: var(--gm-size-display-xl); }
.gm-display-l  { font-size: var(--gm-size-display-l); }
.gm-display-m  { font-size: var(--gm-size-display-m); }

h1, .gm-h1,
h2, .gm-h2,
h3, .gm-h3,
h4, .gm-h4 {
  font-weight: var(--gm-weight-semibold);
  line-height: var(--gm-leading-snug);
  letter-spacing: var(--gm-tracking-heading);
}

h1, .gm-h1 { font-size: var(--gm-size-h1); }
h2, .gm-h2 { font-size: var(--gm-size-h2); }
h3, .gm-h3 { font-size: var(--gm-size-h3); }
h4, .gm-h4 { font-size: var(--gm-size-h4); }

.gm-body-l { font-size: var(--gm-size-body-l);  line-height: var(--gm-leading-relaxed); }
.gm-body   { font-size: var(--gm-size-body);    line-height: var(--gm-leading-relaxed); }
.gm-body-s { font-size: var(--gm-size-body-s);  line-height: var(--gm-leading-normal); }

.gm-caption {
  font-size: var(--gm-size-caption);
  line-height: var(--gm-leading-normal);
  letter-spacing: var(--gm-tracking-caption);
}

.gm-overline {
  font-size: var(--gm-size-overline);
  font-weight: var(--gm-weight-semibold);
  line-height: var(--gm-leading-normal);
  letter-spacing: var(--gm-tracking-overline);
  text-transform: uppercase;
}

/* Constrain running text to a readable measure. */
.gm-prose { max-width: var(--gm-measure); }

/* --- Responsive ----------------------------------------------------------
   Display sizes are set for desktop. Below 768px they need to come down or
   they overflow on a phone.
   ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  :root {
    --gm-size-display-xl: 2.75rem; /* 44px */
    --gm-size-display-l:  2.25rem; /* 36px */
    --gm-size-display-m:  1.875rem;/* 30px */
    --gm-size-h1:         1.75rem; /* 28px */
    --gm-size-h2:         1.5rem;  /* 24px */
    --gm-size-h3:         1.25rem; /* 20px */
  }
}