:root{
  --bio-grond:#1b1610;
  --bio-grond-diep:#13100b;
  --bio-tegel:rgba(255,255,255,.045);
  --bio-tegel-aan:rgba(255,255,255,.09);
  --bio-tekst:#f4efe6;
  --bio-tekst-zacht:#b4ab9c;
  --bio-rand:rgba(255,255,255,.13);
  --bio-rand-aan:#a5822b;
  --bio-accent:#a5822b;
  --bio-accent-diep:#876b23;
  --bio-accent-op:#1b1610;
  --bio-kop:'Playfair Display',Georgia,'Times New Roman',serif;
  --bio-kop-gewicht:700;
  --bio-kop-breedte:normal;
  --bio-kop-spatie:-.01em;
  --bio-schrift:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --bio-hoek:0;
  --bio-breed:27.5rem;
}
/* Link in bio — de pagina achter de link in een Instagram- of TikTokprofiel.

   Dit is de bron voor de kantoren die KMW host. De kleuren en lettertypes
   staan hier NIET in: die komen per kantoor uit bio_data.stijl_van() en
   worden als :root-blok vóór dit bestand ingevoegd. Zo is er één stylesheet
   voor alle kantoren en toch een eigen gezicht per kantoor.

   Een kantoor dat zijn site zelf beheert (Monique) heeft een eigen kopie in
   zijn repo, mét het :root-blok erin. Wijzig je hier iets wezenlijks, loop
   die kopie dan na. */

/* =================================================================== romp */

*{box-sizing:border-box}

html{
  background:var(--bio-grond);
  /* 100% hoogte zodat de voet onderaan blijft op een korte pagina */
  min-height:100%;
}

body{
  margin:0;
  background:var(--bio-grond);
  color:var(--bio-tekst);
  font-family:var(--bio-schrift);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--bio-accent);outline-offset:3px}

.verborgen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* De iconenvoorraad bovenaan body hoort niet in beeld. */
.iconen{display:none}

/* De gouden haarlijn langs de bovenrand. Hij loopt over de volle breedte,
   ook op een brede telefoon of een desktop. */
body::before{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--bio-accent-diep),var(--bio-accent),var(--bio-accent-diep));
}

.bio{
  max-width:var(--bio-breed);
  margin:0 auto;
  padding:0 1.25rem 2rem;
}

/* =================================================================== kop */

.bio-kop{
  text-align:center;
  padding:2rem 0 0;
}

/* Begrenzen op bréédte én hoogte, niet op hoogte alleen. Een breed woordmerk
   en een gestapeld merk (icoon bóven de naam) zijn allebei gangbaar, en met
   een vaste hoogte wordt dat tweede een postzegel: bij een bijna vierkant
   logo gaat alle maat zitten in de hoogte die er niet is. Zo vindt elk logo
   zijn eigen formaat en blijft de verhouding intact. */
.bio-logo{
  width:auto;
  height:auto;
  max-width:min(58%,220px);
  max-height:88px;
  margin:0 auto 2rem;
  opacity:.9;
}

/* Het woordmerk als tekst, voor merken zonder logobestand: gespatieerde
   kapitalen in de koplettersoort. Veel makelaarsmerken zijn precies dat. */
.bio-merk{
  margin:0 0 2rem;
  font-family:var(--bio-kop);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bio-tekst);
  opacity:.85;
}

/* Het portret. Vierkant met een gouden rand erbuiten, zodat het bij de
   website past en niet bij de ronde foto's van elk ander bioschermpje. */
.bio-portret-vak{
  width:7.5rem;
  height:7.5rem;
  margin:0 auto 1.4rem;
  padding:5px;
  border:1px solid var(--bio-rand);
  background:var(--bio-tegel);
}
.bio-portret{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  background:var(--bio-tegel);
}

.bio-naam{
  font-family:var(--bio-kop);
  font-weight:var(--bio-kop-gewicht,700);
  font-stretch:var(--bio-kop-breedte,normal);
  font-size:clamp(1.75rem,8vw,2.3rem);
  line-height:1.06;
  letter-spacing:var(--bio-kop-spatie,-.01em);
  text-wrap:balance;
  margin:0 0 .6rem;
}

/* Eén woord in de schreefletter, groter en in de accentkleur. Dat is de
   handtekening van het merk; de kop blijft verder gewoon de kop. De lage
   regelhoogte houdt de regelafstand gelijk, en de extra onderruimte vangt
   op dat staartletters anders onder de regel uitsteken. */
.bio-naam .bio-serif{
  font-family:var(--bio-schrift);
  font-weight:500;
  font-size:1.16em;
  font-stretch:normal;
  letter-spacing:-.015em;
  line-height:.78;
  color:var(--bio-accent);
}
.bio-naam:has(.bio-serif){padding-bottom:.14em}

/* Functie en werkgebied, in kleinkapitaal met het accent ertussen. */
/* Het oogje: gespatieerde kapitalen in de accentkleur, met een streepje
   ervoor. Op een gecentreerde pagina staat dat streepje aan beide kanten,
   anders hangt de regel scheef. */
.bio-rol{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  font-family:var(--bio-kop);
  font-size:.7rem;
  font-weight:700;
  font-stretch:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bio-accent);
}
/* Boven de kop hoort lucht eronder, onder de kop juist erboven. */
.bio-rol:has(+ .bio-naam){margin-bottom:1rem}
.bio-naam + .bio-rol{margin-top:.1rem}

.bio-rol::before,.bio-rol::after{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  flex:none;
  opacity:.7;
}
.bio-rol .deel + .deel::before{
  content:"";
  display:inline-block;
  width:3px;height:3px;
  margin:0 .6rem .15rem;
  background:currentColor;
  vertical-align:middle;
}
.bio-rol .deel:empty{display:none}

