/* ==========================================================================
   SMARTgirls — huisstijl naar het Merkboek 2026 (Joanne Vis · Mme Poisson)
   Eén stylesheet voor de hele site.
   ========================================================================== */

:root{
  /* kleur — overgenomen uit het merkboek en de columns */
  --creme:        #FFFFFF;   /* gebroken wit */
  --creme-diep:   #FFFFFF;
  --donkerrood:   #560F10;   /* diepte / ink */
  --donkerrood-2: #430C0D;
  --rood:         #982022;   /* accent */
  --roze:         #F65275;   /* warm roze, PMS 184 */
  --roze-kop:     #E85D82;   /* roze voor koppen, editorial */
  --roze-licht:   #F8C1B8;   /* zacht roze, PMS 2337 */
  --roze-zacht:   #F8C1B8;
  --oranje:       #F0875A;
  --mauve:        #BE5F41;   /* labels op creme */
  --mauve-licht:  #F6BCA1;   /* labels op donkerrood */
  --perzik:       #FAE3D1;   /* vlakken, uit de carrousel */
  --lijn:         #F1CDBC;

  --inkt:         var(--donkerrood);
  --inkt-zacht:   #7A3A32;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --marge:  clamp(18px, 4.5vw, 60px);
  --breed:  1120px;
  --smal:   860px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none!important; transition:none!important }
}

body{
  margin:0;
  background:var(--creme);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }

/* --------------------------------------------------------------------------
   Het kader — de dunne keyline die elke merkboekpagina omlijst
   -------------------------------------------------------------------------- */
.blad{
  position:relative;
  border-left:1px solid var(--lijn);
  border-right:1px solid var(--lijn);
  max-width:1360px;
  margin:0 auto;
  background:var(--creme);
}

.mid{ max-width:var(--breed); margin:0 auto; padding:0 var(--marge) }
.mid.eng{ max-width:var(--smal) }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--serif); margin:0; text-wrap:balance }
p{ margin:0 0 1.1em; max-width:62ch }
p:last-child{ margin-bottom:0 }

