/* De drie pagina's die er moeten zijn: privacy, voorwaarden, bronnen.
   Zelfde papier als de bonnetjes, zodat ze bij de site horen in plaats van
   eruit te vallen als een juridische bijlage. */
:root { --ink:#1a1814; --gold:#8a6410; --paper:#f4f0e6; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#0b0b0d;
  color:var(--ink);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:13.5px;
  line-height:1.75;
  padding:24px 16px 60px;
  display:flex;
  justify-content:center;
}
main {
  width:min(720px, 100%);
  background:var(--paper);
  background-image:repeating-linear-gradient(0deg, rgba(26,24,20,.03) 0 1px, transparent 1px 3px);
  padding:34px 30px 26px;
}
h1 {
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(26,24,20,.45);
}
h2 {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:26px 0 8px;
}
p, li { margin:9px 0; }
ul { padding-left:18px; }
a { color:var(--gold); }
strong { font-weight:600; }
.sub {
  text-align:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(26,24,20,.55);
  margin-top:12px;
}
.back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
}
.back span { font-size:22px; line-height:.6; }
.fine {
  margin-top:26px;
  padding-top:12px;
  border-top:1px dashed rgba(26,24,20,.45);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(26,24,20,.55);
}
.fine a { margin:0 6px; }
.todo { background:rgba(179,64,42,.13); padding:2px 5px; }
@media (max-width:640px) {
  body { padding:14px 10px 40px; font-size:13px; }
  main { padding:22px 16px 18px; }
}

/* Wie deze site draait. Wettelijk moet het er staan, maar het hoeft niet te
   schreeuwen: een klein woord onder het papier, dat zijn kaartje toont zodra
   je erover gaat of erop tikt. De tekst staat gewoon in de pagina, dus ook
   zoekmachines en voorleessoftware vinden hem. */
.who {
  position: relative;
  display: inline-block;
  margin: 14px auto 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 232, 225, 0.13);   /* nauwelijks te zien tot je hem zoekt */
  cursor: help;
  outline: none;
}
.who:hover, .who:focus-visible, .who.open { color: rgba(234, 232, 225, 0.5); }
.who .card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(300px, 86vw);
  padding: 10px 13px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(26, 24, 20, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.who:hover .card, .who:focus .card, .who:focus-within .card, .who.open .card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.who .card::after {          /* het pijltje naar het woord toe */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--paper);
  border-right: 1px solid rgba(26, 24, 20, 0.3);
  border-bottom: 1px solid rgba(26, 24, 20, 0.3);
  transform: rotate(45deg);
}
.whowrap { width: min(720px, 100%); text-align: center; }
body { flex-wrap: wrap; align-content: flex-start; }