/* vincentbiekman.nl — Business with a Smile
   Eén stylesheet. Desktop (aspect ≥ 4/3): vaste sidebar rechts + hero-flip.
   Portrait/mobiel (aspect < 4/3): geen flip, sidebar wordt menu. */

@font-face { font-family: "Anton"; src: url("font/Anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("font/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("font/Manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("font/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("font/PermanentMarker-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Het echte palet van Business with a Smile (aangeleverd 18-9-2026, zie ../merk/kleuren.md;
     Emy en Vincent kozen deze versie). Hun zwart heeft een blauwe inslag — dat is het verschil
     met het grijszwart dat hier eerst stond. #fe4519 is de kleur van het woordmerk. */
  --bg: #0f0d29;
  --bg-2: #1f1c45;
  --accent: #fe4519;
  --accent-zacht: #f26419;
  --light: #ffffff;
  --muted: rgba(255, 255, 255, .64);
  --line: rgba(255, 255, 255, .18);
  --poster: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --hand: "Permanent Marker", "Comic Sans MS", cursive;
  --sb: 20.76rem;                          /* sidebar-breedte */
  --inset: clamp(24px, 4vw, 80px);         /* zijmarge */
  --ui: clamp(13px, .9rem, 16px);          /* lopende tekst */
}

/* Viewport-proportionele schaal: alles in rem volgt het scherm. */
html { font-size: min(1.06vw, 2.28vh); scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--light);
  font-family: var(--body); font-size: var(--ui); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }
html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }

/* Tot JS de begintoestand heeft gezet, blijven reveal-elementen onzichtbaar (geen flits). */
.js-wait [data-chars], .js-wait [data-words], .js-wait [data-label],
.js-wait .streep--draw, .js-wait .doe-panel { visibility: hidden; }

/* ---------- decoratie: korrel + hoeken ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9999;
  opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.corners i { position: fixed; width: .9rem; height: .9rem; opacity: .55; z-index: 60; pointer-events: none; }
.corners i::before, .corners i::after { content: ""; position: absolute; background: var(--light); left: 50%; top: 50%; }
.corners i::before { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.corners i::after { width: 1px; height: 100%; transform: translate(-50%, -50%); }
.corners i:nth-child(1) { top: .9rem; left: .9rem; } .corners i:nth-child(2) { top: .9rem; right: .9rem; }
.corners i:nth-child(3) { bottom: .9rem; left: .9rem; } .corners i:nth-child(4) { bottom: .9rem; right: .9rem; }

/* ---------- gedeelde typografie ---------- */
.eyebrow { font-family: var(--body); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.line { display: block; }
.line--accent { color: var(--accent); }
.sec-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 5.6rem; line-height: 1.02; margin: .4rem 0 0; }
.sec-title--small { font-size: 4.4rem; }
.sec-sub { max-width: 36rem; font-size: 1rem; line-height: 1.65; color: var(--muted); margin-top: 1.4rem; }
.ch, .wd { display: inline-block; will-change: transform, opacity; }
.wd, .w { white-space: nowrap; }
.w { display: inline-block; }

.streep { position: absolute; overflow: visible; pointer-events: none; }
.streep path { fill: none; stroke: var(--light); stroke-width: 13px; stroke-linecap: round; }
.streep--draw { position: static; display: block; width: 24rem; height: 1.6rem; margin-top: .6rem; }
.streep--draw path { stroke-width: 9px; }
.is-scaling .streep path { filter: none !important; }

/* handgeschreven opmerkingen */
.mark { font-family: var(--hand); font-size: 1.45rem; line-height: 1.1; color: var(--light); white-space: nowrap; position: absolute; opacity: .92; }
.mark .arrow { display: inline-block; font-family: var(--body); font-weight: 600; margin: 0 .25em; }

/* e-mailknop */
.sb-mail, .contact-mail {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 2px;
  font-size: .82rem; letter-spacing: .04em; font-weight: 500; transition: border-color .25s, background .25s;
}
.sb-mail:hover, .contact-mail:hover { border-color: var(--accent); background: rgba(254, 69, 25, .10); }
.sb-mail svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; }
.mail-copied { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); font-family: var(--hand); font-size: 1.2rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
.is-copied .mail-copied { opacity: 1; }

