/* ===========================================================================
   HAIR FUTURE, Maastricht
   ---------------------------------------------------------------------------
   Richting: het logo zet een geborstelde "Hair" tegen een strak gebouwde
   "Future". Die spanning is het hele ontwerp: warm papier en inkt, één
   bronzen signaalkleur, en een terugkerend dun lijntje met een nummer als
   scharnier tussen de secties. Geen kaartjes op een rij; de secties lopen
   in elkaar over.

   Letters: er wordt niets van een vreemde server gehaald. De display-letter
   is de systeem-schreefloze (Segoe UI, San Francisco, Roboto), de accentletter
   een cursieve schreefletter die op elk systeem staat. Scheelt een verzoek
   naar Google met het IP-adres van elke bezoeker erin, en de pagina staat
   meteen goed in plaats van na een herteken.
   =========================================================================== */

:root {
  --zet:     'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --schrijf: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;

  --inkt:          #15161b;
  --inkt-2:        #1e2027;
  --inkt-3:        #2a2d36;
  --papier:        #f2eee7;
  --papier-2:      #e7e1d6;
  --papier-3:      #d9d2c4;
  --mos:           #3c4639;
  --mos-2:         #2f382d;
  --brons:         #b48249;
  --brons-licht:   #d9b378;
  --brons-donker:  #7d5324;
  --brons-diep:    #65411c;

  --opening-achtergrond: #15161b;
  --opening-demping: .6;

  --rand:   clamp(1.25rem, 4.5vw, 4rem);
  --breed:  84rem;
  --ritme:  clamp(4.25rem, 8vw, 7rem);

  --kop-hoogte: 4rem;

  --d1:  clamp(3.25rem, 12vw, 9rem);
  --d2:  clamp(1.9rem, 4.2vw, 3.4rem);
  --d3:  clamp(1.2rem, 2vw, 1.6rem);
  --lees: clamp(1rem, .95rem + .35vw, 1.16rem);
  --lead: clamp(1.12rem, 1.02rem + .7vw, 1.5rem);
  --klein: clamp(.78rem, .76rem + .12vw, .86rem);

  --snel: .25s cubic-bezier(.22, .61, .36, 1);
  --rustig: .6s cubic-bezier(.22, .61, .36, 1);
}

/* ---- grondslag ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--kop-hoogte) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--zet);
  font-weight: 400;
  font-size: var(--lees);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

::selection { background: var(--brons-donker); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brons);
  outline-offset: 3px;
  border-radius: 2px;
}

.omlijning {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Donkere inkt met papier erop: wit op brons haalde de contrasteis niet. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--inkt);
  border: 1px solid var(--brons);
  color: var(--papier);
  text-decoration: none;
}
.overslaan:focus { left: .5rem; top: .5rem; }

/* ---- uitsneden ----------------------------------------------------------
   De gegenereerde beelden hebben niet allemaal een bruikbaar kader: het
   wasmoment is als een bladzijde gefotografeerd met een brede crèmerand
   eromheen, het gereedschap heeft een dun randje. Hier wordt per beeld het
   werkelijke beeldvlak eruit gelicht, zonder het bronbestand te vervangen. */

.uitsnede {
  position: relative;
  overflow: hidden;
  background: var(--papier-3);
}
.uitsnede > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* staand uit het vierkante stilleven: het hout bovenin wordt de rust, het
   gereedschap zakt naar de onderste twee derde */
.uitsnede--gereedschap { aspect-ratio: 4 / 5; }
.uitsnede--gereedschap > img {
  object-position: 50% 62%;
  transform: scale(1.08);
}

.uitsnede--staand { aspect-ratio: 4 / 5; }
.uitsnede--staand > img { object-position: 58% 52%; }

/* het echte beeldvlak in wasmoment.jpg: 220,310 tot 1780,1220 van 2048x1536 */
.uitsnede--was { aspect-ratio: 156 / 91; }
.uitsnede--was > img {
  width: 131.28%;
  height: 168.79%;
  left: -14.1%;
  top: -34.07%;
  right: auto;
  bottom: auto;
  object-fit: fill;
}

/* ---- typografische bouwstenen ------------------------------------------- */

.titel {
  font-size: var(--d2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.006em;
  text-transform: uppercase;
  text-wrap: balance;
}
.titel--licht { color: var(--papier); }

.kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: var(--klein);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brons-donker);
}
.kicker--licht { color: var(--brons-licht); }

