/* ─────────────────────────────────────────────────────────────
   Tjipke Meijer — huisstijl
   Volgt het brandbook, versie 1, augustus 2026
   ───────────────────────────────────────────────────────────── */

:root{
  --papier:#ECECEC;
  --papier-diep:#E3E3E2;
  --inkt:#1A1A1A;
  --tekst:#333333;
  --grijs:#6A6A6A;
  --accent:#8A2F66;
  --lijn:rgba(26,26,26,.14);
  --diep:#141414;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;

  /* oude namen blijven werken zodat bestaande regels niet breken */
  --bg:var(--papier);
  --bg-soft:var(--papier-diep);
  --fg:var(--inkt);
  --muted:var(--grijs);
  --line:var(--lijn);
  --font:var(--sans);
}

html{scroll-behavior:smooth}
body{
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ── Typografie ─────────────────────────────────────────────── */
h1,h2,h3,.serif{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.12;
}
h1{font-size:clamp(2.6rem,6.5vw,5rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
em{font-style:italic}

/* kleine labels blijven schreefloos en stil */
.sec-label,.eyebrow,.jaren,.detail,.meta,nav .links a,footer,.post-header .eyebrow{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.5;
}

/* ── Navigatie ──────────────────────────────────────────────── */
nav{background:rgba(236,236,236,.9);backdrop-filter:blur(10px);border-bottom:none}
nav .logo{font-family:var(--serif);font-weight:400;font-size:1.15rem;letter-spacing:.01em;text-transform:none}
nav .links a{color:var(--grijs);font-size:.78rem;text-transform:none;letter-spacing:.06em;font-weight:400}
nav .links a.active,nav .links a:hover{color:var(--inkt)}

/* ── Beeld: het beeld bepaalt het formaat ───────────────────── */
img{max-width:100%;height:auto}
.werk img,.work .ph,.serie .beeld img,.ig-cell .ph{
  object-fit:contain !important;
  transition:none !important;
}
.work:hover .ph,.serie:hover .beeld img,.ig-cell:hover .ph{transform:none !important}

/* ── Rust: geen bewegende interface ─────────────────────────── */
.reveal{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ── Knoppen ────────────────────────────────────────────────── */
.btn,.inquire-btn,.form-submit,.surprise-submit,.post-cta a{
  font-family:var(--sans);font-weight:500;letter-spacing:.08em;text-transform:none;
}

/* ── Taalwissel ─────────────────────────────────────────────── */
nav .links .lang-switch{
  position:relative;
  margin-left:.4rem;
  padding-left:.95rem;
  color:var(--grijs);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
}
nav .links .lang-switch::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:1px;height:.85em;margin-top:-.42em;
  background:var(--lijn);
}
nav .links .lang-switch:hover{color:var(--accent)}