/* ==========================================================================
   GlisteningStudio — shared stylesheet
   One file, used by every page. Edit here to change the whole site at once.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,400;0,500;0,600;1,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f1ebe1;
  --text: #362d24;
  --text-muted: #6c6459;
  --accent: #c9862f;       /* warm amber — "licht" */
  --accent-2: #8bc34a;     /* apple green — "natuur" */
  --accent-soft: #f6e9d8;
  --border: #e6ddcd;
  --radius: 14px;
  --max: 1120px;

  /* soft rainbow section washes — used by the scroll-reveal photo story */
  --wash-1: #faf7f2;   /* cream */
  --wash-2: #fbeee0;   /* peach */
  --wash-3: #f3ecd9;   /* gold-beige */
  --wash-4: #ecf1e2;   /* sage */
  --wash-5: #e9f1ef;   /* soft mint */
  --wash-6: #eef1f5;   /* soft sky */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1815;
    --surface: #262019;
    --surface-2: #302921;
    --text: #f3ede2;
    --text-muted: #b3a897;
    --accent: #e0a34f;
    --accent-2: #9ccc65;
    --accent-soft: #3a2c22;
    --border: #40362b;
    --wash-1: #1c1815; --wash-2: #201b16; --wash-3: #1f1c15; --wash-4: #1a1e16; --wash-5: #191d1c; --wash-6: #191b1e;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1815;
  --surface: #262019;
  --surface-2: #302921;
  --text: #f3ede2;
  --text-muted: #b3a897;
  --accent: #e0a34f;
  --accent-2: #9ccc65;
  --accent-soft: #3a2c22;
  --border: #40362b;
  --wash-1: #1c1815; --wash-2: #201b16; --wash-3: #1f1c15; --wash-4: #1a1e16; --wash-5: #191d1c; --wash-6: #191b1e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  position: relative;
}

/* Whisper-thin grain — a bit of tactile, handmade texture over every section,
   so flat colour washes never feel too flat/digital. Never darkens anything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { mix-blend-mode: overlay; opacity: 0.05; }
}
:root[data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: 0.05; }

/* A soft prism-rainbow glow that drifts toward the cursor — like the rainbow
   light spots a suncatcher throws on a wall, following you around the page.
   Desktop only. */
#lightCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 130, 120, 0.22),
    rgba(255, 191, 120, 0.22),
    rgba(255, 238, 140, 0.22),
    rgba(160, 224, 150, 0.22),
    rgba(130, 210, 220, 0.22),
    rgba(140, 160, 240, 0.22),
    rgba(210, 140, 235, 0.22),
    rgba(255, 130, 120, 0.22)
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
#lightCursor.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #lightCursor { display: none; }
}

h1, h2, h3, .display {
  font-family: "Petrona", Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--accent-2); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Floating nav (no bar, no border — inspired by minimal
   interior-design studio sites: small frosted marks in the corners,
   the page itself starts at the very top edge) ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(16px, 3vw, 28px) clamp(18px, 4vw, 40px);
  pointer-events: none;
}
.site-nav .menu-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 4px 18px -8px rgba(40, 30, 15, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-nav .menu-btn { background: rgba(28, 24, 21, 0.62); }
}
:root[data-theme="dark"] .site-nav .menu-btn { background: rgba(28, 24, 21, 0.62); }

