/* Ensar Yufka — posterontwerp.
   ---------------------------------------------------------------------------
   Opzet van een affiche: één reusachtige kop, veel wit, kleine gesperde
   kapitalen voor de feiten, en één accentkleur die spaarzaam terugkomt.

   De accentkleur is het goud uit hun eigen huisstijl (#C4A127), niet het
   blauw van de poster waar dit op gebaseerd is. Voor tekst is dat goud te
   licht op crème (2,28:1), dus lopende tekst gebruikt hun donkere bruin
   (6,06:1) en het felle goud blijft voor lijnen en vlakken.
   --------------------------------------------------------------------------- */

:root{
  --papier:#f7f5f2;
  --inkt:#17150F;
  --stil:#6b6659;
  --goud:#C4A127;
  --goud-tekst:#6F5B16;
  --lijn:#ddd7cc;

  --display:"Anton",Impact,sans-serif;
  --tekst:"Archivo",system-ui,sans-serif;
  --breed:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}

::selection{background:var(--goud);color:var(--inkt)}
:focus-visible{outline:3px solid var(--goud-tekst);outline-offset:3px}
html{scrollbar-color:var(--lijn) var(--papier)}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(100% - 2.4rem,var(--breed));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.overslaan{position:absolute;left:1rem;top:-4rem;z-index:90;background:var(--inkt);
  color:var(--papier);padding:.8rem 1.4rem;text-decoration:none;font-weight:600;
  transition:top .18s ease}
.overslaan:focus{top:.6rem}

/* Kleine gesperde kapitalen: het bindmiddel van dit hele ontwerp. */
.klein{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5}
.klein--goud{color:var(--goud-tekst)}
.klein--stil{color:var(--stil)}

/* ----------------------------------------------------------------- affiche */
.affiche{padding:1.6rem 0 clamp(3rem,7vw,5rem);position:relative}
.affiche__top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.4rem;padding-bottom:.6rem}

/* De kop vult de volle breedte, zoals op een affiche. Anton heeft maar één
   gewicht, dus de hiërarchie komt uit grootte en ruimte, niet uit vet. */
/* De kop moet de volle breedte vullen, dat is het kenmerk van een affiche.
   Opgemeten in de browser: op 224px lettergrootte is "YUFKA" 493px breed, dus
   2,2 pixel breedte per pixel lettergrootte. Voor een kolom van 1240px is dat
   ongeveer 563px. Dat is 41,5vw, met een bovengrens omdat de kolom niet
   verder groeit dan 1240px. */
.affiche h1{font-family:var(--display);font-weight:400;margin:.2rem 0 .05em;
  font-size:clamp(3.4rem,41.5vw,34rem);line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase}

/* Een affiche is staand, een beeldscherm ligt. Een kop die op een telefoon
   precies past, vult op een breed scherm de halve hoogte en duwt alles wat
   erna komt onder de vouw. Vanaf tablet dus terug naar een maat die naast de
   rest kan bestaan, met de volle breedte alleen waar het scherm hoog genoeg
   is om hem te dragen. */
@media(min-width:760px){
  .affiche h1{font-size:min(41.5vw,34rem,52vh)}
}

.affiche__onder{display:grid;gap:1.6rem;margin-top:1.4rem}
@media(min-width:820px){
  .affiche__onder{grid-template-columns:minmax(0,20ch) 1fr;gap:2.6rem;
    align-items:start}
}
.affiche__claim{margin:0;max-width:26ch;font-size:1rem;line-height:1.5}
.affiche__claim strong{display:block;font-family:var(--display);font-weight:400;
  font-size:1.5rem;line-height:1.1;text-transform:uppercase;margin-bottom:.5rem;
  letter-spacing:-.005em}

/* Het product staat paginabreed in plaats van uitgesneden te zweven.
   Zodra er foto's op een egale ondergrond zijn, wordt dit blok het zwevende
   object van de poster; de rest van de opmaak verandert dan niet. */
.beeld{position:relative;margin-top:2rem;background:#eae5dd;
  aspect-ratio:16/9;overflow:hidden}
.beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.beeld__merk{position:absolute;right:clamp(1rem,3vw,2.4rem);
  bottom:clamp(1rem,3vw,2.4rem);width:clamp(88px,11vw,132px);height:auto}

/* --------------------------------------------------------------- feitenrij */
.feiten{border-top:1px solid var(--inkt);margin-top:2.4rem;padding-top:1.2rem;
  display:grid;gap:1.4rem}
