/* =============================================================================
   BRAAF. — Skeleton CSS (nieuwe laag, 2026-08)
   hallobraaf.nl

   Standalone stylesheet voor de vernieuwde site — géén dependency op
   global.scss. Bevat: fonts, minimale reset, tokens, skelet-grammatica,
   plaatsings-grammatica, halo+overlay-systeem, gedeelde componenten
   (pill, social, card-tekstniveaus) en het reveal-systeem.

   Sectie-specifieke styling leeft inline in de section-bestanden zelf
   (theme/sections/…), conform repo-conventie.

   Bron: mockup/home.html (2026-08-10) — zie .private/PLAN-home-vervanging.md.
   ============================================================================= */


/* ══ 0 · Fonts ═══════════════════════════════════════════════════════════════
   Helvetica Now Display — twee gewichten in gebruik (Medium 500 = body,
   Black 900 = display). Black won de font-test van 2026-08-11: meer
   impact dan Extra Bold 800; PP Neue Montreal viel af (nauwelijks
   onderscheidend, files geparkeerd in .trash/). */

@font-face {
	font-family: 'Helvetica Now Display';
	src: url('/theme/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Medium.woff2') format('woff2'),
	     url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Medium.woff')  format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Now Display';
	src: url('/theme/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Black.woff2') format('woff2'),
	     url('/theme/static/fonts/HelveticaNow/HelveticaNowDisplay-Black.woff')  format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}


/* ══ 0b · Minimale reset ═════════════════════════════════════════════════════ */

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* form-controls erven het pagina-font niet vanzelf — zonder deze wet
   rekenen álle em-maten erin (breedte, iconen, padding) op de 13px
   browser-default en lopen "gelijke" maten tóch uiteen */
button, input, select, textarea { font: inherit; }

p { margin: 0; }


/* ══ 1 · Tokens ══════════════════════════════════════════════════════════════
   Eén fluid clamp op body; ál het andere is em. De vier unitless
   config-vars zijn de enige knoppen (18→28px tussen 420–1600 — de
   maatvoering van de oude laag, teruggehaald 2026-08-12: grover maar
   duidelijker; leesbaarheid, logo- en knop-maat rijden er allemaal
   op mee via de em-cascade). */

