/* ===========================================================================
   Café Sjiek, Maastricht
   ---------------------------------------------------------------------------
   Richting: het bistro-donker van de zaak zelf. Bijna-zwarte lambrisering,
   het rode fluwelen gordijn, het messing van de lampen en het groen van het
   oude transferware servies. Eén doorlopende compositie: de secties delen
   kleur en overlappen elkaar, in plaats van los naast elkaar te staan.
   =========================================================================== */

:root {
  /* kleur */
  --inkt: #100F0D;
  --inkt-diep: #070706;
  --inkt-hoog: #1A1815;
  --groen: #15201B;
  --groen-hoog: #1D2B24;
  --rood: #8C1A17;
  --rood-diep: #6A110F;
  --messing: #C6A05A;
  --messing-licht: #E8CF9B;
  --bot: #F3EEE4;

  --tekst: rgba(243, 238, 228, .80);
  --tekst-stil: rgba(243, 238, 228, .64);
  --lijn: rgba(243, 238, 228, .14);
  --lijn-sterk: rgba(243, 238, 228, .26);

  /* de opening leest deze twee */
  --opening-achtergrond: #100F0D;
  --opening-demping: .8;

  /* Letter: niets van een vreemde server. De herofoto is helder en druk, dus
     de kop moet het van maat en contrast hebben, niet van een webfont dat
     er misschien niet is. Een didone als die er staat, anders de klassieke
     krantenserif. */
  --kop: 'Bodoni MT', 'Didot', 'Big Caslon', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --sans: 'Futura', 'Century Gothic', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ritme */
  --rit: clamp(3.75rem, 7.5vw, 7rem);
  --breed: 1280px;
  --kantlijn: clamp(1.25rem, 5vw, 4rem);
  --veer: cubic-bezier(.22, .7, .2, 1);
}

/* --- grond ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--inkt);
  color: var(--tekst);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 { font-family: var(--kop); font-weight: 400; margin: 0; }

p, ul, ol { margin: 0; }

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

::selection { background: var(--rood); color: var(--bot); }

section[id] { scroll-margin-top: clamp(3.5rem, 7vw, 5.5rem); }

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

.naar-inhoud {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--bot);
  color: var(--inkt);
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.naar-inhoud:focus { left: .75rem; top: .75rem; }

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

.opmaat {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(.68rem, .64rem + .12vw, .78rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  margin: 0 0 1.4rem;
}
.opmaat--messing { color: var(--messing); }
.opmaat--bot { color: rgba(243, 238, 228, .78); }

.titel {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--bot);
  margin: 0 0 1.5rem;
}
.titel--groot { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem); }

.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  line-height: 1.6;
  color: rgba(243, 238, 228, .9);
  margin: 0 0 1.25rem;
  max-width: 38ch;
}

.tekst { margin: 0 0 1.1rem; max-width: 46ch; }
.tekst--klein { font-size: .92rem; color: var(--tekst-stil); letter-spacing: .02em; }

.knoprij { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }

/* knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .35s var(--veer), color .35s var(--veer), border-color .35s var(--veer), transform .35s var(--veer);
}
.knop--vol { background: var(--rood); color: var(--bot); border-color: var(--rood); }
.knop--vol:hover { background: var(--rood-diep); border-color: var(--rood-diep); transform: translateY(-2px); }
.knop--lijn { color: var(--bot); border-color: var(--lijn-sterk); }
.knop--lijn:hover { border-color: var(--messing); color: var(--messing-licht); transform: translateY(-2px); }
.knop--bot { background: var(--bot); color: var(--inkt); border-color: var(--bot); }
.knop--bot:hover { background: transparent; color: var(--bot); transform: translateY(-2px); }
.knop--klein { padding: .68rem 1.15rem; font-size: .74rem; letter-spacing: .13em; }

/* uitsneden: één bronfoto, meerdere beeldmomenten ------------------------- */

/* De grond onder een uitsnede is geen vlak zwart gat: zolang de foto er nog
   niet is, staat er een warme schemer met een messingrand, zodat een trage
   verbinding geen dood rechthoek oplevert. */
.uitsnede {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(198, 160, 90, .14), rgba(198, 160, 90, 0) 68%),
    var(--inkt-diep);
}
.uitsnede > img {
  position: absolute;
  display: block;
  max-width: none;
  top: 0;
}

