/* ===========================================================================
   TULP Fine Jewelry, Maastricht
   ---------------------------------------------------------------------------
   Richting: alle fotografie van TULP is geschoten op zwart, met een spiegeling
   onder het sieraad. De pagina neemt die zwarte achtergrond over als eigen
   grond, zodat de foto's geen rand of kader nodig hebben en als losse juwelen
   in het donker lijken te liggen. Goud is de enige vaste kleur; alle andere
   kleur komt uit de edelstenen zelf.

   Eén lichte onderbreking: de Heritage lijn is gefotografeerd op wit, en krijgt
   daarom een volle perkamentband midden in de pagina. Die band is tegelijk het
   rustpunt van de compositie.
   =========================================================================== */

:root {
  --grond: #0b0a09;
  --grond-diep: #000;
  --grond-op: #141110;

  --perkament: #f1ebe0;
  --perkament-diep: #e7dfd0;

  --goud: #c9a227;
  --goud-licht: #e4c87e;
  --goud-diep: #7d5e12;

  --room: #f6f1e8;
  --room-zacht: rgba(246, 241, 232, .70);
  --room-stil: rgba(246, 241, 232, .62);

  --inkt: #231d14;
  --inkt-zacht: rgba(35, 29, 20, .78);

  --display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --tekst: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --marge: clamp(1.25rem, 5vw, 5rem);
  --breed: 82rem;
  --ritme: clamp(4.5rem, 9vw, 7.5rem);

  /* knoppen van de opening */
  --opening-achtergrond: #0b0a09;
  --opening-demping: .62;
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--room);
  font-family: var(--tekst);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.68;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }

p { margin: 0; }

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

.motief-bron { position: absolute; width: 0; height: 0; overflow: hidden; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .85rem 1.25rem;
  background: var(--goud);
  color: #140f05;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.overslaan:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--goud-licht);
  outline-offset: 3px;
}

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

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

.titel {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.12;
}

.titel--groot {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 1.04;
}

.kop-klein {
  font-family: var(--tekst);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goud-licht);
}

.lood {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem);
  line-height: 1.62;
  color: var(--room);
}

.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.kicker svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.kicker--donker { color: var(--goud-diep); }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.7rem;
  font-family: var(--tekst);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.knop--goud {
  background: var(--goud);
  color: #140f05;
  border-color: var(--goud);
}
.knop--goud:hover { background: var(--goud-licht); border-color: var(--goud-licht); }

.knop--rand {
  color: var(--room);
  border-color: rgba(246, 241, 232, .4);
}
.knop--rand:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

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

/* De balk zweeft boven de opening en schuift daarna over de pagina heen. Hij
   heeft daarom altijd zijn eigen donkere grond nodig: zonder dat komt de
   merknaam onderweg over de gouden belknop van de hero te staan, en is hij
   een moment lang niet te lezen. De sluier staat in de CSS en niet in het
   script, zodat de leesbaarheid niet van een klasse afhangt die pas bij de
   eerste scroll gezet wordt. */
.kopbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background-color: rgba(11, 10, 9, .55);
  background-image: linear-gradient(to bottom, rgba(11, 10, 9, .92) 0%, rgba(11, 10, 9, .55) 62%, rgba(11, 10, 9, 0) 100%);
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}

.kopbalk.is-vast {
  background-color: #0b0a09;
  background-image: none;
  border-bottom-color: rgba(201, 162, 39, .22);
}

.kopbalk__binnen {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(.9rem, 1.8vw, 1.35rem) var(--marge);
}

.merk {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--room);
}
.merk__tulp { width: 1.7rem; height: 1.7rem; color: var(--goud); flex: 0 0 auto; }
.merk__naam {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .3em;
  padding-left: .1em;
}

.hoofdnav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  margin-left: auto;
}
.hoofdnav a {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--room-zacht);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.hoofdnav a:hover { color: var(--goud-licht); border-bottom-color: var(--goud); }

