/* Zo werken we: het verhaal van de maker. Alleen opmaak; leunt op huisstijl.css en home.css. */
.werkwijze .z-hero{background:var(--h-titel);padding:0 var(--h-rand)}
.z-herorij{max-width:var(--h-maat);margin:0 auto;padding:clamp(28px,5vw,72px) 0 clamp(40px,6vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.z-herotekst{display:flex;flex-direction:column;gap:18px}
.werkwijze .z-hero h1{margin:0;font-family:var(--h-serif);font-weight:500;font-size:clamp(36px,4.6vw,64px);
  line-height:1.08;letter-spacing:-.01em;color:var(--h-inkt);text-wrap:balance}
.werkwijze .z-hero h1 em{font-style:italic;color:var(--h-rood);font-weight:500}
.z-lead{margin:0;font-family:var(--h-serif);font-style:italic;font-size:clamp(19px,1.7vw,23px);line-height:1.5;
  color:var(--h-mat);max-width:30em;text-wrap:pretty}
.z-portret{margin:0;justify-self:end;width:min(560px,100%);transform:rotate(1.2deg)}
.z-portret img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;
  border:8px solid var(--h-wit);box-shadow:0 22px 44px rgba(24,32,49,.18)}

.z-verhaal{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.werkwijze h2{margin:0 0 6px;text-wrap:balance}
.z-verhaal p,.z-tekst p{margin:0;font-family:var(--h-serif);font-size:20px;line-height:1.65;color:var(--h-mat);text-wrap:pretty}

.z-perkament{background:var(--h-perkament)}
.z-tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.z-tekst{display:flex;flex-direction:column;gap:14px}
.z-beeld{margin:0;position:relative}
.z-beeld img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 18px 36px rgba(24,32,49,.16)}
.z-beeld .z-beeld-klein{position:absolute;right:-18px;bottom:-34px;width:38%;border:6px solid var(--h-wit);
  transform:rotate(3deg)}
.z-omgekeerd .z-beeld img{max-height:520px;object-fit:cover}

.z-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1080px){.z-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.z-stappen li{display:flex;flex-direction:column;gap:8px;padding:26px 24px 28px;background:var(--h-wit);
  border:1px solid var(--h-lijn);border-radius:18px}
.z-nr{font-family:var(--h-serif);font-style:italic;font-size:40px;line-height:1;color:var(--h-rood)}
.z-stappen h3{margin:4px 0 0;font-family:var(--h-serif);font-weight:500;font-size:26px;color:var(--h-inkt)}
.z-stappen p{margin:0;font-size:17px;line-height:1.6;color:var(--h-mat)}
.z-breed{margin:48px auto 0;max-width:880px}
.z-breed img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 24px 48px rgba(24,32,49,.2)}

.home .z-nacht{background:var(--h-nacht);color:var(--h-papier)}
.home .h-pagina .z-nacht h2{color:var(--h-papier)}
.z-nacht .h-label{color:var(--h-goudl)}
.z-regels{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.z-regels li{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-top:1px solid rgba(226,192,131,.28)}
.z-regels b{font-family:var(--h-serif);font-weight:500;font-size:23px;color:var(--h-papier)}
.z-regels span{font-size:17px;line-height:1.55;color:var(--h-maan)}

.z-slot .z-verhaal{align-items:center;text-align:center}
.z-knoppen{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;margin-top:8px!important}
.werkwijze .z-link{font-family:var(--h-sans);font-size:16px;font-weight:600;color:var(--h-inkt);text-underline-offset:4px}
.werkwijze .z-klein{font-family:var(--h-sans);font-size:14.5px;margin-top:14px}
.werkwijze .z-klein a{color:inherit}

@media(max-width:820px){
  .z-herorij{grid-template-columns:1fr;gap:28px}
  .z-portret{justify-self:center;width:min(460px,94%)}
  .z-herotekst{text-align:center;align-items:center}
  .z-tweeluik{grid-template-columns:1fr;gap:36px}
  .z-omgekeerd .z-beeld{order:-1}
  .z-beeld .z-beeld-klein{right:-6px;bottom:-24px}
  .z-tweeluik .z-beeld{margin-bottom:20px}
  .z-stappen{grid-template-columns:1fr;gap:14px}
  .z-regels{grid-template-columns:1fr}
  .z-verhaal p,.z-tekst p{font-size:18px}
  .z-breed{margin-top:32px}
}