.hn-container{max-width:var(--hn-container);margin-inline:auto;padding-inline:var(--hn-gutter)}
.hn-container--narrow{max-width:var(--hn-container-narrow)}
.hn-section{padding-block:var(--hn-section-y)}
.hn-section--tight{padding-block:var(--hn-section-y-tight)}
:root{
	/* Een scheidingslijn op een donkere grond. Stond eerder twee keer met twee
	   verschillende doorzichtigheden (.15 in de voet, .25 in de methodeband). */
	--hn-hairline-inverse:rgba(255,255,255,.2);
}
.hn-band{background:var(--surface-sunken)}
.hn-band--inverse{background:var(--surface-inverse);color:#DCEAEF}
.hn-band--inverse h1,.hn-band--inverse h2,.hn-band--inverse h3{color:var(--hn-white)}
/* Losse links in een donkere band worden licht; knoppen niet — die brengen hun
   eigen kleurenpaar mee (.hn-btn--onDark is wit met donkere letters). */
.hn-band--inverse a:not(.hn-btn){color:#B9E1F0}
/* Het sectielabel is groen (zie .hn-eyebrow), maar het diepe blad haalt op deze
   grond 1.52 en is dus onleesbaar. Op elke donkere band schakelt het over naar
   het lichte blad: 4.52. */
.hn-band--inverse .hn-eyebrow{color:var(--hn-leaf-bright)}
/* Gedempte tekst is gedempt tegen papier. Op deze grond haalt --text-muted 1.79 en is
   het niet te lezen; hier is de gewone bandkleur al de zachte kleur (6.76). Geen
   :where() — dat heeft geen gewicht en pages.css laadt later, dus dan wint het grijs. */
.hn-band--inverse .hn-sectionhead__intro,
.hn-band--inverse .hn-lede,
.hn-band--inverse .hn-muted,
.hn-band--inverse .hn-small{color:inherit}
/* De focusring is standaard --hn-brand, en dat blauw haalt op deze grond 1.93 — wie met
   het toetsenbord navigeert ziet in een donkere band dus niet waar hij staat. Wit haalt
   9.46. Geldt ook voor de voet, die dezelfde grond heeft. */
.hn-band--inverse :where(a,button):focus-visible,
.hn-footer :where(a,button):focus-visible{outline-color:var(--hn-white)}
.hn-stack{display:flex;flex-direction:column;gap:var(--hn-s4)}
.hn-row{display:flex;align-items:center;gap:var(--hn-s3);flex-wrap:wrap}
.hn-grid{display:grid;gap:var(--hn-s5)}
.hn-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hn-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hn-shop-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--hn-s6)}
@media (width < 900px){.hn-grid--3,.hn-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.hn-shop-layout{grid-template-columns:minmax(0,1fr)}}
/* Geen kleinere sectie-afstand op een telefoon: --hn-s8 regelt hem (tokens/space.css). */
@media (width < 560px){.hn-grid--2,.hn-grid--3,.hn-grid--4{grid-template-columns:minmax(0,1fr)}}