@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../../fonts/BricolageGrotesque-latin.woff2") format("woff2");
}
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/AlegreyaSans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../fonts/AlegreyaSans-400-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/AlegreyaSans-700-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../../fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../../fonts/JetBrainsMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("../../fonts/JetBrainsMono-Bold.woff2") format("woff2"); }
/* the one Arabic word the other pages show, the language's own name, from the Arabic page's display face */
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0627, U+0628, U+0629, U+0631, U+0639, U+0644, U+064A; src: url("../../fonts/Alexandria-word.woff2") format("woff2"); }

:root {
  --day-surface: #f1f6fa;  --night-surface: #081625;
  --day-ink: #0d2034;      --night-ink: #e8f0f6;
  --day-ink-2: #3a5670;    --night-ink-2: #9db4c8;
  --accent: #ff8a2a;
  --blue: #29b6f6;
  --day-err: #d7263d;      --night-err: #ff8a99;
  --day-ok: #1a7f4b;       --night-ok: #5fd39a;
  --night: 0;
  --t: 0;
  --sky: #cfcfa0;
  --surface: color-mix(in oklab, var(--day-surface), var(--night-surface) calc(var(--night) * 100%));
  --ink:     color-mix(in oklab, var(--day-ink),     var(--night-ink)     calc(var(--night) * 100%));
  --ink-2:   color-mix(in oklab, var(--day-ink-2),   var(--night-ink-2)   calc(var(--night) * 100%));
  --hairline: color-mix(in oklab, var(--ink) 18%, transparent);
  --err:     color-mix(in oklab, var(--day-err),     var(--night-err)     calc(var(--night) * 100%));
  --ok:      color-mix(in oklab, var(--day-ok),      var(--night-ok)      calc(var(--night) * 100%));
  --shade:   color-mix(in oklab, var(--sky) 40%, var(--ink));
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Bricolage Grotesque", "Alexandria", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Alegreya Sans", "Markazi Text", "Alexandria", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --measure: 58ch;
  --gutter: clamp(1.25rem, 6vw, 6rem);
  --figure: 64rem; /* prints and screenshots may grow to this on wide screens; prose keeps its measure */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 112.5%;
  line-height: 1.5;
  scrollbar-color: var(--blue) var(--surface);
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* the gutter stays while a dialog locks scrolling, so the columns never shift */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* switching language dissolves the column while the scene holds still */
@view-transition { navigation: auto; }
.scene { view-transition-name: scene; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

body { background: var(--surface); min-height: 100dvh; }

::selection { background: var(--accent); color: #0d2034; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: text-decoration-color 250ms ease; }
a:hover { text-decoration-color: var(--accent); }
.icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 5vw, 5.25rem); line-height: 0.94; letter-spacing: -0.035em; font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 100; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
p, li, dd, dt, figcaption { text-wrap: pretty; }
/* three voices: Bricolage for display, captions and labels; Alegreya Sans for running text; the mono only in the terminal */
p, li, dd, .citation { font-family: var(--font-text); font-size: 1.0625rem; }
p { max-width: var(--measure); }
em, .line { font-style: italic; }
small, figcaption, .small { font-size: 0.9rem; color: var(--ink-2); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }
a, button, input, textarea { touch-action: manipulation; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -3rem; background: var(--ink); color: var(--surface); padding: 0.5rem 0.8rem; z-index: 20; }
.skip-link:focus { top: 1rem; }