/* Riso-site, beeldtaal studie S5 (neonite) in master k. Opdracht Dauji 25-10-2026: "herbouw de hele site kwa content in
   die stijl, afbeeldingen verwerken we later wel ... de textuur mag iets rauwer, meer riso/grof". */
/* G1 (Dauji 20-10-2026, herhaald 29-10: "vgm deden we ook geen helvetica light"): geen Light meer; koppen HN Bold -0,045em, cijfers en nav 400 */
@font-face{font-family:HN;src:url(assets/cdn-673633fddae86e3fb8424223/674f312f1c70638857f67282_HelveticaNeueRoman.woff2)format("woff2"),url(assets/cdn-673633fddae86e3fb8424223/674f312f1c70638857f67282_HelveticaNeueRoman.otf)format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:HN;src:url(assets/cdn-673633fddae86e3fb8424223/674f312d4449bc7d8286e6d3_HelveticaNeueMedium.woff2)format("woff2"),url(assets/cdn-673633fddae86e3fb8424223/674f312d4449bc7d8286e6d3_HelveticaNeueMedium.otf)format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:HN;src:url(assets/cdn-673633fddae86e3fb8424223/674f312eebce64335b4d0f29_HelveticaNeueBold.woff2)format("woff2"),url(assets/cdn-673633fddae86e3fb8424223/674f312eebce64335b4d0f29_HelveticaNeueBold.otf)format("opentype");font-weight:700;font-display:swap}
:root{--papier:#FFFFFF;--tint:#E9EAFE;--zwart:#131313;--blauw:#222EF7;--m:clamp(16px,7.8vw,112px);--rand:56px;--klein:13px;--tekst:17px;--tussen:clamp(22px,1.95vw,28px);--kop:clamp(28px,3.34vw,48px);--reus:clamp(64px,13vw,220px);--lijn:1.5px;--grond:#EDEDED}/* papier wit (O-0047, Dauji 29-10-2026: "De achtergrond mag van mij eigenlijk wel nog witter. Cleaner."); raster.py en korrel.py lezen de papierkleur hier via risopapier.py en riso.py bouwt niet als ze achterlopen; tint = 10 procent blauw op wit, voor vlakken achter beeld dat nog laadt */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--papier)}
body{font:400 var(--tekst)/1.45 HN,Helvetica,Arial,sans-serif;color:var(--zwart);background:var(--papier);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* papier is wit sinds 02-11-2026, zoals de avondpagina in pin S2 (Dauji: "overal die witte achtergrond zoals die avondpagina filmavond"); was EFEDE6. Posters en drukwerk houden hun eigen papier.
   De grond onder een foto of een lege tegel (was beige E2DFD6 en E4E0D8) is daarmee neutraal grijs: --grond, past bij de zwart-witfoto's. */
/* geen papierstructuur over de pagina: alleen de blauwe vlek is riso (Dauji 25-10-2026) */
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wm{display:block;height:100%;width:auto}
.wm svg{display:block;height:100%;width:auto;overflow:visible}

/* ---------- kopbalk ---------- */
.kopbalk{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:44px var(--rand) 0}
.kopbalk .merk{height:18px;display:block}
.kopbalk nav{display:flex;gap:26px;font-size:var(--klein);line-height:1.2}
.kopbalk nav a{padding:5px 0}
/* regelval (29-10-2026): geen eenwoordige laatste regel; tikvlak kop minstens 24 px (WCAG 2.5.8) */
h1,h2,h3,h4,.kop{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}
.kopbalk .merk{box-sizing:content-box;padding:3px 0;margin-top:-3px}
.kopbalk nav a.hier{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.kopbalk nav a:hover{color:var(--blauw)}

/* ---------- held ---------- */
.held{position:relative;height:100svh;min-height:620px;max-height:1080px}
.doek{position:absolute;inset:0;overflow:hidden}
.vel{display:block;width:100%;height:100%;opacity:0;transition:opacity .5s}
.held.klaar .vel{opacity:1}
.vel text{font-family:HN,Helvetica,Arial,sans-serif;font-weight:700}
.meta{position:absolute;right:var(--rand);top:26.5%;bottom:10%;width:160px;text-align:right;z-index:3;display:flex;flex-direction:column}
.streep{width:40px;height:var(--lijn);background:var(--zwart);margin-left:auto}
.meta .nr{font-weight:400;font-size:var(--tussen);letter-spacing:-.03em;line-height:1;margin-top:14px}
.meta dl{margin-top:auto}
.meta dt{font-size:var(--klein);font-weight:700;line-height:1.3}
.meta dd{font-size:var(--klein);font-weight:400;line-height:1.3;margin-bottom:14px}
/* lang mailadres loopt naar links over, nooit buiten de bladspiegel (26-10-2026) */
.meta dd{margin-left:-80px}
.meta .streep.onder{margin-top:6px;margin-bottom:22px}
.meta .rond{margin-left:auto}
.rond{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--zwart);color:var(--papier);font-size:15px;line-height:1;transition:background .2s,transform .25s}
.rond:hover,a:hover>.rond{background:var(--blauw);transform:scale(1.12)}
/* volbeeld (over, O-0039): de zaal over het hele doek, de letters in de vlek tonen hem. Het svg moet zelf gepositioneerd
   zijn, anders schildert het beeld eroverheen. Het beeld drukt van boven naar onder in, als een drumgang */
.met-volbeeld .volbeeld{position:absolute;inset:0;clip-path:inset(0);animation:drumgang .9s cubic-bezier(.7,0,.3,1) .15s both}
.met-volbeeld .volbeeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.met-volbeeld .vel{position:relative}
/* blauw op .34 verdwijnt in het raster (proef 29-10-2026): de kop buiten de vlek staat vol blauw */
.met-volbeeld use.tl{fill-opacity:1}
@keyframes drumgang{from{clip-path:inset(0 0 100% 0)}}
@media (min-width:761px){
 /* de gegevens staan op het beeld: elk op een eigen strook papier, zoals de avondnaam */
 .met-volbeeld .meta .nr{align-self:flex-end;background:var(--papier);padding:0 4px}
 .met-volbeeld .meta :is(dt,dd){width:fit-content;margin-left:auto;background:var(--papier);padding:0 4px}
}
@media (prefers-reduced-motion:reduce){.met-volbeeld .volbeeld{animation:none}}
@media print{.met-volbeeld .volbeeld{animation:none}}

/* ---------- blokken ---------- */
.blok{padding:120px var(--m) 0}
.blok-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-bottom:44px}
.blok-kop .rechts{text-align:right;font-size:var(--klein)}
.label{font-size:var(--klein);line-height:1.3}
.nrl{font-weight:400;font-size:var(--tussen);letter-spacing:-.03em;line-height:1;display:block;margin-bottom:18px}
.groot{font-weight:700;text-transform:uppercase;font-size:var(--kop);line-height:.86;letter-spacing:-.045em}
.middel{font-weight:700;text-transform:uppercase;font-size:var(--kop);line-height:.88;letter-spacing:-.045em}
.lijst{border-bottom:var(--lijn) solid var(--zwart)}
.rij{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,240px) 36px;gap:24px;align-items:center;padding:20px 0;border-top:var(--lijn) solid var(--zwart)}
.rij .n{font-size:var(--klein)}
.rij .t{font-weight:700;text-transform:uppercase;font-size:var(--kop);line-height:.9;letter-spacing:-.045em;transition:color .2s}
.rij .t.zin{text-transform:none;font-size:var(--tussen);line-height:1.08;letter-spacing:-.02em}
.rij .m{font-size:var(--klein);line-height:1.35}
.rij .m b{font-weight:500}
a.rij:hover .t{color:var(--blauw)}
a.rij:hover .rond{background:var(--blauw);transform:translateX(6px)}
/* terugkerende avond: een rij, alle data eronder; comedy per datum met line-up */
.rij.reeks{align-items:start}
.rij.reeks .m{padding-top:.4em}
.reeks a.t{display:block}
.reeks a.t:hover{color:var(--blauw)}
.reeks .data{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:var(--klein);line-height:1.35}
.reeks .data a:hover{color:var(--blauw)}
.reeks .data.lijnen{flex-direction:column;gap:5px}
.reeks .data .d{display:inline-flex;gap:10px;align-items:baseline}
.reeks .data.lijnen .d{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px}
.reeks .data.lijnen .d>a:first-child{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px}
.reeks .data .kaart{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 13px;border-radius:0;background:var(--zwart);color:var(--papier);font-size:var(--klein);font-weight:500;line-height:1;white-space:nowrap;transition:background .2s}
.reeks .data .kaart span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--papier);color:var(--zwart);font-size:var(--klein)}
.reeks .data .kaart:hover{background:var(--blauw);color:var(--papier)}
.reeks .data .d{align-items:center}
.reeks .alle{width:100%}
.reeks .data.lijnen,.reeks .alle .data.lijnen{max-width:620px}
.reeks .alle summary{cursor:pointer;list-style:none;font-weight:500;margin-top:6px;display:inline-flex;align-items:center;min-height:28px}
.reeks .alle summary::-webkit-details-marker{display:none}
.reeks .alle summary::after{content:" ↓";margin-left:.35em}.reeks .alle[open] summary::after{content:" ↑"}
.reeks .alle summary span{font-weight:400;margin-left:.35em}
.reeks .alle .data{margin-top:5px}
.reeks .data b{font-weight:500}
.reeks .data .meer{text-decoration:underline;text-underline-offset:3px}
.lijst.klein .rij{padding:12px 0}
.lijst.klein .t{font-size:var(--tussen)}
.twee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:64px;align-items:start}
.lees{font-size:var(--tekst);line-height:1.5;max-width:36em}
.lees>*+*{margin-top:.9em}
.lees h2,.lees h3,.lees h4{font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:var(--tussen);margin-top:1.4em}
.lees a{text-decoration:underline;text-underline-offset:3px}
.lees a:hover{color:var(--blauw)}
.lees blockquote{font-weight:700;font-size:var(--tussen);line-height:1.2;letter-spacing:-.045em}
.lees ul,.lees ol{padding-left:1.1em}
.lead{font-size:var(--tussen);line-height:1.25;letter-spacing:-.01em;max-width:28em}
.namen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--lijn) solid var(--zwart)}
.namen>*{padding:16px 16px 16px 0;border-bottom:var(--lijn) solid var(--zwart);font-size:var(--klein)}
.knoplink{display:inline-flex;align-items:center;gap:14px;font-size:var(--klein);font-weight:700}
.knoplink:hover{color:var(--blauw)}

