/* Bedenkerij – „van dichtbij”. Kleuren uit onze eigen macrofoto's. */
@font-face {
  font-family: "Bricolage"; font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage"; font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/fonts/unbounded-latin-ext.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/fonts/unbounded-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mos: #20271a;        /* donker mos – basis */
  --mos-2: #2a3322;
  --varen: #a7b48a;      /* gedempte varen – tweede tekst op donker */
  --studio: #eef0ec;     /* koel studiowit – portretten */
  --inkt: #1d221b;
  --inkt-2: #4c5548;
  --goud: #e8891c;       /* goudsbloem – het enige accent */
  --zinnia: #b3326e;     /* alleen bij Sylwia */
  --licht: #f4f5ef;      /* tekst op donker */
  --breed: "Unbounded", "Bricolage", system-ui, sans-serif;
  --maat: min(1180px, 100% - 2 * clamp(16px, 4vw, 48px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--mos); color: var(--licht);
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 380; font-stretch: 100%;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem); line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; border-radius: 4px; }
.wrap { width: var(--maat); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- foto's (met tijdelijke kleurvlakken zolang een bestand ontbreekt) ---------- */
.foto { --ph: linear-gradient(#2a3322, #2a3322); position: relative; background-color: var(--mos-2); background-image: var(--img), var(--ph);
  background-size: cover; background-position: var(--pos, center); }
.foto.leeg::after { content: attr(data-bestand); position: absolute; left: 10px; bottom: 8px; font-size: .72rem;
  color: rgba(255,255,255,.65); font-stretch: 85%; letter-spacing: .02em; }
.ph-rood   { --ph: radial-gradient(circle at 46% 48%, #f4c23a 0 7%, #c2401b 8% 30%, #7a1d10 46%, transparent 62%),
                   radial-gradient(circle at 80% 20%, #4a5a2a 0 10%, transparent 30%), linear-gradient(160deg, #26301b, #10140b); }
.ph-oranje { --ph: radial-gradient(circle at 50% 50%, #ffb347 0 10%, #ec7a12 11% 38%, #8d3a07 55%, transparent 70%),
                   linear-gradient(200deg, #2f3a20, #12160c); }
.ph-wit    { --ph: radial-gradient(circle at 50% 52%, #f1c84b 0 6%, #f5f2ea 7% 34%, #cfd2c7 44%, transparent 58%),
                   linear-gradient(140deg, #1f2a17, #0d110a); }
.ph-groen  { --ph: radial-gradient(ellipse at 40% 45%, #7f9d3c 0 18%, #3e5420 40%, transparent 70%),
                   radial-gradient(circle at 75% 70%, #a7c25a 0 6%, transparent 22%), linear-gradient(170deg, #1b2414, #0c1009); }
.ph-paars  { --ph: radial-gradient(circle at 48% 50%, #f0b83c 0 5%, #b3326e 6% 32%, #5c1438 50%, transparent 66%),
                   linear-gradient(150deg, #232b19, #0f120b); }
.ph-bruin  { --ph: radial-gradient(ellipse at 50% 60%, #c48a52 0 16%, #7a4d27 34%, transparent 60%),
                   linear-gradient(170deg, #2b2416, #110e08); }
.ph-mist   { --ph: radial-gradient(ellipse at 50% 30%, #c9cdc2 0 20%, #7d8577 50%, transparent 80%),
                   linear-gradient(180deg, #59614f, #232a1d); }
.ph-studio { --ph: radial-gradient(ellipse at 50% 40%, #d9d4cf 0 22%, #e9e8e4 45%, transparent 70%),
                   linear-gradient(180deg, #f2f2ef, #dcdcd6); }

/* ---------- kop ---------- */
.balk { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; gap: 22px;
  padding: 18px clamp(16px, 4vw, 48px); }
.balk nav { display: flex; gap: clamp(12px, 2vw, 26px); font-size: .95rem; }
.balk nav a { text-decoration: none; opacity: .85; }
.balk nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.talen { margin-left: auto; display: flex; gap: 2px; }
.talen button { font: inherit; font-size: .85rem; font-stretch: 85%; font-weight: 600; color: inherit; background: none;
  border: 0; padding: 6px 9px; border-radius: 999px; cursor: pointer; opacity: .7; }
.talen button[aria-pressed="true"] { opacity: 1; background: rgba(244,245,239,.14); }
@media (max-width: 640px) { .balk nav { display: none; } }

/* ---------- startscherm: alles in één oogopslag ---------- */
.start { height: 100svh; min-height: 620px; max-height: 1000px; display: grid; padding: 66px clamp(12px, 2vw, 28px) clamp(12px, 2vh, 22px);
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: 0; row-gap: 18px; }
.lens { grid-column: 1 / 8; grid-row: 1; position: relative; overflow: hidden; border-radius: 4px; display: block; color: var(--licht);
  text-decoration: none; --x: 62%; --y: 46%; --r: clamp(54px, 14vmin, 140px); background: #0c0f09; cursor: crosshair; touch-action: pan-y; }
.lens .laag { position: absolute; inset: -30px; display: block; }
.lens .wazig { filter: blur(14px) brightness(.55) saturate(.9); }
.lens .scherp { inset: 0; -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 72%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 72%, transparent 100%); }
.lens .ring { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: calc(var(--r) * 2.04); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(232,137,28,.85); pointer-events: none;
  box-shadow: 0 0 0 8px rgba(232,137,28,.08); }
.lens .ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(232,137,28,.7) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.lens-label { position: absolute; z-index: 2; left: 16px; top: 14px; font-size: .85rem; color: #e6eadb; }

/* het woordmerk steekt over de rand van de foto heen */
.merkvak { grid-column: 7 / 13; grid-row: 1; z-index: 2; align-self: end; padding-bottom: clamp(4px, 2vh, 20px); }
.woordmerk { margin: 0 0 0 calc(-1 * clamp(0px, 8vw, 150px)); font-family: var(--breed); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; line-height: .9; white-space: nowrap; font-variant-ligatures: none; font-feature-settings: "locl" 0; font-size: clamp(2.3rem, 6.1vw, 6.6rem); color: var(--licht);
  text-shadow: 0 2px 30px rgba(12,15,9,.45); }
.merkvak .rest { padding-left: clamp(16px, 2.4vw, 40px); }
.tagline { margin: 16px 0 0; font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); font-weight: 500; color: var(--goud); }
.merkvak .klein { margin: 12px 0 0; color: var(--varen); font-size: .95rem; max-width: 40ch; }

/* kaarten: alle onderdelen in één rij */
.kaarten { grid-column: 1 / 13; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.kaart { display: grid; grid-template-rows: auto auto; background: var(--licht); color: var(--inkt); border-radius: 4px; overflow: hidden; text-decoration: none; }
.kaart .foto { height: clamp(84px, 15vh, 170px); }
.kaart .info { padding: 10px 12px 12px; display: grid; gap: 3px; }
.kaart strong { font-family: var(--breed); font-weight: 500; font-size: clamp(.82rem, .7rem + .35vw, 1.02rem); line-height: 1.2; }
.kaart .regel { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--inkt-2); line-height: 1.3; }
.kaart em { font-style: normal; color: #b45f0d; font-weight: 600; white-space: nowrap; }
.kaart:hover strong, .kaart:focus-visible strong { text-decoration: underline; text-decoration-color: var(--goud); text-underline-offset: 4px; }
.kaart .naamvlak { height: clamp(84px, 15vh, 170px); background: #e3e6df; display: grid; place-items: center; }
.mini3d { font-weight: 800; font-stretch: 80%; line-height: .9; font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); color: var(--goud);
  text-shadow: 1px 1px 0 #c9711a, 2px 2px 0 #b66516, 3px 3px 0 #a05912, 4px 4px 0 #8a4d0e, 8px 10px 14px rgba(29,34,27,.22); }

@media (max-width: 980px) {
  .start { grid-template-rows: minmax(0, 1fr) auto auto; }
  .lens { grid-column: 1 / 13; }
  .merkvak { grid-column: 1 / 13; grid-row: 2; margin-top: -.5em; font-size: clamp(2.3rem, 9.2vw, 5rem); padding: 0; }
  .woordmerk { margin-left: 0; font-size: 1em; }
  .merkvak .rest { padding-left: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: 1rem; }
  .tagline { margin-top: 10px; }
  .merkvak .klein { display: none; }
  .kaarten { grid-row: 3; }
}
@media (max-width: 640px) {
  .start { padding-top: 54px; row-gap: 12px; min-height: 600px; }
  .kaarten { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .kaart { grid-column: span 2; }
  .kaart .foto, .kaart .naamvlak { height: clamp(58px, 9svh, 100px); }
  .kaart strong { font-size: .76rem; }
  .kaart em { font-size: .74rem; }
  .mini3d { font-size: 1.6rem; }
  .kaart .regel span { display: none; }
  .kaart .info { padding: 7px 10px 9px; }
}

h2 { margin: 0 0 16px; font-family: var(--breed); font-weight: 500; letter-spacing: -.01em; line-height: 1.05;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem); }
.knop { display: inline-block; text-decoration: none; font-weight: 600; font-stretch: 90%; padding: 12px 22px;
  border-radius: 999px; background: var(--goud); color: #1a1205; }
.knop:hover { filter: brightness(1.08); }
.knop.stil { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- manifest ---------- */
.manifest { background: var(--licht); color: var(--inkt); padding: clamp(64px, 10vw, 140px) 0; }
.manifest .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.manifest-groot { margin: 0; font-family: var(--breed); font-weight: 500; font-size: clamp(2rem, 1rem + 3.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.manifest-rest p { margin: 0 0 16px; color: var(--inkt-2); max-width: 46ch; }
.manifest-rest p.sterk { color: var(--inkt); font-weight: 600; font-size: 1.12em; }
.manifest .knop { margin-top: 8px; }
@media (max-width: 820px) { .manifest .wrap { grid-template-columns: 1fr; } }

/* ---------- macro ---------- */
.macro { padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); }
.macro .kop2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 28px; }
.macro .kop2 p { margin: 0; color: var(--varen); max-width: 44ch; }
.galerij { columns: 3 260px; column-gap: 14px; }
.galerij button { all: unset; display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.galerij button:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }
.galerij .foto { width: 100%; aspect-ratio: var(--ar, 4/5); transition: transform .5s ease; }
.galerij button:hover .foto { transform: scale(1.03); }
.galerij figcaption { font-size: .8rem; color: var(--varen); padding: 6px 2px 0; }
@media (prefers-reduced-motion: reduce) { .galerij .foto { transition: none; } }

/* ---------- Sylwia (licht studio) ---------- */
.studio { background: var(--studio); color: var(--inkt); padding: clamp(64px, 9vw, 130px) 0; }
.studio .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.studio .groot-portret { aspect-ratio: 4 / 5; border-radius: 4px; }
.studio p { color: var(--inkt-2); max-width: 46ch; }
.soorten { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soorten li { padding: 6px 14px; border-radius: 999px; background: #fff; font-size: .95rem; font-stretch: 90%; }
.regio { font-size: .95rem; }
.studio .knop { background: var(--zinnia); color: #fff; }
.studio .noot { font-size: .85rem; margin-top: 10px; }
.studio .wrap.strook { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; margin-top: clamp(28px, 4vw, 48px);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.strook .foto { aspect-ratio: 3 / 4; border-radius: 4px; scroll-snap-align: start; }
@media (max-width: 820px) { .studio .wrap { grid-template-columns: 1fr; } }

/* ---------- Plantator ---------- */
.planten { padding: clamp(64px, 9vw, 130px) 0; }
.planten .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.planten .beelden { position: relative; }
.planten .varen { aspect-ratio: 3 / 4; border-radius: 6px; }
.planten .druppel { position: absolute; width: 46%; aspect-ratio: 1; right: -8%; bottom: -8%; border-radius: 50%;
  box-shadow: 0 0 0 6px var(--mos), 0 0 0 7.5px var(--goud); }
.planten p.lead { color: var(--varen); max-width: 46ch; }
.dingen { margin: 26px 0 30px; display: grid; gap: 0; }
.dingen div { padding: 16px 0; border-top: 1px solid rgba(167,180,138,.28); display: grid; grid-template-columns: 11ch 1fr; gap: 18px; }
.dingen dt { font-weight: 650; font-stretch: 85%; }
.dingen dd { margin: 0; color: var(--varen); }
@media (max-width: 820px) { .planten .wrap { grid-template-columns: 1fr; } .planten .druppel { right: 4%; } }
@media (max-width: 480px) { .dingen div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Letters (live 3D-naam) ---------- */
.letters { background: var(--studio); color: var(--inkt); padding: clamp(64px, 9vw, 130px) 0; overflow: hidden; }
.letters p { color: var(--inkt-2); max-width: 46ch; }
.letters .naam3d { margin: clamp(26px, 4vw, 44px) 0 18px; font-weight: 800; font-stretch: 80%; line-height: .9;
  font-size: clamp(3.4rem, 2rem + 9vw, 10rem); letter-spacing: -.01em; color: var(--goud); overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 #c9711a, 2px 2px 0 #c06b18, 3px 3px 0 #b66516, 4px 4px 0 #ab5f14, 5px 5px 0 #a05912,
    6px 6px 0 #955310, 7px 7px 0 #8a4d0e, 8px 8px 0 #7f470c, 14px 18px 22px rgba(29,34,27,.28); }
.letters label { display: block; font-size: .9rem; color: var(--inkt-2); margin-bottom: 6px; }
.letters input { font: inherit; font-size: 1.1rem; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #c7cbc2;
  background: #fff; color: var(--inkt); width: min(320px, 100%); }
.lt-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.honing { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 10px var(--studio), 0 0 0 11.5px var(--goud); }
@media (max-width: 820px) { .lt-raster { grid-template-columns: 1fr; } .honing { width: 60%; justify-self: end; } }
.letters .rij { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }

/* ---------- Verhalen ---------- */
.verhalen { position: relative; min-height: 70vh; display: grid; align-items: end; overflow: hidden; }
.verhalen .achter { position: absolute; inset: 0; filter: brightness(.55) saturate(.8); }
.verhalen .wrap { position: relative; padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 7vw, 90px); }
.verhalen p { max-width: 40ch; color: #dfe3d6; }
.lantaarn { width: clamp(120px, 18vw, 200px); aspect-ratio: 3/4; border-radius: 999px 999px 8px 8px; margin-bottom: 26px; }

/* ---------- voet ---------- */
.voet { padding: 48px 0 56px; color: var(--varen); font-size: .95rem; }
.voet .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.voet .merk { font-variant-ligatures: none; font-family: var(--breed); font-weight: 500; text-transform: uppercase; font-size: 1.5rem; color: var(--licht); line-height: 1; }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* ---------- lightbox ---------- */
dialog.groot-beeld { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.groot-beeld::backdrop { background: rgba(12,15,9,.92); }
dialog.groot-beeld img { max-width: 94vw; max-height: 86vh; border-radius: 4px; }
dialog.groot-beeld p { color: var(--licht); text-align: center; margin: 10px 0 0; }
dialog.groot-beeld button { position: fixed; top: 14px; right: 18px; font: inherit; font-size: 1rem; color: var(--licht);
  background: rgba(244,245,239,.14); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* ---------- setpagina & 404 (kit.html) ---------- */
.pagina { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.pagina .balk { position: static; }
.pagina main { width: var(--maat); margin: 0 auto; padding: 24px 0 64px; }
.pagina h1 { margin: 10px 0 6px; font-weight: 760; font-stretch: 75%; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(2.8rem, 2rem + 4vw, 5.2rem); }
.ondertitel { color: var(--varen); margin: 0 0 30px; }
.paneel { background: var(--mos-2); border-radius: 14px; padding: clamp(18px, 3vw, 30px); max-width: 640px; }
.paneel + .paneel { margin-top: 14px; }
.paneel h2 { font-size: 1.5rem; }
.status { font-size: 1.15rem; font-weight: 600; margin: 0; }
.status.ok { color: var(--goud); }
.status.fout { color: #f08a7a; }
.paneel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0 0; }
.paneel dt { color: var(--varen); }
.paneel dd { margin: 0; font-weight: 600; }
.paneel ul { margin: 6px 0 0; padding-left: 20px; color: var(--varen); }
.mini-merk { font-weight: 760; font-stretch: 75%; font-size: 1.6rem; text-decoration: none; line-height: 1; }

[hidden] { display: none !important; }

/* =================================================================== projectpagina's */
.project { min-height: 100svh; }
.project .voet { background: var(--mos); }
.pbalk { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 28px;
  padding: 12px clamp(16px, 4vw, 48px); background: rgba(32,39,26,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(167,180,138,.16); color: var(--licht); }
.merkje { font-family: var(--breed); font-weight: 500; text-transform: uppercase; font-variant-ligatures: none; font-size: 1.05rem;
  letter-spacing: .02em; text-decoration: none; }
.pbalk nav { display: flex; gap: clamp(14px, 2vw, 28px); font-size: .95rem; overflow-x: auto; scrollbar-width: none; }
.pbalk nav a { text-decoration: none; opacity: .78; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.pbalk nav a:hover { opacity: 1; }
.pbalk nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--goud); }
@media (max-width: 760px) {
  .pbalk { grid-template-columns: 1fr auto; padding-bottom: 8px; }
  .pbalk nav { grid-column: 1 / -1; grid-row: 2; margin: 0 -16px; padding: 0 16px; }
}
.reus { margin: 0; font-family: var(--breed); font-weight: 500; text-transform: uppercase; font-variant-ligatures: none; font-feature-settings: "locl" 0;
  letter-spacing: .01em; line-height: .95; font-size: clamp(2.2rem, 1rem + 4.6vw, 6rem); overflow-wrap: normal; text-wrap: balance; }
.project .lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.5; color: var(--varen); max-width: 44ch; }
.noot { font-size: .88rem; color: var(--varen); }
.midden { text-align: center; margin-top: 30px; }
h3 { font-family: var(--breed); font-weight: 500; font-size: 1.15rem; margin: 0 0 8px; }

/* stappen: echte volgorde, dus genummerd */
.stappen { list-style: none; counter-reset: s; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.stappen li { counter-increment: s; border-top: 1px solid rgba(167,180,138,.3); padding-top: 14px; }
.stappen li::before { content: counter(s); display: block; font-family: var(--breed); font-size: 2.2rem; line-height: 1; color: var(--goud); margin-bottom: 10px; }
.stappen.licht li { border-top-color: rgba(29,34,27,.18); }

/* 3D-kijker */
.kijker { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 38%, #34402a, #20271a 70%); }
.kijker canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.kijker canvas:active { cursor: grabbing; }
.kijker::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%;
  border: 2px solid rgba(232,137,28,.25); border-top-color: var(--goud); animation: draai 0.9s linear infinite; }
.kijker.klaar::before, .kijker.geen-3d::before { display: none; }
@keyframes draai { to { transform: rotate(360deg); } }
.kijker.geen-3d::after { content: "3D"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--varen); font-family: var(--breed); }
.kijker-knoppen { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.kijker-knoppen button { pointer-events: auto; font: inherit; font-size: .88rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(244,245,239,.4); background: rgba(20,24,17,.55); color: var(--licht); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kijker-knoppen button[aria-pressed="true"] { background: var(--goud); border-color: var(--goud); color: #1a1205; }
.kijker-hint { font-size: .8rem; color: rgba(244,245,239,.6); transition: opacity .4s; }
.kijker.bezig .kijker-hint { opacity: 0; }
.kijker.licht { background: radial-gradient(ellipse at 50% 40%, #ffffff, #e2e5de 75%); }
.kijker.licht .kijker-hint { position: absolute; right: 14px; bottom: 12px; color: var(--inkt-2); }

/* ---------- Plantator ---------- */
.p-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); }
.p-hero .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 64px); }
.p-hero .reus { grid-column: 1 / -1; grid-row: 1; z-index: 0; white-space: nowrap; overflow-wrap: normal; font-size: clamp(2.6rem, 11.4vw, 10.5rem);
  line-height: .85; color: rgba(244,245,239,.94); margin-left: -.04em; }
.p-hero-tekst { grid-column: 1; grid-row: 2; align-self: end; padding: clamp(20px, 3vw, 40px) 0 clamp(20px, 4vw, 60px); }
.p-hero .kijker.groot { grid-column: 2; grid-row: 1 / 3; z-index: 1; margin-top: clamp(30px, 5vw, 80px); background: transparent; }
.kijker.groot { aspect-ratio: 1 / 1; max-height: 80svh; width: 100%; }
.kenmerken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 30px 0 0; }
.kenmerken div { border-top: 1px solid rgba(167,180,138,.3); padding: 12px 14px 0 0; }
.kenmerken dt { font-size: .82rem; color: var(--varen); }
.kenmerken dd { margin: 4px 0 0; font-weight: 600; line-height: 1.3; }
.onderdeel { padding: clamp(40px, 6vw, 84px) 0; border-top: 1px solid rgba(167,180,138,.14); }
.onderdeel .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.onderdeel.om .kijker { order: 2; }
.onderdeel h2, .samen h2, .sets h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.onderdeel p { color: var(--varen); max-width: 46ch; }
.feiten { list-style: none; padding: 0; margin: 22px 0 0; }
.feiten li { padding: 10px 0 10px 22px; border-top: 1px solid rgba(167,180,138,.22); position: relative; }
.feiten li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 2px; background: var(--goud); }
.panorama, .onderdeel .wrap.panorama { display: block; margin-top: clamp(32px, 5vw, 64px); margin-bottom: 0; }
.panorama img { width: 100%; height: auto; border-radius: 6px; display: block; }
.panorama figcaption { font-size: .88rem; color: var(--varen); margin-top: 10px; }
@media (max-width: 640px) { .panorama img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 50%; } }
.samen { padding: clamp(48px, 7vw, 100px) 0; background: var(--mos-2); }
.sets { padding: clamp(48px, 7vw, 100px) 0; }
.sets .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sets p { color: var(--varen); max-width: 46ch; }
.set-kaarten { display: grid; gap: 14px; }
.set-kaarten article { background: var(--licht); color: var(--inkt); border-radius: 6px; padding: 22px 24px; display: grid; grid-template-columns: 4.5rem 1fr; gap: 18px; align-items: start; }
.set-kaarten h3 { font-size: 2.4rem; line-height: 1; color: #b45f0d; margin: 0; }
.set-kaarten p { margin: 0; color: var(--inkt-2); }
@media (max-width: 860px) {
  .p-hero .wrap, .onderdeel .wrap, .sets .wrap { grid-template-columns: 1fr; }
  .p-hero .wrap { grid-template-rows: auto auto auto; }
  .p-hero .kijker.groot { grid-column: 1; grid-row: 2; margin-top: -4vw; }
  .p-hero-tekst { grid-row: 3; }
  .onderdeel.om .kijker { order: 0; }
  .kijker.groot { aspect-ratio: 1 / 1; }
}
@media (max-width: 520px) { .kenmerken { grid-template-columns: 1fr; } .kenmerken div { padding-bottom: 10px; } }

/* ---------- licht (Letters, Portretten) ---------- */
.p-letters, .p-portret { background: var(--studio); color: var(--inkt); }
.p-letters .pbalk, .p-portret .pbalk { background: rgba(238,240,236,.88); color: var(--inkt); border-bottom-color: rgba(29,34,27,.1); }
.p-letters .talen button[aria-pressed="true"], .p-portret .talen button[aria-pressed="true"] { background: rgba(29,34,27,.1); }
.p-letters .lead, .p-portret .lead, .p-letters .noot, .p-portret .noot { color: var(--inkt-2); }

/* ---------- Letters ---------- */
.maker-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr); min-height: calc(100svh - 62px); }
.naam-kijker { aspect-ratio: auto; border-radius: 0; min-height: 420px; }
.paneel-licht { padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 4px; }
.paneel-licht h1 { font-family: var(--breed); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.05; margin: 0 0 6px; }
.paneel-licht > p { color: var(--inkt-2); margin: 0 0 14px; }
.paneel-licht label[for="naam"], .paneel-licht .label { font-size: .88rem; color: var(--inkt-2); margin: 14px 0 6px; }
.paneel-licht input#naam { font: inherit; font-size: 1.25rem; font-weight: 600; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #c7cbc2; background: #fff; color: var(--inkt); }
.stalen { display: flex; flex-wrap: wrap; gap: 8px; transition: opacity .2s; }
.stalen.uit { opacity: .3; pointer-events: none; }
.stalen button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(29,34,27,.22); background: var(--c); cursor: pointer; padding: 0; }
.stalen button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--studio), 0 0 0 5px var(--goud); }
.vink { display: flex; gap: 10px; align-items: center; margin-top: 16px; cursor: pointer; }
.vink input { width: 20px; height: 20px; accent-color: var(--goud); }
.keuze { display: inline-flex; border: 1.5px solid #c7cbc2; border-radius: 999px; padding: 3px; gap: 2px; align-self: flex-start; }
.keuze button { font: inherit; font-size: .92rem; border: 0; background: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--inkt); }
.keuze button[aria-pressed="true"] { background: var(--inkt); color: var(--licht); }
.maat { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 4px; font-size: .9rem; color: var(--inkt-2); }
.maat b { font-family: var(--breed); font-weight: 500; font-size: 1.15rem; color: var(--inkt); }
.waarschuwing { color: #9a4b07; font-size: .9rem; margin: 4px 0; }
.paneel-licht .knop { margin-top: 10px; }
.waarvoor { padding: clamp(48px, 7vw, 100px) 0; background: #fff; }
.waarvoor h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.waarvoor h2.tweede { margin-top: clamp(40px, 6vw, 80px); }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.drie article { border-top: 3px solid var(--goud); padding-top: 14px; }
.drie p { color: var(--inkt-2); margin: 0 0 6px; }
.drie a { color: #9a4b07; font-weight: 600; }
@media (max-width: 860px) {
  .maker-raster { grid-template-columns: 1fr; min-height: 0; }
  .naam-kijker { min-height: 0; aspect-ratio: 4 / 3; }
  .drie { grid-template-columns: 1fr; }
}

/* ---------- Fotografie ---------- */
.p-foto { background: #12160e; }
.p-foto .pbalk { background: rgba(18,22,14,.82); }
.f-hero { position: relative; min-height: 72svh; display: grid; align-items: end; overflow: hidden; }
.f-hero-beeld { position: absolute; inset: 0; }
.f-hero-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #12160e 4%, rgba(18,22,14,.55) 45%, rgba(18,22,14,.1)); }
.f-hero .wrap { position: relative; padding: 0 0 clamp(28px, 5vw, 56px); }
.f-hero .lead { color: #d7ddc9; }
.maker-naam a { color: var(--goud); font-weight: 600; text-decoration: none; }
.f-galerij { padding: 10px 0 clamp(56px, 8vw, 110px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.filters button { font: inherit; font-size: .92rem; padding: 7px 16px; border-radius: 999px; border: 1.5px solid rgba(167,180,138,.4); background: none; color: var(--licht); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--licht); color: var(--inkt); border-color: var(--licht); }
.f-raster { columns: 3 240px; column-gap: 14px; }
.f-item { all: unset; display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; cursor: zoom-in; }
.f-item[hidden] { display: none; }
.f-item:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }
.f-item .foto { display: block; width: 100%; aspect-ratio: var(--ar, 4/5); border-radius: 4px; }
.f-tekst { display: block; font-size: .82rem; color: var(--varen); padding: 7px 2px 0; }
dialog.groot-beeld .pijl { position: fixed; top: 50%; translate: 0 -50%; right: auto; font-size: 2rem; line-height: 1; width: 48px; height: 48px; padding: 0; }
dialog.groot-beeld .vorige { left: 14px; }
dialog.groot-beeld .volgende { left: auto; right: 14px; }

/* ---------- Portretten ---------- */
.p-portret .knop { background: var(--zinnia); color: #fff; }
.s-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.s-hero .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.s-hoofd { aspect-ratio: 4 / 5; border-radius: 4px; }
.s-tekst .reus { color: var(--inkt); font-size: clamp(1.9rem, .8rem + 3.1vw, 4.2rem); }
.s-tekst .reus::after { content: ""; display: block; width: 72px; height: 6px; background: var(--zinnia); margin-top: 18px; }
.regio { color: var(--inkt-2); font-size: .95rem; }
.s-soorten { padding: clamp(40px, 6vw, 84px) 0; background: #fff; }
.s-soorten h2, .s-portfolio h2, .s-boek h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.soort-lijst { margin: 22px 0 0; display: grid; }
.soort-lijst div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 18px 0; border-top: 1px solid rgba(29,34,27,.12); align-items: baseline; }
.soort-lijst dt { font-family: var(--breed); font-weight: 500; font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); }
.soort-lijst dd { margin: 0; color: var(--inkt-2); }
.s-portfolio { padding: clamp(40px, 6vw, 84px) 0; }
.s-mozaiek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 22vw, 320px); grid-auto-flow: dense; gap: 10px; margin-top: 22px; }
.s-mozaiek .foto { border-radius: 4px; }
.s-mozaiek .m1, .s-mozaiek .m3 { grid-row: span 2; }
.s-boek { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 8vw, 110px); background: #fff; }
.s-boek .knop { margin-top: 24px; }
@media (max-width: 760px) {
  .s-hero .wrap { grid-template-columns: 1fr; }
  .soort-lijst div { grid-template-columns: 1fr; gap: 4px; }
  .s-mozaiek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-mozaiek .m3 { grid-row: auto; }
}

/* ---------- Verhalen: een stukje visual novel ---------- */
.vn { position: relative; min-height: calc(100svh - 62px); overflow: hidden; display: grid; }
.vn-achter { position: absolute; inset: -20px; filter: brightness(.48) saturate(.75) blur(1px); }
.vn-lantaarn { position: absolute; right: clamp(16px, 12vw, 220px); top: 14%; width: clamp(110px, 16vw, 220px); aspect-ratio: 3 / 4;
  border-radius: 999px 999px 10px 10px; box-shadow: 0 0 80px 10px rgba(232,137,28,.25); }
.vn-titel { position: relative; align-self: start; padding: clamp(28px, 6vh, 70px) clamp(16px, 4vw, 48px) 0; color: var(--licht); }
.vn-doos { position: absolute; left: 50%; bottom: clamp(16px, 4vh, 40px); translate: -50% 0; width: min(920px, calc(100% - 32px));
  background: rgba(16,20,13,.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(232,137,28,.55);
  border-radius: 10px; padding: 30px clamp(18px, 3vw, 34px) 22px; cursor: pointer; min-height: 150px; }
.vn-naam { position: absolute; top: -15px; left: 22px; background: var(--goud); color: #1a1205; font-family: var(--breed); font-weight: 500;
  text-transform: uppercase; font-variant-ligatures: none; font-size: .82rem; letter-spacing: .04em; padding: 5px 12px; border-radius: 6px; }
.vn-regel { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.5; min-height: 3em; }
.vn-verder { position: absolute; right: 18px; bottom: 10px; font-size: .78rem; color: var(--varen); animation: knipper 1.6s ease-in-out infinite; }
.vn-doos.einde .vn-verder { display: none; }
@keyframes knipper { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vn-verder { animation: none; } .kijker::before { animation-duration: 3s; } }
.vn-keuzes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vn-keuzes .knop.stil { color: var(--licht); }

/* =================================================================== /grid/: raster ↔ filmstrook */
.g-body { background: #0b0d09; color: var(--licht); overflow: hidden; height: 100svh; }
.g-podium { position: fixed; inset: 0; overflow: hidden; }
.g-body.stroom .g-podium { overflow-y: auto; scrollbar-width: none; }
.g-body.stroom .g-podium::-webkit-scrollbar { display: none; }
.g-baan { position: relative; width: 100%; }
.g-tegel { position: absolute; display: block; text-decoration: none; color: var(--licht); }
.g-beeld { position: absolute; inset: 0; display: block; background: #1a1f15 var(--img) var(--pos, center) / cover no-repeat;
  filter: grayscale(1) brightness(.42) contrast(1.05); transition: filter .5s ease; }
.g-tegel.actief .g-beeld, .g-tegel:focus-visible .g-beeld { filter: none; }
.g-tegel:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }
.g-titel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; white-space: nowrap; pointer-events: none;
  font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-variant-ligatures: none; letter-spacing: -.01em; line-height: .9;
  font-size: clamp(1.4rem, 1rem + 2vw, 3rem); text-shadow: 0 2px 24px rgba(0,0,0,.55); opacity: 0; transition: opacity .35s; }
.g-tegel.actief .g-titel { opacity: 1; }
.g-body.stroom .g-titel { display: none; }
.g-body.stroom .g-beeld { filter: grayscale(.85) brightness(.5); }
.g-body.stroom .g-tegel.actief .g-beeld { filter: none; }

.g-hoek { position: fixed; z-index: 10; font-size: .72rem; font-stretch: 85%; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(244,245,239,.78); pointer-events: none; }
.g-hoek a, .g-hoek button { pointer-events: auto; }
.g-lb-boven { top: 18px; left: clamp(14px, 3vw, 40px); }
.g-rb-boven { top: 12px; right: clamp(14px, 3vw, 40px); display: flex; align-items: center; gap: 18px; }
.g-rb-boven a { text-decoration: none; }
.g-rb-boven a:hover { color: var(--goud); }
.g-rb-boven .talen button { font-size: .7rem; letter-spacing: .08em; padding: 5px 7px; }
.g-merk { font-family: var(--breed); font-weight: 500; letter-spacing: .04em; font-size: .78rem; text-decoration: none; color: var(--licht); }
.g-lb-onder { bottom: 18px; left: clamp(14px, 3vw, 40px); color: var(--licht); }
.g-mid-onder { bottom: 18px; left: 50%; translate: -50% 0; }
.g-rb-onder { bottom: 18px; right: clamp(14px, 3vw, 40px); font-variant-numeric: tabular-nums; }
.g-wissel { position: fixed; z-index: 10; right: clamp(10px, 2.4vw, 34px); top: 50%; translate: 0 -50%; width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer; padding: 0; }
.g-wissel i { position: absolute; width: 7px; height: 7px; background: var(--licht); transition: transform .5s cubic-bezier(.76,0,.24,1); }
.g-wissel i:nth-child(1) { left: 9px; top: 9px; } .g-wissel i:nth-child(2) { left: 20px; top: 15px; } .g-wissel i:nth-child(3) { left: 9px; top: 21px; }
.g-wissel[aria-pressed="true"] i:nth-child(1) { transform: translate(5px, -2px); } .g-wissel[aria-pressed="true"] i:nth-child(2) { transform: translate(-6px, 0); }
.g-wissel[aria-pressed="true"] i:nth-child(3) { transform: translate(5px, 2px); }
.g-wissel:hover i { background: var(--goud); }
@media (max-width: 699px) { .g-mid-onder { display: none; } .g-titel { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .g-beeld, .g-titel, .g-wissel i { transition: none; } }
.g-body::before, .g-body::after { content: ""; position: fixed; left: 0; right: 0; height: 64px; z-index: 5; pointer-events: none; }
.g-body::before { top: 0; background: linear-gradient(#0b0d09, rgba(11,13,9,0)); }
.g-body::after { bottom: 0; background: linear-gradient(rgba(11,13,9,0), #0b0d09); }
.g-body.stroom .g-mid-onder { display: none; }

/* ---------- Letters: meer uit onze printer ---------- */
.voorbeelden { padding: clamp(48px, 7vw, 100px) 0; background: var(--studio); border-top: 1px solid rgba(29,34,27,.08); }
.voorbeelden h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.vb-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(16px, 3vw, 40px); margin-top: 24px; align-items: start; }
.vb-kijker { aspect-ratio: 4 / 3; }
.vb-keuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.vb-keuze button { font: inherit; font-size: .9rem; line-height: 1.25; color: var(--inkt); background: #fff; border: 1.5px solid transparent; border-radius: 8px;
  padding: 8px; cursor: pointer; display: grid; gap: 6px; text-align: left; }
.vb-keuze button img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; display: block; }
.vb-keuze button[aria-pressed="true"] { border-color: var(--goud); box-shadow: 0 0 0 3px rgba(232,137,28,.18); }
@media (max-width: 860px) {
  .vb-raster { grid-template-columns: 1fr; }
  .vb-keuze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vb-keuze button { font-size: .8rem; padding: 6px; }
}

/* ---------- Kaarten en uitnodigingen ---------- */
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/cormorant-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/cormorant-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
.p-kaarten { background: var(--studio); color: var(--inkt); }
.p-kaarten .pbalk { background: rgba(238,240,236,.88); color: var(--inkt); border-bottom-color: rgba(29,34,27,.1); }
.p-kaarten .talen button[aria-pressed="true"] { background: rgba(29,34,27,.1); }
.p-kaarten .lead, .p-kaarten .noot { color: var(--inkt-2); }
.c-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.c-hero .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.c-tekst .reus { font-size: clamp(1.9rem, .6rem + 2.7vw, 3.6rem); }

/* het tafereel: kaarten op tafel, met echte schaduwen */
.tafel { position: relative; aspect-ratio: 1.08; width: 100%; font-size: clamp(7px, 1.05vw, 13px); }
.kaart-papier { position: absolute; box-shadow: 0 1px 1px rgba(29,34,27,.08), 0 6px 10px -2px rgba(29,34,27,.16), 0 22px 36px -12px rgba(29,34,27,.28);
  border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kaart-papier p { margin: 0; }
.trouw { left: 12%; top: 2%; width: 42%; aspect-ratio: 105 / 148; background: #f8f4ec; color: #3b3a33; rotate: -4deg; z-index: 2;
  outline: 1px solid #c9a96a; outline-offset: -1.1em; padding: 2em; gap: .5em; }
.trouw .takje { width: 60%; color: #6f8a5a; margin-bottom: .6em; }
.k-klein { font-family: "Cormorant", serif; font-style: italic; font-size: 1.5em; color: #6d6a5e; }
.k-namen { font-family: "Cormorant", serif; font-weight: 500; font-size: 3.2em; line-height: 1; letter-spacing: .01em; }
.k-namen span { font-style: italic; color: #b08a44; }
.k-datum { font-size: 1.05em; letter-spacing: .14em; text-transform: uppercase; margin-top: .6em !important; }
.k-plaats { font-family: "Cormorant", serif; font-style: italic; font-size: 1.4em; color: #6d6a5e; }
.visite { right: 0; top: 24%; width: 44%; aspect-ratio: 85 / 55; background: var(--mos); color: var(--licht); rotate: 5deg; z-index: 3;
  align-items: flex-start; justify-content: flex-end; padding: 1.6em 1.8em; gap: .3em; }
.visite img { position: absolute; top: 1.6em; right: 1.8em; width: 3em; height: 3em; }
.v-merk { font-family: var(--breed); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 1.5em; font-variant-ligatures: none; }
.v-info { font-size: 1em; color: var(--varen); text-align: left; line-height: 1.5; }
.tafelkaart { right: 9%; bottom: 8%; width: 40%; aspect-ratio: 90 / 50; background: #fff; rotate: -3deg; z-index: 4; gap: .2em; color: #3b3a33; }
.tafelkaart .hartje { width: 1.4em; color: var(--zinnia); }
.t-naam { font-family: "Cormorant", serif; font-style: italic; font-size: 3.4em; line-height: 1; }
.t-tafel { font-size: .95em; letter-spacing: .18em; text-transform: uppercase; color: #8a877c; }
.geboorte { left: 0; bottom: 0; width: 33%; aspect-ratio: 1; background: #e6f0f7; rotate: 6deg; z-index: 5; color: #36506a; padding: 1.2em; gap: .1em; }
.geboorte img { width: 52%; height: auto; mix-blend-mode: multiply; border-radius: 50%; }
.g-welkom { font-family: "Cormorant", serif; font-style: italic; font-size: 1.5em; }
.g-naam { font-family: "Cormorant", serif; font-weight: 500; font-size: 2.6em; line-height: 1; }
.g-datum { font-size: .95em; letter-spacing: .12em; text-transform: uppercase; }
.c-soorten { padding: clamp(40px, 6vw, 84px) 0; background: #fff; }
.c-soorten h2, .c-samen h2, .c-hoe h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.c-samen { padding: clamp(40px, 6vw, 84px) 0; }
.c-samen .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.c-samen p { color: var(--inkt-2); max-width: 46ch; }
.c-samen img { width: 100%; max-width: 360px; height: auto; border-radius: 6px; justify-self: center; }
.c-hoe { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 8vw, 110px); background: #fff; }
.c-hoe .knop { margin-top: 24px; }
@media (max-width: 860px) {
  .c-hero .wrap, .c-samen .wrap { grid-template-columns: 1fr; }
  .tafel { font-size: 2.15vw; }
}

/* ---------- kaarten-teaser op de startpagina ---------- */
.kaarten-teaser { background: var(--studio); color: var(--inkt); padding: clamp(56px, 8vw, 120px) 0; }
.kaarten-teaser .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.kaarten-teaser p { color: var(--inkt-2); max-width: 46ch; }
.kaarten-teaser img { width: 100%; height: auto; }
@media (max-width: 820px) { .kaarten-teaser .wrap { grid-template-columns: 1fr; } }

@media (max-width: 700px) { .lens .laag { --img: url(/img/hero-1200.webp) !important; } }

/* ---------- macro-les ---------- */
.les { padding: clamp(48px, 7vw, 100px) 0; background: #1a1f15; }
.les .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.les h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.les h3 { margin-top: 26px; color: var(--goud); }
.les-tekst > p { color: #d7ddc9; max-width: 48ch; }
.les-tekst .lead { color: var(--varen); }
.les-beelden { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.les-beelden figure { margin: 0; }
.les-beelden figure:first-child { grid-row: span 2; }
.les-beelden .foto { display: block; border-radius: 4px; aspect-ratio: 4 / 3; }
.les-beelden figure:first-child .foto { aspect-ratio: auto; height: calc(100% - 26px); min-height: 260px; }
.les-beelden figcaption { font-size: .82rem; color: var(--varen); padding-top: 6px; }
@media (max-width: 860px) { .les .wrap { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .kaart .regel span { display: none; } }

/* ---------- Contact (hier komen NFC-sleutelhangers en QR-codes uit) ---------- */
.contact { min-height: calc(100svh - 62px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px);
  align-items: center; width: var(--maat); margin: 0 auto; padding: clamp(28px, 5vw, 64px) 0; }
.contact-kaart img { width: 72px; height: 72px; border-radius: 18px; }
.contact-kaart .reus { margin-top: 18px; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); }
.ct-knoppen { display: grid; gap: 10px; margin-top: 22px; max-width: 420px; }
.ct-knoppen .knop { text-align: center; }
.ct-adres { color: var(--varen); font-size: .9rem; margin-top: 14px; }
.ct-wat { display: grid; gap: 0; }
.ct-wat h2 { font-size: 1.3rem; margin-bottom: 8px; }
.ct-wat a { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid rgba(167,180,138,.22); text-decoration: none; }
.ct-wat a span { font-family: var(--breed); font-weight: 500; font-size: 1.05rem; }
.ct-wat a small { color: var(--varen); font-size: .88rem; }
.ct-wat a:hover span { color: var(--goud); }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; align-items: start; } }