.kopbalk__bel { padding: .72rem 1.3rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .55rem .2rem;
  background: none;
  border: 0;
  color: var(--room);
  font-family: var(--tekst);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
.menuknop__streep {
  display: block;
  width: 1.4rem;
  height: 1px;
  background: var(--goud);
}
.menuknop__streep + .menuknop__streep { margin-top: -.02rem; }

@media (max-width: 899px) {
  .hoofdnav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 5.5rem var(--marge) 2.25rem;
    background: rgba(11, 10, 9, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(201, 162, 39, .22);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.22, .8, .3, 1), visibility .45s;
  }
  .hoofdnav a {
    width: 100%;
    padding-block: .85rem;
    font-size: .9rem;
    border-bottom: 1px solid rgba(246, 241, 232, .1);
  }
  .kopbalk.is-open .hoofdnav { transform: none; visibility: visible; }
  .kopbalk.is-open { background: rgba(11, 10, 9, .97); }
  .menuknop { display: inline-flex; }
  .kopbalk__bel { display: none; }
}

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

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

.opening__kop {
  display: flex;
  align-items: flex-end;
  /* Op een telefoon houdt de fotokaart de onderste 58% vrij; de kop moet daar
     met kicker, titel, zin en twee knoppen in passen. */
  padding: 0 var(--marge) 5.5svh;
  pointer-events: none;
}
.opening__kop a { pointer-events: auto; }

.opening__tekst {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.opening__titel {
  font-size: clamp(2.05rem, 1.1rem + 4.9vw, 4.1rem);
  line-height: 1.04;
  color: var(--room);
  text-wrap: balance;
}

.opening__zinnetje {
  margin-top: .9rem;
  max-width: 26rem;
  color: var(--room-zacht);
  font-size: 1.02rem;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}

.kicker--licht { color: var(--goud-licht); }

@media (min-width: 700px) {
  /* De fotokaart begint rechts (inset links 50%, onder 14%); de kop staat in
     de linkerhelft en lijnt onderaan met de kaart uit. */
  .opening__kop {
    justify-content: flex-start;
    padding-bottom: 14svh;
    padding-right: 52vw;
  }
  .opening__tekst { margin-inline: 0; max-width: 32rem; }
}

@media (min-width: 1500px) {
  .opening__kop { padding-left: max(var(--marge), calc((100vw - var(--breed)) / 2)); }
}

.opening__slot {
  display: flex;
  justify-content: center;
  padding: 0 var(--marge) 9svh;
}
/* Aan het eind van de beweging staat deze regel niet meer op de donkere rand
   van de foto maar op de lichte vloer van de boutique. Goud op licht grijs is
   daar nauwelijks te lezen, en de demping onder de kop reikt niet tot hier.
   De regel draagt daarom zijn eigen schaduw mee in plaats van een balk: het
   beeld blijft open, de letters blijven staan. */
.opening__slotregel {
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goud-licht);
  text-align: center;
  text-shadow:
    0 0 .9rem rgba(11, 10, 9, .95),
    0 0 2.4rem rgba(11, 10, 9, .85),
    0 .08em .25rem rgba(11, 10, 9, .8);
}

.opening__wenk { align-items: center; }
.wenk__lijn {
  display: block;
  width: 1px;
  height: 3.25rem;
  background: linear-gradient(to bottom, rgba(228, 200, 126, 0), rgba(228, 200, 126, .85));
}

/* ===========================================================================
   ATELIER
   =========================================================================== */

.atelier {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) var(--ritme);
}

/* Een warme gloed loopt vanuit de opening de sectie in, zodat de overgang van
   hero naar tekst geen harde naad is. */
.atelier::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 32rem;
  background: radial-gradient(90% 100% at 50% 0%, rgba(201, 162, 39, .14), rgba(201, 162, 39, 0) 68%);
  pointer-events: none;
}