/* ---------- formulier ---------- */
.form input,.form textarea{display:block;width:100%;font:inherit;font-size:var(--tekst);color:inherit;background:transparent;border:0;border-top:var(--lijn) solid var(--zwart);padding:14px 0 18px;border-radius:0;outline:0}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{border-top-color:var(--blauw)}
.form ::placeholder{color:var(--zwart);opacity:.55}
.form button{font:inherit;font-weight:500;background:none;border:0;cursor:pointer;color:inherit;margin-top:22px}

/* ---------- voet ---------- */
.voet{margin-top:160px;padding:0 var(--m) 28px}
.voet .groot-merk{display:block;width:100%;color:var(--blauw)}
.voet .groot-merk svg{width:100%;height:auto;display:block}
.voet .gegevens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:var(--lijn) solid var(--zwart);margin-top:36px;padding-top:16px;font-size:var(--klein)}
.voet .gegevens a:hover{color:var(--blauw)}
/* tikvlakken voet en lees verder minstens 24 px (29-10-2026) */
.voet .gegevens,.voet .colofon{line-height:24px}
.voet .gegevens a,.voet .colofon a{display:inline-block;line-height:24px}
.meer summary{padding:2px 0}
.colofon{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:var(--klein)}
.colofon a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1000px){
 .namen{grid-template-columns:repeat(2,minmax(0,1fr))}
 .twee{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
 :root{--rand:16px;--tekst:16px}
 .kopbalk{padding-top:20px}
 .kopbalk .merk{height:15px;flex:none}
 .kopbalk nav{flex-wrap:wrap;justify-content:flex-end;gap:6px 14px;font-size:var(--klein);max-width:62%}
 .held{height:auto;min-height:0;max-height:none}
 .doek{position:relative;height:76svh}
 .met-volbeeld .doek{height:auto;aspect-ratio:5/6}
 .meta{position:static;width:auto;text-align:left;padding:0 16px;display:block}
 .meta .streep{margin-left:0}
 .meta .nr{display:none}
 .meta dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin-top:18px;align-items:baseline}
 .meta dd{margin:0}
 .meta .streep.onder{margin:18px 0}
 .meta .rond{margin-left:0}
 .blok{padding-top:88px}
 .blok-kop{grid-template-columns:minmax(0,1fr);margin-bottom:28px}
 .blok-kop .rechts{text-align:left}
 .rij{grid-template-columns:34px minmax(0,1fr) 36px;gap:6px 12px;padding:16px 0}
 .reeks .data{gap:0 18px}
 .reeks .data.lijnen{gap:0}
 .reeks .data .d>a:not(.kaart){display:inline-flex;align-items:center;min-height:44px}
 .reeks .data .kaart{height:36px;padding:0 8px 0 15px;font-size:13px}
 .reeks .alle summary{min-height:44px}
 .reeks .data.lijnen .d{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
 .reeks .data.lijnen .d>a:first-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:6px 0}
 .rij .m{grid-column:2;grid-row:2}
 .rij .rond{grid-column:3;grid-row:1/3}
 .namen{grid-template-columns:minmax(0,1fr)}
 .voet{margin-top:110px}
 .voet .gegevens{grid-template-columns:minmax(0,1fr)}
}
/* eventfeiten bovenaan, groot; beschrijving kort met lees verder (Dauji 26-10-2026) */
.feiten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 28px;font-size:var(--tussen);line-height:1.25;letter-spacing:-.01em}
.feiten dt{font-size:var(--klein);padding-top:.55em}
/* telefoon: contact@studioschimmel.com op var(--tussen) is 290 px en begint op 124, dat past pas vanaf 430 breed; label erboven (meting 04-11-2026, was 389) */
@media (max-width:429px){.feiten:not(.avond .feiten){grid-template-columns:minmax(0,1fr);row-gap:2px}.feiten:not(.avond .feiten) dd+dt{margin-top:12px}}
.meer summary{cursor:pointer;font-weight:500;font-size:var(--klein);margin-top:1em;list-style:none}
.meer summary::after{content:" ↓"}.meer[open] summary::after{content:" ↑"}
.meer>p{margin-top:.9em}
/* rijen in een tekstgrootte (Dauji 26-10-2026: "misschien gewoon dezelfde grootte?") */
.lijst.klein .rij .n,.lijst.klein .rij .t,.lijst.klein .rij .m{font-size:var(--tussen);line-height:1.25;letter-spacing:-.01em}
.lijst.klein .rij .m b{font-weight:400}
/* hoverbeeld in monotoon blauw (beeldstraat): grijs beeld in screen over blauw, schaduwen blauw, licht wit */
.volg{position:fixed;left:0;top:0;width:240px;height:300px;overflow:hidden;background:var(--grond);pointer-events:none;z-index:40;transition:opacity .18s}
/* een vorm voor elke hover (Dauji 26-10-2026: "altijd een uitsnede van iets, of een schilderij, of een foto van de persoon"): rechthoek, eigen kleur, geen blauwe laag */
.volg img,.volg video{display:block;width:100%;height:100%;object-fit:cover}.volg [hidden]{display:none}
.volg[data-soort=cutout] img{object-fit:cover;object-position:50% 15%}
.volg[data-soort=zw] img{filter:grayscale(1) contrast(1.1)}
/* zwart-wit overal (Dauji 30-10-2026: "gewoon zwart wit en kleur bij hover, normale foto's. Overal zwart wit verder"): sinds 02-11
   zijn de bestanden kleur en maakt deze css ze grijs tot hover of focus (zie foto's verderop). Op een tikscherm kleurt riso.js ze zodra ze midden in beeld staan (.kleur-aan), en het
   teampaneel, dat je met een tik opent, toont het portret meteen in kleur. */
img.kleurhover{filter:grayscale(1);transition:filter .3s}
:is(a,.tegel,.foto):hover img.kleurhover,:is(a,.tegel):focus-visible img.kleurhover,.tegel:focus-within img.kleurhover,img.kleurhover.kleur-aan{filter:none}
@media (hover:none){.lidgroot .foto img.kleurhover{filter:none}}
@media print{img.kleurhover{filter:none}}

