*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Manrope, system-ui, -apple-system, Segoe UI, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
  scroll-behavior: smooth;
  /* Kept off <body>: an overflow container there would break the sticky header */
  overflow-x: hidden;
}

/*
   * The sawn-grain texture belongs to the site itself, not to the components.
   * Everything that sits on top — cards, bands, the sticky header — carries a
   * solid fill, so surfaces read as clean planes laid on a grained ground.
   */

body {
  --tw-bg-opacity: 1;
  background-color: rgb(239 230 217 / var(--tw-bg-opacity, 1));
  font-family: Manrope, system-ui, -apple-system, Segoe UI, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: repeating-linear-gradient(
        90deg,
        rgba(110, 75, 50, 0.04) 0 2px,
        rgba(110, 75, 50, 0) 2px 9px
      ),
      repeating-linear-gradient(90deg, rgba(110, 75, 50, 0.03) 0 1px, rgba(110, 75, 50, 0) 1px 23px);
}

/*
   * De hoogte van de plakkende header, uitgerekend en niet geschat: verticale
   * padding plus de hoogte van het logo plus de onderrand. Drie breekpunten, want
   * de padding verspringt op lg en het logo op sm.
   *
   * Twee dingen rekenen hiermee, en dat is precies waarom het een token is: de
   * paginabalk die eronder komt hangen (.page-nav-dock) en de ruimte die een anker
   * vrijhoudt. Verandert de header van hoogte, dan volgt de rest.
   */

:root {
  --hlt-header: 77px;
  /* py-4 (32) + logo 44 + rand 1 */
  /*
     * Op elk formaat gelijk, want de balk is op elk formaat één rij: py-2 (16) +
     * tegel 43 + rand 1. Dit stond op nul zolang de balk onder lg naar twee of
     * drie rijen viel en daarom niet plakte; sinds hij daar horizontaal schuift is
     * hij ook op een telefoon 60 px, en houdt een anker die ruimte overal vrij.
     */
  --hlt-dock: 60px;
  /*
     * Eén veer, gedeeld door de CSS en het JavaScript, zodat het teken en de vouw
     * exact gelijk lopen. Een echte veer, numeriek uitgerekend en als linear()
     * uitgeschreven: onderdemping ζ = 0,78 met ω·T = 12, wat neerkomt op 2 %
     * doorschieten en daarna volledig uitgedempt. Een cubic-bezier kan dit niet —
     * die komt nooit boven 1, en juist dat overschot maakt van een schuifbeweging
     * een vouw.
     *
     * Waarom 2 % en niet de 8,4 % die er eerst stond: hoogte is geen eigenschap die
     * de compositor kan afhandelen. Elke frame kost een herberekening van de
     * layout, en 8,4 % op een antwoord van 120 px betekent dat het paneel tien
     * pixels te ver opengaat en terugzakt — waarbij alles eronder in de lijst
     * meebeweegt. Op één element leest dat als karakter, in een lijst als
     * gewiebel. Twee procent voelt nog als een veer en verplaatst de pagina niet.
     */
  --hlt-spring: linear(
      0, 0.0961, 0.2938, 0.5045, 0.6854, 0.8218, 0.9146, 0.9717, 1.003, 1.016,
      1.02, 1.018, 1.014, 1.01, 1.006, 1.004, 1.002, 1.001, 1, 0.9997, 0.9996,
      0.9996, 0.9997, 0.9998, 0.9999
    );
  --hlt-fold: 460ms;
  /*
     * Dichtvouwen krijgt een ándere curve, en dat is geen smaakkwestie.
     *
     * De veer hierboven schiet 8,4 % door. Bij openen is dat precies de bedoeling:
     * de hoogte gaat iets voorbij de eindwaarde en zakt terug. Bij sluiten gaat de
     * hoogte naar 0, en 8,4 % voorbij 0 is een negatieve hoogte — die klemt de
     * browser op 0. Gevolg: het paneel is na ongeveer 190 ms al dicht en daarna
     * gebeurt er 270 ms lang niets, terwijl de animatie nog loopt. Dat leest niet
     * als vertraging maar als vastlopen.
     *
     * Dus: een veer om ergens aan te komen, een versnelling om te vertrekken. Deze
     * curve begint rustig en trekt door tot 0 zonder tail, in 260 ms.
     */
  --hlt-collapse: 260ms;
  --hlt-collapse-ease: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 640px) {
  :root {
    --hlt-header: 85px;
    /* py-4 (32) + logo 52 + rand 1 */
  }
}

@media (min-width: 1024px) {
  :root {
    --hlt-header: 89px;
    /* py-[18px] (36) + logo 52 + rand 1 */
  }
}

/*
   * Een anker moet onder de header én onder de paginabalk uitkomen. De opslag
   * geldt op elke pagina, ook waar geen balk staat; daar land je dan een halve
   * balkhoogte ruimer, en dat is witruimte boven een kop in plaats van een kop die
   * half onder een balk wegvalt.
   */

[id] {
  scroll-margin-top: calc(var(--hlt-header) + var(--hlt-dock) + 16px);
}

::-moz-selection {
  background: #e4d5c3;
}

::selection {
  background: #e4d5c3;
}

