/* Fenne Maas: voorbeeldontwerp fotograaf. Twee lettertypes: Fraunces (koppen) en Jost (tekst). */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-cursief.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost.woff2) format("woff2");font-weight:300 500;font-display:swap}

:root{--zand:#f3ece2;--licht:#fbf8f3;--salie:#a9b5a0;--salie-licht:#dde3d6;--salie-tekst:#566150;--roze:#dcbcb2;--roze-licht:#f1e0da;--accent:#7a5a50;--inkt:#3d3833;--zacht:#5f5852;--lijn:#d9cfc1;--kop:"Fraunces",Georgia,serif;--tekst:"Jost",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zand);color:var(--inkt);font:350 18px/1.7 var(--tekst)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--inkt);outline-offset:4px;border-radius:4px}
.donker :focus-visible{outline-color:var(--licht)}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.naar-inhoud{position:absolute;left:-999px;top:8px;background:var(--inkt);color:var(--licht);padding:10px 18px;border-radius:999px;z-index:50}
.naar-inhoud:focus{left:12px}

/* Koppen */
h1,h2,h3{font-family:var(--kop);font-weight:300;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.45rem,2.4vw,1.8rem)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent)}
.klein{font-size:.82rem;font-weight:450;letter-spacing:.16em;text-transform:uppercase;color:var(--salie-tekst)}
.intro{font-size:1.15rem;max-width:32em}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border-radius:999px;border:0;background:var(--inkt);color:var(--licht);font:400 1rem var(--tekst);letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:background .2s}
.knop:hover{background:#221f1c}
.knop.licht{background:var(--licht);color:var(--inkt)}
.tekstlink{display:inline-block;padding:10px 0 3px;font-weight:400;text-decoration:none;border-bottom:1px solid currentColor;transition:color .2s}
.tekstlink:hover{color:var(--accent)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}

/* Header */
.kop{position:sticky;top:0;z-index:20;background:rgba(243,236,226,.93);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.kop.gescrold{border-color:var(--lijn)}
.kop .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;min-height:80px}
.logo{font:italic 300 1.9rem/1 var(--kop);text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:2px;margin-left:-10px}
.menu a,.kop .rechts{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:.8rem;white-space:nowrap;font-weight:400;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.menu a span,.kop .rechts span{padding-bottom:3px;border-bottom:1px solid transparent}
.menu a:hover span,.menu a[aria-current="page"] span,.kop .rechts span{border-color:currentColor}
.kop .rechts{justify-self:end;padding-right:0}
.menuknop{display:none;justify-self:end;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--inkt);background:none;color:var(--inkt);font:400 .84rem var(--tekst);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* Secties */
section{padding:clamp(64px,9vw,120px) 0}
.vlak{background:var(--licht)}
.salie{background:var(--salie-licht)}
.sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(32px,5vw,56px)}
.sectiekop p{max-width:24em}
.paginakop{padding:clamp(48px,7vw,96px) 0 clamp(32px,5vw,56px);text-align:center}
.paginakop h1{margin:18px auto 22px;max-width:14em}
.paginakop .intro{margin-inline:auto}
.foto{overflow:hidden;border-radius:6px;background:#e6dccd}
.boog{border-radius:999px 999px 8px 8px}
.boog-onder{border-radius:8px 8px 999px 999px}

/* Home: openingsbeeld */
.held{padding:clamp(24px,4vw,48px) 0 clamp(72px,9vw,120px);overflow:hidden}
.held .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.held h1{margin:20px 0 24px}
.held-beelden{position:relative;padding:0 0 44px 14%}
.held-beelden::before{content:"";position:absolute;right:-28px;top:-22px;width:42%;aspect-ratio:1;border-radius:50%;background:var(--salie);opacity:.5}
.held-beelden .boog{position:relative;aspect-ratio:4/5}
.los{position:absolute;left:0;bottom:0;width:40%;aspect-ratio:4/5;padding:8px 8px 28px;background:var(--licht);transform:rotate(-4deg);box-shadow:0 14px 34px rgba(61,56,51,.18)}

/* Citaat */
.citaat{text-align:center}
.citaat blockquote{font:italic 300 clamp(1.6rem,3.4vw,2.5rem)/1.3 var(--kop);max-width:22em;margin:0 auto 20px;text-wrap:balance}

/* Drie shoots */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.drie>*:nth-child(2){margin-top:64px}
.shoot{display:block;text-decoration:none}
.shoot .foto{aspect-ratio:3/4;transition:transform .5s}
.shoot:hover .foto{transform:translateY(-6px)}
.shoot div.onder{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;font-size:.95rem}
.shoot b{font:italic 300 1.7rem/1 var(--kop)}

/* Stappen */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);counter-reset:stap}
.stappen li{counter-increment:stap;padding-top:22px;border-top:1px solid var(--inkt)}
.stappen li::before{content:"0" counter(stap);display:block;font:italic 300 2.4rem/1 var(--kop);color:var(--accent);margin-bottom:14px}
.stappen p{margin-top:8px;color:var(--zacht)}