/* mycelia-proef 26-10-2026: reuzenwoord als sectiekop, vier kolommen met fotouitsnede (sinds 01-11 zwart-wit, zie foto's verderop) */
.reus{font-size:var(--reus);line-height:.86;letter-spacing:-.045em;font-weight:700;color:var(--blauw);margin:0 0 48px;text-transform:lowercase}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:var(--lijn) solid var(--zwart);padding-top:24px}
.vier .uit{aspect-ratio:4/5;overflow:hidden}
.vier .uit img{display:block;width:100%;height:100%;object-fit:cover}
.vier h3{font-size:var(--tussen);margin:16px 0 8px;font-weight:700;letter-spacing:-.02em}
.vier p{font-size:var(--tekst);line-height:1.45;margin:0}
@media (max-width:900px){.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vier{grid-template-columns:minmax(0,1fr)}.reus{margin-bottom:28px}}

/* ---------- rustige indexpagina's en avondpagina (Dauji 26-10-2026: "die 3 dingen die een 5 scoren mag je inderdaad beter
   maken, kijk daarvoor goed naar de inspiratie") ---------- */
/* pin S1 (Menil): lege bovenkant, klein filterwoord in de navkolom, tegels van vier met bijschrift van drie regels boven een staand beeld */
.indexkop{height:clamp(220px,34vh,340px);position:relative}
.indexkop .filter{position:absolute;left:50%;bottom:28%;display:flex;gap:22px;font-size:var(--klein)}
.indexkop .filter a{padding:6px 0}
.indexkop .filter a.hier{color:var(--blauw)}
.indexkop .filter a:hover{color:var(--blauw)}
.blok.index{padding-top:0}
.label{font-size:var(--klein)}
.blok>.label{margin-bottom:14px}
.mi-intro{font-size:var(--klein);max-width:34em;margin-bottom:28px}
.tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 12px}
/* subgrid (02-11-2026): een bijschrift van vier regels duwde het beeld van die tegel lager dan de buren; nu deelt de rij bijschrift, beeld en data */
.tegels .tegel{display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;min-width:0}
/* alleen de agendategels (article); de makerskaart (a.rij.tegel) houdt flex, anders wordt zijn beeld 0 px hoog */
.tegels article.tegel{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-items:start;padding:0;border:0;min-width:0}
.tegel .bijschrift{display:flex;flex-direction:column;font-size:var(--klein);line-height:1.3;min-height:calc(3 * 1.3em);margin-bottom:22px}
.tegel .bijschrift .t{font:inherit;text-transform:none;letter-spacing:0;line-height:inherit}
/* makerskaart 02-11-2026: de tegel draagt ook .rij (filter in makersindex.js) en erfde daar gap:24px van, waardoor het bijschrift
   46 px van zijn eigen beeld stond en 56 px van het beeld erboven (agenda: 22). Naam leidt, rol en podiumregel een stap terug
   (rgba .65 op wit papier: contrast 5,7:1); omloop gebalanceerd zodat op 390 geen woord alleen op een regel valt. */
