/* hero (uit de Spector-template, aangepast voor De Meesterkraker): één venster hoog op zwart. Drie lagen: het doek (foto + raster op screen), de bovenrij en de kop onderin.
   Maten van de demo op 1920: zijlucht 24, bovenrij op y48 (template: 110), titel 76px, credits 12/22, kop 180px (9.375vw) met regels van .828,
   merkteken .55em. De kop schaalt met de vensterbreedte; onder 810 en 480 gelden de gemeten verhoudingen. */
/* 100svh = de zichtbare hoogte; 100vh valt op mobiel Safari deels achter de adresbalk */
.held { position: relative; margin: 0; padding: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; background: #000; color: #e8d9c8; --creme: #e8d9c8; }
/* Automatic.css geeft koppen/alinea's eigen marges, kleuren en maten; binnen de hero niet */
.held :where(h1, p, ul, li) { margin: 0; padding: 0; max-width: none; color: inherit; }
.held ul { list-style: none; }
.held img, .held canvas { display: block; max-width: none; }
.held__woordenlijst, .held__diepte { display: none !important; }
.held__doek { position: absolute; inset: 0; z-index: 1; }
.held__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; filter: brightness(.85) contrast(1.06); }
/* donkere hoek rechtsboven (radiaal) zodat de credits beter leesbaar zijn */
.held__doek::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 36% 58% at 100% 0%, rgba(0, 0, 0, .78), rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 58%), linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.held__raster { position: absolute; left: -120px; top: -120px; width: calc(100% + 240px); height: calc(100% + 240px); mix-blend-mode: screen; pointer-events: none; }

