/* MUZE · stijl volgens MUZE_stijlgids */
/* Lettertypes staan op de eigen server (geen verbinding met Google: beter voor privacy en snelheid) */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/cinzel-normal-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/cinzel-normal-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-italic-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-normal-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-normal-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --gold: #D5B796;
  --gold-dark: #AF9172;
  --ivy: #404821;
  --ivy-leaf: #6A7240;
  --grey: #717880;
  --stone: #4A4D53;
  --abyss: #1A1612;
  --abyss-2: #221d18;
  --text: #E7DFD3;
  --text-muted: #A59C90;
  --serif-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif-body: "Cormorant Garamond", Garamond, Georgia, serif;
  --gutter: clamp(16px, 5vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Exact dezelfde muur als op de banner loopt over de hele pagina door, niet gedimd */
  --wall-shade: transparent;
  /* Tekst op de lichte muur: donker, als inkt of ingekerfd in de steen */
  --ink: #1f160e;
  --ink-soft: #3d2e21;
  --ink-accent: #4f3519;
  --carve-light: 0 1px 0 rgba(255, 246, 228, .55);
  /* zachte lichte gloed: de steen achter de tekst is als het ware gladgestreken */
  --plaster: 0 0 10px rgba(236, 222, 198, .95), 0 0 22px rgba(236, 222, 198, .7), 0 1px 0 rgba(255, 246, 228, .6);
  /* Klimop krijgt dezelfde demping als de muur, zodat het er echt op groeit */
  --ivy-filter: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Dezelfde muur als de banner, op dezelfde schaal (de banner is even breed als het scherm) */
  background: url("assets/wall-tile.webp") 0 0 / 1000px auto repeat, #97795b;
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: clamp(19px, 1.25vw, 22px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

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

/* 35 mm-korrel */
.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Typografie */
h1, h2, h3, .eyebrow, .btn, .nav, dt {
  font-family: var(--serif-display);
  text-transform: uppercase;
  font-weight: 600;
}
h2 {
  font-size: clamp(30px, 4.4vw, 60px);
  letter-spacing: .06em;
  line-height: 1.1;
  margin: 0;
  color: var(--gold);
}
h3 { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .14em; color: var(--gold); margin: 0 0 .6em; }
.eyebrow {
  font-size: 13px; letter-spacing: .4em; color: var(--gold-dark); margin: 0 0 18px;
}
.section-head { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head h2::after {
  content: ""; display: block; width: 64px; height: 1px; margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

/* Knoppen */
.btn {
  display: inline-block; border: 1px solid var(--gold); color: var(--abyss); background: var(--gold);
  padding: 16px 30px; font-size: 13px; letter-spacing: .3em; text-decoration: none; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--gold); }
.btn--small { padding: 10px 18px; font-size: 11px; background: transparent; color: var(--gold); }
.btn--small:hover, .btn--small:focus-visible { background: var(--gold); color: var(--abyss); }
/* Stenen plaat op de muur met de tekst erin gegraveerd (plaat uit Higgsfield, randen blijven scherp bij elke breedte) */
.btn--stone, .btn--stone:hover, .btn--stone:focus-visible {
  background: none; color: #3b2b1c; border-style: solid; border-color: transparent;
  border-image: url("assets/steen/plaat.webp") 46 70 fill / 12px 18px stretch;
  text-shadow: 0 1px 0 rgba(255, 244, 222, .65), 0 -1px 0 rgba(40, 26, 14, .35);
  font-weight: 700;
  filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, .55)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .35));
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.btn--stone:hover, .btn--stone:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08) drop-shadow(5px 11px 9px rgba(0, 0, 0, .6)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .35));
}
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Navigatie */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease);
}
.nav.is-scrolled {
  background: rgba(26, 22, 18, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding-top: 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(213, 183, 150, .12);
}
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav__logo img { width: 30px; height: auto; }
.nav__logo span { font-weight: 800; letter-spacing: .02em; font-size: 20px; color: var(--gold); }
.nav__links { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav__links a {
  font-size: 12px; letter-spacing: .3em; text-decoration: none; color: var(--text); opacity: .9;
  display: inline-flex; align-items: center; min-height: 24px; padding: 6px 4px;
  transition: opacity .3s, color .3s;
}
.nav__links a:hover { opacity: 1; color: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
/* Taalkeuze NL · EN · FR */
.lang { display: flex; align-items: center; }
.lang a {
  font-family: var(--serif-display); font-size: 11px; letter-spacing: .2em; text-decoration: none;
  color: var(--text); opacity: .9; padding: 6px 7px; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: opacity .3s, color .3s;
}
.lang a + a { border-left: 1px solid rgba(213, 183, 150, .3); }
.lang a:hover { opacity: 1; color: var(--gold); }
.lang a[aria-current="page"] { opacity: 1; color: var(--gold); }

/* Hero */
/* Desktop: affiche in zijn eigen verhouding, zodat de ingebeitelde titel nooit wegvalt */
.hero {
  position: relative; width: 100%; aspect-ratio: 2400 / 1350; max-height: 100svh; min-height: 420px;
  display: flex; align-items: center; overflow: hidden;
}
/* De banner lost onderaan op in de muur eronder: eerst dimmen tot de toon van de muur, dan doorzichtig */
.hero__img {
  position: absolute; inset: 0; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.hero__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* geen donkere rand meer: de banner loopt onderaan zonder kleurverschil over in dezelfde muur */
  background: none;
}
.hero__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% center;
  animation: heroIn 3.5s var(--ease) both;
}
@keyframes heroIn { from { opacity: 0; transform: scale(1.06); filter: brightness(.3); } to { opacity: 1; transform: none; filter: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,22,18,.55) 0%, transparent 18%);
}
/* Op desktop staat de titel al ingebeiteld in de banner; alleen voor schermlezers */
.hero__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 32px; height: 44px; overflow: hidden;
}
.hero__scroll span {
  position: absolute; left: 15.5px; top: -44px; width: 1px; height: 44px;
  background: linear-gradient(transparent, var(--gold));
  animation: drip 2.4s 3s ease-in-out infinite;
}
@keyframes drip { 0% { top: -44px; } 60%, 100% { top: 44px; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Aftelklok */
.countdown {
  text-align: center; padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 80px);
}
.countdown__grid {
  display: flex; justify-content: center; gap: clamp(16px, 5vw, 72px);
}
.countdown__grid div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
/* Stenen titels: de volledige Higgsfield-foto's (letters + hun eigen stuk muur, kleur gelijk aan de banner).
   Een ovaal masker laat de randen van elke foto zacht overvloeien in de muur van de pagina.
   De breedte per titel bepaalt hoe groot de letters zijn. */
.stone-word { margin: 0; line-height: 0; }
.stone-word img {
  display: block; height: auto; max-width: none; margin: -6% 0;
  position: relative; left: 50%; transform: translateX(-50%);
  /* links/rechts maar een smalle overgang (de letters lopen tot dicht bij de rand), boven/onder een ruime */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.countdown__intro { margin: 0 auto; }
.countdown__intro img        { width: clamp(560px, 58vw, 900px); margin-bottom: -5%; margin-left: 0; margin-right: 0; }
.lineup__soon img            { width: clamp(470px, 42vw, 650px); }
.stone-word--label img       { width: clamp(380px, 34vw, 520px); margin-bottom: -10%; margin-left: 0; margin-right: 0; }
.stone-word--title img       { width: clamp(400px, 34vw, 520px); }
.legend .stone-word--title img { width: clamp(560px, 62vw, 960px); }
.stone-word--line img        { width: clamp(560px, 62vw, 940px); }
.lineup__soon { margin: 0 auto; }
.section-head .stone-word::after { display: none; }

/* Line-up: nog geen namen, eerst via sociale media */
.lineup { padding: clamp(80px, 10vw, 150px) var(--gutter); text-align: center; }
.section-head--plain { margin-bottom: 0; }

/* Afteller: de cijfers zijn in de muur gegraveerd, een uitgehakte holte in de steen:
   donker diep in de groef, bovenaan in de schaduw, onderaan vangt de rand het licht. */
.countdown__grid [data-unit] {
  display: inline-flex; font-family: var(--serif-display); font-weight: 700;
  font-size: clamp(60px, 8.5vw, 124px); line-height: 1;
}
.digit {
  /* stenen cijfers uit Higgsfield met het blauwe licht van zijn ogen erin; het teken zelf blijft onzichtbaar (voor schermlezers) */
  display: inline-block; width: .74em; height: .98em; vertical-align: top;
  color: transparent; -webkit-text-fill-color: transparent; overflow: hidden;
  background: center / contain no-repeat;
  filter:
    drop-shadow(0 6px 6px rgba(30, 18, 8, .45))
    drop-shadow(0 0 10px rgba(170, 210, 230, .55))
    drop-shadow(0 0 28px rgba(130, 185, 215, .35));
}
.digit[data-d="0"] { background-image: url("assets/steen/licht/cijfer-0.webp"); }
.digit[data-d="1"] { background-image: url("assets/steen/licht/cijfer-1.webp"); }
.digit[data-d="2"] { background-image: url("assets/steen/licht/cijfer-2.webp"); }
.digit[data-d="3"] { background-image: url("assets/steen/licht/cijfer-3.webp"); }
.digit[data-d="4"] { background-image: url("assets/steen/licht/cijfer-4.webp"); }
.digit[data-d="5"] { background-image: url("assets/steen/licht/cijfer-5.webp"); }
.digit[data-d="6"] { background-image: url("assets/steen/licht/cijfer-6.webp"); }
.digit[data-d="7"] { background-image: url("assets/steen/licht/cijfer-7.webp"); }
.digit[data-d="8"] { background-image: url("assets/steen/licht/cijfer-8.webp"); }
.digit[data-d="9"] { background-image: url("assets/steen/licht/cijfer-9.webp"); }
/* Warm licht op de muur achter de afteller */
.countdown::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(255, 226, 180, .2), rgba(255, 226, 180, .07) 55%, transparent 80%);
  mix-blend-mode: soft-light;
}
.countdown__cta { margin-top: clamp(40px, 5vw, 64px); }
/* Dagen, uren, minuten, seconden: kleine stenen letters die uit de muur steken */
.countdown__grid small {
  margin-top: 8px; margin-right: -.3em; font-family: var(--serif-display); font-weight: 700;
  font-size: clamp(12px, 1.2vw, 17px); letter-spacing: .3em; text-transform: uppercase; color: #efe3cb;
  /* donker stenen plaatje achter de letters: leesbaar zonder op schaduw te steunen (WCAG 1.4.3) */
  background: rgba(26, 22, 18, .74); padding: .3em .3em .3em .6em; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 244, 222, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* Klimop: dezelfde klimop als op de banner (Higgsfield, met de banner als voorbeeld).
   De pagina is één lange muur: elk stuk klimop groeit vanuit de linker- of rechterkant van het scherm
   naar binnen (de stengels komen altijd van de zijkant), en eindigt vrij in blaadjes en ranken.
   -l = groeit vanaf links, -r = gespiegeld, groeit vanaf rechts. Geen maskers: niets wordt afgesneden. */
.countdown, .legend, .lineup, .info, .signup, .footer { position: relative; isolation: isolate; }
.countdown::before, .legend::before, .lineup::before, .info::before, .signup::before, .footer::before {
  --k: clamp(90px, 15vw, 270px);
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
  filter: drop-shadow(3px 8px 6px rgba(0, 0, 0, .32));
}
/* rechts loopt de klimop van de banner verder naar beneden en hangt uit in ranken; links een twijgje */
.countdown::before {
  top: clamp(-320px, -16vw, -80px);
  background-image: url("assets/klimop/zij-cascade-r.webp"), url("assets/klimop/zij-twijg-l.webp");
  background-size: calc(var(--k) * 1.25) auto, clamp(150px, 17vw, 300px) auto;
  background-position: right 0 top calc(var(--k) * 1.3), left 62%;
  /* alleen bovenaan loopt de banner-klimop zacht over in de klimop van de foto */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--k) * .5));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--k) * .5));
}
/* het verhaal: ranken en takken afwisselend links en rechts, telkens vanuit de zijkant */
.legend::before {
  background-image: url("assets/klimop/zij-rank-l.webp"), url("assets/klimop/zij-tak-r.webp"), url("assets/klimop/zij-cascade-l.webp"), url("assets/klimop/zij-rank-r.webp"), url("assets/klimop/zij-twijg-l.webp");
  background-size: clamp(280px, 40vw, 720px) auto, clamp(190px, 23vw, 400px) auto, clamp(150px, 18vw, 320px) auto, clamp(240px, 32vw, 580px) auto, clamp(150px, 16vw, 290px) auto;
  background-position: left 2%, right 30%, left 58%, right 82%, left 99%;
}
/* line-up: een rank bovenaan rechts, een tak links naast Coming Soon */
.lineup::before {
  background-image: url("assets/klimop/zij-cascade-r.webp"), url("assets/klimop/zij-tak-l.webp");
  background-size: clamp(140px, 17vw, 300px) auto, clamp(180px, 21vw, 370px) auto;
  background-position: right 4%, left 85%;
}
/* info: een rank rechts, een twijgje links */
.info::before {
  background-image: url("assets/klimop/zij-rank-r.webp"), url("assets/klimop/zij-twijg-l.webp");
  background-size: clamp(230px, 30vw, 540px) auto, clamp(150px, 16vw, 290px) auto;
  background-position: right 8%, left 80%;
}
/* inschrijven: een waterval links, een tak rechts */
.signup::before {
  background-image: url("assets/klimop/zij-cascade-l.webp"), url("assets/klimop/zij-tak-r.webp");
  background-size: clamp(140px, 17vw, 300px) auto, clamp(170px, 20vw, 350px) auto;
  background-position: left 10%, right 85%;
}
/* onderaan: een rank links, een twijgje rechts */
.footer::before {
  background-image: url("assets/klimop/zij-rank-l.webp"), url("assets/klimop/zij-twijg-r.webp");
  background-size: clamp(220px, 28vw, 480px) auto, clamp(140px, 15vw, 260px) auto;
  background-position: left 20%, right 70%;
}

/* Klimop groeit tevoorschijn bij het scrollen (alleen met JavaScript, anders staat het er gewoon) */
.js-ivy .countdown::before, .js-ivy .legend::before, .js-ivy .lineup::before,
.js-ivy .info::before, .js-ivy .signup::before, .js-ivy .footer::before {
  opacity: 0; transform: scale(.97); transition: opacity 1.8s var(--ease), transform 2.4s var(--ease);
}
.js-ivy .ivy-in::before { opacity: 1; transform: none; }

/* Kleine klimopblaadjes rond de inschrijfknop: de takjes groeien van achter de stenen plaat uit */
.cta-ivy { position: relative; isolation: isolate; display: inline-block; margin-top: clamp(40px, 5vw, 64px); }
.cta-ivy .countdown__cta { margin-top: 0; }
.cta-ivy::before, .cta-ivy::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: no-repeat center / contain;
  filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, .35));
}
/* links: stengel achter de plaat, blaadjes naar links en omhoog */
.cta-ivy::before {
  background-image: url("assets/klimop/zij-twijg-r.webp");
  width: 270px; height: 96px; right: calc(100% - 56px); top: -50px; transform: rotate(10deg); transform-origin: right center;
}
/* rechts: stengel achter de plaat, blaadjes naar rechts en omlaag */
.cta-ivy::after {
  background-image: url("assets/klimop/zij-twijg-l.webp");
  width: 240px; height: 86px; left: calc(100% - 50px); bottom: -40px; transform: rotate(14deg); transform-origin: left center;
}

