/* Kennisgroei — stijl van de site.

   De pagina is geen reeks volle banden onder elkaar, maar twee kolommen: een
   vaste donkere rail links met het merk, de titel en de harde feiten, en een
   lichte kolom rechts die langs de inhoud scrolt. Wat iemand moet weten om te
   beslissen (wanneer, waar, hoeveel, koop) staat daardoor altijd in beeld,
   ook halverwege een lange tekst.

   Op een smal scherm klapt de rail naar boven en wordt het gewoon één kolom.

   De avond is één lijst: elke spreker is een rij met zijn tijd erin, en de
   inloop, de discussie en de borrel staan als dunne regels tussen die rijen.
   Een apart programmablok naast een aparte sprekerslijst zou dezelfde avond
   twee keer vertellen.

   Kleuren, maten en lettertypen staan als variabelen bovenaan, zodat een
   volgend event alleen deze waarden hoeft aan te passen. */

:root {
  --papier: #f4efe6;
  --papier-diep: #e9e1d3;
  --inkt: #17140f;
  --inkt-zacht: #4a443a;
  --amber: #b8801f;
  --amber-licht: #d9a94f;
  --nacht: #14110c;
  --wit: #ffffff;
  --lijn: rgba(23, 20, 15, 0.16);
  --lijn-licht: rgba(255, 255, 255, 0.18);

  --kop: "Fraunces", Georgia, "Times New Roman", serif;
  --tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --rail: 400px;
  --kantlijn: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ---------- het merk ---------- */

.merk {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--kop);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* Het teken staat groter dan de letters: kleiner dan dit valt het bij de
   woordbeeld weg en blijft er een vlekje over. */
.merk svg { width: 30px; height: 30px; flex: 0 0 auto; }

/* ---------- de rail ---------- */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--nacht);
  color: var(--wit);
  padding: 40px var(--kantlijn);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.rail .merk { color: var(--wit); }

.rail h1 {
  font-size: clamp(38px, 3.4vw, 54px);
  margin-top: auto;
  padding-top: 40px;
}
.rail h1 em { font-style: italic; color: var(--amber-licht); }

.rail .onder {
  color: rgba(255, 255, 255, 0.66);
  margin: 20px 0 0;
  font-size: 16px;
  max-width: 34ch;
}

/* De harde feiten. Twee kolommen, want een label en zijn waarde horen op één
   regel te staan en niet onder elkaar. */
.feiten {
  margin: 30px 0 0;
  border-top: 1px solid var(--lijn-licht);
}
.feiten div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lijn-licht);
  font-size: 15px;
}
.feiten dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-licht);
  padding-top: 3px;
}
.feiten dd { margin: 0; }
.feiten dd span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.rail-voet { margin-top: auto; padding-top: 32px; }
.rail .knop { width: 100%; }
.rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}
.rail-links a { text-decoration: none; }
.rail-links a:hover { color: var(--wit); }

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: var(--nacht);
  border: 0;
  border-radius: 2px;
  padding: 14px 26px;
  font-family: var(--tekst);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.knop:hover { background: var(--amber-licht); }

/* ---------- de inhoudskolom ---------- */

.inhoud { padding: 0 var(--kantlijn); min-width: 0; }
/* De kolom staat midden in de rechterhelft. Links uitgelijnd zou hij tegen de
   rail aan plakken en rechts een leeg veld overlaten. */
.kolom { max-width: 760px; margin: 0 auto; }

/* Elke sectie begint met een genummerde regel over een lijn. Dat nummer is de
   enige versiering op de pagina en zegt tegelijk hoe ver je bent. */
.blokkop {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--lijn);
  padding-top: 18px;
  margin-bottom: 30px;
}
.blokkop .nr {
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.blokkop h2 { font-size: clamp(26px, 2.6vw, 34px); }

section { padding: 62px 0; }
section:first-child { padding-top: 64px; }

.lopend p { margin: 0 0 20px; color: var(--inkt-zacht); }
.lopend p:first-child { font-size: 20px; color: var(--inkt); }
.lopend p:last-child { margin-bottom: 0; }

/* ---------- de avond: één lijst ---------- */

.avond { border-top: 1px solid var(--lijn); }

/* Een spreker. Portret links, tekst rechts, tijd als eerste regel. */
.beurt {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  padding: 28px 0;
  border-bottom: 1px solid var(--lijn);
}
.beurt img {
  width: 150px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.beurt .tijd {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
}
.beurt h3 { font-size: 24px; margin-bottom: 6px; }
.beurt .over { margin: 0 0 10px; font-weight: 600; font-size: 16px; }
.beurt p.bio { margin: 0; font-size: 15.5px; color: var(--inkt-zacht); }

/* Inloop, discussie en borrel: dunne regels tussen de sprekers. */
.regel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  padding: 13px 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 15px;
}
.regel .tijd {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.regel .wat { font-weight: 600; }
.regel .wat span { display: block; font-weight: 400; color: var(--inkt-zacht); }

/* ---------- praktisch ---------- */

.zaal { margin: 0 0 28px; }
.zaal img { width: 100%; aspect-ratio: 32 / 15; object-fit: cover; }
.zaal figcaption { font-size: 13.5px; color: var(--inkt-zacht); margin-top: 9px; }

.praktisch { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.praktisch div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lijn);
}
.praktisch dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  padding-top: 4px;
}
.praktisch dd { margin: 0; font-size: 16px; }
.praktisch dd span { display: block; color: var(--inkt-zacht); font-size: 15px; margin-top: 3px; }
.praktisch a { color: var(--amber); }

