:root {
  --bg: #090a0c;
  --surface: #111317;
  --surface-2: #171a1f;
  --text: #f3efe8;
  --muted: #b9b2a8;
  --line: rgba(255,255,255,.11);
  --accent: #d9843b;
  --accent-2: #f2bc73;
  --max: 1180px;
  --radius: 18px;
  --shadow: 0 18px 55px rgba(0,0,0,.32);
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 80% 0%, rgba(217,132,59,.12), transparent 28rem),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:99; background:#fff; color:#000; padding:.7rem 1rem; border-radius:.5rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(5,6,7,.92), rgba(5,6,7,.62), transparent);
  border-bottom: 1px solid transparent;
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { text-decoration:none; display:flex; flex-direction:column; line-height:1.05; letter-spacing:.01em; }
.brand strong { font-size: 1rem; font-weight: 650; }
.brand span { margin-top:5px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; }
.nav-links { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:.88rem; padding:.55rem .75rem; border-radius:999px; }
.nav-links a:hover, .nav-links a:focus-visible { color:var(--text); background:rgba(255,255,255,.07); outline:none; }
.nav-links .home-link { color:var(--accent-2); }

.hero {
  position: relative;
  min-height: min(860px, 94vh);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}
.hero-image {
  position: absolute;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  background: #19130f;
}
.hero-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 48%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(0,0,0,.06) 5%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.01) 100%);
}
.hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
  position:absolute;
  inset:0;
  filter:saturate(.88) contrast(1.06);
  transform:scale(1.035);
}
.hero-copy {
  position:absolute;
  z-index:2;
  left:max(24px, calc((100vw - var(--max))/2));
  right:24px;
  bottom:86px;
  max-width:900px;
}
.eyebrow { margin:0 0 14px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.18em; font-size:.73rem; font-weight:700; }
h1 {
  margin:0;
  max-width:900px;
  font-family: Georgia, "Times New Roman", serif;
  font-size:clamp(3rem,7vw,6.8rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero-meta { margin:24px 0 0; color:rgba(255,255,255,.83); font-size:clamp(1.08rem,2vw,1.45rem); max-width:760px; }

.intro { max-width: 900px; margin: 0 auto; padding: 36px 24px 64px; }
.intro p { color:#d3cec6; font-size:clamp(1rem,1.5vw,1.08rem); margin:0 0 1rem; }
.intro a { color:var(--accent-2); text-underline-offset:3px; }
.intro-note { margin-top:28px; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; background:rgba(255,255,255,.025); }

.days { max-width: var(--max); margin:0 auto; padding: 0 24px 80px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.section-heading h2 { margin:0; font-family: Georgia, "Times New Roman", serif; font-size:clamp(2.2rem,4.4vw,4.3rem); font-weight:400; line-height:1.04; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--muted); max-width:50ch; }
.day-grid { display:grid; gap:18px; }
.day-card {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(230px,.8fr) 220px;
  gap:28px;
  align-items:start;
  padding:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.day-card:target { border-color: rgba(242,188,115,.55); box-shadow:0 0 0 4px rgba(217,132,59,.07); }
.day-kicker { color:var(--accent-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; font-weight:700; margin-bottom:6px; }
.day-card h3 { margin:0 0 12px; font-size:clamp(1.25rem,2.5vw,1.65rem); line-height:1.2; }
.day-card p { margin:.3rem 0; color:#d1cbc2; }
.video-list h4, .gallery h4 { margin:0 0 10px; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:#8f8a83; }
.video-list ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.video-list a { display:inline-flex; gap:8px; align-items:flex-start; color:#eee7dc; text-decoration:none; font-size:.92rem; line-height:1.35; }
.video-list a::before { content:"▶"; color:var(--accent); font-size:.72em; margin-top:.35em; }
.video-list a:hover { color:var(--accent-2); }
.gallery-link { display:block; text-decoration:none; }
.gallery-thumb { aspect-ratio:1/1; width:100%; border-radius:14px; overflow:hidden; background:#25211e; border:1px solid rgba(255,255,255,.12); position:relative; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease, filter .35s ease; }
.gallery-thumb::after { content:"Bekijk foto’s ↗"; position:absolute; left:10px; right:10px; bottom:10px; padding:9px 10px; border-radius:10px; background:rgba(0,0,0,.67); color:#fff; font-size:.78rem; text-align:center; backdrop-filter:blur(8px); }
.gallery-link:hover img { transform:scale(1.045); filter:brightness(1.08); }
.gallery-fallback { display:none; height:100%; place-items:center; text-align:center; padding:16px; background:linear-gradient(145deg,#2b211a,#17191c); color:var(--accent-2); font-weight:700; }

.site-footer { border-top:1px solid var(--line); padding:30px 24px 42px; color:var(--muted); }
.footer-inner { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.site-footer p { margin:0; font-size:.86rem; }
.site-footer a { color:#ddd6cc; text-underline-offset:3px; }

@media (max-width: 900px) {
  .day-card { grid-template-columns:minmax(0,1fr) 190px; }
  .video-list { grid-column:1; }
  .gallery { grid-column:2; grid-row:1 / span 2; }
  .nav { align-items:flex-start; padding-top:14px; padding-bottom:14px; }
  .nav-links { justify-content:flex-end; }
}
@media (max-width: 650px) {
  :root { --header-h: 68px; }
  .nav { display:block; }
  .brand { margin-bottom:12px; }
  .nav-links { justify-content:flex-start; gap:4px; }
  .nav-links a { padding:.45rem .6rem; font-size:.8rem; }
  .hero { min-height:86vh; }
  .hero-image { min-height:100%; }
  .hero-image img { object-position:center 50%; }
  .hero-copy { left:15px; right:15px; bottom:48px; }
  h1 { font-size:clamp(2.65rem,12vw,5rem); }
  .intro { padding:26px 18px 48px; }
  .days { padding:0 14px 56px; }
  .section-heading { display:block; }
  .section-heading p { margin-top:8px; }
  .day-card { grid-template-columns:1fr; gap:22px; padding:20px; }
  .gallery { grid-column:1; grid-row:auto; }
  .gallery-thumb { max-width:320px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}