/* Lettertypen: zelf gehost (SIL Open Font License), want aan boord is de wifi matig. */
@font-face { font-family: "Limelight"; src: url("../fonts/limelight.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poiret One"; src: url("../fonts/poiret-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --nacht: #07090b;
  --nacht-2: #0c1114;
  --nacht-3: #121a1d;
  --smaragd: #0d2420;
  --smaragd-2: #163a33;
  --goud: #d8b45f;
  --goud-licht: #f4dd9c;
  --goud-donker: #8f6c27;
  --creme: #f3e9d3;
  --creme-zacht: rgb(243 233 211 / .74);
  --creme-vaag: rgb(243 233 211 / .5);
  --bordeaux: #7c1c29;
  --bordeaux-licht: #b03244;
  --zilver: #c5cbcf;
  --jade: #6cc3a8;
  --lijn: rgb(216 180 95 / .42);
  --lijn-vaag: rgb(216 180 95 / .18);

  --metaal: linear-gradient(180deg, #fff7da 0%, #f2d68c 24%, #cc9d40 47%, #8f6c27 53%, #e8c773 74%, #fff0c0 100%);

  --display: "Limelight", "Didot", "Bodoni 72", serif;
  --deco: "Poiret One", "Josefin Sans", sans-serif;
  --label: "Josefin Sans", "Futura", system-ui, sans-serif;
  --tekst: "Cormorant Garamond", "Garamond", Georgia, serif;

  --ease-uit: cubic-bezier(.16, 1, .3, 1);
  --ease-veer: cubic-bezier(.34, 1.56, .64, 1);

  --tabbalk-h: 64px;
  --onder: env(safe-area-inset-bottom, 0px);
  --kolom: 42rem;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--nacht);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgb(22 58 51 / .55), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgb(124 28 41 / .18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23d8b45f' stroke-opacity='.07' stroke-width='.8'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M8 28a20 20 0 0 1 40 0M16 28a12 12 0 0 1 24 0M24 28a4 4 0 0 1 8 0'/%3E%3Cpath d='M-28 14a28 28 0 0 1 56 0M-20 14a20 20 0 0 1 40 0M-12 14a12 12 0 0 1 24 0M28 14a28 28 0 0 1 56 0M36 14a20 20 0 0 1 40 0M44 14a12 12 0 0 1 24 0'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed, scroll;
  color: var(--creme);
  font-family: var(--tekst);
  font-size: 1.1875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--goud-licht); }
:focus-visible { outline: 2px solid var(--goud-licht); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#inhoud { outline: none; }
body:not([data-pagina="opening"]) #inhoud { padding-bottom: calc(var(--tabbalk-h) + var(--onder) + 2rem); }

/* ---------- Typografie ---------- */

.metaal {
  background: var(--metaal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.label {
  font-family: var(--label);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--goud);
}

/* Lijn – ruit – lijn */
.ornament {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(15rem, 70%);
  margin-inline: auto;
  color: var(--goud);
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud));
}
.ornament::after { background: linear-gradient(-90deg, transparent, var(--goud)); }
.ornament > span {
  width: .5rem; height: .5rem;
  transform: rotate(45deg);
  border: 1px solid var(--goud);
  box-shadow: 0 0 0 3px var(--nacht), 0 0 0 4px var(--lijn);
}

/* ---------- Paginakop ---------- */

.pagina { width: min(100% - 2rem, var(--kolom)); margin-inline: auto; }

.kop {
  position: relative;
  text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 2.6rem) 0 1.6rem;
}
.kop::before {
  /* waaier achter de titel */
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 26rem; height: 13rem;
  translate: -50% 0;
  background: repeating-conic-gradient(from -90deg at 50% 0%, rgb(216 180 95 / .13) 0deg 2deg, transparent 2deg 9deg);
  mask: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%);
  rotate: 180deg;
  pointer-events: none;
  z-index: -1;
}
.kop-boven { margin: 0 0 .7rem; }
.kop-titel {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: .04em;
}
.kop-onder {
  margin: .9rem auto 0;
  max-width: 28rem;
  font-style: italic;
  color: var(--creme-zacht);
}
.kop .ornament { margin-top: 1.2rem; }