.site-nav .menu-btn {
  border: none;
  cursor: pointer;
  font-family: "Work Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.site-nav .menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.site-nav .menu-btn .bars span { width: 16px; height: 1.5px; background: currentColor; display: block; }

/* Full-screen nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.nav-overlay a {
  font-family: "Petrona", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--text);
  text-decoration: none;
}
.nav-overlay a:hover { color: var(--accent); }
.nav-overlay a.cta {
  margin-top: 12px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
}
.nav-overlay a.cta:hover { background: var(--accent-2); color: #fff; }
.nav-overlay .close-btn {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(18px, 4vw, 40px);
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 10px;
}
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow {
  font-family: "Work Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-block;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
}
.hero .lede {
  margin-top: 18px;
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 46ch;
}
.hero .actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 26px -12px rgba(40, 30, 15, 0.4); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }

/* Real photography */
.photo {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: var(--surface-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.photo:hover img { transform: scale(1.055); }
.photo.square { aspect-ratio: 1 / 1; border-radius: 16px; }
.photo.wide { aspect-ratio: 16 / 10; border-radius: 18px; }

/* ---------- Wide-banner video hero ---------- */
/* Deliberately wide/cinematic rather than full-viewport-tall. Lightened on
   purpose (opacity + a gentle brightness/desaturate filter) so the wall
   behind the light spots reads soft and white rather than grey. */
.hero-video-section {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5.78;
  max-height: 56.4vh;
  min-height: 231px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--wash-1);
}
.hero-video-section video,
.hero-video-section .poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  filter: brightness(1.14) contrast(0.92) saturate(0.92);
}
.hero-mark {
  position: relative;
  z-index: 2;
  width: min(320px, 40vw);
  min-width: 180px;
  filter: drop-shadow(0 6px 30px rgba(30, 22, 12, 0.28));
  opacity: 0;
  transform: scale(0.88);
  animation: hero-mark-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
@keyframes hero-mark-in {
  0% { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark { animation: none; opacity: 1; transform: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-mark { filter: drop-shadow(0 6px 30px rgba(0,0,0,0.55)) invert(1) brightness(1.6); }
}
:root[data-theme="dark"] .hero-mark { filter: drop-shadow(0 6px 30px rgba(0,0,0,0.55)) invert(1) brightness(1.6); }

/* Small looping ambient video clips used inside the photo story */
.story-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.5vw, 34px);
  transform: translateX(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(60, 48, 32, 0.4);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-cue-bob 2.2s ease-in-out infinite;
}
.hero-scroll-cue svg { width: 13px; height: 13px; }
@keyframes hero-cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: none; } }

/* Intro copy block directly under the video — plain, light background,
   never overlaid on the image itself. */
.hero-intro {
  padding: clamp(48px, 8vw, 84px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
  background: var(--wash-1);
  position: relative;
  overflow: hidden;
}
.hero-intro .inner {
  max-width: 62ch;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-intro .actions { align-self: stretch; }
.hero-intro h1 {
  font-size: min(4vw, 3.1rem);
  text-align: center;
  white-space: nowrap;
  text-wrap-style: auto;
}
.hero-intro .lede {
  margin-top: 18px;
  font-size: min(2.6vw, 1.15rem);
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.hero-intro .actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Photo story (scroll-reveal) ---------- */
.story-section {
  padding: clamp(56px, 9vw, 108px) 0;
  overflow: hidden;
}
.story-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}
.story-row.reverse { grid-template-columns: 0.9fr 1.1fr; }
.story-row.reverse .story-text { order: 2; }
.story-row.reverse .story-photo { order: 1; }
@media (max-width: 820px) {
  .story-row, .story-row.reverse { grid-template-columns: 1fr; }
  .story-row.reverse .story-text, .story-row.reverse .story-photo { order: initial; }
}
/* A photo-only row (no paired text) — single centred column instead of the
   usual two-column split. */
.story-row.solo {
  grid-template-columns: 1fr;
}
.story-row.solo .story-photo {
  max-width: 560px;
  margin: 0 auto;
}
.story-row-even { grid-template-columns: 1fr 1fr; }
.story-row-suncatcher .story-photo { order: 2; max-width: 60%; margin-left: auto; }
.story-row-suncatcher .story-text { order: 1; }
@media (max-width: 820px) {
  .story-row-suncatcher .story-photo { max-width: 100%; margin-left: 0; order: initial; }
  .story-row-suncatcher .story-text { order: initial; }
}
.story-photo {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 18px 44px -20px rgba(40, 30, 15, 0.35);
  transition: box-shadow 0.4s ease;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.story-photo:hover img { transform: scale(1.055); }
.story-photo:hover { box-shadow: 0 24px 54px -18px rgba(40, 30, 15, 0.45); }
/* A slightly more transparent treatment for a specific photo (e.g. the curtain shot) */
.story-photo.soft img { opacity: 0.82; }
@media (prefers-reduced-motion: reduce) {
  .photo img, .story-photo img, .photo:hover img, .story-photo:hover img { transition: none; transform: none; }
}
.story-text { text-align: center; }
.story-text .eyebrow { display: block; }
.story-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 18ch; margin-left: auto; margin-right: auto; }
.story-text p { margin-top: 16px; color: var(--text-muted); font-size: 1.06rem; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* Full-width ambient video banner — a visual moment with no text paired to it */
.story-banner {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  box-shadow: 0 18px 44px -20px rgba(40, 30, 15, 0.35);
}
.story-banner video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A section where the video sits behind the content instead of as a story item —
   soft, translucent, part of the backdrop rather than something that moves in the flow */
.ambient-section { position: relative; overflow: hidden; }
.ambient-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  z-index: 0;
}
.ambient-section .wrap { position: relative; z-index: 1; }
.wrap > .photo-band:first-child { margin-top: 0; }
.ambient-bg.ambient-bg-soft { opacity: 0.4; }

/* Full-bleed photo band between story rows */
.photo-band {
  margin-top: clamp(48px, 8vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(10px, 2vw, 18px);
}
.photo-band .story-photo { aspect-ratio: 3 / 4; border-radius: 18px; }
.photo-band .story-photo:nth-child(2n) { margin-top: clamp(20px, 4vw, 40px); }
@media (max-width: 640px) {
  .photo-band { grid-template-columns: 1fr 1fr; }
  .photo-band .story-photo:nth-child(2n) { margin-top: 0; }
}

/* Reveal-on-scroll: fades and lifts in, once, as each piece enters view */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1.is-visible { transition-delay: 0.12s; }
.reveal.delay-2.is-visible { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Sections ---------- */
section.block { padding: clamp(40px, 6vw, 76px) 0; }
section.block.alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Soft color washes — gentle rainbow drift as you scroll down the page */
.wash-1 { background: var(--wash-1); }
.wash-2 { background: var(--wash-2); }
.wash-3 { background: var(--wash-3); }
.wash-4 { background: var(--wash-4); }
.wash-5 { background: var(--wash-5); }
.wash-6 { background: var(--wash-6); }
section.block h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 22ch; }
section.block .lede { margin-top: 12px; color: var(--text-muted); max-width: 60ch; font-size: 1.05rem; }
section.block > .wrap > h2,
section.block > .wrap > .lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Centered intro for the simple sub-page hero sections (workshops, over ons, contact, 404) */
.hero-center .wrap { text-align: center; max-width: 680px; }
.hero-center h1, .hero-center .lede { margin-left: auto; margin-right: auto; }

.grid-3 {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(40, 30, 15, 0.35); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.card h3 { font-size: 1.15rem; font-weight: 600; }
.card p { margin-top: 10px; color: var(--text-muted); font-size: 0.96rem; }

/* ---------- Workshop card ---------- */
.workshop-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  align-items: center;
}
@media (max-width: 640px) { .workshop-card { grid-template-columns: 1fr; } }
.workshop-card h3 { font-size: 1.3rem; }
.workshop-card .meta { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; }
.workshop-card .btn { margin-top: 16px; }

/* ---------- Agenda (eigen agenda, geen externe ticketdienst) ---------- */
.agenda-list {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agenda-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  text-align: left;
}
.agenda-date {
  width: 90px;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.agenda-info h3 { font-size: 1.1rem; }
.agenda-info h3 a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.agenda-info h3 a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.agenda-info p { margin-top: 4px; color: var(--text-muted); font-size: 0.92rem; }
.agenda-item .btn { white-space: nowrap; }
@media (max-width: 700px) {
  .agenda-item { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* A softly moving hero-video background behind an entire page (used on the
   agenda/workshops page). Sections with their own opaque background (like
   .block.alt) simply paint over it; sections with no background let it
   show through. */
body.has-ambient-bg { background: transparent; }
.page-ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  z-index: 0;
  filter: brightness(1.15) saturate(0.85);
  pointer-events: none;
}
body.page-workshops .page-ambient-bg { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
  .page-ambient-bg { display: none; }
  body.has-ambient-bg { background: var(--bg); }
}

/* Small rotating product photos inside the agenda date badge — replaces a
   plain colour badge with a soft crossfade between a few suncatcher shots,
   with the date shown as a label over the bottom edge. */
.agenda-date {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.agenda-date .agenda-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agenda-date .agenda-date-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(36, 31, 26, 0.72);
  color: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  padding: 3px 0 4px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.note-box {
  margin-top: 40px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.94rem;
  color: var(--text);
  max-width: 68ch;
}
.note-box strong { color: var(--accent-2); }

/* ---------- Contact ---------- */
.contact-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.contact-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.contact-item .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-2); font-weight: 600; }
.contact-item .value { margin-top: 8px; font-size: 1.08rem; }
.contact-item a { color: var(--text); text-decoration-color: var(--accent); }

/* ---------- Event / ticket page ---------- */
.event-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .event-layout { grid-template-columns: 1fr; } }

.event-media {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 44px -20px rgba(40, 30, 15, 0.35);
  margin-bottom: 28px;
}
.event-media img, .event-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.event-copy h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 32px; }
.event-copy h2:first-child { margin-top: 0; }
.event-copy p { margin-top: 12px; color: var(--text-muted); }
.event-copy ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.event-copy ul li {
  padding-left: 26px;
  position: relative;
  color: var(--text-muted);
  margin-top: 10px;
}
.event-copy ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.85em;
}

.ticket-panel {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 22px 50px -28px rgba(40, 30, 15, 0.4);
}
.ticket-panel .badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: "Work Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.ticket-panel h3 { font-size: 1.3rem; }
.ticket-panel .ticket-meta { margin-top: 10px; color: var(--text-muted); font-size: 0.94rem; }
.ticket-panel .ticket-meta div { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.ticket-panel .ticket-meta strong { color: var(--text); font-weight: 600; }

.ticket-options { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.ticket-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ticket-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.ticket-option input { accent-color: var(--accent); width: 17px; height: 17px; }
.ticket-option .opt-label { display: flex; align-items: center; gap: 10px; font-size: 0.96rem; }
.ticket-option .opt-price { font-family: "Work Sans", sans-serif; font-weight: 600; color: var(--text-muted); font-size: 0.88rem; }

.qty-stepper {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.qty-stepper .qty-label { font-size: 0.92rem; color: var(--text-muted); }
.qty-controls { display: flex; align-items: center; gap: 14px; }
.qty-controls button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.qty-controls button:hover { background: var(--accent-soft); transform: scale(1.08); }
.qty-controls span { min-width: 18px; text-align: center; font-weight: 600; }

.ticket-panel .btn { width: 100%; justify-content: center; margin-top: 22px; }
.ticket-panel .fine-print { margin-top: 14px; font-size: 0.82rem; color: var(--text-muted); text-align: center; }

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; }
footer.site a { color: var(--text-muted); }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent-2);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }


/* ---------- Workshop info section (NL/EN detail block) ---------- */
.workshop-info-text { max-width: 68ch; margin: 0 auto; }
.workshop-info-text p { text-align: left; margin-top: 16px; }
.workshop-info-text p:first-child { margin-top: 20px; }
.workshop-details-box { max-width: 68ch; margin: 24px auto 0; }
.workshop-details-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.workshop-details-box li { font-size: 0.96rem; text-align: left; }
.lang-toggle { margin: 28px auto 0; max-width: 68ch; }
.lang-toggle summary { cursor: pointer; font-weight: 600; color: var(--accent-2); }
.lang-toggle summary::marker { color: var(--accent-2); }
.lang-toggle-content { margin-top: 16px; }
.lang-toggle-content p { text-align: left; margin-top: 14px; }
.lang-toggle-content ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.lang-toggle-content li { font-size: 0.96rem; text-align: left; }
.lang-toggle-content h3 { margin-top: 4px; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.story-row-even .story-photo { max-width: 85%; }
.story-row-even .story-photo:first-child { margin-right: auto; }
.story-row-even .story-photo:last-child { margin-left: auto; }
@media (max-width: 820px) {
  .story-row-even .story-photo { max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* ---------- Language link (nav overlay) — plain text, no flags ---------- */
.nav-overlay a.lang-link {
  margin-top: 28px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
}
.nav-overlay a.lang-link:hover { color: var(--accent-2); }

/* ---------- Ticket quantity stepper (workshop detail pages) ---------- */
.ticket-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
}
.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.qty-btn:hover:not(:disabled) { background: var(--accent-soft); }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-value {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: "Work Sans", sans-serif;
}
.qty-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}