/* het label boven elke kop */
.oog{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mauve);
  margin:0 0 18px;
  max-width:none;
}
.op-rood .oog{ color:#F8C1B8 }

/* de kop: roze serif, roman + cursief door elkaar, met het streepje eronder */
.kop{
  font-weight:700;
  color:var(--roze-kop);
  font-size:clamp(38px, 6.4vw, 76px);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}
.kop em{ font-style:italic; font-weight:400 }
.kop::after{
  content:"";
  display:block;
  width:58px; height:3px;
  background:var(--roze);
  margin:26px 0 0;
}
.kop.midden{ text-align:center }
.kop.midden::after{ margin-left:auto; margin-right:auto }

.kop-klein{
  font-weight:700; color:var(--roze-kop);
  font-size:clamp(28px, 3.8vw, 44px); line-height:1.06; letter-spacing:-.01em; margin:0;
}
.kop-klein em{ font-style:italic; font-weight:400 }
.kop-klein::after{
  content:""; display:block; width:44px; height:2.5px;
  background:var(--roze); margin:20px 0 0;
}

.op-rood .kop, .op-rood .kop-klein{ color:var(--creme) }
.op-rood .kop em, .op-rood .kop-klein em{ color:var(--roze-licht) }
.op-rood .kop::after, .op-rood .kop-klein::after{ background:var(--roze) }

.inleiding{ font-size:clamp(18px,2vw,20.5px); line-height:1.62; color:var(--inkt-zacht); max-width:52ch }
.op-rood .inleiding{ color:#FFFFFF }

/* --------------------------------------------------------------------------
   Secties
   -------------------------------------------------------------------------- */
section{ padding:clamp(58px, 8vw, 106px) 0; position:relative }
.streep-boven{ border-top:1px solid var(--lijn) }

/* donkerrode pagina — de titelbladen uit het merkboek */
.op-rood{
  background:var(--donkerrood);
  color:var(--creme-diep);
  position:relative;
  overflow:hidden;
}
.op-rood p{ color:#FFFFFF }
.op-rood .mid{ position:relative; z-index:2 }

/* de pinstripe-band aan de rechterrand */
.op-rood::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0;
  width:clamp(34px, 5vw, 72px);
  background:
    repeating-linear-gradient(to right,
      var(--roze) 0 3px, transparent 3px 7px,
      var(--roze) 7px 9px, transparent 9px 16px,
      var(--roze) 16px 21px, transparent 21px 25px);
  opacity:.9;
  z-index:1;
}
@media (max-width:760px){ .op-rood::after{ width:22px } }

/* het spookletter-SMART op de achtergrond */
.watermerk{
  position:absolute;
  left:-.06em; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(150px, 27vw, 400px);
  line-height:1; letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(232,73,110,.30);
  pointer-events:none; user-select:none; z-index:0; white-space:nowrap;
}
.watermerk.vol{
  -webkit-text-stroke:0; color:rgba(232,73,110,.26);
}

/* --------------------------------------------------------------------------
   Tweekoloms lopende tekst met drop cap — de merkboekpagina
   -------------------------------------------------------------------------- */
.kolommen{
  margin-top:36px;
  column-count:2;
  column-gap:clamp(28px, 4vw, 56px);
}
@media (max-width:720px){ .kolommen{ column-count:1 } }
.kolommen p{ text-align:justify; hyphens:auto; max-width:none; margin:0 0 1em }
.kolommen p:first-of-type::first-letter{
  float:left;
  font-family:var(--serif); font-weight:700; color:var(--roze);
  font-size:4.6em; line-height:.78; padding:.06em .1em 0 0;
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */
.citaat{
  border-left:3px solid var(--roze);
  padding:4px 0 4px 26px;
  margin:38px 0 0;
  max-width:56ch;
}
.citaat p{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(20px, 2.5vw, 27px); line-height:1.34;
  color:var(--rood); margin:0 0 12px; max-width:none;
}
.citaat cite{
  font-family:var(--sans); font-style:normal;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mauve);
}
.op-rood .citaat p{ color:var(--creme) }
.op-rood .citaat cite{ color:#F8C1B8 }

/* --------------------------------------------------------------------------
   Genummerde lijst — zoals de inhoudsopgave van het merkboek
   -------------------------------------------------------------------------- */
.lijst{ list-style:none; margin:34px 0 0; padding:0 }
.lijst li{
  display:grid; grid-template-columns:44px 1fr auto; gap:16px;
  align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--lijn);
}
.lijst li:first-child{ border-top:1px solid var(--lijn) }
.lijst .nr{
  font-family:var(--serif); font-style:italic; font-size:17px; color:var(--roze);
  font-variant-numeric:tabular-nums;
}
.lijst .wat{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--donkerrood); line-height:1.3 }
.lijst .bij{ font-size:14.5px; color:var(--inkt-zacht); font-family:var(--sans) }
.lijst li p{ grid-column:2 / -1; margin:6px 0 0; font-size:15.5px; color:var(--inkt-zacht) }
@media (max-width:620px){
  .lijst li{ grid-template-columns:34px 1fr; }
  .lijst .bij{ grid-column:2; }
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop{
  display:inline-block; font-family:var(--sans);
  font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:18px 34px; text-decoration:none;
  background:var(--roze); color:var(--creme); border:0;
  transition:background .18s ease, color .18s ease;
}
.knop:hover, .knop:focus-visible{ background:var(--donkerrood); color:var(--creme) }
.knop.leeg{ background:transparent; color:var(--donkerrood); box-shadow:inset 0 0 0 1.5px var(--donkerrood); padding:16.5px 32px }
.knop.leeg:hover, .knop.leeg:focus-visible{ background:var(--donkerrood); color:var(--creme) }
.op-rood .knop.leeg{ color:var(--creme); box-shadow:inset 0 0 0 1.5px rgba(254,247,228,.5) }
.op-rood .knop.leeg:hover, .op-rood .knop.leeg:focus-visible{ background:var(--creme); color:var(--donkerrood) }
.knoppen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }

a{ color:var(--rood) }
a:focus-visible, button:focus-visible{ outline:2.5px solid var(--roze); outline-offset:3px }
.overslaan{ position:absolute; left:-9999px; background:var(--donkerrood); color:var(--creme); padding:14px 22px; z-index:200 }
.overslaan:focus{ left:14px; top:14px }

/* --------------------------------------------------------------------------
   Kop van de site
   -------------------------------------------------------------------------- */
.sitekop{
  position:sticky; top:0; z-index:100;
  background:var(--creme); border-bottom:1px solid var(--lijn);
}
.sitekop .mid{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding-top:15px; padding-bottom:15px }
.merk{ display:block; line-height:0 }
.merk img{ width:clamp(132px, 15vw, 168px); height:auto }
.sitenav{ display:flex; gap:26px; align-items:center }
.sitenav a:not(.knop){
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--inkt-zacht); text-decoration:none;
}
.sitenav a:not(.knop):hover{ color:var(--roze) }
.sitenav .knop{ padding:12px 20px; font-size:10.5px; letter-spacing:.16em }
@media (max-width:940px){ .sitenav a:not(.knop){ display:none } }

