/* human waste — the descent
   Tokens. The world is a maintenance work order: white sheet, green identity
   block, hairline rules, mono codes. Nothing here is warm paper any more.

   Contrast, on --sheet #fbfcf9:
     ink       18.9:1
     ink-2      9.4:1
     mute       5.3:1
     green      5.6:1
     hazard     5.1:1
   On --green #056b36, --on-green #f3f8f4 is 6.4:1. */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

:root {
  /* ---- ground ---- */
  --sheet: #fbfcf9;
  --sheet-sunk: #f2f5ef;
  --sheet-raise: #ffffff;
  --ink: #14180f;
  --ink-2: #3f453b;
  --mute: #5f6659;
  --faint: #7d8478;

  /* ---- rules ---- */
  --rule: #d7dcd4;
  --rule-mid: #c2c9bf;
  --rule-strong: #a8b1a5;

  /* ---- green ----
     --green is the solid identity block and any filled control.
     --green-lit is the only green used for text on white.
     --green-mark is for tick marks and small indicators. */
  --green: #056b36;
  --green-lit: #056b36;
  --green-deep: #044a26;
  --green-mark: #0a8b48;
  --green-wash: #edf5ef;
  --green-line: #bcd8c6;
  --on-green: #f3f8f4;
  --on-green-dim: #cde8d6;

  /* ---- hazard, for failure states only ---- */
  --hazard: #b83f10;
  --hazard-wash: #fbeee8;

  /* ---- legacy aliases so older rules still resolve ---- */
  --void: var(--sheet);
  --bone: var(--ink);
  --bone-dim: var(--mute);
  --bone-faint: var(--mute);
  --paper: var(--on-green);
  --green-solid: var(--green);
  --ground: var(--sheet);
  --strata-2: var(--sheet-sunk);
  --strata-3: var(--sheet-sunk);
  --hairline: var(--rule);
  --hairline-strong: var(--rule-strong);

  /* ---- type ---- */
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --body: "Public Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --fs-hero: clamp(3.6rem, 10.6vw, 10.4rem);
  --fs-h1: clamp(2.5rem, 5.6vw, 4.9rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.55rem);
  --fs-lead: clamp(1.08rem, 1.35vw, 1.32rem);
  --fs-body: clamp(1rem, 1.06vw, 1.08rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.7rem;
  --fs-nano: 0.62rem;

  /* ---- space ---- */
  --pad-x: clamp(1.1rem, 3.6vw, 3.4rem);
  --section-y: clamp(3.6rem, 7vw, 6.4rem);
  --gap: clamp(1rem, 2vw, 2rem);

  /* ---- structure ---- */
  --maxw: 1440px;
  --rail-w: 340px;
  --runhead-h: 62px;
  --radius: 0;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.68, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --dur: 480ms;
}

@media (min-width: 421px) {
  :root {
    --runhead-h: 66px;
  }
}

@media (min-width: 641px) {
  :root {
    --runhead-h: 70px;
  }
}

@media (min-width: 901px) {
  :root {
    --runhead-h: 74px;
  }
}

@media (min-width: 1101px) {
  :root {
    --runhead-h: 80px;
  }
}

/* Printing is the same document on white stock; the green block stays, because
   it carries the order number. */
@media print {
  :root {
    --sheet: #ffffff;
  }
}