/* Ensar Yufka — optie "saç"
   ==========================================================================
   Donker en warm, met het beeld op volle sterkte. Een yufkavel is bleek; op
   een donkere ondergrond wordt dat een lichtbron in plaats van een lichte
   vlek op licht. Zie OPZET.md voor de afwegingen.
   ========================================================================== */

:root{
  --grond:#0D0B09;         /* warm bijna-zwart, geen koud grijs */
  --grond-op:#15110E;      /* een tint lichter, voor vlakken op de grond */
  --deeg:#F3EBDD;          /* de kleur van het deeg zelf */
  --deeg-zacht:#C9BFAF;
  --goud:#C9A227;
  --goud-licht:#E8CE73;
  --lijn:rgba(243,235,221,.14);

  --kop:"Cardo",Georgia,serif;
  --tekst:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --breed:min(1240px,100% - 3rem);
  --ruim:clamp(4.5rem,11vh,8rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--grond);
  color:var(--deeg);
  font-family:var(--tekst);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--kop);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.015em}
p{margin:0 0 1rem}

/* Kleine bovenregel boven een kop. Geen pil, geen kadertje: een streepje en
   kapitaaltjes is genoeg en kost geen ruimte. */
.tag{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--goud-licht);margin:0 0 1rem;display:flex;align-items:center;gap:.75rem;
}
.tag::before{content:"";width:1.75rem;height:1px;background:var(--goud);flex:none}

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deeg);color:var(--grond);padding:.75rem 1.25rem;border-radius:0 0 6px 0;
  font-weight:600;
}
.overslaan:focus{left:0}

:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}

/* ---------------------------------------------------------------- knoppen */
.knop{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.9375rem;
  padding:.9375rem 1.625rem;border-radius:999px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s ease;
}
.knop:active{transform:translateY(1px)}
.knop-goud{background:var(--goud);color:#17130C}
.knop-goud:hover{background:var(--goud-licht)}
.knop-lijn{border:1px solid rgba(243,235,221,.4);color:var(--deeg)}
.knop-lijn:hover{background:var(--deeg);color:var(--grond);border-color:var(--deeg)}

/* ----------------------------------------------------------------- kopbalk */
.balk{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:2rem;
  padding:1rem clamp(1.25rem,4vw,3rem);
  background:linear-gradient(to bottom,rgba(13,11,9,.92),rgba(13,11,9,.55) 65%,transparent);
}
.merk{flex:none;line-height:0}
.merk img{height:clamp(38px,5.4vw,54px);width:auto}
.balk-nav{display:flex;gap:2rem;margin-left:auto;font-size:.9375rem;font-weight:500}
.balk-nav a{text-decoration:none;color:var(--deeg-zacht);position:relative;padding:.25rem 0}
.balk-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--goud);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease;
}
.balk-nav a:hover{color:var(--deeg)}
.balk-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.balk-knop{padding:.625rem 1.25rem;font-size:.875rem}

@media(max-width:820px){
  .balk-nav{display:none}
  .balk-knop{margin-left:auto}
}

/* -------------------------------------------------------------------- hero */
/* De balk staat vast bovenaan en is 70 tot 86px hoog. Zonder ruimte erboven
   liep hij op vier van de acht geteste breedtes dwars door de adresregel en
   op 320px zelfs door de kop. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(7rem,16vh,10rem) 0 clamp(2.5rem,7vh,5rem);overflow:hidden;
}
.hero-beeld{position:absolute;inset:0;z-index:0}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* Het beeld is licht; zonder sluier haalt lichte tekst er geen contrast op.
   Van onderaf dekkend, bovenin open zodat de bakker zichtbaar blijft. */