.mi-lijst .tegel{gap:0}
.mi-lijst .tegel .bijschrift>span:not(.t){color:rgba(19,19,19,.65)}
.mi-lijst .tegel .bijschrift>span{text-wrap:balance}
.heel{white-space:nowrap}
.tegel .beeld{display:block;aspect-ratio:3/4;overflow:hidden;background:#DCDAF0}
.tegel .beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tegel:hover .beeld img,.tegel .beeld:hover img{transform:scale(1.02)}
.tegel a:hover,.tegel:hover .t{color:var(--blauw)}
.tegel .data{display:flex;flex-direction:column;gap:2px;margin-top:14px;font-size:var(--klein);line-height:1.3}
.tegel .data .d{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px;border-top:1px solid rgba(19,19,19,.18)}
.tegel .data.lijnen .d>a:first-child{display:flex;flex-direction:column;padding:6px 0;margin:0;min-width:0}
/* 31-10-2026: datum plus namen is samen al minstens 46 px hoog; de negatieve marge van de tikvlakregels trok de tekst hier over de scheidingslijnen */
.tegel .data.lijnen .d>a:first-child span{overflow-wrap:anywhere}
.tegel .data b{font-weight:500}
.tegel .alle summary{cursor:pointer;list-style:none;font-weight:500;display:inline-flex;align-items:center;min-height:32px}
.tegel .alle summary::-webkit-details-marker{display:none}
.tegel .alle summary::after{content:" ↓";margin-left:.35em}.tegel .alle[open] summary::after{content:" ↑"}
/* kaartjesknop: blauwe lijn en blauwe tekst in plaats van het zwarte blok */
/* kaartjesknop: blauwe pil met wit woord (concept 5, keuze Dauji 03-11-2026) */
.kaart{display:inline-flex;align-items:center;gap:6px;flex:none;height:28px;padding:0 13px;border:0;border-radius:999px;background:var(--blauw);color:var(--papier);font-size:var(--klein);font-weight:500;line-height:1;white-space:nowrap;transition:background .2s,color .2s}
.kaart span{font-size:var(--klein)}
.kaart:hover{background:var(--zwart);color:var(--papier)}
.reeks .data .kaart{background:var(--blauw);color:var(--papier);border:0;border-radius:999px;padding:0 13px;height:28px}
.reeks .data .kaart span{background:none;color:inherit;width:auto;height:auto}
.reeks .data .kaart:hover{background:var(--zwart);color:var(--papier)}

/* pin S2 (Rema): staande foto links over de volle hoogte, rechts label op de basislijn van een Roman-kop met inspringing */
.avond{display:grid;grid-template-columns:35% minmax(0,1fr);padding-top:96px;min-height:100svh}
.avond .foto{position:sticky;top:0;height:calc(100svh - 96px);align-self:start;overflow:hidden;background:var(--tint)}
.avond .foto img{display:block;width:100%;height:100%;object-fit:cover}
.avond .tekst{display:flex;flex-direction:column;padding:0 var(--rand) 0 clamp(24px,3vw,48px);min-height:calc(100svh - 96px)}
.avond .kop{font-weight:400;font-size:var(--tussen);line-height:1.12;letter-spacing:-.022em;max-width:20em;text-wrap:balance}
.avond.maker .kop .label{display:inline-block;width:clamp(56px,8.8vw,126px);font-size:var(--klein);letter-spacing:0;vertical-align:baseline}
.avond.maker .onder{margin:auto 0 0 auto;width:min(420px,100%);padding:56px 0 8px}
.avond .feiten{font-size:var(--klein);line-height:1.35;gap:6px 18px;letter-spacing:0}
.avond .feiten dt{padding-top:0;font-size:var(--klein)}
.avond .koop{margin:22px 0 40px}
.avond .koop .kaart{height:48px;padding:0 24px;font-size:var(--tekst)}
.avond .lees{font-size:var(--tekst);line-height:1.45}
.avond .tof{margin:28px 0 0;padding-top:12px;border-top:1px solid currentColor;font-size:var(--klein)}
.avond .tof a{display:inline-flex;gap:.4em;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.avond .feiten+.lees{margin-top:40px}
.avond.maker .lees>p:first-child{text-indent:clamp(48px,8vw,118px)}
/* makerpagina naar pin S2 (02-11-2026): portret, dus het gezicht in beeld waar de kolom de staande uitsnede afsnijdt (390: 62svh) */
.avond.maker .foto img{object-position:50% 28%}
.avond.maker .feiten a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.avond.maker .feiten a span{margin-left:2px}
/* een bio die in de bron helemaal vet staat (astrid-abels) leest in de S2-kolom als gewone broodtekst, zoals de pin */
.avond.maker .lees p>strong:only-child{font-weight:inherit}

/* rijen onder een rustige index of avond: klein, en de pijl als blauwe lijn in plaats van een zwarte cirkel */
:is(.indexkop,.kleurveld)~.blok .lijst.klein .rij,.avond~.blok .lijst.klein .rij{grid-template-columns:72px minmax(0,1fr) minmax(0,320px) 28px;padding:10px 0;border-top-width:1px;border-top-color:rgba(19,19,19,.18)}
:is(.indexkop,.kleurveld)~.blok .lijst.klein .rij :is(.n,.t,.m),.avond~.blok .lijst.klein .rij :is(.n,.t,.m){font-size:var(--klein);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.35}
:is(.indexkop,.kleurveld)~.blok .lijst.klein .rij .rond,.avond~.blok .lijst.klein .rij .rond{width:26px;height:26px;font-size:var(--klein);background:transparent;color:var(--blauw);border:var(--lijn) solid var(--blauw)}
:is(.indexkop,.kleurveld)~.blok a.rij:hover .rond,.avond~.blok a.rij:hover .rond{background:var(--blauw);color:var(--papier)}

@media (max-width:1000px){
 .tegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 12px}
}
@media (max-width:760px){
 .indexkop{height:200px}
 .indexkop .filter{bottom:24px}
 .tegels{grid-template-columns:minmax(0,1fr);gap:40px}
 .tegels .tegel{display:grid;grid-template-columns:42% minmax(0,1fr);gap:0 14px;align-items:start}
 .tegel .bijschrift{grid-column:2;grid-row:1;margin-bottom:10px;min-height:0}
 .tegel .beeld{grid-column:1;grid-row:1/4}
 .tegel .data{grid-column:2;margin-top:0}
 .tegel .data .d{min-height:44px}
 /* tegel met line-up: datalijst over de volle breedte onder beeld en bijschrift; naast het beeld bleef 76 px over en liep de line-up over vijf regels (meting 390, 03-11-2026) */
 .tegels .tegel:has(.data.lijnen) .beeld{grid-row:1}
 .tegels .tegel:has(.data.lijnen) .data{grid-column:1/-1;grid-row:2;margin-top:14px}
 .tegel .alle summary{min-height:44px}
 .kaart,.reeks .data .kaart{height:32px;padding:0 14px;font-size:var(--klein)}
 .indexkop .filter{left:var(--m)}
 .avond{grid-template-columns:minmax(0,1fr);padding-top:88px}
 .avond .foto{position:relative;height:62svh}
 .avond:not(.maker) .foto{height:40svh}/* de avondnaam staat op het eerste scherm */
 .avond .tekst{padding:22px 16px 0;min-height:0}
 .avond.maker .kop .label{width:76px}
 .avond.maker .onder{margin:32px 0 0;width:100%;padding:0}
 .avond .koop .kaart{height:48px}
 :is(.indexkop,.kleurveld)~.blok .lijst.klein .rij,.avond~.blok .lijst.klein .rij{grid-template-columns:34px minmax(0,1fr) 28px;padding:12px 0}
}

/* team als één rij naar pin S1 (Menil), schuift naar rechts; paneel schuift van rechts in (Dauji 26-10-2026) */
.teamstrook .spoor{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:6px}
.teamstrook .spoor::-webkit-scrollbar{display:none}
.teamstrook .tegel{flex:0 0 calc((100% - 36px) / 4);scroll-snap-align:start}
.teamstrook .tegel .beeld{aspect-ratio:4/5}
/* 31-10-2026: alleen een tegel zonder portret krijgt deze grond (sinds 01-11 ook de grond onder elke foto, zie foto's hieronder) */
.teamstrook .tegel .beeld.leeg{background:var(--grond)}
.teamstrook .stuur,.teampaneel .stuur{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:22px;font-size:var(--klein)}
.teamstrook .stuur .tel{margin-right:auto}
.stuur .rond,.paneelkop .rond{border:0;cursor:pointer;font-family:inherit}
.stuur .rond:disabled{opacity:.25;cursor:default;transform:none;background:var(--zwart)}
.teampaneel{position:fixed;inset:0 0 0 auto;width:min(980px,100vw);max-width:100vw;height:100dvh;max-height:none;margin:0;padding:var(--rand) var(--m);border:0;
 background:var(--papier);color:var(--zwart);overflow-y:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.teampaneel[open]{display:flex;flex-direction:column}
.teampaneel.in{transform:none}
.teampaneel::backdrop{background:rgba(19,19,19,0);transition:background .45s}
.teampaneel.in::backdrop{background:rgba(19,19,19,.28)}
.paneelkop{display:flex;justify-content:space-between;align-items:center;font-size:var(--klein);margin-bottom:28px}
.paneelvak{overflow:hidden;flex:1}
.paneelvak .lidgroot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 28px;align-items:end;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s}
.paneelvak .lidgroot.weg-l{transform:translateX(-12%);opacity:0}.paneelvak .lidgroot.weg-r{transform:translateX(12%);opacity:0}
.lidgroot .foto{aspect-ratio:4/5;background:var(--grond);margin:0}
.lidgroot .foto img{display:block;width:100%;height:100%;object-fit:cover}
.lidgroot .tekst{display:flex;flex-direction:column;gap:4px;font-size:var(--klein);line-height:1.35}
.lidgroot h3{font-size:var(--tussen);font-weight:500;line-height:1.05;letter-spacing:-.02em;margin:0 0 10px}
.lidgroot .tekst a:hover{color:var(--blauw)}
.lidgroot .verder{margin-top:14px}
@media (max-width:1000px){.teamstrook .tegel{flex-basis:calc((100% - 12px) / 2.3)}}
@media (max-width:760px){
 .teamstrook .tegels,.teamstrook .tegel{display:flex;flex-direction:column}
 .teamstrook .tegel{flex-basis:72%}
 .teamstrook .tegel .bijschrift{margin-bottom:12px;min-height:calc(3 * 1.3em)}
 .stuur .rond,.paneelkop .rond{width:44px;height:44px}
 .teampaneel{padding:20px var(--m) 24px}
 .paneelvak .lidgroot{grid-template-columns:minmax(0,1fr);gap:18px}
 .lidgroot .tekst a{min-height:28px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){.teampaneel,.paneelvak .lidgroot,.teampaneel::backdrop{transition:none}}

/* woordmerk in HN Bold (Dauji 27-10-2026: "dat logo schimmel mag gewoon helvetica"; fontgate -0,045em) */
.kopbalk .merk{height:auto}
.wm{display:block;height:auto;font-weight:700;font-size:26px;letter-spacing:-.045em;line-height:1;color:var(--zwart)}
.voet .groot-merk .vm{width:100%;height:auto;display:block;overflow:visible}
/* ---------- mobiele ronde 27-10-2026 (Dauji: "die knop en hele agenda is toch afschuwelijk", "mobile is echt slecht ontworpen") ---------- */
.menuknop{display:none}
/* aanraakschermen: geen hover die blijft hangen na een tik (kaartjesknop bleef blauw gevuld) */
@media (hover:none){
 .rond:hover,a:hover>.rond,a.rij:hover .rond{background:var(--zwart);transform:none}
 a.rij:hover .t,.reeks a.t:hover,.reeks .data a:hover,.knoplink:hover,.kopbalk nav a:hover,.tegel a:hover,.tegel:hover .t,.lees a:hover,.voet .gegevens a:hover,.indexkop .filter a:hover,.lidgroot .tekst a:hover{color:inherit}
 .kaart:hover,.reeks .data .kaart:hover{background:var(--blauw);color:var(--papier)}
 .tegel:hover .beeld img,.tegel .beeld:hover img{transform:none}
 .mi-keus label:hover,.mi-chip:hover{color:inherit}
}
/* ---------- O-0047 (Dauji 29-10-2026: "zorg dat je die inspiratie pagina's gewoon 1 op 1 namaakt") ----------
   Maten gemeten op de pins en geschaald naar 1440 breed; de letter blijft HN, de foto's staan sinds 29-10-2026 in eigen kleur. Een pin per soort pagina:
   agenda en makers = S1 Menil Collection, avondpagina = S2 Rema, held (home en de andere pagina's met een held) = S5 Lufthansa. */
@media (min-width:1101px){
 /* S1 Menil: logo klein linksboven, nav vanaf het midden met het laatste woord tegen de rechterrand, filter onder de nav,
    vier gelijke staande kolommen (4:5) op een smalle marge, bijschrift van drie regels in kleine letter boven het beeld */
 body:has(main>.indexkop:first-child) .kopbalk{padding:17px 26px 0 23px}
 body:has(main>.indexkop:first-child) .wm{font-size:19.5px}
 body:has(main>.indexkop:first-child) .kopbalk nav{position:absolute;top:14px;left:50.55%;right:28px;gap:min(58px,calc(9.89vw - 70px),calc((49.45vw - 340px) / 6));font-size:var(--klein)}
 /* derde term (03-11-2026): de zeven navwoorden (samen 308 px) passen ook tussen 1101 en 1366, daar liep contact 7 tot 15 px buiten beeld */
 body:has(main>.indexkop:first-child) .kopbalk nav a:last-child{margin-left:auto}
 body:has(main>.indexkop:first-child) .indexkop{height:373px}
 body:has(main>.indexkop:first-child) .indexkop .filter{left:50.2%;top:107px;bottom:auto}
 body:has(main>.indexkop:first-child) .blok,body:has(main>.indexkop:first-child) .voet{padding-left:20px;padding-right:26px}
 body:has(main>.indexkop:first-child) .tegels{column-gap:10px}
 /* vaste hoogte, onderkant tegen het beeld: zo staan de beelden op een lijn, ook als een titel vier regels nodig heeft */
 body:has(main>.indexkop:first-child) .tegel .bijschrift{font-size:var(--klein);line-height:18.5px;height:55.5px;min-height:0;justify-content:flex-end;margin-bottom:24.5px}
 /* makers: intro en filter in de lege band boven de kolommen, in de navkolom, zoals de pin daar zijn tekst zet */
 body:has(main>.indexkop:first-child) .blok.index{position:relative}
 body:has(main>.indexkop:first-child) .mi-intro{position:absolute;top:-223px;left:calc(50% + 2px);right:26px;max-width:none;margin:0;font-size:13px;line-height:18.5px}
 body:has(main>.indexkop:first-child) .mi-filter{position:absolute;top:-168px;left:calc(50% + 2px);right:26px;gap:6px;margin:0}
 body:has(main>.indexkop:first-child) .mi-zoek{display:flex;align-items:center;gap:8px}
 /* labelkolom op de breedte van "zoek een maker" (92px bij 13px), anders breekt dat label op een woord */
 body:has(main>.indexkop:first-child) :is(.mi-zoek label,.mi-groep>.label){width:96px;flex:none}
 body:has(main>.indexkop:first-child) .mi-zoek input{font-size:var(--klein);padding:6px 0;border-top:0;border-bottom:1px solid rgba(19,19,19,.18);min-height:32px}
 body:has(main>.indexkop:first-child) .mi-zoek input:focus{border-bottom-color:var(--blauw)}
 body:has(main>.indexkop:first-child) .mi-aantal{min-height:18.5px;line-height:18.5px}

 /* avond en maker: gewone kopbalk zoals overal, foto links vanaf de balk tot de onderrand en bij scrollen op volle hoogte.
    Maker houdt S2 Rema (grote zin in regular, tekst rechtsonder); de avond krijgt de naam die de kolom vult, daaronder
    feiten en kaartje links, lopende tekst rechts: het eerste scherm is dan compleet (variant A, Dauji 04-11-2026) */
 .avond{grid-template-columns:35.56% minmax(0,1fr)}
 .avond .foto{top:0;height:100svh}
 .avond .tekst{padding:0 var(--rand) 18px 24px}
 .avond.maker .kop{font-size:clamp(28px,2.43vw,44px);line-height:1.057;max-width:47vw;min-height:180px}
 .avond.maker .kop .label{width:8.26vw;vertical-align:top;margin-top:2.3px}
 .avond.maker .onder{width:30.35vw;padding:56px 0 0}
 .avond .lees{line-height:1.4}
 .avond.maker .lees>p:first-child{text-indent:8.54vw}
 .avond:not(.maker) .onder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto 1fr;gap:0 40px;margin:36px 0 0;padding:14px 0 0;border-top:1px solid currentColor}
 .avond:not(.maker) .feiten{grid-column:1;grid-row:1}
 .avond:not(.maker) .koop{grid-column:1;grid-row:2;margin:22px 0 32px}
 .avond:not(.maker) .lees{grid-column:2;grid-row:1/span 3}
 .avond:not(.maker) .tof{grid-column:1;grid-row:3;align-self:start;margin:0}
 /* "lees verder" minstens 24 px hoog als doelvlak */
 .avond .meer summary{min-height:24px}
}
@media (min-width:761px){
 /* S5 Lufthansa: streep en nummer hoger, de onderste streep en de ronde knop lager, dichter bij de onderrand */
 .meta{top:15.5%;bottom:5.1%}
 .meta .rond{width:39px;height:39px}
 .meta .streep.onder{margin-bottom:53px}
}
@media (max-width:760px){
 :root{--lijn:1px}
 /* menu: merk links, knop rechts; open = vol papiervel met grote woorden */
 .kopbalk{align-items:center;padding-top:16px}
 .menuknop{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 16px;margin-right:-2px;background:none;border:0;font:inherit;font-size:var(--tekst);font-weight:500;color:inherit;cursor:pointer}
 .kopbalk nav{display:none}
 .kopbalk.open{position:fixed;inset:0;z-index:60;background:var(--papier);flex-wrap:wrap;align-content:flex-start;padding-bottom:24px;overflow-y:auto}
 .kopbalk.open nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;max-width:none;width:100%;margin-top:40px;font-size:clamp(34px,10vw,44px);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:1}
 .kopbalk.open nav a{padding:10px 0;border-top:var(--lijn) solid var(--zwart)}
 .kopbalk.open nav a:last-child{border-bottom:var(--lijn) solid var(--zwart)}
 .kopbalk.open nav a.hier{text-decoration:none;color:var(--blauw)}
 .menu-open,.menu-open body{overflow:hidden}
 /* geen zwarte cirkels: de pijl is een blauw teken, de hele rij of link is het tikvlak */
 .rond,.rond:hover,a:hover>.rond,a.rij:hover .rond{width:auto;height:auto;min-width:24px;background:none;color:var(--blauw);border-radius:0;font-size:22px;transform:none}
 .knoplink{color:var(--blauw);min-height:44px;gap:8px}
 .knoplink .rond{font-size:18px;min-width:0}
 .rij .rond{justify-self:end;align-self:start;padding-top:2px}
 :is(.indexkop,.kleurveld)~.blok .lijst.klein .rij .rond,.avond~.blok .lijst.klein .rij .rond{width:auto;height:auto;border:0;font-size:18px}
 /* knoppen die echt knoppen zijn (slider, paneel): vierkant met blauwe lijn, zoals de kaartjesknop */
 .stuur .rond,.paneelkop .rond{width:44px;height:44px;border:var(--lijn) solid var(--blauw);font-size:18px}
 .stuur .rond:disabled{background:none;opacity:.3}
 /* held: gegevens leesbaar, geen losse scrollpijl */
 .meta dd{font-size:var(--klein)}
 .meta .rond[href^="#"]{display:none}
 .meta a.rond{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:18px}
 .meta a.rond::before{content:attr(aria-label);font-size:var(--klein);font-weight:500}
 /* blokken: minder lucht tussen nummer, label en inhoud */
 .blok{padding-top:64px}
 .nrl{margin-bottom:8px}
 .blok-kop{gap:12px;margin-bottom:20px}
 .rij{grid-template-columns:28px minmax(0,1fr) 24px;padding:14px 0}
 .reeks .data .kaart,.kaart{height:36px;padding:0 16px;gap:8px}
 .dubbel{display:none}
 .kopbalk .merk{display:flex;align-items:center;min-height:44px;height:auto}
 .wm{font-size:24px}
 .tegel .data a:not(.kaart){display:inline-block;padding:13px 0;margin:-13px 0}
 .reeks .meer{display:inline-block;padding:13px 0;margin:-13px 0}
 .voet{margin-top:80px}
 /* agenda: elke datum met kaartjes als volle regel, knop rechts uitgelijnd; "nog N data" eronder op eigen regel */
 .reeks .data .d:has(.kaart){flex:0 0 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
 .reeks .data .meer{flex:0 0 100%;margin-top:-13px}
 .kaart span,.reeks .data .kaart span{font-size:15px;line-height:1}
 /* makersindex: twee kolommen, beeld boven de naam, in plaats van een lange lijst met smalle beeldjes */
 .mi-lijst.tegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
 .mi-lijst.tegels .tegel{display:flex;flex-direction:column}
 .mi-lijst .tegel .bijschrift{order:2;margin:10px 0 0;min-height:0}
 .mi-lijst .tegel .beeld{order:1}
 /* teamstrook: naam en mail tikbaar (24 px of meer) zonder dat de regels verschuiven */
 .teamstrook .bijschrift a{padding:4px 0;margin:-4px 0}
}
/* foto's: echte foto's op één formaat (3:4), zwart-wit in rust, bij hover gewoon de kleurfoto, op een aanraakscherm kleur.
   Dauji 30-10-2026: "ik wil die afbeeldingen niet blauw hebben ... gewoon zwart wit en kleur bij hover, normale foto's";
   01-11-2026 over de blauwe duotone: "is dat wel goed? of overkill". Geen moodboardpin kleurt een foto; blauw zit alleen in de vorm.
   Bouwtoets fotos_niet_blauw() in riso.py stopt de bouw als een foto weer een blauwe grond of mengmodus krijgt. */
.vier .uit{aspect-ratio:3/4}
.tegel .beeld,.avond .foto,.vier .uit{background:var(--grond)}
/* 03-11-2026: ook de beeldvakken uit de motionlijn (duim, agendaveld, strook, zaal, stoet); het volbeeld van over is al zwart-wit gebakken */
.tegel .beeld img,.avond .foto img,.vier .uit img,.duim img,.kv-foto img,.kv-duim img,.fotostrook img,img.zaalfoto,.stoet .los img{filter:grayscale(1);mix-blend-mode:normal;transition:filter .3s,transform .5s}
:is(.duim,.kv-foto,.kv-duim,.fotostrook,.stoet .los):hover img,img.zaalfoto:hover{filter:none}
.tegel:hover .beeld img,.tegel .beeld:hover img,.avond .foto:hover img,.vier .uit:hover img,.vier>div:hover .uit img{filter:none}
@media (hover:none){.tegel .beeld img,.avond .foto img,.vier .uit img,.duim img,.kv-foto img,.kv-duim img,.fotostrook img,img.zaalfoto,.stoet .los img{filter:none}}
/* ---------- mobiele ronde 31-10-2026 (Dauji: "Mobile optimalisatie"), meting op 375, 390 en 768 ----------
   Tikvlakken: elk tikdoel minstens 44 bij 44 px op telefoon, tablet en elk aanraakscherm. Waar het kan met padding en een even
   grote negatieve marge, zodat de compositie niet verschuift; alleen knoppen met een zichtbare rand (kaartjes, ronde knop) worden
   echt groter. Meter: meting/vorm-mobiel (tik<44 per pagina). */
.reus,.groot{text-wrap:pretty}
@media (max-width:1000px),(pointer:coarse){
 .voet .gegevens a,.voet .colofon a{padding:10px 0;margin:-10px 0}
 .reeks a.t{padding:11px 0;margin:-11px 0}
 .indexkop .filter a{padding:12.5px 4px;margin:-6.5px -4px}
 .teamstrook .bijschrift a{padding:13.5px 0;margin:-13.5px 0}
 /* pil blijft slank zoals de proef (concept 5); het tikvlak loopt via ::after door tot 44 px */
 .kaart,.reeks .data .kaart{height:32px;position:relative}
 .kaart::after{content:'';position:absolute;inset:-6px 0}
 .avond .koop .kaart{height:48px}
 .avond .koop .kaart::after{inset:0}
 .tegel .alle summary,.reeks .alle summary{min-height:44px}
 .meer summary{line-height:22px;padding:11px 0;margin-top:calc(1em - 9px)}
 .knoplink{min-height:44px}
 .lidgroot .tekst a{min-height:44px;display:inline-flex;align-items:center}
 /* leesbaar klein: niets onder 12 px op een aanraakscherm (colofon, feitlabels, kaartjesteken waren 10 en 11 px) */
}
/* tablet en groot aanraakscherm: de brede compositie blijft, de tikdoelen groeien mee */
@media (min-width:761px) and (max-width:1000px),(min-width:761px) and (pointer:coarse){
 .kopbalk nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;margin:-9px -10px}
 .kopbalk .merk{padding:9px 0;margin:-9px 0 -6px}
 .rond,.stuur .rond,.paneelkop .rond{width:44px;height:44px}
 .indexkop~.blok .lijst.klein .rij .rond,.avond~.blok .lijst.klein .rij .rond{width:44px;height:44px}
 .reeks .data a:not(.kaart),.reeks .meer,.tegel .data:not(.lijnen) a:not(.kaart){padding-top:13.5px;padding-bottom:13.5px;margin-top:-13.5px;margin-bottom:-13.5px}
}
/* telefoon: de pijl blijft een blauw teken, het tikvlak eromheen is 44 px */
@media (max-width:760px){
 .rij a.rond,.meta a.rond{min-width:44px;min-height:44px}
 .rij a.rond{padding:12px 10px 10px;margin:-10px}
 .tegel .data a:not(.kaart){padding:14px 0;margin:-14px 0}
 .reeks .meer{padding:14px 0;margin:-14px 0}
}
/* losse link in een feitenrij (trailer, maker, e-mail): de link blijft inline, dus verticale padding verschuift niets en vergroot alleen
   het tikvlak. Een inline vak is ongeveer 1.1em hoog: 22px - .52em per kant geeft 44 px, 12px - .52em geeft 24 px (WCAG 2.5.8). */
