/* Homepage — 1807.
   Tot 12 november heeft deze pagina één taak: kaarten verkopen. Het ontwerp en
   Wat hieronder nagemeten is en niet zomaar te verschuiven, staat als
   commentaar bij de regel zelf.

   Gedeelde onderdelen (.wrap, .smal, .duo, .knop, .label) staan in base.css,
   de kopbalk en de footer in layout.css. */

section { padding-block: clamp(48px, 7vw, 84px); }
section + section { border-top: 1px solid var(--lijn); }

/* ===== Hero =====
   De schildering is licht bovenin (de lucht) en donker onderin (de heide),
   dus hij kan onderaan vanzelf in --grond overgaan zonder harde rand. Het
   verloop hieronder is op 100% precies --grond. */
.hero { position: relative; isolation: isolate; }
.hero__beeld {
  width: 100%;
  height: clamp(300px, 42vw, 560px);
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}
/* De schildering is 2,76:1 en het beeldvlak wordt op een telefoon bijna
   vierkant, dus er blijft nog een derde van de breedte over. Op het midden
   uitgesneden valt de man aan de rechterkant weg en houd je leeg landschap;
   naar rechts opgeschoven komt hij net het beeld in lopen. */
@media (max-width: 760px) {
  .hero__beeld { object-position: 70% 46%; }
}

/* Crème letters op een lichtroze lucht haalden de norm eerst niet: 2,65 voor
   "1807" en 2,22 voor "de Straovers", waar 3,0 het minimum is voor grote tekst.
   Daar hing lang een radiale schaduw over de linkerbovenhoek voor, samen met de
   text-shadow hieronder.

   Die schaduw is eruit: hij legde een waas over het mooiste stuk lucht van de
   schildering. Nagemeten of dat mocht — de letter tegen wat er direct omheen
   ligt, inclusief de text-shadow, wat je oog ook ziet:

                              1807   de Straovers
     met de radiale schaduw   5,39       4,35
     zonder (nu)              4,37       3,82
     eis                      3,00       3,00

   De text-shadow draagt het dus alleen. Maak je die zwakker, meet dan opnieuw —
   dan is er niets anders meer dat het opvangt. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--grond-rgb), 0.22) 0%,
    rgba(var(--grond-rgb), 0) 26%,
    rgba(var(--grond-rgb), 0.14) 46%,
    rgba(var(--grond-rgb), 0.74) 78%,
    rgba(var(--grond-rgb), 0.96) 94%,
    var(--grond) 100%);
}

.hero__tekst {
  position: absolute; z-index: 2;
  left: 0; right: 0;
  top: clamp(22px, 5vw, 52px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 20px;
}
.hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(70px, 15vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--creme);
  margin: 0;
  text-shadow: 0 0 32px rgba(var(--grond-rgb), 0.55),
               0 2px 10px rgba(var(--grond-rgb), 0.5),
               0 1px 2px rgba(var(--grond-rgb), 0.45);
}
.hero__band {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(23px, 4.4vw, 42px);
  line-height: 1;
  margin: 6px 0 0;
  color: var(--creme);
  text-shadow: 0 0 22px rgba(var(--grond-rgb), 0.7),
               0 2px 8px rgba(var(--grond-rgb), 0.6),
               0 1px 2px rgba(var(--grond-rgb), 0.5);
}

/* De datumregel staat ín het beeld en niet als balk eronder — daar zou hij
   op een tweede menu gaan lijken. Linksonder, op dezelfde linkerlijn als
   "1807". Niet rechtsonder: daar staat de man in de schildering. */
.hero__info {
  position: absolute; z-index: 2;
  left: 0; right: 0;
  bottom: clamp(16px, 2.6vw, 30px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 20px;
}
/* Het label op zijn eigen regel en de gegevens eronder, op élke breedte. Naast
   elkaar met scheidingspunten ging het op een brede pagina toch weer op een
   tweede menu lijken, en daar was de regel juist voor uit een losse balk onder
   de hero gehaald. Zo staat het er als een
   aankondiging. */
.regel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: clamp(14px, 1.45vw, 17px);
  color: var(--creme-2);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 14px rgba(var(--grond-rgb), 0.9),
               0 1px 2px rgba(var(--grond-rgb), 0.8);
}
.regel__wat {
  flex: 0 0 100%;
  color: var(--goud);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.82em;
}
.regel strong { color: var(--creme); font-weight: 600; }