.hero-sluier{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,var(--grond) 0%,rgba(13,11,9,.94) 22%,rgba(13,11,9,.72) 44%,
      rgba(13,11,9,.42) 62%,rgba(13,11,9,.2) 78%,rgba(13,11,9,.28) 100%),
    linear-gradient(to right,rgba(13,11,9,.55) 0%,rgba(13,11,9,.15) 55%,transparent 80%);
}
.hero-inhoud{position:relative;z-index:2;width:var(--breed);margin:0 auto}
.hero-kop{
  font-size:clamp(3rem,10.5vw,7.5rem);
  margin:0 0 1.5rem;max-width:14ch;
}
.hero-kop em{font-style:italic;color:var(--goud-licht)}
.hero-onder{max-width:42ch;color:var(--deeg-zacht);font-size:clamp(1rem,.95rem + .35vw,1.1875rem)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-spreuk{margin:2.25rem 0 0;font-family:var(--kop);font-style:italic;
  font-size:1.0625rem;color:var(--deeg-zacht)}
.hero-spreuk span{border-top:1px solid var(--lijn);padding-top:1rem;display:inline-block}

/* ------------------------------------------------------------ de stapel */
/* Vier ECHTE yufkavellen die bij het scrollen uit elkaar komen. Eerder stonden
   hier vier gradiëntschijven die een vel moesten voorstellen; dat waren
   abstracte vormen die nergens naar verwezen en die zijn er terecht uit
   gegooid. Dit zijn foto's van vier verschillende vellen — onderling gemeten
   verschil 34 tot 42, dus het leest niet als één vel dat vier keer is
   gekopieerd. */
.stapel{position:relative;height:320vh}
.stapel-vast{
  position:sticky;top:0;min-height:100svh;
  display:grid;place-items:center;
  padding:5.5rem clamp(1.25rem,4vw,3rem) 3.5rem;
}
.vellen{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vel{
  position:absolute;
  width:min(72vw,520px);height:auto;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.55));
  transform:translate3d(0,0,0);
  will-change:transform;
}
/* de onderste vellen iets gedempt, zodat het als een stapel leest en niet
   als vier losse foto's op elkaar */
.vel-2{opacity:.94}
.vel-3{opacity:.88}
.vel-4{opacity:.82}

/* De vellen zijn bleek en de cijfers staan er bovenop in bijna-wit. Waar ze
   elkaar raakten haalde de tekst 1,01:1 — volstrekt onleesbaar. Deze sluier
   ligt tússen de vellen en de cijfers: de vellen blijven zichtbaar, maar
   gedempt genoeg om lichte tekst te dragen. Een blok achter de tekst zou het
   ook oplossen, maar dat leest als een zwart vierkant en dat willen we niet. */
.stapel-vast::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(58% 44% at 50% 50%,
    rgba(13,11,9,.86) 0%, rgba(13,11,9,.78) 42%,
    rgba(13,11,9,.5) 70%, rgba(13,11,9,.12) 88%, transparent 100%);
  pointer-events:none;
}

.cijfers{
  position:relative;z-index:3;list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.25rem,4vh,2.75rem);width:var(--breed);
}
/* De cijfers verschijnen bij het scrollen. Dat verstoppen mag alleen als er
   JavaScript is om ze weer tevoorschijn te halen — anders scrol je 3,4 schermen
   langs een lege sectie. Vandaar de html.js-voorwaarde; die klasse wordt in de
   <head> gezet, dus vóór het eerste schilderen. */
.cijfer{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.25rem);
  transition:opacity .5s ease,transform .5s ease;
}
html.js .cijfer{opacity:0;transform:translateY(1.25rem)}
html.js .cijfer-getal{
  font-family:var(--kop);font-size:clamp(2.5rem,8vw,4.75rem);line-height:1;
  color:var(--deeg);flex:none;min-width:4.5ch;
}
.cijfer-uitleg{color:var(--deeg-zacht);font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);max-width:26ch}

/* ---------------------------------------------------------------- producten */
.producten{padding:var(--ruim) 0}
.baan-kop{
  width:var(--breed);margin:0 auto clamp(2.5rem,7vh,4.5rem);
  font-size:clamp(2rem,6vw,4rem);
}
.baan-kop em{font-style:italic;color:var(--goud-licht)}

.baan{
  width:var(--breed);margin:0 auto clamp(3rem,8vh,6rem);
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:860px){
  .baan{grid-template-columns:1.05fr .95fr}
  .baan-om .baan-beeld{order:2}
}
.baan-beeld{
  overflow:hidden;border-radius:2px;
  /* de foto's zijn vierkant of staand; dit maakt er een rustige baan van */
  aspect-ratio:4/3;background:var(--grond-op);
}
.baan-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.baan:hover .baan-beeld img{transform:scale(1.03)}
.baan-tekst h3{font-size:clamp(1.75rem,4.4vw,2.75rem);margin:0 0 1rem}
.baan-tekst p{color:var(--deeg-zacht);max-width:44ch}
.prijs{
  font-family:var(--kop);font-size:1.5rem;color:var(--deeg);
  margin:1.25rem 0 0;padding-top:1.25rem;border-top:1px solid var(--lijn);
}