.atelier__raster {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

.atelier__woord p + p { margin-top: 1.1rem; }
.atelier__woord .lood { margin-top: 1.75rem; }
.atelier__woord p:not(.lood):not(.kicker) { color: var(--room-zacht); }

.atelier__beeld {
  margin: 0;
  position: relative;
}
.atelier__beeld img { width: 100%; }

@media (min-width: 900px) {
  .atelier__raster {
    grid-template-columns: 1fr minmax(18rem, 25rem);
  }
}

.atelier__onder { margin-top: clamp(3rem, 6vw, 5rem); }

.kaart-stil {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(246, 241, 232, .14);
}
.kaart-stil article p { margin-top: .8rem; color: var(--room-zacht); }

@media (min-width: 760px) {
  .kaart-stil { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================================
   COLLECTIE
   =========================================================================== */

/* De atelier-sectie hierboven sluit al met een volle --ritme af. Nog eens een
   volle --ritme erbovenop maakt van de naad een leeg veld, en dat is precies de
   lege-bloktrap die de pagina uit elkaar trekt. De helft is genoeg. */
.collectie { padding-block: clamp(3rem, 5vw, 4.5rem) 0; }

.collectie__intro { max-width: 46rem; }
.collectie__intro .lood { margin-top: 1.4rem; color: var(--room-zacht); }

/* Het drieluik is het volvlakse rustmoment: drie foto's tegen elkaar, zonder
   rand, zodat ze als één band over de pagina lopen.

   De fotografie van TULP is op zwart geschoten met veel lucht rond het
   sieraad. Staat zo'n foto in zijn eigen verhouding op een zwarte pagina, dan
   blijft er een hoge, vrijwel lege band over waarin de ring een speldenknop
   is. Het kader is daarom bewust liggend: `cover` snijdt dan juist de zwarte
   boven- en onderrand weg en zoomt op het juweel in. */
.drieluik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(201, 162, 39, .28);
}
.drieluik figure { margin: 0; overflow: hidden; background: var(--grond-diep); }
.drieluik img {
  width: 100%;
  height: clamp(13rem, 20vw, 19rem);
  object-fit: cover;
  object-position: center 50%;
  transition: transform 1.1s cubic-bezier(.22, .8, .3, 1);
}
.drieluik figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .drieluik img { transition: none; }
  .drieluik figure:hover img { transform: none; }
}

@media (max-width: 699px) {
  .drieluik { grid-template-columns: repeat(2, 1fr); }
  .drieluik figure:last-child { grid-column: span 2; }
  .drieluik figure:last-child img { height: clamp(14rem, 55vw, 20rem); }
}

.prijzen {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  /* ruimte voor de brugfoto, die uit de volgende sectie hierin omhoog steekt */
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.prijzen__hoofd { max-width: 34rem; }
.prijzen__hoofd p { margin-top: 1rem; color: var(--room-zacht); }

/* De lijst staat in twee kolommen zodra er ruimte voor is: dertien regels
   onder elkaar maken van een prijslijst een lange, smalle strook met een lege
   helft ernaast, en dat leest als een document in plaats van als een kaart. */
.prijslijst { border-top: 1px solid rgba(201, 162, 39, .32); }
.prijslijst li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(246, 241, 232, .12);
}

@media (min-width: 760px) {
  .prijslijst {
    display: grid;
    /* Kolomsgewijs vullen, niet rijgewijs: anders springt het oog bij het
       lezen heen en weer tussen de twee kolommen. */
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.prijslijst li > span:first-child {
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: .01em;
}
.prijs {
  flex: 0 0 auto;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--goud-licht);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   HERITAGE, de lichte band
   ---------------------------------------------------------------------------
   De Heritage-foto's zijn uitgesneden sieraden op een wit fond. Op een crème
   vlak wordt elk zo'n foto een zichtbare witte tegel, en dan kijk je naar een
   rij kaartjes in plaats van naar de ringen. De band is daarom wit: het fond
   van de foto valt samen met de pagina en de ringen zweven op het papier.
   Warmte komt hier uit het goud en de inkt, niet uit het vlak.
   =========================================================================== */

.heritage {
  position: relative;
  /* `flow-root` en niet `block`: de brugfoto hieronder wordt met een negatieve
     bovenmarge over de naad getild, en zonder eigen blokcontext zou die marge
     doorlopen naar de sectie zelf. Dan schuift de hele witte band omhoog in
     plaats van de foto, en is er geen brug maar een verschoven vlak. */
  display: flow-root;
  background: #fff;
  color: var(--inkt);
  padding-bottom: var(--ritme);
}

/* De onderrand van de band is een gouden haarlijn die naar de zijkanten
   uitdooft: het einde van het wit is een besluit, geen afgesneden vlak. */
.heritage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, rgba(201, 162, 39, 0), rgba(201, 162, 39, .6) 50%, rgba(201, 162, 39, 0));
}

/* De zwarte foto hangt over de naad heen: de donkere pagina loopt het licht
   in, in plaats van er abrupt tegenaan te stoppen.

   Het omhoog schuiven gebeurt met een negatieve marge en niet met `transform`.
   Een `transform` wordt hier namelijk overschreven door de onthulregel verderop
   (`[data-reveal].in-beeld { transform: none }`), en dan verdween de brug zodra
   de animaties aan stonden: in de stille schermafdruk klopte de naad wel, in de
   echte browser niet. Een marge kan die regel niet raken. */
.heritage__brug {
  margin: clamp(-7rem, -9vw, -4rem) auto clamp(-5rem, -7vw, -3rem);
  width: min(100% - 2 * var(--marge), 32rem);
  box-shadow: 0 2.5rem 5rem rgba(35, 29, 20, .32);
  /* De grond van het vak is dezelfde zwarte als de foto erin. Is de foto nog
     niet geschilderd, dan is de brug een donker vlak over de naad en dus nog
     steeds een brug; zonder dit staat er een wit gat midden in het ontwerp. */
  background: var(--grond-diep);
}
.heritage__brug img { width: 100%; }

.heritage__intro {
  max-width: 48rem;
  padding-top: clamp(1rem, 2vw, 2rem);
}
.heritage__intro .lood { margin-top: 1.5rem; color: var(--inkt-zacht); }

/* Vijf uitgesneden ringen op een rij worden anders vijf gelijke vakjes. Ze
   staan daarom op een golvende basislijn met het middelste stuk groter: een
   gezette etalage in plaats van een contactvel. Het verspringen gebeurt met
   marges, niet met `transform`, om dezelfde reden als bij de brug hierboven. */
.heritage__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(35, 29, 20, .16);
}
.heritage__rij figure { margin: 0; }
.heritage__rij img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@media (min-width: 900px) {
  .heritage__rij { grid-template-columns: repeat(5, 1fr); }
  .heritage__rij figure:nth-child(odd) { margin-top: clamp(1.5rem, 4vw, 3.25rem); }
  .heritage__rij figure:nth-child(3) { margin: 0 -12%; }
}

