/* F54® / CREATIVE STUDIO — gedeelde stijl.
   Eén idee: de site drukt status uit via de gewichtsas van het font, niet via kleur. */

@font-face{
  font-family:"F54 Display";
  src:url("/assets/Thunder-VF.ttf") format("truetype");
  font-weight:100 900; font-display:block;
}

:root{
  --ink:#0A0A0B;
  --ink-2:#101013;
  --line:#1B1B1E;
  --line-2:#2C2C31;
  --paper:#F3F3F0;
  --mute:#77777E;
  --mute-2:#46464C;
  --fout:#E2452A;

  --display:"F54 Display", Impact, sans-serif;
  --ui:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,4vw,44px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:13px/1.5 var(--ui); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}

.label{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- topbalk ---------- */
.top{
  display:flex; align-items:center; gap:18px;
  padding:0 var(--pad); height:56px; border-bottom:1px solid var(--line);
}
.mark{
  font-family:var(--display); font-variation-settings:"wght" 900,"CNTR" 40;
  font-size:21px; line-height:1; letter-spacing:.01em; text-transform:uppercase;
}
.mark sup{font-family:var(--ui); font-size:8px; font-weight:500; vertical-align:super; margin-left:2px}
.top .spacer{flex:1}
.top .who{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  max-width:min(42vw,340px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top .subtitel{white-space:nowrap}
@media (max-width:760px){ .top{gap:12px} .top .subtitel{display:none} }
@media (max-width:460px){ .top .who{max-width:34vw} }

.knop{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid var(--line-2); color:var(--paper);
  padding:7px 12px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.knop:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.knop:disabled{opacity:.4; cursor:not-allowed}

:focus-visible{outline:1px solid var(--paper); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- specimenmuur ----------
   Dezelfde taal als het inlogscherm: grote woorden in bijna-zwart achter de inhoud, waarvan het gewicht
   langzaam golft. Pagina's zetten hun eigen inhoud erboven met .boven (z-index 1). */
.muur{position:fixed; inset:0; z-index:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; user-select:none}
.muur .rij{font-family:var(--display); font-size:clamp(52px,10.5vw,132px); line-height:.90; text-transform:uppercase;
  white-space:nowrap; color:#0F0F13; letter-spacing:-.01em;
  font-variation-settings:"wght" var(--w,400),"CNTR" 0;
  animation:golf 13s ease-in-out infinite; animation-delay:calc(var(--i) * -.62s); will-change:font-variation-settings}
.muur .rij:nth-child(even){text-indent:-1.6em}
@keyframes golf{
  0%,100%{ font-variation-settings:"wght" 130,"CNTR" 0 }
  50%    { font-variation-settings:"wght" 880,"CNTR" 0 }
}
@media (prefers-reduced-motion:reduce){ .muur .rij{animation:none} }
.boven{position:relative; z-index:1}