/* Hero: de hal met werk, dots-effect (js/hall.js + js/hall-init.js). Altijd donker, ook in lichte modus. */
.hall { position: relative; height: 460vh; background: #161616; color: #F7F7F7; }
.hall__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hall__poster, .hall canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hall canvas { opacity: 0; transition: opacity .6s; }
.hall.is-on canvas { opacity: 1; }
.hall__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(96px, 12vh, 130px) var(--gutter, clamp(20px, 4vw, 64px)) clamp(28px, 6vh, 64px); pointer-events: none; }
.hall__title { font: 400 clamp(30px, 4.5vw, 76px)/1.02 Aeonik, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.025em; margin: 0; max-width: 10.5em; text-wrap: balance; text-transform: none; color: #F7F7F7; }
.hall__title em { font-family: bookmania, "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -.01em; line-height: 0; }
.hall__row { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.hall__row[hidden] { display: none; }
.hall__hint { font: 500 12px/1 Aeonik, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.hall__btn { font: 500 15px/1 Aeonik, sans-serif; padding: 15px 22px; border-radius: 999px; border: 1px solid #F7F7F7; color: #F7F7F7; text-decoration: none; pointer-events: auto; transition: background .2s, color .2s; }
.hall__btn--solid, .hall__btn:hover { background: #F7F7F7; color: #161616; }
.hall__tag { position: fixed; z-index: 90; left: 0; top: 0; transform: translate(14px, 18px); font: 500 13px/1 Aeonik, sans-serif; background: #F7F7F7; color: #161616; padding: 9px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; text-decoration: none; }
.hall__tag.is-on { opacity: 1; }
@media (max-width: 720px) {
  .hall { height: 320vh; }                                          /* kortere rit op telefoon */
  .hall__copy { justify-content: flex-start; padding-top: 15vh; }
  .hall__title { font-size: clamp(30px, 8.6vw, 44px); }
}
@media (prefers-reduced-motion: reduce) { .hall { height: 100vh; height: 100svh; } }