/* ---- de twee lijnen zonder eigen foto ---------------------------------- */

.platen {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
}

/* Verona heeft vier keer zoveel tekst als Versailles. Stonden beide tarieflijsten
   gewoon onder hun eigen alinea, dan hingen de twee kolommen op verschillende
   hoogte en kreeg de band twee ongelijke staarten, precies het losse-blokgevoel
   dat de pagina verder nergens heeft. De lijsten worden daarom naar de onderkant
   van de kolom geduwd, zodat ze op dezelfde regel beginnen en eindigen. */
.plaat {
  position: relative;
  display: flex;
  flex-direction: column;
}
.plaat .plaat__tekst { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.plaat .tarieven { margin-top: auto; }

/* De tulp uit de kopbalk, hier groot en bijna onzichtbaar als watermerk: het
   motief dat de hele pagina bij elkaar houdt, ook waar geen foto is. */
.plaat__merk {
  position: absolute;
  top: -1.25rem;
  right: 0;
  width: clamp(6rem, 11vw, 9.5rem);
  height: clamp(6rem, 11vw, 9.5rem);
  color: var(--goud);
  opacity: .1;
  pointer-events: none;
}

.plaat__tekst { margin-top: 1rem; color: var(--inkt-zacht); }

@media (min-width: 820px) {
  .platen {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 6vw, 5rem);
  }
  .platen .plaat + .plaat {
    border-left: 1px solid rgba(35, 29, 20, .16);
    padding-left: clamp(3rem, 6vw, 5rem);
  }
}

/* ---- de lijnen met een eigen foto -------------------------------------- */