:root {
	--font-size-min: 18; --font-size-max: 28;
	--font-view-min: 420; --font-view-max: 1600;

	/* type-ladder (multipliers × body) + line-height per niveau */
	--type-xl: 2.8em;  --lh-xl: 1.14;
	--type-l:  2em;    --lh-l:  1.2;
	--type-m:  1.4em;  --lh-m:  1.29;
	--lh-r: 1.4;
	--type-s:  .8em;   --lh-s:  1.5;

	/* spacing-ladder */
	--space-1: .25em; --space-2: .5em; --space-3: 1em;
	--space-4: 2em;   --space-5: 4em; --space-6: 8em;

	/* skelet-maten — breedte-conventie sm/md/rg/xl (lg = reserve-trede):
	   sm 40 (leesmaat) / md 60 / rg 80 (de content-basis, bleed rekent
	   ermee) / xl 100 (kap voor full-bleed vlakken — rand-tot-rand wordt
	   op grote schermen onbehaaglijk breed). De em-maten zijn kappen
	   voor grote schermen; op tablet komt het breedte-spel uit de
	   kolom-claims van de is-align-treden (8/10/12 kolommen + breakout),
	   die fluid meeschalen. WordPress-mapping: md=content, rg=wide,
	   xl=full. */
	--width-sm: 40em;
	--width-md: 60em;
	--width-rg: 80em;
	--width-xl: 100em;
	--gutter: 2em;
	--bleed: max(var(--gutter), calc(50vw - var(--width-rg) / 2));
	--card-outdent: 1em; /* optische uitlijning: afgeronde kaart-randen ogen
	   verder van de kant dan tekst op dezelfde lijn — kaart-verzamelingen
	   steken daarom 1em uit aan beide zijden (is-outdent, §2) */

	/* viewport-tokens (PWA-les, Calderys): browser krijgt sv-eenheden
	   (URL-balk-proof), de PWA krijgt echte vh/vw via de display-mode-
	   query hieronder — sommige Android-skins (HyperOS) maken sv-eenheden
	   in standalone te klein door browser-UI te reserveren die er niet
	   is. Nooit losse svh/vh in declaraties; partiële maten via
	   calc(var(--viewport-height) * .82). Overlays (fixed, inset 0)
	   blijven op dvh — dynamisch klopt in browser én PWA. De fluid-
	   type-formule blijft bewust op 100vw. */
	--viewport-height: 100svh;
	--viewport-width: 100svw;

	/* safe-areas (viewport-fit=cover in de meta): in de hoogte-tokens
	   verwerkt zodat alle calcs vanzelf volgen; bottom gecapt — sommige
	   Android-skins rapporteren een opgeblazen inset (iOS geeft 34px,
	   20px lucht is genoeg). */
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: min(env(safe-area-inset-bottom, 0px), 20px);

	--header-h: calc(5em + var(--safe-top)); /* 3.5em eilandjes + 1em top + .5em bottom + notch-inset — bento en ankers rekenen ermee */
	--radius: 1em; /* ui-vlakken rond i.p.v. scherp (bewuste afwijking van brand-default) */
	--radius-card: 2em; /* kaarten (bento, stack, hero, ghosts) — royaler dan de ui-maat */

	/* kleur-ankers: vaste merk-waarden die nooit mee-morphen — voor
	   plekken die hun kleur houden ongeacht de ink-morph (tekst op
	   accent-vlakken, lokale eiland-palettes) */
	--black: #020d19; /* Rich Black (zwart-bibliotheek, blauw diepst) — gekozen
	   2026-08-12: de blauwe ondertoon geeft contrast-ruimte voor het
	   blauwe alt-vlak hieronder */
	--black-soft: #101720; /* vlak-zwart: Midnight Blue (blauw-grijs) — kaarten/
	   vlakken dragen deze i.p.v. het diepe pagina/tekst-zwart; op licht
	   lees je geen verschil, in dark mode tillen vlakken zich van de
	   pagina (twee zwart-tinten, zelfde blauwe familie) */
	--white: #fafafa; /* Antiflesh uit de wit-bibliotheek (neutrale ondertoon) */

	/* surface/ink: het morphende paar — is-ink draait ze (state in tijd) */
	--surface: var(--white);
	--ink: var(--black);
	/* zachte tussenlaag: off-white vlakken (Gainsboro, wit-bibliotheek)
	   die in ink-context een off-black worden — voor randloze vlakken
	   als de intake-toelichting en de soft-pill */
	--surface-alt: #f0f0f0;
	--accent: #ffcd00;
	--hairline: color-mix(in srgb, var(--ink) 18%, transparent);

	interpolate-size: allow-keywords; /* animatable height:auto (faq) */
}
/* alt-morph: pagina naar de tussenlaag (state in tijd, zelfde gebaar
   als is-ink) — gepromoveerd uit het /artikelen-experiment 2026-08-12:
   omgekeerde lagen, de pagina wordt het off-white vlak en kaarten
   liggen er als witte vlakken bovenop. In dark mode flipt dit vanzelf
   naar vlak-zwart (--surface-alt is daar --black-soft). Vóór is-ink
   gedeclareerd: waar beide ooit samenvallen wint ink. */
