/* ---------- Wedding Event Podcast ----------
   De opmaak die de gebruiker aanleverde, ingepast in de site. Drie dingen
   zijn bewust aangepast. Een: alle variabelen hebben een eigen naam gekregen,
   want --ink en --line bestonden al en zouden anders het menu en de voet van
   kleur doen veranderen. Twee: elke regel hangt onder body.wep, zodat deze
   lichte opmaak nergens anders op de site lekt en zodat ze wint van de
   algemene stijl. Drie: het lettertype DM Sans is vervangen door de tekstletter
   van de site, en Lora staat op onze eigen server in plaats van bij
   Google, want de beveiligingsregels van de site laten geen externe bronnen toe.
   Lora wordt enkel gebruikt voor de cursieve accenten in de koppen. Eerst
   stond daar Playfair, maar die heeft zulke dunne haarlijnen dat ze wegvallen
   op een donkere achtergrond. Lora is gemaakt voor schermen en blijft leesbaar. */

@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url(../assets/fonts/lora-600i.woff2) format('woff2');
}

body.wep {
  --wep-ink: #171714;
  --wep-cream: #f5f1e8;
  --wep-sand: #e8dfcf;
  --wep-white: #fffdf8;
  --wep-line: rgba(23,23,20,.14);
  --wep-max: 1240px;
}body.wep * { box-sizing: border-box; }body.wep { scroll-behavior: smooth; }body.wep { margin: 0; font-family: var(--ff-body); background: var(--wep-cream); }
/* De tekstkleur enkel binnen main. Op body zou ze ook het menu en de voet raken, en daar stond de merknaam dan donker op donker. */
body.wep main { color: var(--wep-ink); }body.wep main img { width: 100%; height: 100%; display: block; object-fit: cover; }body.wep main a { color: inherit; }body.wep .wep-container { width: min(calc(100% - 40px), var(--wep-max)); margin-inline: auto; }body.wep .wep-section { padding: 120px 0; }body.wep .wep-section--cream { background: var(--wep-cream); }body.wep .wep-section--sand { background: var(--wep-sand); }body.wep .wep-section--dark { background: var(--wep-ink); color: var(--wep-white); }body.wep .wep-eyebrow { margin-bottom: 22px; font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }body.wep .wep-eyebrow--light { color: rgba(255,255,255,.75); }body.wep main h1, body.wep main h2, body.wep main h3, body.wep main p { margin-top: 0; }body.wep main h1, body.wep main h2 { letter-spacing: -.04em; }body.wep main h1 { margin-bottom: 30px; max-width: 950px; font-size: clamp(62px, 8vw, 126px); line-height: .88; font-weight: 600; }body.wep main h2 { margin-bottom: 0; max-width: 800px; font-size: clamp(44px, 5.5vw, 78px); line-height: .98; font-weight: 600; }body.wep main h1 em, body.wep main h2 em, body.wep .wep-quote-band em { font-family: 'Lora',serif; font-weight: 600; }body.wep main p { font-size: 18px; line-height: 1.7; }body.wep .wep-btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }body.wep .wep-btn:hover { transform: translateY(-2px); }body.wep .wep-btn--light { background: var(--wep-white); color: var(--wep-ink); }body.wep .wep-btn--dark { background: var(--wep-ink); color: var(--wep-white); }body.wep .wep-btn--wide { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }body.wep .wep-text-link { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; text-decoration: none; }body.wep .wep-text-link--light { color: var(--wep-white); }body.wep .wep-hero { min-height: 92vh; position: relative; display: flex; align-items: end; overflow: hidden; color: var(--wep-white); background: #29251f; }body.wep .wep-hero__media, body.wep .wep-hero__overlay { position: absolute; inset: 0; }body.wep .wep-hero__media img { object-position: center 58%; }body.wep .wep-hero__overlay { background: linear-gradient(90deg, rgba(11,11,10,.74) 0%, rgba(11,11,10,.4) 46%, rgba(11,11,10,.1) 76%), linear-gradient(0deg, rgba(10,10,9,.58) 0%, transparent 45%); }body.wep .wep-hero__content { position: relative; z-index: 1; padding-block: 180px 110px; }body.wep .wep-hero__lead { max-width: 690px; margin-bottom: 36px; font-size: clamp(19px,2vw,24px); color: rgba(255,255,255,.86); }body.wep .wep-hero__actions { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }body.wep .wep-hero__note { position: absolute; z-index: 1; right: 40px; bottom: 35px; max-width: 250px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.45); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); }body.wep .wep-intro__grid { display: grid; grid-template-columns: 1.15fr .7fr; gap: 90px; align-items: end; margin-bottom: 90px; }body.wep .wep-intro__copy { max-width: 570px; }body.wep .wep-intro__copy p:last-child { margin-bottom: 0; }body.wep .wep-visual-pair { display: grid; grid-template-columns: 1.55fr .65fr; gap: 24px; align-items: end; }body.wep .wep-visual-pair figure { margin: 0; display: flex; flex-direction: column; }body.wep .wep-visual-pair figure img { flex: 1 1 0; min-height: 0; height: auto; }body.wep .wep-visual-pair__large { height: 680px; }body.wep .wep-visual-pair__small { height: 420px; margin-bottom: 44px !important; }body.wep .wep-visual-pair img { border-radius: 4px; }body.wep .wep-visual-pair figcaption { margin-top: 12px; font-size: 13px; color: rgba(23,23,20,.58); }body.wep .wep-steps__head { margin-bottom: 70px; }body.wep .wep-steps__grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }body.wep .wep-step-card { min-height: 330px; padding: 36px 42px 44px 0; }body.wep .wep-step-card + .wep-step-card { padding-left: 42px; border-left: 1px solid rgba(255,255,255,.2); }body.wep .wep-step-card__nr { display: block; margin-bottom: 72px; font-size: 12px; color: rgba(255,255,255,.45); }body.wep .wep-step-card h3 { margin-bottom: 16px; font-size: 27px; }body.wep .wep-step-card p { margin-bottom: 0; font-size: 16px; color: rgba(255,255,255,.68); }body.wep .wep-steps__image { height: 660px; position: relative; margin-top: 80px; overflow: hidden; }body.wep .wep-steps__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 50%); }body.wep .wep-steps__image-copy { position: absolute; z-index: 1; left: 45px; bottom: 40px; display: grid; gap: 2px; font-size: clamp(28px,4vw,54px); letter-spacing: -.03em; }body.wep .wep-steps__image-copy span { color: rgba(255,255,255,.7); }body.wep .wep-emotion__grid { display: grid; grid-template-columns: 1fr .82fr; gap: 100px; align-items: center; }body.wep .wep-emotion__image-wrap { height: 760px; }body.wep .wep-emotion__copy { max-width: 620px; }body.wep .wep-emotion__copy h2 { margin-bottom: 34px; }body.wep .wep-emotion__copy .wep-btn { margin-top: 14px; }body.wep .wep-quote-band { padding: 95px 0; background: #d9cdbc; }body.wep .wep-quote-band__inner { text-align: center; }body.wep .wep-quote-band p { margin: 0 auto; max-width: 1000px; font-size: clamp(34px,4.7vw,70px); line-height: 1.06; letter-spacing: -.035em; }body.wep .wep-enquiry__grid { display: grid; grid-template-columns: .78fr 1.12fr; gap: 90px; align-items: start; }body.wep .wep-enquiry__intro { position: sticky; top: 40px; }body.wep .wep-enquiry__intro h2 { margin-bottom: 30px; }body.wep .wep-enquiry__intro > p { max-width: 520px; }body.wep .wep-enquiry__promise { display: grid; gap: 10px; margin-top: 34px; font-size: 14px; }body.wep .wep-booking-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; padding: 34px; background: rgba(255,255,255,.5); border: 1px solid rgba(23,23,20,.1); }body.wep .wep-field { display: grid; gap: 8px; }body.wep .wep-field--full { grid-column: 1 / -1; }body.wep .wep-field label { font-size: 13px; font-weight: 700; }body.wep main input, body.wep main textarea { width: 100%; border: 1px solid rgba(23,23,20,.18); border-radius: 0; background: rgba(255,255,255,.72); padding: 16px 15px; color: var(--wep-ink); font: inherit; outline: none; }body.wep main input:focus, body.wep main textarea:focus { border-color: var(--wep-ink); }body.wep main textarea { resize: vertical; }body.wep .wep-checkbox { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: 13px; line-height: 1.5; }body.wep .wep-checkbox input { width: auto; margin-top: 3px; }body.wep .wep-form-submit { display: grid; gap: 10px; }body.wep .wep-form-submit small { text-align: center; color: rgba(23,23,20,.58); }

@media (max-width: 900px) {body.wep .wep-section { padding: 82px 0; }body.wep .wep-hero { min-height: 820px; }body.wep .wep-hero__content { padding-block: 150px 82px; }body.wep .wep-hero__note { display: none; }body.wep .wep-intro__grid, body.wep .wep-emotion__grid, body.wep .wep-enquiry__grid { grid-template-columns: 1fr; gap: 50px; }body.wep .wep-visual-pair { grid-template-columns: 1fr; }body.wep .wep-visual-pair__large { height: 520px; }body.wep .wep-visual-pair__small { height: 360px; margin: 0 0 0 18% !important; }body.wep .wep-steps__grid { grid-template-columns: 1fr; }body.wep .wep-step-card, body.wep .wep-step-card + .wep-step-card { min-height: auto; padding: 32px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }body.wep .wep-step-card:first-child { border-top: 0; }body.wep .wep-step-card__nr { margin-bottom: 34px; }body.wep .wep-steps__image { height: 520px; }body.wep .wep-emotion__image-wrap { height: 580px; }body.wep .wep-enquiry__intro { position: static; }
}

@media (max-width: 600px) {body.wep .wep-container { width: min(calc(100% - 28px), var(--wep-max)); }body.wep main h1 { font-size: 58px; }body.wep main h2 { font-size: 43px; }body.wep .wep-hero { min-height: 740px; }body.wep .wep-hero__content { padding-block: 130px 65px; }body.wep .wep-hero__lead { font-size: 18px; }body.wep .wep-hero__actions { align-items: flex-start; flex-direction: column; }body.wep .wep-visual-pair__large { height: 430px; }body.wep .wep-visual-pair__small { height: 280px; margin-left: 12% !important; }body.wep .wep-steps__image { height: 430px; }body.wep .wep-steps__image-copy { left: 24px; bottom: 24px; }body.wep .wep-emotion__image-wrap { height: 480px; }body.wep .wep-booking-form { grid-template-columns: 1fr; padding: 20px; }body.wep .wep-field--full { grid-column: auto; }body.wep .wep-checkbox, body.wep .wep-form-submit { grid-column: 1; }
}

/* ---------- Aansluiten bij de huisstijl van de site ----------
   Het aangeleverde ontwerp stond volledig los van de rest van de site. Deze
   regels brengen het terug naar de eigen stijl zonder de opzet te verliezen:
   dezelfde koptekstletter als elders, en het goud van het merk als accent.
   Op de lichte vlakken is dat een donkerder goud, want het felle goud haalt
   daar maar 1,48 op de contrastschaal en 4,5 is het minimum. Het donkere goud
   haalt 5,67 op creme en 4,83 op zand. Op de donkere sectie mag het felle goud
   wel, dat haalt daar 10,79. */
body.wep main h1,
body.wep main h2,
body.wep .wep-step-card h3{font-family:var(--ff-head)}

/* De cursieve accenten in Lora, dat is het karakter van deze pagina. */
body.wep main h1 em,
body.wep main h2 em,
body.wep .wep-quote-band em{font-family:'Lora',serif}

/* Het goud van het merk als accent, met het juiste contrast per ondergrond. */
body.wep .wep-eyebrow{color:#7E580C}
body.wep .wep-eyebrow--light{color:var(--gold)}
body.wep .wep-step-card__nr{color:var(--gold)}

/* De hoofdknop is op de hele site goud met donkere tekst. Hier ook. */
body.wep .wep-btn--dark{background:var(--gold);color:#171714}
body.wep .wep-btn--dark:hover{background:var(--gold-lt)}

/* De vinkjes bij de beloftes in dezelfde kleur als de rest. */
body.wep .wep-enquiry__promise{color:#4a453c}

/* De voet en het menu zijn donker; een scheiding houdt de overgang rustig. */
body.wep .wep-hero{border-bottom:0}

/* Dit kleine tekstje haalde 4,21 en de norm is 4,5. Nu 6,86. */
body.wep .wep-form-submit small{color:#4a453c}

/* ---------- Rustige diavoorstelling in de donkere sectie ----------
   De gebruiker vroeg een video die toont hoe het eruitziet. Een echt
   videobestand kon ik niet maken, en het is hier ook niet de beste weg: vier
   beelden die traag invaren en langzaam inzoomen geven dezelfde beweging,
   wegen samen minder dan een halve megabyte in plaats van tientallen, en
   blijven scherp op elk scherm. Elk beeld staat 16 seconden in beeld, met
   een overvloeiing van 2 seconden. Wie in zijn toestel aangeeft minder
   beweging te willen, krijgt gewoon het eerste beeld stil. */
body.wep .wep-dia{position:relative}
body.wep .wep-diaframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:wep-vervagen 48s infinite;
  animation-delay:calc(var(--stap) * 16s);
}
@keyframes wep-vervagen{
  0%      {opacity:0;transform:scale(1.0)}
  4%      {opacity:1}
  31%     {opacity:1;transform:scale(1.07)}
  35%     {opacity:0;transform:scale(1.075)}
  100%    {opacity:0;transform:scale(1.0)}
}
/* De tekst moet boven de beelden blijven staan. */
body.wep .wep-steps__image-copy{z-index:2}
body.wep .wep-dia::after{z-index:1}

@media (prefers-reduced-motion:reduce){
  body.wep .wep-diaframe{animation:none;opacity:0;transform:none}
  body.wep .wep-diaframe[style*="--stap:0"]{opacity:1}
}

/* ---------- Koppen die netjes afbreken ----------
   De koppen waren gemaakt voor de volle breedte, maar in de smalle kolom van
   het introblok viel een zin van 56 pixels uiteen in vier rafelige regels,
   met soms maar twee woorden op de laatste. Twee ingrepen: text-wrap balance
   verdeelt de woorden gelijk over de regels, en in de smalle kolom staat de
   kop een maat kleiner zodat hij in twee regels past in plaats van vier. */
body.wep main h1,
body.wep main h2{text-wrap:balance}

body.wep .wep-intro__grid h2{font-size:clamp(30px,3.1vw,46px)}

/* Het handmatige afbreekpunt laten we alleen staan waar er ruimte voor is.
   In een smalle kolom breekt de tekst beter vanzelf. */
@media (max-width:1100px){
  body.wep .wep-intro__grid h2 br{display:none}
}

/* ---------- Het introblok recht trekken ----------
   De twee kolommen stonden onderaan uitgelijnd. Dat werkt wanneer ze even
   hoog zijn, maar de tekst rechts is hier dubbel zo hoog als de kop links,
   waardoor er een gat van 154 pixels boven de kop ontstond. Nu beginnen ze
   allebei bovenaan. De kop staat ook een maat kleiner zodat elke zin op een
   eigen regel past in plaats van drie rafelige regels te vormen. */
body.wep .wep-intro__grid{align-items:start}
body.wep .wep-intro__grid h2{font-size:clamp(27px,2.6vw,39px)}
body.wep .wep-intro__copy p:first-child{margin-top:0}

/* De titel in de hero stond op maximaal 950 pixels, maar de eerste regel
   heeft er 1041 nodig op volle grootte. Daardoor viel het woord van alleen
   op een regel. De omhullende kolom is 1240 breed, dus die beperking mag weg. */
body.wep .wep-hero h1{max-width:none}