/* Closing Clarity — ontwerptokens uit merkboek v1.0 */
:root{
  --void:#08080A; --panel:#101117; --panel-2:#161821; --panel-3:#1D202B;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.055);
  --white:#FFF; --text:#EAEBF0; --muted:#8C8FA0; --dim:#5C5F70;
  --indigo:#171B38; --indigo-lt:#2B3170; --plum:#7A2E63; --red:#E8402A; --signal:#FF6B35;
  --heat-45:linear-gradient(135deg,#2B3170 0%,#7A2E63 44%,#E8402A 76%,#FF6B35 100%);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Consolas,monospace;
  --ease-in:cubic-bezier(.16,1,.3,1);
  --ease-mid:cubic-bezier(.4,0,.2,1);

  --max:80rem; --read:38rem;
  --pad:clamp(1.25rem,5vw,3.5rem);
}

/* Voor wie met het toetsenbord navigeert: eerste tab slaat de
   navigatie over. Zichtbaar zodra hij focus krijgt, daarvoor niet. */
.overslaan{
  position:fixed; top:.6rem; left:.6rem; z-index:200;
  transform:translateY(-160%);
  background:var(--white); color:#08080A; text-decoration:none;
  font-family:var(--sans); font-size:.875rem; font-weight:600;
  padding:.6rem 1rem; border-radius:3px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  transition:transform .2s var(--ease-in);
}
.overslaan:focus{ transform:none; }