/* ============================================================
   Future of Fashion '27 — site styles
   Transcribed from the Claude Design prototype
   "Future of Fashion.dc.html". Tokens live in tokens.css.
   ============================================================ */

/* ----------------------------------------------------------
   GLOBALS  (from the prototype's <helmet> block)
   ---------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { background: var(--charcoal); overflow-x: hidden; }

a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--cream); }
::selection { background: var(--lime); color: var(--ink); }

input::placeholder { color: var(--warm-400); }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* The `hidden` attribute must win over any author `display` further down this
   file. Without this, rules like `.form { display: flex }` silently override the
   UA's `[hidden] { display: none }` and the element stays on screen. */
[hidden] { display: none !important; }

@keyframes barUp {
  from { transform: translateY(140%); }
  to   { transform: translateY(0); }
}

.page { min-height: 100vh; background: var(--charcoal); }
/* NOTE: the prototype put `overflow-x: hidden` on this wrapper too. Keeping it
   here would make .page a scroll container, which becomes the sticky nav's
   scrollport and stops `position: sticky` from ever engaging. The body-level
   rule above propagates to the viewport and clips the same overflow safely. */

/* Shared type helpers ------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eyebrow--lime  { color: var(--lime); }
.eyebrow--muted { color: var(--warm-400); }
.eyebrow--onlight { color: var(--warm-500); }

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
}

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

/* ============================================================
   BUTTON — ported from the design system's Button.jsx
   (components/Button/Button.jsx, namespace COLLBDesignSystem_481896)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--d-ui) var(--ease), transform var(--d-fast) var(--ease);
}
.btn:hover { filter: brightness(0.94); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }

.btn__label { padding: 0 4px; }

.btn__chip {
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn__chip svg { display: block; }

/* — sizes — */
.btn--sm { height: 40px; font-size: 13px; padding-left: 14px; padding-right: 4px; gap: 8px; }
.btn--sm .btn__chip { width: 26px; height: 26px; }
.btn--sm .btn__chip svg { width: 12px; height: 12px; }

.btn--md { height: 48px; font-size: 15px; padding-left: 18px; padding-right: 4px; gap: 10px; }
.btn--md .btn__chip { width: 32px; height: 32px; }
.btn--md .btn__chip svg { width: 14px; height: 14px; }

.btn--lg { height: 56px; font-size: 17px; padding-left: 22px; padding-right: 4px; gap: 12px; }
.btn--lg .btn__chip { width: 38px; height: 38px; }
.btn--lg .btn__chip svg { width: 16px; height: 16px; }

/* — skins — */
.btn--lime { background: #DEF81E; color: #080807; }
.btn--lime .btn__chip { background: #080807; color: #DEF81E; }

.btn--ink { background: #080807; color: #ECEAE1; }
.btn--ink .btn__chip { background: #DEF81E; color: #080807; }

.btn--ghost { background: transparent; color: #ECEAE1; border: 1px solid rgba(236,234,225,0.28); }
.btn--ghost .btn__chip { background: #ECEAE1; color: #080807; }

.btn--block { width: 100%; justify-content: space-between; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(26,24,22,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: transform var(--d-ui) var(--ease-out);
}
/* Scroll je naar beneden, dan schuift de nav weg en neemt de balk onderaan
   het over. Scroll je omhoog, dan gebeurt het omgekeerde. Zo staan er nooit
   twee balken tegelijk in beeld. */
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.nav__brand:hover { color: var(--cream); }
.nav__dot {
  width: 11px; height: 11px;
  border-radius: var(--r-full);
  background: var(--lime);
  display: inline-block;
  flex: 0 0 auto;
}
.nav__wordmark {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--cream);
  white-space: nowrap;
}
.nav__year {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--warm-400);
  letter-spacing: .06em;
}
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-300);
  transition: color var(--d-fast) var(--ease);
}
.nav__link:hover { color: var(--lime); }

/* ============================================================
   LAYOUT
   ============================================================ */
.main { max-width: 1200px; margin: 0 auto; padding: 0 24px 24px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  margin-top: 24px;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: flex-end;
}
.hero__image {
  position: absolute;
  inset: 0;
  background: #2a2a2a url('../assets/campaign-model.jpg') center 10% / cover no-repeat;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(26,24,22,0.97) 0%,
    rgba(26,24,22,0.90) 40%,
    rgba(26,24,22,0.82) 62%,
    rgba(26,24,22,0.72) 76%,
    rgba(26,24,22,0.30) 90%,
    rgba(26,24,22,0.45) 100%);
}
.hero__content { position: relative; padding: 56px; width: 100%; }
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 14ch;
}
.hero__lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream);
  max-width: 56ch;
  margin: 26px 0 30px;
}
.hero__actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.hero__textlink {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--d-fast) var(--ease);
}
.hero__textlink:hover { color: var(--lime); }
.hero__textlink span { font-family: var(--font-mono); }
.hero__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--warm-400);
  text-transform: uppercase;
}

/* ============================================================
   VOOR WIE
   ============================================================ */
.audience {
  margin-top: 24px;
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  padding: 44px 48px;
}
.audience__label { margin-bottom: 20px; }
.audience__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 48ch;
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
}
.audience__item { border-top: 1px solid var(--line-light); padding-top: 14px; }
.audience__key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--warm-500);
  letter-spacing: .04em;
}
.audience__value {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.3;
}
.audience__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  margin: 36px 0 0;
  max-width: 34ch;
}

/* ============================================================
   VENUE
   ============================================================ */
.venue {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
}
.venue__image {
  border-radius: 24px;
  overflow: hidden;
  min-height: 480px;
  background: #2a2a2a url('../assets/capital-c.webp') center center / cover no-repeat;
}
.venue__panel {
  background: var(--panel);
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.venue__label { margin-bottom: 18px; }
.venue__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.venue__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--warm-300);
  margin: 22px 0 0;
  max-width: 42ch;
}
.venue__address {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--warm-400);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}

/* ============================================================
   OVER / THESE
   ============================================================ */
.thesis {
  margin: 24px auto 0;
  padding: 80px 8px 64px;
  max-width: 960px;
}
.thesis__label { margin-bottom: 28px; }
.thesis__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 20ch;
}
.thesis__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 44px;
}
.thesis__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--warm-300);
}
.thesis__pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--lime);
  margin: 24px 0 0;
}

/* ============================================================
   THEMA'S
   ============================================================ */
.themes {
  margin-top: 24px;
  background: var(--cream);
  border-radius: 24px;
  padding: 56px 48px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.themes .section-head { margin-bottom: 40px; }
.section-head__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.section-head__title--onlight { color: var(--ink); }
.section-head__title--ondark { color: var(--cream); }

.themes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.theme {
  background: var(--charcoal);
  border-radius: 28px;
  padding: 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.theme__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime);
  letter-spacing: .04em;
}
.theme__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: auto 0 14px;
}
.theme__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--warm-300);
}

/* ============================================================
   SPREKERS
   ============================================================ */
.speakers { margin-top: 64px; }
.speakers .section-head { margin-bottom: 32px; }
.speakers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.speaker {
  background: var(--panel);
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--d-ui) var(--ease-out);
}
.speaker:hover { transform: translateY(-6px); }
.speaker__media { aspect-ratio: 4 / 5; overflow: hidden; background: #2a2a2a; }
.speaker__photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1);
  transition: filter var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.speaker:hover .speaker__photo { filter: grayscale(0); transform: scale(1.04); }

.speaker__photo--jeroen { background-image: url('../assets/jeroen.jpeg');          background-position: 58% 24%; }
.speaker__photo--rens   { background-image: url('../assets/rens-van-geel.jpeg');   background-position: center 14%; }
/* Jan en Arno staan nu niet in de line-up, maar hun regels en foto's blijven
   staan zodat terugzetten een kwestie is van de kaart terugplaatsen. */