/* het terugkerende motief: nummer, dun lijntje, woord */
.kicker__nr {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-weight: 400;
  font-feature-settings: 'tnum';
}
.kicker__nr::after {
  content: '';
  width: clamp(1.75rem, 5vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.opmaat {
  margin-bottom: 1.1rem;
  font-size: var(--klein);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brons-donker);
}
.opmaat--licht { color: var(--brons-licht); }

/* In de hero staat de opmaatregel boven de foto en loopt hij over een lichte
   plek. Dezelfde schaduw als de titel houdt hem leesbaar. */
.opening__kop .opmaat {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5);
}

/* ---- een band over de volle breedte ------------------------------------- */

.band-vol {
  margin: 0;
  overflow: hidden;
  background: var(--papier-2);
}
.band-vol > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- knoppen ------------------------------------------------------------ */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .7rem 1.6rem;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--snel), color var(--snel), border-color var(--snel), transform var(--snel);
}

.knop--vol {
  background: var(--brons-donker);
  border-color: var(--brons-donker);
  color: #fff;
}
.knop--vol:hover {
  background: var(--brons-diep);
  border-color: var(--brons-diep);
  box-shadow: 0 0 0 1px var(--brons);
  transform: translateY(-2px);
}

.knop--lijn {
  border-color: rgba(242, 238, 231, .45);
  color: var(--papier);
}
.knop--lijn:hover {
  background: rgba(242, 238, 231, .12);
  border-color: var(--papier);
  transform: translateY(-2px);
}

/* ===========================================================================
   KOPBALK
   =========================================================================== */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--kop-hoogte);
  background: rgba(21, 22, 27, .9);
  border-bottom: 1px solid rgba(180, 130, 73, .35);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--papier);
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.merk {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}
.merk__een {
  font-family: var(--schrijf);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: .01em;
  color: var(--papier);
}
.merk__twee {
  position: relative;
  padding-left: .65rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--papier);
}
.merk__twee::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  transform: translateY(-50%);
  background: var(--brons);
}

.hoofdnav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.hoofdnav a {
  position: relative;
  padding: .35rem 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(242, 238, 231, .84);
  transition: color var(--snel);
}
.hoofdnav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brons-licht);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--snel);
}
.hoofdnav a:hover { color: var(--papier); }
.hoofdnav a:hover::after { transform: scaleX(1); }

.hoofdnav__route {
  padding: .45rem 1rem !important;
  border: 1px solid rgba(180, 130, 73, .7);
  color: var(--brons-licht) !important;
}
.hoofdnav__route::after { display: none; }
.hoofdnav__route:hover { background: var(--brons-donker); color: #fff !important; border-color: var(--brons-donker); }

.menuknop {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .2rem;
  background: none;
  border: 0;
  color: var(--papier);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.menuknop__streep {
  position: relative;
  display: block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
}
.menuknop__streep::before,
.menuknop__streep::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--snel);
}
.menuknop__streep::before { top: -.38rem; }
.menuknop__streep::after  { top: .38rem; }
.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(.38rem) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after  { transform: translateY(-.38rem) rotate(-45deg); }

@media (max-width: 899px) {
  .menuknop { display: inline-flex; }
  .hoofdnav {
    position: absolute;
    inset: var(--kop-hoogte) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--rand) 1.5rem;
    background: var(--inkt);
    border-bottom: 1px solid rgba(180, 130, 73, .35);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--snel), transform var(--snel), visibility var(--snel);
  }
  .hoofdnav a {
    padding: .95rem 0;
    border-bottom: 1px solid rgba(242, 238, 231, .1);
    font-size: .95rem;
  }
  .hoofdnav__route {
    margin-top: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(180, 130, 73, .7);
  }
  .menu-open .hoofdnav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

/* ===========================================================================
   DE OPENING, alleen de opmaak van kop, knoppen, slotregel en wenk
   =========================================================================== */

.opening__kop {
  padding: 0 var(--rand) clamp(4.5rem, 11svh, 7rem);
}

.opening__binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
}

.opening__titel {
  max-width: 14ch;
  font-size: var(--d1);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: var(--papier);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.opening__regel {
  max-width: 44ch;
  margin-top: 1.4rem;
  font-size: var(--lead);
  line-height: 1.5;
  color: rgba(242, 238, 231, .88);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.opening__kop .knoppen { margin-top: 2.1rem; }

.opening__slot {
  padding: 0 var(--rand) clamp(4.5rem, 11svh, 7rem);
}
.slotregel {
  max-width: var(--breed);
  margin-inline: auto;
  font-family: var(--schrijf);
  font-style: italic;
  font-size: clamp(2.2rem, 7vw, 5rem);
  line-height: 1.02;
  color: var(--papier);
  text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: rgba(242, 238, 231, .7);
}
.wenk__tekst {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.wenk__streep {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--brons-licht), transparent);
}

/* ===========================================================================
   01 WELKOM, loopt van inkt naar papier met de fotoband over de naad heen
   =========================================================================== */

.welkom {
  position: relative;
  background: var(--papier);
}

.welkom__donker {
  background: var(--inkt);
  padding-top: calc(var(--ritme) * .95);
  padding-bottom: clamp(7rem, 16vw, 12rem);
}

.welkom__donker-raster { max-width: var(--breed); }

.uitspraak {
  max-width: 16ch;
  font-family: var(--schrijf);
  font-style: italic;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--papier);
}

