/* De Meesterkraker — basis. Kleuren komen uit Automatic.css (primary = rood, secondary = crème,
   base = bijna-zwart), zodat een kleurwijziging in het ACSS-dashboard de hele site volgt.
   De vaste hexwaarden zijn alleen een terugval als ACSS uit staat. */
:root {
  --inkt: var(--base, #050609);
  --rood: var(--primary, #f94137);
  --creme: var(--secondary, #ddc4a4);
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --gothic: "League Gothic", "Oswald", sans-serif;
  --rand: 24px;
}
@media (max-width: 810px) { :root { --rand: 16px; } }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: var(--creme); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }

.stil *, .stil *::before, .stil *::after { animation-duration: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* rook-onthulling bij het laden (js/rook.js): alleen zichtbaar zolang html.rook staat */
.rook-dek, .rook-doek { display: none; }
.rook .rook-dek { display: block; position: fixed; inset: 0; z-index: 9999; background: #e8d9c8; }
.rook .rook-doek { display: block; position: fixed; inset: 0; z-index: 9998; width: 100%; height: 100%; opacity: 0; pointer-events: none; }