/* Ensar Yufka — de mix.
   ===========================================================================
   Deze laag komt ná style.css en verandert alleen wat er uit de andere twee
   versies bij komt. De juni-site blijft de basis: 51 pagina's, vijf talen,
   alle structuur. Wat er hier bovenop gaat:

   Uit de versie van 3 augustus
     De donkere strook waarin het merkgoud zélf tekst kan zijn. Op wit haalt
     #c4a127 maar 2,48:1 en is het onbruikbaar als tekst; op #0d0d0d haalt
     hetzelfde goud 7,84:1. Die redenering was beter dan de mijne, dus die
     komt terug op de plekken waar goud iets moet zeggen.

   Uit de affiche van gisteren
     De kop op affiche-formaat in Anton, de kleine gesperde kapitalen, de
     ronde stempel, en het logo dat losgemaakt is van zijn zwarte ondergrond.

   Wat er bewust NIET gebeurt: de hele site omkleuren naar donker. Van de
   kleuren in style.css staat 71 keer een harde hexwaarde tegenover 298
   variabelen, waarvan 28 keer wit. Alles omzetten zou op die 28 plekken
   breken voor een winst die de juni-versie al op de goede plekken pakt.
   =========================================================================== */

:root{
  --mix-affiche:"Anton",Impact,sans-serif;
  --mix-donker:#0d0d0d;
  --mix-donker-2:#161512;
  --mix-goud-op-donker:#d6b02f;   /* 8,9:1 op #0d0d0d */
  --mix-zacht:#e8e2d4;
}

/* ---------------------------------------------------------------- logo
   Het logo van hun live-site staat op vlak zwart. In de juni-versie zat het
   als plaatje met die zwarte rand er nog omheen; hier is de ondergrond eruit
   gehaald met een alfamasker uit de helderheid, zodat de gouden aren en de
   randen van de letters heel blijven op elke achtergrond. */
.site-header .logo img,
.header-logo img,
a[class*="logo"] img{content:url("../img/logo-vrij.png")}

/* ------------------------------------------------------- affiche-koppen
   Eén moment per pagina op affiche-formaat, niet elke kop. Anders wordt het
   lawaai in plaats van nadruk. */
.hero-cinema-title{
  font-family:var(--mix-affiche) !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
  line-height:.92 !important;
  font-size:clamp(2.6rem,7.6vw,6.4rem) !important;
  text-transform:uppercase;
  text-wrap:balance}
.hero-cinema-title em,
.hero-cinema-title i{font-style:normal;color:var(--mix-goud-op-donker)}
/* De met de hand getekende onderstreping hoort bij de schreefletter van juni,
   niet bij een blokletter. Weg. */
.hero-cinema-title .underline-svg{display:none}

.hero-eyebrow-cinema{
  font-family:'Inter',system-ui,sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}

/* -------------------------------------------------------- gouden strook
   Hier komt het argument van 3 augustus terug: een donkere baan waarin het
   merkgoud leesbare tekst is in plaats van een decoratie. */
.mix-baan{background:var(--mix-donker);color:var(--mix-zacht);
  padding:clamp(3rem,7vw,5rem) 0 clamp(3.4rem,8vw,5.8rem)}
.mix-baan h2{font-family:var(--mix-affiche);font-weight:400;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 .8rem;color:#fff;text-wrap:balance;
  max-width:18ch}
