/* Buro Reni – nieuw thema. Gegenereerd uit de UI-kit. */
/* Geist Mono (OFL), self-hosted */
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/geist-mono-400-latin-ext.woff2") format("woff2");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:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/geist-mono-400-latin.woff2") format("woff2");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:"Geist Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/geist-mono-700-latin-ext.woff2") format("woff2");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:"Geist Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/geist-mono-700-latin.woff2") format("woff2");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:"Lufga";font-weight:300;font-display:swap;src:url("../fonts/Lufga-Light.otf") format("opentype")}
@font-face{font-family:"Lufga";font-weight:700;font-display:swap;src:url("../fonts/Lufga-Bold.otf") format("opentype")}

/* Buro Reni Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --br-white: #ffffff; /* Paper: page background, header boxes, outline-paper buttons, inverse text on br-black. */
  --br-black: #1d2a3b; /* Ink: all text, 1px hairlines, 1.5px button and header borders. Text on br-white, br-periwinkle, br-lime and br-lilac-tint. */
  --br-logo-ink: #1d1d1b; /* Horizontal logo, dark tone (measured from Logo-BuroReni.pdf). */
  --br-logo-ink-1x1: #2c2e35; /* Square (1x1) logo, dark tone (measured from Logo-BuroReni-1x1.pdf). */
  --br-grey-700: #4a4a49; /* Running text on the CV page; behind text-muted. Text on br-white. */
  --br-grey-500: #767676; /* Grey caps keys and labels in showcase mode (KLANT, SOORT, work titles). Text on br-white (4.5:1). */
  --br-grey-300: #bdbdbd; /* Light grey from the base palette. Not for text on br-white. */
  --br-grey-100: #f2f2f2; /* Placeholder fill behind work tiles while images load. */
  --br-periwinkle: #979eff; /* The brand colour: titles and cover page in the portfolio, ::selection, tag hover, map tint, index-row hover. br-black text on it. */
  --br-periwinkle-deep: #869bf1; /* Icons in the email signature. */
  --br-periwinkle-ink: #3d55c4; /* Dark periwinkle for text and links on br-white: link hover, active filters, seat pills on the course page. */
  --br-lilac-tint: #f3f0ff; /* Soft background (GlowGirl pages). */
  --br-lime: #ddf5a6; /* Second tint (2026): hover fill on buttons, Samenwerken? and rows; the marker under “eerlijker, kleurrijker en mooier”. br-black text on it. */
  --br-lime-deep: #c6ea78; /* Hover on lime. */
  --br-error: #ff5e55; /* Errors. Text on br-white. */
  --surface-page: var(--br-white); /* Page background. */
  --surface-brand: var(--br-periwinkle); /* Brand fields (covers, ColorBlock default). */
  --surface-soft: var(--br-lilac-tint); /* Soft background fields. */
  --surface-inverse: var(--br-black); /* Black fields; text-on-inverse on it. */
  --surface-accent: var(--br-lime); /* Accent fields: CTA field, stickers. */
  --mark-on-paper: var(--br-lime); /* Highlighter marker on surface-page. */
  --mark-on-brand: var(--br-lime); /* Highlighter marker on surface-brand. */
  --mark-on-accent: var(--br-periwinkle); /* Highlighter marker on surface-accent. */
  --mark-on-inverse: var(--br-periwinkle); /* Marker on surface-inverse, used as a text colour there. */
  --text-body: var(--br-black); /* Body text on surface-page, surface-brand, surface-soft and surface-accent. */
  --text-muted: var(--br-grey-700); /* Secondary text on surface-page. */
  --text-title: var(--br-black); /* Titles on surface-page and surface-brand. */
  --text-label: var(--br-grey-500); /* Grey caps keys and labels on surface-page (4.5:1). */
  --surface-row-hover: var(--br-lime); /* Hover fill on rows and buttons; text-body on it. */
  --border-hairline: var(--br-black); /* 1px hairlines that carry the structure. */
  --text-on-brand: var(--br-black); /* Text on surface-brand. */
  --text-on-inverse: var(--br-white); /* Text on surface-inverse. */
  --text-link: var(--br-black); /* Links on surface-page (underlined). */
  --text-link-hover: var(--br-periwinkle-ink); /* Link hover on surface-page. */
  --border-strong: var(--br-black); /* 1.5px borders on buttons and header boxes. */
  --border-subtle: rgba(29,42,59,.12); /* Faint dividers. */
  --focus-ring: var(--br-periwinkle); /* 2px focus outline, 3px offset. Source value: about 2.2:1 on surface-page, below the 3:1 floor for focus rings; kept exact. */
  --ghost-on-brand: rgba(255,255,255,.35); /* Ghost word on presentation covers on surface-brand. */
  --ghost-on-paper: rgba(151,158,255,.35); /* Ghost word on presentation covers on surface-page. */
  --brc-ink: #1d1d1f; /* Course register: headings on br-white, brc-grey, brc-green and brc-blue. */
  --brc-ink-2: #424245; /* Course register: running text on br-white, brc-grey, brc-green and brc-blue. */
  --brc-muted: #6e6e73; /* Course register: eyebrows and meta on br-white and brc-grey. */
  --brc-grey: #f5f5f7; /* Course register: cards, fields, grey sections. */
  --brc-green: #f6fae6; /* Course register: hero, quotes, mail header. */
  --brc-blue: #e8edff; /* Course register: facts block, FAQ, details in mails. */
  --brc-blue-line: #d3dcfb; /* Course register: lines inside the brc-blue block. */
  --shadow-none: none; /* Default: flat, no shadow. */
  --shadow-panel: 0 12px 40px rgba(29,42,59,.14); /* Panel shadow. */
}
:root {
  --space-1: 4px; /* Spacing scale, step 1. */
  --space-2: 8px; /* Spacing scale, step 2. */
  --space-3: 12px; /* Spacing scale, step 3. */
  --space-4: 16px; /* Spacing scale, step 4. */
  --space-5: 24px; /* Spacing scale, step 5. */
  --space-6: 32px; /* Spacing scale, step 6. */
  --space-7: 48px; /* Spacing scale, step 7. */
  --space-8: 64px; /* Spacing scale, step 8. */
  --space-9: 100px; /* Spacing scale, step 9; ColorBlock padding. */
  --space-10: 140px; /* Spacing scale, step 10. */
  --frame: 12px; /* Distance between the home frame and the screen edge. */
  --gutter: 26px; /* Page margin. */
  --gutter-mobile: 16px; /* Page margin on mobile. */
  --container: 1200px; /* Max width of contained content (CaseVideo). */
  --block-gap: 0px; /* Gap between case blocks: images butt against each other. */
  --section-gap: 120px; /* Gap between page sections. */
  --header-top: 20px; /* Top offset of the fixed header. */
  --menubar-h: 0px; /* Legacy (the bottom menu bar is gone); kept for Hero padding. */
  --radius-0: 0; /* Images, fields, frames: square everywhere. */
  --radius-tag: 4px; /* Tags on images (ImageTag). */
  --radius-field: 0; /* Fields: hairline frame, square. */
  --radius-pill: 999px; /* Pill buttons. */
  --radius-cursus-card: 28px; /* Course register: cards. */
  --radius-cursus-block: 18px; /* Course register: blocks. */
  --radius-cursus-field: 14px; /* Course register: fields. */
  --t-mega: clamp(72px,13vw,240px); /* Page words and counters (“reisblog”, 084). */
  --t-display-xl: clamp(44px,6.4vw,124px); /* Case title. */
  --t-display: clamp(40px,6vw,108px); /* Home statement. */
  --t-h2: clamp(32px,4.4vw,64px); /* Section headings (Volgend project). */
  --t-h3: clamp(24px,2.6vw,40px); /* Intro lines, case text headings. */
  --t-ui: 14px; /* Menu, labels, rows, meta – always CAPS. */
  --t-body: 16px; /* Long reading text, sentence case. */
  --t-lead: 15px; /* The line under the statement. */
  --t-small: 14px; /* Small text. */
  --t-caption: 13px; /* Work titles under images. */
  --t-tag: 12px; /* Tags on images, buttons. */
  --t-ghost: clamp(80px,15.6vw,300px); /* Ghost word on presentation covers. */
  --lh-display: .95; /* Display sizes. */
  --lh-heading: 1.1; /* Headings. */
  --lh-ui: 1.45; /* Caps UI text. */
  --lh-body: 1.65; /* Reading text. */
  --track-mega: -.075em; /* t-mega. */
  --track-display: -.06em; /* Display sizes. */
  --track-heading: -.035em; /* Headings. */
  --track-body: 0; /* Reading text. */
  --track-caps: 0; /* Caps UI text. */
  --track-button: .14em; /* Buttons. */
  --track-spaced: 0; /* Spaced labels. */
  --weight-regular: 400; /* Everything on the site: large type is always Regular. */
  --weight-bold: 700; /* Legacy – not used on the site. */
  --weight-black: 800; /* Only the ghost word on presentation covers. */
  --dur-fast: .2s; /* Hover colour changes. */
  --dur-base: .3s; /* Base duration. */
  --dur-slow: .6s; /* Tile zoom. */
  --dur-page: .7s; /* Page fade-up. */
  --dur-open: .8s; /* Index rows opening. */
  --dur-zoom: 1.1s; /* Image zoom on hover. */
  --dur-reveal: 1.2s; /* Reveal wipe. */
  --ease: ease; /* Hover colour changes. */
  --ease-out: cubic-bezier(.2,.7,.2,1); /* Coming in, zoom. */
  --ease-inout: cubic-bezier(.7,0,.2,1); /* Opening, wipes. */
  --font-display: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: Lufga, system-ui, sans-serif;
  --text-t-mega: 400 240px/1.4 var(--font-display); /* Page words and counters; on the web clamp(72px,13vw,240px). */
  --text-t-display-xl: 400 124px/1.4 var(--font-display); /* Case titles, CAPS; on the web clamp(44px,6.4vw,124px). */
  --text-t-display: 400 108px/1.4 var(--font-display); /* Home statement; on the web clamp(40px,6vw,108px). */
  --text-t-h2: 400 64px/1.1 var(--font-display); /* Section headings; on the web clamp(32px,4.4vw,64px). */
  --text-t-h3: 400 40px/1.1 var(--font-display); /* Intro lines; on the web clamp(24px,2.6vw,40px). */
  --text-t-ui: 400 14px/1.45 var(--font-mono); /* Menu, labels, rows, meta – always CAPS. */
  --text-t-body: 400 16px/1.65 var(--font-mono); /* Reading text, max 62ch. */
  --text-t-lead: 400 15px/1.4 var(--font-mono); /* The line under the statement. */
  --text-t-caption: 400 13px/1.4 var(--font-mono); /* Work titles under images, CAPS. */
  --text-t-tag: 400 12px/1.4 var(--font-mono); /* Buttons and tags, CAPS. */
  --text-t-ghost: 800 300px/1.4 var(--font-display); /* Ghost word on presentation covers (1920×1080); on the web clamp(80px,15.6vw,300px). */
  --text-cursus-title: 700 40px/1.05 var(--font-sans); /* Course headings. */
  --text-cursus-body: 300 17px/1.5 var(--font-sans); /* Course running text. */
}
.t-mega {
  font-family: var(--font-display);
  font-size: 240px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: 124px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-display {
  font-family: var(--font-display);
  font-size: 108px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.t-ui {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.t-body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.t-lead {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.t-ghost {
  font-family: var(--font-display);
  font-size: 300px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0;
}
.cursus-title {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
}
.cursus-body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0;
}
@font-face {
  font-family: "Lufga";
  src: url("fonts/Lufga-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lufga";
  src: url("fonts/Lufga-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono — huisletter sinds de Interactie Academie-presentatie (2026). Google Fonts, OFL. */
500;700;800&display=swap');

/* Values tokens.json cannot hold (composites, ch) */
:root{
--row-pad:9px 14px;        /* genummerde index-rijen */
--container-text:62ch;
--hairline:1px solid var(--br-black);
}

/* Minimal element defaults so cards and kits share one baseline */
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--track-body)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--br-periwinkle);color:var(--br-black)}

@keyframes brBlink{50%{opacity:0}}@keyframes brBlinkOut{0%,50%{opacity:1}50.01%,100%{opacity:0}}@keyframes brPage{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}::selection{background:var(--br-sel,var(--br-periwinkle));color:var(--br-black)}[style*="background: var(--br-white)"],[style*="background-color: var(--br-white)"],[style*="background: rgb(255, 255, 255)"],[style*="background-color: rgb(255, 255, 255)"],[style*="background: rgb(245, 245, 247)"],[style*="background-color: rgb(245, 245, 247)"],[style*="background: var(--br-grey-100)"],[style*="background-color: var(--br-grey-100)"]{--br-sel:var(--br-periwinkle)}[style*="background: var(--br-periwinkle)"],[style*="background-color: var(--br-periwinkle)"],[style*="background-image: linear-gradient(var(--br-periwinkle)"],[style*="background: var(--br-lime)"],[style*="background-color: var(--br-lime)"],[style*="background-image: linear-gradient(var(--br-lime)"],[style*="background: color-mix("],[style*="background-color: color-mix("],[style*="background-image: linear-gradient(color-mix("],[style*="background: rgb(255, 179, 217)"],[style*="background-color: rgb(255, 179, 217)"],[style*="background-image: linear-gradient(rgb(255, 179, 217)"],[style*="background: rgb(255, 210, 122)"],[style*="background-color: rgb(255, 210, 122)"],[style*="background-image: linear-gradient(rgb(255, 210, 122)"],[style*="background: rgb(155, 221, 255)"],[style*="background-color: rgb(155, 221, 255)"],[style*="background-image: linear-gradient(rgb(155, 221, 255)"],[style*="background: rgb(205, 180, 255)"],[style*="background-color: rgb(205, 180, 255)"],[style*="background-image: linear-gradient(rgb(205, 180, 255)"],[style*="background: rgb(246, 250, 230)"],[style*="background-color: rgb(246, 250, 230)"],[style*="background-image: linear-gradient(rgb(246, 250, 230)"]{--br-sel:var(--br-white)}[style*="background: var(--br-lime)"],[style*="background-color: var(--br-lime)"]{--br-hov:var(--br-periwinkle)}[style*="background: var(--br-periwinkle)"],[style*="background-color: var(--br-periwinkle)"],[style*="background: var(--br-white)"],[style*="background: var(--br-black)"]{--br-hov:var(--br-lime)}.br-legal-c{font-size:16px;line-height:1.55;max-width:72ch}.br-legal-c>*{margin:0}.br-legal-c>*+*{margin-top:.9em}.br-legal-c h2{font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:400;margin-top:2.2em;padding-top:.9em;border-top:1px solid var(--br-black)}.br-legal-c h2+*{margin-top:.7em}.br-legal-c ul,.br-legal-c ol{list-style:none;padding:0}.br-legal-c li{position:relative;padding-left:1.4em}.br-legal-c li+li{margin-top:.35em}.br-legal-c ul>li::before{content:"–";position:absolute;left:0}.br-legal-c a{color:inherit;text-decoration:underline;text-underline-offset:.15em}.br-legal-c strong{font-weight:600}.br-legal-c>p:first-child{color:#6b6b6b}
/* WordPress-extra's */
@font-face{font-family:"Noto Sans Tagbanwa";src:url("fonts/noto-sans-tagbanwa-tagbanwa-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+1760-177F}
html,body{margin:0;background:var(--br-white)}
body.br-nieuw{font-family:var(--font-sans)}
.br-js .br-fallback{display:none}
.br-fallback{font-family:var(--font-sans);font-weight:300;max-width:72ch;margin:0 auto;padding:120px 20px 80px;line-height:1.5}
.br-fallback h1{font-weight:700;font-size:clamp(40px,6vw,90px);line-height:1;letter-spacing:-.03em}
.br-fallback img{max-width:100%;height:auto;display:block;margin:16px 0;border-radius:16px}
.br-fallback a{color:inherit}
@keyframes brPage{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@keyframes brRingSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){[style*="brRingSpin"]{animation:none!important}}
/* Geen kleuren of randen van het moederthema */
.br-nieuw h1,.br-nieuw h2,.br-nieuw h3,.br-nieuw h4,.br-nieuw h5,.br-nieuw h6{color:inherit}
.br-nieuw{color:var(--br-black)}
.br-nieuw #root button,.br-nieuw #br-modals button,.br-nieuw #br-ring button{box-shadow:none;outline:none;-webkit-tap-highlight-color:transparent}
.br-nieuw #root button:focus-visible,.br-nieuw #br-modals button:focus-visible{outline:2px solid var(--br-black);outline-offset:3px}

/* Projectslider: altijd schermhoog, ook als de browserbalk op mobiel in- of uitschuift */
.cn-sticky{top:0;height:100vh;height:100dvh}
.cn-panel{height:100%}
.cn-hs{height:calc(var(--cn-h,0px) + 100vh);height:calc(var(--cn-h,0px) + 100dvh)}
/* mobiel: info schuift tot halverwege het scherm en blijft daar staan, de slider vult de onderste helft */
.cn-hs--head .cn-sticky{height:auto;top:min(0px,calc(50vh - var(--ih,0px)));top:min(0px,calc(50dvh - var(--ih,0px)))}
.cn-hs--head .cn-panel{height:max(50vh,calc(100vh - var(--ih,0px)));height:max(50dvh,calc(100dvh - var(--ih,0px)))}
.cn-hs--head{height:calc(var(--cn-h,0px) + var(--ih,0px) + max(50vh,calc(100vh - var(--ih,0px))));height:calc(var(--cn-h,0px) + var(--ih,0px) + max(50dvh,calc(100dvh - var(--ih,0px))))}

/* hero-overgang home: laag is altijd precies zo hoog als het zichtbare scherm */
.bn-stage{height:100vh;height:100svh;height:100dvh}

/* ---------- Server-side pagina's (reisblog, berichten, winkel, shortcodes) ---------- */
.br-shell,.br-nieuw{overflow-x:clip}
.br-shell{font-family:var(--font-sans);font-weight:300;color:var(--br-black);background:var(--br-white)}
.bs-wave{position:absolute;left:0;right:0;display:block;width:100%;height:clamp(26px,4vw,60px);pointer-events:none}
.bs-wave--bottom{bottom:-1px}.bs-wave--top{top:-1px}
.bs-hero{position:relative;background:var(--br-periwinkle);padding:clamp(20px,2.4vw,40px) clamp(16px,4vw,56px) clamp(80px,9vw,140px);display:grid;gap:clamp(16px,2vw,28px);justify-items:start;text-align:left;--br-sel:var(--br-white);--br-hov:var(--br-lime)}
.bs-hero__row{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;position:relative}
.bs-ring{flex:none;min-height:96px;min-width:96px}
@media (max-width:859px){.bs-ring{position:absolute;top:0;right:0}.bs-hero__row .bs-h1{padding-top:104px}}
.bs-ring__fb{font-weight:700;color:inherit}
.bs-eyebrow{margin:0;font-weight:700;font-size:15px;letter-spacing:.01em;opacity:.75}
.bs-eyebrow a{color:inherit}
.bs-h1{margin:0;min-width:0;flex:1;font-weight:700;font-size:clamp(44px,7vw,120px);line-height:.95;letter-spacing:-.03em;hyphens:manual;text-wrap:balance}
.bs-intro{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:46ch}
.bs-main{position:relative;padding:clamp(48px,6vw,96px) clamp(16px,5vw,80px) clamp(72px,8vw,130px)}
.bs-content{margin:0 auto}
.bs-content img,.bs-content video,.bs-content iframe{max-width:100%;height:auto;border-radius:18px}
.bs-content iframe{border:0;width:100%;aspect-ratio:16/10;height:auto}
.bs-content figure{margin:1.6em 0}
.bs-content figcaption{font-size:14px;opacity:.7;margin-top:8px}
.bs-post{max-width:72ch}
.bs-btn{appearance:none;font:inherit;font-family:var(--font-sans);font-weight:700;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:18px 30px;border-radius:999px;border:1.5px solid var(--br-black);background:transparent;color:var(--br-black);text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.bs-btn:hover{color:var(--br-hov,var(--br-lime));border-color:var(--br-hov,var(--br-lime));transform:translateY(-2px) rotate(-1.5deg)}
.bs-btn--solid{background:var(--br-black);color:var(--br-white)}
.bs-btn--solid:hover{background:var(--br-hov,var(--br-lime));color:var(--br-black)}
/* reisblog */
.bs-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
.bs-stats li{font-weight:300;font-size:15px;padding:8px 16px;border-radius:99px;background:var(--br-white)}
.bs-stats b{font-weight:700}
.bs-rb{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
.bs-map{margin:0;display:grid;gap:8px}
.bs-map iframe,.bs-map__btn{width:100%;aspect-ratio:21/9;border:0;border-radius:28px;display:block;box-sizing:border-box}
.bs-map__btn{appearance:none;font:inherit;cursor:pointer;background:var(--br-lime);color:var(--br-black);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:clamp(20px,2.4vw,36px);text-align:left;transition:background .25s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.bs-map__btn:hover{background:var(--br-periwinkle);transform:rotate(-.5deg)}
.bs-map__l{font-weight:700;font-size:15px}
.bs-map__cta{font-weight:700;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em}
.bs-map__btn small{font-size:13px;opacity:.75}
.bs-map figcaption{text-align:right;font-size:14px}.bs-map figcaption a{color:inherit}
@media (max-width:700px){.bs-map iframe,.bs-map__btn{aspect-ratio:4/3;border-radius:22px}}
.bs-filters{display:flex;flex-wrap:wrap;gap:8px}
.bs-chip{appearance:none;font:inherit;font-weight:700;font-size:15px;padding:10px 18px;border-radius:99px;border:1.5px solid var(--br-black);background:var(--br-white);color:var(--br-black);cursor:pointer;transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.bs-chip:hover{background:var(--br-lime);transform:rotate(-1.5deg)}
.bs-chip.is-on{background:var(--br-black);color:var(--br-white)}
.bs-chip sup{font-size:.65em;font-weight:300;margin-left:2px}
.bs-list{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(29,42,59,.25)}
.bs-list li{border-top:1px solid rgba(29,42,59,.25)}
.bs-list a{display:grid;grid-template-columns:clamp(100px,10vw,150px) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 14px;border-radius:18px;color:inherit;text-decoration:none;transition:background .2s}
.bs-list a:hover{background:var(--br-lime)}
.bs-list__d{font-weight:700;font-size:14px}
.bs-list__t{font-weight:700;font-size:clamp(24px,3vw,44px);letter-spacing:-.04em;line-height:1.05}
.bs-list__a{font-weight:700;font-size:22px;transition:transform .3s}
.bs-list a:hover .bs-list__a{transform:translateX(6px)}
.bs-empty{padding:18px 14px}
@media (max-width:700px){.bs-list a{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 8px}.bs-list__d{grid-column:1/-1}}
.bs-pages ul{list-style:none;display:flex;gap:8px;padding:0}.bs-pages a,.bs-pages span{display:grid;place-items:center;min-width:44px;height:44px;border-radius:99px;border:1.5px solid var(--br-black);color:inherit;text-decoration:none;font-weight:700}.bs-pages .current{background:var(--br-black);color:var(--br-white)}
/* Flickr-fotostrook */
.br-fl{margin:2em 0!important;display:grid;gap:12px}
.br-fl__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:min(62vh,560px);outline:0;overscroll-behavior-x:contain}
.br-fl__track::-webkit-scrollbar{display:none}
.br-fl__img{flex:none;height:100%;width:auto;max-width:100%;object-fit:contain;scroll-snap-align:start;display:block;border-radius:18px;background:var(--br-grey-100)}
.br-fl__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;font-weight:700;font-size:14px}
.br-fl__line{height:2px;background:rgba(29,42,59,.15);border-radius:2px;position:relative}
.br-fl__line i{position:absolute;left:0;top:-2px;height:6px;width:0;border-radius:6px;background:var(--br-periwinkle);transition:width .2s}
.br-fl__nav{display:flex;gap:8px}
.br-fl__btn{appearance:none;border:0;background:var(--br-lime);color:var(--br-black);width:44px;height:44px;border-radius:50%;font:inherit;font-weight:700;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.br-fl__btn:hover{background:var(--br-periwinkle);transform:rotate(-12deg) scale(1.06)}
@media (max-width:860px){.br-fl__track{height:min(56vh,440px)}.br-fl__img{max-width:none}}
/* volgend/vorig verhaal */
.bs-next{position:relative;background:var(--br-periwinkle);padding:clamp(64px,8vw,120px) clamp(16px,5vw,80px) clamp(48px,6vw,90px);--br-hov:var(--br-lime)}
.bs-next__in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px)}
.bs-next__a{display:grid;gap:10px;padding:clamp(20px,2.4vw,36px);border-radius:28px;background:var(--br-white);color:inherit;text-decoration:none;transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .25s}
.bs-next__a:hover{background:var(--br-lime);transform:rotate(-1deg) translateY(-3px)}
.bs-next__a--r{text-align:right}
.bs-next__t{font-weight:700;font-size:clamp(26px,3.2vw,48px);letter-spacing:-.045em;line-height:1}
.bs-next__all{text-align:center;margin:clamp(28px,3vw,44px) 0 0}
@media (max-width:700px){.bs-next__in{grid-template-columns:1fr}.bs-next__a--r{text-align:left}}
/* onderkant */
.bs-end{position:relative;background:var(--br-periwinkle);padding:clamp(72px,8vw,130px) 0 0;text-align:center;--br-sel:var(--br-white);--br-hov:var(--br-lime)}
.bs-next+.bs-end{padding-top:clamp(24px,3vw,40px)}.bs-next+.bs-end .bs-wave--top{display:none}
.bs-end__t span{display:block}
.bs-end__t{margin:0 auto;padding:0 16px;max-width:none;font-weight:700;font-size:clamp(40px,6vw,96px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.bs-end__btns{margin:clamp(24px,3vw,40px) 0 clamp(40px,5vw,72px)}
.bs-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:22px clamp(16px,4vw,56px) 18px;border-top:1px solid rgba(29,42,59,.35);font-size:14px;line-height:1.5;text-align:left}
.bs-footer a{color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.bs-footer__l{display:flex;align-items:center;gap:14px}.bs-footer__r{display:flex;gap:18px;white-space:nowrap}
.bs-ck{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;color:inherit}
.bs-ck span{width:28px;height:28px;display:block;background:currentColor;transition:transform .45s cubic-bezier(.3,1.5,.5,1);-webkit-mask:var(--br-cookie);mask:var(--br-cookie)}
.bs-ck:hover span{transform:rotate(-12deg)}
@media (max-width:600px){.bs-footer{font-size:min(12px,3.2vw)}.bs-footer__l{gap:10px}.bs-footer__r{gap:14px}.bs-ck span{width:24px;height:24px}}
/* WooCommerce en formulieren in de nieuwe stijl */
.bs-woo{max-width:1000px}
.br-shell .bs-content input[type=text],.br-shell .bs-content input[type=email],.br-shell .bs-content input[type=tel],.br-shell .bs-content input[type=password],.br-shell .bs-content input[type=number],.br-shell .bs-content select,.br-shell .bs-content textarea{box-sizing:border-box;width:100%;font:inherit;font-weight:300;font-size:17px;padding:14px 20px;border:1.5px solid var(--br-black);border-radius:999px;background:var(--br-white);color:var(--br-black);outline:none}
.br-shell .bs-content textarea{border-radius:22px}
.br-shell .bs-content input:focus,.br-shell .bs-content select:focus,.br-shell .bs-content textarea:focus{background:#f6fae6;box-shadow:0 0 0 4px var(--br-lime)}
.br-shell .bs-content button,.br-shell .bs-content .button,.br-shell .bs-content input[type=submit],.br-shell .bs-content .wp-element-button{font:inherit;font-weight:700;font-size:17px;line-height:1;padding:17px 28px;border-radius:999px;border:1.5px solid var(--br-black);background:var(--br-black);color:var(--br-white);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.br-shell .bs-content button:hover,.br-shell .bs-content .button:hover,.br-shell .bs-content input[type=submit]:hover,.br-shell .bs-content .wp-element-button:hover{background:var(--br-lime);color:var(--br-black);transform:rotate(-1.5deg)}
.br-shell .bs-content table{width:100%;border-collapse:collapse}
.br-shell .woocommerce-info,.br-shell .woocommerce-message,.br-shell .woocommerce-error{list-style:none;padding:14px 20px;border-radius:18px;background:var(--br-lime);border:0}
.br-shell .woocommerce-error{background:#ffe2e0}

:root{--br-cookie:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'#1d2a3b'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%202a10%2010%200%201%200%2010%2010%204%204%200%200%201-5-5%204%204%200%200%201-5-5'%2F%3E%3Cpath%20d%3D'M8.5%208.5v.01'%2F%3E%3Cpath%20d%3D'M16%2015.5v.01'%2F%3E%3Cpath%20d%3D'M12%2012v.01'%2F%3E%3Cpath%20d%3D'M11%2017v.01'%2F%3E%3Cpath%20d%3D'M7%2014v.01'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* Juridische/lange tekst (ook voor server-side pagina's) */
.br-legal-n{font-family:var(--font-sans);font-weight:300;font-size:clamp(17px,1.25vw,19px);line-height:1.6;max-width:68ch;margin:0 auto;width:100%}
.br-legal-n>*{margin:0}.br-legal-n>*+*{margin-top:.9em}
.br-legal-n>p:first-child{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.01em;padding:7px 16px;border-radius:99px;background:var(--br-lime)}
.br-legal-n h2{font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.035em;margin-top:2em;padding-top:.8em;border-top:1.5px solid var(--br-black)}
.br-legal-n h3{font-weight:700;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.02em;margin-top:1.6em}
.br-legal-n h2+*,.br-legal-n h3+*{margin-top:.6em}
.br-legal-n ul,.br-legal-n ol{list-style:none;padding:0}
.br-legal-n li{position:relative;padding-left:1.6em}.br-legal-n li+li{margin-top:.4em}
.br-legal-n ul>li::before{content:"✦";position:absolute;left:0;top:.05em;font-size:.85em}
.br-legal-n ol{counter-reset:li}.br-legal-n ol>li{counter-increment:li}.br-legal-n ol>li::before{content:counter(li)".";position:absolute;left:0;font-weight:700}
.br-legal-n strong{font-weight:700}
.br-legal-n a{color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px;transition:background .2s}
.br-legal-n a:hover{background:var(--br-lime)}
.br-legal-n table{border-collapse:collapse;width:100%;font-size:.9em}.br-legal-n th,.br-legal-n td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--br-black);vertical-align:top}.br-legal-n th{font-weight:700}
/* Lopende tekst (reisblog, pagina's) */
.bs-prose{font-family:var(--font-sans);font-weight:300;font-size:clamp(17px,1.25vw,19px);line-height:1.6;max-width:68ch;margin:0 auto;width:100%}
.bs-prose>*{margin:0}.bs-prose>*+*{margin-top:.9em}
.bs-prose h2{font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.035em;margin-top:2em;padding-top:.8em;border-top:1.5px solid var(--br-black)}
.bs-prose h3{font-weight:700;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.02em;margin-top:1.6em}
.bs-prose h2+*,.bs-prose h3+*{margin-top:.6em}
.bs-prose ul,.bs-prose ol{list-style:none;padding:0}
.bs-prose li{position:relative;padding-left:1.6em}.bs-prose li+li{margin-top:.4em}
.bs-prose ul>li::before{content:"✦";position:absolute;left:0;top:.05em;font-size:.85em}
.bs-prose ol{counter-reset:li}.bs-prose ol>li{counter-increment:li}.bs-prose ol>li::before{content:counter(li)".";position:absolute;left:0;font-weight:700}
.bs-prose strong{font-weight:700}
.bs-prose a{color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px;transition:background .2s}
.bs-prose a:hover{background:var(--br-lime)}
.bs-prose table{border-collapse:collapse;width:100%;font-size:.9em}.bs-prose th,.bs-prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--br-black);vertical-align:top}.bs-prose th{font-weight:700}
.bs-prose{max-width:72ch}