/* --------------------------------------------------------------------------
   Titelblok — de omslagpagina van een hoofdstuk
   -------------------------------------------------------------------------- */
.titelblad{ padding:clamp(76px, 12vw, 150px) 0; text-align:center }
.titelblad .oog{ text-align:center }
.titelblad .titel{
  font-family:var(--serif); font-weight:400; color:var(--creme);
  font-size:clamp(38px, 6.6vw, 84px); line-height:1.06; letter-spacing:-.01em;
  margin:0 auto; max-width:18ch;
}
.titelblad .titel em{ font-style:italic; color:var(--roze-licht) }
.titelblad .titel .kaps{ font-variant:small-caps; letter-spacing:.02em }
.titelblad .onderregel{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--mauve-licht);
  margin:30px 0 0; max-width:none;
}

/* --------------------------------------------------------------------------
   Rasters
   -------------------------------------------------------------------------- */
.raster{ display:grid; gap:1px; background:var(--lijn); border:1px solid var(--lijn); margin-top:44px }
.raster.v2{ grid-template-columns:repeat(2,1fr) }
.raster.v3{ grid-template-columns:repeat(3,1fr) }
.raster.v4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .raster.v4,.raster.v3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .raster.v4,.raster.v3,.raster.v2{ grid-template-columns:1fr } }
.vak{ background:var(--creme); padding:30px 26px 34px }
.op-rood .raster{ background:rgba(232,73,110,.28); border-color:rgba(232,73,110,.28) }
.op-rood .vak{ background:var(--donkerrood) }
.vak .nr{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--roze); display:block; margin-bottom:14px }
.vak h3{ font-family:var(--serif); font-weight:700; font-size:21px; line-height:1.18; color:var(--donkerrood); margin:0 0 6px }
.op-rood .vak h3{ color:var(--creme) }
.vak .wie{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rood); margin:0 0 16px }
.vak p{ font-size:15.5px; line-height:1.55; color:var(--inkt-zacht); margin:0 0 .8em; max-width:none }
.vak p:last-child{ margin-bottom:0 }
.op-rood .vak p{ color:#FFFFFF }
.op-rood .vak .wie{ color:#F8C1B8 }
.op-rood .vak .vraag{ color:#F8C1B8 }
.op-rood .feiten span:last-child{ color:#FFFFFF }
.op-rood .lijst p{ color:#FFFFFF }
.vak .vraag{ font-family:var(--serif); font-style:italic; font-size:16.5px; color:var(--rood) }

/* twee kolommen naast elkaar */
.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5.5vw,72px); align-items:start }
@media (max-width:840px){ .duo{ grid-template-columns:1fr } }

/* --------------------------------------------------------------------------
   Feitenregels
   -------------------------------------------------------------------------- */
.feiten{ list-style:none; margin:32px 0 0; padding:0; max-width:none }
.feiten li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--lijn); font-size:16px;
}
.feiten li:first-child{ border-top:1px solid var(--lijn) }
.feiten .getal{
  font-family:var(--serif); font-weight:700; color:var(--roze);
  font-size:22px; font-variant-numeric:tabular-nums; min-width:3.2em;
}
.op-rood .feiten li{ border-color:rgba(232,73,110,.3) }

/* speelkaart-accent: klein ruit-teken als scheiding */
.ruit{ text-align:center; color:var(--roze); font-size:15px; letter-spacing:.6em; margin:0; padding:8px 0 }
.ruit::before{ content:"\2666 \2666 \2666" }

/* --------------------------------------------------------------------------
   Voet
   -------------------------------------------------------------------------- */
.voet{ background:var(--donkerrood); color:var(--mauve-licht); padding:60px 0 38px; font-size:14.5px; position:relative; overflow:hidden }
.voet::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:clamp(28px,4vw,58px);
  background:repeating-linear-gradient(to right,var(--roze) 0 3px,transparent 3px 7px,var(--roze) 7px 9px,transparent 9px 16px);
  opacity:.85;
}
.voet .mid{ position:relative; z-index:2 }
.voet a{ color:var(--mauve-licht); text-decoration:none }
.voet a:hover{ color:var(--roze-licht) }
.voet .kolommen-voet{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:34px; padding-bottom:36px; border-bottom:1px solid rgba(232,73,110,.3) }
.voet h4{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--roze-licht); margin:0 0 15px }
.voet ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px }
.voet .naam{ font-family:var(--serif); font-size:25px; color:var(--creme); margin:0 0 10px }
.voet .naam b{ color:var(--roze-licht) }
.voet .onder{ padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:12.5px; color:var(--mauve) }


