:root {
  --pagina: #0c0c0d;
  --bord: #050505;
  --rand: #1c1c1e;
  --led: #ffc42e;
  --tekst: #a3a19c;
  --tekst-zacht: #6f6d69;
  --pitch: 4px; /* wordt door app.js gezet: afstand tussen twee leds */
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--pagina);
  color: var(--tekst);
  font: 400 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.podium {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

/* Het bord: zwarte kast met een smalle rand, zoals de lichtkrant in de passage */
.bord {
  position: relative;
  width: 100%;
  background: var(--bord);
  border: 1px solid var(--rand);
  border-radius: 3px;
  box-shadow:
    0 0 0 6px #111112,
    0 0 0 7px #1d1d1f,
    0 30px 60px -20px rgb(0 0 0 / 0.9);
  overflow: hidden;
}

.leds {
  display: block;
  width: 100%;
}
/* Ruimte vasthouden tot app.js de echte hoogte zet (kolommen × rijen, zie STANDEN in app.js) */
.leds-uit { aspect-ratio: 300 / 94; }
@media (max-width: 593px) { .leds-uit { aspect-ratio: 244 / 116; } }

.leds-aan {
  position: absolute;
  inset: 0;
  height: 100%;
  filter: drop-shadow(0 0 calc(var(--pitch) * 0.9) rgb(255 170 20 / 0.55));
}

/* Zonder JavaScript: gewone tekst in amber, zodat de tekst van de dag er altijd staat */
.bord-tekst {
  margin: 0;
  padding: 1.1em 1.3em 1.4em;
  color: var(--led);
  font: 500 clamp(17px, 2.6vw, 30px)/1.3 "Liberation Sans", Arial, Helvetica, sans-serif;
  text-shadow: 0 0 8px rgb(255 170 20 / 0.45);
}
.bord-tekst .kop { display: block; }

.js .leds-uit { display: block; }
html:not(.js) .leds { display: none; }
.js .bord-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.onderschrift {
  max-width: 34em;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: var(--tekst-zacht);
  text-wrap: pretty;
}
.onderschrift a {
  color: var(--tekst);
  text-decoration-color: #45433f;
  text-underline-offset: 3px;
}
.onderschrift a:hover { color: var(--led); text-decoration-color: currentColor; }
cite { font-style: italic; }

.voet {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: #4d4c49;
}
.voet p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 600px) {
  body { padding-top: max(16px, env(safe-area-inset-top)); }
  .podium { gap: 22px; }
  .bord { box-shadow: 0 0 0 4px #111112, 0 0 0 5px #1d1d1f, 0 20px 40px -16px rgb(0 0 0 / 0.9); }
}