body.is-alt { --surface: var(--surface-alt); }
body.is-ink { --surface: var(--black); --ink: #eeefeb; --surface-alt: var(--black-soft); } /* ink-tekst warm wit, bewust ≠ --white; alt-vlak = vlak-zwart (één vlak-laag) */

/* dark mode = alleen de pagina flipt: hetzelfde trio als de ink-morph,
   op systeemvoorkeur. Kaarten flippen níet mee — die staan op de
   ankers (--black/--white) of op hun eigen data-tint (--card-*);
   header-eilandjes en fullmenu houden hun lokale palette. */
@media (prefers-color-scheme: dark) {
	:root { --surface: var(--black); --ink: #eeefeb; --surface-alt: var(--black-soft); }
}

/* PWA (standalone/fullscreen): geen browser-UI — sv-eenheden zouden
   hier juist te klein uitpakken (zie viewport-tokens hierboven) */
@media (display-mode: standalone), (display-mode: fullscreen) {
	:root { --viewport-height: 100vh; --viewport-width: 100vw; }
}

html { scroll-behavior: smooth; margin: 0; padding: 0; }
body {
	margin: 0;
	font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
	font-weight: 500; /* Medium = body */
	line-height: var(--lh-r);
	font-size: clamp(
		calc(var(--font-size-min) * 1px),
		calc(
			(var(--font-size-min) * 1px) +
			(var(--font-size-max) - var(--font-size-min)) *
			((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))
		),
		calc(var(--font-size-max) * 1px)
	);
	background: var(--surface);
	color: var(--ink);
	transition: background 600ms ease, color 600ms ease; /* color-morph */
}


/* ══ 2 · Skelet ══════════════════════════════════════════════════════════════
   Grammatica: body → header/main/footer → sections. Elke section
   is een 12-koloms grid met bleed-padding als marge; kinderen
   claimen numeriek (skelet is numeriek), namen alleen voor
   specifieke layouts (is-align-*) en elementen (hero-payoff).
   Geen font-size op skelet-containers — em-maten blijven zuiver. */

main > section, footer > section {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	/* vangrail: 11 gaps × gutter kan op smal breder zijn dan de content
	   zelf (minmax(0,1fr)-kolommen worden 0, maar gaps blijven staan en
	   duwen het grid de viewport uit). 100%/22 cap't de gap fluid: elf
	   gaps nooit meer dan de halve content-breedte; op ruime schermen
	   wint gewoon de gutter. */
	column-gap: min(var(--gutter), calc(100% / 22));
	padding-inline: var(--bleed);
	scroll-margin-top: var(--header-h); /* anker-navigatie vrij van sticky header */
}
main > section   { padding-block: var(--space-5); }
footer > section { padding-block: var(--space-4); }

/* default-claim: wide (volle 12) */
main > section > *, footer > section > * { grid-column: 1 / -1; }

/* benoemde treden — sm/md via kolom-claims (8 resp. 10 van 12) mét
   em-kap: de claims schalen fluid, dus het indent-spel blijft op elk
   vouwpunt zichtbaar; de kap knijpt pas op ruime schermen. rg is de
   default-claim hierboven (1/-1, basis 80em via de bleed). */
.is-align-sm { grid-column: 3 / span 8;  max-width: var(--width-sm); justify-self: center; width: 100%; } /* leesmaat (40em) */
.is-align-md { grid-column: 2 / span 10; max-width: var(--width-md); justify-self: center; width: 100%; }
/* xl: breakout tot de gutter (volledig vol houdt altijd z'n
   rand-afstand), en nooit breder dan --width-xl — de max()
   kiest de minst negatieve marge: −(bleed − gutter) op kleine
   schermen, −(xl − 100%)/2 als gecentreerde kap op grote.
   --outdent (default 0) telt in beide armen mee, zodat is-outdent
   bovenop de claim werkt i.p.v. de formule te overschrijven. */
.is-align-xl {
	grid-column: 1 / -1;
	margin-inline: max(
		calc(-1 * (var(--bleed) - var(--gutter)) - var(--outdent, 0em)),
		calc((100% - var(--width-xl)) / 2 - var(--outdent, 0em))
	);
}

/* is-outdent: optische uitlijning voor kaart-verzamelingen (bento,
   impressies, masonry, dienst-kaarten, zoekbalk) — het element steekt
   --card-outdent uit aan beide zijden, bovenop z'n bestaande claim.
   Derde as naast waar-ik-sta en hoe-ik-indeel: hoe-lijn-ik-optisch.
   Op xl loopt de outdent via de formule hierboven; op de andere
   claims als simpele negatieve marge. Mobiel blijft hij staan
   (kaart op 1em van de kant i.p.v. de 2em-gutter) — bewust: het
   optische argument geldt op elk formaat. Alleen voor rand-tot-
   rand-vlakken zonder eigen tekst-lijn; tekst-treden (sm/md)
   houden de kant. */
.is-outdent { --outdent: var(--card-outdent); }
.is-outdent:not(.is-align-xl) { margin-inline: calc(-1 * var(--outdent)); }

/* is-grid: de binnenkant loopt door op het pagina-ritme — subgrid
   erft de tracks (kolommen én gutters) van de sectie, dus een
   is-align-md.is-grid heeft vanzelf 10 kolommen zonder tweede
   grid-definitie. Kinderen claimen numeriek (grid-column: 2/span 4).
   Orthogonaal aan de treden: waar-ik-sta (is-align-*) en
   hoe-ik-indeel (is-grid) zijn vrij combineerbaar. Let op: geen
   container-type op subgrid-elementen (bekende clash). */
.is-grid { display: grid; grid-template-columns: subgrid; }

/* kleine viewport: claims snappen naar 1/-1 (fluid blijft fluid) —
   mobiel lijnt strak uit, het breedte-spel is voor tablet en op */
@media (max-width: 48em) {
	.is-align-sm, .is-align-md { grid-column: 1 / -1; }
	.is-grid > * { grid-column: 1 / -1; } /* binnen-claims snappen mee */
}


/* ══ 3 · Elementen ═══════════════════════════════════════════════════════════ */

h1, h2, h3, summary { font-weight: 900; margin: 0; } /* titels = display-weight */
h1 { font-size: var(--type-xl); line-height: var(--lh-xl); }
h2 { font-size: var(--type-l);  line-height: var(--lh-l); }

/* titels breken netjes af — lange NL-samenstellingen op xl-formaat
   (chocoladereepverpakking) blazen anders de min-content-breedte van
   hun grid-track op. Volledige hyphenate-limit-set (bewezen recept):
   min 6 letters, 3 vóór en 3 ná het streepje, max 2 afbreekregels op
   rij, laatste regel nooit afbreken, alleen in de laatste 8% van de
   regel. Break-word als vangnet zonder woordenboek; balance houdt
   regels gelijkmatig. */
h1, h2, h3, .b-title {
	overflow-wrap: break-word;

	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	-webkit-hyphenate-limit-chars: 6 3 3;
	-webkit-hyphenate-limit-lines: 2;
	-webkit-hyphenate-limit-last: always;
	-webkit-hyphenate-limit-zone: 8%;

	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-last: always;
	hyphenate-limit-zone: 8%;

	text-wrap: balance;
}

/* button-labels breken nooit af — nowrap op alles knop-achtigs;
   afbreken mag alleen expliciet via .is-breakable */
:is(button, .pill, .cta) { white-space: nowrap; }
.is-breakable { white-space: normal; }

/* button-teksten zijn altijd bold — knoppen dragen display-gewicht */
:is(button, .pill, .cta) { font-weight: 900; }

/* pills: altijd volledig rond (radius ≥ halve hoogte) */
.pill {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .55em 1.3em; border-radius: 999px;
	border: 1px solid currentcolor;
	color: inherit; text-decoration: none;
	transition: background 200ms ease, color 200ms ease;
}
.pill:hover { background: var(--ink); color: var(--surface); }
.pill.is-sun { background: var(--accent); border-color: var(--accent); color: var(--black); }
.pill.is-sun:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
/* soft: randloos vlak op de tussenlaag — off-white, in ink-context
   vanzelf off-black (--surface-alt volgt de morph/dark mode) */
.pill.is-soft { background: var(--surface-alt); border-color: transparent; }
.pill.is-soft:hover { background: var(--ink); color: var(--surface); }

/* tekstlinks in lopende copy: dashed onderstreping — affordance zonder
   vlak of kleur, past op elke ondergrond. Alleen kale anchors in
   paragrafen (:not([class]) — kaart- en pill-anchors dragen een class
   en regelen zichzelf). Bezochte links verwateren naar de tussentint:
   :visited staat alleen kleur-props toe en negeert alpha, dus opaak
   mengen met --surface i.p.v. opacity — flipt vanzelf mee met dark
   mode en de ink-morph. */
main p a:not([class]) {
	color: inherit;
	text-decoration: underline dashed 1px;
	text-underline-offset: .2em;
	text-decoration-color: color-mix(in srgb, var(--ink) 50%, var(--surface));
	transition: text-decoration-color 200ms ease;
}
main p a:not([class]):hover,
main p a:not([class]):focus-visible { text-decoration-color: var(--ink); }
main p a:not([class]):visited {
	color: color-mix(in srgb, var(--ink) 65%, var(--surface));
	text-decoration-color: color-mix(in srgb, var(--ink) 40%, var(--surface));
}

/* socials: randloze icon-cirkels (de glyphs dragen zichzelf) */
.socials { display: flex; align-items: center; gap: var(--space-2); }
.social {
	display: grid; place-items: center;
	width: 2.5em; height: 2.5em; border-radius: 50%;
	color: inherit;
	transition: opacity 200ms ease;
}
.social:hover { opacity: .6; }
.social svg { width: 1.1em; height: 1.1em; }

/* card-tekstniveaus — gedeeld door bento-cards en stack-cards */
.b-label { font-size: var(--type-s); line-height: var(--lh-s); opacity: .6; }
.b-title { font-size: var(--type-m); line-height: var(--lh-m); font-weight: 900; }

/* tag: klein pill-etiket (artikel-meta, case-tags). Vorm hier, máát in
   de context — em-cascade: type-s op de component zelf zou in een
   type-s-parent dubbel verkleinen. Border in verwaterde tekstkleur
   werkt op elke ondergrond. */
.tag {
	display: inline-block; padding: .1em .8em; border-radius: 999px;
	border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
	font-weight: 900; /* pill-vormen dragen display-gewicht — duidelijker */
}

.fineprint { font-size: var(--type-s); line-height: var(--lh-s); opacity: .6; margin: 0; }


/* ══ 4 · Plaatsings-grammatica ═══════════════════════════════════════════════
   Inhoud is een cluster (geen spread) die als geheel op een 3×3-raster
   in z'n vlak landt. Twee assen, los combineerbaar; ook voor covers
   (tekst links/midden/rechts × boven/midden/onder). Vereist een
   flex-column container. */

.is-place-top    { justify-content: flex-start; }
.is-place-middle { justify-content: center; }
.is-place-bottom { justify-content: flex-end; }
.is-place-left   { align-items: flex-start; text-align: left; }
.is-place-center { align-items: center; text-align: center; }
.is-place-right  { align-items: flex-end; text-align: right; }

/* ademruimte-forcering — reserveer bewust ruimte aan een zijde,
   los van waar het cluster landt (bv. lucht boven een bottom-left
   cluster, of rechts vrijhouden voor beeld op een cover).
   --space-forced is tunebaar per element; default royaal (8em)
   zodat er echt ruimte overblijft voor achtergrond/beeld. */
.is-space-top    { padding-top:    var(--space-forced, var(--space-6)); }
.is-space-right  { padding-right:  var(--space-forced, var(--space-6)); }
.is-space-bottom { padding-bottom: var(--space-forced, var(--space-6)); }
.is-space-left   { padding-left:   var(--space-forced, var(--space-6)); }


/* ══ 5 · Overlay-systeem ═════════════════════════════════════════════════════
   Vullende overlay op kaarten: kaartkleur (--halo) → transparant vanaf de
   cluster-zijde, zodat beeld/video eronder zacht wegloopt en de tekst
   voldoende contrast houdt — geen text-shadow-halo nodig. Richting volgt
   de plaatsing (bottom-cluster default, is-place-top boven). */

/* halo = kaartkleur, nooit de morphende ink: kaarten zijn "altijd
   donker"-uitzonderingen, dus ook hun overlay (anders wordt de
   schaduw wit in dark mode). Data-tint wint als die er is. */
.b-card, .stack-card { --halo: var(--card-surface, var(--black-soft)); }
.is-orbit-card { --halo: var(--accent); }
.stack-card { --halo: var(--card, var(--black-soft)); }

:is(.b-card, .stack-card)::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, var(--halo), transparent 55%);
	border-radius: inherit;
	pointer-events: none;
}
:is(.b-card, .stack-card).is-place-top::after {
	background: linear-gradient(to bottom, var(--halo), transparent 55%);
}
/* inhoud boven de overlay; decor-lagen (aria-hidden) eronder.
   Badge uitgezonderd: die houdt z'n eigen absolute positie. */
