/* byduut.com: één foto over het hele scherm.

   De oude site (WordPress met het thema Pro, tot november 2026) was een foto
   met de letters BY DUUT, schermvullend (cover, in het midden), met
   bovenaan in het midden "contact :: instagram" in Futura vet, 16,8 px,
   #272727. Futura is een systeemlettertype (macOS, iOS); waar het ontbreekt
   valt het terug op Trebuchet MS, zoals op de oude site. Er wordt dus geen
   lettertype geladen.

   Kleuren komen uit tokens.css (gegenereerd uit tools/tokens.py). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--color-page); }
.skip:focus { left: 1rem; z-index: 10; }
.alleen-lezer {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* De startpagina: de foto vult het scherm, de links staan erbovenop. */
.vol { position: relative; }
.start { position: relative; height: 100vh; height: 100svh; min-height: 22rem; background: var(--color-photo); }
.start-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.start-beeld { position: absolute; inset: 0; }
/* Over de foto lag op de oude site een witte laag van 50%; daardoor is de
   foto licht en lezen de links goed. */
.start-beeld::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / .5); }
.start-links {
  position: absolute;
  top: 2.1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.start-links a { text-decoration: none; }
.start-links a:hover { text-decoration: underline; }

/* Andere pagina's (privacyverklaring, foutpagina): gewone tekst op wit. */
.kaart { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem; }
.kaart > h1 { margin: 0 0 1.5rem; font-size: 2rem; line-height: 1.3; }
.prose h2 { margin: 2rem 0 .5rem; font-size: 1.3rem; }
.prose p { margin: 0 0 1rem; }
.terug { margin: 0 0 2rem; font-size: 1rem; }

/* Voet onder de foto: de privacyverklaring en wie de site maakte. */
.voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 1.5rem;
  color: var(--color-muted);
  font-family: Arial, sans-serif;
  font-size: .875rem;
}
.voet p { margin: 0; }
.voet-maker a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.voet-maker img { width: 7.5rem; height: auto; }

/* De badge van internet.nl onder in de voet (alleen op productie). */
.voet-leden { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; order: 1; }
/* Op één regel: privacyverklaring links, de badge in het midden, de maker
   rechts (Mike, 1 november 2026). Op een smal scherm loopt het door. */
.voet-maker { order: 2; }
.voet-leden img { width: 204px; height: auto; }