/* ---------- topbar (mobiel) ---------- */
.topbar { display: none; }

/* ---------- sidebar (desktop) ---------- */
.sidebar {
  position: fixed; top: 0; right: 0; z-index: 50; width: var(--sb); height: 100vh; height: 100svh;
  padding: 1.7rem var(--inset) 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .85rem;
  /* GEEN eigen scrollbalk hier. Dat leek een nette oplossing voor een te lange kolom, maar
     de hero-vlucht rekent met de plek van deze elementen; zodra de balk intern scrolt kloppen
     die posities niet meer en verdwijnt de kop. Te lang = de foto krimpt (flex: 1) en de bio
     valt weg — zie de maatvoering bij .sb-photo. */
}
.sidebar [data-flip] { transform-origin: left top; will-change: transform; }
/* Uitzondering: de naam. Een vaste laag betekent één rasterisatie op de kleine
   zijbalkmaat, die tijdens de flip tot 4x wordt uitgerekt — dat is precies de
   wazigheid die Mike zag. Zonder eigen laag hertekent de browser 'm per schaal. */
.sidebar .sb-name { will-change: auto; }
/* De clip heeft een zwarte achtergrond; screen-blend laat die wegvallen. Blending werkt alleen binnen
   de eigen stacking context (het element is getransformeerd), dus de drager krijgt zelf de paginakleur. */