.mix-baan p{color:#cfc7b6;max-width:60ch}
.mix-baan .mix-klein{color:var(--mix-goud-op-donker)}

.mix-klein{font-family:'Inter',system-ui,sans-serif;font-size:.74rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  display:block;margin-bottom:.7rem}

/* Vier ingrediënten, uit de affiche. Geen kaartjes maar één doorlopende
   strook met haarlijnen ertussen, zoals een affiche zijn feiten zet. */
.mix-vier{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:2.4rem;background:rgba(255,255,255,.14)}
@media(min-width:760px){.mix-vier{grid-template-columns:repeat(4,1fr)}}
.mix-vier > div{background:var(--mix-donker);padding:1.4rem 1.2rem 1.6rem}
.mix-vier b{display:block;font-family:var(--mix-affiche);font-weight:400;
  font-size:2.1rem;line-height:1;text-transform:uppercase;margin-bottom:.25rem;
  color:#fff}
.mix-vier span{color:#a49c8b;font-size:.85rem}

/* -------------------------------------------------------------- stempel
   De ronde tekst uit de affiche. Een echt SVG-tekstpad, geen letters die met
   de hand rondgedraaid zijn. */
.mix-stempel{width:clamp(96px,11vw,132px);height:auto;
  color:var(--mix-goud-op-donker);animation:mix-draai 26s linear infinite}
@media(prefers-reduced-motion:reduce){.mix-stempel{animation:none}}
@keyframes mix-draai{to{transform:rotate(360deg)}}

/* ------------------------------------------------------- verzendkosten
   Hun eigen site noemt twee verschillende tarieven. Een bedrag kiezen zou
   gokken zijn, dus staat er wat er aan de hand is. */
.mix-let-op{border:1px solid var(--mix-goud-op-donker);padding:1rem 1.2rem;
  margin-top:1.4rem;font-size:.88rem;color:var(--mix-goud-op-donker);
  background:rgba(214,176,47,.06)}

/* ------------------------------------------- kleine dingen uit de affiche */
::selection{background:var(--c-goud);color:#0d0d0d}
.mix-baan ::selection{background:var(--mix-goud-op-donker);color:#0d0d0d}

/* Ingedrukt-gevoel. De juni-versie had hover maar niets voor een tik op
   een telefoon, waar hover niet bestaat. */
.btn:active,.btn-gold:active{transform:translateY(1px) scale(.99)}

/* ------------------------------------------------------- proces als beeld
   Idee uit het NANPO-voorbeeld: het maakproces vertellen met foto's in plaats
   van met vier tekstblokjes. Elke stap krijgt een liggend beeld met daaronder
   een klein label in kapitalen en de kop die er al stond.

   De stappen staan onder elkaar in plaats van naast elkaar: vier foto's op een
   rij worden postzegels, en het gaat juist om wat je erop ziet. */
@media(min-width:900px){
  .steps{display:grid !important;grid-template-columns:1fr 1fr;
    gap:2.6rem 2.4rem !important}
}
.step{position:relative}

.stap__beeld{margin:0 0 1rem;position:relative;background:#e8e3d8;
  aspect-ratio:16/9;overflow:hidden}
.stap__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.stap__beeld figcaption{position:absolute;left:0;bottom:0;right:0;
  padding:2.2rem 1.1rem .9rem;
  background:linear-gradient(to top,rgba(13,13,13,.82),transparent)}
.stap__label{font-family:'Inter',system-ui,sans-serif;font-size:.7rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mix-goud-op-donker)}

/* Een wachtvlak is geen fout maar een openstaande vraag. Het mag er dus uitzien
   alsof het er hoort, met een randje in de merkkleur, niet als een kapotte
   afbeelding. */
.stap__beeld[data-wacht] figcaption{background:none;position:static;padding:0}
.stap__beeld[data-wacht] .stap__label{position:absolute;left:1.1rem;top:1rem;
  color:#8c8168}

/* Het nummer zat in de juni-versie boven de kop. Nu het beeld er staat, hoort
   het nummer bij het beeld en niet ernaast. */
.step-num{position:absolute;right:.9rem;top:.8rem;z-index:2;
  font-family:var(--mix-affiche);font-size:1.5rem;line-height:1;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);background:none !important;
  width:auto !important;height:auto !important}
.stap__beeld[data-wacht] ~ .step-num{color:#8c8168;text-shadow:none}

.step h3{font-family:var(--mix-affiche);font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.05;
  margin:.2rem 0 .45rem}