.sectie { margin-top: 2.6rem; }
.sectie-titel {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-family: var(--deco);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: .08em;
  color: var(--goud-licht);
}
.sectie-titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lijn), transparent); }
.sectie-titel .nr {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--goud);
  border: 1px solid var(--lijn);
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  rotate: 45deg;
  flex: none;
}
.sectie-titel .nr > span { rotate: -45deg; }

/* Kaart met deco-hoeken */
.paneel {
  position: relative;
  padding: 1.25rem 1.3rem;
  background: linear-gradient(180deg, rgb(22 58 51 / .35), rgb(12 17 20 / .7));
  border: 1px solid var(--lijn-vaag);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.paneel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--lijn-vaag);
  clip-path: inherit;
  pointer-events: none;
}

/* ---------- Tabbalk ---------- */

.tabbalk {
  position: fixed;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbalk-h) + var(--onder));
  padding-bottom: var(--onder);
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgb(7 9 11 / .82), rgb(7 9 11 / .97));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -1px 0 rgb(0 0 0 / .6), 0 -18px 40px rgb(0 0 0 / .45);
  transition: translate .6s var(--ease-uit), opacity .6s;
}
.tabbalk::before {
  /* dubbele lijn bovenaan */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lijn-vaag) 20%, var(--lijn-vaag) 80%, transparent);
}
body[data-pagina="opening"]:not([data-zegel="verbroken"]) .tabbalk { translate: 0 110%; opacity: 0; pointer-events: none; }

.tab {
  flex: 1;
  max-width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-decoration: none;
  color: var(--creme-vaag);
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  position: relative;
  transition: color .3s;
}
.tab svg { width: 1.5rem; height: 1.5rem; }
.tab[aria-current="page"] { color: var(--goud-licht); }
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 2.2rem; height: 2px;
  background: var(--goud);
  box-shadow: 0 0 12px var(--goud);
}

/* ---------- Portret (monogram als het beeld nog ontbreekt) ---------- */

.portret {
  --ring: var(--goud);
  --vlak: var(--smaragd);
  position: relative;
  display: block;
  width: var(--maat, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(255 255 255 / .035) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--vlak) 70%, white 8%), var(--nacht) 85%);
  box-shadow: 0 0 0 1.5px var(--ring), 0 0 0 4px var(--nacht), 0 0 0 5px color-mix(in srgb, var(--ring) 45%, transparent), 0 6px 18px rgb(0 0 0 / .55);
  overflow: hidden;
  flex: none;
}
.portret--personeel { --ring: var(--zilver); --vlak: #1d2428; }
.portret--gast { --ring: var(--jade); --vlak: #10302a; }
.portret--notaris { --ring: var(--creme); --vlak: #2a2419; }
.portret--lord { --ring: var(--goud); --vlak: #241a0c; border-radius: 22%; }

.portret-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: calc(var(--maat, 3rem) * .46);
  line-height: 1;
  padding-top: .08em;
  background: var(--metaal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portret--personeel .portret-monogram { background: linear-gradient(180deg, #fff, #c5cbcf 45%, #6f777c 55%, #e5e9eb); -webkit-background-clip: text; background-clip: text; }
.portret--gast .portret-monogram { background: linear-gradient(180deg, #e9fff7, #8ed8c0 45%, #3b8a73 55%, #c3f0e1); -webkit-background-clip: text; background-clip: text; }
.portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Gedeelde animaties en paginawissel ---------- */

@keyframes opkomen { from { opacity: 0; translate: 0 .9rem; filter: blur(6px); } }
@keyframes verschijnen { from { opacity: 0; } }
@keyframes draaien { to { rotate: 360deg; } }
@keyframes teken { to { stroke-dashoffset: 0; } }


::view-transition-old(root) { animation: .28s ease-in both vt-uit; }
::view-transition-new(root) { animation: .5s var(--ease-uit) both vt-in; }
@keyframes vt-uit { to { opacity: 0; filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; translate: 0 14px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}