/* foto-1 is een drieluik: drie panelen naast elkaar in één bestand */
.uitsnede--derde { aspect-ratio: 2 / 3; }
.uitsnede--derde > img { width: 306%; height: 100%; object-fit: cover; }
.uitsnede--derde-1 > img { left: -1%; }
.uitsnede--derde-2 > img { left: -103%; }
.uitsnede--derde-3 > img { left: -205%; }

/* foto-4 is een tweeluik */
.uitsnede--helft { aspect-ratio: 13 / 20; }
.uitsnede--helft > img { width: 204%; height: 100%; object-fit: cover; }
.uitsnede--helft-1 > img { left: -1%; }
.uitsnede--helft-2 > img { left: -103%; }

/* een detail uit de herofoto: de schaal garnalen */
.uitsnede--detail { aspect-ratio: 1 / 1; }
.uitsnede--detail > img { width: 262%; height: auto; left: -161%; top: -50%; }

/* ==========================================================================
   DE BALK
   ========================================================================== */

.balk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s var(--veer), border-color .4s var(--veer), backdrop-filter .4s var(--veer);
  border-bottom: 1px solid transparent;
}
.balk--gevuld {
  background: rgba(10, 9, 8, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn);
}

.balk__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: .9rem var(--kantlijn);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.merk { display: block; flex: 0 0 auto; line-height: 0; }
.merk__logo {
  height: clamp(22px, 2.4vw, 30px);
  width: auto;
  max-width: 55vw;
}

.navigatie {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
}
.navigatie a {
  position: relative;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(243, 238, 228, .76);
  padding: .3rem 0;
  transition: color .3s var(--veer);
}
.navigatie a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--messing);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--veer);
}
.navigatie a:hover { color: var(--bot); }
.navigatie a:hover::after { transform: scaleX(1); }

.balk__rechts { display: flex; align-items: center; gap: .75rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 1px solid var(--lijn-sterk);
  color: var(--bot);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .6rem .9rem;
  cursor: pointer;
}
.menuknop__streepjes,
.menuknop__streepjes::before,
.menuknop__streepjes::after {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform .35s var(--veer), opacity .25s var(--veer);
}
.menuknop__streepjes { position: relative; }
.menuknop__streepjes::before { content: ''; position: absolute; top: -5px; }
.menuknop__streepjes::after { content: ''; position: absolute; top: 5px; }
.menuknop[aria-expanded="true"] .menuknop__streepjes { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streepjes::before { transform: translateY(5px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streepjes::after { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   DE OPENING: alleen de opmaak, de beweging zit in opening.css/js
   ========================================================================== */

.opening__kop {
  padding: 0 var(--kantlijn) clamp(3.5rem, 9svh, 6rem);
}

/* De herofoto is licht en druk: witte borden, geel geschuurd hout. De vaste
   demping van de opening is daar te zwak voor, dus staat er onder de kop en
   onder de slotregel een eigen voet die naar de onderrand toe dichtloopt. */
.opening__kop::before,
.opening__slot::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: min(190%, 66svh);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 7, 6, 0) 0%,
    rgba(7, 7, 6, .42) 38%,
    rgba(7, 7, 6, .82) 72%,
    rgba(7, 7, 6, .94) 100%);
}
.opening__kop-binnen {
  max-width: var(--breed);
  margin: 0 auto;
  width: 100%;
}
.opening__kop .opmaat {
  color: var(--messing);
  margin-bottom: 1.1rem;
}
.opening__titel {
  font-family: var(--kop);
  font-weight: 400;
  color: var(--bot);
  font-size: clamp(2.45rem, 1.2rem + 4.8vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(7, 7, 6, .55);
}
.opening__zin-vast {
  margin: 1.25rem 0 0;
  max-width: 42ch;
  color: rgba(243, 238, 228, .84);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
}
.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.1rem;
}

.opening__slot {
  padding: 0 var(--kantlijn) clamp(3.5rem, 9svh, 6rem);
}
/* De slotregel is een nazin, geen tweede kop: hij staat een slag kleiner dan
   de <h1> die er bij binnenkomst stond, zodat het einde van de opening niet
   even hard roept als het begin. */
.opening__slotregel {
  max-width: var(--breed);
  margin: 0 auto;
  font-family: var(--kop);
  font-size: clamp(1.5rem, .9rem + 2.6vw, 2.9rem);
  line-height: 1.14;
  text-wrap: balance;
  color: var(--bot);
  text-shadow: 0 2px 26px rgba(7, 7, 6, .6);
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: rgba(243, 238, 228, .6);
}
.opening__wenk-tekst {
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.opening__wenk-lijn {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(243, 238, 228, .5), rgba(243, 238, 228, 0));
}

/* ==========================================================================
   HET CAFÉ
   ========================================================================== */

.huiskamer {
  position: relative;
  background: var(--inkt);
  padding: var(--rit) 0 0;
}
.huiskamer::before {
  content: '';
  position: absolute;
  top: 0; left: var(--kantlijn); right: var(--kantlijn);
  height: 1px;
  background: linear-gradient(90deg, var(--messing), rgba(198, 160, 90, 0) 62%);
  opacity: .5;
}

.huiskamer__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.huiskamer__tekst { padding-top: clamp(0rem, 2vw, 2rem); }

.huiskamer__beeld { margin: 0; position: relative; z-index: 0; }
.huiskamer__beeld::after {
  content: '';
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid rgba(198, 160, 90, .4);
  z-index: -1;
}
.huiskamer__beeld .uitsnede { max-height: 76vh; }
.huiskamer__bijschrift {
  margin-top: 1rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}

/* de hairline-strook sluit de sectie af en loopt door in de band */
.feiten {
  max-width: var(--breed);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--lijn);
}
.feiten li {
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2.2rem) clamp(1.75rem, 3.5vw, 2.8rem);
  border-left: 1px solid var(--lijn);
}
.feiten li:first-child { border-left: 0; padding-left: 0; }
.feiten li:last-child { padding-right: 0; }
.feiten__kop {
  display: block;
  font-family: var(--kop);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  color: var(--bot);
  line-height: 1.2;
  margin-bottom: .45rem;
}
.feiten__uitleg {
  display: block;
  font-size: .88rem;
  color: var(--tekst-stil);
  line-height: 1.5;
}