.speaker__photo--jan    { background-image: url('../assets/jan-baan.avif');        background-position: 32% 30%; }
.speaker__photo--paul   { background-image: url('../assets/paul-vantilburg.png');  background-position: center 16%; }
/* Bijna vierkant (445x449), dus in het 4:5 frame wordt alleen links en rechts
   bijgesneden. Iets links van het midden houdt zijn gezicht gecentreerd. */
.speaker__photo--arno   { background-image: url('../assets/arno-van-tilborg.jpeg'); background-position: 46% center; }

/* Bevestigde spreker zonder portret. Bewust de gewone kaartstijl, niet de
   gestippelde 'volgt'-variant: de persoon staat vast, alleen de foto niet. */
.speaker__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #201e1c 0%, #161616 100%);
  filter: none;
}
.speaker:hover .speaker__photo--initials { filter: none; transform: none; }
.speaker__photo--initials span {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: var(--warm-500);
}

.speaker__body { padding: 22px; }
.speaker__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lime);
}
.speaker__name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 21px;
  color: var(--cream);
  margin: 8px 0 4px;
}
.speaker__org {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--warm-400);
  margin: 0 0 10px;
}
.speaker__bio {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--warm-300);
}

/* — "volgt" placeholder cards — */
.speaker--tbd {
  background: transparent;
  border: 1px dashed var(--line-dark);
  display: flex;
  flex-direction: column;
}
.speaker--tbd:hover { transform: none; }
.speaker--tbd .speaker__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed var(--line-dark);
  background: transparent;
}
.speaker__tbd-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--warm-500);
}
.speaker--tbd .speaker__role { color: var(--warm-400); }
.speaker--tbd .speaker__name { color: var(--warm-300); }
.speaker--tbd .speaker__bio  { color: var(--warm-400); }

/* ============================================================
   PROGRAMMA
   ============================================================ */
.programme {
  margin-top: 64px;
  background: var(--cream);
  border-radius: 24px;
  padding: 56px 48px;
}
.programme .section-head { margin-bottom: 8px; }
.programme__list { display: flex; flex-direction: column; }
.programme__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line-light);
}
.programme__row:last-child { border-bottom: 1px solid var(--line-light); }
.programme__time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--warm-500);
}
.programme__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 4px;
}
.programme__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--warm-500);
}

/* ============================================================
   TICKETS
   ============================================================ */
.tickets {
  margin-top: 24px;
  background: var(--lime);
  border-radius: 28px;
  padding: 56px 48px;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.tickets__label { color: var(--ink); }
.tickets__price-row { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 8px; }
.tickets__price {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tickets__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink);
}
.tickets__lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 38ch;
  opacity: .75;
}
.tickets__perks { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.tickets__perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
}
.tickets__check {
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: 0 0 auto;
}
.tickets__panel {
  background: var(--ink);
  border-radius: 24px;
  padding: 36px;
  color: var(--cream);
}
.tickets__panel-label { color: var(--warm-400); margin-bottom: 20px; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.countdown__cell {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 16px 6px;
}
.countdown__num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--warm-400);
  margin-top: 8px;
}
.tickets__fine {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--warm-400);
  margin: 16px 0 0;
  text-align: center;
}

/* ============================================================
   PRAKTISCH
   ============================================================ */
.practical {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.practical__card {
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  padding: 32px;
}
.practical__label { margin-bottom: 14px; }
.practical__value {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.practical__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--warm-400);
  margin-top: 8px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  margin: 64px auto 0;
  max-width: 840px;
}
.faq__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 28px;
  line-height: var(--lh-head);
}
.faq__item { border-top: 1px solid var(--line-dark); padding: 20px 0; }
.faq__item:last-of-type { border-bottom: 1px solid var(--line-dark); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 19px;
  color: var(--cream);
  transition: color var(--d-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--lime); }
.faq__sign {
  font-family: var(--font-mono);
  color: var(--lime);
  flex: 0 0 auto;
  transition: transform var(--d-ui) var(--ease-out);
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--warm-300);
  margin: 14px 0 0;
  max-width: 64ch;
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners {
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 32px 0;
}
.partners__label { margin-bottom: 26px; }