.uitspraak__onder {
  max-width: 42ch;
  margin-top: 1.6rem;
  font-size: var(--lead);
  line-height: 1.5;
  color: rgba(242, 238, 231, .72);
}

/* de band trekt het papier het donker in */
.band {
  position: relative;
  z-index: 2;
  margin: clamp(-9rem, -11vw, -5.5rem) 0 0;
  max-width: 62rem;
  border: 1px solid rgba(180, 130, 73, .4);
  overflow: hidden;
}
/* De foto is in werkelijkheid een panorama van 4,6 op 1. Over de volle breedte
   van een telefoon is dat een strook van zeventig pixel hoog waarin niets meer
   te zien is, dus daar wordt hij bijgesneden op de spiegelwand links en krijgt
   hij hoogte terug. Vanaf de tablet staat hij in zijn eigen verhouding. */
.band img {
  width: 100%;
  aspect-ratio: 21 / 10;
  object-fit: cover;
  object-position: 22% center;
  filter: saturate(.88) contrast(1.04);
}

@media (min-width: 620px) {
  .band img {
    aspect-ratio: 46 / 10;
    object-position: center;
  }
}

.welkom__licht {
  background: var(--papier);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--ritme);
}

.welkom__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}

.lead {
  font-size: var(--lead);
  line-height: 1.55;
  max-width: 54ch;
}

.welkom__tweede {
  margin-top: 1.4rem;
  max-width: 50ch;
  color: #4a4740;
}

.welkom__zij {
  align-self: start;
}

.welkom__onderschrift {
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brons-donker);
}

/* het echte merk van de zaak, heel, op papier, onder de welkomsttekst */
.welkom__merk {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.4rem 1.75rem 1.5rem;
  background: var(--papier-2);
  border-top: 2px solid var(--brons);
}
.logo-oud {
  width: auto;
  max-width: 13rem;
  height: auto;
  mix-blend-mode: multiply;
}
.welkom__merk-regel {
  margin-top: 1rem;
  font-size: var(--klein);
  letter-spacing: .04em;
  color: #4a4740;
}
.welkom__merk-regel--nadruk {
  margin-top: .3rem;
  font-weight: 600;
  color: var(--inkt);
}

@media (min-width: 900px) {
  .welkom__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
  .band { margin-left: clamp(0rem, 6vw, 7rem); }
}

/* ===========================================================================
   02 VAKWERK
   =========================================================================== */

.vakwerk {
  padding-top: var(--ritme);
  padding-bottom: 0;
  background:
    linear-gradient(to bottom, var(--papier) 0, var(--papier-2) 100%);
}

.vakwerk__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-bottom: var(--ritme);
}

.vakwerk__beeld {
  border-bottom: 2px solid var(--brons);
}

.vakwerk__tekst {
  margin-top: 1.5rem;
  max-width: 48ch;
  color: #3b3932;
}

.pijlers {
  display: grid;
  gap: 0;
  align-self: start;
}

.pijler {
  padding: 1.5rem 0;
  border-top: 1px solid var(--papier-3);
}
.pijler:last-child { border-bottom: 1px solid var(--papier-3); }

.pijler__nr {
  font-family: var(--schrijf);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brons-donker);
  line-height: 1;
}
.pijler__naam {
  margin-top: .45rem;
  font-size: var(--d3);
  font-weight: 600;
  letter-spacing: -.004em;
  line-height: 1.15;
}
.pijler__tekst {
  margin-top: .5rem;
  max-width: 44ch;
  color: #4a4740;
}

/* De naad naar het mosgroene veld: het beeld loopt van crème bovenin naar
   donker onderin, zodat papier en mos aan elkaar vast zitten in plaats van
   tegen elkaar aan. */
.band-vol--haar {
  height: clamp(9rem, 24vw, 19rem);
  background: var(--mos);
}
.band-vol--haar > img { object-position: center 6%; }