.held__boven { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; padding: 48px var(--rand) 0; /* geen nav boven de hero, dus minder ruimte dan de 110px van de template */ will-change: transform; }
.held__merkje { display: flex; align-items: flex-start; gap: 8px; max-width: 460px; margin-bottom: 12px; }
/* rode stip met crème boogje (was een inline SVG; Etch stript SVG in content) */
.held__stip { position: relative; width: 24px; height: 24px; flex: none; }
.held__stip::before { content: ""; position: absolute; left: 3px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rood, #f94137); }
.held__stip::after { content: ""; position: absolute; left: 9px; top: 5px; width: 11px; height: 14px; border: 2.2px solid var(--creme); border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; border-radius: 50%; }
.held__merkwoord { font-size: 15px; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; }
.held__titel { white-space: pre-line; font-family: var(--sans); font-size: clamp(40px, 4vw, 76px); line-height: 1.05; font-weight: 600; letter-spacing: -.06em; }
.held__adres { margin-top: 12px; font-size: 14px; line-height: 19.6px; letter-spacing: -.14px; text-transform: uppercase; }
/* credits rechtsboven, naast de personen: rol klein en gedempt, naam vet eronder */
.held__rechts { justify-self: end; max-width: 380px; padding-right: 28px; }
.held__lijst { position: relative; display: flex; }
.held__lijn { flex: none; width: 1px; margin: 0 16px 0 5px; background: var(--rood); transform-origin: 50% 0; }
.held__vakken { display: grid; gap: 14px; }
.held__vakken li { display: grid; gap: 2px; }
.held__rol { font-size: 12px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.held__naam { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.04em; }

.held__onder { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 var(--rand) 24px; will-change: transform; }
/* kop in League Gothic, net als de koppen in het verhaal; smaller font, dus groter gezet */
.held__kop { color: inherit; font-family: var(--gothic); font-size: min(22vw, 35vh); /* 30% groter dan min(17vw, 27vh) */ line-height: .84; font-weight: 400; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.held__regel { display: flex; align-items: flex-start; gap: .045em; }
.held__regel--1 .held__woorden { color: var(--rood); }
.held__regel--1 { font-size: .652em; } /* "DE MEESTER" even breed als "KRAKER" (gemeten in League Gothic: 386 / 592) */ /* "DE MEESTER" liep door de krappe letterspatiëring aan elkaar */
.held__regel--2 .held__woorden { background: linear-gradient(180deg, #f94137 8%, #ed7e6b 30%, #ecaea1 52%, #e8d9c8 76%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held__regel--3 .held__woorden { color: var(--creme); }
/* derde regel is de ondertitel: kleiner, zodat "Leven en werk van Aage M." op één regel past */
.held__regel--3 { font-size: .2645em; line-height: .9; margin-top: .06em; letter-spacing: .01em; } /* even breed als "KRAKER" (.42em gaf 613 i.p.v. 386) */
.held__woorden { display: block; padding-right: .06em; }
.held__vonk { flex: none; width: .55em; height: .55em; }

/* staande regel rechts: leest van onder naar boven, streepjescode onderaan */
.held__zij { position: absolute; right: 22px; bottom: 80px; z-index: 2; display: flex; align-items: center; gap: 11px; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .8; font-size: 12px; line-height: 14px; letter-spacing: -.48px; white-space: nowrap; }
.held__zij2 { font-size: 10px; letter-spacing: -.4px; }
.held__streepjes { width: 14px; height: 40px; background: repeating-linear-gradient(0deg, var(--creme) 0 1px, transparent 1px 3px, var(--creme) 3px 5px, transparent 5px 6px, var(--creme) 6px 7px, transparent 7px 10px, var(--creme) 10px 13px, transparent 13px 14px); }

/* achtergrondmuziek: vijf balkjes onder de copyright-regel; rust = laag en crème, aan = rood en dansend op de muziek */
/* knoppenrij rechtsonder (licht + muziek); de balkjes van de muziek blijven recht onder de streepjescode */
.held__knoppen { position: absolute; right: 22px; bottom: 32px; z-index: 5; display: flex; align-items: center; gap: 28px; }
.held__lichtknop { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0; border: 0; background: none; color: var(--creme); cursor: pointer; opacity: .8; transition: opacity .2s; }
.held__lichtknop:hover, .held__lichtknop:focus-visible { opacity: 1; }
.held__lichtknop:focus-visible { outline: 1px solid var(--creme); outline-offset: 2px; }
.held__lichtknop .held__knoptekst { font-size: 14px; line-height: 19.6px; letter-spacing: -.14px; text-transform: uppercase; }
/* lamp-icoon in CSS: kern + ring */
.held__lamp { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, currentColor 50%, transparent); transition: box-shadow .3s; }
.held__lamp::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; transition: background-color .3s, inset .3s; }
.held__lichtknop[aria-pressed="true"] { opacity: 1; }
.held__lichtknop[aria-pressed="true"] .held__lamp { box-shadow: inset 0 0 0 1.2px var(--rood); }
.held__lichtknop[aria-pressed="true"] .held__lamp::after { inset: 5.5px; background: var(--rood); }
.held__geluid { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0; border: 0; background: none; color: var(--creme); cursor: pointer; opacity: .8; transition: opacity .2s; }
.held__geluid:hover, .held__geluid:focus-visible { opacity: 1; }
.held__geluid:focus-visible { outline: 1px solid var(--creme); outline-offset: 2px; }
/* tekst in de stijl van het genre-label (TRUE CRIME THRILLER); balkjes blijven recht onder de streepjescode */
.held__geluidtekst { min-width: 7.2em; text-align: right; font-size: 14px; line-height: 19.6px; letter-spacing: -.14px; text-transform: uppercase; color: var(--creme); }
.held__balkjes { display: flex; align-items: center; gap: 2px; height: 18px; }
.held__balkjes span { width: 2px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.18); transition: transform .05s linear, background-color .3s; }
.held__geluid[aria-pressed="true"] { color: var(--rood); opacity: 1; }
/* zonder Web Audio: vaste dans */
.held__geluid[data-geluid-nep][aria-pressed="true"] .held__balkjes span { animation: held-balkjes .8s ease-in-out infinite; }
.held__geluid[data-geluid-nep] .held__balkjes span:nth-child(2) { animation-delay: .15s; }
.held__geluid[data-geluid-nep] .held__balkjes span:nth-child(3) { animation-delay: .3s; }
.held__geluid[data-geluid-nep] .held__balkjes span:nth-child(4) { animation-delay: .1s; }
.held__geluid[data-geluid-nep] .held__balkjes span:nth-child(5) { animation-delay: .22s; }
@keyframes held-balkjes { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.js:not(.stil) .held__knoppen { opacity: 0; transition: opacity .6s linear 2.4s; }
.js:not(.stil) .held.is-klaar .held__knoppen { opacity: 1; }

/* label dat bij de cursor hoort: dun lijntje en een woord in typemachineletter */
.held__wijzer { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0; pointer-events: none; opacity: 0; transition: opacity .35s; font-family: "Courier New", Courier, monospace; font-size: 13px; line-height: 1; letter-spacing: .04em; color: #fff; white-space: nowrap; will-change: transform; }
.held__wijzer.is-aan { opacity: 1; }
.held:has(.held__knoppen:hover) .held__wijzer { opacity: 0; } /* geen label over de muziekknop */
.held__wijzerlijn { width: 84px; height: 1px; background: rgba(255, 255, 255, .55); }

/* ── laden: eerst de kop op zwart, dan titel en foto, dan lijn en lijst, als laatste het raster ── */
.js:not(.stil) .held__regel { opacity: 0; transform: translateY(60px); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s cubic-bezier(.22, 1, .36, 1); }
.js:not(.stil) .held__regel--2 { transition-delay: .15s; }
.js:not(.stil) .held__regel--3 { transition-delay: .3s; }
.js:not(.stil) .held__vonk { opacity: 0; transform: scale(.7); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .4s, opacity .3s linear .4s; }
.js:not(.stil) .held__merkje, .js:not(.stil) .held__titel { opacity: 0; transform: translateY(20px); transition: transform .65s cubic-bezier(.22, 1, .36, 1) 1.35s, opacity .65s linear 1.35s; }
.js:not(.stil) .held__foto { opacity: 0; transition: opacity 1.1s linear 1.5s; }
/* met rook: de rook onthult de foto, dus die staat er meteen */
.js.rook:not(.stil) .held__foto { opacity: 1; transition: none; }
.js:not(.stil) .held__adres { opacity: 0; transition: opacity .5s linear 1.7s; }
.js:not(.stil) .held__adres { transition-delay: 1.9s; }
.js:not(.stil) .held__lijn { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1) 1.7s; }
.js:not(.stil) .held__vakken li { opacity: 0; transform: translateY(-20px); transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .65s linear; transition-delay: calc(2.4s + var(--i, 0) * .08s); }
.js:not(.stil) .held__zij { opacity: 0; transition: opacity .6s linear 2.4s; }
.js:not(.stil) .held__raster { opacity: 0; transition: opacity 1s linear 2.9s; }
.js:not(.stil) .held.is-klaar :is(.held__regel, .held__merkje, .held__titel, .held__vakken li) { opacity: 1; transform: none; }
.js:not(.stil) .held.is-klaar :is(.held__foto, .held__adres, .held__raster) { opacity: 1; }
.js:not(.stil) .held.is-klaar .held__vonk { opacity: 1; transform: none; }
.js:not(.stil) .held.is-klaar .held__lijn { transform: none; }
.js:not(.stil) .held.is-klaar .held__zij { opacity: .8; }

/* middelbreed: smaller blok zodat het rechts naast de hoofden blijft */
@media (max-width: 1440px) and (min-width: 811px) {
  .held__rechts { max-width: 220px; padding-right: 20px; }
  .held__naam { font-size: 18px; }
  .held__vakken { gap: 10px; }
}
@media (max-width: 810px) {
  .held__boven { padding-left: 20px; padding-right: 20px; }
  .held__onder { padding: 0 20px 24px; }
  .held__merkje { margin-bottom: 24px; }
  .held__kop { font-size: 18vw; }
  .held__zij { right: 18px; }
}
@media (max-width: 480px) {
  .held__boven { grid-template-columns: 1fr; padding: 40px 16px 0; }
  .held__merkje { flex-direction: column; align-items: flex-start; gap: 0; height: auto; margin-bottom: 16px; }
  .held__titel { font-size: 50px; }
  .held__rechts { margin-top: 24px; }
  .held__lijn { margin: 0 17px 0 5px; }
  .held__rechts { justify-self: start; padding-right: 0; }
  .held__naam { font-size: 19px; }
  .held__onder { padding: 0 16px 103px; }
  .held__kop { font-size: 30vw; }
  .held__zij, .held__wijzer { display: none; }
  .held__knoppen { right: 16px; bottom: 16px; gap: 20px; }
}
@media (hover: none) { .held__wijzer { display: none; } }

/* zoeklicht (js/zoeklicht.js): canvas over de foto; bij "lights off" verdwijnt het raster zodat alleen het licht spreekt */
.held__licht { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.held.is-donker .held__raster { opacity: 0 !important; transition: opacity .6s linear 0s !important; }

/* knoppen beter zichtbaar: elk een eigen pil met donkere, wazige achtergrond, lichte rand en volle tekst.
   Na het laden pulseert de rand een paar keer zacht om de aandacht te trekken; aan = rode rand en rode tint. */
.held__knoppen { gap: 12px; }
.held__lichtknop, .held__geluid {
  font-family: var(--sans); cursor: pointer;
  height: 40px; padding: 0 16px; gap: 10px; border-radius: 100px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 217, 200, .38); opacity: 1;
  transition: border-color .25s, background-color .25s, transform .25s;
}
.held__lichtknop:hover, .held__geluid:hover { border-color: var(--creme); background: rgba(0, 0, 0, .7); transform: translateY(-1px); }
.held__lichtknop .held__knoptekst, .held__geluidtekst { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--creme); }
.held__geluidtekst { min-width: 0; text-align: left; width: 6.4em; white-space: nowrap; }
.held__lichtknop .held__knoptekst { white-space: nowrap; }
.held__lichtknop[aria-pressed="true"], .held__geluid[aria-pressed="true"] { border-color: var(--rood); background: rgba(249, 65, 55, .16); }
.held__balkjes span { transform: scaleY(.35); }
@keyframes held-knop-puls { 0% { box-shadow: 0 0 0 0 rgba(232, 217, 200, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(232, 217, 200, 0); } }
.js:not(.stil) .held.is-klaar .held__lichtknop[aria-pressed="false"], .js:not(.stil) .held.is-klaar .held__geluid[aria-pressed="false"] { animation: held-knop-puls 1.8s ease-out 3.2s 4; }
.js:not(.stil) .held.is-klaar .held__geluid[aria-pressed="false"] { animation-delay: 3.5s; }
@media (max-width: 480px) {
  .held__knoppen { gap: 8px; }
  .held__lichtknop, .held__geluid { height: 36px; padding: 0 12px; }
  .held__lichtknop .held__knoptekst, .held__geluidtekst { font-size: 12px; }
}

/* ── mobiel (onder iPad-formaat) ──
   Tagline en credits weg, de titel groot over de lichamen op volle breedte en direct boven de audioknop.
   Spotlight (knop + effect) staat op mobiel uit (js/zoeklicht.js). */
@media (max-width: 767px) {
  .held__merkje, .held__rechts, .held__lichtknop { display: none; }
  .held__boven { grid-template-columns: 1fr; padding: 40px 16px 0; }
  .held__titel { font-size: clamp(40px, 11vw, 64px); }
  /* blok is 2.18em breed (drie regels even breed): volle breedte min de zijlucht */
  .held__kop { font-size: calc((100vw - 32px) / 2.18); }
  .held__onder { padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .held__knoppen { right: 16px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* telefoon liggend (touch + lage hoogte): zelfde opzet als mobiel staand, titel geschaald op de hoogte */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .held { min-height: 0; }
  .held__merkje, .held__rechts, .held__lichtknop { display: none; }
  .held__boven { grid-template-columns: 1fr; padding: 20px 24px 0; }
  .held__titel { font-size: clamp(28px, 9vh, 44px); }
  .held__adres { margin-top: 6px; }
  .held__kop { font-size: min(26vh, calc((100vw - 48px) / 2.18)); }
  .held__onder { padding: 0 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .held__knoppen { right: 24px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}