:focus-visible {
  outline: 2px solid #6e4b32;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
    *::before,
    *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ---------- Layout ---------- */

.shell {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1360px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .shell {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ---------- Sectievlakken ---------- */

/*
   * Eén vlak per sectie, met een voeg als grens.
   *
   * Hiervoor liep hetzelfde zandvlak van boven tot onder door en verschilde er
   * tussen secties alleen witruimte — daardoor las niets als een eigen sectie.
   * De pagina wordt nu gelezen zoals een vloer wordt gelegd: banen naast
   * elkaar, met een voeg ertussen. De ruwe, generfde pagina blijft zichtbaar
   * tussen de banen; dat is het papier waarop de rest ligt.
   *
   * Hoe donker een vlak mag worden, hangt af van de kleinste tekst erop. Dat
   * was de knelpunt-tint taupe, en die is nu donker genoeg (#6E6053) om op elk
   * lichte vlak dat we gebruiken 4,5:1 te halen: zand 4,91, sand-50 5,40, en
   * in een prose-note — de donkerste door de cocoa-waas van 5% — nog 4,57.
   *
   * Sand-200 haalt het niet: daar blijft kleine tekst op 4,07 steken. Dat vlak
   * is daarom alleen voor de galerij, die vrijwel uit foto's bestaat en geen
   * kleine tekst draagt. Een baan waarop gelezen wordt, gebruikt band-bone.
   * (Eerder stond hier dat taupe op bone 3,68:1 haalde; dat is 2,54:1 — de
   * 3,68 hoorde bij sand-50.)
   */

.band {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: rgb(110 75 50 / 0.1);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .band {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .band {
    padding-top: 86px;
    padding-bottom: 86px;
  }
}

.band-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(67 48 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(216 200 182 / var(--tw-text-opacity, 1));
}

/* Paneel: het lichtste vlak, met plankbanen erin. Hier wordt iets bekeken of
     gelezen, dus het leest als een gelegd vlak in plaats van als ruw papier. */

.band-bone {
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 230 / var(--tw-bg-opacity, 1));
  background-image: repeating-linear-gradient(
        180deg,
        rgba(110, 75, 50, 0.045) 0 1px,
        rgba(110, 75, 50, 0) 1px 44px
      ),
      repeating-linear-gradient(90deg, rgba(110, 75, 50, 0.03) 0 1px, rgba(110, 75, 50, 0) 1px 176px);
}

/* Alleen voor de galerij. Kleine tekst haalt op sand-200 geen 4,5:1 — ook niet
     met de donkerder taupe (4,07) en niet met stone (4,17) — dus dit vlak mag
     niets kleiner dan een kop dragen. Wordt er op een baan gelezen, dan is het
     band-bone. De sferenbaan en de routebaan stonden hier eerder wél op en zijn
     daarom verplaatst. */

.band-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(226 211 190 / var(--tw-bg-opacity, 1));
}

/* ---------- Lange pagina: banen van rand tot rand ---------- */

/*
   * Eén raster over de hele pagina. De banen spannen álle kolommen — van rand tot
   * rand, zodat hun ondergrond het scherm raakt — en zetten hun eigen inhoud terug
   * in de middenkolom met een genest raster dat exact hetzelfde template heeft.
   * Subgrid is daarvoor niet nodig: hetzelfde template op dezelfde breedte geeft
   * dezelfde kolomgrenzen.
   *
   * De middenkolom is 1296 px plus 2×32 px marge, gelijk aan .shell. Zo staat de
   * tekst op deze pagina's op precies dezelfde lijn als op de homepage.
   *
   * Hier heeft een smalle, meelopende kolom voor de inhoudsopgave gestaan, met een
   * eigen rasterkolom en een rijspan om sticky de volle hoogte te geven. Die is
   * vervangen door .page-nav — een liggende baan tegels bovenaan. Daarmee konden de
   * railkolom, de rijspan en de sticky eruit, en is dit raster weer wat het moet
   * zijn: bleed, midden, bleed.
   */

.doc,
  .doc-band {
  display: grid;
  grid-template-columns:
      [bleed-start] minmax(1.25rem, 1fr)
      [main-start] minmax(0, 1296px)
      [main-end] minmax(1.25rem, 1fr)
      [bleed-end];
}

/*
   * De banen lopen tot de rand, hun inhoud niet.
   *
   * `.doc > .doc-band` en niet `.doc-band`, en dat is geen stijlkwestie. Een baan
   * is zelf een kind van .doc, dus de regel hieronder raakt hem ook, en op
   * gelijke specificiteit (0,1,0) wint de laatste — dan zou de baan in de
   * middenkolom belanden en helemaal niet bleeden. Met de ouder erbij is het
   * (0,2,0) en staat de uitkomst vast, ongeacht de volgorde in dit bestand.
   */

.doc > .doc-band {
  grid-column: bleed-start / bleed-end;
}

.doc > *,
  .doc-band > * {
  grid-column: main-start / main-end;
  min-width: 0;
}

/* Vanaf sm dezelfde marge als .shell (32 px in plaats van 20). */

@media (min-width: 640px) {
  .doc,
    .doc-band {
    grid-template-columns:
        [bleed-start] minmax(2rem, 1fr)
        [main-start] minmax(0, 1296px)
        [main-end] minmax(2rem, 1fr)
        [bleed-end];
  }
}

/* ---------- Paginanavigatie: een baan tegels ---------- */

/*
   * Hier stond een meelopende kolom links. Wat er nu staat is de index als een
   * gelégde baan: zes tegels naast elkaar met een voeg ertussen, precies zoals de
   * banen eronder liggen. Het is de enige plek op de pagina waar het raster
   * horizontaal loopt, en daardoor leest het meteen als de plattegrond in plaats
   * van als nog een rij knoppen.
   *
   * De tegel waar je staat is GEVULD in plaats van onderstreept: gelegd tegenover
   * nog te leggen. Dat gebaar bestaat alleen op een site over vloeren, en het is
   * de reden dat dit werkt waar een onderstreping generiek was gebleven.
   *
   * Niet sticky, en dat is een keuze en geen beperking. Elke baan kondigt zich al
   * aan met een eyebrow, een kop en een lede — dat is de wegwijzer tíjdens het
   * lezen. Deze baan doet het andere werk, één keer bovenaan: kiezen waar je
   * begint. Twee dingen die hetzelfde zeggen levert alleen chroom op, en boven een
   * al plakkende header waren dat twee balken op elkaar.
   *
   * De voegen zijn gap-px op een sand-400 ondergrond: de gaten láten de ondergrond
   * zien in plaats van dat elke tegel een rand krijgt. Zo blijft de voeg overal
   * exact één pixel, ook tussen de rijen als het naar twee of drie kolommen valt.
   * De radius van 3 px is die van .plank — het is dezelfde tegel.
   */

/*
   * De balk hangt onder de header, en daarvoor moet hij BUITEN .doc staan. Een
   * sticky rasteritem zit opgesloten in zijn eigen rij, en één rij hoog is nergens
   * om in te schuiven — dat is dezelfde reden waarom de oude kolom een rijspan van
   * 30 nodig had. Als broer van .doc is de blokcontainer eromheen de volle
   * paginahoogte en werkt sticky zonder trucs.
   *
   * z-40 blijft onder de z-50 van de header. Overlappen doen ze niet — de top staat
   * precies op de headerhoogte — maar de inhoud die eronder doorschuift moet wél
   * onder beide door.
   *
   * Een ondergrond is hier geen decoratie maar noodzaak: zonder dekking schuift de
   * tekst door de voegen tussen de tegels heen. Dezelfde behandeling als de header
   * (sand met blur), zodat de twee als één balk in twee lagen lezen.
   */

/* Plakt op elk formaat. De voorwaarde daarvoor — één rij, dus 60 px in plaats
     van 140 — staat bij .page-nav hieronder. */

.page-nav-dock {
  position: sticky;
  z-index: 40;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
  background-color: rgb(239 230 217 / 0.9);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-backdrop-blur: blur(14px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  top: var(--hlt-header);
}

/*
   * De voeg zit op de tegels en niet op de baan eronder. Met gap-px op een
   * gevulde container werkte het alleen bij precies zes tegels: 6 deelt door 2, 3
   * en 6, dus elke rij was vol. Bij zeven bleef de rest van de tweede rij als
   * massief vlak staan — op alle drie de breekpunten. Nu tekenen de tegels hun
   * eigen haarlijn en is een lege cel simpelweg leeg.
   */

/*
   * Twee standen, en het verschil zit in of alles past.
   *
   * Onder lg is dit één rij die horizontaal schuift. Dat is geen sierlijkheid maar
   * de voorwaarde om te kunnen plakken: als raster viel de balk daar naar twee of
   * drie rijen en werd hij ruim 140 px hoog — plakkend onder een header van 77 px
   * is dat de helft van een telefoonscherm aan vast chroom. Als schuivende rij is
   * hij 60 px, net als op lg, en dat is precies wat --hlt-dock nu overal aanhoudt.
   *
   * Vanaf lg passen alle tegels naast elkaar. Het aantal kolommen staat daar niet
   * vast maar volgt het aantal tegels: grid-flow-col met auto-cols-fr legt ze op
   * één rij, of het er zes zijn of acht. auto-cols-fr is minmax(0,1fr) en niet
   * minmax(auto,1fr), dus een lang label breekt over twee regels in plaats van de
   * balk breder te maken dan de shell.
   *
   * De schuifbalk zelf is verborgen: de tegels lopen zichtbaar door de rand heen,
   * en dat is het teken dat er meer staat. Een grijze balk eronder is dat niet.
   */

.page-nav {
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  overflow-x: auto;
  border-radius: 3px;
  border-left-width: 1px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 191 166 / var(--tw-border-opacity, 1));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-nav::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .page-nav {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    overflow: hidden;
  }
}

.page-nav-tile {
  flex-shrink: 0;
  scroll-snap-align: start;
  white-space: nowrap;
  border-bottom-width: 1px;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 191 166 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 230 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(107 84 66 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 640px) {
  .page-nav-tile {
    font-size: 14px;
  }
}

/* Vanaf lg verdeelt het raster de breedte; dan mag een lang label wél afbreken. */

@media (min-width: 1024px) {
  .page-nav-tile {
    white-space: normal;
  }
}

@media (hover: hover) {
  .page-nav-tile:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(246 242 236 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  }
}

/* main.js zet is-current op de tegel van de sectie die in beeld staat. */

.page-nav-tile.is-current {
  --tw-bg-opacity: 1;
  background-color: rgb(110 75 50 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
}

/*
   * Kop naast de tekst, of kop erboven — en dat hangt af van wat eronder staat,
   * niet van willekeur. Een baan met leestekst krijgt de kop in een eigen kolom
   * ernaast: dat vult de breedte die de weggehaalde kolom achterliet en houdt de
   * regellengte op 68 tekens. Een baan met een breed raster erin (de vier kaarten,
   * de zes patronen) houdt de kop erboven, want dat raster heeft de volle breedte
   * nodig. Zelfde kopgrammatica, andere plaatsing.
   */

.band-split {
  display: grid;
  align-items: flex-start;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .band-split {
    grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
    gap: 4rem;
  }
}

/*
   * Sectiekop: kop links, toelichting rechts, beide hangend aan dezelfde
   * haarlijn. Met justify-between stond die toelichting vierhonderd pixels van
   * zijn kop af zonder iets ertussen — dan leest het als tekst die van de
   * pagina is gevallen. De rechterkolom heeft nu een vaste maat, dus de ruimte
   * ertussen is een kolomgoot en die is in elke sectie gelijk.
   */

/* items-baseline, niet items-end: zo begint de toelichting op dezelfde
     schriftlijn als de kop. Bij onderaan uitlijnen torende een toelichting van
     vier regels boven een kop van één regel uit. */

.section-head {
  display: grid;
  row-gap: 1.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: minmax(0,1fr) minmax(0,330px);
    align-items: baseline;
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}

.section-head-note {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(107 84 66 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .section-head-note {
    font-size: 15.5px;
  }
}

/* ---------- Type ---------- */

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  --tw-text-opacity: 1;
  color: rgb(110 96 83 / var(--tw-text-opacity, 1));
}

.h1-display {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.h2-display {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.h3-display {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lede {
  font-size: 17px;
  line-height: 1.65;
  --tw-text-opacity: 1;
  color: rgb(107 84 66 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .lede {
    font-size: 18.5px;
    line-height: 1.62;
  }
}

/* ---------- Buttons & links ---------- */

/*
   * Een lift zit alleen op wat je echt kunt aanklikken. Een kaart of tegel
   * zonder link komt niet omhoog: beweging onder de cursor belooft dat er iets
   * gebeurt, en dat moet dan ook zo zijn.
   *
   * Wat je alleen leest mag wél laten zien dat je het aanwijst, maar dan in een
   * eigen vocabulaire — zie "Tweede register: nadruk" onder Surfaces.
   */

.btn-primary {
  --btn-lift: 0 12px 22px -12px rgba(59, 42, 29, 0.42);
  --btn-press: 0 3px 8px -6px rgba(59, 42, 29, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  --tw-shadow: 0 0 0 0 rgba(59,42,29,0);
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: var(--btn-lift);
    --tw-shadow-colored: var(--btn-lift);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 190ms,190ms,150ms,150ms,150ms;
    transition-timing-function: cubic-bezier(0.22,0.7,0.3,1);
  }
}

.btn-primary:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--btn-press);
  --tw-shadow-colored: var(--btn-press);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
      --tw-translate-y: 0px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
}

@media (min-width: 640px) {
  .btn-primary {
    font-size: 15.5px;
  }
}

.btn-primary {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 140ms, 140ms, 120ms, 120ms, 120ms;
  transition-timing-function: var(--hlt-collapse-ease);
  --tw-bg-opacity: 1;
  background-color: rgb(110 75 50 / var(--tw-bg-opacity, 1));
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(138 94 62 / var(--tw-bg-opacity, 1));
  }
}

@media (min-width: 640px) {
  .btn-primary {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.btn-outline {
  --btn-lift: 0 12px 22px -12px rgba(59, 42, 29, 0.42);
  --btn-press: 0 3px 8px -6px rgba(59, 42, 29, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  --tw-shadow: 0 0 0 0 rgba(59,42,29,0);
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: var(--btn-lift);
    --tw-shadow-colored: var(--btn-lift);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 190ms,190ms,150ms,150ms,150ms;
    transition-timing-function: cubic-bezier(0.22,0.7,0.3,1);
  }
}

.btn-outline:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--btn-press);
  --tw-shadow-colored: var(--btn-press);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .btn-outline:hover {
      --tw-translate-y: 0px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
}

@media (min-width: 640px) {
  .btn-outline {
    font-size: 15.5px;
  }
}

.btn-outline {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 140ms, 140ms, 120ms, 120ms, 120ms;
  transition-timing-function: var(--hlt-collapse-ease);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(201 188 172 / var(--tw-border-opacity, 1));
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    --tw-border-opacity: 1;
    border-color: rgb(59 42 29 / var(--tw-border-opacity, 1));
  }
}

@media (min-width: 640px) {
  .btn-outline {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.btn-cream {
  --btn-lift: 0 12px 22px -12px rgba(59, 42, 29, 0.42);
  --btn-press: 0 3px 8px -6px rgba(59, 42, 29, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  --tw-shadow: 0 0 0 0 rgba(59,42,29,0);
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .btn-cream:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: var(--btn-lift);
    --tw-shadow-colored: var(--btn-lift);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 190ms,190ms,150ms,150ms,150ms;
    transition-timing-function: cubic-bezier(0.22,0.7,0.3,1);
  }
}

.btn-cream:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--btn-press);
  --tw-shadow-colored: var(--btn-press);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .btn-cream:hover {
      --tw-translate-y: 0px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
}

@media (min-width: 640px) {
  .btn-cream {
    font-size: 15.5px;
  }
}

.btn-cream {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 140ms, 140ms, 120ms, 120ms, 120ms;
  transition-timing-function: var(--hlt-collapse-ease);
  --tw-bg-opacity: 1;
  background-color: rgb(246 242 236 / var(--tw-bg-opacity, 1));
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 15px;
  padding-bottom: 15px;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

@media (hover: hover) and (pointer: fine) {
  .btn-cream:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
  }
}

@media (min-width: 640px) {
  .btn-cream {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.btn-cream {
  --btn-lift: 0 12px 24px -12px rgba(0, 0, 0, 0.55);
  --btn-press: 0 3px 8px -6px rgba(0, 0, 0, 0.5);
}

.btn-dark-outline {
  --btn-lift: 0 12px 22px -12px rgba(59, 42, 29, 0.42);
  --btn-press: 0 3px 8px -6px rgba(59, 42, 29, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  --tw-shadow: 0 0 0 0 rgba(59,42,29,0);
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .btn-dark-outline:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: var(--btn-lift);
    --tw-shadow-colored: var(--btn-lift);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 190ms,190ms,150ms,150ms,150ms;
    transition-timing-function: cubic-bezier(0.22,0.7,0.3,1);
  }
}

.btn-dark-outline:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--btn-press);
  --tw-shadow-colored: var(--btn-press);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .btn-dark-outline:hover {
      --tw-translate-y: 0px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
}

@media (min-width: 640px) {
  .btn-dark-outline {
    font-size: 15.5px;
  }
}

.btn-dark-outline {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 140ms, 140ms, 120ms, 120ms, 120ms;
  transition-timing-function: var(--hlt-collapse-ease);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 84 66 / var(--tw-border-opacity, 1));
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 15px;
  padding-bottom: 15px;
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
}

@media (hover: hover) and (pointer: fine) {
  .btn-dark-outline:hover {
    --tw-border-opacity: 1;
    border-color: rgb(246 242 236 / var(--tw-border-opacity, 1));
  }
}

@media (min-width: 640px) {
  .btn-dark-outline {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.btn-dark-outline {
  --btn-lift: 0 12px 24px -12px rgba(0, 0, 0, 0.55);
  --btn-press: 0 3px 8px -6px rgba(0, 0, 0, 0.5);
}

.link-arrow {
  position: relative;
  display: inline-block;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(201 188 172 / var(--tw-border-opacity, 1));
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

/* Een donkere lijn loopt over de bestaande haarlijn heen in plaats van er
     ineens te staan — als een voeg die zich vult. */

.link-arrow::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0px;
  height: 1px;
  width: 100%;
  transform-origin: left;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(59 42 29 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/*
   * Zelf uitgeschreven :hover valt buiten de hoverOnlyWhenSupported-vlag uit
   * tailwind.config.js — die geldt alleen voor de hover:-variant. Daarom staan
   * deze drie hier met de hand achter de media query, anders blijft de veeg op
   * een touchscreen staan na het tikken.
   */

@media (hover: hover) {
  .link-arrow:hover::after {
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* Hoofdmenu: zelfde beweging, lichter van toon. De actieve pagina houdt zijn
     bronzen streep en mag daar bovenop nog steeds de veeg krijgen. */

.nav-link {
  position: relative;
  border-bottom-width: 1px;
  border-color: transparent;
  padding-bottom: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0px;
  height: 1px;
  width: 100%;
  transform-origin: left;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(201 188 172 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) {
  .nav-link:hover::after {
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.nav-link-active {
  --tw-border-opacity: 1;
  border-color: rgb(181 130 90 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(110 75 50 / var(--tw-text-opacity, 1));
}

/* ---------- Surfaces ---------- */

.card-paper {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 230 / var(--tw-bg-opacity, 1));
}

/*
   * Alleen een kaart die zelf een link is komt omhoog. De selector staat op het
   * element, dus dat gaat automatisch goed: negen kaarten zijn een <a>, de rest
   * is een <article> of een <div> en blijft stilstaan.
   *
   * a.card-paper is specifieker dan de losse .transition-colors die in de
   * opmaak staat, dus de transition hier wint en de sprong wordt een beweging.
   */

a.card-paper {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (hover: hover) and (pointer: fine) {
  a.card-paper:hover {
    --tw-translate-y: -3px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-color: rgb(201 188 172 / var(--tw-border-opacity, 1));
  }
}

/* ---------- Tweede register: nadruk ---------- */

/*
   * De regel hierboven zegt wat er omhoog mag komen. Dit is het vervolg: de
   * bezoeker wijst ook dingen aan die hij uitsluitend leest — een regel uit
   * "Waarom keramiek", een klantervaring — en dan mag zichtbaar zijn wélke hij
   * aanwijst. Dat is een tweede register, en het moet in één oogopslag van het
   * eerste te scheiden zijn. Twee zinnen, niet meer, en ze gelden op elke plek
   * waar dit register hangt:
   *
   *   1. DE VOEG WORDT WARM. De haarlijn die het blok toch al omlijst gaat van
   *      sand-300 naar brons. Bij een rij zijn dat de twee voegen erboven en
   *      eronder, bij een kaart is dat zijn eigen rand.
   *   2. ER KOMT LICHT ACHTER DE TEKST. Een wash van cocoa op vier procent, net
   *      genoeg om de rij of de kaart als één vlak te lezen.
   *   3. HET BRONZEN TEKEN KOMT NAAR VOREN. Elk blok in dit register bezit één
   *      bronzen leesteken — het teken in de tekenkolom, de sterrenrij op een
   *      kaart — en dat verdiept naar cocoa. Is het teken één losse
   *      display-glyph, dan groeit het bovendien tien procent op zijn plek.
   *   4. HEEFT HET BLOK EEN FOTO, dan komt die zes procent naar je toe binnen
   *      zijn eigen kader. Zie .img-hover.
   *
   * Het onderscheid met het eerste register zit niet in hoevéél er gebeurt maar
   * in WAT er verandert, en dat is de regel om te onthouden:
   *
   *     nadruk gaat naar een andere TINT — brons, cocoa — en blijft liggen.
   *     belofte gaat naar een donkerdere WAARDE — sand-500 — en komt omhoog.
   *
   * Wat er met opzet NIET in zit: de veeg die zich van links vult. Dat gebaar is
   * van .link-arrow en .nav-link en betekent op deze site inmiddels "hier valt
   * te klikken"; het lenen voor leestekst maakt precies de verwarring die we
   * hier proberen op te lossen. Verder geen lift en geen schaduw — een kaart die
   * op hover schaduw krijgt is het meest universele klik-signaal dat er is,
   * sterker nog dan drie pixels omhoog.
   *
   * 200ms en geen eigen easing: kort genoeg om bij de cursor te horen, lang
   * genoeg om niet te klikken. Alleen het beeld mag langer doen — zie de noot daar.
   */

/*
   * TECHNISCHE NOOT — niet weghalen. Deze <figure> is een direct kind van een
   * [data-reveal]-houder, en onderaan dit bestand staat
   * `.js-aos [data-reveal] > * { transform: …; transition-property: opacity,
   * transform }`. Tailwind 3 schrijft geen echte cascade layers uit, dus dat is
   * gewone bronvolgorde plus specificiteit: die regel staat achteraan én weegt
   * (0,2,0). Alles wat hiervandaan met een class of class+:hover naar de figure
   * zélf grijpt, verliest daarvan. Dus geen transform op de figure — die vecht
   * ook met de reveal — en er hoort hier geen transition-property op de figure,
   * want die zou het niet halen en dan klikt een randkleur erop in plaats van
   * dat hij loopt. Het ::after hieronder wordt door die selector niet geraakt
   * (transition-property erft niet) en houdt zijn eigen overgang.
   *
   * De ring ligt op -inset-px met rounded-2xl, en dat is exact de border-box van
   * .card-paper: zijn 1px landt daarmee precies ÓP de bestaande sand-300 rand.
   * De rand wordt dieper en niet dikker. Met inset-0 of een grotere radius krijg
   * je 2px, en dan leest het als een selectiekader om een formulierveld.
   */

/* z-0 maakt van de kaart een stapelcontext, en dat is nodig voor de ::before
     hieronder: zonder eigen context zakt een negatieve z-index door de kaart
     heen en verdwijnt de wash achter zijn eigen vulling. */

.review-card {
  position: relative;
  z-index: 0;
}

/* De wash. z-[-1] legt hem bóven de vulling van .card-paper en ónder de tekst,
     dus het citaat blijft op volle sterkte staan. inset-0 meet vanaf de
     padding-box, dus de bestaande rand blijft vrij; vandaar ook 15 px radius en
     niet 16 — dat is de binnenmaat van een rounded-2xl met een rand van 1 px. */

.review-card::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -1;
  border-radius: 15px;
  background-color: rgb(110 75 50 / 0.045);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.review-card::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(181 130 90 / var(--tw-border-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/*
   * Maat, letterafstand en kleur staan hier en niet meer als utilities in de
   * opmaak. In deze build zou het met die utilities ook goed gaan — zonder echte
   * layers verslaat .review-card:hover .review-stars (0,3,0) gewoon .text-bronze
   * (0,1,0) — maar dat is een val voor de volgende: onder Tailwind 4 zijn die
   * layers wél echt en wint de utility alsnog. Dan blijft de sterrenrij stil
   * staan zonder dat er iets stukgaat om op te zoeken.
   */

.review-stars {
  font-size: 15px;
  letter-spacing: 0.14em;
  --tw-text-opacity: 1;
  color: rgb(181 130 90 / var(--tw-text-opacity, 1));
  transition-property: color;
  transition-duration: 200ms;
}

/* Zelf uitgeschreven :hover valt buiten de hoverOnlyWhenSupported-vlag — zie
     de noot bij .link-arrow. Zonder deze query blijft de ring op een touchscreen
     om de kaart staan die je als laatste hebt aangetikt. */

@media (hover: hover) {
  .review-card:hover::after {
    opacity: 1;
  }

  /* Brons naar cocoa. Op papier wordt pigment in meer licht niet lichter maar
       verzadigder, dus het teken zakt de diepte in; naar lichter toe zou het
       verbleken, en dat leest als uitgaan. */

  .review-card:hover .review-stars {
    --tw-text-opacity: 1;
    color: rgb(110 75 50 / var(--tw-text-opacity, 1));
  }
}

/*
   * Beeld in het nadruk-register. Een foto bezit geen haarlijn en geen leesteken,
   * dus daar doet het beeld zelf het werk: het komt zes procent naar je toe
   * binnen zijn eigen kader. Het kader staat stil — dat is het verschil met een
   * kaart die je kunt aanklikken, want daar beweegt de kaart en niet de inhoud.
   *
   * 500ms en niet de 200 van de rest: een beeld dat in tweehonderd milliseconden
   * opzwelt schrikt, en het kader knipt de beweging toch al af, dus er is tijd om
   * het rustig te doen.
   *
   * Zet .img-hover op het KADER, niet op de <img>. De overflow-hidden hoort er
   * daarom bij: hij staat op de meeste kaders al, maar niet op alle, en zonder
   * hem loopt het beeld over zijn hoeken heen. De placeholder doet mee, want
   * zolang een foto nog niet geleverd is staat die op zijn plek.
   *
   * MET OPZET NIET op de hero's (index.php, partials/_page_hero.php) en niet op
   * het showroomblok: dat zijn de drie plekken waar het beeld al de hoofdrol
   * heeft. Beweging voegt daar niets toe en trekt de aandacht van de kop weg.
   */

.img-hover {
  overflow: hidden;
}

.img-hover img,
  .img-hover .img-placeholder {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) {
  .img-hover:hover img,
    .img-hover:hover .img-placeholder {
    --tw-scale-x: 1.06;
    --tw-scale-y: 1.06;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* ---------- Staal op de foto ---------- */

/*
   * De kaart toont de ruimte; daarop ligt het staal. Zo werkt het in een
   * showroom ook — je legt een losse tegel op de vloer en houdt hem naast het
   * licht dat er die dag valt. Op een pagina waar iemand moet kiezen welke
   * houtlook bij zijn kamer past, is dat de twee dingen die hij nodig heeft in
   * één beeld: de nerf van dichtbij én de vloer op afstand.
   *
   * Het staal staat BUITEN .img-hover en niet erin. Anders zou het meeschalen
   * als de foto naar je toe komt, en een staal dat meebeweegt met de vloer
   * eronder is precies niet het idee — het ligt erop, het hoort er niet bij.
   *
   * De schaduw mag hier wel, terwijl het nadruk-register hem verbiedt: dat verbod
   * gold voor hover-feedback op iets dat niet klikbaar is. Dit is geen feedback
   * maar volume — een plat vlakje op een foto leest anders niet als een tegel die
   * ergens op ligt.
   */

.sample-chip {
  pointer-events: none;
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  height: 72px;
  width: 72px;
  overflow: hidden;
  border-radius: 10px;
  border-width: 1px;
  border-color: rgb(246 242 236 / 0.7);
}

@media (min-width: 640px) {
  .sample-chip {
    bottom: 1rem;
    right: 1rem;
    height: 84px;
    width: 84px;
  }
}

.sample-chip {
  box-shadow: 0 10px 22px -10px rgba(59, 42, 29, 0.6);
}

/* ---------- Hairline data rows ---------- */

/*
   * Haarlijnen met divide-y in plaats van gap-px op een gevulde ondergrond.
   * Met die truc had elke rij een eigen vulling in bg-sand nodig, en die staat
   * alleen goed op het zandvlak: op een lichter sectievlak werd de hele reeks
   * een zichtbare doos. Zonder vulling volgen de rijen elk vlak waar ze op
   * liggen, en dat is wat de haarlijnen ook bedoelen.
   */

.rule-rows {
  display: grid;
}

.rule-rows > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-divide-opacity, 1));
}

.rule-rows {
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
}

/* relative is er alleen voor de ::after die de voegen verdiept — zie het
     nadruk-register onder Surfaces. Aan de layout verandert het niets: een
     absoluut gepositioneerd kind valt uit de gridflow, dus het teken houdt zijn
     eigen cel van 34 of 44 px. */

/* De wash staat hier op het element zelf en niet op een pseudo: een rij heeft
     geen eigen vulling om onderuit te zakken, dus een background-color landt
     vanzelf achter de tekst. Een ::before met een negatieve z-index zou hier
     door de sectie heen vallen. */

.rule-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  padding-right: 0.25rem;
}

@media (min-width: 640px) {
  .rule-row {
    grid-template-columns: 44px 1fr;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.rule-row {
  transition-property: background-color;
  transition-duration: 200ms;
}

/*
   * De rij wordt aan twee kanten ingeklemd: de voeg erboven én de voeg eronder
   * lopen samen een tint dieper. Eén voeg zou de vraag oproepen bij wélke van de
   * twee rijen hij hoort, en die vraag moet je daarna met een kleurwissel op de
   * kop gaan repareren. Twee voegen zetten de rij tussen aanhalingstekens, en
   * dat ís de uitspraak — daarom krijgen .rule-title en .rule-body hier niets.
   *
   * -inset-y-px klopt in één keer op alle vier de posities, en dat is de reden om
   * het zo te doen en niet met losse randen. Een absoluut kind meet vanaf de
   * padding-box, en die loopt hier tot de rand van de rij: bij een rij met een
   * divide-voeg valt top:-1px precies op zijn eigen border-top, en bij de eerste
   * en de laatste rij, die er geen hebben, op de border-y van .rule-rows zelf.
   * Eén geometrie, geen :first-child/:last-child uitzonderingen. inset-x-0 en
   * niet iets met de pr-1 erin verrekend: die padding zit binnen dezelfde
   * padding-box, dus links en rechts op 0 dekt de voeg al over zijn volle breedte.
   *
   * z-[1] is geen luxe. Alle rijen zijn nu relative, dus de rij eronder tekent
   * zijn eigen divide-voeg ná onze onderste lijn en zou die weer in sand-300
   * overschrijven. Met z-index gaat de diepere voeg over álle randen heen en ziet
   * iedere rij er hetzelfde uit, ook de laatste.
   */

.rule-row::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0px;
  right: 0px;
  z-index: 1;
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(181 130 90 / var(--tw-border-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.rule-marker {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: 18px;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(181 130 90 / var(--tw-text-opacity, 1));
}

/*
   * Derde markering, naast de 01–04 en de plus/min. Voor een rij die géén
   * rangorde heeft en géén voor- of nadeel is — vier prijsdrijvers, drie eisen
   * aan een buitentegel — en waar een nummer dus een volgorde zou beloven die er
   * niet is. Het is hetzelfde plankje dat in de prose-lijsten voor de opsomming
   * staat, dus de lezer kent het al.
   */

.rule-plank {
  margin-top: 0.625rem;
  height: 3px;
  width: 13px;
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
}

/*
   * Plus of min in plaats van 01–04. Die nummers stonden al in de donkere balk
   * bovenaan, waar ze een echte volgorde aangeven; hier zijn het vier losse
   * punten zonder rangorde. Het teken zegt wél iets: drie voordelen en één
   * aandachtspunt, precies wat de laatste rij belooft.
   */

.rule-sign {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: 24px;
  line-height: 0.8;
  --tw-text-opacity: 1;
  color: rgb(181 130 90 / var(--tw-text-opacity, 1));
}

/*
   * Het teken groeit tien procent op zijn plek. Dat is met opzet hetzelfde
   * gebaar als het plusje van .faq-item — zelfde glyph-familie, zelfde tien
   * procent, zelfde 200 ms — maar zonder de val van 2 px. Daar zit het hele
   * verschil tussen de twee registers: die val wijst naar beneden, naar het
   * antwoord dat daar opengaat, en beweging mét richting is een belofte.
   * Beweging zónder richting is nadruk.
   *
   * origin-top-left en niet origin-left: een grid-item wordt in de blokrichting
   * uitgerekt, dus deze span is de vólle rijhoogte hoog met de glyph bovenaan.
   * Schalen vanuit het midden van die ruim honderd pixels zou het teken omhoog
   * schoppen. Vanuit de linkerbovenhoek staat het punt waar de glyph zelf begint
   * stil, en dat werkt gelijk voor de + van 24 px met leading-[0.8] en voor de 01
   * van 18 px met leading-tight.
   *
   * transition-property met de hand uitgeschreven: nooit transition-all op een
   * element waar later nog een eigenschap bij kan komen.
   */

.rule-marker,
  .rule-sign,
  .rule-plank {
  transform-origin: top left;
  transition-property: transform, color, background-color;
  transition-duration: 200ms;
}

@media (hover: hover) {
  .rule-row:hover {
    background-color: rgb(110 75 50 / 0.045);
  }

  .rule-row:hover::after {
    opacity: 1;
  }

  .rule-row:hover .rule-marker,
    .rule-row:hover .rule-sign,
    .rule-row:hover .rule-plank {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  /* Het plankje is een vlakje en geen letter, dus het verdiept via zijn
       vulling in plaats van via zijn tekstkleur. */

  .rule-row:hover .rule-plank {
    --tw-bg-opacity: 1;
    background-color: rgb(110 75 50 / var(--tw-bg-opacity, 1));
  }

  /*
     * Alleen de nummers verdiepen naar cocoa, de + en de – met opzet niet.
     *
     * De 01–04 op contact.php, inspiratie.php en privacy-beleid.php zijn echte
     * tekst — géén aria-hidden — en brons haalt daar bij 18 px de AA-grens niet.
     * Op de rij die je aanwijst gaat het contrast dus omhoog, en dat is de reden
     * dat deze ene kleurwissel er wel in mag.
     *
     * De + en de – op de homepage zijn aria-hidden versiering, en juist daar
     * draagt de kleur betekenis: drie bronzen plussen en één taupe min. Die min
     * heeft zijn text-taupe als utility in de opmaak staan en zou het van een
     * hover-regel op (0,3,0) verliezen. Eén gedeelde hover-kleur zou dus het
     * enige verschil weggooien dat die tekens te vertellen hebben. Ze groeien
     * wél mee: groeien is kleurloos.
     */

  .rule-row:hover .rule-marker {
    --tw-text-opacity: 1;
    color: rgb(110 75 50 / var(--tw-text-opacity, 1));
  }
}

.rule-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .rule-title {
    font-size: 19px;
  }
}

.rule-body {
  margin-top: 0.5rem;
  font-size: 15px;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(107 96 85 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .rule-body {
    font-size: 15.5px;
  }
}

/* ---------- Datasheet rows (subpage hero + spec tables) ---------- */

.spec-list {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
}

.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.spec-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(110 96 83 / var(--tw-text-opacity, 1));
}

.spec-value {
  text-align: right;
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: 20px;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .spec-value {
    font-size: 22px;
  }
}

/* ---------- Editorial prose ---------- */

.prose-hlt > h2 {
  margin-top: 3.5rem;
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

.prose-hlt > h2:first-child {
  margin-top: 0px;
}

/* first:mt-0 op alle drie: sinds de banen hun kop in een eigen kolom zetten,
     begint een prose-blok niet meer per definitie met een h2. Zonder dit staat de
     eerste alinea 18 px lager dan de kop ernaast. */

.prose-hlt > h3 {
  margin-top: 2.5rem;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

.prose-hlt > h3:first-child {
  margin-top: 0px;
}

@media (min-width: 640px) {
  .prose-hlt > h3 {
    font-size: 19px;
  }
}

.prose-hlt > p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.72;
  --tw-text-opacity: 1;
  color: rgb(107 96 85 / var(--tw-text-opacity, 1));
}

.prose-hlt > p:first-child {
  margin-top: 0px;
}

@media (min-width: 640px) {
  .prose-hlt > p {
    font-size: 16.5px;
  }
}

.prose-hlt > h2 + p,
  .prose-hlt > h3 + p {
  margin-top: 1rem;
}

.prose-hlt strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

.prose-hlt a {
  --tw-text-opacity: 1;
  color: rgb(110 75 50 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: #C9BCAC;
  text-underline-offset: 5px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (hover: hover) and (pointer: fine) {
  .prose-hlt a:hover {
    --tw-text-opacity: 1;
    color: rgb(59 42 29 / var(--tw-text-opacity, 1));
    text-decoration-color: #3B2A1D;
  }
}

.prose-hlt > ul {
  margin-top: 1.25rem;
}

.prose-hlt > ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.prose-hlt > ul > li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 16px;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(107 96 85 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .prose-hlt > ul > li {
    font-size: 16.5px;
  }
}

/* Bullets are tiny planks, not dots */

.prose-hlt > ul > li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 11px;
  height: 3px;
  width: 13px;
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
}

/* Selector matches .prose-hlt > p specificity so it wins inside prose */

.pull-quote,
  .prose-hlt > .pull-quote {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(181 130 90 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.35;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .pull-quote,
  .prose-hlt > .pull-quote {
    padding-left: 2rem;
  }
}

/*
   * Zelfde bronzen anker als de pull-quote, andere toon. Een pull-quote draagt de
   * hele sectie en mag daarom display-type zijn; dit is een waarschuwing bij één
   * alinea — meestal een gangbaar advies dat niet klopt. Body-type dus, met een
   * label erboven, en een wash eronder zodat het uit de leeslijn stapt zonder om
   * aandacht te schreeuwen.
   *
   * De <p> hierin wordt niet geraakt door .prose-hlt > p: die selector vraagt om
   * een direct kind, en hier is de ouder de note. Geen specificiteitsgevecht.
   */

.prose-note {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(181 130 90 / var(--tw-border-opacity, 1));
  background-color: rgb(110 75 50 / 0.05);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .prose-note {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.prose-note > p {
  margin-top: 0.375rem;
  font-size: 15.5px;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

/* Buttons keep their own styling when they sit inside editorial prose */

.prose-hlt a.btn-primary {
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.prose-hlt a.btn-outline,
  .prose-hlt a.link-arrow {
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

/* ---------- FAQ ---------- */

.faq-item {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
}

.faq-item summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 16.5px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover {
    --tw-text-opacity: 1;
    color: rgb(110 75 50 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 640px) {
  .faq-item summary {
    font-size: 17.5px;
  }
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/*
   * Het plusteken was een letter — content: '+' die bij [open] omsprong naar '–'.
   * Een letter kan niet morfen; een omslag is het enige wat hij kan. Nu zijn het
   * twee echte balkjes over elkaar, en dan is de min gewoon de plus met één balk
   * weggedraaid:
   *
   *   dicht   ::before ─ horizontaal      ::after │ verticaal (rotate 90°)  →  ✚
   *   open    ::before ─ 180° gedraaid    ::after ─ 0°, valt samen           →  ─
   *
   * De 180° op de horizontale balk is voor een symmetrisch balkje visueel geen
   * verschil, en zit er toch in: hij geeft de veer iets om te doen, zodat het
   * teken meedraait in plaats van dat er één helft stilstaat.
   */

.faq-mark {
  position: relative;
  margin-top: 7px;
  display: block;
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .faq-mark {
    margin-top: 0.5rem;
  }
}

/*
   * De overgang staat twee keer, en dat is de manier om per richting een andere
   * curve te krijgen: welke transition geldt, wordt bepaald door de stáát waar
   * naartoe wordt gegaan. Bij openen komt [open] erbij en geldt de veer; bij
   * sluiten valt [open] weg en geldt deze — dezelfde versnelling en dezelfde
   * 260 ms als de vouw, zodat het teken en het paneel gelijk aankomen.
   */

.faq-mark::before,
  .faq-mark::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  height: 1.5px;
  width: 100%;
  border-radius: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
  /*
     * De transform staat hier met de hand en niet als Tailwinds -translate-y-1/2.
     * Die utility schrijft een keten van acht functies met custom properties
     * (translate, rotate, skew, scale), en de [open]-staat hieronder schrijft er
     * twee. Tussen twee ongelijke functielijsten interpoleert de browser via een
     * matrix, en een draaiing van precies 180° is in matrixvorm ontaard: de kortste
     * weg is dubbelzinnig, dus het balkje klapt om in plaats van te draaien.
     * Gelijke lijsten interpoleren per component, en dan draait het gewoon.
     */
  transform: translateY(-50%) rotate(0deg);
  transition: transform var(--hlt-collapse) var(--hlt-collapse-ease), background-color 200ms;
}

.faq-mark::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] .faq-mark::before,
  .faq-item[open] .faq-mark::after {
  transition: transform var(--hlt-fold) var(--hlt-spring), background-color 200ms;
}

.faq-item[open] .faq-mark::before {
  transform: translateY(-50%) rotate(180deg);
}

.faq-item[open] .faq-mark::after {
  transform: translateY(-50%) rotate(0deg);
}

@media (hover: hover) {
  .faq-item summary:hover .faq-mark::before,
    .faq-item summary:hover .faq-mark::after {
    --tw-bg-opacity: 1;
    background-color: rgb(110 75 50 / var(--tw-bg-opacity, 1));
  }
}

.faq-answer {
  max-width: 68ch;
  padding-bottom: 26px;
  font-size: 16px;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(107 96 85 / var(--tw-text-opacity, 1));
}

/*
   * De vouw. main.js animeert de hoogte met de veer hierboven en zet zolang dat
   * loopt .is-folding op het item.
   *
   * overflow-hidden — zonder dat steekt het antwoord buiten de hoogte die de
   * animatie op dat moment heeft ingesteld, en zie je de tekst al vóór de vouw.
   *
   * Het masker BEWEEGT, en dat is de hele les van deze vouw. Eerst stond hier een
   * vaste gradiënt die de onderste 45 % liet uitdoven, de hele animatie lang, en
   * die werd op het eind samen met de class weggehaald. Dan is het laatste wat je
   * ziet niet een vouw die tot rust komt maar anderhalve regel tekst die van
   * halfdoorzichtig naar dekkend springt.
   *
   * Nu schuift de rand van boven naar beneden mee met het openvallen en komt hij
   * uit op 100 % — en op 100 % is het masker overal dekkend, dus gelijk aan géén
   * masker. Daardoor verandert er niets meer als .is-folding eraf gaat. De regel
   * is algemener dan deze vouw: een tijdelijk effect moet eindigen op de waarde
   * die het zonder dat effect ook zou hebben, anders koop je een sprong.
   */

.faq-answer {
  --hlt-fold-edge: 100%;
}

.faq-item.is-folding .faq-answer {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 var(--hlt-fold-edge), transparent 100%);
  mask-image: linear-gradient(180deg, #000 var(--hlt-fold-edge), transparent 100%);
}

/* ---------- Tile-laying pattern diagrams ---------- */

.pattern-frame {
  height: 170px;
  overflow: hidden;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(138 94 62 / var(--tw-bg-opacity, 1));
  padding: 0.625rem;
}

@media (min-width: 640px) {
  .pattern-frame {
    height: 200px;
  }
}

/*
   * De hele tegel is de link naar de patroonpagina, maar er staat één <a> in en
   * niet drie. De kop draagt de linknaam — dat is ook de tekst die een
   * screenreader in de linklijst voorleest — en het ::after legt het klikvlak
   * over de tegel heen. Een tegel volgepakt met losse links naar dezelfde pagina
   * zou dezelfde bestemming drie keer aankondigen.
   */

/*
   * Hover hoort hier in het tweede register: de tegel is een belofte, er valt te
   * klikken. Dus een donkerdere waarde en omhoog — plus de schaduw, die volgens
   * de noot bij de registers hierboven het sterkste klik-signaal is dat er is.
   * De kop gaat mee naar cocoa, de tint van de nadruk.
   *
   * De regel eronder is de eigenlijke winst: die staat er altijd, ook zonder
   * hover. Op een touchscreen bestaat hover niet, en dan is een tegel die alleen
   * bij aanwijzen laat zien dat hij een link is geen link.
   *
   * Achter @media (hover: hover), want dit zijn met de hand geschreven
   * :hover-selectors — de hoverOnlyWhenSupported-vlag in tailwind.config.js geldt
   * alleen voor Tailwinds eigen hover:-variant. Zonder deze media query blijft de
   * tegel na het tikken omhoog staan tot je ergens anders tikt.
   */

.pattern-frame,
  .pattern-link,
  .pattern-go {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.pattern-go {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 14px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(110 75 50 / var(--tw-text-opacity, 1));
}

@media (hover: hover) {
  .pattern-cell:hover .pattern-frame {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    box-shadow: 0 18px 34px -18px rgba(67, 48, 31, 0.55);
  }

  .pattern-cell:hover .pattern-link {
    --tw-text-opacity: 1;
    color: rgb(110 75 50 / var(--tw-text-opacity, 1));
  }

  .pattern-cell:hover .pattern-go {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* Alleen de beweging eruit; de tint en de schaduw blijven het signaal dragen. */

@media (prefers-reduced-motion: reduce) {
  .pattern-cell:hover .pattern-frame,
    .pattern-cell:hover .pattern-go {
    --tw-translate-x: 0px;
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.pattern-link::after {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: 14px;
}

/* Toetsenbord: de ring hoort om de hele tegel en niet om het tekstlabel. */

.pattern-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.pattern-link:focus-visible::after {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #6E4B32;
}

/*
   * Twee feiten naast elkaar, elk in zijn geheel. Als één regel met een
   * middenpunt viel "eenvoudig te leggen" op smalle kaarten uiteen en bleef
   * "leggen" alleen achter — bij deze letterafstand het meest rommelige wat
   * kan. Nu breekt het tussen de feiten en nooit erbinnen.
   */

/* Twee regels vast gereserveerd: drie labels lopen op de meeste kaarten door
     naar een tweede regel, en zonder die ruimte begint de ene kaart zijn tekst
     een regel lager dan zijn buren. */

.pattern-spec {
  margin-top: 0.375rem;
  display: flex;
  min-height: 2.9em;
  flex-wrap: wrap;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.25rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(110 96 83 / var(--tw-text-opacity, 1));
}

.pattern-spec > span {
  white-space: nowrap;
}

.plank {
  border-radius: 3px;
  background: linear-gradient(180deg, var(--t, #c79a6b), #9f7248);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---------- Hero: visgraatvloer die zichzelf legt (AOS) ---------- */

/*
   * De planken worden gegenereerd in partials/_hero_legpatroon.php. Tonen uit
   * de sand-familie houden het een watermerk: duidelijk zichtbaar, maar de
   * kop eroverheen blijft leesbaar. Het masker laat de vloer uitdoven, zodat
   * de lede en de cijferrij op schoon papier staan.
   */

.hlt-floor {
  pointer-events: none;
  position: absolute;
  top: -2.5rem;
  bottom: 0px;
  left: -2rem;
  right: -1rem;
  z-index: 0;
  overflow: hidden;
  opacity: 0.8;
}

@media (min-width: 640px) {
  .hlt-floor {
    top: -3.5rem;
    left: -4rem;
  }
}

@media (min-width: 1024px) {
  .hlt-floor {
    left: -8rem;
    right: -3rem;
  }
}

.hlt-floor {
  /*
     * Drie maskers over elkaar: het radiale verloop dooft de vloer uit naar
     * rechtsonder, zodat de lede en de cijferrij op schoon papier staan; de
     * twee lineaire verlopen halen de harde snijrand boven en links weg.
     * mask-composite houdt over wat in alle drie zichtbaar is. Browsers zonder
     * support vallen terug op de oude situatie: een rechte rand, geen fout.
     */
  --hlt-fade: radial-gradient(112% 84% at 4% 20%, #000 0%, #000 36%, transparent 82%);
  --hlt-fade-top: linear-gradient(180deg, transparent 0, #000 76px);
  --hlt-fade-left: linear-gradient(90deg, transparent 0, #000 104px);
  -webkit-mask-image: var(--hlt-fade), var(--hlt-fade-top), var(--hlt-fade-left);
  mask-image: var(--hlt-fade), var(--hlt-fade-top), var(--hlt-fade-left);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Maat en rotatie horen bij de plank zelf: haalt AOS zijn attributen weg,
     dan blijft het patroon staan in plaats van plat op één rij te vallen. */

.hlt-floor-plank {
  position: absolute;
  height: 58px;
  width: 194px;
  border-radius: 4px;
  transform: rotate(var(--r));
  background-image: repeating-linear-gradient(
        90deg,
        rgba(110, 75, 50, 0.055) 0 1px,
        rgba(110, 75, 50, 0) 1px 7px
      ),
      linear-gradient(176deg, var(--t), #d9c6ac);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- Lightbox ---------- */

/*
   * Een foto op ware grootte, en verder zo weinig mogelijk. De achtergrond is
   * espresso en geen zwart: dit is dezelfde donkere baan die de site onderaan en
   * in de 01–04 strip al gebruikt, dus het voelt als een vlak van deze site en
   * niet als een viewer die eroverheen valt.
   *
   * De foto krijgt een dunne crèmerand met wat lucht eromheen — een passe-partout.
   * Dat is niet decoratie: op een donker vlak zonder rand lopen de donkere hoeken
   * van een interieurfoto weg in de achtergrond, en dan zie je niet meer waar het
   * beeld ophoudt.
   *
   * main.js bouwt dit element één keer op en hangt het aan <body>. Zonder
   * JavaScript bestaat het niet en zijn de foto's gewoon foto's — er is dan ook
   * niets aan te klikken.
   */

.lightbox {
  position: fixed;
  inset: 0px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background-color: rgb(67 48 31 / 0.95);
  padding: 1rem;
  --tw-backdrop-blur: blur(6px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 640px) {
  .lightbox {
    gap: 1.5rem;
    padding: 2rem;
  }
}

.lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  display: flex;
  min-height: 0px;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox-figure img {
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgb(246 242 236 / 0.7);
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.25rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(196 185 171 / var(--tw-text-opacity, 1));
}

/* Geen eigen kleur: dit staat in .lightbox-caption en erft dus bone-dim, dat
     op de espresso-waas 5,65:1 haalt. Stond hier taupe, en dat is een tint voor
     papier — op deze achtergrond kwam het niet verder dan 2,64:1. Van de caption
     blijft het te onderscheiden aan kapitalen en letterafstand, niet aan kleur. */

.lightbox-count {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Ronde knoppen in de familie van de menusluiter in _header.php. */

.lightbox-btn {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 84 66 / var(--tw-border-opacity, 1));
  background-color: rgb(67 48 31 / 0.7);
  font-family: "Instrument Serif", Georgia, Cambria, serif;
  font-size: 22px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (hover: hover) {
  .lightbox-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(246 242 236 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(67 48 31 / var(--tw-bg-opacity, 1));
  }
}

.lightbox-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

@media (min-width: 640px) {
  .lightbox-close {
    right: 1.5rem;
    top: 1.5rem;
  }
}

.lightbox-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Wat je kunt vergroten leest als vergrootbaar: alleen daar staat de loep. */

[data-lightbox] {
  cursor: zoom-in;
}

/* ---------- Image placeholder ---------- */

.img-placeholder {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(210 191 166 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  text-align: center;
  /* Plank courses, so an unfilled slot still reads as a floor */
  background-image: repeating-linear-gradient(
        180deg,
        rgba(110, 75, 50, 0.16) 0 1px,
        rgba(110, 75, 50, 0) 1px 24px
      ),
      repeating-linear-gradient(90deg, rgba(110, 75, 50, 0.1) 0 1px, rgba(110, 75, 50, 0) 1px 96px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-5 {
  bottom: 1.25rem;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-5 {
  right: 1.25rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-4 {
  top: 1rem;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[80\] {
  z-index: 80;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-11 {
  margin-top: 2.75rem;
  margin-bottom: 2.75rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mb-\[7px\] {
  margin-bottom: 7px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-11 {
  margin-top: 2.75rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mt-\[18px\] {
  margin-top: 18px;
}

.mt-\[7px\] {
  margin-top: 7px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-4 {
  height: 1rem;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[19px\] {
  height: 19px;
}

.h-\[21px\] {
  height: 21px;
}

.h-\[22\%\] {
  height: 22%;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[23px\] {
  height: 23px;
}

.h-\[240px\] {
  height: 240px;
}

.h-\[250px\] {
  height: 250px;
}

.h-\[260px\] {
  height: 260px;
}

.h-\[360px\] {
  height: 360px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[5px\] {
  height: 5px;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.max-h-\[72px\] {
  max-height: 72px;
}

.min-h-\[280px\] {
  min-height: 280px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-\[13px\] {
  width: 13px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[19px\] {
  width: 19px;
}

.w-\[21px\] {
  width: 21px;
}

.w-\[23px\] {
  width: 23px;
}

.w-\[5px\] {
  width: 5px;
}

.w-\[min\(90vw\2c 400px\)\] {
  width: min(90vw, 400px);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[26ch\] {
  max-width: 26ch;
}

.max-w-\[34ch\] {
  max-width: 34ch;
}

.max-w-\[38ch\] {
  max-width: 38ch;
}

.max-w-\[42ch\] {
  max-width: 42ch;
}

.max-w-\[46ch\] {
  max-width: 46ch;
}

.max-w-\[48ch\] {
  max-width: 48ch;
}

.max-w-\[54ch\] {
  max-width: 54ch;
}

.max-w-\[62ch\] {
  max-width: 62ch;
}

.max-w-\[64ch\] {
  max-width: 64ch;
}

.max-w-\[68ch\] {
  max-width: 68ch;
}

.max-w-\[70ch\] {
  max-width: 70ch;
}

.max-w-\[74ch\] {
  max-width: 74ch;
}

.max-w-full {
  max-width: 100%;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.resize {
  resize: both;
}

.auto-rows-\[140px\] {
  grid-auto-rows: 140px;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-\[minmax\(0\2c 0\.95fr\)_minmax\(0\2c 1\.05fr\)_minmax\(0\2c 1\.05fr\)\] {
  grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr) minmax(0,1.05fr);
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[5px\] {
  gap: 5px;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-\[34px\] {
  -moz-column-gap: 34px;
       column-gap: 34px;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-sand-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.justify-self-start {
  justify-self: start;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[2px\] {
  border-radius: 2px;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-pill {
  border-radius: 999px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-l-\[14px\] {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-espresso-light {
  --tw-border-opacity: 1;
  border-color: rgb(90 65 48 / var(--tw-border-opacity, 1));
}

.border-sand-300 {
  --tw-border-opacity: 1;
  border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
}

.border-sand-400 {
  --tw-border-opacity: 1;
  border-color: rgb(210 191 166 / var(--tw-border-opacity, 1));
}

.border-sand-500 {
  --tw-border-opacity: 1;
  border-color: rgb(201 188 172 / var(--tw-border-opacity, 1));
}

.bg-\[\#1877F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}

.bg-bronze {
  --tw-bg-opacity: 1;
  background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
}

.bg-cocoa {
  --tw-bg-opacity: 1;
  background-color: rgb(110 75 50 / var(--tw-bg-opacity, 1));
}

.bg-espresso {
  --tw-bg-opacity: 1;
  background-color: rgb(67 48 31 / var(--tw-bg-opacity, 1));
}

.bg-espresso-light {
  --tw-bg-opacity: 1;
  background-color: rgb(90 65 48 / var(--tw-bg-opacity, 1));
}

.bg-ink\/45 {
  background-color: rgb(59 42 29 / 0.45);
}

.bg-ink\/70 {
  background-color: rgb(59 42 29 / 0.7);
}

.bg-plank-1 {
  --tw-bg-opacity: 1;
  background-color: rgb(216 180 137 / var(--tw-bg-opacity, 1));
}

.bg-plank-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(211 170 126 / var(--tw-bg-opacity, 1));
}

.bg-plank-3 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 154 107 / var(--tw-bg-opacity, 1));
}

.bg-plank-4 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 143 96 / var(--tw-bg-opacity, 1));
}

.bg-plank-5 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 137 87 / var(--tw-bg-opacity, 1));
}

.bg-plank-6 {
  --tw-bg-opacity: 1;
  background-color: rgb(174 124 78 / var(--tw-bg-opacity, 1));
}

.bg-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(239 230 217 / var(--tw-bg-opacity, 1));
}

.bg-sand-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 211 190 / var(--tw-bg-opacity, 1));
}

.bg-sand-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 205 184 / var(--tw-bg-opacity, 1));
}

.bg-sand-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(210 191 166 / var(--tw-bg-opacity, 1));
}

.bg-sand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 230 / var(--tw-bg-opacity, 1));
}

.bg-sand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(201 188 172 / var(--tw-bg-opacity, 1));
}

.bg-sand\/90 {
  background-color: rgb(239 230 217 / 0.9);
}

.bg-stone {
  --tw-bg-opacity: 1;
  background-color: rgb(107 96 85 / var(--tw-bg-opacity, 1));
}

.bg-taupe-light {
  --tw-bg-opacity: 1;
  background-color: rgb(138 122 106 / var(--tw-bg-opacity, 1));
}

.bg-\[linear-gradient\(45deg\2c \#F58529\2c \#DD2A7B\2c \#8134AF\2c \#515BD4\)\] {
  background-image: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[50\%_68\%\] {
  -o-object-position: 50% 68%;
     object-position: 50% 68%;
}

.object-\[50\%_85\%\] {
  -o-object-position: 50% 85%;
     object-position: 50% 85%;
}

.object-bottom {
  -o-object-position: bottom;
     object-position: bottom;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[2px\] {
  padding-bottom: 2px;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.align-top {
  vertical-align: top;
}

.font-display {
  font-family: "Instrument Serif", Georgia, Cambria, serif;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15\.5px\] {
  font-size: 15.5px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[23px\] {
  font-size: 23px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[clamp\(26px\2c 3vw\2c 42px\)\] {
  font-size: clamp(26px, 3vw, 42px);
}

.text-\[clamp\(30px\2c 3\.6vw\2c 52px\)\] {
  font-size: clamp(30px, 3.6vw, 52px);
}

.text-\[clamp\(40px\2c 6\.2vw\2c 92px\)\] {
  font-size: clamp(40px, 6.2vw, 92px);
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.leading-\[0\.98\] {
  line-height: 0.98;
}

.leading-\[1\.04\] {
  line-height: 1.04;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.38\] {
  line-height: 1.38;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.65\] {
  line-height: 1.65;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.025em\] {
  letter-spacing: -0.025em;
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[0\.01em\] {
  letter-spacing: 0.01em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}

.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.text-bone {
  --tw-text-opacity: 1;
  color: rgb(216 200 182 / var(--tw-text-opacity, 1));
}

.text-bone-dim {
  --tw-text-opacity: 1;
  color: rgb(196 185 171 / var(--tw-text-opacity, 1));
}

.text-bone-muted {
  --tw-text-opacity: 1;
  color: rgb(207 196 182 / var(--tw-text-opacity, 1));
}

.text-bronze {
  --tw-text-opacity: 1;
  color: rgb(181 130 90 / var(--tw-text-opacity, 1));
}

.text-cocoa {
  --tw-text-opacity: 1;
  color: rgb(110 75 50 / var(--tw-text-opacity, 1));
}

.text-cream {
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(59 42 29 / var(--tw-text-opacity, 1));
}

.text-mocha {
  --tw-text-opacity: 1;
  color: rgb(107 84 66 / var(--tw-text-opacity, 1));
}

.text-sand-500 {
  --tw-text-opacity: 1;
  color: rgb(201 188 172 / var(--tw-text-opacity, 1));
}

.text-stone {
  --tw-text-opacity: 1;
  color: rgb(107 96 85 / var(--tw-text-opacity, 1));
}

.text-taupe {
  --tw-text-opacity: 1;
  color: rgb(110 96 83 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.decoration-sand-500 {
  text-decoration-color: #C9BCAC;
}

.decoration-taupe-light {
  text-decoration-color: #8A7A6A;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.shadow-\[0_14px_34px_-14px_rgba\(67\2c 48\2c 31\2c 0\.55\)\] {
  --tw-shadow: 0 14px 34px -14px rgba(67,48,31,0.55);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_16px_38px_-14px_rgba\(67\2c 48\2c 31\2c 0\.6\)\] {
  --tw-shadow: 0 16px 38px -14px rgba(67,48,31,0.6);
  --tw-shadow-colored: 0 16px 38px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[14px\] {
  --tw-backdrop-blur: blur(14px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[8px\] {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/*
 * De rand van de vouw, als geregistreerde custom property zodat hij te animeren
 * is. Staat op het hoogste niveau en buiten elke @layer: Tailwind schudt regels
 * uit een layer die het niet als class terugvindt, en @property is geen class.
 *
 * 100% is de rusttoestand en betekent GEEN masker: de stop staat dan op hetzelfde
 * punt als de doorzichtige stop, dus het masker is overal dekkend. Dat is met
 * opzet de initiële waarde. Kan een browser @property niet aan, dan blijft de
 * waarde die 100% en is er simpelweg geen masker — geen halfdoorzichtige tekst
 * die blijft hangen.
 */

@property --hlt-fold-edge {
  syntax: '<percentage>';

  inherits: false;

  initial-value: 100%;
}

/* ---------- Eigen AOS-animaties ---------- */

/*
 * LET OP: deze regels staan met opzet BUITEN @layer components.
 *
 * Tailwind schudt alles in een @layer uit dat het niet in de content-bestanden
 * terugvindt. De class .aos-animate zet AOS pas tijdens runtime met JavaScript,
 * dus die staat in geen enkel PHP-bestand — Tailwind gooide de .aos-animate
 * regels er dan uit en bleef alleen de verborgen begintoestand over: een hero
 * die nooit tevoorschijn kwam. Buiten de layer laat Tailwind de CSS ongemoeid.
 *
 * Ze staan onderaan het bestand, zodat ze na @layer components komen en dus de
 * transform van .hlt-floor-plank overschrijven bij gelijke specificiteit.
 *
 * Elke beginstand hangt onder .js-aos. Die class zet _header.php vóór het
 * eerste beeld en alleen als er JavaScript is én geen prefers-reduced-motion.
 * Daardoor kan geen enkele animatie inhoud verborgen achterlaten: valt de
 * schakelaar weg, dan is alles zichtbaar. Zie de noot in _header.php.
 */

/* Een plank schuift over zijn eigen lengte op zijn plek: de translate staat
   ná de rotate, dus in de gedraaide as van de plank. */

.js-aos [data-aos='hlt-plank'] {
  opacity: 0;
  transform: rotate(var(--r)) translate3d(-32%, 0, 0);
  transition-property: opacity, transform;
}

.js-aos [data-aos='hlt-plank'].aos-animate {
  opacity: 1;
  transform: rotate(var(--r));
}

/* Rustiger dan AOS' eigen fade-up (100px): gelijk aan de hlfade van de site. */

.js-aos [data-aos='hlt-rise'] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition-property: opacity, transform;
}

.js-aos [data-aos='hlt-rise'].aos-animate {
  opacity: 1;
  transform: none;
}

/*
 * Sitebrede scroll-reveal. Zet data-reveal op de houder waarvan de directe
 * kinderen na elkaar in beeld mogen komen; main.js hangt daar de AOS-attributen
 * aan met een oplopende vertraging.
 *
 * De beginstand staat hier op een structurele selector en niet op [data-aos],
 * want die attributen komen er pas bij als main.js draait. Zou de beginstand
 * daaraan hangen, dan stond de inhoud eerst zichtbaar en sprong hij daarna weg:
 * precies de flikkering die je niet wil. Nu klopt het beeld vanaf de eerste
 * frame en verzorgt AOS alleen nog het tevoorschijn komen.
 */

.js-aos [data-reveal] > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition-property: opacity, transform;
}

.js-aos [data-reveal] > *.aos-animate {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a.card-paper:hover,
  .faq-item summary:hover::after,
  .rule-row:hover .rule-marker,
  .rule-row:hover .rule-sign,
  .rule-row:hover .rule-plank,
  .img-hover:hover img,
  .img-hover:hover .img-placeholder {
    transform: none;
  }
}

/* Dubbel slot: ook als .js-aos er ooit toch staat, wint hier stilstand. */

@media (prefers-reduced-motion: reduce) {
  .js-aos [data-aos='hlt-plank'] {
    opacity: 1;
    transform: rotate(var(--r));
  }

  .js-aos [data-aos='hlt-rise'],
  .js-aos [data-reveal] > * {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Mobiel menu: het teken en het paneel ---------- */

.nav-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(59 42 29 / var(--tw-bg-opacity, 1));
  width: 19px;
  transition: transform 280ms cubic-bezier(0.22, 0.7, 0.3, 1), opacity 140ms ease-out,
    width 280ms cubic-bezier(0.22, 0.7, 0.3, 1);
}

.nav-bar-mid {
  --tw-bg-opacity: 1;
  background-color: rgb(181 130 90 / var(--tw-bg-opacity, 1));
  width: 13px;
}

#nav-toggle[aria-expanded='true'] .nav-bar-top {
  transform: translateY(7px) rotate(45deg);
}

#nav-toggle[aria-expanded='true'] .nav-bar-mid {
  opacity: 0;
  width: 0;
}

#nav-toggle[aria-expanded='true'] .nav-bar-bot {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-scrim {
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 0.7, 0.3, 1);
}

.nav-panel {
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1);
}

#mobile-nav.is-open .nav-scrim {
  opacity: 1;
}

#mobile-nav.is-open .nav-panel {
  transform: none;
}

/* ---------- Entree: de vloer wordt gelegd ---------- */

html:not([data-hlt-loader='on']) .hlt-loader {
  display: none;
}

.hlt-loader {
  position: fixed;
  inset: 0px;
  z-index: 100;
  overflow: hidden;
  --lay-len: 168px;
  --lay-wide: 28px;
  --lay-joint: 0px;
  --lay-pitch: calc(var(--lay-wide) + var(--lay-joint));
  --lay-third: calc((var(--lay-len) + var(--lay-joint)) / 3);
  /* derdeverband */
  --lay-rows: 20;
  --lay-cols: 12;
  --lay-start: 60ms;
  --lay-plank: 250ms;
  /* hoe lang één plank onderweg is */
  --lay-course: 16ms;
  /* tussen twee banen */
  --lay-shift: 5ms;
  /* tussen twee planken in dezelfde baan */
  --lay-hold: 60ms;
  /* een tel stilstand: de vloer mag even áf zijn */
  --lay-sweep: 420ms;
  --lay-fill: calc(
    var(--lay-rows) * var(--lay-course) + var(--lay-cols) * var(--lay-shift) + var(--lay-plank)
  );
  --lay-out: calc(var(--lay-start) + var(--lay-fill) + var(--lay-hold));
  animation: hlt-loader-off 1ms linear forwards;
  animation-delay: calc(var(--lay-out) + var(--lay-sweep));
}

@media (min-width: 640px) {
  .hlt-loader {
    --lay-len: 216px;
    --lay-wide: 36px;
  }
}

@media (min-width: 1024px) {
  .hlt-loader {
    --lay-len: 264px;
    --lay-wide: 44px;
    --lay-course: 19ms;
  }
}

.hlt-loader-surface {
  position: absolute;
  inset: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 230 217 / var(--tw-bg-opacity, 1));
  background-image: repeating-linear-gradient(90deg,rgba(110,75,50,0.055) 0 2px,rgba(110,75,50,0) 2px 9px),repeating-linear-gradient(90deg,rgba(110,75,50,0.04) 0 1px,rgba(110,75,50,0) 1px 23px);
  animation: hlt-sweep var(--lay-sweep) cubic-bezier(0.62, 0, 0.3, 1) forwards;
  animation-delay: var(--lay-out);
}

.hlt-lay {
  position: absolute;
  inset: 0px;
  overflow: hidden;
}

.hlt-lay i {
  position: absolute;
  width: var(--lay-len);
  height: var(--lay-wide);
  left: calc(var(--x) * var(--lay-third) - var(--lay-len));
  bottom: calc(var(--y) * var(--lay-pitch));
  background-color: var(--t);
  background-image: repeating-linear-gradient(
      180deg,
      rgba(74, 48, 28, 0.085) 0 1px,
      rgba(74, 48, 28, 0) 1px 5px
    ),
    repeating-linear-gradient(180deg, rgba(74, 48, 28, 0.05) 0 1px, rgba(74, 48, 28, 0) 1px 13px),
    linear-gradient(180deg, rgba(255, 248, 238, 0.11), rgba(74, 48, 28, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 248, 238, 0.26), inset -1px 0 0 rgba(74, 48, 28, 0.15),
    inset 0 -1px 0 rgba(74, 48, 28, 0.13);
  animation: hlt-plank-in var(--lay-plank) cubic-bezier(0.18, 0.62, 0.3, 1) both;
  animation-delay: calc(
    var(--lay-start) + var(--y) * var(--lay-course) + var(--x) * var(--lay-shift)
  );
}

.hlt-loader-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: translate(-50%, -50%);
  animation: hlt-mark-in 480ms cubic-bezier(0.2, 0.6, 0.3, 1) both,
    hlt-mark-out 240ms ease-in forwards;
  animation-delay: 40ms, calc(var(--lay-out) - 60ms);
}

.hlt-loader-mark::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: -130px;
  background: radial-gradient(
    circle closest-side,
    rgba(246, 242, 236, 0.92) 0%,
    rgba(246, 242, 236, 0.8) 34%,
    rgba(246, 242, 236, 0.42) 62%,
    rgba(246, 242, 236, 0) 100%
  );
}

@media (min-width: 640px) {
  .hlt-loader-mark::before {
    inset: -170px;
  }
}

.hlt-loader-logo {
  position: relative;
  height: 52px;
  width: auto;
}

@media (min-width: 640px) {
  .hlt-loader-logo {
    height: 62px;
  }
}

.hlt-loader-note {
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  --tw-text-opacity: 1;
  color: rgb(110 96 83 / var(--tw-text-opacity, 1));
}

.hlt-loader-edge {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background: linear-gradient(to top, rgba(59, 42, 29, 0.17) 0, rgba(59, 42, 29, 0) 90px);
  border-bottom: 1px solid #b5825a;
  transform: translate3d(0, -100%, 0);
  animation: hlt-edge var(--lay-sweep) cubic-bezier(0.62, 0, 0.3, 1) forwards;
  animation-delay: var(--lay-out);
}

@keyframes hlt-plank-in {
  from {
    opacity: 0;
    transform: translate3d(-30%, -7px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hlt-mark-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes hlt-mark-out {
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 14px));
  }
}

@keyframes hlt-sweep {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes hlt-edge {
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hlt-loader-off {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hlt-loader {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hover\:border-ink:hover {
    --tw-border-opacity: 1;
    border-color: rgb(59 42 29 / var(--tw-border-opacity, 1));
  }

  .hover\:border-sand-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(201 188 172 / var(--tw-border-opacity, 1));
  }

  .hover\:border-taupe-light:hover {
    --tw-border-opacity: 1;
    border-color: rgb(138 122 106 / var(--tw-border-opacity, 1));
  }

  .hover\:bg-cocoa-light:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(138 94 62 / var(--tw-bg-opacity, 1));
  }

  .hover\:text-bronze:hover {
    --tw-text-opacity: 1;
    color: rgb(181 130 90 / var(--tw-text-opacity, 1));
  }

  .hover\:text-cream:hover {
    --tw-text-opacity: 1;
    color: rgb(246 242 236 / var(--tw-text-opacity, 1));
  }

  .hover\:text-ink:hover {
    --tw-text-opacity: 1;
    color: rgb(59 42 29 / var(--tw-text-opacity, 1));
  }

  .hover\:decoration-bronze:hover {
    text-decoration-color: #B5825A;
  }

  .hover\:brightness-110:hover {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-\[70\]:focus {
  z-index: 70;
}

.focus\:rounded-pill:focus {
  border-radius: 999px;
}

.focus\:bg-espresso:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(67 48 31 / var(--tw-bg-opacity, 1));
}

.focus\:px-5:focus {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.focus\:py-3:focus {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.focus\:text-\[14px\]:focus {
  font-size: 14px;
}

.focus\:font-semibold:focus {
  font-weight: 600;
}

.focus\:text-cream:focus {
  --tw-text-opacity: 1;
  color: rgb(246 242 236 / var(--tw-text-opacity, 1));
}

@media (hover: hover) and (pointer: fine) {
  .group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 640px) {
  .sm\:bottom-7 {
    bottom: 1.75rem;
  }

  .sm\:left-5 {
    left: 1.25rem;
  }

  .sm\:right-7 {
    right: 1.75rem;
  }

  .sm\:top-5 {
    top: 1.25rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-11 {
    margin-top: 2.75rem;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:mt-16 {
    margin-top: 4rem;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:mt-24 {
    margin-top: 6rem;
  }

  .sm\:mt-\[34px\] {
    margin-top: 34px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-\[18px\] {
    height: 18px;
  }

  .sm\:h-\[290px\] {
    height: 290px;
  }

  .sm\:h-\[300px\] {
    height: 300px;
  }

  .sm\:h-\[320px\] {
    height: 320px;
  }

  .sm\:h-\[340px\] {
    height: 340px;
  }

  .sm\:h-\[360px\] {
    height: 360px;
  }

  .sm\:h-\[480px\] {
    height: 480px;
  }

  .sm\:h-\[52px\] {
    height: 52px;
  }

  .sm\:max-h-\[88px\] {
    max-height: 88px;
  }

  .sm\:min-h-\[360px\] {
    min-height: 360px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:auto-rows-\[170px\] {
    grid-auto-rows: 170px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[minmax\(0\2c 0\.72fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,0.72fr) minmax(0,1fr) minmax(0,1fr);
  }

  .sm\:grid-cols-\[minmax\(0\2c 0\.95fr\)_minmax\(0\2c 1\.05fr\)_minmax\(0\2c 1\.05fr\)\] {
    grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr) minmax(0,1.05fr);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:gap-16 {
    gap: 4rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-\[14px\] {
    gap: 14px;
  }

  .sm\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .sm\:border-l {
    border-left-width: 1px;
  }

  .sm\:border-t-0 {
    border-top-width: 0px;
  }

  .sm\:border-sand-300 {
    --tw-border-opacity: 1;
    border-color: rgb(219 205 184 / var(--tw-border-opacity, 1));
  }

  .sm\:bg-transparent {
    background-color: transparent;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-\[30px\] {
    padding: 30px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:px-\[17px\] {
    padding-left: 17px;
    padding-right: 17px;
  }

  .sm\:px-\[22px\] {
    padding-left: 22px;
    padding-right: 22px;
  }

  .sm\:px-\[26px\] {
    padding-left: 26px;
    padding-right: 26px;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-\[26px\] {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .sm\:pb-28 {
    padding-bottom: 7rem;
  }

  .sm\:pt-11 {
    padding-top: 2.75rem;
  }

  .sm\:pt-14 {
    padding-top: 3.5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

  .sm\:pt-24 {
    padding-top: 6rem;
  }

  .sm\:pt-\[76px\] {
    padding-top: 76px;
  }

  .sm\:text-\[13px\] {
    font-size: 13px;
  }

  .sm\:text-\[14\.5px\] {
    font-size: 14.5px;
  }

  .sm\:text-\[14px\] {
    font-size: 14px;
  }

  .sm\:text-\[15\.5px\] {
    font-size: 15.5px;
  }

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

  .sm\:text-\[16\.5px\] {
    font-size: 16.5px;
  }

  .sm\:text-\[16px\] {
    font-size: 16px;
  }

  .sm\:text-\[17px\] {
    font-size: 17px;
  }

  .sm\:text-\[21px\] {
    font-size: 21px;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[23px\] {
    font-size: 23px;
  }

  .sm\:text-\[24px\] {
    font-size: 24px;
  }

  .sm\:text-\[25px\] {
    font-size: 25px;
  }

  .sm\:text-\[26px\] {
    font-size: 26px;
  }

  .sm\:text-\[27px\] {
    font-size: 27px;
  }

  .sm\:text-\[28px\] {
    font-size: 28px;
  }

  .sm\:text-\[34px\] {
    font-size: 34px;
  }

  .sm\:normal-case {
    text-transform: none;
  }

  .sm\:tracking-normal {
    letter-spacing: 0em;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-\[120px\] {
    top: 120px;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:mt-11 {
    margin-top: 2.75rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-\[100px\] {
    margin-top: 100px;
  }

  .lg\:mt-\[110px\] {
    margin-top: 110px;
  }

  .lg\:mt-\[30px\] {
    margin-top: 30px;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[340px\] {
    height: 340px;
  }

  .lg\:h-\[440px\] {
    height: 440px;
  }

  .lg\:h-\[620px\] {
    height: 620px;
  }

  .lg\:max-h-\[100px\] {
    max-height: 100px;
  }

  .lg\:min-h-\[520px\] {
    min-height: 520px;
  }

  .lg\:auto-rows-\[190px\] {
    grid-auto-rows: 190px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.6fr\)_minmax\(0\2c 1\.4fr\)\] {
    grid-template-columns: minmax(0,0.6fr) minmax(0,1.4fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.1fr\)\] {
    grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.05fr\)_minmax\(0\2c 0\.95fr\)\] {
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.2fr\)_minmax\(0\2c 0\.8fr\)\] {
    grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.85fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.85fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-\[72px\] {
    gap: 72px;
  }

  .lg\:gap-\[88px\] {
    gap: 88px;
  }

  .lg\:gap-x-16 {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .lg\:gap-y-0 {
    row-gap: 0px;
  }

  .lg\:self-end {
    align-self: flex-end;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-\[18px\] {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .lg\:py-\[88px\] {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:pt-\[100px\] {
    padding-top: 100px;
  }

  .lg\:leading-\[0\.96\] {
    line-height: 0.96;
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1\.4fr\)_repeat\(4\2c minmax\(0\2c 1fr\)\)\] {
    grid-template-columns: minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  }
}

@media (min-width: 1536px) {
  .\32xl\:block {
    display: block;
  }

  .\32xl\:gap-\[26px\] {
    gap: 26px;
  }

  .\32xl\:text-\[14\.5px\] {
    font-size: 14.5px;
  }
}