@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-latin.woff2") format("woff2-variations"), url("../fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+21BA, U+2605, U+FEFF, U+FFFD;
}

/* Hebrew comes after Latin and also claims the space (its file has one). With overlapping ranges the face
   declared last wins, so Hebrew lines take their spaces from the preloaded file instead of waiting for the
   Latin one, and do not re-wrap when it arrives. */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-hebrew.woff2") format("woff2-variations"), url("../fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0020, U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* Fallbacks scaled to Heebo's width, so the lines break the same before and after the web font arrives
   (otherwise a long title can gain or lose a line when Heebo swaps in, and the page jumps).
   Heebo runs ~3.5 to 5% wider than Arial Hebrew (macOS, Windows) and ~18% wider than Noto Sans Hebrew (Android). */
@font-face {
  font-family: "Heebo Fallback";
  font-weight: 100 550;
  src: local("Arial Hebrew"), local("ArialHebrew"), local("Arial"), local("ArialMT");
  size-adjust: 103.5%;
}

@font-face {
  font-family: "Heebo Fallback";
  font-weight: 551 900;
  src: local("Arial Hebrew Bold"), local("ArialHebrew-Bold"), local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 105%;
}

@font-face {
  font-family: "Heebo Fallback Noto";
  font-weight: 100 550;
  src: local("Noto Sans Hebrew"), local("NotoSansHebrew-Regular");
  size-adjust: 118%;
}

@font-face {
  font-family: "Heebo Fallback Noto";
  font-weight: 551 900;
  src: local("Noto Sans Hebrew Bold"), local("NotoSansHebrew-Bold");
  size-adjust: 119%;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199;
}

:root {
  --mdz-white: #fff;
  --mdz-lavender: #f6f1fc;
  --mdz-lavender-soft: #fbf8ff;
  --mdz-lavender-tint: #f1eafb;
  --mdz-ink: #18191d;
  --mdz-ink-soft: #2a2830;
  --mdz-night: #111333;
  --mdz-night-deep: #0b0b1a;
  --mdz-night-abyss: #07071a;
  --mdz-night-rise: #0d0d24;
  --mdz-purple: #7443b6;
  --mdz-purple-deep: #5c3494;
  --mdz-neon: #b98cff;
  --mdz-neon-core: #f6eeff;
  --mdz-neon-mist: #e9e3fa;
  --mdz-mint: #7cf2c2;
  --mdz-line: #e3dcef;
  --mdz-line-soft: #ece8f3;
  --mdz-muted: #4a4855;
  --mdz-muted-soft: #6b6878;
  --mdz-muted-night: #cfc8ea;
  --mdz-muted-night-soft: #b9b3d6;
  --mdz-muted-night-faint: #8f88b5;
  --mdz-star: #e7a400;
  --mdz-open: #137333;

  --mdz-font: "Heebo", "Heebo Fallback", "Heebo Fallback Noto", "Arial Hebrew", Arial, sans-serif;
  --mdz-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --mdz-fs-body: 18px;
  --mdz-fs-small: 15px;
  --mdz-fs-micro: 13px;
  --mdz-fs-label: 11px;
  --mdz-fs-lead: 19px;
  --mdz-fs-h1: clamp(46px, 5.4vw, 82px);
  --mdz-fs-h2: clamp(36px, 4vw, 60px);
  --mdz-fs-h2-chapter: clamp(34px, 3.6vw, 54px);
  --mdz-fs-h3: 26px;

  --mdz-track-label: .14em;
  --mdz-track-tight: -.02em;
  --mdz-track-display: -.025em;

  --mdz-wrap: 1440px;
  --mdz-gutter: 56px;
  --mdz-section-y: 130px;
  --mdz-section-y-tight: 100px;

  --mdz-radius-s: 10px;
  --mdz-radius: 14px;
  --mdz-radius-m: 18px;
  --mdz-radius-l: 20px;
  --mdz-radius-xl: 28px;
  --mdz-radius-pill: 999px;

  --mdz-glow-soft: 0 0 0 3px rgba(185, 140, 255, .15), 0 0 22px rgba(150, 90, 255, .3);
  --mdz-glow-hover: 0 0 0 3px rgba(185, 140, 255, .18), 0 0 26px rgba(150, 90, 255, .35);
  --mdz-glow-ring: 0 0 0 4px rgba(116, 67, 182, .12), 0 0 24px rgba(150, 90, 255, .35);
  --mdz-lift: 0 10px 30px -10px rgba(150, 90, 255, .75);
  --mdz-shadow-card: 0 30px 40px -30px rgba(40, 20, 90, .35);
  --mdz-shadow-float: 0 6px 18px -8px rgba(30, 20, 70, .35);

  --mdz-ease: cubic-bezier(.2, .7, .2, 1);
  --mdz-speed: .25s;

  --mdz-focus: 0 0 0 3px var(--mdz-white), 0 0 0 5px var(--mdz-purple);
}

@media (max-width: 900px) {
  :root {
    --mdz-gutter: 20px;
    --mdz-section-y: 84px;
    --mdz-section-y-tight: 72px;
    --mdz-fs-body: 17px;
  }
}