.feiten dd>a{padding-block:max(0px,calc(12px - .52em))}
@media (max-width:1000px),(pointer:coarse){.feiten dd>a{padding-block:max(0px,calc(22px - .52em))}}
/* met de muis op breed scherm: datums in de agendareeks en namen in de teamstrook minstens 24 px, zonder verschuiving */
@media (min-width:1001px) and (pointer:fine){
 .reeks .data .d>a:not(.kaart){padding-block:3px;margin-block:-3px}
 .teamstrook .bijschrift a{padding-block:3.5px;margin-block:-3.5px}
 .tegel .data .d>a:not(.kaart),.reeks .meer{padding-block:4px;margin-block:-4px}
}
/* regelval in agendategels: geen eenwoordige laatste regel in titel en namen */
.tegel .bijschrift .t,.tegel .data .d{text-wrap:balance}

/* ---------- O-0039: home in composities (Dauji 29-10-2026: "maak het gek, leuk, gebruik motion design, vette composities") ---------- */
:root{--lila:#DCDAF0}
.woordvlak{container-type:inline-size;overflow-x:clip}
.reuzenwoord{display:block;white-space:nowrap;font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.8;font-size:calc(100cqi / var(--w) / 1.005);color:var(--blauw)}
.stoet .reuzenwoord{color:var(--zwart)}
.veld .reuzenwoord{color:var(--lila)}
/* 02 agenda (pin WS69) */
.lijst.met-duim .rij{grid-template-columns:72px 120px minmax(0,1fr) minmax(0,240px) 36px}
.met-duim .duim{display:block;align-self:start}
.met-duim .duim img{display:block;width:100%;height:auto}
/* titels in rijen en tegels gebalanceerd: geen los laatste woord (regelval, meting 768 en 390 op 29-10-2026) */
.met-duim .rij .t,.tegel .bijschrift .t{text-wrap:balance}
/* 03 over (pin WS03) */
/* dekkend over het woord zoals in de pin; geen mengmodus, die kleurde de foto blauw op het woord (Dauji 29-10-2026: geen blauwe foto's).
   Maten uit de pin: foto 48% breed vanaf 26%, over het onderste derde van de letters, zodat het woord leesbaar blijft. */
.zaal .zaalfoto{display:block;position:relative;z-index:1;width:48%;height:auto;margin:-10.5% 0 0 26%}
.zaal .zaal-tekst{margin-top:clamp(20px,2vw,32px)}
.zaal .intro{font-weight:400;font-size:var(--kop);line-height:1.1;letter-spacing:-.022em;text-wrap:pretty}
.zaal .zaal-links{display:flex;gap:32px;flex-wrap:wrap;margin:40px 0 0 26%}
/* cijfervenster (TCT-grammatica), sinds 09-11-2026 alleen nog in het agendaveld (.kv-foto) */
.tct-raam{position:absolute;inset:0;width:100%;height:100%;color:var(--veld)}
.gevallen .tct-raam{visibility:hidden}
/* 04 verhalen (Dauji 09-11-2026: "misschien is gewoon die artikels links en dan rechts al een stukje tekst er over lezen leuker"):
   links de lijst, rechts de intro van het gekozen verhaal. De li is display:contents, zodat alle intro's in hetzelfde vak over
   de volle hoogte liggen en alleen .aan zichtbaar is: het blok springt niet bij het wisselen. riso.js zet .aan bij hover en focus.
   Nummer 72px plus 24px zoals de agenda- en archiefrij, zodat de titels op dezelfde lijn staan als "geweest" eronder; lijst 7fr
   tegen intro 5fr houdt de titels op 1440 in twee regels. De intro plakt (sticky), zodat hij bij de onderste rijen in beeld blijft */
.vh-lijst{list-style:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(var(--n),auto) 1fr;column-gap:48px}
.vh-lijst li{display:contents}
.vh-rij{grid-column:1;grid-row:var(--r);display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 24px;align-items:start;padding:18px 0 20px;border-top:var(--lijn) solid var(--zwart)}
.vh-lijst li:last-child .vh-rij{border-bottom:var(--lijn) solid var(--zwart)}
.vh-n{grid-row:1/3;font-size:var(--klein);line-height:1.35;padding-top:.35em}
.vh-t{font-weight:700;font-size:var(--tussen);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;transition:color .2s}
.vh-m{grid-column:2;font-size:var(--klein);line-height:1.35}
.vh-rij .rond{grid-column:3;grid-row:1/3;align-self:center;visibility:hidden}
.vh-lijst li.aan .vh-t,a.vh-rij:hover .vh-t{color:var(--blauw)}
.vh-lijst li.aan .vh-rij .rond{visibility:visible}
.vh-intro{grid-column:2;grid-row:1/-1;align-self:start;position:sticky;top:var(--rand);visibility:hidden;border-top:var(--lijn) solid var(--zwart);padding-top:18px}
.vh-lijst li.aan .vh-intro{visibility:visible}
.vh-door{font-size:var(--klein);line-height:1.35;margin-bottom:14px}
/* intro tussen leestekst en kop: Aeon, The New Yorker en RA zetten de intro op 16-17px onder een kop van 21-36px; hier 20px
   onder 28px, zodat de introkolom op ongeveer 50 tekens per regel blijft */
.vh-lead{font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:30em}
.vh-intro .knoplink{margin-top:24px}
/* 05 makers (pin WS78): staande foto's (4:5) naast elkaar op wisselende hoogte, het onderste deel over het woord MAKERS zoals
   het zaalblok (pin WS03). Gewone foto's in plaats van uitsneden, grijs tot hover (Dauji 30-10-2026: "niet die cutouts bij
   makers, gewoon zwart wit en kleur bij hover"). Breedtes plus zes voegen van 1,2% vullen 99,9% van de rij. */
.stoet{position:relative}
.stoet-rij{position:relative;z-index:1;display:flex;align-items:flex-end;column-gap:1.2%;margin-bottom:-7%}
.stoet .los{position:relative;display:block;flex:none;width:13%}
.stoet .los:nth-of-type(1){width:14%;margin-bottom:4%}
.stoet .los:nth-of-type(2){width:12.5%;margin-bottom:9%}
.stoet .los:nth-of-type(3){width:11.5%;margin-bottom:2%}
.stoet .los:nth-of-type(4){width:14%;margin-bottom:7%}
.stoet .los:nth-of-type(5){width:12.5%;margin-bottom:1.15%}
.stoet .los:nth-of-type(6){width:15%;margin-bottom:6%}
.stoet .los:nth-of-type(7){width:13.2%;margin-bottom:3%}
.stoet .los img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s}
.stoet .los:hover img,.stoet .los:focus-visible img{transform:scale(1.04)}
.stoet .los span{display:block;font-size:var(--klein);line-height:1.3;margin-bottom:8px}
/* 06 veld */
.veld{background:var(--zwart);color:var(--papier);margin-top:120px;padding-bottom:120px}
.veld .lijst{border-bottom-color:var(--papier)}
.veld .rij{border-top-color:var(--papier)}
.veld .knoplink{color:var(--papier)}
.veld .rond{background:var(--papier);color:var(--zwart)}
.veld :is(.rond:hover,a:hover>.rond,a.rij:hover .rond){background:var(--lila);color:var(--zwart)}
.veld :is(.knoplink:hover,.reeks a.t:hover,.reeks .data a:hover,a.rij:hover .t){color:var(--lila)}
.veld .kaart,.veld .reeks .data .kaart{background:var(--papier);color:var(--zwart)}
.veld .kaart:hover,.veld .reeks .data .kaart:hover{background:var(--lila);color:var(--zwart)}
.fotostrook{overflow:hidden;margin:0 0 48px}
.fotostrook>div{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}
.fotostrook a{display:block}
.fotostrook img{display:block;width:100%;height:auto}
.fotostrook span{display:block;margin-top:6px;font-size:var(--klein)}
/* 07 partners */
.partners .band{overflow:hidden;margin:0 calc(var(--m) * -1)}
.band>div{display:flex;width:max-content}
.ticker{display:flex;gap:.4em;padding-right:.4em;white-space:nowrap;font-weight:700;text-transform:uppercase;letter-spacing:-.045em;font-size:clamp(48px,9vw,140px);line-height:.95;color:var(--blauw)}
.ticker span::after{content:"/";margin-left:.4em}
.band[data-r="-1"]{background:var(--blauw)}
.band[data-r="-1"] .ticker{color:var(--papier)}
/* contact (pin WS54) */
.kopgroet{position:relative;min-height:100svh;padding:120px 0 var(--rand);overflow-x:clip;container-type:inline-size;display:flex;flex-direction:column}
.kopgroet dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:0 var(--rand);font-size:var(--klein);line-height:1.35;max-width:520px}
.kopgroet dd a{display:inline-block;min-height:24px;line-height:24px}
.kopgroet dd a:hover{color:var(--blauw)}
.kopgroet-knop{padding:18px var(--rand) 0}
.gebaar{margin-top:auto}
@media (orientation:portrait){.kopgroet{min-height:0}.gebaar{margin-top:64px}}
/* pin WS54: het woord vult het vel en blijft binnen het kader. Elk woord staat op de eigen breedte tot de hoogtegrens; LET’S links op de bladspiegel, TALK rechts */
/* --w is de zetbreedte; de inkt verschilt per woord (L .07em inspringing, T en K lopen .05em verder), dus uitgelijnd op de inkt, gemeten tegen de bladspiegel */
.gebaar .reuzenwoord{font-size:min(calc((100cqi - 2 * var(--rand)) / (var(--w) + .05)),40svh)}
.gebaar .reuzenwoord:first-child{font-size:min(calc((100cqi - 2 * var(--rand)) / (var(--w) - .05)),40svh)}
.gebaar .reuzenwoord:first-child{margin-left:calc(var(--rand) - .07em)}
.gebaar .reuzenwoord:last-child{margin-left:calc(100cqi - var(--rand) - (var(--w) + .05) * 1em)}
/* avondnaam in HN Bold, blauw, zonder blok: riso.js past hem zo dat de langste regel de kolom vult (zoals de HYFEN-poster);
   de clamp is de terugval zonder js. Datum staat alleen hier: label bold, waarde regular (posterregel). Maker heeft geen naam */
