/* De nieuwe soon-kop bovenop de bestaande projectpagina's. */
:root{--inkt:#12120f;--papier:#fff;--stof:#8f8f88;--lijn:#dedcd6;
  --marge:4vw;--band:clamp(66px,6.4vw,92px);--traag:cubic-bezier(.16,1,.3,1)}
body{padding-top:var(--band)!important}
.nieuwekop{position:fixed;top:0;left:0;right:0;height:var(--band);z-index:9999;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--marge);
  background:var(--papier);
  font-family:Moderat,-apple-system,Helvetica Neue,sans-serif;color:var(--inkt)}
.nieuwekop a{color:inherit;text-decoration:none}
.nieuwekop .merk{font-weight:700;font-size:clamp(24px,2.3vw,36px);line-height:1;
  letter-spacing:-.02em;white-space:nowrap}
.nieuwekop .kopreeks{display:flex!important;align-items:center;gap:clamp(20px,3vw,44px)}
.nieuwekop .kopreeks > *{margin:0 0 0 clamp(20px,3vw,44px)}
.nieuwekop .kopreeks > *:first-child{margin-left:0}
.nieuwekop .leus,.nieuwekop .grid{font-weight:500;font-size:clamp(14px,1.4vw,22px);
  letter-spacing:-.01em;line-height:1}
.nieuwekop .grid:hover{opacity:.6}
.nieuwekop .burger{width:34px;height:22px;border:none;background:none;padding:0;
  position:relative;cursor:pointer}
.nieuwekop .burger span{position:absolute;left:0;right:0;height:2px;background:var(--inkt);
  transition:transform .35s var(--traag),opacity .25s ease}
.nieuwekop .burger span:nth-child(1){top:0}
.nieuwekop .burger span:nth-child(2){top:10px}
.nieuwekop .burger span:nth-child(3){top:20px}
body.menu .nieuwekop .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.menu .nieuwekop .burger span:nth-child(2){opacity:0}
body.menu .nieuwekop .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.nieuwmenu{position:fixed;inset:0;z-index:9990;background:var(--papier);
  display:flex;flex-direction:column;justify-content:center;gap:1vh;padding:0 var(--marge);
  font-family:Moderat,sans-serif;opacity:0;pointer-events:none;transition:opacity .35s ease}
body.menu .nieuwmenu{opacity:1;pointer-events:auto}
.nieuwmenu a{font-weight:500;font-size:clamp(34px,7vw,86px);line-height:1.06;
  letter-spacing:-.035em;color:var(--inkt);text-decoration:none;width:max-content}
.nieuwmenu a:hover{color:var(--stof)}

/* Op een donkere pagina keert de kop mee, zoals de oude header--dark deed. */
.nieuwekop--donker{background:var(--inkt);color:var(--papier)}
.nieuwekop--donker .burger span{background:var(--papier)}
.nieuwekop--donker .grid:hover{opacity:.6}
.nieuwmenu--donker{background:var(--inkt)}
.nieuwmenu--donker a{color:var(--papier)}
.nieuwmenu--donker a:hover{color:var(--stof)}
body.menu .nieuwekop--donker .burger span{background:var(--papier)}
/* Op een projectpagina neemt de weg terug de plek en de maat van de baseline over:
   die zegt hier weinig, de weg terug wel. */
.terug{font-family:Moderat,sans-serif;font-weight:500;
  font-size:clamp(14px,1.4vw,22px);letter-spacing:-.01em;line-height:1;
  color:inherit!important;text-decoration:none;white-space:nowrap}
.terug:hover{opacity:.6}
@media(max-width:820px){.nieuwekop .leus{display:none}}

/* Eén beeld per rij, over de volle breedte van de container.
   Gebruikt bij de letters van de Gentse Feesten: op twee kolommen zijn
   de mensen die de letter vormen te klein om te lezen. */
.c-grid--vol{grid-template-columns:1fr;-ms-grid-template-columns:1fr}
/* De letters moeten in hun geheel te zien zijn. Het vaste 3:2-kader met
   object-fit:cover sneed ze af, en op volle breedte paste een letter niet meer
   op het scherm. Daarom bepaalt het beeld zelf zijn hoogte, met het scherm als
   bovengrens. De band eronder krijgt dezelfde kleur als de achtergrond van de
   foto's (#fdd8ae), zodat je de randen niet ziet. */
.c-grid--vol .c-grid__item{background:#fdd8ae}
.c-grid--vol .block{padding-bottom:0;height:auto}
.c-grid--vol .block__visual{position:relative;height:auto;width:100%;
  display:flex;align-items:center;justify-content:center}
.c-grid--vol .block__visual img{position:relative;width:auto;height:auto;
  max-width:100%;max-height:calc(94vh - var(--band));object-fit:contain}

/* Het openingsbeeld op een telefoon.
   Het stond in een hoog kader (hero--100vh) met object-fit:cover. Een liggende
   foto wordt daarin links en rechts weggesneden; bij de Gentse Feesten sneuvelde
   net de grote T in de studio. Op een smal scherm laten we het beeld daarom zijn
   eigen verhouding houden — niets bijgesneden — met wat lucht erboven en
   eronder zodat het niet tegen de kop en de titel plakt. */
@media(max-width:820px){
  .hero--100vh{height:auto;min-height:0}
  .hero--100vh .hero__visual{position:relative;height:auto;inset:auto}
  .hero--100vh .hero__visual img{position:relative;width:100%;height:auto;
    max-height:none;object-fit:contain}
  /* Ook links en rechts lucht: de T in de studio raakte anders de schermrand.
     Ruim dertig pixels op een telefoon van 375 breed, meeschalend zodat een
     smaller toestel niet te veel beeld inlevert en een breder wat ruimer staat. */
  /* Aflopend over de volle breedte, zoals een openingsbeeld hoort. Geen zijmarge
     dus. De winst zit in de hoogte: het kader is niet langer schermvullend, dus
     er wordt niets meer weggesneden — de hele studio staat in beeld, met de S,
     de T en de N. De achtergrond blijft wit voor het geval er toch een randje
     overblijft; zonder die regel zag je de bijna zwarte achtergrond van het
     oude thema. */
  .hero--100vh{padding:0;background:#fff}
}

/* Eén beeld per rij, aflopend over de volle breedte van de container.
   Verschil met c-grid--vol: die laat het beeld passen binnen een kader en vult
   de rest met de perzikkleur van de Gentse Feesten. Dat is daar juist — de
   letters moeten heel blijven — maar bij drukwerkfoto's wil je geen banden
   links en rechts. Hier bepaalt de breedte, en volgt de hoogte het beeld. */
.c-grid--breed{grid-template-columns:1fr;-ms-grid-template-columns:1fr}
.c-grid--breed .c-grid__item{background:none}
.c-grid--breed .block{padding-bottom:0;height:auto}
.c-grid--breed .block__visual{position:relative;height:auto;width:100%}
.c-grid--breed .block__visual img{position:relative;width:100%;height:auto;
  object-fit:cover;display:block}

/* Het oude thema zet 110px ruimte boven de inhoud van elke pagina. Bij een
   schermvullend openingsbeeld geeft dat een witte band tussen de kop en het
   beeld — je ziet eerst niets, dan pas de foto. Op pagina's die met zo'n beeld
   beginnen valt die ruimte weg; de kop blijft er gewoon overheen liggen. */
main.metopening{padding-top:0}