/* ==========================================================================
   Het logo — bergmerk + SMART in gespatieerde Raleway + girls in Playfair
   ========================================================================== */
.merk{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; line-height:1 }
.merk .berg{ width:26px; height:auto; flex:none }
.merk .woord{ display:inline-flex; align-items:baseline; gap:.24em }
.merk .smart{
  font-family:var(--sans); font-weight:400; font-size:20px;
  letter-spacing:.30em; color:var(--donkerrood); text-transform:uppercase;
}
.merk .girls{
  font-family:var(--serif); font-weight:700; font-size:23px;
  color:var(--roze); letter-spacing:-.005em;
}
.op-rood .merk .smart, .voet .merk .smart{ color:var(--creme) }
.op-rood .merk .girls, .voet .merk .girls{ color:var(--roze) }
.merk.groot .smart{ font-size:30px } .merk.groot .girls{ font-size:34px } .merk.groot .berg{ width:38px }

/* ==========================================================================
   Merkfilter over foto's — warm roze of licht oud geel, zoals in het merkboek
   ========================================================================== */
.beeld{
  position:relative; overflow:hidden; display:block; background:var(--perzik);
  border:1px solid var(--lijn);
}
.beeld img{ display:block; width:100%; height:100%; object-fit:cover }

/* standaard: het beeld blijft leesbaar, met een warme merkzweem */
.beeld::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(86,15,16,.05), rgba(86,15,16,.20));
  mix-blend-mode:multiply;
}