/* Legende */
.legend { position: relative; padding: clamp(80px, 11vw, 160px) var(--gutter); overflow: hidden; }
.legend__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
/* Het verhaal: één kolom, rechtstreeks op de muur */
.story { max-width: 720px; margin: 0 auto; text-align: center; }
.story p {
  margin: 0 0 1.5em; font-size: clamp(20px, 1.55vw, 24px); line-height: 1.75; color: var(--text);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .65);
}
.story .story__heart { font-style: italic; color: var(--gold); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; }
/* Het ontwaken: ingegraveerd in de muur, zoals de afteller */
.story .story__wake {
  margin: 2em 0 .9em; font-family: var(--serif-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 32px); letter-spacing: .22em; line-height: 1.4;
  background: linear-gradient(180deg, rgba(6, 4, 2, .9) 0%, rgba(28, 20, 12, .66) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 1.5px 0 rgba(255, 236, 205, .4)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .55));
}
.story .story__chapter { font-style: italic; color: var(--gold); }
.inscription { margin: clamp(64px, 8vw, 110px) auto 0; text-align: center; }
.inscription__latin {
  margin: 0; font-family: var(--serif-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(18px, 2.6vw, 36px); letter-spacing: .22em; line-height: 1.5;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--gold-dark), 0 -1px 0 rgba(0,0,0,.6);
}
.inscription figcaption { margin-top: 14px; font-style: italic; color: var(--text-muted); font-size: 1.1em; }

/* Info */
.info { padding: clamp(80px, 10vw, 150px) var(--gutter); }
.info__grid {
  max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(213, 183, 150, .16); border: 1px solid rgba(213, 183, 150, .16);
}
.info__grid > div { background: rgba(26, 22, 18, .72); padding: 36px 28px; scroll-margin-top: 100px; }
.info dt { font-size: 12px; letter-spacing: .32em; color: var(--gold); margin-bottom: 16px; }
.info dd { margin: 0; font-size: 1.1em; line-height: 1.4; }
.info dd.muted { margin-top: 10px; font-size: .9em; color: var(--text-muted); font-style: italic; }

/* Inschrijven */
.signup { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(90px, 11vw, 160px); }
.signup__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.signup__logo { width: 120px; height: auto; margin: 0 auto 36px; opacity: .9; }
.signup h2 { font-size: clamp(26px, 3.4vw, 44px); }
.signup p { color: var(--text-muted); margin: 20px 0 36px; }
.signup__form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 520px; margin: 0 auto; }
.signup__form .btn { align-self: center; min-width: 220px; }
.signup__form input {
  flex: 1; min-width: 0; padding: 16px 20px; font: inherit; font-size: 18px;
  color: var(--text); background: rgba(255,255,255,.03);
  border: 1px solid rgba(213, 183, 150, .4); border-radius: 0;
}
.signup__form input::placeholder { color: var(--grey); }
.signup__form input:focus { border-color: var(--gold); }
.signup__msg { min-height: 1.6em; margin: 18px 0 0 !important; font-style: italic; color: var(--gold) !important; }

/* Footer */
.footer {
  text-align: center; padding: 72px var(--gutter) 56px;
  border-top: 1px solid rgba(213, 183, 150, .12);
}
.footer img { width: 48px; height: auto; margin: 0 auto 22px; }
.footer__theme { margin: 0; font-family: var(--serif-display); text-transform: uppercase; letter-spacing: .6em; color: var(--gold); font-size: 14px; }
.footer__meta { margin: 14px 0 0; font-family: var(--serif-display); text-transform: uppercase; letter-spacing: .24em; font-size: 11px; color: var(--grey); }
.footer__small { margin: 28px 0 0; font-size: 14px; color: var(--stone); }

/* Onthullen bij scrollen */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.info__grid .reveal { transition-duration: .7s; transform: translateY(12px); }
.info__grid .reveal.is-visible { transform: none; }
.info__grid .reveal:nth-child(2) { transition-delay: .06s; }
.info__grid .reveal:nth-child(3) { transition-delay: .12s; }
.info__grid .reveal:nth-child(4) { transition-delay: .18s; }