.lijnen { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }

.lijn {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}

.lijn__naam {
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.05;
}
.lijn__woord p { margin-top: .9rem; color: var(--inkt-zacht); max-width: 44rem; }

.tarieven {
  margin-top: 1.6rem;
  max-width: 32rem;
  border-top: 1px solid rgba(35, 29, 20, .2);
}
.tarieven li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(35, 29, 20, .12);
  font-size: .95rem;
}
.tarieven .prijs { color: var(--goud-diep); font-size: .85rem; }

.lijn__foto { margin: 0; }
.lijn__foto img {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

@media (min-width: 820px) {
  .lijn--beeld { grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); }
  .lijn--gespiegeld .lijn__woord { order: 2; }
  .lijn--gespiegeld .lijn__foto { order: 1; }
}

/* ---- Carpe Diem: het donkere vlak midden in de lichte band -------------- */

/* Het duurste stuk van de lijn heeft geen bruikbare foto, en zou als zevende
   rij onder dezelfde haarlijn verdwijnen. Als enige onderbreking van het wit
   loopt het hier over de volle breedte in de grond van de rest van de site:
   de band krijgt er een hoogtepunt door, en de twee helften van de pagina
   raken elkaar halverwege in plaats van alleen aan de naden. */
.carpe {
  position: relative;
  overflow: hidden;
  margin-block: clamp(3.5rem, 7vw, 5.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--grond);
  color: var(--room);
}
.carpe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 18% 50%, rgba(201, 162, 39, .16), rgba(201, 162, 39, 0) 62%);
  pointer-events: none;
}

.carpe__binnen {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.carpe__naam {
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.4rem);
  line-height: 1;
}
.carpe__tekst { margin-top: 1.2rem; max-width: 34rem; color: var(--room-zacht); }

.tarieven--licht {
  margin-top: 0;
  border-top-color: rgba(201, 162, 39, .42);
}
.tarieven--licht li { border-bottom-color: rgba(246, 241, 232, .14); }
.tarieven--licht .prijs { color: var(--goud-licht); font-size: .9rem; }

@media (min-width: 860px) {
  .carpe__binnen { grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); }
}

/* ===========================================================================
   LOOKBOOK
   =========================================================================== */

/* Zelfde reden als bij .collectie: de heritage-band sluit al met --ritme af.
   De gloed is dezelfde als die van .atelier, nu aan de andere kant van de
   lichte band: het goud dat uit de hero kwam, komt er aan de onderkant weer
   uit, zodat de harde witte rand een overgang wordt in plaats van een knip. */
.lookbook { position: relative; padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.lookbook::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 28rem;
  background: radial-gradient(90% 100% at 50% 0%, rgba(201, 162, 39, .13), rgba(201, 162, 39, 0) 68%);
  pointer-events: none;
}

.lookbook__intro { position: relative; max-width: 44rem; }
.lookbook__intro .lood { margin-top: 1.4rem; color: var(--room-zacht); }

.galerij {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--grond-diep);
}
.galerij figure { margin: 0; }

.galerij__knop {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--grond-diep);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
/* Vierkant en iets ruimer dan het vak, zodat `cover` de zwarte rand rond het
   sieraad wegsnijdt in plaats van hem te tonen. Dat gebeurt met de maat van de
   afbeelding en niet met een transform, zodat de zoom blijft staan als de
   hover-transform onder prefers-reduced-motion wordt uitgezet. */
.galerij__knop { aspect-ratio: 1 / 1; }
.galerij__knop img {
  width: 112%;
  height: 112%;
  margin: -6% 0 0 -6%;
  object-fit: cover;
  object-position: center 47%;
  transition: transform 1s cubic-bezier(.22, .8, .3, 1), opacity .5s ease;
}
.galerij__knop:hover img { transform: scale(1.05); opacity: .86; }

