@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --zwart: #0b0b0b;
  --wit: #f5f2ec;
  --grijs: #8d8a84;
  --lijn: #2b2b2b;

  /* Raster: de tegels krimpen mee zodat alles precies op een scherm past */
  --kol: 3;
  --rij: 2;
  --rand: clamp(16px, 2.5vw, 40px);
  --zij: clamp(16px, 8vw, 160px);
  --gat: clamp(18px, 2.8vw, 48px);
  --titel: min(8.1vw, 9.5svh);
  --label: clamp(10px, min(1.25vw, 1.65svh), 22px);
  --sinds: calc(var(--label) * 1.3);
  --sinds-gat: calc(var(--titel) * .11);
  --kop-h: calc(var(--titel) * 1.84 + var(--sinds-gat) + var(--sinds) * 1.2 + var(--rand) * 2);
  --voet-h: calc(44px + var(--rand) * 1.1);
  --tegel: min(
    (100vw - var(--zij) * 2 - var(--gat) * (var(--kol) - 1)) / var(--kol),
    ((100svh - var(--kop-h) - var(--voet-h) - var(--gat) * (var(--rij) - 1)) / var(--rij) - var(--label) * 1.2 - 8px) * 1.6
  );
}

:root:has(.site:nth-child(7)) { --kol: 4; }
:root:has(.site:nth-child(9)) { --rij: 3; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--zwart); -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--zwart);
  color: var(--wit);
  font-family: "Archivo", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* Kop */
.kop {
  flex: 1;
  min-height: var(--kop-h);
  display: flex;
  flex-direction: column;
  gap: var(--sinds-gat);
  align-items: center;
  justify-content: center;
}

.sinds {
  font-size: var(--sinds);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: .24em;
  text-indent: .24em;
}

.kop h1 {
  font-size: var(--titel);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
  text-align: center;
}

.kop h1 { position: relative; }

/* Oogleden: zwarte vlakken die over de titel sluiten, zodat de letters op de muis blijven reageren */
.kop h1::before,
.kop h1::after {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.1em;
  height: calc(50% + .1em);
  background: var(--zwart);
  pointer-events: none;
  transform: scaleY(0);
}

.kop h1::before { top: -.1em; transform-origin: top; }
.kop h1::after { bottom: -.1em; transform-origin: bottom; }

.kop span { display: block; }

.punt {
  display: inline-block;
  width: .25em;
  height: .25em;
  margin-left: .06em;
  border-radius: 50%;
  background: currentColor;
}

.letter { font-style: normal; }
.letter, .punt { transition: color .25s; }

/* Tegels */
.rijk {
  display: grid;
  grid-template-columns: repeat(var(--kol), var(--tegel));
  justify-content: center;
  gap: var(--gat);
}

.site { display: block; min-width: 0; }

.site h2 {
  margin-bottom: 8px;
  font-size: var(--label);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .25s;
}

.site h2 span { margin-left: .35em; color: var(--grijs); }

.site video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #161616;
  outline: 1px solid var(--lijn);
  transition: outline-color .2s, filter .3s;
}

/* Zwart-wit met shade alleen waar een muis is: op touch kun je het niet weghalen */
@media (hover: hover) {
  .site video { filter: grayscale(1) brightness(.55); }
  .site:hover video, .site:focus-visible video { filter: grayscale(0) brightness(1); }
}

.site:hover video { outline-color: var(--wit); }
.site:focus-visible { outline: 2px solid var(--wit); outline-offset: 4px; }

/* Voet */
.voet {
  height: var(--voet-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.voet a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  opacity: .75;
  transition: opacity .2s;
}

.voet a:hover { opacity: 1; }
.voet a:focus-visible { outline: 2px solid var(--wit); opacity: 1; }

.voet svg {
  width: 26px;
  fill: none;
  stroke: var(--wit);
  stroke-width: calc(var(--sinds) * .066); /* even dik als de letters van SINCE 1979 */
  stroke-linejoin: miter;
}

.voet path { vector-effect: non-scaling-stroke; }

/* Mobiel: twee op een rij, hier mag wel gescrold worden */
@media (max-width: 640px) {
  :root,
  :root:has(.site:nth-child(n)) {
    --kol: 2;
    --titel: 13.2vw;
    --label: 9.5px;
    --tegel: calc((100vw - var(--rand) * 2 - var(--gat)) / 2);
  }

  body { overflow: visible; }
  .site h2 span { display: block; margin-left: 0; }
}