/* Op een telefoon komt de kop eerst, daarna pas het beeld. */
.vakwerk__intro { order: 1; }
.vakwerk__beeld { order: 2; }
.pijlers { order: 3; }

@media (min-width: 720px) {
  .vakwerk__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  /* Het beeld loopt over beide rijen mee en is zo hoog als de tekst ernaast,
     zodat er onder de foto geen gat valt. */
  .vakwerk__beeld {
    order: 0;
    grid-row: span 2;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 28rem;
  }
  .vakwerk__intro { order: 0; }
  .pijlers { order: 0; margin-top: .5rem; }
}

@media (min-width: 1100px) {
  .vakwerk__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ===========================================================================
   03 BEHANDELINGEN, het donkergroene veld
   =========================================================================== */

.behandelingen {
  padding-block: var(--ritme);
  background: var(--mos);
  color: var(--papier);
  background-image:
    /* het donkere haar van de band erboven zakt het veld in */
    linear-gradient(to bottom, rgba(48, 30, 14, .6) 0%, rgba(48, 30, 14, 0) 16%),
    /* en het veld zakt onderin weg naar het papier toe */
    linear-gradient(to top, rgba(18, 22, 17, .5) 0%, rgba(18, 22, 17, 0) 14%),
    radial-gradient(120% 80% at 85% 0%, rgba(180, 130, 73, .14) 0%, rgba(180, 130, 73, 0) 60%);
}

.sectiekop { max-width: 46rem; }
.sectiekop__tekst {
  margin-top: 1.25rem;
  max-width: 48ch;
  font-size: var(--lead);
  line-height: 1.5;
  color: rgba(242, 238, 231, .76);
}

.groepen {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(242, 238, 231, .22);
}

.groep {
  display: grid;
  gap: .4rem 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(242, 238, 231, .22);
}

.groep__nr {
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--brons-licht);
  font-feature-settings: 'tnum';
}

.groep__naam {
  font-size: clamp(1.75rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: uppercase;
}

.lijst {
  display: grid;
  gap: .3rem;
}
.lijst li {
  position: relative;
  padding-left: 1.15rem;
  color: rgba(242, 238, 231, .88);
}
.lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .82em;
  width: .5rem;
  height: 1px;
  background: var(--brons-licht);
}

.behandelingen__noot {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 50ch;
  font-size: var(--klein);
  letter-spacing: .02em;
  color: rgba(242, 238, 231, .78);
}

@media (min-width: 760px) {
  .groep {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }
  .groep__nr { padding-top: .6rem; }
  .lijst { columns: 1; }
}

@media (min-width: 1100px) {
  .groep { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.4fr); }
  .lijst { columns: 2; column-gap: 2.5rem; }
  .lijst li { break-inside: avoid; }
}

/* ===========================================================================
   04 DE SALON
   ---------------------------------------------------------------------------
   De vier opnamen van de oude site zijn in werkelijkheid duimnagels van
   155x93. Ze worden daarom niet uitgerekt over de volle breedte maar als een
   contactvel naast de kop gezet: vier gelijke vellen, twee ervan een stuk
   lager, zodat het een compositie is en geen rij kaartjes.
   =========================================================================== */

/* Onderaan geen vol ritme: het lijntje boven Goed gezelschap scheidt de twee
   al, en vol ritme + de eigen bovenruimte van die sectie gaf samen het gat dat
   de pagina in losse blokken uit elkaar trok. */
.sfeer {
  padding-top: var(--ritme);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(to bottom, var(--papier-2) 0, var(--papier) clamp(8rem, 18vw, 16rem));
}

.sfeer__raster {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.sfeer__intro { max-width: 38rem; }
.sfeer__tekst {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: #4a4740;
}
.sfeer__noot {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--papier-3);
  max-width: 34ch;
  font-size: var(--klein);
  letter-spacing: .04em;
  color: #5a554d;
}

.contact-vel {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.vel {
  margin: 0;
  background: var(--papier-2);
  padding: .55rem .55rem .35rem;
  box-shadow: 0 1px 0 var(--papier-3);
}
.vel img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  filter: saturate(.78) contrast(1.06) brightness(1.02);
  transition: filter var(--rustig), transform var(--rustig);
}
.vel:hover img { filter: saturate(1) contrast(1.02); transform: scale(1.015); }
.vel figcaption {
  padding-top: .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brons-donker);
}

@media (min-width: 560px) {
  .contact-vel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vel--laag { margin-top: clamp(1.25rem, 4vw, 2.75rem); }
}

@media (min-width: 1000px) {
  .sfeer__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .sfeer__intro { padding-top: .25rem; }
}

/* ===========================================================================
   05 GOED GEZELSCHAP
   =========================================================================== */