.logo-video { width: 100%; mix-blend-mode: screen; }
.sb-logo, .topbar-logo { background: var(--bg); }
.sb-logo { display: block; width: 100%; margin: -.6rem 0 -.2rem -.6rem; width: calc(100% + 1.2rem); }
.sb-name { position: relative; font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 2.35rem; line-height: 1.03; white-space: nowrap; letter-spacing: .005em; width: max-content; }
.name-word { text-shadow: none; }
.name-word--accent { color: var(--accent); text-shadow: none; }
.sb-name .streep, .h-name .streep { top: 99%; left: 21%; width: 68%; height: 14%; }
.sb-name .streep path { filter: url(#markerRough); animation: streepglitch 2.4s step-end infinite; }
@keyframes streepglitch {
  0% { transform: translate(0, 0); } 10% { transform: translate(.5px, -.4px); } 25% { transform: translate(-.5px, .3px); opacity: .95; }
  40% { transform: translate(.3px, .5px); } 55% { transform: translate(-.4px, -.3px); opacity: .97; } 70% { transform: translate(.5px, .2px); }
  85% { transform: translate(-.3px, -.5px); opacity: .94; } 100% { transform: translate(0, 0); }
}
.sb-tagline, .h-tagline { font-family: var(--poster); text-transform: uppercase; font-size: 1rem; letter-spacing: .03em; margin-top: .6rem; white-space: nowrap; width: max-content; }
.swap { display: inline-block; color: var(--accent); }
.sb-social, .h-social { display: flex; gap: 1rem; width: max-content; }
.sb-social a, .h-social a, .sb-nav a, .h-nav a { font-family: var(--poster); text-transform: uppercase; font-size: .9rem; letter-spacing: .08em; white-space: nowrap; transition: color .2s; }
.sb-social { gap: .6rem; }
.sb-social a { font-size: .74rem; letter-spacing: .05em; }
.sb-social a:hover, .sb-nav a:hover, .contact-links a:hover, .foot a:hover { color: var(--accent); }
.sb-social i, .h-social i { font-style: normal; color: var(--accent); }
.sb-bio { font-size: .8rem; line-height: 1.5; }
.sb-bio em { font-style: italic; color: var(--muted); }
.sb-loc { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sb-loc b { color: var(--accent); font-weight: 400; }
.sb-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.sb-nav a, .h-nav a { font-size: .95rem; display: inline-block; }
.sb-nav b, .h-nav b { font-weight: 400; color: var(--accent); font-size: .78em; margin-right: .3em; }
.sb-nav a.is-active { color: var(--accent); }
/* Maatvoering zoals de referentie (danielkiss.hu, gemeten 18-9 op 7 maten): alles in de kolom
   heeft een vaste rem-maat en mag NIET krimpen; alleen de foto is rekbaar (flex: 1, min-height 0)
   en neemt wat er in de hoogte overblijft, bijgesneden door object-fit: cover. Zo is de kolom
   nooit langer dan het venster en blijft de mailknop altijd in beeld.
   De rem is min(1.06vw, 2.28vh): het venster is dus altijd ≥ 43,9rem hoog (bij 16:9 = 53rem).
   Ons vaste deel is 33,5rem zonder bio (logo 6,9 · naam 2,4 · tagline 2,1 · social 1,4 · loc 2,3 ·
   nav 5,1 · mail 2,9 · 8 gaps 6,8 · padding 3,3) — er blijft dus altijd ≥ 10rem foto over.
   De bio (7,2rem, zes regels) past er alleen bij als het venster ≥ ~57rem hoog is: dat is
   aspect ≤ 5/3 (16:10-laptops, 3:2, 4:3). Op 16:9 en breder/lager valt hij weg. Aspect-ratio en
   niet max-height in px: de rem volgt de breedte, dus "te laag" is een verhouding, geen px-getal
   (op 2560×1080 is 1080px maar 43,9rem — een px-query zag dat niet en de mail viel eraf). */
.sidebar > * { flex-shrink: 0; }
.sb-photo { position: relative; flex: 1 1 0; min-height: 0; width: 12.9rem; max-height: 16.1rem; overflow: hidden; }  /* 12,9rem = 85% van de kolom; max 4:5 */
@media (min-aspect-ratio: 5/3) { .sb-bio { display: none; } }
/* object-position hoog: bij bijsnijden hoort het hoofd te blijven staan, niet de tafel. */
.sb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: filter .3s; }
.sb-photo:hover img { filter: contrast(1.2); }
.sb-photo figcaption { position: absolute; top: .5rem; left: .5rem; font-family: var(--poster); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(31, 28, 69, .78); padding: .25rem .5rem; }
.sb-badge { position: absolute; right: calc(var(--inset) * .35); bottom: 6.5rem; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--poster); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sb-mail { margin-top: auto; }

/* ---------- 01 hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero-bg {
  position: absolute; top: 0; right: 0; height: 100%; width: 60%; object-fit: cover; object-position: 50% 12%;
  opacity: .5; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 32%, rgba(23, 23, 26, .15) 70%, rgba(23, 23, 26, .35) 100%),
              linear-gradient(0deg, var(--bg) 4%, rgba(23, 23, 26, .5) 30%, transparent 55%);
}
.hero-layout { position: absolute; inset: 0; z-index: 2; visibility: hidden; }  /* desktop: alleen slots */
.h-logo { position: absolute; top: 1.7rem; left: calc(var(--inset) - .5rem); width: 24rem; aspect-ratio: 1280 / 604; }
.h-tagline { position: absolute; top: calc(1.7rem + 24rem * 604 / 1280 + .4rem); left: var(--inset); font-size: 1.35rem; }
.h-nav { position: absolute; top: 2.1rem; right: var(--inset); display: flex; gap: 2.1rem; }
.h-nav a { font-size: 1.45rem; }
.h-row { position: absolute; left: var(--inset); right: var(--inset); bottom: 11vh; display: flex; align-items: flex-end; gap: 1.6rem; }
.h-name { position: relative; font-family: var(--poster); text-transform: uppercase; line-height: 1.03; white-space: nowrap; letter-spacing: .005em; font-size: 10rem; flex: none; }
.h-side { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; margin-left: auto; }
.h-photo { width: 11.4rem; aspect-ratio: 4 / 5; overflow: hidden; }
.h-photo img { width: 100%; height: 100%; object-fit: cover; }
.h-social { gap: .8rem; }
.h-social a { font-size: .95rem; letter-spacing: .05em; }
.mark--stropdas { z-index: 3; left: 51%; bottom: 33vh; }
.mark--scroll { z-index: 3; left: var(--inset); bottom: 3.8vh; }

/* "Wat ik doe"-panel in dezelfde pin */
.doe-panel {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  padding: 0 calc(var(--sb) + var(--inset)) 0 var(--inset);
  display: flex; flex-direction: column; justify-content: center;
}
.doe-panel.is-live { pointer-events: auto; }
.doe-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 6.3rem; line-height: 1.05; }
.doe-panel .streep--draw { width: 30rem; }
.doe-sub { font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 1.6rem 0 2.6rem; max-width: 40rem; }
.doe-stats { display: flex; gap: 4rem; }
.doe-stats b { display: block; font-family: var(--poster); font-weight: 400; font-size: 4.2rem; line-height: 1; color: var(--accent); }
.doe-stats span { display: block; margin-top: .4rem; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }

/* ---------- 02 wat ik doe ---------- */
.sec { padding-left: var(--inset); padding-right: calc(var(--sb) + var(--inset)); }
.doe { padding: 20vh calc(var(--sb) + var(--inset)) 16vh var(--inset); }
.cat { position: relative; margin-bottom: 15vh; max-width: 52rem; }
.cat:nth-child(2) { margin-left: 22%; }
.cat:nth-child(3) { margin-left: 8%; }
.cat:nth-child(4) { margin-left: 30%; }
.cat-idx { position: absolute; left: -2.6rem; top: .9rem; font-family: var(--poster); font-size: 1.5rem; color: var(--accent); }
.cat-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 5.4rem; line-height: 1; }
.cat-tags { display: flex; flex-wrap: wrap; gap: .3rem 0; margin-top: .9rem; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.cat-tags span:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--accent); }
.cat-text { max-width: 34rem; margin-top: 1rem; font-size: .95rem; line-height: 1.65; }
.mark--cat { position: static; display: inline-block; margin-top: 1rem; font-size: 1.3rem; color: var(--accent); }