.avond .evnaam{display:block;position:relative;margin:0 0 .22em;font-weight:700;text-transform:uppercase;font-size:clamp(36px,5.6vw,96px);line-height:.9;letter-spacing:-.045em;color:var(--blauw)}
.avond .evnaam>span:first-child{display:block}
.avond:not(.maker) .kop{max-width:none;font-size:var(--tussen);line-height:1.15}
.avond:not(.maker) .kop .label{font-size:inherit;font-weight:700;letter-spacing:inherit;margin-right:.55em}
.avond:not(.maker) .onder{margin:32px 0 0;width:100%;padding:14px 0 0;border-top:1px solid currentColor}
.avond:not(.maker) .tof{border-top:0;padding-top:0}
/* archiefavond zonder eigen foto (03-11-2026): geen figuur, de kop staat op de bladspiegel */
.avond.zonder{grid-template-columns:minmax(0,1fr)}
.avond.zonder .tekst{padding-left:var(--rand)}
.avond .evwanneer{display:block}
/* agenda (pin WS71): blauw veld met het woord, lila paneel met filter en lijst, rechts het beeld dat op de tel wisselt en door
   zijn cijfer kijkt (riso.js, TCT-grammatica); zonder js de volle foto van de 1. Rij 2 blijft auto: het podium loopt over
   beide rijen, en een intrinsieke ondergrens op rij 2 neemt zijn hele hoogte over en blaast het veld op. Het paneel houdt
   zelf twee vijfde van de hoogte vast, zodat het veld op drie vijfde eindigt zoals in de pin, ruim boven de duimrij */