/* echte duotoon voor de titelbeelden: schaduwen donkerrood, lichten perzik */
.beeld.duo img{ filter:contrast(1.04) }
.beeld.duo::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:var(--donkerrood); mix-blend-mode:lighten;
}
.beeld.duo::after{
  background:var(--perzik); mix-blend-mode:darken; z-index:2;
}
.beeld.oranje-duo::before{ background:#7A2A17 }
.beeld.oranje-duo::after{ background:var(--oranje) }

/* vaste beeldverhoudingen, zodat rijen uitlijnen */
.beeld.staand{ aspect-ratio:3/4 }
.beeld.liggend{ aspect-ratio:3/2 }
.beeld.breed{ aspect-ratio:16/7 }
.beeld.zacht::after{ background:linear-gradient(180deg, rgba(86,15,16,.03), rgba(86,15,16,.12)) }

/* ==========================================================================
   Informatieblok — beige vlak met roze streep erboven
   ========================================================================== */
.blok-beige{ background:var(--perzik); padding:24px 26px 26px; border-top:3px solid var(--roze); margin-top:0 }
.blok-beige h4{ font-family:var(--serif); font-weight:700; font-size:20px; color:var(--donkerrood); margin:0 0 8px }
.blok-beige p{ font-size:15.5px; line-height:1.55; color:var(--donkerrood); margin:0 0 .7em; max-width:none }
.blok-beige p:last-child{ margin-bottom:0 }
.blokken{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:38px }

/* ==========================================================================
   Het echte logo (Giny Hupkens): bergmerk met penseelstreek + smartgirls
   ========================================================================== */
.merk{ display:block; line-height:0; text-decoration:none }
.merk img{ width:clamp(112px,13vw,142px); height:auto }
.merk.staand img{ width:clamp(90px,10vw,120px) }
.voet .merk img{ width:clamp(120px,14vw,150px) }

/* ==========================================================================
   Columndetails van Annemarie van Gaal (Joanne Vis)
   ========================================================================== */

/* lopende koppen boven de pagina */
.loper{
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--rood);
  padding-bottom:22px; margin-bottom:0; max-width:none;
}
.op-rood .loper{ color:#F8C1B8 }

/* verticale haarlijnen tussen de tekstkolommen */
.kolommen{ column-rule:1px solid var(--lijn) }
.kolommen.drie{ column-count:3 }
@media (max-width:980px){ .kolommen.drie{ column-count:2 } }
@media (max-width:720px){ .kolommen.drie{ column-count:1 } }

/* de roze penseelstreek die tekst markeert */
.streep-roze{
  background-image:linear-gradient(rgba(246,82,117,.55), rgba(246,82,117,.55));
  background-size:100% .60em;
  background-position:0 .56em;
  background-repeat:no-repeat;
  padding:0 .14em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.op-rood .streep-roze{ background-image:linear-gradient(rgba(246,82,117,.55), rgba(246,82,117,.55)) }

/* het grote nummer met schuine streep, zoals 2022 / 03 */
.nummer{
  font-family:var(--serif); color:var(--roze-kop); line-height:.9;
  font-size:clamp(46px,6vw,74px); font-weight:400; margin:0 0 22px; max-width:none;
}
.nummer .jaar{ font-size:.42em; vertical-align:super; letter-spacing:.02em }
.nummer .schuin{ font-style:italic; padding:0 .04em }

/* zijkolom met inleiding, zoals links in de column */
.zijkolom{
  font-family:var(--serif); font-size:16.5px; line-height:1.5; color:var(--inkt-zacht);
  max-width:26ch;
}
.zijkolom b{ color:var(--roze-kop); font-weight:700 }

/* naamblok onder een bijdrage */
.naamblok{ margin-top:26px }
.naamblok .wie{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--donkerrood); margin:0 }
.naamblok .rol{ font-family:var(--sans); font-size:12.5px; color:var(--roze-kop); margin:2px 0 0; max-width:34ch }

/* ==========================================================================
   De speelkaart — het merkelement uit de columns van Annemarie van Gaal
   ========================================================================== */
.kaart{
  position:relative;
  background:var(--creme-diep);
  border:1px solid var(--lijn);
  aspect-ratio:5/7;
  max-width:380px; width:100%;
  padding:30px 26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 0 rgba(86,15,16,.06), 0 14px 34px -22px rgba(86,15,16,.4);
}
.kaart .hoek{
  position:absolute;
  font-family:var(--serif); font-weight:700; color:var(--roze);
  font-size:19px; line-height:1; text-align:center;
}
.kaart .hoek.lb{ top:12px; left:14px }
.kaart .hoek.rb{ bottom:12px; right:14px; transform:rotate(180deg) }
.kaart .hoek span{ display:block; font-size:14px; margin-top:2px }
.kaart .paneel{
  background:var(--roze-licht);
  border:1px solid rgba(246,82,117,.55);
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:30px 24px; text-align:center;
}
.kaart .klein{
  font-family:var(--sans); font-size:9px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--rood); margin:0; max-width:none;
}
.kaart .spreuk{
  font-family:var(--serif); font-weight:700; color:var(--donkerrood);
  font-size:clamp(20px,2.6vw,27px); line-height:1.12; margin:0; max-width:none;
  text-transform:uppercase; letter-spacing:.01em;
}
.kaart .spreuk em{ font-style:italic; font-weight:400; text-transform:none; color:var(--rood) }
.kaart .vlam{ width:46px; height:auto; margin:2px auto }
.kaart-rij{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(30px,5vw,68px); align-items:center }
@media (max-width:840px){ .kaart-rij{ grid-template-columns:1fr } .kaart{ margin:0 auto } }

