/*
  All the numbers the design is built from — the full list with explanations is in design/spec.md.
  Look and content follow June's own design; sizes, spacing and proportions follow
  design/reference-pusztai.md. Sizes are plain numbers in pixels at a 1920px-wide window;
  style.css scales them with the window.
*/
:root {
  --color-text: #111111;
  --color-muted: #bdbdbd;
  --color-card: #808080;
  --color-card-hover: #6f6f6f;
  --color-bg: #ffffff;

  --font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Text: size at 1920, smallest size on narrow windows, weight */
  --greeting-size: 36;
  --greeting-min: 24;
  --greeting-weight: 700;
  --tagline-size: 15;
  --tagline-weight: 700;
  --nav-size: 15;
  --nav-weight: 400;
  --location-size: 15;
  --location-weight: 500;
  --title-size: 15;
  --title-weight: 500;
  --footer-size: 12;
  --footer-weight: 700;
  --small-min: 12;

  /* Spacing */
  --gutter: 16;
  --header-top: 28;
  --nav-gap: 55;
  --page-top: 200;
  --location-column: 1133;
  --clock-gap: 16;
  --tagline-word-gap: 100;
  --tagline-gap: 150;
  --hero-gap: 205;
  --section-gap: 145;
  --row-gap: 140;
  --title-gap: 16;
  --footer-bottom: 16;

  /* Cards */
  --card-width: 466;
  --card-height: 262;
  --card-gap: 8;
  --card-radius: 6;

  /* Project pages */
  --site-name-size: 17;
  --intro-bottom: 128;
  --meta-size: 13;
  --description-size: 32;
  --description-gap: 24;
  --media-gap: 8;
  --media-ratio: 2; /* width ÷ height of every image / video frame */

  /* About */
  --about-size: 24;
  --about-gap: 48;
  --about-photo: 560; /* photo width; it's 4:5 */
  --cv-gap: 200; /* statement → education / experience; the cat walks along the top of it */

  /* Playground — how many rows fit on screen (cells and dots are sized from this) */
  --pg-rows: 4;
  --pg-dots-per-cell: 9; /* dot spacing = a cell's pitch ÷ this */
  --pg-dots-per-piece: 7; /* how many of those dots the piece's square spans; the rest is gap */
  --pg-bg: #f4f4f4;
  --pg-dot: #c9c9c9;

  /* Motion */
  --speed-1: 28;
  --speed-2: 38;
  --speed-3: 22;
  --speed-4: 33;
  --speed-5: 25;
  --speed-drift: 0.2;
  --type-delay: 100;
  --hold-delay: 1300;
  --reveal-duration: 1.2;
}