.kleurveld{--kvh:clamp(560px,calc(100svh - 96px),1100px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;min-height:var(--kvh);margin-top:96px}
.kleurveld.leeg{grid-template-columns:minmax(0,1fr)}
.kv-veld{grid-column:1;grid-row:1;background:var(--blauw);display:flex;align-items:flex-end;padding:0 var(--rand) 28px}
.kv-veld .woordvlak{width:100%}
.kv-veld .reuzenwoord{color:var(--papier)}
.kv-paneel{grid-column:1;grid-row:2;min-height:calc(var(--kvh) * .4);display:flex;flex-direction:column;justify-content:space-between;background:var(--lila);padding:24px var(--rand) 28px;font-size:var(--klein);line-height:1.35}
.kv-filter,.kv-lijst{list-style:none}
.kv-filter{display:flex;flex-wrap:wrap;gap:4px 28px;margin-bottom:22px}
.kv-filter a{display:flex;align-items:center;gap:8px;min-height:28px}
.kv-filter i,.kv-m i{display:inline-block;width:12px;height:12px;border-radius:50%;border:var(--lijn) solid var(--blauw);flex:none}
.kv-filter .hier i{background:var(--blauw)}
.kv-m i{background:var(--zwart);border-color:var(--zwart)}
.kv-lijst li{border-top:1px solid rgba(19,19,19,.18)}
.kv-lijst li:last-child{border-bottom:1px solid rgba(19,19,19,.18)}
.kv-lijst a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:10px 0}
.kv-lijst :is(.kv-nr,.t){font-weight:700;text-transform:uppercase;letter-spacing:-.045em;font-size:var(--tussen);line-height:.95}
.kv-lijst .t{text-wrap:balance}
.kv-lijst .m{white-space:nowrap}
.kv-lijst li.aan :is(.kv-nr,.t),.kv-lijst a:hover :is(.kv-nr,.t),.kv-filter a:hover{color:var(--blauw)}
.kv-podium{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:auto minmax(120px,1fr);row-gap:4px;animation:drumgang .9s cubic-bezier(.7,0,.3,1) .15s both}
.kv-kaarten{display:grid}
.kv-kaart{grid-area:1/1;visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.kleurveld[data-aan="1"] .kv-kaart[data-n="1"],.kleurveld[data-aan="2"] .kv-kaart[data-n="2"],.kleurveld[data-aan="3"] .kv-kaart[data-n="3"]{visibility:visible}
.kv-bij{display:block;padding:20px 24px 16px}
.kv-t{display:block;font-weight:700;text-transform:uppercase;letter-spacing:-.045em;font-size:var(--tussen);line-height:.95;text-wrap:balance}
.kv-m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:10px;font-size:var(--klein)}
.kv-tel{background:var(--blauw);color:var(--papier);padding:0 4px}
.kv-foto{position:relative;display:block;overflow:hidden}
.kv-foto picture{display:block}
.kv-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kv-foto .tct-raam{display:none}
.kleurveld.telt .kv-foto .tct-raam{display:block}
/* papiervoeg tussen beeld en duimen: in de pin scheidt het contrast tussen twee zwartwitfoto's ze, in een enkele inkt lezen
   twee grijze zaalfoto's anders als een breed beeld */
