/* Kabaal placeholder: the logo as a die-cut sticker lying on a design tool's transparency grid,
   which is exactly where a vinyl sticker starts life, and which shows off its white cut edge.
   One screen, centred. Light only by design: the grid is white. Text is the logo's navy; links
   take its purple. Teal stays in the logo. */
:root {
  color-scheme: light;
  --navy: #21174d;   /* 15.9:1 on #fff, 14.1:1 on #f1f1f1 */
  --purple: #a12f9d; /* 6.3:1 on #fff, 5.6:1 on #f1f1f1 */
  --teal: #1ccdcc;
  /* The logo's teal darkened (same hue and saturation, HSL lightness 0.26) until link text
     clears AA on the checker squares too: 5.5:1 on #fff, 4.9:1 on #f1f1f1. */
  --teal-ink: #107574;
  /* Body text: a neutral grey, lighter than the navy — 7.4:1 on #fff, 6.6:1 on #f1f1f1. */
  --ink: #51565e;
  --paper: #fff;
  --square: #f1f1f1;
  --text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: conic-gradient(var(--square) 25%, transparent 0 50%, var(--square) 0 75%, transparent 0);
  background-size: 28px 28px;
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; }
a { color: var(--teal-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.14em; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--teal-ink); }

/* The language switch: small, quiet, top right. */
.top { display: flex; justify-content: flex-end; padding: 12px 16px; }
.languages { display: flex; gap: 16px; padding: 0; list-style: none; font-size: 0.875rem; }
.languages a { display: inline-block; padding-block: 6px; color: var(--ink); }
.languages [aria-current] { font-weight: 700; text-decoration: none; }

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px max(48px, 9vh);
  text-align: center;
}
h1 { width: min(1000px, 100%); }
.logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 1px #21174d33) drop-shadow(0 10px 18px #21174d26);
}
.intro {
  max-width: 34em;
  margin-top: clamp(28px, 5vw, 56px);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  text-wrap: balance;
}
/* The intro's size, a step heavier: the one thing to act on, without shouting. */
.email { margin-top: 20px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; }


/* 404 */
.not-found { grid-template-rows: 1fr; }
.not-found .home { display: block; width: min(480px, 100%); margin-bottom: 36px; }
.not-found h1, .not-found h2 { width: auto; font-size: 1.75rem; line-height: 1.2; margin-bottom: 6px; }
.not-found [lang="nl"] { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}