/* Zeven partners passen niet meer naast het label, dus het label staat er nu
   boven en de rij eronder verdeelt zich over de volle breedte. */
.partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.partners__item {
  display: flex;
  align-items: center;
  min-height: 34px;
}

/* Tekstuele wordmark, zolang er nog geen logobestand is. */
.partners__name {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--warm-300);
  transition: color var(--d-ui) var(--ease);
}
.partners__item:hover .partners__name { color: var(--cream); }

/* Echt logo. Vaste hoogte, breedte volgt, zodat logo's met heel
   verschillende verhoudingen toch een rustige rij vormen. */
.partners__logo {
  height: 30px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7);
  opacity: .72;
  transition: filter var(--d-ui) var(--ease), opacity var(--d-ui) var(--ease);
}
.partners__item:hover .partners__logo { filter: none; opacity: 1; }

/* ============================================================
   RESERVEREN
   ============================================================ */
.reserve {
  margin-top: 64px;
  background: var(--cream);
  border-radius: 28px;
  padding: 56px 48px;
  color: var(--ink);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.reserve__intro { display: flex; flex-direction: column; justify-content: space-between; }
.reserve__label { margin-bottom: 20px; }
.reserve__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.reserve__lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--warm-500);
  margin: 20px 0 0;
  max-width: 38ch;
}
.reserve__stamp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 32px;
}

.form { display: flex; flex-direction: column; gap: 18px; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-500);
}
.form__label-hint { text-transform: none; letter-spacing: 0; color: var(--warm-400); }
.form__input {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: 14px 16px;
  outline: none;
  width: 100%;
  transition: border-color var(--d-fast) var(--ease);
}
.form__input:focus { border-color: var(--ink); }

/* Eigen pijl, want de systeempijl past niet bij de rest. */
.form__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A5753' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.form__select:invalid { color: var(--warm-400); }
.form__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Honeypot: uit beeld gehaald zonder display:none, want sommige
   bots slaan onzichtbare velden juist over. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding-top: 4px;
}
.form__checkbox {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.form__consent-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--warm-500);
}
.form__consent-note { color: var(--warm-400); }

.form__error {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: #b23c17;
}
.form__submit-row { margin-top: 6px; }
.form__fine {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--warm-400);
  margin: 4px 0 0;
}

.reserve__success {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--charcoal);
  border-radius: 24px;
  padding: 40px;
}
.reserve__success-check {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.reserve__success-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 22px 0 12px;
}
.reserve__success-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--warm-300);
  max-width: 42ch;
}
.reserve__success-email { color: var(--lime); word-break: break-word; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { max-width: 1200px; margin: 0 auto; padding: 80px 24px 40px; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--warm-400);
  margin-bottom: 6px;
}
.footer__link,
.footer__line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--cream);
}
.footer__link { transition: color var(--d-fast) var(--ease); }
.footer__link:hover { color: var(--lime); }
.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--cream);
  text-align: right;
}
.footer__mega { margin: 56px 0 24px; }
.footer__mega-type {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.footer__mega-type .serif-accent { color: var(--lime); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--warm-400);
}

/* ============================================================
   STICKY RESERVE BAR
   ============================================================ */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  pointer-events: none;
  animation: barUp 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stickybar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(22,22,22,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-full);
  padding: 10px 10px 10px 24px;
  box-shadow: 0 12px 32px -10px rgba(8,8,7,0.55);
}
/* De balk is een pill, dus de knop erin hoort dat ook te zijn. Dit is geen
   smaak maar rekenwerk: de container is 68px hoog (48 knop + 2x10 padding),
   dus radius 34. Een element dat 10px van die rand ligt wil 34-10 = 24, en
   dat is precies de pill-radius van een knop van 48px. Zelfde verhaal voor de
   chip: 8px van de knoprand, wil 24-8 = 16, en dat is de pill van 32px.
   Buiten deze balk houden knoppen gewoon de 8px uit het design system. */
