@font-face {
  font-family: "Astrolabe";
  src: url("../fonts/astrolabe/Astrolabe.woff2") format("woff2"), url("../fonts/astrolabe/Astrolabe.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-002F;
}

@font-face {
  font-family: "Mostakbal";
  src: url("../fonts/mostakbal/Mostakbal-W500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Mostakbal";
  src: url("../fonts/mostakbal/Mostakbal-W700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manchette";
  src: url("../fonts/manchette/Manchette-VF.woff2") format("woff2-variations"), url("../fonts/manchette/Manchette-VF.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {

  --color-paper:        oklch(12% 0.006 40);
  --color-paper-2:      oklch(17% 0.006 40);
  --color-paper-3:      oklch(23% 0.006 40);
  --color-ink:          oklch(95% 0.005 90);
  --color-muted:        oklch(72% 0.008 40);
  --color-rule:         oklch(40% 0.006 40);

  --color-band:         oklch(99% 0.005 80);
  --color-white:        oklch(100% 0 0);
  --color-band-2:       oklch(95% 0.005 90);
  --color-band-3:       oklch(90% 0.005 90);
  --color-band-ink:     oklch(16% 0.006 40);
  --color-band-muted:   oklch(38% 0.008 40);
  --color-band-rule:    oklch(75% 0.008 40);
  --color-band-wash:    oklch(99% 0.005 80 / 0.55);

  --sg-gold:       #d89123;
  --sg-orange-2:   #c56829;
  --sg-orange:     #c5501d;
  --sg-red:        #d2320a;
  --sg-red-deep:   #8b1919;

  --color-accent:        var(--sg-red);
  --color-accent-deep:   var(--sg-red-deep);
  --color-focus:         var(--sg-red);
  --color-ink-on-accent: oklch(99% 0.005 90);

  --img-paper:      url("../img/site/paper.jpg");
  --img-paper-sp:   url("../img/site/paper-sp.jpg");
  --img-smoke:      url("../img/site/smoke.jpg");
  --img-gears-over: url("../img/site/gears-over.png");
  --img-nav:        url("../img/site/nav.jpg");
  --img-night-sp:   url("../img/site/night-sp.jpg");
  --img-cast15:     url("../img/site/cast-15th.jpg");
  --img-tv:         url("../img/site/tv.png");
  --img-static:     url("../img/site/static-2.gif");
  --img-static-still: url("../img/site/static-2.png");
  --scrim:          oklch(0% 0 0 / 0.45);

  --font-mark:          "Astrolabe", "Noto Kufi Arabic", serif;
  --mark-mashq:         70;
  --font-display:       "Mostakbal", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body:          "Manchette", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-readout:       "IBM Plex Mono", ui-monospace, monospace;

  --text-sm:            1rem;
  --text-base:          1.125rem;
  --text-prose:         1.2578rem;
  --text-md:            1.4063rem;
  --text-lg:            1.7578rem;
  --text-xl:            2.1973rem;
  --text-2xl:           2.7466rem;
  --text-display:       clamp(3rem, 5.5vw + 1rem, 6rem);

  --leading-ui:         1.7;
  --leading-body:       1.8;
  --leading-prose:      2;
  --leading-display:    1.5;

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  --radius:    6px;
  --radius-sm: 3px;
  --radius-glass: 12px 12px 8px 8px;

  --glass:         oklch(15% 0.006 40 / 0.94);
  --glass-rim:     oklch(100% 0 0 / 0.10);
  --glass-sheen:   oklch(100% 0 0 / 0.06);
  --glass-collar:  oklch(7% 0.006 40);
  --glass-glow:    var(--sg-red);
  --glass-haze:    var(--sg-red-deep);
  --mesh-pitch:    6px;
  --rule:      1px;
  --measure:   34rem;
  --measure-wide:       38rem;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short:    120ms;
  --dur-long:     900ms;

  --z-loop:    -1;
  --z-veil:     1;
  --z-caption:  2;
  --z-gate:   100;
  --z-skip:   101;
}