/* =========================================================================
   Kretahuis — variant "Claude Design" · Kalk en Kobalt
   Grieks-ambachtelijk design system: kalkwit gepleisterd canvas met korrel,
   aegeïsch kobalt als geschilderd accent, olijf als tweede ambachtskleur.
   Typografie: Cardo (klassieke boekserif, display) + Alegreya Sans (tekst)
   + Caveat (handschrift, alleen voor foto-bijschriften en de gastenbrief).
   Kernprincipe: crawlfoto's zijn klein (150-400 px) en worden NOOIT
   opgerekt — ze verschijnen als artefacten: albumkaders met kobaltrand
   (een knipoog naar de donkerblauwe fotorandjes van de oude site),
   polaroids met plakband, en een donker contactvel.
   Deze tokens zijn 1-op-1 de bron voor de site (variant-cd/site/css/
   tokens.css is exact dit bestand).
   ========================================================================= */

:root {
  /* ---------- Kalk (gepleisterd wit, de basis) ---------- */
  --kalk-50:  #fbf8f0;   /* lichtste vlak, kaarten en mat-passe-partout */
  --kalk-100: #f4efe2;   /* basis canvas                                */
  --kalk-200: #eae2cd;   /* verdiepte vlakken                           */
  --kalk-300: #dcd2b7;   /* randzones, tabelstrepen                     */
  --wit:      #fdfcf8;   /* polaroid- en matwit                         */

  /* ---------- Kobalt (aegeïsch blauw, geschilderd accent) ---------- */
  --kobalt-900: #0f2350; /* diepste: contactvel, footer                 */
  --kobalt-800: #16336e; /* fotorand, koppen op licht                   */
  --kobalt-700: #1d4287; /* primair: knoppen, links                     */
  --kobalt-500: #3a63a8; /* hover en zachte accenten                    */
  --kobalt-100: #dde6f2; /* tintvlak                                    */

  /* ---------- Olijf (tweede ambachtskleur, spaarzaam) ---------- */
  --olijf-700: #4f5530;
  --olijf-500: #6d743f;
  --olijf-200: #d8dabb;
  --olijf-100: #ecedd9;

  /* ---------- Inkt ---------- */
  --inkt:       #2b3038; /* tekst op licht                              */
  --inkt-zacht: #5d6472; /* secundaire tekst op licht                   */
  --kalk-tekst: #f3f1e8; /* tekst op kobalt                             */
  --kalk-tekst-zacht: rgba(243, 241, 232, 0.74);

  /* ---------- Lijnen ---------- */
  --lijn:        rgba(43, 48, 56, 0.18);
  --lijn-zacht:  rgba(43, 48, 56, 0.10);
  --lijn-kobalt: rgba(22, 51, 110, 0.28);
  --lijn-donker: rgba(243, 241, 232, 0.22);

  /* ---------- Typografie ---------- */
  --font-display: "Cardo", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-tekst:   "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", "Segoe Script", cursive;

  --maat-display: clamp(2.5rem, 5.6vw, 4.3rem);
  --maat-kop:     clamp(1.75rem, 3.4vw, 2.6rem);
  --maat-subkop:  clamp(1.22rem, 1.9vw, 1.5rem);
  --maat-tekst:   1.06rem;
  --maat-klein:   0.875rem;

  /* ---------- Vormtaal: hoekig ambacht, geen pillen ---------- */
  --radius-tegel: 2px;    /* knoppen en chips: geglazuurde tegel        */
  --radius-kaart: 3px;    /* kaarten: bijna scherp, zoals een passe-partout */
  --radius-veld:  2px;

  /* ---------- Diepte: plat, met een dun voelbaar randje ---------- */
  --schaduw-mat:   0 1px 0 rgba(43, 48, 56, 0.05), 0 14px 30px -18px rgba(15, 35, 80, 0.35);
  --schaduw-zweef: 0 2px 0 rgba(43, 48, 56, 0.05), 0 24px 48px -20px rgba(15, 35, 80, 0.42);

  /* ---------- Korrel (kalkpleister) ---------- */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.19 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");

  /* ---------- Meander (sleutelmotief, dun en spaarzaam) ---------- */
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M1 11 L1 1 L17 1 L17 7 L7 7 L7 4.5 L12 4.5' fill='none' stroke='%2316336e' stroke-width='1.4'/%3E%3C/svg%3E");
  --meander-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M1 11 L1 1 L17 1 L17 7 L7 7 L7 4.5 L12 4.5' fill='none' stroke='%23f3f1e8' stroke-width='1.4' opacity='0.55'/%3E%3C/svg%3E");

  /* ---------- Ritme ---------- */
  --sectie-y: clamp(4.5rem, 9vw, 7.5rem);
  --kolom:    71rem;
}

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cardo-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cardo-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cardo"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cardo-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/alegreya-sans-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/alegreya-sans-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/alegreya-sans-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/alegreya-sans-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/caveat-500-normal.woff2") format("woff2");
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--kalk-100);
  background-image: var(--korrel);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--kobalt-700); color: var(--kalk-tekst); }