:is(.b-card, .stack-card) > :not([aria-hidden], .badge-new) { position: relative; z-index: 1; }
.badge-new { z-index: 1; }


/* ══ 5b · Kaart-links + hover ════════════════════════════════════════════════
   Kaarten met een link zijn volledig klikbaar: óf de kaart is zelf een
   <a>, óf een .card-cover spant 'm op — een dekkende duplicaat-link
   (aria-hidden + tabindex -1; de zichtbare knop blijft de toegankelijke
   route). Expliciete knoppen in de kaart liggen met z-index boven de
   cover. Hover: de media-laag (video/beeld/illustratie) groeit zacht
   vanuit het midden; de kaart clipt op z'n radius. */

:is(.b-card, .stack-card) > .card-cover {
	position: absolute; inset: 0; z-index: 1;
	border-radius: inherit;
}
.b-card .pill { z-index: 2; } /* knop boven de cover — blijft los klikbaar */

:is(.b-media, .skills-orbit-canvas) { transition: scale 600ms cubic-bezier(.2,.8,.2,1); }
a.b-card:hover :is(.b-media, .skills-orbit-canvas),
a.stack-card:hover .b-media,
.b-card:has(> .card-cover):hover .b-media,
.stack-card:has(> .card-cover):hover .b-media { scale: 1.06; }