/* ==========================================================================
   DE BAND: een vol-breed rustmoment
   ========================================================================== */

.band {
  position: relative;
  height: clamp(16rem, 30vw, 27rem);
  background: var(--inkt-diep);
  overflow: hidden;
}
/* Dit is de naam van de zaak, met de hand in het glas van de voordeur geëtst:
   het enige echte merkbeeld dat ze hebben. Hij moet dus te zien zijn. De
   demping hieronder houdt alleen de linkerhelft donker genoeg voor de regel en
   laat het schrift daarnaast oplichten, in plaats van de hele band dicht te
   gooien. */
.band__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  filter: contrast(1.14) brightness(1.08);
}
.band__schaduw {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 15, 13, .9) 0%, rgba(16, 15, 13, .56) 30%, rgba(16, 15, 13, .12) 60%, rgba(16, 15, 13, 0) 100%),
    linear-gradient(180deg, rgba(16, 15, 13, .5) 0%, rgba(16, 15, 13, 0) 32%, rgba(16, 15, 13, .5) 100%);
}
.band__regel {
  position: absolute;
  left: var(--kantlijn);
  right: var(--kantlijn);
  top: 50%;
  transform: translateY(-50%);
  max-width: var(--breed);
  margin: 0 auto;
  font-family: var(--kop);
  font-size: clamp(1.9rem, 1rem + 3.6vw, 3.9rem);
  line-height: 1.1;
  color: var(--bot);
  letter-spacing: -.015em;
  /* De regel staat nu op een foto die wél licht geeft; de schaduw houdt hem
     los van het glas erachter zonder er weer een zwart vlak onder te leggen. */
  text-shadow: 0 2px 20px rgba(7, 7, 6, .85), 0 0 46px rgba(7, 7, 6, .55);
}
.band__regel::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--messing);
  margin-bottom: 1.4rem;
}

/* ==========================================================================
   DE KAART
   ========================================================================== */

.kaart {
  background: linear-gradient(180deg, var(--groen) 0%, var(--groen) 72%, var(--groen-hoog) 100%);
  padding: var(--rit) 0;
}
.kaart__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.klassiekers {
  margin: 2.25rem 0 2.5rem;
  border-top: 1px solid rgba(198, 160, 90, .32);
}
.klassiekers li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(198, 160, 90, .22);
  transition: padding-left .4s var(--veer);
}
.klassiekers li:hover { padding-left: .6rem; }
.klassiekers__nr {
  font-family: var(--kop);
  font-size: .9rem;
  color: var(--messing);
  letter-spacing: .06em;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums lining-nums;
}
.klassiekers__naam {
  font-family: var(--kop);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1.25;
  color: var(--bot);
}

.kaart__beelden { position: relative; padding-bottom: clamp(3rem, 7vw, 6rem); }
.kaart__beeld { margin: 0; }
.kaart__beeld--groot .uitsnede { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.kaart__beeld--klein {
  position: absolute;
  left: -8%;
  bottom: 0;
  width: 46%;
}
.kaart__beeld--klein .uitsnede {
  border: 1px solid rgba(243, 238, 228, .14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   DE WIJNBAR
   ========================================================================== */

.altaar {
  position: relative;
  background: linear-gradient(180deg, var(--groen-hoog) 0%, var(--inkt) 34%, var(--inkt) 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.altaar__beeld { margin: 0; position: relative; }
.altaar__beeld .uitsnede {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(24rem, 38vw, 34rem);
}
.altaar__beeld .uitsnede > img { width: 204%; height: 100%; object-fit: cover; left: -103%; }

/* De foto loopt links de pagina uit; de tekst mag rechts niet net zo ver
   doorlopen, anders staat deze sectie als enige buiten de kolom waar de rest
   van de pagina op uitlijnt. Deze rechterkantlijn is precies de ruimte die
   naast de kolom van --breed overblijft, dus boven 1280px schuift de
   rechterrand mee met die van alle andere secties; daaronder valt hij terug op
   de gewone kantlijn. Geen max-width erbij: die zou binnen deze padding gaan
   knijpen in plaats van begrenzen. */
.altaar__tekst {
  position: relative;
  padding:
    var(--rit)
    max(var(--kantlijn), calc(50vw - var(--breed) / 2 + var(--kantlijn)))
    var(--rit)
    clamp(2rem, 5vw, 4.5rem);
  align-self: center;
}
.altaar__detail {
  position: absolute;
  left: clamp(-7rem, -9vw, -3rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  width: clamp(7rem, 12vw, 11rem);
  margin: 0;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .6);
}
.altaar__detail .uitsnede { border: 1px solid rgba(243, 238, 228, .16); }

/* ==========================================================================
   ZONDER RESERVEREN
   ========================================================================== */

.druk {
  position: relative;
  background: var(--rood);
  color: rgba(243, 238, 228, .88);
}
.druk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 18% 0%, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}
.druk__binnen {
  position: relative;
  max-width: var(--breed);
  margin: 0 auto;
  padding: var(--rit) var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.druk__titel {
  font-family: var(--kop);
  font-size: clamp(3rem, 1.6rem + 6.2vw, 7rem);
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--bot);
  margin: 0 0 1.75rem;
}
.lead--rood { color: rgba(243, 238, 228, .95); }
.tekst--rood { color: rgba(243, 238, 228, .85); }

.gang {
  margin: 2.5rem 0 0;
  border-top: 1px solid rgba(243, 238, 228, .28);
}
.gang li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(243, 238, 228, .18);
}
.gang__nr {
  font-family: var(--kop);
  font-style: italic;
  font-size: .95rem;
  color: var(--messing-licht);
  flex: 0 0 3.6rem;
}
.gang__stap { color: rgba(243, 238, 228, .92); }

/* De foto breekt onderaan door de rode band heen en loopt door in de
   volgende sectie: dat bindt de twee aan elkaar.
   `align-self: end` is hier geen opmaakvoorkeur maar de voorwaarde: met de
   `center` van de rij eromheen slikt het uitlijnen de helft van de negatieve
   marge op, en wat er daarna nog over is verdwijnt onder de onderpadding van
   de rode band. Zo hangt de onderrand van de foto precies `--rit * 1.75`
   onder de rij, en steekt hij dus `--rit * 0.75` voorbij het rood. */
.druk__beeld {
  margin: 0 0 calc(var(--rit) * -1.75);
  align-self: end;
  position: relative;
  z-index: 2;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .45);
}
.druk__beeld .uitsnede { border: 1px solid rgba(243, 238, 228, .18); }

/* ==========================================================================
   DE PLEK
   ========================================================================== */

.plek {
  position: relative;
  background: var(--inkt);
  padding: calc(var(--rit) * 1.8) 0 var(--rit);
}
/* Dezelfde warme schemer die in de uitsneden zit, nu over de hele sectie:
   de onderhelft van de pagina is lang en donker en mag geen vlak zwart gat
   worden tussen de rode band en de voet. */
.plek::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 12% 22%, rgba(198, 160, 90, .09), rgba(198, 160, 90, 0) 64%);
}
.plek__binnen {
  position: relative;
  z-index: 1;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.plek__beeld { margin: 0; position: relative; z-index: 0; }
/* Het hoekpand staat bovenin de foto en het team ervoor; de onderste derde
   is leeg wegdek. Deze verhouding snijdt precies tot onder de schoenen af,
   zodat de gevel en het team de hele uitsnede vullen. */
.plek__kader {
  position: relative;
  aspect-ratio: 20 / 21;
  overflow: hidden;
  background: var(--inkt-diep);
}
.plek__kader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 1%;
}
.plek__kader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 15, 13, 0) 55%, rgba(16, 15, 13, .4) 100%);
}
.plek__beeld::before {
  content: '';
  position: absolute;
  inset: -1.1rem 1.1rem 1.1rem -1.1rem;
  border: 1px solid rgba(198, 160, 90, .4);
  z-index: -1;
}
.plek__bijschrift {
  margin-top: 1rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}
.plek__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ==========================================================================
   CADEAUBON
   ========================================================================== */

/* Geen harde naad tussen twee secties: de plek loopt in het zwart de bon in
   en de bon loopt aan de onderkant weer in het zwart van praktisch. De bon
   staat bovendien gespiegeld ten opzichte van de secties ervoor, zodat het
   oog onderaan de pagina niet vier keer hetzelfde ritme krijgt.
   Daartussenin keert het groen van het oude transferware-servies terug, het
   groen van de kaart-sectie: dat draagt de kleur aan twee kanten van de
   pagina in plaats van één keer. Zonder dat waren plek, bon en praktisch
   drie zwarte secties op een rij. */
.bon {
  position: relative;
  background: linear-gradient(180deg, var(--inkt) 0%, #13201A 30%, #17251E 74%, var(--inkt-hoog) 100%);
}
.bon::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(85% 70% at 26% 48%, rgba(198, 160, 90, .1), rgba(198, 160, 90, 0) 62%);
}
.bon__binnen {
  position: relative;
  z-index: 1;
  max-width: var(--breed);
  margin: 0 auto;
  padding: var(--rit) var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.bon__tekst { order: 2; }
.bon__kaartje { order: 1; }

/* De bon is het enige lichte vlak op de pagina: papier in een donkere zaak.
   Dat geeft deze lange, donkere onderhelft één helder moment, en het is
   meteen duidelijk wat je in handen krijgt. */
.bon__kaartje {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background:
    radial-gradient(130% 150% at 18% 0%, #FFFCF4 0%, #F0E7D5 72%, #E4D8C0 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
  transform: rotate(-1.6deg);
  transition: transform .5s var(--veer);
}
.bon__kaartje:hover { transform: rotate(0deg); }
/* de perforatierand van een echte bon */
.bon__kaartje::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(16, 15, 13, .3);
  margin: clamp(.55rem, 1vw, .8rem);
  pointer-events: none;
}
.bon__kaartje-binnen {
  position: relative;
  z-index: 1;
  padding: clamp(2.1rem, 4vw, 3.1rem) clamp(1.25rem, 3vw, 2.25rem);
  text-align: center;
}
.bon__kaartje-merk {
  font-family: var(--kop);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  color: var(--inkt);
  letter-spacing: .04em;
  margin: 0 0 1.5rem;
}
.bon__kaartje-woord {
  font-family: var(--kop);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1.05;
  color: var(--rood-diep);
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
}
.bon__kaartje-regel {
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(16, 15, 13, .66);
  margin: 0;
}
.bon__kaartje-slot {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(16, 15, 13, .18);
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(16, 15, 13, .7);
}

/* ==========================================================================
   PRAKTISCH
   ========================================================================== */

.praktisch {
  position: relative;
  background: var(--inkt-hoog);
  padding: var(--rit) 0;
}
/* hetzelfde messinglijntje dat de eerste sectie opent, sluit de pagina */
.praktisch::before {
  content: '';
  position: absolute;
  top: 0; left: var(--kantlijn); right: var(--kantlijn);
  height: 1px;
  background: linear-gradient(90deg, var(--messing), rgba(198, 160, 90, 0) 62%);
  opacity: .5;
}
.praktisch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 76% 4%, rgba(198, 160, 90, .08), rgba(198, 160, 90, 0) 62%);
}
.praktisch__kop {
  position: relative;
  z-index: 1;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn) clamp(2.5rem, 5vw, 3.75rem);
}
.praktisch__kop .lead { max-width: 46ch; margin: 0; }