.stickybar .btn,
.stickybar .btn__chip { border-radius: var(--r-full); }

.stickybar__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--cream);
  white-space: nowrap;
}
.stickybar__meta {
  color: var(--warm-400);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Gated on .js-reveal, which the inline head script sets and removes again if
   site.js never reports in. Content can therefore never stay invisible because
   a script failed to load. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 680ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   The prototype is desktop-only (no media queries, fixed column
   counts). These breakpoints are an addition — the collapse order
   preserves the design's reading order at every width.
   ============================================================ */

/* — Tablet / small laptop — */
@media (max-width: 1024px) {
  .audience__grid  { grid-template-columns: repeat(2, 1fr); }
  .themes__grid    { grid-template-columns: repeat(2, 1fr); }
  .speakers__grid  { grid-template-columns: repeat(2, 1fr); }
  .venue           { grid-template-columns: 1fr; }
  .venue__image    { min-height: 340px; }
  .tickets         { grid-template-columns: 1fr; gap: 40px; }
  .reserve         { grid-template-columns: 1fr; gap: 40px; }
  .thesis          { padding: 56px 0 48px; }
  .footer__tagline { text-align: left; }
}

/* — Nav links don't fit alongside brand + CTA — */
@media (max-width: 880px) {
  .nav__links { display: none; }
}

/* — Mobile — */
@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }

  .main   { padding: 0 16px 16px; }
  .footer { padding: 64px 16px 32px; }

  .nav__inner { padding: 12px 16px; }

  .hero { min-height: 560px; border-radius: 20px; }
  .hero__content { padding: 28px 24px 32px; }
  .hero__lede { font-size: 17px; margin: 20px 0 26px; }
  .hero__actions { gap: 16px; }
  .hero__note { flex-basis: 100%; }

  .audience  { padding: 32px 24px; border-radius: 20px; }
  .themes    { padding: 40px 24px; border-radius: 20px; }
  .programme { padding: 40px 24px; border-radius: 20px; }
  .tickets   { padding: 36px 24px; border-radius: 20px; }
  .reserve   { padding: 40px 24px; border-radius: 20px; }
  .venue__panel { padding: 32px 24px; }

  .audience__grid  { grid-template-columns: 1fr; gap: 20px; }
  .themes__grid    { grid-template-columns: 1fr; }
  .speakers__grid  { grid-template-columns: 1fr; }
  .practical       { grid-template-columns: 1fr; }
  .thesis__cols    { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .form__pair      { grid-template-columns: 1fr; }

  .theme { min-height: 0; padding: 28px 24px; }
  .theme__title { margin-top: 28px; }

  .programme__row { grid-template-columns: 1fr; gap: 6px; }

  .tickets__panel { padding: 28px 20px; }
  .countdown { gap: 6px; }
  .countdown__cell { padding: 14px 4px; }
  .countdown__num { font-size: 28px; }

  .speakers, .programme, .faq, .partners, .reserve { margin-top: 48px; }

  .practical__card { padding: 28px 24px; }
  .practical__value { font-size: 24px; }

  .partners__list { gap: 20px 32px; }
  .partners__name { font-size: 19px; }
  .partners__logo { height: 26px; max-width: 130px; }

  .footer__cols { gap: 40px; }
  .footer__mega { margin: 40px 0 20px; }

  /* Sticky bar: stack the CTA under the label on narrow screens */
  .stickybar { padding: 0 12px 12px; }
  .stickybar__inner { gap: 12px; padding: 8px 8px 8px 18px; width: 100%; justify-content: space-between; }
  .stickybar__text { font-size: 14px; }
}

@media (max-width: 420px) {
  .stickybar__meta { display: none; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .stickybar { animation: none; }
  .speaker, .speaker__photo, .btn, .faq__sign, .nav { transition: none; }
  .speaker:hover { transform: none; }
  .speaker:hover .speaker__photo { transform: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .nav, .stickybar, .hero__actions { display: none; }
  body, .page { background: #fff; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}