/* ===== Het kaartblok =====
   Het enige lichte vlak op de hele pagina, en dat is de truc: het is de enige
   plek waar je oog moet landen, en de letterlijke echo van het gedrukte
   kaartje. Voeg geen tweede licht vlak toe — dan is dit niets bijzonders meer. */
.kaart {
  background: var(--creme);
  color: var(--fg-on-light-2);
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25),
              0 26px 60px -30px rgba(0, 0, 0, 0.9);
  padding: clamp(24px, 3.6vw, 38px);
  max-width: 660px;
  margin-inline: auto;
  position: relative;
}
.kaart .label { color: var(--fg-on-light-accent); }
.kaart__datum {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg-on-light-1);
}
.kaart__tijden { margin: 10px 0 0; font-size: 17px; color: var(--fg-on-light-2); }
.kaart__zaal {
  margin: 4px 0 0;
  font-size: 17px;
  color: var(--fg-on-light-1);
  font-weight: 600;
}

/* De perforatie waar het kaartje afgescheurd wordt. */
.kaart__perforatie {
  height: 1px;
  margin: 26px -6px;
  background: repeating-linear-gradient(to right, #B6A184 0 7px, transparent 7px 15px);
}

/* Op top uitlijnen en niet op baseline: de prijs is twee keer zo groot, dus op
   baseline hing de tekst ernaast optisch te laag. Alleen omschakelen is niet
   genoeg — de prijs heeft line-height 1 en de tekst 1,6, waardoor de tekst er
   loze ruimte bovenop kreeg. Vandaar 1,5 met 2px marge: de bovenste inktpixel
   van "€" en die van "met koffie" liggen nu op dezelfde regel. */
.kaart__prijsrij { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: start; }
.kaart__prijs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: var(--fg-on-light-1);
  font-variant-numeric: lining-nums;
}
.kaart__inbegrepen {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 2px;
  color: var(--fg-on-light-2);
  flex: 1 1 260px;
  min-width: 0;
}

/* De knop staat rechts: je oog eindigt de prijsregel daar, bij "beluisteren",
   en de knop staat er direct onder op de rechterkant van diezelfde tekstkolom.
   Zo loopt er een diagonaal door het blok — label linksboven, datum groot,
   prijs links, knop rechtsonder. */
.kaart__knoprij { display: flex; justify-content: flex-end; margin-top: 24px; }
/* Deze blijft donker en wordt niet goud zoals de andere twee. De regel is niet
   "de knoppen zijn goud" maar "de knop is het tegendeel van zijn ondergrond":
   op donker het lichte goud, op dit crème vlak het donker. Goud op crème zou
   maar 2,27 van het kaartblok verschillen en de omtrek van een knop heeft 3,0
   nodig — hij zou oplossen in het kaartje. */
.kaart .knop { background: var(--fg-on-light-1); color: var(--creme); }
.kaart .knop:hover { background: #000; }
.kaart__fijn { margin: 12px 0 0; font-size: 14.5px; color: var(--fg-on-light-3); text-align: right; }

@media (max-width: 620px) {
  /* Rechts uitlijnen werkt niet op een telefoon. */
  .kaart__knoprij .knop { flex: 1 1 auto; text-align: center; }
  .kaart__fijn { text-align: center; }
}

/* ===== Het verhaal ===== */
.citaat {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.22;
  color: var(--creme);
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}
.citaat__tweede { color: var(--goud); display: block; }
.citaat__bron { margin-top: 7px; font-size: 15px; color: var(--creme-3); }

/* ===== De muziek ===== */
.kop { max-width: 56ch; margin: 0 0 clamp(24px, 3vw, 36px); }
.kop h2 { margin: 6px 0 0; }
.kop__inleiding { margin: 14px 0 0; }

.trailer {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--lijn);
}
.trailer__beeld {
  width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  object-position: 50% 50%;
  /* De schildering was licht; deze still uit de trailer is zelf al donker en
     sepia, dus 0,55 maakte er modder van. Nagemeten: het bijschrift haalt
     zelfs ongedimd 5,6, dus deze dimming is vormgeving en geen noodzaak. */
  filter: brightness(0.72) saturate(0.9);
  transition: filter 0.3s ease, transform 0.5s ease;
}
.trailer:hover .trailer__beeld { filter: brightness(0.85) saturate(1); transform: scale(1.015); }
.trailer__mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.trailer__speel {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--creme);
  display: grid; place-items: center;
  background: rgba(var(--grond-rgb), 0.35);
}
.trailer__speel svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--creme); }
.trailer__bij {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme);
  font-weight: 600;
}