@media(min-width:720px){.feiten{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
.feit p{margin:.35rem 0 0;font-size:.95rem;color:var(--stil);max-width:34ch}
@media(min-width:720px){
  .feit + .feit{border-left:1px solid var(--lijn);padding-left:2.4rem}
}

/* --------------------------------------------------------------- producten */
.blok{padding:clamp(3.4rem,8vw,6rem) 0}
.blok__kop{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.4rem;border-bottom:1px solid var(--inkt);padding-bottom:.7rem;
  margin-bottom:2.4rem}
.blok__kop h2{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1;text-transform:uppercase;
  letter-spacing:-.01em}

.waar{display:grid;gap:2.6rem}
@media(min-width:800px){.waar{grid-template-columns:repeat(3,1fr);gap:2rem}}
.waar__stuk{display:flex;flex-direction:column}
.waar__beeld{background:#eae5dd;aspect-ratio:4/5;overflow:hidden;margin-bottom:1rem}
.waar__beeld img{width:100%;height:100%;object-fit:cover}
.waar__stuk h3{font-family:var(--display);font-weight:400;margin:.3rem 0 .4rem;
  font-size:1.5rem;line-height:1.05;text-transform:uppercase}
.waar__stuk p{margin:0;color:var(--stil);font-size:.95rem}

/* -------------------------------------------------------------- ingredient */
.recept{background:var(--inkt);color:var(--papier);
  padding:clamp(3.4rem,8vw,6rem) 0 clamp(4rem,9vw,6.8rem)}
.recept h2{font-family:var(--display);font-weight:400;margin:0 0 .8rem;
  font-size:clamp(2rem,6.4vw,4.4rem);line-height:.95;text-transform:uppercase;
  letter-spacing:-.015em;text-wrap:balance;max-width:16ch}
.recept p{color:#cfc9bd;max-width:56ch}
.recept .klein--goud{color:var(--goud)}

.vier{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2.6rem;
  background:rgba(255,255,255,.16)}
@media(min-width:760px){.vier{grid-template-columns:repeat(4,1fr)}}
.vier > div{background:var(--inkt);padding:1.4rem 1.2rem 1.6rem}
.vier b{display:block;font-family:var(--display);font-weight:400;font-size:2.2rem;
  line-height:1;text-transform:uppercase;margin-bottom:.3rem}
.vier span{color:#a9a396;font-size:.85rem}

/* ------------------------------------------------------------------- stempel
   De ronde tekst van de poster, met een echte SVG-tekstpad in plaats van
   letters die met de hand rondgedraaid zijn. */
.stempel{width:clamp(104px,13vw,150px);height:auto;color:var(--goud-tekst);
  animation:draai 26s linear infinite}
@media(prefers-reduced-motion:reduce){.stempel{animation:none}}
@keyframes draai{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- afsluiter */
.slot{padding:clamp(3.4rem,8vw,5.6rem) 0}
.slot__in{display:grid;gap:2rem;align-items:center}
@media(min-width:840px){.slot__in{grid-template-columns:1fr auto;gap:3rem}}
.slot h2{font-family:var(--display);font-weight:400;margin:0 0 .6rem;
  font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1;text-transform:uppercase;
  text-wrap:balance;max-width:18ch}
.knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.knop{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--tekst);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;padding:1.05rem 1.8rem;
  min-height:52px;border:1px solid var(--inkt);
  transition:background .16s ease,color .16s ease,transform .1s ease}
.knop--vol{background:var(--inkt);color:var(--papier)}
.knop--vol:hover{background:var(--goud-tekst);border-color:var(--goud-tekst)}
.knop--leeg:hover{background:var(--inkt);color:var(--papier)}
.knop:active{transform:translateY(1px)}

/* -------------------------------------------------------------------- voet */
.voet{border-top:1px solid var(--inkt);padding:1.6rem 0 3rem}
.voet__in{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}

/* ---------------------------------------------------------------- beweging
   Eén bedacht moment: de kop komt van onderen omhoog achter zijn eigen rand
   vandaan, zoals een affiche dat wordt opgehangen. Verder geen fades. */
@media(prefers-reduced-motion:no-preference){
  .affiche h1{clip-path:inset(0 0 0 0);animation:oprijzen .9s cubic-bezier(.16,1,.3,1) both}
}
@keyframes oprijzen{
  from{clip-path:inset(100% 0 0 0);transform:translateY(.14em)}
  to{clip-path:inset(-20% 0 -20% 0);transform:none}
}

/* ====================================================================== */
/* Uitbreiding: verhaal, producten met prijs, recepten, landen, blog      */
/* ====================================================================== */

/* ---------------------------------------------------------- taalkeuze */
.talen{display:flex;gap:.1rem;align-items:center}
.talen a{padding:.3rem .5rem;text-decoration:none;color:var(--stil);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.talen a[aria-current="true"]{color:var(--inkt);border-bottom:2px solid var(--goud)}
.talen a:hover{color:var(--inkt)}

/* ------------------------------------------------------------ cijfers
   Geen kaartjes met een groot getal en een klein labeltje: dat is de
   standaardsjabloon. Hier een doorlopende regel, zoals een affiche zijn
   feiten onderaan in kolommen zet. */
.cijfers{border-top:1px solid var(--inkt);border-bottom:1px solid var(--inkt);
  display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.cijfers{grid-template-columns:repeat(4,1fr)}}
.cijfers > div{padding:1.5rem 1.2rem 1.7rem}
.cijfers > div + div{border-left:1px solid var(--lijn)}
@media(max-width:819px){.cijfers > div:nth-child(3){border-left:0}}
.cijfers b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);line-height:.95;letter-spacing:-.01em}
.cijfers span{display:block;margin-top:.3rem;font-size:.85rem;color:var(--stil);
  max-width:22ch}

/* ------------------------------------------------------------- verhaal */
.oprichter{display:grid;gap:2.2rem;margin-top:2.4rem}
@media(min-width:880px){.oprichter{grid-template-columns:1fr 1fr;gap:3.4rem}}
.citaat{margin:0;border-left:2px solid var(--goud);padding-left:1.4rem}
.citaat p{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.15;text-transform:none;margin:0 0 .8rem;max-width:24ch}
.citaat footer{font-size:.85rem;color:var(--stil)}
.citaat .tr{font-style:italic;color:var(--stil);font-size:.95rem;
  font-family:var(--tekst);line-height:1.5;display:block;margin-top:.6rem}

/* ------------------------------------------------------------ producten */
.prijs{margin-left:auto;font-family:var(--display);font-weight:400;
  font-size:1.5rem;line-height:1}
.waar__regel{display:flex;align-items:baseline;gap:.8rem;margin:.3rem 0 .4rem}
.waar__regel h3{margin:0}
.waar__stuk ul{margin:.8rem 0 0;padding:0;list-style:none;
  border-top:1px solid var(--lijn)}
.waar__stuk li{padding:.5rem 0;border-bottom:1px solid var(--lijn);
  font-size:.9rem;color:var(--stil);display:flex;gap:.6rem}
.waar__stuk li::before{content:"";flex:0 0 6px;height:6px;margin-top:.55em;
  background:var(--goud)}

/* -------------------------------------------------------------- landen */
.landen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;padding:0;
  list-style:none}
.landen li{border:1px solid var(--lijn);padding:.55rem 1rem;font-size:.85rem;
  font-weight:500}
.landen li[data-kern]{border-color:var(--inkt);background:var(--inkt);
  color:var(--papier)}

/* ------------------------------------------------------------- recepten
   Geen raster van gelijke kaartjes. Een genummerde lijst met een brede
   eerste kolom, zoals een menukaart. */
.gerechten{margin:2.2rem 0 0;padding:0;list-style:none;
  border-top:1px solid var(--inkt)}
.gerechten li{border-bottom:1px solid var(--lijn);padding:1.3rem 0;
  display:grid;gap:.2rem .8rem;grid-template-columns:2.6rem 1fr}
@media(min-width:760px){
  .gerechten li{grid-template-columns:2.6rem minmax(0,15rem) 1fr;
    align-items:baseline;gap:.2rem 1.6rem}
}
.gerechten .nr{font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--goud-tekst);line-height:1.5}
.gerechten h3{font-family:var(--display);font-weight:400;margin:0;
  font-size:1.25rem;line-height:1.15;text-transform:uppercase}
.gerechten p{margin:0;color:var(--stil);font-size:.95rem;max-width:52ch}
@media(max-width:759px){.gerechten p{grid-column:2}}

/* --------------------------------------------------------------- bezorg */
.bezorg{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:780px){.bezorg{grid-template-columns:repeat(2,1fr);gap:2.4rem}}
.bezorg dl{margin:0;border-top:1px solid var(--lijn)}
.bezorg div{display:flex;justify-content:space-between;gap:1.2rem;
  padding:.8rem 0;border-bottom:1px solid var(--lijn)}
.bezorg dt{color:var(--stil);font-size:.92rem}
.bezorg dd{margin:0;font-weight:600;text-align:right;font-size:.92rem}
.tecontroleren{border:1px solid var(--goud);padding:1rem 1.2rem;margin-top:1.2rem;
  font-size:.88rem;color:var(--goud-tekst);background:#fdfbf4}

/* ------------------------------------------------------------------- merk
   Het logo staat op een zwarte ondergrond in het origineel. De zwarte laag is
   eruit gehaald met een alfamasker uit de helderheid, zodat de gouden aren en
   het antialiasing van de letters intact blijven. */
.merk{display:inline-block;line-height:0}
.merk img{width:clamp(160px,20vw,232px);height:auto}