/* ------------------------------------------------------------------ verhaal */
.verhaal{
  background:var(--grond-op);padding:var(--ruim) 0;
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;
}
.verhaal-beeld,.verhaal-tekst{width:var(--breed);margin:0 auto}
@media(min-width:900px){
  .verhaal{grid-template-columns:1fr 1fr;width:var(--breed);margin:0 auto;padding:var(--ruim) 0}
  .verhaal-beeld,.verhaal-tekst{width:auto}
}
/* height:auto is hier geen sier. Zonder die regel wint het height-attribuut
   uit de HTML van aspect-ratio, en werd de foto 1800px hoog gerenderd in
   plaats van 735 — bijna een kwart overtollige paginahoogte. */
.verhaal-beeld img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border-radius:2px}
.verhaal-tekst h2{font-size:clamp(2rem,5.5vw,3.5rem);margin:0 0 1.5rem}
.verhaal-tekst p{color:var(--deeg-zacht);max-width:46ch}
.verhaal-pand{margin-top:2rem}
.verhaal-pand img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px;opacity:.85}

/* ------------------------------------------------------------------ klanten */
.klanten{width:var(--breed);margin:0 auto;padding:var(--ruim) 0;text-align:center}
.klanten .tag{justify-content:center}
.klant-lijst{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,6vw,5rem);
}
.klant-lijst li{display:flex;flex-direction:column;gap:.25rem}
.klant-lijst span{font-family:var(--kop);font-size:clamp(1.75rem,5vw,2.75rem)}
.klant-lijst small{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deeg-zacht)}
.klanten-onder{margin-top:2.5rem;color:var(--deeg-zacht);font-size:.9375rem}

/* ------------------------------------------------------------------ contact */
.contact{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--lijn);
}
@media(min-width:900px){.contact{grid-template-columns:1fr 1fr}}
.contact-tekst{padding:var(--ruim) clamp(1.25rem,4vw,3rem)}
.contact-tekst h2{font-size:clamp(2rem,5.5vw,3.5rem);margin:0 0 1.75rem}
.contact-lijst{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.5rem;color:var(--deeg-zacht)}
.contact-lijst a{text-decoration:none}
.contact-lijst a:hover{color:var(--goud-licht)}
.contact-kaart{min-height:320px;background:var(--grond-op)}
.contact-kaart iframe{
  display:block;width:100%;height:100%;min-height:320px;border:0;
  /* de kaart is fel wit; dit brengt hem in lijn met de rest zonder hem
     onleesbaar te maken */
  filter:grayscale(.5) invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9);
}

/* ---------------------------------------------------------------- voettekst */
.voet{
  border-top:1px solid var(--lijn);padding:clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,3rem);
  display:grid;gap:1.25rem;justify-items:center;text-align:center;
}
.voet-merk{height:56px;width:auto;opacity:.9}
.voet-regel{color:var(--deeg-zacht);font-size:.9375rem;margin:0}
.voet-regel a{text-decoration:none}
.voet-regel a:hover{color:var(--goud-licht)}
.voet-klein{color:rgba(201,191,175,.6);font-size:.8125rem;margin:0}

/* ---------------------------------------------------- minder beweging */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .stapel{height:auto}
  .stapel-vast{position:static;min-height:0;padding:var(--ruim) clamp(1.25rem,4vw,3rem)}
  .vellen{display:none}
  .cijfer{opacity:1;transform:none}
}


/* ---------------------------------------------------------------- de saç */
/* Schermbrede opening van het stuk over 2012. De foto is donker met één
   lichtbron, dus hij hoeft geen verloop om zich heen. */
.sac{position:relative;margin:0 0 calc(var(--ruim) * -.35)}
.sac img{width:100%;max-height:clamp(320px,58vh,620px);height:auto;object-fit:cover;object-position:center 55%;display:block}
.sac-bij{
  position:absolute;left:clamp(1.25rem,4vw,3rem);bottom:clamp(1.25rem,4vw,2.5rem);
  max-width:min(30rem,calc(100% - 2.5rem));margin:0;
  font-family:var(--kop);font-style:italic;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);
  color:var(--deeg);text-shadow:0 2px 12px rgba(0,0,0,.8);
}