:root {
  --roet: #160d0b;
  --ossenbloed: #3d0f11;
  --tungsten: #e8a25a;
  --vet: #f2e3d3;
  --vet-zacht: #c9b6a6;
  --tag: #f8c3ee;
  --tag-inkt: #3a0d14;
  --staal: #7c868a;

  --display: "Oranienbaum", "Times New Roman", serif;
  --hand: "Covered By Your Grace", "Marker Felt", cursive;
  --tekst: "Aktiv Grotesk", "Hanken Grotesk", system-ui, sans-serif;

  --rand: clamp(16px, 4vw, 64px);
  --rail-y: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--roet); }
body {
  margin: 0;
  background: var(--roet);
  color: var(--vet);
  font: 400 1.0625rem/1.55 var(--tekst);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure, ol, dl, dd { margin: 0; padding: 0; }
ol { list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
h3 { font-size: 1.75rem; }
p { margin: 0; max-width: 34em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tag); outline-offset: 3px; }

.hand { font-family: var(--hand); font-weight: 400; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.link { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.link:hover { color: var(--tag); }

/* De rail: de stalen buis waar de hele site aan hangt */
.rail {
  position: fixed; z-index: 30; top: var(--rail-y); left: 0; right: 0; height: 3px;
  background: linear-gradient(#a7b0b4, #4b5255);
  box-shadow: 0 2px 6px #000a;
}

.top {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  padding: 34px var(--rand) 0;
  display: flex; align-items: flex-start; gap: 40px;
}
.logo img { width: 132px; }
.top nav { display: flex; gap: 26px; padding: 10px 150px 0 0; margin-left: auto; font-size: .95rem; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--tag); }

/* Het label: enige plek waar roze voorkomt, altijd als object aan een touwtje */
.tag { --touw: 40px; --schuin-x: 21px; --schuin-y: 51px; display: block; position: relative; transform-origin: 50% 0; color: var(--tag-inkt); text-decoration: none; will-change: transform; }
.tag-string { /* het draadje en de splitpen, zoals op de echte labels */
  display: block; position: relative; z-index: 1; width: 2px; height: var(--touw); margin: 0 auto;
  background: linear-gradient(90deg, #f0d48c, #8d6a2c);
}
.tag-string::after {
  content: ""; position: absolute; left: -3px; bottom: -22px; width: 8px; height: 26px;
  border-radius: 4px; background: linear-gradient(90deg, #8d6a2c, #f0d48c 45%, #a27c34);
  box-shadow: 0 1px 2px #0006;
}
.tag-body {
  display: block; position: relative; padding: 34px 20px 22px;
  background:
    radial-gradient(ellipse 70% 34% at 40% 10%, #e9a9d966, transparent),
    radial-gradient(ellipse 60% 30% at 75% 82%, #e9a9d94d, transparent),
    var(--tag);
  clip-path: polygon(var(--schuin-x) 0, calc(100% - var(--schuin-x)) 0, 100% var(--schuin-y), 100% 100%, 0 100%, 0 var(--schuin-y));
}

.tag-cta {
  position: fixed; z-index: 40; top: var(--rail-y); right: var(--rand); width: 98px;
  --touw: 18px; --schuin-x: 12px; --schuin-y: 18px; text-align: center; line-height: 1;
  filter: drop-shadow(0 10px 14px #0009);
}
.tag-cta .tag-body { padding: 28px 6px 8px; font-size: 1.3rem; }
.tag-cta .hand { display: block; padding: 5px 0 4px; border: 1px solid var(--tag-inkt); text-transform: none; } /* de hoofdletter R van dit font heeft een lange staart */
.cta-regel { display: block; }
.tag-cta:hover .tag-body { background: #ffd8f6; }
.tag-cta { transition: translate .45s ease, visibility 0s; }
.tag-cta.is-weg { translate: 0 -120%; visibility: hidden; transition: translate .45s ease, visibility 0s .45s; }

/* Hero: de foto heeft bovenaan links een natuurlijke donkere zone, daar staat de tekst */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  animation: lamp 2.4s cubic-bezier(.3, 0, .2, 1) both;
}
@keyframes lamp {
  0% { filter: brightness(0) sepia(1); }
  18% { filter: brightness(.34) sepia(.8); }
  24% { filter: brightness(.16) sepia(.8); }
  100% { filter: none; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(#160d0be6 7%, transparent 20%), /* het raam op de foto is fel: het menu moet leesbaar blijven */
    linear-gradient(transparent 72%, var(--roet)),
    radial-gradient(ellipse 62% 52% at 16% 24%, #160d0bf0 40%, #160d0b99 68%, transparent);
}
.hero-copy { position: relative; z-index: 2; padding: 22vh var(--rand) 0; }
.hero h1 { font-size: clamp(3rem, 6.4vw, 7.25rem); line-height: .98; }
.hero-copy p { margin-top: 1.1em; max-width: 23em; color: var(--vet); }
.hero-foot {
  position: relative; z-index: 2; margin-top: auto; padding: 0 var(--rand) 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 40px; font-size: .95rem;
}
.hero-foot p { max-width: none; }

/* De kaart: rassen als labels aan de rail, gesorteerd op sterkte */
.kaart { padding: clamp(72px, 12vw, 160px) 0 clamp(64px, 10vw, 140px); background: var(--roet); }
.kaart-intro { padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; }
.haken {
  position: relative; margin-top: 56px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--staal) transparent;
  background:
    linear-gradient(#000c, #160d0bf2 72%, var(--roet)),
    url("img/rail.jpg") 50% 22% / cover no-repeat;
}
.haken-rij {
  display: flex; align-items: flex-start; gap: 34px; width: max-content; padding: 0 var(--rand) 56px;
  background: linear-gradient(#a7b0b4, #4b5255) 0 0 / 100% 3px no-repeat;
}
.ras { position: relative; flex: none; width: 212px; }
.ras h3 { margin-top: 26px; font-size: 1.75rem; }
.haken .tag { --touw: calc(22px + var(--s) * 30px); width: 168px; filter: drop-shadow(0 12px 16px #000a); }
.haken .tag-body { height: 338px; padding: 62px 14px 14px; }

/* De voorkant van het echte label: gedrukte velden, met de stift ingevuld, dwars leesbaar */
.velden { writing-mode: vertical-rl; display: flex; flex-direction: column; gap: 4px; height: 224px; margin: 0 auto; width: max-content; }
.velden p { display: flex; align-items: baseline; gap: 8px; max-width: none; line-height: 1; white-space: nowrap; }
.print { width: auto; min-height: 46px; font: 500 .6875rem/1 var(--tekst); letter-spacing: .03em; text-transform: uppercase; }
.velden .hand { font-size: 1.75rem; line-height: 1.1; }
.lippen {
  display: block; position: absolute; left: 14px; bottom: 12px; width: calc(var(--s) * 26px); height: 24px;
  background: var(--tag-inkt); rotate: -3deg;
  mask: url("img/lippen.svg") 0 0 / 26px 24px repeat-x;
}
.land { margin-top: 6px; font-size: .875rem; line-height: 1.3; color: var(--vet-zacht); }
.haken dl, .uren dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.haken dl { margin-top: 14px; font-size: .875rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.kaart-na { margin-top: clamp(56px, 8vw, 110px); padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: start; }
.saus { font-family: var(--display); font-size: clamp(1.75rem, 3.3vw, 3rem); line-height: 1.14; max-width: 19em; }
.kaart-keuze p + p { margin-top: 1em; }

/* Het dier: bewust uit het lood, foto's overlappen */
.dier { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 var(--rand) clamp(72px, 10vw, 150px); column-gap: 20px; }
.dier-kast { grid-column: 1 / span 7; grid-row: 1 / span 2; margin-left: calc(var(--rand) * -1); }
.dier-kast img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 78% 40%; }
.dier-tekst { grid-column: 8 / -1; grid-row: 1; padding: 160px 0 48px 20px; align-self: end; }
.dier-tekst p { margin-top: 1.1em; }
.wagjoe { color: var(--tungsten); }
.wagjoe strong { font-weight: 500; }
.dier-schouder { grid-column: 7 / -1; grid-row: 2; position: relative; z-index: 2; margin-left: -8%; }

/* De zaal */
.zaal-groot { position: relative; }
.zaal-groot img { width: 100%; min-height: 70vh; object-fit: cover; }
.zaal-groot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18vh var(--rand) 36px;
  background: linear-gradient(transparent, var(--roet) 76%);
}
.zaal-groot figcaption p { margin-top: .8em; }
.ruimtes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: clamp(48px, 7vw, 96px) var(--rand) clamp(72px, 10vw, 140px); }
.ruimte img { width: 100%; margin-bottom: 16px; }
.ruimte p { margin-top: 6px; color: var(--vet-zacht); }
.ruimte-lobby { grid-column: 1 / span 7; }
.ruimte-private { grid-column: 9 / -1; margin-top: 22%; }

/* Reserveren: op de home hangt het lege label aan zijn eigen stuk rail, onder de lamp. De rest staat op reserveren.html */
.reserveren-kort {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px);
  align-items: end; min-height: min(92svh, 820px); padding: 0 var(--rand) clamp(72px, 10vw, 120px);
  background: radial-gradient(ellipse 42% 80% at 79% 0, #3d0f11c0, transparent);
}
.reserveren-kort::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(#a7b0b4, #4b5255); }
.reserveren-tekst h2 { font-size: clamp(3rem, 6.6vw, 6.75rem); line-height: .98; max-width: 9em; }
.reserveren-tekst p { margin-top: 16px; max-width: 26rem; }
.reserveren-tekst p:last-child { margin-top: 26px; }
.tag-groot { --touw: clamp(70px, 12vh, 120px); --schuin-x: 40px; --schuin-y: 64px; align-self: start; justify-self: center; width: min(300px, 100%); filter: drop-shadow(0 18px 26px #000b); }
.tag-groot .tag-body { height: 470px; padding: 84px 18px 18px; }
.velden-groot { height: 100%; gap: 8px; }
.velden-groot p { min-width: 44px; }
.velden-groot .print { min-height: 52px; }
.velden-groot .hand { font-size: 2.5rem; line-height: 1.02; }
.knop {
  display: inline-block; margin-top: 24px; padding: 13px 22px;
  background: var(--tag-inkt); color: var(--tag); text-decoration: none; font-weight: 500;
}
.uren { margin-top: 28px; max-width: 30em; }

/* Losse pagina's */
.kaart-pagina { padding-top: clamp(150px, 20vh, 220px); }
.kaart-pagina h1 { font-size: clamp(3.25rem, 8vw, 8rem); line-height: .95; }
.kaart-na-kort { align-items: end; }
.kaart-keuze .link + .link { margin-left: 1em; }
.pagina-kop { padding: clamp(150px, 22vh, 240px) calc(var(--rand) + 110px) clamp(48px, 7vw, 96px) var(--rand); }
.pagina-kop h1 { font-size: clamp(2.75rem, 6.6vw, 7.25rem); line-height: 1; max-width: 13em; }
.pagina-kop p { margin-top: 1.1em; }
.drie { padding: 0 var(--rand) clamp(72px, 9vw, 130px); }
.drie ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.drie h2 { font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
.drie p { margin-top: 8px; color: var(--vet-zacht); }
.droog { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: end; padding: 0 var(--rand) clamp(72px, 10vw, 140px) 0; }
.droog p { margin-top: 1em; }
.droog img { width: 100%; }

/* Menu op de telefoon */
.menu-knop { display: none; margin-left: 0; padding: 6px 0; border: 0; background: none; color: var(--vet); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; position: relative; z-index: 2; }
.top nav a[aria-current="page"] { color: var(--tag); }
.uren h3 { font: 500 1rem/1.55 var(--tekst); }
.uren dl { margin-top: 4px; color: var(--vet-zacht); }

.voet { padding: 40px var(--rand) 28px; background: #0e0706; display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; }
.liefde { font-family: var(--display); font-size: clamp(1.75rem, 3.6vw, 3rem); }
.voet nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* Onderscheidingen in tekst: de felle logo's van anderen vloeken met de donkere voet */
.lof { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; align-items: start; padding: 0 0 clamp(32px, 5vw, 64px); }
.lof strong { display: block; font: 400 clamp(1.375rem, 2.2vw, 1.875rem)/1.15 var(--display); }
.lof span { display: block; margin-top: 6px; font-size: .95rem; color: var(--vet-zacht); }

@media (max-width: 760px) {
  .logo img { width: 104px; }
  .top { padding-top: 26px; }
  .top { gap: 18px; align-items: center; }
  .menu-knop { display: block; }
  .top nav {
    display: none; position: fixed; inset: 0; z-index: 1; margin: 0; padding: 120px var(--rand) 40px;
    flex-direction: column; gap: 10px; background: var(--roet);
    font: 400 clamp(2.5rem, 12vw, 3.5rem)/1.1 var(--display);
  }
  .top nav.is-open { display: flex; }
  .logo { position: relative; z-index: 2; }
  .drie ul, .droog { grid-template-columns: minmax(0, 1fr); }
  .droog { padding: 0 var(--rand) 72px; }
  .droog figure { margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1); }
  .pagina-kop { padding-right: var(--rand); }
  .kaart-pagina { padding-top: 136px; }
  .reserveren-kort { grid-template-columns: minmax(0, 1fr); min-height: 0; background: radial-gradient(ellipse 70% 340px at 70% 0, #3d0f11c0, transparent); }
  .tag-groot { order: -1; width: 208px; justify-self: end; margin-right: 8%; --touw: 58px; --schuin-x: 28px; --schuin-y: 44px; }
  .tag-groot .tag-body { height: 340px; padding: 60px 26px 12px 12px; }
  .velden-groot { gap: 2px; }
  .velden-groot p { min-width: 40px; }
  .velden-groot .hand { font-size: 1.75rem; }
  .tag-cta { width: 88px; --touw: 16px; }
  .tag-cta .tag-body { padding: 26px 5px 7px; font-size: 1.15rem; }

  .hero-copy { padding-top: 136px; }
  .hero-copy p { max-width: 19em; }
  .hero-photo { top: 28%; height: 72%; object-position: 54% 40%; }
  .hero::before {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 28%; height: 34%;
    background: linear-gradient(var(--roet), transparent);
  }
  .hero-foot { display: block; }
  .lof { grid-template-columns: minmax(0, 1fr); }

  .kaart-intro, .kaart-na { grid-template-columns: minmax(0, 1fr); }
  .dier { display: block; }
  .dier-kast { margin-right: 18%; }
  .dier-tekst { padding: 32px 0; }
  .dier-schouder { margin: 0 calc(var(--rand) * -1) 0 12%; }
  .ruimtes { display: block; }
  .ruimte-private { margin: 40px 0 0 22%; }
  .ras { width: 188px; }
  .voet { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo { animation: none; }
  .tag-cta, .tag-cta.is-weg { transition: none; }
}

/* Houdt de intro van de kaart vrij van het zwevende label. */
@media (min-width: 761px) {
  .kaart-intro { padding-right: 150px; }
}

/* Lichte knop, op elke pagina dezelfde */
.knop-licht {
  display: inline-block; padding: 14px 24px; border: 0;
  background: var(--vet); color: var(--roet);
  font: 500 1rem/1.3 var(--tekst); text-decoration: none; cursor: pointer;
}
.knop-licht:hover { background: #fff; }

/* Knop die eruitziet als een link */
.link-knop { padding: 0; border: 0; background: none; color: var(--vet); font: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; cursor: pointer; }
.link-knop:hover { color: var(--tag); }
.tafel-klaar p:not(.klaar-knoppen) { margin-top: 16px; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }