/* De privacy-, bedank- en 404-pagina. Drie pagina's met alleen tekst, een woordmerk
 * en wat links. Ze hingen eerder aan styles.css, de 25 KB stylesheet van de v1-layout
 * die niet meer bestaat, en gebruikten daar een twintigste van. Dit is wat ze werkelijk
 * nodig hebben.
 */

:root {
  --nacht: #0a0f14;
  --papier-warm: #f5efdc;
  --signaal: #ffd633;
  --zacht: #a5c0d2;
  --ink: #0c1112;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--nacht); }
body {
  margin: 0; min-height: 100svh; background: var(--nacht); color: var(--papier-warm);
  font-family: var(--body); font-size: 18px; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--signaal); color: var(--nacht); }
:focus-visible { outline: 2px solid var(--signaal); outline-offset: 5px; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 46px;
  font: 400 30px/1 "Micro 5", var(--mono); text-decoration: none;
}
.wordmark .ai {
  background: var(--signaal); color: #131208; line-height: .58; padding: .17em .13em .1em;
}

.plain-wrap { max-width: 620px; margin: 0 auto; padding: 12vh 24px 80px; }
.plain-wrap-breed { max-width: 700px; }
.plain-wrap h1 {
  margin: 0 0 22px; font: 700 clamp(34px, 5vw, 52px)/1.05 var(--display); letter-spacing: -.025em;
}
.plain-wrap h2 {
  margin: 34px 0 10px; font: 600 13px/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--zacht);
}
.plain-wrap p { margin: 0 0 16px; font-size: 19px; line-height: 1.5; }

.plain-link { color: var(--papier-warm); text-decoration-color: var(--signaal); text-underline-offset: 4px; }
/* Aanraakdoel van 44 pixels, WCAG 2.5.8. */
.plain-nav { display: grid; gap: 4px; margin-top: 28px; }
.plain-nav .plain-link { display: flex; align-items: center; min-height: 44px; }

@media (max-width: 560px) {
  .wordmark { font-size: 24px; margin-bottom: 34px; }
  .plain-wrap { padding: 8vh 20px 60px; }
}