/* Tablet */
@media (max-width: 980px) {
  .info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gsm */
@media (max-width: 760px) {
  .nav__links { display: none; }
  .hero { aspect-ratio: auto; max-height: none; min-height: 0; flex-direction: column; align-items: stretch; overflow: visible; }
  .hero__img { position: relative; height: 82svh; }
  .hero__img img { object-position: 45% top; }
  /* op gsm een langere overgang, zodat de foto zacht in de muur opgaat */
  .hero__img { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 98%); mask-image: linear-gradient(180deg, #000 50%, transparent 98%); }
  .hero::after { background: linear-gradient(180deg, rgba(26,22,18,.6) 0%, transparent 15%); }
  .hero__text {
    position: relative; z-index: 2; width: auto; height: auto; clip: auto; overflow: visible;
    margin-top: -26svh; padding: 0 16px; text-align: center;
  }
  .hero__title {
    margin: 0; font-weight: 800; letter-spacing: 0; line-height: 1;
    font-size: clamp(72px, 26vw, 120px); color: var(--gold);
    text-shadow: 0 2px 0 var(--gold-dark), 0 4px 0 #8c7359, 0 18px 30px rgba(0,0,0,.8);
  }
  .hero__text { position: relative; left: auto; right: auto; bottom: auto; animation: none; }
  .hero__scroll { display: none; }
  .hero__text { padding-bottom: 8px; }
  .countdown { padding-top: 56px; }
  /* stenen titels op gsm: de foto mag iets breder zijn dan het scherm, de letters passen erin */
  .countdown__intro img { width: 104vw; }
  .legend .stone-word--title img, .stone-word--line img { width: 112vw; }
  .lineup__soon img { width: 96vw; }
  .stone-word--label img, .stone-word--title img { width: 86vw; }
  .countdown__grid { gap: 14px; }
  .countdown__grid div { min-width: 0; flex: 1; }
  .countdown__grid small { font-size: 10px; letter-spacing: .2em; margin-right: -.2em; }
  .countdown__grid [data-unit] { font-size: clamp(34px, 10vw, 54px); }
  /* op gsm hangt het twijgje links lager, zodat het niet over de cijfers valt */
  .countdown::before { background-position: right 0 top calc(var(--k) * 1.3), left 97%; }
  .info__grid { grid-template-columns: 1fr; }
  .info__grid > div { padding: 28px 20px; }
  .signup__form { flex-direction: column; gap: 12px; }
  .signup__form input { border-right: 1px solid rgba(213, 183, 150, .4); }
}

/* Kleine gsm: bovenbalk compacter zodat logo, taalkeuze en knop naast elkaar passen */
@media (max-width: 440px) {
  .nav { gap: 10px; }
  .nav__logo span { display: none; }
  .nav__actions { gap: 8px; }
  .lang a { padding: 6px 5px; letter-spacing: .12em; }
  .nav .btn--small { padding: 9px 10px; letter-spacing: .14em; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .info__grid .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Tekst en vlakken op de lichte muur (zelfde muur als de banner)
   --------------------------------------------------------------- */
.eyebrow { color: var(--ink-accent); font-weight: 700; text-shadow: var(--plaster); }
/* Titels en de Latijnse spreuk: ingekerfd in de muur */
.legend .section-head h2, .signup h2 {
  color: var(--ink); text-shadow: 0 1.5px 0 rgba(255, 244, 222, .6), 0 -1px 0 rgba(0, 0, 0, .25);
}
.section-head h2::after { background: linear-gradient(90deg, transparent, var(--ink-accent), transparent); }
/* Inschrijven */
/* Footer */
.footer { border-top-color: rgba(60, 40, 20, .2); }
.footer__theme { color: var(--ink-accent); }
.footer__meta, .footer__small { color: var(--ink-soft); text-shadow: var(--plaster); }
.footer__theme { text-shadow: var(--plaster); }

/* ---------------------------------------------------------------
   Donkere muur achter de lopende tekst: de titels blijven op de lichte muur,
   maar waar de tekst staat ligt de muur in de schaduw (zachte randen, de steen
   blijft zichtbaar), zodat de lichte tekst er goed doorkomt.
   --------------------------------------------------------------- */
.story, .inscription, .info__grid, .signup__body { position: relative; isolation: isolate; }
.story::before, .inscription::before, .info__grid::before, .signup__body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -40px clamp(-120px, -8vw, -36px);
  background: rgba(24, 16, 9, .74); border-radius: 50%;
  filter: blur(56px);
}
.story::before { inset: -110px clamp(-190px, -12vw, -36px) -90px; border-radius: 30%; }
.inscription::before { inset: -50px clamp(-130px, -8vw, -30px); border-radius: 40%; }
.info__grid::before { inset: 10px clamp(-130px, -9vw, -30px) -70px; border-radius: 26% / 40%; background: rgba(24, 16, 9, .82); filter: blur(44px); }
/* lichte tekst op de donkere muur */
.story p { color: var(--text); font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.story .story__heart, .story .story__chapter { color: var(--gold); }
.story .story__wake {
  background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); filter: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 236, 205, .15);
}
.inscription__latin { color: var(--gold); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.inscription figcaption { color: var(--text-muted); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.info__grid { background: rgba(213, 183, 150, .18); border-color: rgba(213, 183, 150, .18); }
.info__grid > div { background: rgba(20, 14, 8, .22); }
.info dt { color: var(--gold); font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.info dd { color: var(--text); }
.info dd.muted { color: var(--text-muted); }
.info dd a { color: var(--gold); }
.signup__body p { color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.signup__form input { color: var(--text); background: rgba(255, 248, 235, .06); border-color: rgba(213, 183, 150, .45); }
.signup__form input::placeholder { color: #a39686; }
.signup__form input:focus { border-color: var(--gold); }
.signup__msg { color: var(--gold) !important; }
/* het kleine kopje boven de titel blijft op de lichte muur, dus donker */
.signup .eyebrow { color: var(--ink-accent); }

/* ---------------------------------------------------------------
   The Awakening: het verhaal staat op een oud perkament (zoals een schatkaart),
   met inkttekeningen van de vallei, het forum en de straat (Higgsfield).
   Het perkament is een 9-slice: de gescheurde randen blijven scherp en het papier
   herhaalt zich in het midden, zodat het bij elke lengte van de tekst past.
   Kleur = perkament.jpg, gescheurde randen = perkament-masker.png.
   --------------------------------------------------------------- */
.parchment {
  max-width: 920px; margin: 0 auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)) drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}
.parchment__sheet {
  --pw: clamp(22px, 4.6vw, 64px);
  border-style: solid; border-color: transparent;
  border-width: calc(var(--pw) * 2.36) var(--pw);
  border-image: url("assets/perkament/perkament.webp") 260 110 fill / calc(var(--pw) * 2.36) var(--pw) round;
  -webkit-mask-box-image: url("assets/perkament/perkament-masker.png") 260 110 fill / calc(var(--pw) * 2.36) var(--pw) round;
  /* "fill": het midden van het vel blijft zichtbaar (Safari op iPhone maakt het anders doorzichtig) */
  mask-border: url("assets/perkament/perkament-masker.png") 260 110 fill / calc(var(--pw) * 2.36) var(--pw) round;
  padding: clamp(4px, 2vw, 30px) clamp(10px, 4vw, 60px) clamp(10px, 2vw, 30px);
}
/* geen schaduw op de muur meer: het perkament zelf maakt de tekst leesbaar */
.parchment .story::before, .parchment .inscription::before { display: none; }
.parchment .story { max-width: 680px; isolation: auto; }
.parchment .story p { color: #1c1108; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 240, 215, .35); }
.parchment .story .story__heart, .parchment .story .story__chapter { color: #4a2b10; font-weight: 700; }
.parchment .story .story__wake { -webkit-text-fill-color: #3a2410; color: #3a2410; text-shadow: none; }
.parchment .inscription { margin-top: clamp(30px, 5vw, 70px); }
.parchment .inscription__latin { color: #3a2410; text-shadow: none; }
.parchment .inscription figcaption { color: #5a3e24; text-shadow: none; }
/* inkttekeningen: wit valt weg (vermenigvuldigen), alleen de inkt blijft op het papier */
.sketch {
  display: block; width: 100%; max-width: 620px; height: auto; margin: .4em auto 2.2em;
  mix-blend-mode: multiply; filter: saturate(.55) contrast(1.05);
  /* de randen van elke tekening lopen zacht uit in het papier */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 90%, transparent 100%);
}
/* de brede tekening van MUZE loopt ook links en rechts zacht uit in het papier */
.sketch--wide {
  max-width: 680px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

/* Het verhaal: korte slagzinnen tussen de alinea's, en het Latijnse woord op de sokkel */
.story .story__beat {
  font-style: italic; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.35;
  margin: -.4em 0 1.6em; color: var(--gold);
}
.story .story__latin { font-family: var(--serif-display); font-weight: 700; letter-spacing: .18em; font-size: .82em; }
.parchment .story .story__beat { color: #5a3716; }

/* Het label boven een stenen titel (bv. "Chapter I") boven de titelfoto houden; die schuift met een negatieve marge omhoog */
.section-head .eyebrow { position: relative; z-index: 2; }
/* "Chapter I": groot en dik in de muur gekerfd. De letters zijn gevuld met dezelfde muur (uitgelijnd via --wx/--wy uit script.js),
   donker gekleurd, zodat de barsten en putjes van de muur gewoon door de letters lopen */
.legend .section-head .eyebrow {
  font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: .32em; margin-right: -.32em;
  margin-bottom: clamp(6px, 1vw, 14px);
  color: #2a1a0c; text-shadow: none;
  background-image: linear-gradient(#5e3f22, #5e3f22), url("assets/wall-tile.webp");
  background-size: auto, 1000px auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 0, var(--wx, 0px) var(--wy, 0px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(255, 240, 215, .6)) drop-shadow(0 -1px 0 rgba(20, 12, 5, .45));
}

/* Info op perkament: zelfde vel als het verhaal, vakken gescheiden door dunne inktlijnen */
.parchment--info { max-width: 1180px; }
.parchment .info__grid { isolation: auto; background: none; border: 0; gap: 0; }
.parchment .info__grid::before { display: none; }
.parchment .info__grid > div { background: none; padding: 18px 26px 22px; }
.parchment .info__grid > div + div { border-left: 1px solid rgba(74, 43, 16, .35); }
.info .parchment dt { color: #4a2b10; font-weight: 700; text-shadow: none; }
.info .parchment dd { color: #1c1108; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 240, 215, .35); }
.info .parchment dd.muted { color: #4a3420; font-weight: 500; }
.info .parchment dd a { color: #5a3716; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) {
  .parchment .info__grid > div:nth-child(3) { border-left: 0; }
  .parchment .info__grid > div:nth-child(n+3) { border-top: 1px solid rgba(74, 43, 16, .35); }
}
@media (max-width: 760px) {
  .parchment .info__grid > div + div { border-left: 0; border-top: 1px solid rgba(74, 43, 16, .35); }
}
/* Info-vel: minder hoge boven- en onderrand dan het lange verhaal */
.parchment--info .parchment__sheet, .parchment--signup .parchment__sheet, .parchment--footer .parchment__sheet {
  border-width: calc(var(--pw) * 1.25) var(--pw);
  border-image-width: calc(var(--pw) * 1.25) var(--pw);
  -webkit-mask-box-image-width: calc(var(--pw) * 1.25) var(--pw);
  mask-border-width: calc(var(--pw) * 1.25) var(--pw);
  padding: 0 clamp(4px, 1.5vw, 20px);
}
.info .section-head .eyebrow { margin-bottom: clamp(44px, 5vw, 72px); }

/* Inschrijven op perkament */
.parchment--signup { max-width: 720px; margin-top: clamp(10px, 2vw, 24px); }
.parchment .signup__body { isolation: auto; padding: clamp(6px, 1.5vw, 18px) clamp(4px, 2vw, 24px) clamp(4px, 1vw, 12px); }
.parchment .signup__body::before { display: none; }
.signup .parchment .signup__body p { color: #1c1108; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 240, 215, .35); margin: 0 0 26px; }
.signup .parchment .signup__form input {
  color: #1c1108; font-weight: 600; background: rgba(255, 246, 228, .28);
  border-color: rgba(74, 43, 16, .55);
}
.signup .parchment .signup__form input::placeholder { color: #4a3420; font-weight: 500; }
.signup .parchment .signup__form input:focus { border-color: #4a2b10; background: rgba(255, 246, 228, .42); }
.signup__val { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.signup__akkoord { display: flex; gap: 12px; align-items: flex-start; max-width: 520px; margin: 0; text-align: left; font-size: .8em; line-height: 1.45; cursor: pointer; }
.signup__akkoord input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: #4a2b10; cursor: pointer; }
.signup .parchment .signup__akkoord span { color: #3a2410; font-weight: 500; text-shadow: none; }
.signup__akkoord a, .footer__links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.signup__form.is-bezig { opacity: .6; pointer-events: none; }
.signup .parchment .signup__msg { color: #4a2b10 !important; text-shadow: none; margin-top: 14px !important; }
/* ingeschreven: de bevestiging licht op met een groen licht (de kleur van de klimop), en blijft zacht nagloeien */
.signup .parchment .signup__msg.is-gelukt {
  color: #3d6a1c !important; font-weight: 700; font-style: italic;
  text-shadow: 0 0 6px rgba(170, 225, 120, .9), 0 0 14px rgba(140, 200, 90, .55);
  animation: gelukt-op 1.6s var(--ease) both, gelukt-gloed 3.6s ease-in-out 1.6s infinite;
}
@keyframes gelukt-op {
  0%   { opacity: 0; filter: blur(3px); text-shadow: 0 0 0 rgba(170, 225, 120, 0); }
  45%  { opacity: 1; filter: blur(0); text-shadow: 0 0 10px rgba(205, 245, 160, 1), 0 0 26px rgba(150, 215, 100, .9), 0 0 48px rgba(120, 185, 70, .6); }
  100% { opacity: 1; text-shadow: 0 0 6px rgba(170, 225, 120, .9), 0 0 14px rgba(140, 200, 90, .55); }
}
@keyframes gelukt-gloed {
  0%, 100% { text-shadow: 0 0 6px rgba(170, 225, 120, .9), 0 0 14px rgba(140, 200, 90, .55); }
  50%      { text-shadow: 0 0 8px rgba(185, 235, 135, 1), 0 0 22px rgba(140, 200, 90, .75), 0 0 36px rgba(120, 180, 70, .4); }
}
.countdown__grid [data-unit] { margin-bottom: .14em; }

/* Alle "Pre-register"-knoppen (navigatie, afteller, inschrijven): de gegraveerde letters lichten op met het blauwe licht van de cijfers */
.btn.btn--stone {
  color: #eef8fc;
  text-shadow: 0 0 2px rgba(240, 250, 255, .95), 0 0 8px rgba(170, 210, 230, .9), 0 0 16px rgba(130, 185, 215, .6);
  filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(150, 200, 225, .55)) drop-shadow(0 0 30px rgba(120, 175, 210, .35));
  animation: cta-licht 3.6s ease-in-out infinite;
}
.btn.btn--stone:hover, .btn.btn--stone:focus-visible {
  filter: brightness(1.06) drop-shadow(5px 11px 9px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(160, 210, 235, .8)) drop-shadow(0 0 40px rgba(120, 175, 210, .5));
  animation: none;
}
/* zacht aanzwellend licht, de knop zelf beweegt niet */
@keyframes cta-licht {
  0%, 100% { filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(150, 200, 225, .45)) drop-shadow(0 0 26px rgba(120, 175, 210, .25)); }
  50%      { filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(160, 210, 235, .75)) drop-shadow(0 0 40px rgba(120, 175, 210, .45)); }
}
@media (prefers-reduced-motion: reduce) { .btn.btn--stone { animation: none; } }

/* Footer: de gegevens onder het logo in zwarte inkt op een klein perkament */
.parchment--footer { max-width: 680px; }
.parchment--footer .parchment__sheet { padding: 0 clamp(4px, 2vw, 24px); }
.footer .parchment .footer__theme { color: #120b05; font-weight: 700; text-shadow: none; }
.footer .parchment .footer__meta { color: #1c1108; font-weight: 700; text-shadow: none; font-size: 12px; }
.footer .parchment .footer__small { color: #2a1b0d; font-weight: 600; text-shadow: none; margin-top: 18px; }
/* Line-up blijft boven de muurfoto van "Coming Soon" liggen, die is kleiner en schuift er niet meer over */
.lineup .stone-word--label img { z-index: 2; margin-bottom: -6%; }
.lineup__soon img { z-index: 1; }
/* het "Pre-register"-linkje bij Tickets op het perkament: blauwe inkt met een zachte gloed */
.info .parchment dd a { color: #12303f; font-weight: 700; text-decoration-color: rgba(47, 106, 136, .5);
  text-shadow: 0 0 6px rgba(150, 205, 230, .9), 0 0 14px rgba(130, 190, 220, .55); }

/* Een barst uit de muur loopt dwars door "Chapter I": in de letters splijt de steen open, daarbuiten loopt hij door in de muur */
.legend .section-head { position: relative; }
.legend .section-head .eyebrow {
  line-height: 1.4;
  -webkit-mask: url("assets/steen/barst-masker.svg") center top / 16em 1.4em no-repeat;
  mask: url("assets/steen/barst-masker.svg") center top / 16em 1.4em no-repeat;
}
.legend .section-head::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 2vw, 30px); width: 16em; height: 1.4em;
  background: url("assets/steen/barst.svg") 0 0 / 100% 100% no-repeat;
}

/* Partners: titel op de muur, uitleg en de knop om partner te worden op perkament */
.partners { padding: clamp(80px, 10vw, 150px) var(--gutter) clamp(20px, 3vw, 40px); position: relative; }
.parchment--partners { max-width: 760px; }
.parchment--partners .parchment__sheet { border-width: calc(var(--pw) * 1.25) var(--pw); border-image-width: calc(var(--pw) * 1.25) var(--pw); -webkit-mask-box-image-width: calc(var(--pw) * 1.25) var(--pw); mask-border-width: calc(var(--pw) * 1.25) var(--pw); padding: 0 clamp(4px, 2vw, 24px); }
.partners__body { text-align: center; }
.partners__body p { margin: 0 0 14px; color: #1c1108; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 240, 215, .35); }
.partners__body .partners__note { font-style: italic; font-weight: 500; color: #4a3420; margin-bottom: 28px; }
/* de partnerknop blijft gewone steen; het blauwe licht is voor de inschrijfknoppen */
.btn.btn--stone.partners__cta {
  color: #3b2b1c; animation: none;
  text-shadow: 0 1px 0 rgba(255, 244, 222, .65), 0 -1px 0 rgba(40, 26, 14, .35);
  filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, .55)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .35));
  white-space: normal; max-width: 100%;
}
.btn.btn--stone.partners__cta:hover, .btn.btn--stone.partners__cta:focus-visible {
  filter: brightness(1.08) drop-shadow(5px 11px 9px rgba(0, 0, 0, .6)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .35));
}
.partners .stone-word--title img { width: clamp(460px, 44vw, 680px); }
@media (max-width: 760px) { .partners .stone-word--title img { width: 100vw; } }
/* "Our partners" even groot en dik als "Chapter I" */
.partners .section-head .eyebrow {
  font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: .32em; margin-right: -.32em;
  margin-bottom: clamp(30px, 4vw, 56px); color: #2a1a0c;
  text-shadow: 0 1.5px 0 rgba(255, 240, 215, .7), 0 -1px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(236, 222, 198, .55);
}

/* "Practical" boven Info: precies zoals "Chapter I", dik in de muur gekerfd met de barst erdoor */
.info .section-head { position: relative; }
.info .section-head .eyebrow {
  font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: .32em; margin-right: -.32em;
  line-height: 1.4; color: #2a1a0c; text-shadow: none;
  background-image: linear-gradient(#5e3f22, #5e3f22), url("assets/wall-tile.webp");
  background-size: auto, 1000px auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 0, var(--wx, 0px) var(--wy, 0px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(255, 240, 215, .6)) drop-shadow(0 -1px 0 rgba(20, 12, 5, .45));
  -webkit-mask: url("assets/steen/barst-masker.svg") center top / 16em 1.4em no-repeat;
  mask: url("assets/steen/barst-masker.svg") center top / 16em 1.4em no-repeat;
}
.info .section-head::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 2vw, 30px); width: 16em; height: 1.4em;
  background: url("assets/steen/barst.svg") 0 0 / 100% 100% no-repeat;
}

/* Info en Partners: de tekst op het perkament groter, dikker en donkerder */
.info .parchment dt { font-size: 15px; letter-spacing: .26em; color: #2e1a08; font-weight: 800; margin-bottom: 14px; }
.info .parchment dd { font-size: 1.28em; line-height: 1.38; color: #0d0804; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 240, 215, .45); }
.info .parchment dd.muted { font-size: 1.05em; color: #2b1a0b; font-weight: 600; margin-top: 12px; }
.partners__body p { font-size: 1.28em; line-height: 1.45; color: #0d0804; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 240, 215, .45); }
.partners__body .partners__note { font-size: 1.12em; color: #2b1a0b; font-weight: 600; }

/* Het MUZE-logo in zwarte inkt onderaan het perkament van The Awakening */
.parchment .story__logo { display: block; width: clamp(48px, 5vw, 64px); height: auto; margin: clamp(26px, 3vw, 40px) auto 0; filter: brightness(0); opacity: .88; }

/* Het perkament van The Awakening rolt open terwijl je scrolt (script.js zet --open en --rh).
   Alleen het opengerolde stuk van het vel is zichtbaar; onderaan hangt een rol die script.js live tekent: hij draait mee
   en wordt dunner naarmate er minder papier op zit. Net boven de rol buigt het vel weg, daar valt een schaduw. */
.js-unroll .legend .parchment { position: relative; }
.js-unroll .legend .parchment:not(.is-unrolled) .parchment__sheet {
  clip-path: inset(0 -10% calc(100% - var(--open, 0px)) -10%);
}
.parchment__roll, .parchment__curl { display: none; }
/* de rol is een canvas (script.js tekent hem elke stap opnieuw) */
.js-unroll .parchment__roll {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  left: -2.2%; max-width: none;
  filter: drop-shadow(0 calc(var(--rh, 60px) * .2) calc(var(--rh, 60px) * .18) rgba(30, 18, 8, .5)) drop-shadow(0 2px 2px rgba(30, 18, 8, .35));
  transition: opacity .6s ease, transform .6s ease;
}
/* het vel buigt net boven de rol naar achteren: zachte schaduw die naar de rol toe donkerder wordt */
.js-unroll .legend .parchment__sheet { position: relative; }
.js-unroll .parchment__curl {
  display: block; position: absolute; z-index: 5; pointer-events: none;
  left: calc(var(--pw) * -1); right: calc(var(--pw) * -1);
  height: calc(var(--rh, 60px) * .9);
  top: calc(var(--open, 0px) - var(--pw) * 2.36 - var(--rh, 60px) * .55 - var(--rh, 60px) * .9 + var(--rh, 60px) * .25);
  /* waar het vel onder de rol verdwijnt: het buigt weg en ligt in de schaduw van de rol */
  background: linear-gradient(to bottom, rgba(60, 34, 12, 0), rgba(60, 34, 12, .14) 55%, rgba(40, 22, 8, .5) 85%, rgba(30, 16, 5, .75) 100%);
  transition: opacity .6s ease;
}
/* helemaal open: de rol (nu dun, met de stok) blijft onderaan het perkament hangen, zoals bij een echte boekrol */
.js-unroll .parchment.is-unrolled .parchment__curl { opacity: 0; }

/* "Tickets · Pre-registration": ook in de muur gekerfd zoals "Chapter I", met een langere barst voor de langere tekst */
.signup .carved { position: relative; font-size: clamp(18px, 1.6vw, 24px); }
.signup .carved .eyebrow {
  font-size: 1em; font-weight: 800; letter-spacing: .32em; margin-right: -.32em; margin-bottom: clamp(6px, 1vw, 14px); white-space: nowrap;
  line-height: 1.4; color: #2a1a0c; text-shadow: none; position: relative; z-index: 2;
  background-image: linear-gradient(#5e3f22, #5e3f22), url("assets/wall-tile.webp");
  background-size: auto, 1000px auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 0, var(--wx, 0px) var(--wy, 0px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(255, 240, 215, .6)) drop-shadow(0 -1px 0 rgba(20, 12, 5, .45));
  -webkit-mask: url("assets/steen/barst-masker.svg") center top / 27em 1.4em no-repeat;
  mask: url("assets/steen/barst-masker.svg") center top / 27em 1.4em no-repeat;
}
.signup .carved::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 27em; height: 1.4em;
  background: url("assets/steen/barst.svg") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 760px) {
  .signup .carved { font-size: 13px; }
  .signup .carved .eyebrow { letter-spacing: .2em; margin-right: -.2em; -webkit-mask-size: 24em 1.4em; mask-size: 24em 1.4em; }
  .signup .carved::after { width: 24em; }
}

/* "Our partners": ook in de muur gekerfd zoals "Chapter I", met de barst erdoor */
.partners .section-head { position: relative; }
.partners .section-head .eyebrow {
  font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: .32em; margin-right: -.32em;
  line-height: 1.4; color: #2a1a0c; text-shadow: none; white-space: nowrap;
  background-image: linear-gradient(#5e3f22, #5e3f22), url("assets/wall-tile.webp");
  background-size: auto, 1000px auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 0, var(--wx, 0px) var(--wy, 0px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(255, 240, 215, .6)) drop-shadow(0 -1px 0 rgba(20, 12, 5, .45));
  -webkit-mask: url("assets/steen/barst-masker.svg") center top / 19em 1.4em no-repeat;
  mask: url("assets/steen/barst-masker.svg") center top / 19em 1.4em no-repeat;
}
.partners .section-head::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 2vw, 30px); width: 19em; height: 1.4em;
  background: url("assets/steen/barst.svg") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 760px) {
  .partners .section-head .eyebrow { -webkit-mask-size: 17em 1.4em; mask-size: 17em 1.4em; letter-spacing: .24em; margin-right: -.24em; }
  .partners .section-head::after { width: 17em; }
}

/* Klimop groeit in (script.js): de klimop staat dan op canvassen in plaats van als achtergrond.
   Zonder JavaScript of WebGL blijft alles zoals hierboven, met de klimop meteen zichtbaar. */
.js-groei .klimop-js::before { background-image: none !important; }
.js-groei .cta-ivy.klimop-js::before, .js-groei .cta-ivy.klimop-js::after { display: none; }
.klimop-groei { position: absolute; z-index: -1; pointer-events: none; filter: drop-shadow(3px 8px 6px rgba(0, 0, 0, .32)); }
/* de banner: de klimop groeit mee in de opkomst van de foto */
.klimop-banner { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: heroIn 3.5s var(--ease) both; }
.klimop-banner .klimop-groei { z-index: auto; filter: drop-shadow(4px 10px 8px rgba(30, 20, 8, .35)); }
/* de takjes rond de knop: zelfde vak als de pseudo-elementen erboven */
.klimop-cta { filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, .35)); }
.klimop-cta--l { width: 270px; height: 96px; right: calc(100% - 56px); top: -50px; transform: rotate(10deg) scale(var(--k, 1)); transform-origin: right center; }
.klimop-cta--r { width: 240px; height: 86px; left: calc(100% - 50px); bottom: -40px; transform: rotate(14deg) scale(var(--k, 1)); transform-origin: left center; }

/* ---------------------------------------------------------------
   Gsm: niets mag buiten het scherm uitsteken (klimop, stenen titels, de rol),
   zodat de pagina nooit zijwaarts verschuift
   --------------------------------------------------------------- */
html, body { overflow-x: clip; }
@media (max-width: 760px) {
  /* zelfde banner als op de laptop, in zijn eigen verhouding (niets valt weg), onder de menubalk */
  .hero { aspect-ratio: auto; min-height: 0; max-height: none; display: block; overflow: hidden; padding-top: 92px; }
  .hero__img { position: relative; inset: auto; height: auto; aspect-ratio: 2400 / 1350;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  .hero__img img { object-position: 30% center; }
  .hero::after { display: none; }
  .hero__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; }
  .countdown { padding-top: 40px; }

  /* menu: dezelfde links als op de laptop, als tweede rij onder logo en taalkeuze */
  .nav { flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 10px;
    background: rgba(26, 22, 18, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(213, 183, 150, .12); }
  .nav__links { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .nav__links a { font-size: 10px; letter-spacing: .16em; opacity: .9; padding: 6px 2px; min-height: 24px; }

  /* stenen titels passen volledig op het scherm */
  .legend .stone-word--title img, .stone-word--line img { width: 100vw; }
  .signup .stone-word--line img { width: 96vw; }
}

@media (max-width: 760px) {
  /* gsm: eigen staande banner (9:16) over de volle breedte, net onder de menubalk */
  .hero { padding-top: var(--nav-h, 88px); }  /* precies onder de menubalk (script.js meet die hoogte) */
  .hero__img { aspect-ratio: 1080 / 1920; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
  .hero__img img { object-position: center; }
  .countdown { padding-top: 24px; }
}
@media (max-width: 760px) {
  /* op gsm iets kleinere klimop in het verhaal, zodat "Chapter I" vrij leesbaar blijft */
  .legend::before { background-size: 50vw auto, 40vw auto, 32vw auto, 48vw auto, 32vw auto; background-position: left 3.5%, right 30%, left 58%, right 82%, left 99%; }
}

/* ---------------------------------------------------------------
   Coming soon: de publieke pagina toont enkel de banner, de muur met "Coming Soon" en de footer.
   De volledige site staat niet in de publieke HTML: partners krijgen ze via /api/partner-page.
   --------------------------------------------------------------- */
.binnenkort__muur { display: none; }
body.binnenkort .binnenkort__muur {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: max(260px, calc(100svh - 56.25vw)); padding: clamp(10px, 2vw, 30px) var(--gutter) clamp(60px, 8vw, 120px);
  position: relative; isolation: isolate;
}
body.binnenkort .binnenkort__muur img { width: clamp(470px, 46vw, 760px); }
@media (max-width: 760px) {
  body.binnenkort .binnenkort__muur { min-height: 0; padding-top: 0; }
  /* de stenen letters passen volledig op het scherm */
  body.binnenkort .binnenkort__muur img { width: 94vw; }
}

/* Partnertoegang onder "Coming Soon": een gewone stenen knop, die een klein perkament met het codeveld opent */
body.binnenkort .binnenkort__muur { flex-direction: column; align-items: center; }
.binnenkort__muur .stone-word { width: 100%; margin: 0; }
.toegang { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(10px, 2vw, 28px); width: 100%; }
.btn.btn--stone.toegang__open, .toegang__rij .btn.btn--stone {
  color: #3b2b1c; animation: none; font-size: 11px; padding: 12px 22px;
  text-shadow: 0 1px 0 rgba(255, 244, 222, .65), 0 -1px 0 rgba(40, 26, 14, .35);
  filter: drop-shadow(3px 6px 5px rgba(0, 0, 0, .5)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .3));
}
.toegang__vel { width: min(460px, 100%); max-width: 460px; }
.toegang__vel[hidden] { display: none; }
.toegang__vel .parchment__sheet {
  border-width: calc(var(--pw) * 1.25) var(--pw); border-image-width: calc(var(--pw) * 1.25) var(--pw);
  -webkit-mask-box-image-width: calc(var(--pw) * 1.25) var(--pw); mask-border-width: calc(var(--pw) * 1.25) var(--pw);
  padding: 0 clamp(2px, 1vw, 12px);
}
.toegang__form { text-align: center; }
.toegang__form label { display: block; margin-bottom: 14px; font-family: var(--serif-display); font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #2e1a08; }
.toegang__rij { display: flex; gap: 10px; }
.toegang__rij input {
  flex: 1; min-width: 0; padding: 12px 14px; font: inherit; font-size: 18px; letter-spacing: .08em;
  color: #1c1108; font-weight: 600; background: rgba(255, 246, 228, .3); border: 1px solid rgba(74, 43, 16, .55); border-radius: 0;
}
.toegang__rij input:focus { border-color: #4a2b10; background: rgba(255, 246, 228, .45); }
.toegang__rij .btn { padding: 12px 18px; font-size: 11px; }
.toegang__fout { min-height: 1.4em; margin: 10px 0 0; font-style: italic; font-weight: 600; color: #7a2412; }
.toegang__form.is-fout .toegang__rij { animation: toegang-schud .4s; }
@keyframes toegang-schud { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------------------------------------------------------------
   Privacyverklaring: gewone tekst op hetzelfde perkament
   --------------------------------------------------------------- */
.privacy { padding: calc(var(--nav-h, 88px) + clamp(24px, 5vw, 60px)) clamp(12px, 4vw, 40px) clamp(50px, 8vw, 100px); }
.parchment--privacy { max-width: 860px; margin: 0 auto; }
.parchment--privacy .parchment__sheet {
  border-width: calc(var(--pw) * 1.25) var(--pw);
  border-image-width: calc(var(--pw) * 1.25) var(--pw);
  -webkit-mask-box-image-width: calc(var(--pw) * 1.25) var(--pw);
  mask-border-width: calc(var(--pw) * 1.25) var(--pw);
}
.privacy__tekst { color: #1c1108; font-weight: 500; line-height: 1.6; font-size: clamp(16px, 1.6vw, 19px); text-align: left; padding: 0 clamp(4px, 2vw, 30px); }
.privacy__tekst h1 { margin: 0; font-family: var(--serif-display); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(24px, 3.4vw, 38px); color: #3a2410; text-align: center; }
.privacy__datum { text-align: center; font-style: italic; color: #5a3e24; margin: 8px 0 30px; }
.privacy__tekst h2 { margin: 34px 0 10px; font-family: var(--serif-display); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(15px, 1.6vw, 19px); color: #4a2b10; }
.privacy__tekst h3 { margin: 20px 0 4px; font-size: 1.05em; font-weight: 700; color: #4a2b10; }
.privacy__tekst p { margin: 0 0 12px; }
.privacy__tekst ul { margin: 0 0 12px; padding-left: 1.2em; }
.privacy__tekst li { margin-bottom: 6px; }
.privacy__tekst a:not(.btn) { color: #5a3716; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.privacy__terug { text-align: center; margin-top: 36px !important; }
.privacy-pagina .nav { position: absolute; }

/* ---------------------------------------------------------------
   Toegankelijkheid en wettelijke links (WCAG 2.2 AA)
   --------------------------------------------------------------- */
/* "Ga naar de inhoud": onzichtbaar tot je met de Tab-toets op de pagina komt */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px;
  background: #1A1612; color: var(--gold); font-family: var(--serif-display); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-decoration: none; border: 2px solid var(--gold);
}
.skip-link:focus { top: 12px; }

/* Bovenbalk: zacht donker verloop achter logo en taalkeuze, zodat ze ook boven de lichte banner leesbaar zijn */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 16, 12, .78), rgba(20, 16, 12, .6) 70%, rgba(20, 16, 12, 0));
  transition: opacity .5s var(--ease);
}
.nav.is-scrolled::before { opacity: 0; }

/* Lichte stenen knoppen: een donkerder, ingezonken vlak in de steen achter de oplichtende letters (contrast >= 4.5:1) */
.btn.btn--stone { position: relative; isolation: isolate; }
.btn.btn--stone::before {
  content: ""; position: absolute; z-index: -1; inset: 5px 8px; border-radius: 2px; pointer-events: none;
  background: rgba(30, 22, 14, .58);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 240, 215, .12), 0 1px 0 rgba(255, 244, 222, .3);
}
/* knoppen met donkere gegraveerde letters houden de lichte steen */
.btn.btn--stone.toegang__open::before, .toegang__rij .btn.btn--stone::before, .btn.btn--stone.partners__cta::before { display: none; }

/* Zichtbare focus op perkament en lichte steen: donkere inkt in plaats van goud */
.parchment a:focus-visible, .parchment button:focus-visible, .parchment input:focus-visible,
.signup__form input:focus-visible, .toegang__rij input:focus-visible, .footer a:focus-visible {
  outline: 2px solid #2e1a08; outline-offset: 2px;
}
.btn.btn--stone:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Wettelijke links in de footer (op elke pagina, ook tijdens coming soon) */
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 10px; }
.footer__links a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 6px 8px;
  font-size: 14px; font-weight: 600; color: #2a1b0d; text-underline-offset: 3px;
}
.footer__links a:hover { color: #120b05; }

/* Cookiepagina: knop om opgeslagen gegevens te wissen */
.opslag-wis { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 8px; }
.opslag-wis .btn { padding: 14px 24px; font-size: 12px; }
.opslag-wis__status { margin: 0 !important; font-weight: 700; color: #2e4d17; }
.privacy__tekst table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .92em; }
.privacy__tekst th, .privacy__tekst td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(74, 43, 16, .35); }
.privacy__tekst th { font-weight: 700; color: #3a2410; }
.privacy__tekst code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
@media (max-width: 600px) {
  .privacy__tekst table, .privacy__tekst thead, .privacy__tekst tbody, .privacy__tekst tr, .privacy__tekst th, .privacy__tekst td { display: block; }
  .privacy__tekst thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .privacy__tekst td { border: 0; padding: 2px 0; }
  .privacy__tekst tr { padding: 10px 0; border-bottom: 1px solid rgba(74, 43, 16, .35); }
  .privacy__tekst td::before { content: attr(data-kop) ": "; font-weight: 700; }
}