/* ---------- tickets ---------- */

/* Dezelfde ondergrond als die in Tickable is ingesteld, zodat het venster van
   de winkel niet als een wit vlak op het papier ligt. */
.ticket-vak { background: var(--papier); border: 1px solid var(--lijn); min-height: 220px; }

/* Geen eigen hoogte op het venster zelf. Het script van Tickable zet de hoogte
   op die van de inhoud; zetten wij daar een minimum overheen, dan houdt het
   venster een eigen schuifbalk. De minimumhoogte hoort op het vak eromheen, dat
   alleen de plek vasthoudt zolang de winkel nog laadt. */
.tickable-shop { width: 100%; border: 0; display: block; }
.naschrift { font-size: 14.5px; color: var(--inkt-zacht); margin: 18px 0 0; }
.vol { margin-bottom: 8px; }

/* ---------- mailinglijst ---------- */

.aanmeldformulier { display: flex; flex-wrap: wrap; gap: 12px; max-width: 540px; }
.aanmeldformulier input {
  flex: 1 1 250px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 2px;
  padding: 13px 16px;
  font-family: var(--tekst);
  font-size: 16px;
  color: var(--inkt);
}
.aanmeldformulier input:focus { outline: 2px solid var(--amber); outline-offset: -2px; }
.melding { font-size: 15px; margin: 14px 0 0; min-height: 1.4em; }
.melding.goed { color: #1f6b3a; }
.melding.fout { color: #a32020; }
.toestemming { font-size: 13.5px; color: var(--inkt-zacht); max-width: 62ch; margin: 14px 0 0; }

/* ---------- voet van de inhoudskolom ---------- */

.voet {
  border-top: 1px solid var(--lijn);
  padding: 26px 0 44px;
  font-size: 14px;
  color: var(--inkt-zacht);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

/* ---------- losse pagina's ---------- */

/* Privacy, voorwaarden en de bedankpagina hebben geen rail nodig: daar valt
   niets te beslissen. Ze staan in één kolom onder een smalle balk. */
body.los { display: block; }
.balk {
  background: var(--nacht);
  color: var(--wit);
  padding: 18px var(--kantlijn);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.balk a { text-decoration: none; }
.balk .terug { font-size: 14.5px; color: rgba(255, 255, 255, 0.66); }
.balk .terug:hover { color: var(--wit); }
.tekstpagina { padding: 56px var(--kantlijn) 80px; }
.tekstpagina .kolom { max-width: 720px; }
.tekstpagina h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.tekstpagina h2 { font-size: 21px; margin: 34px 0 10px; }
.tekstpagina p, .tekstpagina li { color: var(--inkt-zacht); }
.tekstpagina a { color: var(--amber); }
.gewijzigd { font-size: 14px; color: var(--inkt-zacht); margin: 0 0 26px; }
.terug-link { display: inline-block; margin-top: 36px; font-weight: 600; color: var(--amber); }
.label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 12px;
}

/* ---------- smal scherm ---------- */

@media (max-width: 1080px) {
  :root { --kantlijn: 28px; }

  body { display: block; }

  .rail {
    position: static;
    height: auto;
    padding: 26px var(--kantlijn) 34px;
  }
  .rail h1 { margin-top: 26px; padding-top: 0; font-size: clamp(34px, 8vw, 52px); }
  .rail-voet { margin-top: 28px; padding-top: 0; }
  .rail .knop { width: auto; }
  .feiten div { grid-template-columns: 96px 1fr; }

  .beurt { grid-template-columns: 110px 1fr; gap: 18px; }
  .beurt img { width: 110px; }
  .regel, .praktisch div { grid-template-columns: 110px 1fr; gap: 18px; }
  section { padding: 54px 0; }
}

@media (max-width: 560px) {
  .beurt { grid-template-columns: 1fr; }
  .beurt img { width: 160px; }
  .regel, .praktisch div { grid-template-columns: 1fr; gap: 2px; }
}