a { color: var(--kobalt-700); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--kobalt-500); }

/* ---------- Display en koppen ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-display);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--kobalt-800);
  margin: 0;
}
.kop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-kop);
  line-height: 1.12;
  text-wrap: balance;
  color: var(--kobalt-800);
  margin: 0;
}
.subkop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-subkop);
  line-height: 1.25;
  color: var(--inkt);
  margin: 0;
}
.op-donker .display, .op-donker .kop, .op-donker .subkop { color: var(--kalk-tekst); }

/* Kicker: klein kapitaal met kobalt-tegeltje ervoor */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--kobalt-700);
}
.kicker::before {
  content: "";
  width: 0.55em; height: 0.55em;
  background: var(--kobalt-700);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px rgba(253, 252, 248, 0.35);
}
.op-donker .kicker { color: var(--kalk-tekst-zacht); }
.op-donker .kicker::before { background: var(--kalk-tekst); }
.kicker-olijf { color: var(--olijf-700); }
.kicker-olijf::before { background: var(--olijf-500); }

/* Handschrift (alleen bijschriften en gastenbrief) */
.schrift {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--inkt-zacht);
}

/* ---------- Meanderlijn (sectiescheiding, spaarzaam) ---------- */
.meander {
  height: 12px;
  background-image: var(--meander);
  background-repeat: repeat-x;
  background-position: left center;
  border: 0;
  margin: 0;
  opacity: 0.75;
}
.meander-licht { background-image: var(--meander-licht); }
.meander-kort { width: 132px; }

/* ---------- Knoppen: geglazuurde tegels ---------- */
.knop {
  display: inline-block;
  padding: 0.78rem 1.5rem;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-tegel);
  border: 1px solid var(--kobalt-900);
  background: var(--kobalt-700);
  color: var(--kalk-tekst);
  box-shadow: inset 0 0 0 2px rgba(253, 252, 248, 0.22), 0 2px 0 rgba(15, 35, 80, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.knop:hover { background: var(--kobalt-800); color: var(--kalk-tekst); transform: translateY(-1px); }
.knop:active { transform: translateY(0); box-shadow: inset 0 0 0 2px rgba(253, 252, 248, 0.22); }
.knop-omtrek {
  background: transparent;
  color: var(--kobalt-700);
  border: 1px solid var(--kobalt-700);
  box-shadow: inset 0 0 0 2px rgba(29, 66, 135, 0.08);
}
.knop-omtrek:hover { background: var(--kobalt-100); color: var(--kobalt-800); }
.knop-olijf {
  background: var(--olijf-500);
  border-color: var(--olijf-700);
  box-shadow: inset 0 0 0 2px rgba(253, 252, 248, 0.22), 0 2px 0 rgba(79, 85, 48, 0.3);
}
.knop-olijf:hover { background: var(--olijf-700); }
.op-donker .knop-omtrek { color: var(--kalk-tekst); border-color: var(--lijn-donker); box-shadow: none; }
.op-donker .knop-omtrek:hover { background: rgba(243, 241, 232, 0.1); color: var(--kalk-tekst); }

/* Etiket: klein handwerk-label */
.etiket {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-tegel);
  background: var(--kobalt-100);
  color: var(--kobalt-800);
  border: 1px solid var(--lijn-kobalt);
}
.etiket-olijf { background: var(--olijf-100); color: var(--olijf-700); border-color: var(--olijf-200); }
.etiket-kalk { background: var(--kalk-50); color: var(--inkt); border-color: var(--lijn); }

/* ---------- Kaarten ---------- */
.kaart {
  background: var(--kalk-50);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-mat);
  overflow: hidden;
}
.kaart-kobalt {
  background: var(--kobalt-900);
  background-image: var(--korrel);
  color: var(--kalk-tekst);
  border-color: rgba(15, 35, 80, 0.5);
}
.kaart-olijf { background: var(--olijf-100); border-color: var(--olijf-200); }

/* Feitenlijst met tegel-vinkje */
.feiten { list-style: none; margin: 0; padding: 0; }
.feiten li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.7rem;
}
.feiten li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.62em; height: 0.62em;
  background: var(--olijf-500);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px rgba(253, 252, 248, 0.4);
}

/* Citaat: Cardo cursief met groot aanhalingsteken */
.citaat {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--inkt);
  margin: 0;
  padding: 0 0 0 2.2rem;
}
.citaat::before {
  content: "\201C";
  position: absolute;
  left: 0; top: -0.28em;
  font-size: 3.1rem;
  font-style: normal;
  line-height: 1;
  color: var(--kobalt-500);
}
.citaat-bron {
  display: block;
  margin-top: 0.8rem;
  padding-left: 2.2rem;
  font-family: var(--font-tekst);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olijf-700);
}