.kv-duimen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.kv-duimen.een{grid-template-columns:minmax(0,1fr)}
.kv-duim{position:relative;display:block;min-height:120px;overflow:hidden}
.kv-duim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kleurveld[data-aan="1"] .kv-duim[data-n="1"],.kleurveld[data-aan="2"] .kv-duim[data-n="2"],.kleurveld[data-aan="3"] .kv-duim[data-n="3"]{display:none}
.kleurveld+.blok.index{padding-top:96px}
@media (prefers-reduced-motion:reduce){.kv-podium{animation:none}}
@media print{.kv-podium{animation:none}}
/* onthulling (riso.js blok 4) */
.onthul{clip-path:inset(0);transition:clip-path .5s steps(4),transform .45s cubic-bezier(.34,1.56,.64,1)}
.onthul.wacht{clip-path:inset(0 0 100% 0)}
.reuzenwoord.onthul{transition:clip-path 1s steps(8)}
.reuzenwoord.onthul.wacht{clip-path:inset(0 100% 0 0)}
.los.onthul.wacht{transform:translateY(30%) scale(.85);clip-path:inset(100% 0 0 0)}
@media (prefers-reduced-motion:reduce){.onthul,.onthul.wacht{transition:none;clip-path:none;transform:none}}
@media print{.onthul,.onthul.wacht{clip-path:none;transform:none}}
@media (max-width:1000px){
 .lijst.met-duim .rij{grid-template-columns:48px 96px minmax(0,1fr) 36px}
 .met-duim .rij .n{grid-column:1;grid-row:1}
 .met-duim .rij .duim{grid-column:2;grid-row:1/3}
 .met-duim .rij>div{grid-column:3;grid-row:1}
 .met-duim .rij .m{grid-column:3;grid-row:2}
 .met-duim .rij .rond{grid-column:4;grid-row:1/3}
 /* 04 verhalen smal: een kolom, alleen de intro van .aan, onder zijn titel op de lijn van de titel */
 .vh-lijst{display:block;border-bottom:var(--lijn) solid var(--zwart)}
 .vh-lijst li{display:block;border-top:var(--lijn) solid var(--zwart)}
 .vh-rij{border-top:0}
 .vh-lijst li:last-child .vh-rij{border-bottom:0}
 .vh-rij .rond{visibility:visible}
 .vh-intro{display:none;position:static;border-top:0;padding:0 0 26px 96px}
 .vh-lijst li.aan .vh-intro{display:block}
 .kleurveld{grid-template-columns:minmax(0,1fr);grid-template-rows:none;min-height:0}
 .kv-veld,.kv-paneel,.kv-podium{grid-column:1;grid-row:auto}
 .kv-veld{min-height:clamp(200px,34vw,340px)}
 .kv-paneel{min-height:0}
 .kv-duim{aspect-ratio:16/9;min-height:0}
}
@media (hover:none){
 .stoet .los:hover img{transform:none}
 .veld :is(.rond:hover,a:hover>.rond,a.rij:hover .rond){background:var(--papier);color:var(--zwart)}
 .veld :is(.knoplink:hover,.reeks a.t:hover,.reeks .data a:hover,a.rij:hover .t){color:inherit}
 .veld .kaart:hover,.veld .reeks .data .kaart:hover{background:var(--papier);color:var(--zwart)}
 a.vh-rij:hover .vh-t{color:inherit}
 .vh-lijst li.aan .vh-t{color:var(--blauw)}
 .kv-lijst li:not(.aan) a:hover :is(.kv-nr,.t),.kv-filter a:hover{color:inherit}
}
@media (max-width:760px){
 .lijst.met-duim .rij{grid-template-columns:28px 72px minmax(0,1fr) 24px}
 /* titel over duim en tekstkolom, duim naast de data eronder: in 198 px liep een lange titel naar zeven regels */
 .met-duim .rij>div{display:contents}
 .met-duim .rij .t{grid-column:2/4;grid-row:1}
 .met-duim .rij .duim{grid-column:2;grid-row:2/4;margin-top:10px}
 .met-duim .rij>div>.data{grid-column:3;grid-row:2;margin-top:10px}
 .met-duim .rij .m{grid-column:3;grid-row:3}
 .met-duim .rij .rond{grid-column:4;grid-row:1}
 .zaal .zaalfoto{width:70%;margin:-8.5% 0 0 10%}
 .zaal .zaal-links{margin:28px 0 0 10%}
 .vh-rij{grid-template-columns:28px minmax(0,1fr) 24px;gap:4px 12px;padding:14px 0}
 .vh-rij .rond{justify-self:end;align-self:start;padding-top:2px}
 .vh-intro{padding:0 0 22px 40px}
 .vh-lead{font-size:var(--tekst)}
 .vh-intro .knoplink{margin-top:10px}
 .stoet-rij{flex-wrap:wrap;column-gap:3.4%;margin-bottom:-10.2%}
 .stoet .los,.stoet .los:nth-of-type(n){width:31%;margin-bottom:5%}
 .stoet .los:nth-of-type(3n+2){margin-bottom:12%}
 .stoet .los:nth-of-type(n+7){display:none}
 .veld{margin-top:64px;padding-bottom:64px}
 .veld :is(.rond,.rond:hover,a:hover>.rond,a.rij:hover .rond){background:none;color:var(--papier)}
 .fotostrook{margin:0 calc(var(--m) * -1) 32px;padding:0 var(--m)}
 .fotostrook>div{display:flex;width:max-content;gap:10px}
 .fotostrook a{width:96px;flex:none}
 .kopgroet{padding-top:96px}
 .kleurveld{margin-top:88px}
 .kv-veld{min-height:44vw;padding:0 16px 14px}
 .kv-paneel{padding:20px 16px}
 .kv-podium{grid-template-rows:auto}
 .kv-duimen{display:none}
 .kv-foto img{aspect-ratio:1}
 .kv-bij{padding:16px 16px 12px}
 .kv-filter a,.kv-lijst a{min-height:44px}
 .kv-lijst a{align-items:center}
 .kleurveld+.blok.index{padding-top:64px}
}