/* Capello Haarmode — stijl "Het mededelingenbord" (ontwerp C) */

/* ---------- Fonts (lokaal, geen externe requests) ---------- */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

/* ---------- Tokens & basis ---------- */
:root{
  --salie:#C9C9A6;
  --papier:#F5F2E9;
  --inkt:#1C1B17;
  --goud:#A5802F;
  --roze:#D9A090;
  --zwart:#141310;
  --logo-goud:#C9A24A;
  --rand:4px solid var(--inkt);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  background:var(--salie);
  color:var(--inkt);
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,
.skip:focus-visible{
  outline:3px solid var(--inkt);
  outline-offset:3px;
  border-radius:2px;
}
.donker a:focus-visible{outline-color:var(--logo-goud)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--papier);color:var(--inkt);
  padding:.75rem 1.25rem;font-weight:700;z-index:10;
}
.skip:focus{left:.5rem;top:.5rem}

.kader{
  width:100%;
  max-width:1020px;
  margin-inline:auto;
  padding-inline:clamp(1rem, 4vw, 2rem);
}

/* ---------- Topbalk ---------- */
.topbalk{
  background:var(--zwart);
  border-bottom:3px solid var(--goud);
}
.topbalk .kader{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;
  padding-block:.6rem;
}
.topbalk img{width:clamp(96px,26vw,130px);height:auto}
.topbalk .bel{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  padding:.35rem .9rem;
  border:2px solid var(--logo-goud);
  border-radius:3px;
  color:var(--logo-goud);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- Masthead ---------- */
.masthead{
  text-align:center;
  padding-block:clamp(1.75rem,5vw,3rem) clamp(1rem,3vw,1.5rem);
}
.masthead h1{
  font-weight:900;
  font-size:clamp(1.6rem,5.5vw,2.4rem);
  letter-spacing:.015em;
  line-height:1.1;
  text-transform:uppercase;
}
.masthead p{
  margin-top:.4rem;
  font-weight:500;
  font-size:clamp(1rem,3vw,1.15rem);
}
.masthead .intro{
  max-width:56ch;
  margin-inline:auto;
  margin-top:.75rem;
  font-weight:400;
  font-size:1rem;
}
.hoofdnav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem;
  padding-block:.75rem .25rem;
}
.hoofdnav a{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:.4rem 1.1rem;
  background:var(--papier);
  border:2px solid var(--inkt);
  border-radius:3px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
}

/* ---------- Schaarlijn (signatuur) ---------- */
.schaarlijn{
  display:block;
  width:min(420px,78%);
  margin:1rem auto 0;
  height:auto;
}

/* ---------- Borden ---------- */
.borden{
  display:grid;
  gap:clamp(1.25rem,3vw,1.75rem);
  padding-block:clamp(1.5rem,4vw,2.5rem) 0;
}
@media (min-width:820px){
  .borden{grid-template-columns:1fr 1fr;align-items:start}
}
.bord{
  position:relative;
  background:var(--papier);
  border:var(--rand);
  border-radius:2px;
  padding:clamp(1.4rem,4vw,2rem) clamp(1.1rem,3.5vw,1.75rem);
  box-shadow:7px 7px 0 0 rgba(28,27,23,.18);
}
.bord::before{
  content:"";
  position:absolute;inset:7px;
  border:1px solid var(--goud);
  border-radius:1px;
  pointer-events:none;
}
.bord h2{
  font-family:"Anton","Archivo",sans-serif;
  font-weight:400;
  font-size:clamp(1.8rem,6vw,2.4rem);
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
  line-height:1.1;
}
.bord .kopstreep{
  width:52px;height:4px;
  background:var(--goud);
  margin:.7rem auto 1.4rem;
  border-radius:2px;
}
.bord dl{font-variant-numeric:tabular-nums}
.rij{
  display:flex;align-items:baseline;gap:.6rem;
  padding-block:.52rem;
}
.rij + .rij{border-top:1px solid rgba(28,27,23,.14)}
.rij dt{font-weight:500;font-size:1.02rem}
.rij dd{font-weight:700;font-size:1.02rem;white-space:nowrap}
.rij .stippel{
  flex:1;
  border-bottom:2px dotted var(--goud);
  transform:translateY(-4px);
  min-width:1.25rem;
}
.rij .dicht{
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.voetnoot{
  margin-top:1.1rem;
  font-size:.92rem;
  font-weight:500;
  text-align:center;
}

/* ---------- Bel-strook ---------- */
.belstrook{
  display:block;
  margin-top:clamp(1.5rem,4vw,2.25rem);
  background:var(--roze);
  border:var(--rand);
  border-radius:2px;
  box-shadow:7px 7px 0 0 rgba(28,27,23,.18);
  text-decoration:none;
  text-align:center;
  padding:clamp(1.25rem,4vw,1.75rem) 1rem;
}
.belstrook .label{
  display:block;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.belstrook .nummer{
  display:block;
  margin-top:.3rem;
  font-weight:900;
  font-size:clamp(1.9rem,8vw,2.9rem);
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:6px;
}

/* ---------- Fotorij ---------- */
.fotorij{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.7rem,2vw,1rem);
  padding-block:clamp(2rem,5vw,3rem) 0;
  list-style:none;
}
@media (min-width:820px){
  .fotorij{grid-template-columns:repeat(4,1fr)}
}
.fotorij img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border:3px solid var(--zwart);
  border-radius:2px;
}

/* ---------- Adres ---------- */
.adreswrap{padding-block:clamp(2rem,5vw,3rem) clamp(2.5rem,6vw,3.5rem)}
.adres{text-align:center}
.adres address{
  font-style:normal;
  font-weight:700;
  font-size:clamp(1.25rem,4.5vw,1.7rem);
  line-height:1.35;
}
.adres .plaats{font-weight:500}
.knoppen{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem;
  margin-top:1.4rem;
}
.knop{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:.6rem 1.4rem;
  border-radius:3px;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.knop-vol{
  background:var(--inkt);
  color:var(--papier);
  border:2px solid var(--inkt);
}
.knop-lijn{
  background:transparent;
  color:var(--inkt);
  border:2px solid var(--inkt);
}

/* ---------- Footer ---------- */
footer{
  background:var(--zwart);
  color:var(--papier);
  border-top:3px solid var(--goud);
}
footer .kader{
  padding-block:1.5rem;
  text-align:center;
  font-size:.95rem;
  font-weight:500;
}
footer p + p{margin-top:.35rem}
footer a{
  color:var(--logo-goud);
  font-weight:700;
  text-decoration:none;
  text-underline-offset:4px;
  font-variant-numeric:tabular-nums;
  display:inline-block;
  padding:.5rem .25rem;
}
footer a:hover{text-decoration:underline}

@media (hover:hover){
  .hoofdnav a:hover,
  .knop-lijn:hover{background:var(--inkt);color:var(--papier)}
  .knop-vol:hover{background:var(--zwart)}
  .topbalk .bel:hover{background:var(--logo-goud);color:var(--zwart)}
  .belstrook:hover .nummer{text-decoration-thickness:4px}
}