@font-face { font-family: 'Redaction 0';  src: url('../fonts/redaction-0.woff2') format('woff2');  font-display: swap; }
@font-face { font-family: 'Redaction 70'; src: url('../fonts/redaction-70.woff2') format('woff2'); font-display: swap; }
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face { font-family: 'Departure Mono'; src: url('../fonts/departure-mono.woff2') format('woff2'); font-display: swap; }

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

/* Fotokopi makinesi arasini yumusatmaz: renk gecisi de kademeli ilerler. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  transition: background-color var(--transition-ms) steps(3, end),
              color var(--transition-ms) steps(3, end);
}

/* Kusak kaybi yuzun kendisinde: ayni harf bicimleri, patlamis halftone surumu.
   Iki yuz arasinda ara kare yoktur, bu yuzden gecis animasyon degil takastir. */
h1.display, h2.display, .display {
  font-family: var(--display-face), Georgia, serif;
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0;
}

.label, .stat-label {
  font-family: 'Archivo', sans-serif;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--step--1);
  color: var(--muted);
}

.mono, .marginalia { font-family: 'Departure Mono', ui-monospace, monospace; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Cizmedigimiz yuzeyler de tasarima ait: secim, caret ve kaydirma cubugu
   tarayici varsayilaniyla kalirsa sayfa kurulmus degil toplanmis okunur. */
::selection { background: var(--accent); color: var(--ground); }
:root { caret-color: var(--accent); scrollbar-color: var(--accent) var(--ground); }