/* ══ 6 · Hulpzame UI ═════════════════════════════════════════════════════════ */

.skip {
	position: absolute; left: var(--gutter); top: -4em; z-index: 20;
	background: var(--ink); color: var(--surface);
	padding: .5em 1.2em; border-radius: 999px; text-decoration: none;
	transition: top 200ms ease;
}
.skip:focus-visible { top: var(--space-2); }
:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
::selection { background: var(--accent); color: var(--black); }


/* ══ 7 · Reveal-systeem (subset van braaf-inspiration/reveal-inview) ═════════
   Grammatica: data-trigger + mode once/toggle, stagger, delay, offset.
   Toggle kan een class op een ander element zetten
   (data-trigger-class/-target) → color-morph op body.
   JS in /theme/static/js/skeleton.js.
   Valkuil: een latere transition-shorthand op hetzélfde element
   (bv. background/color op een kaart) overschrijft deze
   reveal-transition volledig — het element popt dan i.p.v. glijdt.
   Neem opacity/transform + de delay-formule dan op in die lijst
   (zie home-bento .b-card). */

[class*="is-reveal-"] {
	opacity: 0;
	transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);
	transition-delay: calc(var(--i, 0) * var(--stagger, 0ms));
}
.is-reveal-up   { transform: translateY(var(--reveal-distance, 2em)); }
.is-reveal-zoom { transform: scale(.96); }
/* is-reveal-fade: puur fade — geen eigen regel nodig, de
   attribute-selector hierboven dekt 'm (opacity-only) */