/* De middelste kolom is breder: daar staan de openingstijden, en daarvoor
   komt het grootste deel van de bezoekers naar deze sectie. Drie even brede
   tekstkolommen zouden dat verschil wegpoetsen. */
.praktisch__kolommen {
  position: relative;
  z-index: 1;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--lijn);
  padding-top: clamp(.5rem, 1.5vw, 1.25rem);
}

.kolom__kop {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 1rem;
}
.kolom__kop--later { margin-top: 2.5rem; }
.kolom__regel { margin: 0 0 .3rem; color: var(--tekst); max-width: 32ch; }
.kolom__link { margin: .5rem 0 0; }
.kolom__link a {
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 160, 90, .45);
  padding-bottom: .15rem;
  color: var(--bot);
  transition: border-color .3s var(--veer), color .3s var(--veer);
}
.kolom__link a:hover { color: var(--messing-licht); border-color: var(--messing); }

/* De openingstijden zijn waar de meeste bezoekers voor komen; die kolom
   krijgt daarom een eigen vlak in plaats van drie keer hetzelfde tekstblok. */
.kolom { padding: clamp(1.4rem, 2.6vw, 2rem) 0; }
.kolom--tijden {
  background: rgba(243, 238, 228, .045);
  border: 1px solid var(--lijn);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.tijden { border-top: 1px solid var(--lijn); }
.tijden li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--lijn);
}
.tijden__dag {
  color: var(--tekst-stil);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tijden__uur {
  font-family: var(--kop);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  color: var(--bot);
  font-variant-numeric: tabular-nums lining-nums;
}
.kolom__noot { margin: 1rem 0 0; font-size: .88rem; color: var(--tekst-stil); }

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

.voet {
  background: var(--inkt-diep);
  border-top: 1px solid var(--lijn);
  padding: var(--rit) 0 2.5rem;
}
.voet__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kantlijn);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.voet__logo { height: clamp(30px, 4vw, 46px); width: auto; margin-bottom: 1.5rem; }
.voet__regel {
  font-family: var(--kop);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  color: var(--bot);
  line-height: 1.3;
  max-width: 18ch;
  margin: 0;
}
.voet__nav { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.voet__nav a {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-stil);
  transition: color .3s var(--veer);
}
.voet__nav a:hover { color: var(--messing-licht); }
.voet__adres { margin: 0 0 .6rem; color: var(--tekst); }
.voet__link { margin: 0 0 .3rem; }
.voet__link a { color: var(--bot); text-decoration: none; border-bottom: 1px solid rgba(198, 160, 90, .4); }
.voet__link a:hover { color: var(--messing-licht); }
.voet__sociaal { margin: 1.2rem 0 0; display: flex; gap: 1.25rem; }
.voet__sociaal a {
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--messing);
}
.voet__sociaal a:hover { color: var(--messing-licht); }
.voet__slot {
  max-width: var(--breed);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 1.5rem var(--kantlijn) 0;
  border-top: 1px solid var(--lijn);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243, 238, 228, .52);
}

/* ==========================================================================
   VERDWAALD: de pagina die niet bestaat (404.html)
   ========================================================================== */

.verdwaald {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--inkt-diep);
}
.verdwaald__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  filter: contrast(1.06) brightness(.72);
}
.verdwaald__demping {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 7, 6, .95) 0%, rgba(7, 7, 6, .7) 44%, rgba(7, 7, 6, .2) 100%),
    linear-gradient(180deg, rgba(7, 7, 6, .7) 0%, rgba(7, 7, 6, .1) 34%, rgba(7, 7, 6, .85) 100%);
}
.verdwaald__tekst {
  position: relative;
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 9rem) var(--kantlijn) clamp(3.5rem, 9vh, 6rem);
}
.verdwaald__titel {
  font-family: var(--kop);
  font-weight: 400;
  color: var(--bot);
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
  text-shadow: 0 2px 26px rgba(7, 7, 6, .6);
}
.verdwaald__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
.verdwaald__adres {
  margin: 2.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lijn);
  max-width: 28rem;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-stil);
}

