/* ==========================================================================
   Hippe Zeeuw · laag 2 — typografie
   Verbatim uit het concept (css/styles.css, blok "typography").
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.02;
  margin:0;
}
h1{ font-size:clamp(2.9rem,6.4vw,5.6rem); }
h2{ font-size:clamp(2.1rem,4.1vw,3.5rem); line-height:1.05; }
h3{ font-size:clamp(1.35rem,2vw,1.75rem); line-height:1.15; }
em, .it{ font-style:italic; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.02rem,1.25vw,1.14rem);
  line-height:1.72;
  color:var(--ink-2);
  max-width:56ch;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-family:var(--ff-sans);
}
.kicker::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.55;
}
.kicker--plain::before{ display:none; }
.kicker--num{ color:var(--stone-dk); }

.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,54px);
}
.sec-head__txt{ max-width:60ch; }
.sec-head h2{ margin-top:14px; }
.sec-head .lead{ margin-top:16px; }

/* --------------------------------------------------- redactionele tekst
   Voor WYSIWYG-velden (beleidspagina's, over ons, productbeschrijving). */
.rte{ color:var(--ink-2); }
.rte > *:first-child{ margin-top:0; }
.rte > *:last-child{ margin-bottom:0; }
.rte h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin:1.6em 0 .5em; color:var(--ink); }
.rte h3{ font-size:clamp(1.2rem,1.8vw,1.45rem); margin:1.4em 0 .45em; color:var(--ink); }
.rte h4{
  font-family:var(--ff-sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin:1.5em 0 .5em;
}
.rte p{ margin:0 0 1.1em; font-size:.9688rem; line-height:1.75; }
.rte a{ color:var(--stone-dk); border-bottom:1px solid var(--line); }
.rte a:hover{ border-bottom-color:var(--stone-dk); }
.rte ul, .rte ol{ margin:0 0 1.2em; padding-left:1.3em; }
.rte ul{ list-style:disc; }
.rte ol{ list-style:decimal; }
.rte li{ margin-bottom:.5em; font-size:.9688rem; line-height:1.7; }
.rte strong, .rte b{ color:var(--ink); font-weight:600; }
.rte blockquote{
  margin:1.6em 0;
  padding-left:22px;
  border-left:2px solid var(--stone);
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.25rem;
  line-height:1.4;
  color:var(--ink);
}
.rte table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.875rem; }
.rte th, .rte td{ padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; }
.rte th{ color:var(--ink); font-weight:600; }
.rte hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.rte img{ margin:1.4em 0; }