.bio-intro{
  margin:1.25rem auto 0;
  max-width:24rem;
  font-size:.95rem;
  color:var(--bio-tekst-zacht);
}
.bio-intro:empty{display:none}

/* ============================================================ hoofdknop */

.bio-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:1.9rem 0 1.5rem;
  padding:1.05rem 1.25rem;
  border:1px solid var(--bio-accent);
  border-radius:var(--bio-hoek);
  background:var(--bio-accent);
  color:var(--bio-accent-op);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .15s ease;
}
.bio-cta:hover{background:var(--bio-accent-diep);border-color:var(--bio-accent-diep)}
.bio-cta:active{transform:translateY(1px)}
.bio-cta svg{width:17px;height:17px;flex:none}
.bio-cta[hidden]{display:none}

/* =============================================================== knoppen */

.bio-lijst{display:flex;flex-direction:column;gap:.6rem}

.bio-link{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.95rem 1.1rem;
  border:1px solid var(--bio-rand);
  border-radius:var(--bio-hoek);
  background:var(--bio-tegel);
  color:var(--bio-tekst);
  text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .15s ease;
}
.bio-link:hover{
  border-color:var(--bio-rand-aan);
  background:var(--bio-tegel-aan);
}
.bio-link:active{transform:translateY(1px)}

/* Het icoontje links. Vast vierkant, zodat alle titels op één lijn
   beginnen, ook als het ene icoon breder tekent dan het andere. */
.bio-link .icoon{
  width:1.4rem;height:1.4rem;flex:none;
  color:var(--bio-accent);
}
/* Of het icoon een lijntekening of een vlak is, staat op het symbool zelf
   in bio.html. Hier alleen de maat; de kleur erft het via color hierboven. */
.bio-link .icoon svg{width:100%;height:100%;display:block}

.bio-link .tekst{flex:1 1 auto;min-width:0}
.bio-link .titel{
  display:block;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
}
.bio-link .onder{
  display:block;
  font-size:.8rem;
  line-height:1.45;
  color:var(--bio-tekst-zacht);
  margin-top:.1rem;
}
.bio-link .onder:empty{display:none}

/* Het pijltje rechts schuift mee bij hover. */
.bio-link .pijl{
  width:1rem;height:1rem;flex:none;
  color:var(--bio-tekst-zacht);
  transition:transform .25s ease,color .25s ease;
}
.bio-link:hover .pijl{transform:translateX(3px);color:var(--bio-accent)}

/* Zolang de pagina laadt of als er niets in de database staat. */
.bio-leeg{
  padding:1.5rem 1.1rem;
  border:1px dashed var(--bio-rand);
  color:var(--bio-tekst-zacht);
  font-size:.9rem;
  text-align:center;
}

/* ========================================================= snelle rij */

/* Bellen, WhatsApp en mail naast elkaar. Dit zijn de drie dingen waarvoor
   iemand vanaf Instagram op een bioknop drukt, dus ze staan apart. */
.bio-snel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-top:1.5rem;
}
.bio-snel:empty{display:none}

.bio-snel a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  padding:.9rem .4rem;
  border:1px solid var(--bio-rand);
  border-radius:var(--bio-hoek);
  background:var(--bio-tegel);
  color:var(--bio-tekst);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .25s ease,background .25s ease;
}
.bio-snel a:hover{border-color:var(--bio-rand-aan);background:var(--bio-tegel-aan)}
.bio-snel a svg{width:1.25rem;height:1.25rem;color:var(--bio-accent)}

/* ================================================================= voet */

.bio-voet{
  margin:2.5rem -1.25rem -2rem;
  padding:1.75rem 1.25rem 2rem;
  background:var(--bio-grond-diep);
  border-top:1px solid var(--bio-rand);
  text-align:center;
}

.bio-keurmerken{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  flex-wrap:wrap;
  margin:0 0 1.25rem;
}
/* De keurmerken staan er in hun eigen kleuren. Ze grijs maken of door een
   filter halen werkt niet: het zijn volvlakse logo's met een eigen
   achtergrond, en die worden daar onleesbare blokjes van. Klein en met een
   beetje demping blijven ze een keurmerk en nemen ze de pagina niet over. */
.bio-keurmerken img{
  height:26px;width:auto;
  opacity:.8;
  transition:opacity .25s ease;
}
.bio-keurmerken img:hover{opacity:1}

.bio-voet-link{
  font-size:.82rem;
  color:var(--bio-tekst-zacht);
  text-decoration:none;
  border-bottom:1px solid var(--bio-rand);
  padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;
}
.bio-voet-link:hover{color:var(--bio-accent);border-bottom-color:var(--bio-accent)}

/* ============================================================== beweging */

/* De knoppen komen één voor één binnen. Puur sier: zonder JavaScript en met
   een uitgezette voorkeur voor beweging staat alles er meteen. Dezelfde twee
   klassenamen als op de rest van de site. */
@media (prefers-reduced-motion:no-preference){
  .js .komop{opacity:0;transform:translateY(10px)}
  .js .komop.zichtbaar{opacity:1;transform:none;
    transition:opacity .5s ease,transform .5s ease}
}

/* ================================================================ breed */

/* Op een desktop blijft het één kolom in het midden; dit is een
   telefoonpagina die iemand per ongeluk op een laptop opent. */
@media (min-width:40rem){
  .bio{padding-top:1rem;padding-bottom:3rem}
  .bio-kop{padding-top:3rem}
}