/* Tekst naast beeld */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.duo .foto{aspect-ratio:4/5}
.duo.om>.foto,.duo.om>.stapel{order:2}
.duo h2{margin:16px 0 20px}
.duo p+p{margin-top:16px}
.feiten{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 36px;margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.feiten li{font-size:.92rem;color:var(--zacht)}
.feiten b{display:block;font:300 1.6rem/1.2 var(--kop);color:var(--inkt)}

/* Ervaringen */
.ervaringen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,32px)}
.ervaring{background:var(--licht);border-radius:8px;padding:30px}
.salie .ervaring,.vlak .ervaring{background:var(--zand)}
.ervaring blockquote{font:italic 300 1.3rem/1.45 var(--kop)}
.ervaring figcaption{margin-top:18px;font-size:.92rem}
.ervaring figcaption span{display:block;color:var(--zacht)}

/* Oproep */
.oproep{text-align:center;background:var(--roze-licht)}
.oproep h2{max-width:13em;margin:14px auto 18px}
.oproep p{max-width:28em;margin-inline:auto}
.oproep .acties{justify-content:center}

/* Fotoshoots */
.subnav{position:sticky;top:80px;z-index:10;background:rgba(243,236,226,.93);backdrop-filter:blur(10px);border-block:1px solid var(--lijn)}
.subnav ul{display:flex;justify-content:center;gap:4px}
.subnav a{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;font:italic 300 1.25rem var(--kop);text-decoration:none}
.subnav a:hover{color:var(--accent)}
.reeks-kop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.reeks-kop h2{margin-top:14px}
.reeks{columns:3;column-gap:clamp(12px,2vw,24px)}
.reeks figure{break-inside:avoid;margin-bottom:clamp(12px,2vw,24px);overflow:hidden;border-radius:6px;background:#e6dccd}
.reeks img{height:auto}
.reeks figure:nth-child(1){border-radius:999px 999px 6px 6px}
.reeks figure:nth-child(4){margin-top:clamp(20px,4vw,56px)}
.reeks figure:last-child{border-radius:6px 6px 999px 999px}
section[id]{scroll-margin-top:130px}

/* Tarieven */
.pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px);align-items:stretch}
.pakket{display:flex;flex-direction:column;background:var(--licht);border-radius:8px;padding:clamp(24px,3vw,36px)}
.pakket.midden{background:var(--salie-licht)}
.pakket .prijs{font:300 2.6rem/1 var(--kop);margin:18px 0 4px}
.pakket .prijs small{font:350 .95rem var(--tekst);color:var(--zacht);margin-right:6px}
.pakket ul{margin:22px 0 28px;flex:1}
.pakket li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--lijn)}
.pakket.midden li{border-color:#c3cdbb}
.pakket li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--roze)}
.pakket.midden li::before{background:var(--salie)}
.pakket .tekstlink{align-self:flex-start}
.inbegrepen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.inbegrepen li{padding-top:18px;border-top:1px solid var(--inkt)}
.inbegrepen b{display:block;font:italic 300 1.4rem/1.2 var(--kop);margin-bottom:6px}
.inbegrepen span{color:var(--zacht);font-size:.96rem}
.vragen{max-width:760px;margin-inline:auto}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:68px;padding:12px 0;font:300 1.35rem/1.3 var(--kop);cursor:pointer;list-style:none}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";flex:none;font:300 1.8rem/1 var(--kop);color:var(--accent)}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{padding:0 0 24px;max-width:36em;color:var(--zacht)}