/* op donkerrode grond */
.op-rood .kaart{ background:var(--donkerrood-2); border-color:rgba(246,82,117,.4) }
.op-rood .kaart .paneel{ background:var(--donkerrood); border-color:rgba(246,82,117,.5) }
.op-rood .kaart .spreuk{ color:var(--creme) }
.op-rood .kaart .spreuk em{ color:var(--roze-licht) }
.op-rood .kaart .klein{ color:#FFFFFF }

/* ==========================================================================
   Quote-beeld — foto met merkfilter en een uitspraak in Playfair-kapitalen
   (zoals de posts van @smartgirls.nl)
   ========================================================================== */
.quotebeeld{
  position:relative; overflow:hidden; margin:0;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:clamp(420px,50vw,640px);
}
.quotebeeld img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.quotebeeld::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(86,15,16,.10) 0%, rgba(86,15,16,.28) 40%, rgba(86,15,16,.80) 100%),
             linear-gradient(rgba(246,82,117,.26), rgba(246,82,117,.26));
}
.quotebeeld figcaption{
  position:relative; z-index:2; text-align:center;
  padding:clamp(30px,5vw,58px) clamp(20px,5vw,52px);
  width:100%; max-width:min(90%, 660px);
}
.quotebeeld .aanhaling{
  font-family:var(--serif); font-weight:700; color:var(--roze);
  font-size:clamp(34px,5vw,58px); line-height:.6; display:block; margin-bottom:-.12em;
}
.quotebeeld .woorden{
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  color:var(--creme); font-size:clamp(21px,3.1vw,34px); line-height:1.16;
  letter-spacing:.005em; margin:0; max-width:none;
}
.quotebeeld .woorden b{ color:var(--roze); font-weight:700 }
.quotebeeld .merkje{ margin:20px auto 0; width:clamp(96px,11vw,124px) }
.quotebeeld .merkje img{ position:static; width:100%; height:auto; object-fit:contain }

/* ==========================================================================
   Losse aanbodblokken naast de ladder
   ========================================================================== */
.extra{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--lijn);
        border:1px solid var(--lijn); margin-top:34px }