/* Scoretegel: het cijfer als geglazuurd tegeltje */
.score-tegel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 5.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--kobalt-700);
  color: var(--kalk-tekst);
  border: 1px solid var(--kobalt-900);
  border-radius: var(--radius-tegel);
  box-shadow: inset 0 0 0 2px rgba(253, 252, 248, 0.22), var(--schaduw-mat);
  text-align: center;
}
.score-tegel strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}
.score-tegel span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kalk-tekst-zacht);
}

/* =========================================================================
   FOTO-ARTEFACTEN — kleine crawlfoto's nooit oprekken.
   img krijgt altijd zijn native breedte via het width-attribuut;
   max-width: 100% laat hem alleen KRIMPEN op smalle schermen.
   ========================================================================= */

/* Albumkader: wit passe-partout + dunne kobaltrand (erfstuk van de oude site) */
.albumkader {
  display: inline-block;
  background: var(--wit);
  padding: 0.65rem;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-mat);
  max-width: 100%;
}
.albumkader img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid var(--kobalt-800);
}
.albumkader figcaption {
  margin-top: 0.45rem;
  text-align: center;
}

/* Polaroid: gedraaid, plakband, handschrift-onderschrift */
.polaroid {
  display: inline-block;
  background: var(--wit);
  padding: 0.55rem 0.55rem 0.6rem;
  border: 1px solid var(--lijn-zacht);
  box-shadow: var(--schaduw-mat);
  transform: rotate(var(--draai, -2deg));
  position: relative;
  max-width: 100%;
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -0.7rem; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 4.4rem; height: 1.35rem;
  background: rgba(234, 226, 205, 0.85);
  border: 1px solid rgba(43, 48, 56, 0.08);
  box-shadow: 0 1px 2px rgba(43, 48, 56, 0.08);
}
.polaroid img { display: block; max-width: 100%; height: auto; }
.polaroid figcaption {
  padding-top: 0.35rem;
  text-align: center;
}

/* Contactvel: donker kobalt vel met kleine afdrukken op wit randje */
.contactvel {
  background: var(--kobalt-900);
  background-image: var(--korrel);
  border-radius: var(--radius-kaart);
  border: 1px solid rgba(15, 35, 80, 0.6);
  box-shadow: var(--schaduw-zweef);
  padding: clamp(1.2rem, 3vw, 2.2rem);
}
.contactvel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: flex-start;
  justify-content: center;
}
.contactvel figure { margin: 0; text-align: center; }
.contactvel img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 4px solid var(--wit);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55);
}
.contactvel figcaption {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kalk-tekst-zacht);
}

/* Papier-artefact: gescand document (gastenbrief, plattegrond, knipsel) */
.papier {
  display: inline-block;
  background: var(--wit);
  padding: 0.8rem;
  border: 1px solid var(--lijn-zacht);
  box-shadow: var(--schaduw-mat);
  transform: rotate(var(--draai, 1deg));
  max-width: 100%;
}
.papier img { display: block; max-width: 100%; height: auto; }

/* ---------- Tarieventabel: echte HTML-tabel ---------- */
.tarieven-tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--kalk-50);
  border: 1px solid var(--lijn);
  font-variant-numeric: tabular-nums;
}
.tarieven-tabel caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.7rem;
  font-size: var(--maat-klein);
  color: var(--inkt-zacht);
}
.tarieven-tabel th, .tarieven-tabel td {
  padding: 0.68rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--lijn-zacht);
}
.tarieven-tabel thead th {
  background: var(--kobalt-800);
  color: var(--kalk-tekst);
  font-family: var(--font-tekst);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kobalt-900);
}
.tarieven-tabel tbody th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--kobalt-800);
}
.tarieven-tabel tbody tr:nth-child(even) { background: var(--kalk-100); }
.tarieven-tabel td { color: var(--inkt); }
.tarieven-tabel .bedrag { font-weight: 700; }

/* ---------- Formuliervelden ---------- */
.veld { display: block; margin-bottom: 1.05rem; }
.veld span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--inkt);
}
.veld input, .veld textarea {
  width: 100%;
  padding: 0.68rem 0.85rem;
  font: inherit;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-veld);
}
.veld input:focus, .veld textarea:focus {
  outline: 2px solid var(--kobalt-500);
  outline-offset: 1px;
  border-color: var(--kobalt-500);
}

/* ---------- Motion: rustig onthullen, met reduced-motion-gate ---------- */
.onthul { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .onthul {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .onthul.zichtbaar { opacity: 1; transform: none; }
  .polaroid, .papier { transition: transform 0.3s ease; }
  .polaroid:hover, .papier:hover { transform: rotate(0deg); }
}