@media (max-width: 760px) {
  .verdwaald__knoppen .knop { flex: 1 1 auto; }
}

/* ==========================================================================
   ONTHULLEN
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--veer), transform .8s var(--veer);
  transition-delay: var(--vertraging, 0ms);
}
.js [data-reveal].zichtbaar { opacity: 1; transform: none; }

/* ==========================================================================
   SMALLER
   ========================================================================== */

@media (max-width: 1080px) {
  .huiskamer__binnen,
  .kaart__binnen,
  .druk__binnen,
  .plek__binnen,
  .bon__binnen { grid-template-columns: minmax(0, 1fr); }

  .plek { padding-top: var(--rit); }
  .plek__beeld { max-width: 30rem; }

  .huiskamer__beeld { max-width: 32rem; }
  .huiskamer__beeld::after { inset: 1rem -1rem -1rem 1rem; }

  .kaart__beelden { max-width: 30rem; padding-bottom: clamp(4rem, 12vw, 7rem); }
  .kaart__beeld--klein { left: auto; right: -6%; width: 44%; }

  .druk__beeld { margin: 0; max-width: 26rem; align-self: auto; }

  .altaar { grid-template-columns: minmax(0, 1fr); }
  .altaar__beeld .uitsnede { min-height: clamp(18rem, 60vw, 30rem); }
  .altaar__tekst { padding: var(--rit) var(--kantlijn); }
  .altaar__detail {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 2.5rem 0 0;
    width: clamp(8rem, 28vw, 12rem);
  }

  .bon__tekst,
  .bon__kaartje { order: 0; }
  .bon__kaartje { max-width: 26rem; }
}

@media (max-width: 980px) {
  .navigatie {
    position: fixed;
    inset: 0;
    z-index: 110;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: rgba(7, 7, 6, .97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--veer), visibility .4s var(--veer);
  }
  .navigatie--open { opacity: 1; visibility: visible; pointer-events: auto; }
  .navigatie a { font-size: 1.05rem; letter-spacing: .2em; }
  .menuknop { display: inline-flex; position: relative; z-index: 120; }
  .balk__rechts { margin-left: auto; }
}

@media (max-width: 760px) {
  :root { --rit: clamp(3rem, 11vw, 4.5rem); }

  .feiten { grid-template-columns: minmax(0, 1fr); }
  .feiten li { border-left: 0; border-top: 1px solid var(--lijn); padding: 1.35rem 0; }
  .feiten li:first-child { border-top: 0; }
  .feiten li:last-child { padding-bottom: 0; }

  /* Op een telefoon snijdt de band naar de rechterkant van de foto, waar het
     schrift en de matte ruitjes zitten: het lichtste deel. De regel ligt daar
     bovenop, dus de demping blijft hier zwaarder dan op een breed scherm, maar
     niet zo zwaar dat het schrift weer verdwijnt. */
  .band { height: clamp(14rem, 52vw, 20rem); }
  .band__schaduw {
    background:
      linear-gradient(90deg, rgba(16, 15, 13, .9) 0%, rgba(16, 15, 13, .7) 55%, rgba(16, 15, 13, .3) 100%),
      linear-gradient(180deg, rgba(16, 15, 13, .5) 0%, rgba(16, 15, 13, 0) 40%, rgba(16, 15, 13, .5) 100%);
  }

  .praktisch__kolommen { grid-template-columns: minmax(0, 1fr); }
  .voet__binnen { grid-template-columns: minmax(0, 1fr); }

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

  .knop { padding: .85rem 1.3rem; font-size: .76rem; }
  .opening__knoppen .knop { flex: 1 1 auto; }

  /* Op een telefoon is er onder de knoppen geen ruimte meer voor de
     scrollwenk; hij ging er dwars doorheen staan. Op een aanraakscherm
     scrollt men toch wel. */
  html.opening-aan .opening .opening__wenk { display: none; }

  .menuknop__tekst { display: none; }
  .menuknop { padding: .65rem .7rem; }
}

@media (max-width: 420px) {
  .balk__binnen { gap: .6rem; }
  .knop--klein { padding: .6rem .8rem; font-size: .68rem; letter-spacing: .08em; }
}

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

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