@media (max-width:820px){ .extra{ grid-template-columns:1fr } }
.los{ background:var(--creme-diep); padding:30px clamp(22px,3.4vw,38px) }
.los .label{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rood); margin:0 0 12px }
.los h4{ font-family:var(--serif); font-weight:700; font-size:22px; color:var(--donkerrood); margin:0 0 8px }
.los p{ font-size:15.5px; line-height:1.55; color:var(--inkt-zacht); margin:0 0 16px; max-width:none }
.los a{ font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--donkerrood);
  border-bottom:2px solid var(--roze); padding-bottom:3px }
.los a:hover{ color:var(--roze-kop) }

/* ==========================================================================
   Pittiger — naar de posts van augustus 2026
   ========================================================================== */

/* koppen groter en zwaarder */
.kop{ font-size:clamp(42px, 7.4vw, 88px); letter-spacing:-.025em }
.kop-klein{ font-size:clamp(30px, 4.4vw, 50px) }
.titelblad .titel{ font-size:clamp(42px, 7.6vw, 96px); font-weight:600 }

/* de kapitalen-cursief-mix uit je posts:
   crème kapitalen, roze cursief kleine letters, en één woord in grote roze kapitalen */
.uitroep{
  font-family:var(--serif); line-height:1.02; margin:0;
  font-size:clamp(30px, 5.6vw, 68px); letter-spacing:-.01em; max-width:none;
}
.uitroep .kaps{ font-weight:700; text-transform:uppercase; color:var(--donkerrood); display:block }
.uitroep .cursief{ font-style:italic; font-weight:400; color:var(--roze-kop); display:block }
.uitroep .knal{ font-weight:700; text-transform:uppercase; color:var(--roze); display:block;
  font-size:1.22em; letter-spacing:-.02em }
.op-rood .uitroep .kaps{ color:var(--creme) }
.op-rood .uitroep .cursief{ color:#FFFFFF }
.op-rood .uitroep .knal{ color:var(--roze) }

/* zwaardere merkfilter, zoals je posts */
.beeld::after{ opacity:.78 }
.beeld.zacht::after{ opacity:.55 }
.beeld.geel::after{ opacity:.62 }

/* het quote-beeld donkerder en steviger */
.quotebeeld .woorden{ font-size:clamp(24px,3.6vw,42px); line-height:1.1 }
.quotebeeld::after{
  background:linear-gradient(to bottom, rgba(86,15,16,.30) 0%, rgba(86,15,16,.55) 40%, rgba(86,15,16,.92) 100%),
             linear-gradient(rgba(246,82,117,.34), rgba(246,82,117,.34));
}

/* statement dikker */
.statement{ font-size:clamp(26px,5vw,58px) }

.fotonaam{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mauve); margin:11px 0 0 }

/* volledig aanbod, per laag */
.lagen{ margin-top:34px; display:grid; gap:0 }
.laag{ border-top:2px solid var(--lijn); padding:22px 0 }
.laag:last-child{ border-bottom:2px solid var(--lijn) }
.laagkop{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:12px }
.laagnr{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--oranje) }
.laagkop h3{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.6vw,28px);
  color:var(--donkerrood); margin:0; flex:1 1 auto }
.laagprijs{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.14em;
  color:var(--roze); font-variant-numeric:tabular-nums }
table.aanbod{ width:100%; border-collapse:collapse }
table.aanbod th, table.aanbod td{ text-align:left; vertical-align:baseline;
  padding:8px 14px 8px 0; font-weight:400; border-bottom:1px solid var(--lijn) }
table.aanbod tr:last-child th, table.aanbod tr:last-child td{ border-bottom:0 }
table.aanbod th{ font-family:var(--sans); font-weight:600; font-size:15.5px;
  color:var(--donkerrood); width:34% }
table.aanbod td{ font-size:14.5px; color:var(--inkt-zacht) }
td.prijs{ text-align:right; white-space:nowrap; font-weight:600; color:var(--donkerrood);
  font-variant-numeric:tabular-nums; width:16%; padding-right:0 }
@media (max-width:640px){
  table.aanbod th{ width:auto; display:block; padding-bottom:2px; border-bottom:0 }
  table.aanbod td{ display:block; padding-top:0 }
  td.prijs{ text-align:left; padding-top:4px }
}