/* ===== Het boekje =====
   De video over het boekje is een Short, dus staand. Hetzelfde kader en
   dezelfde speelknop als de trailer, maar smaller: op volle kolombreedte
   wordt 9:16 een toren naast een tekst die maar half zo hoog is. De knop
   staat onderin, op de tafel, zodat hij niet over het boekje zelf valt. */
.boekjevideo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  justify-self: center;
  text-decoration: none;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--lijn);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.9);
}
.boekjevideo__beeld {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.95);
  transition: filter 0.3s ease, transform 0.5s ease;
}
.boekjevideo:hover .boekjevideo__beeld { filter: brightness(0.95) saturate(1); transform: scale(1.015); }
.boekjevideo__mid {
  justify-content: flex-end;
  padding-bottom: 6%;
  background: linear-gradient(to top, rgba(var(--grond-rgb), 0.55), transparent 40%);
}

.meekrijgt { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.meekrijgt li { position: relative; padding-left: 22px; color: var(--creme-2); }
.meekrijgt li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 9px; height: 1.5px;
  background: var(--goud);
}
.meekrijgt strong { color: var(--creme); font-weight: 600; }
.na-lijst { margin-top: 18px; }

/* ===== De band ===== */
.band__intro { margin-bottom: 30px; }
.bandfoto { border-radius: 3px; border: 1px solid var(--lijn); }
.leden {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.leden li { border-top: 1px solid var(--lijn); padding-top: 9px; }
.leden__naam { display: block; color: var(--creme); font-weight: 600; }
.leden__inst { font-size: 15px; color: var(--creme-3); }

/* ===== Terug naar de homepage, op /1807/bevestigd =====
   Eén regel heeft de volle sectiehoogte niet nodig. */
.verder { padding-block: clamp(28px, 4vw, 44px); }
.terug { border-bottom: 1px solid var(--lijn); }
.terug:hover { color: var(--creme); border-bottom-color: var(--goud); }

/* ===== Nieuwsbrief =====
   Het enige andere vlak op de pagina, maar donker: het kaartblok blijft het
   enige lichte. */
.brief {
  background: var(--grond-2);
  border: 1px solid var(--lijn);
  border-radius: 3px;
  padding: clamp(24px, 3.6vw, 40px);
}
.brief__veld { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
/* Rails wikkelt een veld met een fout in een div; zonder dit wordt die div
   het flex-item in plaats van het invoerveld en klapt het formulier scheef. */
.brief__veld .field_with_errors { display: contents; }
.brief__veld input {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  background: var(--grond);
  color: var(--creme);
  border: 1px solid var(--border-field);
  border-radius: 2px;
  padding: 12px 14px;
}
.brief__veld input::placeholder { color: var(--creme-3); }
/* Goud, net als de knop in de balk: allebei staan ze op donker, en crème is
   voorbehouden aan het kaartblok. Los van het paneel eronder 6,79, met het
   label erop 7,30. */
.brief__veld button {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: var(--goud);
  color: var(--grond);
  border: 0;
  border-radius: 2px;
  padding: 12px 24px;
}
.brief__veld button:hover { background: #D9AE66; }
.brief__fijn { margin: 12px 0 0; font-size: 14.5px; color: var(--creme-3); }
.brief__klaar { margin: 18px 0 0; color: var(--creme); }