.gezelschap {
  padding-bottom: clamp(3.25rem, 7vw, 5.5rem);
  background: var(--papier);
}

.gezelschap__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--papier-3);
}

.gezelschap__tekst {
  margin-top: 1rem;
  max-width: 36ch;
  color: #4a4740;
}

.tegels {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

.tegel {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.tegel--licht { background: var(--papier-2); color: var(--inkt); }
.tegel--donker { background: var(--inkt); color: var(--papier); }

.tegel__merk {
  display: flex;
  align-items: center;
  height: 3.25rem;
}
.tegel__merk img {
  width: auto;
  max-width: 11rem;
  max-height: 100%;
  object-fit: contain;
}
.tegel--licht .tegel__merk img { mix-blend-mode: multiply; }

.tegel__naam {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tegel__tekst {
  font-size: .95rem;
  line-height: 1.55;
  color: inherit;
  opacity: .82;
}

@media (min-width: 760px) {
  /* Dezelfde verspringing als het contactvel in De salon: twee tegels met
     ongelijke tekst worden zo een compositie in plaats van twee kaarten
     waarvan er één onderaan leegloopt. */
  .tegels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .tegel--donker { margin-top: clamp(1rem, 3vw, 2.25rem); }
}
@media (min-width: 1000px) {
  .gezelschap__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ===========================================================================
   06 BEZOEK
   =========================================================================== */

.bezoek {
  padding-block: var(--ritme);
  background: var(--inkt);
  color: var(--papier);
  background-image:
    radial-gradient(90% 70% at 10% 0%, rgba(180, 130, 73, .12) 0%, rgba(180, 130, 73, 0) 65%);
}

.bezoek__raster {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.bezoek__nadruk {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--brons);
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.4;
  color: var(--papier);
}

.bezoek__blok { margin-top: clamp(2rem, 4vw, 2.75rem); }

.bezoek__label {
  margin-bottom: .9rem;
  font-size: var(--klein);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brons-licht);
}

.uren {
  display: grid;
  max-width: 24rem;
  border-top: 1px solid rgba(242, 238, 231, .18);
}
.uren li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(242, 238, 231, .18);
}
.uren__dag { color: rgba(242, 238, 231, .8); }
.uren__tijd {
  font-feature-settings: 'tnum';
  font-weight: 500;
}

.bezoek__klein {
  margin-top: .85rem;
  font-size: var(--klein);
  color: rgba(242, 238, 231, .66);
}

.bezoek__adres {
  font-size: var(--lead);
  line-height: 1.35;
  color: var(--papier);
}
.bezoek__blok .knop { margin-top: 1.4rem; }

/* Hier zat een ingesloten Google-kaart. Die laadde als een leeg zwart vlak en
   stuurde het IP-adres van elke bezoeker door voordat er iets gevraagd was;
   de routeknop ernaast doet hetzelfde werk. Er staat nu een beeld. */
.bezoek__beeld {
  margin: 0;
  padding: .6rem .6rem .35rem;
  background: var(--inkt-3);
  border-top: 2px solid var(--brons);
}
.bezoek__beeld figcaption {
  padding-top: .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brons-licht);
}

@media (min-width: 1000px) {
  .bezoek__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ===========================================================================
   VOET
   =========================================================================== */

.voet {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  background: var(--inkt-2);
  color: rgba(242, 238, 231, .76);
  border-top: 1px solid rgba(180, 130, 73, .3);
  font-size: .9rem;
}

.voet__raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

.voet__woordmerk {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.018em;
  text-transform: uppercase;
  color: var(--papier);
}
.voet__merk .voet__regel { margin-top: .9rem; max-width: 26ch; }

.voet__label {
  margin-bottom: .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brons-licht);
}
.voet__regel { line-height: 1.6; }
.voet__link {
  display: inline-block;
  margin-top: .75rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--brons);
  color: var(--papier);
  text-decoration: none;
  transition: color var(--snel), border-color var(--snel);
}
.voet__link:hover { color: var(--brons-licht); border-color: var(--brons-licht); }

@media (min-width: 760px) {
  .voet__raster { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

/* ===========================================================================
   ONTHULLEN, alleen als het script het aanzet
   =========================================================================== */

.reveal-aan [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal-aan [data-reveal].is-zichtbaar {
  opacity: 1;
  transform: none;
}
.reveal-aan [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: .09s; }
.reveal-aan [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: .18s; }
.reveal-aan [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: .27s; }

/* ===========================================================================
   MINDER BEWEGING
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-aan [data-reveal] { opacity: 1 !important; transform: none !important; }
}