.badge{ display:inline-block; margin:28px auto 0; padding:7px 16px;
  border:1px solid var(--oranje); border-radius:2px;
  font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--oranje) }

/* --- wie is wie: portret boven in de kaart --- */
.vak.persoon{ padding-top:0 }
.vak .kopfoto{ display:block; position:relative; aspect-ratio:4/5; overflow:hidden;
  margin:0 -26px 22px; background:var(--donkerrood) }
.vak .kopfoto img{ display:block; width:100%; height:100%; object-fit:cover }
.vak .kopfoto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(86,15,16,0) 55%, rgba(86,15,16,.22)); pointer-events:none }
.vak.persoon .nr{ margin-bottom:10px }
.quote-open{ font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mauve) }
.goudkaart{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:34px; align-items:center; margin-top:44px }
.goudkaart img{ display:block; width:100%; height:auto }
@media (max-width:820px){
  .goudkaart{ grid-template-columns:1fr; gap:22px }
}

/* ==========================================================================
   Meer oranje — scherper naar de Instagram-posts, 29 augustus 2026
   Het oranje uit het Merkboek 2026 wordt hier tweede hoofdkleur naast roze.
   ========================================================================== */
:root{
  --oranje:       #F0875A;
  --oranje-diep:  #D65F2E;
  --oranje-zacht: #FBD9C4;
}
.oog{ color:var(--rood) }
.op-rood .oog, .titelblad .oog{ color:#F8C1B8 }
.knop{ background:var(--oranje-diep); border-color:var(--oranje-diep); color:var(--creme) }
.knop:hover{ background:var(--oranje); border-color:var(--oranje) }
.knop.leeg{ background:transparent; color:var(--oranje); border-color:var(--oranje) }
.knop.leeg:hover{ background:var(--oranje); color:var(--donkerrood) }
.badge{ border-color:var(--oranje); color:var(--oranje) }
.vak .nr{ color:var(--rood) }
.op-rood .vak .nr{ color:var(--oranje) }
.streep-boven{ border-top-color:var(--oranje-zacht) }
.uitroep .knal{ color:var(--oranje) }
.fotonaam{ color:var(--oranje-diep) }
.vak .wie{ color:var(--oranje-diep) }
.op-rood .vak .wie{ color:#F8C1B8 }
.vak .vraag{ color:var(--oranje-diep) }
.op-rood .vak .vraag{ color:#F8C1B8 }
.citaat cite{ color:var(--oranje-diep) }
.op-rood .citaat cite{ color:var(--oranje) }

/* --- taalschakelaar --- */
.taal{ display:inline-flex; flex:none; flex-shrink:0; gap:0; margin-left:14px; border:1px solid var(--oranje); border-radius:2px; overflow:hidden }
.taal a{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:7px 11px; color:var(--oranje-diep); background:transparent }
.taal a[aria-current="true"]{ background:var(--oranje-diep); color:var(--creme) }
.taal a:hover{ background:var(--oranje); color:var(--donkerrood) }
@media (max-width:820px){ .taal{ margin-left:0 } }

/* --- quotemuur --- */
.quotemuur{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px;
  background:var(--lijn); border:1px solid var(--lijn); margin-top:34px }
.quotemuur blockquote{ background:var(--creme); margin:0; padding:24px 22px 26px }
.quotemuur p{ font-family:var(--serif); font-size:17.5px; line-height:1.42; color:var(--donkerrood); margin:0 0 12px; max-width:none }
.quotemuur footer{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oranje-diep) }
.op-rood .quotemuur{ background:rgba(250,246,240,.18); border-color:rgba(250,246,240,.18) }
.op-rood .quotemuur blockquote{ background:var(--donkerrood) }
.op-rood .quotemuur p{ color:var(--creme) }
.op-rood .quotemuur footer{ color:var(--oranje) }