.is-revealed[class*="is-reveal-"],
.is-revealed > [class*="is-reveal-"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[class*="is-reveal-"] { opacity: 1; transform: none; transition: none; }
	body { transition: none; }
	.b-media, .skills-orbit-canvas { transition: none; }
}


/* ══ 8 · Slider-affordance ═══════════════════════════════════════════════════
   Horizontale [data-slider]-scrollers: JS (skeleton.js) zet is-clipped-left/
   right zodra er die kant op te scrollen valt en plant hints sticky ín het
   scrollvlak. Breedte 0 — de gap die ze als flex-item introduceren wordt
   hier gecompenseerd via --slider-gap (default de familie-gap, override
   per scroller als die een andere gap voert). Attribuut-selector geeft
   deze regels voorrang op sectie-eigen `> li`-styling. */

[data-slider] { --slider-gap: var(--space-3); }
[data-slider] > .slider-hint {
	flex: 0 0 0; min-width: 0; padding: 0;
	position: sticky; z-index: 2;
	align-self: center;
	scroll-snap-align: none;
	display: block; list-style: none;
}
[data-slider] > .slider-hint--prev { left: 0; margin-inline-end: calc(-1 * var(--slider-gap)); }
[data-slider] > .slider-hint--next { right: 0; margin-inline-start: calc(-1 * var(--slider-gap)); }

/* de knop zelf: cirkel op de rand van het zichtvlak, verticaal gecentreerd.
   Verbergen = opacity + visibility + will-change (Safari-paint-val in
   sticky context); pointer-events uit zodat een verborgen chevron nooit
   een kaart-klik onderschept. */
.slider-hint__btn {
	position: absolute; top: 0; translate: 0 -50%; /* font via de reset-wet */
	width: 3em; aspect-ratio: 1; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--surface); color: var(--ink);
	border: 1px solid currentcolor;
	cursor: pointer;
	opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity;
	transition: opacity 200ms ease, visibility 0s 200ms, background 200ms ease, color 200ms ease;
}
.slider-hint--prev .slider-hint__btn { left: var(--gutter); }
.slider-hint--next .slider-hint__btn { right: var(--gutter); }
[data-slider].is-clipped-left  > .slider-hint--prev .slider-hint__btn,
[data-slider].is-clipped-right > .slider-hint--next .slider-hint__btn {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity 200ms ease, visibility 0s, background 200ms ease, color 200ms ease;
}
.slider-hint__btn:hover { background: var(--ink); color: var(--surface); }
.slider-hint__btn svg { width: 1.5em; height: 1.5em; } /* exact de itinerary-chevron-maat (nu op dezelfde em-basis) */

@media (prefers-reduced-motion: reduce) {
	.slider-hint__btn { transition: none; }
}