@media (min-width: 620px) { .galerij { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .galerij { grid-template-columns: repeat(5, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .galerij__knop img { transition: none; }
  .galerij__knop:hover img { transform: none; }
}

/* ===========================================================================
   DE BAND, van het lookbook naar het bezoek
   ---------------------------------------------------------------------------
   Het enige liggende, volvlakse beeld van de pagina. Hij sluit hard aan op de
   laatste rij van het lookbook (geen marge ertussen) en dooft aan zijn boven-
   en onderkant uit in de grond van de pagina, zodat hij geen ingeplakte
   rechthoek is maar een moment waarop het zwart even opengaat.
   =========================================================================== */

.band {
  position: relative;
  margin: 0;
  /* De ondergrens is bewust laag. De opname is 16:9; op een telefoon zou een
     hoger vak hem vrijwel onuitgesneden tonen, en dan is het geen band maar een
     tweede, kleine hero waarop niets meer te zien is. */
  height: clamp(11rem, 34vw, 26rem);
  overflow: hidden;
  background: var(--grond-diep);
}
.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Iets onder het midden: daar liggen de verlichte vitrine, de werkbank en de
     twee toonbanken op één lijn. Hoger wordt het plafond, lager de vloer. */
  object-position: center 58%;
}
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(11, 10, 9, .72) 0%,
    rgba(11, 10, 9, .10) 34%,
    rgba(11, 10, 9, .22) 62%,
    rgba(11, 10, 9, .9) 100%);
  pointer-events: none;
}

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

/* De band hierboven is de onderbreking die de bovenmarge van deze sectie eerst
   moest zijn. Een volle --ritme eroverheen maakt er weer een leeg veld van. */
.bezoek { padding-block: clamp(3rem, 6vw, 5rem) var(--ritme); }

.bezoek__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.bezoek__woord { max-width: 38rem; }
.bezoek__woord .lood { margin-top: 1.5rem; }
.bezoek__woord > p:last-of-type { margin-top: 1.1rem; color: var(--room-zacht); }

.bezoek__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.1rem;
}

.gegevens {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(201, 162, 39, .32);
}
.gegeven {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(246, 241, 232, .12);
}
.gegeven__label {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.gegeven__waarde {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--room);
}
.gegeven__link {
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid rgba(201, 162, 39, .45);
  transition: color .3s ease, border-color .3s ease;
}
.gegeven__link:hover { color: var(--goud-licht); border-bottom-color: var(--goud-licht); }

@media (min-width: 900px) {
  .bezoek__raster { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 22rem); }
}

/* ---- het bericht ------------------------------------------------------- */

/* De oude site had een invulformulier naast telefoon en WhatsApp. Het blijft
   bestaan, maar het wordt geen kader met vakjes: de velden zijn dezelfde gouden
   haarlijnen als de prijslijst, de gegevens en de tarieven hierboven, zodat het
   formulier leest als de laatste regel van de pagina en niet als een ingeplakt
   blok. De scheiding met het blok erboven is één haarlijn, geen leeg veld. */
.bericht {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(201, 162, 39, .26);
}

.bericht__woord p { margin-top: 1.1rem; max-width: 30rem; color: var(--room-zacht); }
.bericht__noot { font-size: .88rem; color: var(--room-stil); }

.bericht__formulier { display: grid; gap: 1.4rem 1.75rem; align-content: start; }