/* Over mij */
.stapel{position:relative;padding:0 12% 10% 0}
.stapel .foto{aspect-ratio:4/5}
.stapel .los{left:auto;right:0;width:44%;transform:rotate(4deg)}
.breedbeeld{aspect-ratio:21/9;border-radius:6px}
.waarden{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.waarden h3{font-style:italic;margin-bottom:10px}
.waarden p{color:var(--zacht)}

/* Contact */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:start}
.formulier{background:var(--licht);border-radius:8px;padding:clamp(24px,4vw,44px)}
.veld{margin-top:20px}
.veld label{display:block;font-size:.84rem;font-weight:450;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.veld input,.veld select,.veld textarea{width:100%;min-height:54px;padding:12px 16px;border-radius:6px;border:1px solid #a89f93;background:var(--zand);color:var(--inkt);font:350 1.05rem var(--tekst)}
.veld textarea{min-height:140px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--inkt);outline-offset:2px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.formulier .knop{margin-top:28px}
.melding{margin-top:18px;padding:14px 18px;border-radius:6px;background:var(--salie-licht)}
.gegevens h2{font-size:1.9rem;margin-bottom:14px}
.gegevens>div+div{margin-top:36px;padding-top:32px;border-top:1px solid var(--lijn)}
.gegevens p+p{margin-top:12px}
.gegevens .foto{aspect-ratio:4/3;margin-bottom:32px}

/* Footer */
.voet{background:var(--inkt);color:var(--licht);padding:64px 0 28px;text-align:center}
.voet .logo{font-size:2.6rem}
.voet nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:26px 0 22px}
.voet nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.voet nav a:hover{text-decoration:underline}
.voet .regel{opacity:.85}
.voet .kleintje{margin-top:40px;padding-top:22px;border-top:1px solid rgba(251,248,243,.2);font-size:.86rem;opacity:.7}

/* Smaller schermen */
@media (max-width:1100px){
  .kop .wrap{grid-template-columns:1fr auto;min-height:68px}
  .kop .rechts{display:none}
  .logo{grid-row:1;grid-column:1}
  .menuknop{display:inline-flex}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;margin:0;padding:10px 24px 24px;background:var(--zand);border-bottom:1px solid var(--lijn);box-shadow:0 20px 30px rgba(61,56,51,.08)}
  .menu.open{display:flex}
  .menu a{min-height:54px;font-size:1rem;padding:0}
  .subnav{top:68px}
  section[id]{scroll-margin-top:120px}
}
@media (max-width:820px){
  .held .wrap,.duo,.contact,.reeks-kop{grid-template-columns:1fr}
  .duo.om>.foto,.duo.om>.stapel{order:0}
  .held-beelden{max-width:520px;margin-top:8px}
  .drie,.stappen,.ervaringen,.pakketten,.waarden{grid-template-columns:1fr}
  .drie>*:nth-child(2){margin-top:0}
  .drie{max-width:460px;margin-inline:auto}
  .inbegrepen{grid-template-columns:1fr 1fr}
  .reeks{columns:2}
  .reeks figure:nth-child(4){margin-top:0}
  .breedbeeld{aspect-ratio:4/3}
  .feiten{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  body{font-size:17px}
  .wrap{width:calc(100% - 36px)}
  .twee,.inbegrepen{grid-template-columns:1fr}
  .subnav a{padding:0 12px;font-size:1.1rem}
  .held-beelden::before{right:-10px}
  .los{left:6px}
  .formulier .knop{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}