/* ---------- 03 verhaal ---------- */
.verhaal { padding: 18vh calc(var(--sb) + var(--inset)) 18vh var(--inset); }
.sec-head { max-width: 62rem; margin-bottom: 8vh; }
.hoofdstuk { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: center; margin: 0 0 22vh; }
.hoofdstuk--rev .hs-img { order: 2; justify-self: end; }
.hs-img { max-width: 24rem; width: 100%; overflow: hidden; }
.hs-img img { width: 100%; height: auto; transform: scale(1.04); }
.hs-body { max-width: 34rem; }
.hs-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 3.4rem; line-height: 1.02; margin: .4rem 0 1rem; }
.hs-body p:not(.eyebrow) { font-size: .95rem; line-height: 1.65; margin-top: .8rem; }
.quote { margin: 4vh auto 6vh; max-width: 54rem; text-align: center; }
.quote p { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 3.1rem; line-height: 1.1; }
.quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- 04 events (horizontale strook) ---------- */
.events { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.events-inner { position: absolute; inset: 0 var(--sb) 0 0; padding: 11vh var(--inset) 0; overflow: hidden; mask-image: linear-gradient(90deg, #000 94%, transparent); }
.events-head { position: relative; }
.events-counter { position: absolute; right: 0; top: .3rem; font-family: var(--poster); font-size: 1.6rem; letter-spacing: .05em; }
.events-counter .cur { font-weight: 400; color: var(--accent); display: inline-block; }
.mark--hint { right: 0; top: 4rem; font-size: 1.2rem; }
.track { position: absolute; left: var(--inset); bottom: 7vh; display: flex; gap: 2rem; will-change: transform; }
.slide { flex: none; height: 50vh; width: 37.5vh; --focus: 0; --px: 0px; }
.slide--wide { width: 75vh; }
.slide-inner { height: 100%; overflow: hidden; background: var(--bg-2); }
.slide-inner img {
  width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--px), 0, 0) scale(1.1);
  filter: saturate(calc(.3 + .7 * var(--focus))) brightness(calc(.62 + .38 * var(--focus)));
}
.slide-cap { display: block; margin-top: .7rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: calc(.4 + .6 * var(--focus)); }

/* ---------- overgang ---------- */
/* De tegelwand staat vast op het scherm en is een GEPOSITIONEERD element; die wint het van
   gewone tekst eronder, ook al staat hij op z-index 0. Daarom krijgt de overgangszin een
   eigen laag: anders lees je 'm door de foto's heen (Mike 18-9). */
.transition { position: relative; z-index: 1; padding: 20vh calc(var(--sb) + var(--inset)) 20vh var(--inset); }
.transition h2 { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 4.8rem; line-height: 1.05; }

/* ---------- 05 contact ---------- */
.contact { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 20vh var(--inset) 10rem; display: flex; align-items: center; justify-content: center; }
/* Vast aan het scherm (zoals in de referentie), niet in de sectie: anders schuift de hele wand mee
   met de pagina en is hij geen achtergrond die je sleept maar een strook die voorbijkomt. JS zet
   is-on zodra de tegels invliegen (overgangssectie) en haalt 'm weg als je terug omhoog scrolt. */
.contact-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; visibility: hidden; }
.contact-field.is-on { visibility: visible; }
.sidebar.is-gone { pointer-events: none; }
.contact-grid { position: absolute; left: -30%; top: -30%; display: grid; gap: 1.3rem; grid-template-columns: repeat(var(--cols, 8), 13.6rem); cursor: grab; touch-action: pan-y; }
.contact-grid.is-dragging { cursor: grabbing; }
.tile { width: 13.6rem; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); will-change: transform; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: .85; filter: saturate(.85); pointer-events: none; }
.contact-card {
  position: relative; z-index: 2; width: min(100%, 36rem); padding: 2.6rem 2.8rem 2.4rem;
  background: rgba(31, 28, 69, .86); border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.contact-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; font-size: 4.2rem; line-height: 1.02; margin-top: .4rem; }