.veld { display: grid; gap: .5rem; min-width: 0; }
.veld label {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.veld input,
.veld textarea {
  width: 100%;
  padding: .65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(246, 241, 232, .3);
  border-radius: 0;
  color: var(--room);
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.5;
  transition: border-color .3s ease;
}
.veld textarea {
  min-height: 6.5rem;
  resize: vertical;
  font-family: var(--tekst);
  font-weight: 300;
  font-size: 1rem;
}
.veld input:hover,
.veld textarea:hover { border-bottom-color: rgba(201, 162, 39, .55); }
.veld input:focus,
.veld textarea:focus { border-bottom-color: var(--goud-licht); }

/* Chrome schildert een ingevuld veld standaard lichtblauw met zwarte letters,
   en dan staat er midden in de donkere voet van de pagina een wit vakje. */
.veld input:-webkit-autofill {
  -webkit-text-fill-color: var(--room);
  caret-color: var(--room);
  transition: background-color 8000s;
}

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

@media (min-width: 560px) {
  .bericht__formulier { grid-template-columns: 1fr 1fr; }
  .veld--breed,
  .bericht__formulier .knop { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .bericht { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

@media (prefers-reduced-motion: reduce) {
  .veld input, .veld textarea { transition: none; }
}

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

.voet {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(246, 241, 232, .12);
  background: var(--grond-op);
}

.voet__binnen {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3rem);
  justify-items: center;
  text-align: center;
}

.voet__merk { display: grid; justify-items: center; }

.voet__plaat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  padding: .9rem;
  background: var(--perkament);
  border-radius: 50%;
}
.voet__plaat img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.voet__naam {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .26em;
  padding-left: .26em;
}
.voet__regel {
  margin-top: .5rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-licht);
}

/* De voet sloot eerst af met één regel adres onder de navigatie, en dat was
   het punt waarop de pagina ophield in plaats van afsloot. De drie kolommen
   herhalen wat iemand aan het eind van een bezoek nodig heeft: waar het is,
   hoe je een afspraak maakt, waar je ze terugvindt. */
.voet__kolommen {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  width: 100%;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(201, 162, 39, .26);
  text-align: left;
}

.voet__kolom { display: grid; justify-items: start; gap: .35rem; }

.voet__label {
  margin-bottom: .35rem;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--goud-licht);
}

.voet__waarde {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--room);
}

.voet__link {
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, .4);
  transition: color .3s ease, border-color .3s ease;
}
.voet__link:hover { color: var(--goud-licht); border-bottom-color: var(--goud-licht); }

@media (min-width: 700px) {
  .voet__kolommen { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
}

.voet__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.75rem;
}
.voet__nav a {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--room-zacht);
  transition: color .3s ease;
}
.voet__nav a:hover { color: var(--goud-licht); }

/* ===========================================================================
   LICHTBAK
   =========================================================================== */

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lichtbak[hidden] { display: none; }

.lichtbak__achter {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .94);
  border: 0;
}

.lichtbak__venster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(92vw, 44rem);
  padding: clamp(3.25rem, 7vw, 4.5rem) 1rem 1rem;
}

.lichtbak__beeld {
  max-height: 72svh;
  width: auto;
  object-fit: contain;
}

.lichtbak__bij {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--room-zacht);
  text-align: center;
  max-width: 32rem;
}

.lichtbak__sluit,
.lichtbak__pijl {
  position: absolute;
  background: none;
  border: 1px solid rgba(246, 241, 232, .3);
  color: var(--room);
  font-family: var(--tekst);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.lichtbak__sluit:hover,
.lichtbak__pijl:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

.lichtbak__sluit { top: 1rem; right: 1rem; }
.lichtbak__pijl { top: 1rem; }
.lichtbak__pijl--terug { left: 1rem; }
.lichtbak__pijl--verder { left: 7.5rem; }

@media (max-width: 520px) {
  .lichtbak__pijl--verder { left: auto; right: 1rem; top: auto; bottom: 1rem; }
  .lichtbak__pijl--terug { top: auto; bottom: 1rem; }
  .lichtbak__venster { padding-bottom: 4.5rem; }
}

/* ===========================================================================
   ONTHULLEN
   ---------------------------------------------------------------------------
   Alles staat zichtbaar in de CSS. Pas als script.js vaststelt dat het mag
   (IntersectionObserver aanwezig, geen reduced motion) zet het de klasse op
   <html> en gaan de blokken verborgen beginnen. Faalt het script, dan blijft
   de pagina gewoon leesbaar.
   =========================================================================== */

html.onthullen-aan [data-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
}
html.onthullen-aan [data-reveal].in-beeld {
  opacity: 1;
  transform: none;
  transition: opacity .85s cubic-bezier(.22, .8, .3, 1), transform .85s cubic-bezier(.22, .8, .3, 1);
  transition-delay: calc(var(--trap, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  html.onthullen-aan [data-reveal] { opacity: 1; transform: none; }
  html.onthullen-aan [data-reveal].in-beeld { transition: none; }
  .knop, .hoofdnav a, .gegeven__link, .voet__nav a, .voet__link { transition: none; }
}