.contact-card .streep--draw { width: 16rem; height: 1.2rem; }
.contact-text { margin: 1.4rem 0 1.6rem; font-size: .95rem; line-height: 1.6; max-width: 30rem; }
.contact-mail { font-size: 1.05rem; letter-spacing: .06em; justify-content: center; padding: 1rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.4rem; font-family: var(--poster); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.mark--drag { left: -1rem; top: -2.4rem; font-size: 1.2rem; }
.foot { position: absolute; left: var(--inset); right: var(--inset); bottom: 1.6rem; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot > * { background: rgba(23, 23, 26, .82); padding: .3rem .6rem; }
.foot .totop { position: static; font-size: 1.15rem; color: var(--light); }

/* =====================================================================
   PORTRAIT / MOBIEL — geen flip, sidebar wordt menu, hero-layout is de hero
   ===================================================================== */
@media (max-aspect-ratio: 4/3) {
  html { font-size: clamp(10px, 3.2vw, 14px); }
  :root { --sb: 0px; --inset: clamp(20px, 5vw, 48px); --ui: clamp(14px, 4vw, 17px); }

  .topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 70; align-items: center; justify-content: space-between; padding: 10px var(--inset); background: var(--bg); }
  .topbar-logo { width: 132px; }
  .topbar-toggle { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: flex-end; }
  .topbar-toggle span { display: block; height: 2px; width: 26px; background: var(--light); transition: transform .3s, width .3s; }
  .topbar-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .topbar-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .sidebar {
    inset: 0; width: 100%; height: 100%; padding: 84px var(--inset) 32px; gap: 18px; overflow: auto;
    background: var(--bg-2); transform: translateX(100%); transition: transform .5s cubic-bezier(.7, 0, .2, 1); z-index: 65;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar [data-flip] { transform: none !important; will-change: auto; }
  .sb-logo, .sb-photo, .sb-badge, .sb-loc { display: none; }
  .sb-name { font-size: 11.5vw; }
  .sb-name .streep path { filter: none; animation: none; }
  .sb-tagline { font-size: 15px; white-space: normal; }
  .sb-social a, .sb-nav a { font-size: 15px; }
  .sb-nav { flex-direction: column; gap: 10px; margin-top: 8px; }
  .sb-nav a { font-size: 30px; }
  .sb-bio { font-size: 15px; }
  .sb-mail { font-size: 14px; padding: 14px 16px; }

  .hero-bg { width: 100%; opacity: .45; object-position: 50% 22%; }
  .hero::before { background: linear-gradient(0deg, var(--bg) 8%, rgba(23, 23, 26, .55) 45%, rgba(23, 23, 26, .35) 100%); }
  .hero-layout { visibility: visible; }
  .h-logo, .h-nav, .h-photo { display: none; }
  .h-tagline { top: 94px; left: var(--inset); font-size: 12.5px; letter-spacing: .06em; }
  .h-row { left: var(--inset); right: var(--inset); bottom: 42vh; flex-direction: column; align-items: center; gap: 22px; }
  .h-name { font-size: 12.4vw; }
  .h-side { margin: 0; align-items: center; }
  .h-social { gap: 18px; }
  .h-social a { font-size: 12px; }
  .mark { font-size: 18px; }
  .mark--stropdas { left: auto; right: var(--inset); bottom: calc(58vh + 34px); font-size: 15px; }
  .mark--scroll { bottom: 28px; }

  .doe-panel { padding: 70px var(--inset) 0; justify-content: center; }
  .doe-title { font-size: clamp(36px, 12vw, 72px); }
  .doe-panel .streep--draw { width: 60vw; height: 14px; }
  .doe-sub { font-size: 13px; margin: 18px 0 26px; }
  .doe-stats { gap: 22px; flex-wrap: wrap; }
  .doe-stats b { font-size: 44px; }
  .doe-stats span { font-size: 11px; }

  .doe { padding: 10vh var(--inset) 4vh; }
  .cat, .cat:nth-child(n) { margin-left: 0; margin-bottom: 9vh; padding-left: 34px; }
  .cat-idx { left: 0; top: 4px; font-size: 16px; }
  .cat-title { font-size: clamp(30px, 9.2vw, 60px); }
  .cat-tags { font-size: 12px; }
  .cat-text { font-size: 15px; }
  .mark--cat { font-size: 16px; }

  .sec-title { font-size: clamp(36px, 11.5vw, 68px); }
  .sec-title--small { font-size: clamp(30px, 9.5vw, 52px); }
  .sec-sub { font-size: 15px; }
  .streep--draw { width: 60vw; height: 14px; }
  .verhaal { padding: 8vh var(--inset) 4vh; }
  .hoofdstuk { grid-template-columns: 1fr; gap: 22px; margin-bottom: 16vh; }
  .hoofdstuk--rev .hs-img { order: 0; justify-self: start; }
  .hs-img { max-width: 72%; }
  .hs-title { font-size: clamp(28px, 9vw, 48px); }
  .hs-body p:not(.eyebrow) { font-size: 15px; }
  .quote p { font-size: clamp(24px, 7.5vw, 40px); }
  .quote cite { font-size: 11px; }

  .events-inner { padding: 96px var(--inset) 0; }
  .events-counter { position: static; margin-top: 10px; font-size: 18px; }
  .mark--hint { right: var(--inset); top: auto; bottom: 3vh; font-size: 15px; }
  /* Vanaf de onderkant uitlijnen in plaats van een vaste 30vh: de kop is op een telefoon
     twee of drie regels en de teller viel daardoor achter de foto's (Mike 18-9). Zo houdt
     de kop altijd z'n eigen ruimte, hoe lang hij ook wordt. */
  .track { bottom: 9vh; top: auto; gap: 14px; }
  .slide { height: 40vh; width: 30vh; }
  .slide--wide { width: 63vh; }
  .slide-cap { font-size: 11px; }

  .transition { padding: 18vh var(--inset); }
  .transition h2 { font-size: clamp(30px, 10vw, 56px); }

  .contact { padding: 100px var(--inset) 120px; }
  .contact-grid { grid-template-columns: repeat(var(--cols, 6), 112px); gap: 10px; }
  .tile { width: 112px; }
  .contact-card { padding: 26px 22px 24px; }
  .contact-title { font-size: clamp(34px, 11.5vw, 60px); }
  .contact-card .streep--draw { width: 50vw; height: 10px; }
  .contact-text { font-size: 15px; }
  .contact-mail { font-size: 14px; }
  .contact-links { font-size: 12px; gap: 16px; }
  .mark--drag { display: none; }
  .foot { bottom: 22px; flex-direction: column; align-items: flex-start; font-size: 11px; }
  .foot .totop { font-size: 16px; }
  .corners { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .sb-name .streep path { animation: none; }
}


/* ---------- boeken: zwevende knop + uitnodiging ---------- */
/* Vincent verkoopt zichzelf als spreker; dan hoort "boek me" nooit meer dan één tik weg te zijn.
   De knop komt pas ná de hero — daar staat z'n naam al paginagroot, een knop erbij is schreeuwen. */
.boek-zwevend {
  position: fixed; right: calc(var(--sb) + 1.2rem); bottom: 1.6rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.4rem; border-radius: 2px;
  background: var(--accent); color: var(--bg);
  font-family: var(--poster); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .35s, transform .35s, background .2s;
}
.boek-zwevend.is-aan { opacity: 1; transform: none; pointer-events: auto; }
.boek-zwevend:hover { background: #ff5436; }
.boek-zwevend span { transition: transform .2s; }
.boek-zwevend:hover span { transform: translateX(3px); }

.boeklaag {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(10, 10, 12, .72); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s;
}
.boeklaag.is-aan { opacity: 1; }
.boekkaart {
  position: relative; width: min(92vw, 34rem); padding: 2.6rem 2.6rem 2.2rem;
  background: var(--bg); border: 1px solid var(--line);
  transform: translateY(16px) scale(.98); transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.boeklaag.is-aan .boekkaart { transform: none; }
.boekkaart h2 { font-family: var(--poster); font-weight: 400; text-transform: uppercase;
  font-size: 3.1rem; line-height: 1.03; margin: .5rem 0 1rem; }
.boek-tekst { font-size: .95rem; line-height: 1.6; color: var(--muted); margin-bottom: 1.8rem; }
.boek-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.boek-primair {
  padding: .8rem 1.5rem; background: var(--accent); color: var(--bg);
  font-family: var(--poster); letter-spacing: .06em; text-transform: uppercase; font-size: 1rem;
}
.boek-later { font-size: .85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.boek-sluit { position: absolute; top: .9rem; right: 1rem; font-size: 1.1rem; color: var(--muted); }

@media (max-aspect-ratio: 4/3) {
  .boek-zwevend { right: auto; left: 50%; transform: translate(-50%, 14px); bottom: 14px;
    font-size: 15px; padding: 13px 22px; }
  .boek-zwevend.is-aan { transform: translate(-50%, 0); }
  .boekkaart { padding: 26px 22px 22px; }
  .boekkaart h2 { font-size: clamp(26px, 8vw, 40px); }
}


/* ---------- lezingen ---------- */
.lezingen { padding: 16vh calc(var(--sb) + var(--inset)) 16vh var(--inset); }
.lez-rooster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3rem; margin-top: 4rem; }
.lez { border-top: 1px solid var(--line); padding-top: 1.2rem; }
/* Vincent, 19-9 (definitief, na twee tussenversies): de kop "Waar ik over spreek." oranje,
   de kleine tijdsduur erboven oranje, de lezingtitels wit en de uitleg wit. Zo leest het
   rustig en trekt de kop de aandacht in plaats van elke titel. */
.lezingen .sec-title { color: var(--accent); }
.lez-duur { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lez-titel { font-family: var(--poster); font-weight: 400; text-transform: uppercase;
  font-size: 2.1rem; line-height: 1.05; margin: .5rem 0 .7rem; color: var(--light); }
.lez p { font-size: .92rem; line-height: 1.6; color: var(--light); max-width: 26rem; }

@media (max-aspect-ratio: 4/3) {
  .lezingen { padding: 12vh var(--inset); }
  .lez-rooster { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
  .lez-titel { font-size: clamp(20px, 6vw, 30px); }
  .lez p { font-size: 15px; max-width: none; }
}