/* Luna — huisstijl "Het plakboek"
   Kleuren: zacht botergeel en roze op papierwit. Pruim voor tekst.
   Letters: Fraunces (zacht, cursief) voor koppen, Quicksand voor tekst,
   Patrick Hand voor bijschriften. */

:root{
  --papier:#fffcf5;
  --roze-zacht:#fdecef;
  --roze:#f9d5de;
  --roze-knop:#f4b3c3;
  --geel-zacht:#fff8de;
  --geel:#fbe08a;
  --tekst:#4a3038;      /* pruim, zachter dan zwart */
  --zacht:#7d6168;
  --lijn:#f3dbe1;
  --schaduw:0 10px 26px rgba(160,90,110,.14);
  --kop:"Fraunces",Georgia,serif;
  --font:"Quicksand",system-ui,sans-serif;
  --hand:"Patrick Hand",cursive;
  --max:1180px;

  /* oude namen, zodat bestaande stijlregels blijven werken */
  --inkt:var(--tekst);
  --wit:var(--papier);
  --lila:var(--geel-zacht);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:500;color:var(--tekst);background:var(--papier);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--roze-knop);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
p{max-width:62ch}

h1,h2,h3{font-family:var(--kop);font-style:italic;font-weight:400;line-height:1.05;font-variation-settings:"SOFT" 100,"WONK" 1}
h2{font-size:clamp(2.4rem,5.5vw,3.8rem);margin-bottom:.35em}
h3{font-size:1.6rem;font-weight:500}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,252,245,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--lijn)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--kop);font-style:italic;font-size:2rem;font-variation-settings:"SOFT" 100,"WONK" 1}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:2px;list-style:none}
.nav a{display:block;padding:7px 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{background:var(--roze-zacht)}
.nav a[aria-current="page"]{background:var(--geel)}
.taal{margin-left:8px;font:700 .85rem var(--font);background:var(--geel);color:var(--tekst);border:0;border-radius:999px;padding:7px 13px;cursor:pointer}
.menu-knop{display:none;background:var(--roze-zacht);border:0;border-radius:999px;padding:8px 16px;font:700 .95rem var(--font);color:var(--tekst);cursor:pointer}

/* Maantje: zacht geel met roze schaduw */
.maan{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--geel);box-shadow:inset var(--fase,0px) 0 0 0 var(--roze);flex:none}

/* ---------- Washi-tape strook boven de footer ---------- */
.blad{height:22px;background:repeating-linear-gradient(90deg,var(--roze-knop) 0 60px,var(--geel) 60px 120px)}

/* ---------- Home hero ---------- */
.hero{position:relative;padding:40px 0 10px;overflow:hidden;background:#fff3c4}
.woordmerk{font-family:var(--kop);font-style:italic;font-weight:400;font-size:clamp(7rem,24vw,17rem);line-height:.85;color:var(--tekst);position:relative;z-index:1;font-variation-settings:"SOFT" 100,"WONK" 1}
.hero-foto{position:relative;z-index:2;width:min(400px,68vw);margin:-7vw 4% 0 auto;transform:rotate(4deg)}
.hero-tekst{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:30px 0 56px}
.hero-tekst p{font-size:1.3rem;line-height:1.5}
.knoppen{display:flex;gap:10px;flex-wrap:wrap}
.knop{display:inline-block;padding:13px 26px;border-radius:999px;border:0;font-weight:700;text-decoration:none;background:var(--roze-zacht);color:var(--tekst);font-family:var(--font);font-size:1rem;cursor:pointer}
.knop.vol{background:var(--roze-knop)}
.knop.geel{background:var(--geel)}
.knop:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* ---------- Polaroids met plakband ---------- */
.foto{position:relative;background:#fff;padding:11px 11px 0;border-radius:4px;box-shadow:var(--schaduw)}
.foto::after{content:"";position:absolute;top:-11px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(251,224,138,.85);transform:rotate(-3deg)}
.foto.roze::after{background:rgba(244,179,195,.85);transform:rotate(4deg)}
.foto .beeld{position:relative;aspect-ratio:4/5;background:var(--roze-zacht);overflow:hidden;border-radius:2px}
.foto.liggend .beeld{aspect-ratio:4/3}
.foto .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto .beeld::before{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;left:35%;top:35%;background:var(--geel);box-shadow:inset 12px 0 0 0 var(--roze-zacht)}
.foto.roze .beeld{background:var(--geel-zacht)}
.foto.roze .beeld::before{background:var(--roze-knop);box-shadow:inset 12px 0 0 0 var(--geel-zacht)}
.foto figcaption{font-family:var(--hand);font-size:1.45rem;line-height:1.15;padding:8px 4px 12px;color:var(--tekst)}

/* ---------- Strook met activiteiten ---------- */
.ticker{background:var(--roze);color:var(--tekst);overflow:hidden;white-space:nowrap;padding:12px 0;font-family:var(--hand);font-size:1.5rem;transform:rotate(-1deg);margin:-6px -10px 0;box-shadow:0 4px 12px rgba(160,120,40,.12)}
.ticker-rij{display:inline-flex;gap:26px;align-items:center;animation:schuif 50s linear infinite;padding-left:26px}
.ticker .maan{width:14px;height:14px;background:var(--geel);box-shadow:none}
@keyframes schuif{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-rij{animation:none}}

/* ---------- Secties ---------- */
.blok{padding:96px 0}
.blok.lila{background:var(--geel-zacht)}
.blok.roze{background:var(--roze-zacht)}
.blok.inkt{background:var(--roze)}
.intro{font-size:1.25rem;line-height:1.55}

/* Home: drie routes */
.routes{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:40px}
.route{display:block;text-decoration:none;padding:30px;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(160,90,110,.08)}
.route h3{font-size:1.9rem;margin-bottom:8px}
.route:first-child{grid-row:span 2;background:var(--geel-zacht);display:flex;flex-direction:column;justify-content:space-between;min-height:340px;transform:rotate(-.8deg)}
.route:first-child h3{font-size:clamp(2.3rem,4.6vw,3.3rem)}
.route:nth-child(2){transform:rotate(.6deg)}
.route:hover{background:var(--roze-zacht)}
.route .lees{font-weight:700;text-decoration:underline;text-decoration-color:var(--roze-knop);text-decoration-thickness:3px;text-underline-offset:5px}

/* Fotostrook */
.strook{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px;align-items:start}
.strook .foto:nth-child(1){transform:rotate(-3deg)}
.strook .foto:nth-child(2){transform:rotate(2deg);margin-top:30px}
.strook .foto:nth-child(3){transform:rotate(-1.5deg)}
.strook .foto:nth-child(4){transform:rotate(3deg);margin-top:18px}

.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.duo > .foto{transform:rotate(2deg)}

/* Pagina-kop */
.kop{padding:70px 0 54px;background:#fff3c4}
.kop h1{font-size:clamp(3.6rem,11vw,7.4rem);line-height:.95}
.kop p{font-size:1.25rem;margin-top:16px}
.kop .maan{width:44px;height:44px;margin-bottom:18px}
.kop + main > .blok:first-child{padding-top:70px}

/* Tijdlijn */
.tijdlijn{list-style:none;border-left:3px dotted var(--roze-knop);margin-top:30px}
.tijdlijn li{position:relative;padding:0 0 36px 32px}
.tijdlijn li::before{content:"";position:absolute;left:-12px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 4px #fff}
.tijdlijn b{display:block;font-family:var(--kop);font-style:italic;font-weight:500;font-size:2rem;line-height:1}
.tijdlijn span{display:block;margin-top:6px;max-width:52ch}

/* Genummerde lijst als briefjes */
.regels{list-style:none;counter-reset:r;display:grid;gap:14px}
.regels li{counter-increment:r;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:18px 22px;background:#fff;border-radius:12px;font-size:1.2rem;box-shadow:0 4px 14px rgba(160,90,110,.07)}
.regels li:nth-child(odd){transform:rotate(-.4deg)}
.regels li:nth-child(even){transform:rotate(.4deg)}
.regels li::before{content:counter(r);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--roze);font-family:var(--kop);font-style:italic;font-size:1.5rem}

/* Leden */
.bestuur{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:34px}
.bestuur .foto:nth-child(1){transform:rotate(-2deg)}
.bestuur .foto:nth-child(2){transform:rotate(1.5deg)}
.bestuur .foto:nth-child(3){transform:rotate(-.8deg)}
.bestuur .rol,.foto .rol{display:block;font-family:var(--font);font-size:.9rem;font-weight:700;margin-top:2px;color:var(--zacht)}
.lichting{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:34px 0;border-top:2px dotted var(--roze-knop)}
.lichting:first-of-type{border-top:0}
.lichting h3{font-size:2.6rem}
.leden-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:28px 22px}
.foto.lid{padding:8px 8px 0}
.foto.lid::after{width:60px;height:18px;margin-left:-30px;top:-8px}
.foto.lid figcaption{font-size:1.35rem;padding:6px 2px 10px}
.foto.lid .rol{width:max-content}
.foto.lid:nth-child(3n+1){transform:rotate(-2deg)}
.foto.lid:nth-child(3n+2){transform:rotate(1.5deg)}
.foto.lid:nth-child(3n){transform:rotate(-.6deg)}

/* Activiteiten */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 44px}
.filters button{font:700 .95rem var(--font);padding:9px 18px;border-radius:999px;border:0;background:var(--roze-zacht);color:var(--tekst);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--geel)}
.maanden{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px}
.moment{display:flex;flex-direction:column;gap:12px}
.moment:nth-child(3n+2){margin-top:40px}
.moment .wanneer{display:inline-block;align-self:flex-start;background:var(--roze);padding:2px 12px;border-radius:999px;font-weight:700;font-size:.9rem}
.moment[hidden]{display:none}
.moment:nth-child(odd) .foto{transform:rotate(-1.5deg)}
.moment:nth-child(even) .foto{transform:rotate(1.5deg)}

/* Lid worden */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.stappen li{padding:30px;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(160,90,110,.08)}
.stappen li:nth-child(1){transform:rotate(-1deg)}
.stappen li:nth-child(3){transform:rotate(1deg)}
.stappen b{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--roze);font-family:var(--kop);font-style:italic;font-weight:500;font-size:1.9rem}
.stappen h3{margin:14px 0 6px}
.vragen{margin-top:30px;display:grid;gap:12px}
.vragen details{background:#fff;border-radius:12px;padding:0 22px;box-shadow:0 4px 14px rgba(160,90,110,.07)}
.vragen summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:1.15rem;position:relative}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";position:absolute;right:0;top:12px;width:32px;height:32px;border-radius:50%;background:var(--geel-zacht);text-align:center;line-height:32px;font-size:1.3rem}
.vragen details[open] summary::after{content:"–";background:var(--roze)}
.vragen details p{padding:0 0 22px}

/* Lustrum */
.lustrum-getal{font-family:var(--kop);font-style:italic;font-size:clamp(10rem,36vw,26rem);font-weight:400;line-height:.8;color:#fff;text-shadow:6px 6px 0 var(--geel);font-variation-settings:"SOFT" 100,"WONK" 1}
.aftellen{display:flex;gap:18px;flex-wrap:wrap;margin-top:40px}
.aftellen div{background:#fff;border-radius:14px;padding:18px 24px;min-width:140px;font-family:var(--kop);font-style:italic;font-size:clamp(2.6rem,6vw,4rem);line-height:1;box-shadow:0 6px 18px rgba(160,90,110,.1)}
.aftellen small{display:block;font-family:var(--font);font-style:normal;font-size:1rem;font-weight:700;margin-top:6px;color:var(--zacht)}

/* Contact */
.kanalen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.kanaal{display:block;text-decoration:none;padding:28px;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(160,90,110,.08)}
a.kanaal:hover{background:var(--geel-zacht)}
.kanaal small{display:block;font-weight:700;color:var(--zacht)}
.kanaal b{display:block;font-family:var(--kop);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.6vw,1.8rem);word-break:break-word;margin-top:6px}
form.bericht{display:grid;gap:12px;margin-top:30px;max-width:620px;background:#fff;padding:34px;border-radius:14px;box-shadow:0 6px 18px rgba(160,90,110,.08);background-image:repeating-linear-gradient(180deg,transparent 0 35px,#fdecef 35px 36px)}
form.bericht label{font-weight:700}
form.bericht input,form.bericht textarea{width:100%;font:500 1rem var(--font);padding:13px 15px;border:2px solid var(--lijn);background:#fff;color:var(--tekst);border-radius:10px}
form.bericht input:focus,form.bericht textarea:focus{border-color:var(--roze-knop);outline:0}
form.bericht textarea{min-height:140px;resize:vertical}

/* Placeholder: zichtbaar tot je het invult */
.vul{background:var(--geel);padding:0 6px;border-radius:4px;outline:1px dashed var(--zacht);font-style:normal}

/* Eerdere besturen en oud-leden */
.eerder{margin-top:44px;background:#fff;border-radius:14px;padding:0 24px;box-shadow:0 4px 14px rgba(160,90,110,.07)}
.eerder summary{cursor:pointer;padding:20px 0;font-weight:700;font-size:1.15rem}
.besturen{list-style:none;columns:2;column-gap:40px;padding-bottom:22px}
.besturen li{break-inside:avoid;padding:8px 0;border-top:1px dotted var(--roze-knop)}
.besturen b{display:block;font-family:var(--kop);font-style:italic;font-weight:500}
.oudleden{margin-top:50px}

/* ---------- Footer ---------- */
.voet{background:var(--geel-zacht);padding:60px 0 40px}
.voet .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.voet h3{font-size:3rem}
.voet ul{list-style:none;display:grid;gap:8px}
.voet a{text-decoration:none}
.voet a:hover{text-decoration:underline;text-decoration-color:var(--roze-knop)}
.fasen{display:flex;gap:8px;margin-top:16px}
.klein{font-size:.9rem;color:var(--zacht);margin-top:30px}

/* ---------- Mobiel ---------- */
@media (max-width:900px){
  .menu-knop{display:block}
  .nav{position:absolute;top:70px;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--lijn);flex-direction:column;align-items:stretch;padding:10px 20px 20px;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:1.1rem}
  .taal{align-self:flex-start;margin:10px 0 0}
  .hero-tekst,.duo,.routes,.kanalen,.voet .wrap{grid-template-columns:1fr}
  .route:first-child{grid-row:auto;min-height:220px}
  .strook,.maanden{grid-template-columns:repeat(2,1fr)}
  .moment:nth-child(3n+2){margin-top:0}
  .moment:nth-child(even){margin-top:30px}
  .bestuur{grid-template-columns:1fr 1fr}
  .stappen{grid-template-columns:1fr}
  .lichting{grid-template-columns:1fr;gap:16px}
  .hero-foto{margin-top:-10vw;width:70vw}
  .blok{padding:68px 0}
}
@media (max-width:520px){
  body{font-size:17px}
  .strook,.maanden,.bestuur{grid-template-columns:1fr}
  .moment:nth-child(even){margin-top:0}
  .strook .foto:nth-child(n){margin-top:0}
  .regels li{grid-template-columns:48px 1fr;font-size:1.05rem}
  .besturen{columns:1}
  .leden-grid{grid-template-columns:repeat(2,1fr)}
}

/* Festivalpagina */
.foto.video{transform:rotate(-.8deg);max-width:980px}
.foto.video .beeld{aspect-ratio:16/9;background:var(--roze-zacht)}
.foto.video .beeld::before{display:none}
.foto.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.feiten{list-style:none;margin-top:26px;display:grid;gap:10px}
.feiten li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 18px;background:#fff;border-radius:12px;box-shadow:0 4px 14px rgba(160,90,110,.07)}
.feiten b{font-weight:700}
.lineup b{font-family:var(--font);font-style:normal;font-weight:700;font-size:1rem;color:var(--zacht)}
.lineup span{font-family:var(--kop);font-style:italic;font-size:1.7rem;margin-top:2px}
.lineup li{padding-bottom:22px}
/* Negen menu-items: eerder inklappen */
@media (max-width:1180px){
  .menu-knop{display:block}
  .nav{position:absolute;top:70px;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--lijn);flex-direction:column;align-items:stretch;padding:10px 20px 20px;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:1.1rem}
  .taal{align-self:flex-start;margin:10px 0 0}
}

/* Fotopagina: muur van polaroids */
.fotomuur{columns:4 240px;column-gap:28px}
.foto.boek{break-inside:avoid;margin:0 0 34px;cursor:zoom-in;display:block}
.foto.boek .beeld{aspect-ratio:auto}
.foto.boek .beeld::before{display:none}
.foto.boek .beeld img{position:static;height:auto}
.foto.boek:nth-child(3n+1){transform:rotate(-1.6deg)}
.foto.boek:nth-child(3n+2){transform:rotate(1.2deg)}
.foto.boek:nth-child(3n){transform:rotate(-.5deg)}
.foto.boek:hover,.foto.boek:focus-visible{transform:rotate(0) scale(1.02)}
.lichtbak{border:0;padding:14px 14px 4px;background:#fff;border-radius:6px;max-width:min(92vw,1000px);box-shadow:0 20px 60px rgba(74,48,56,.35)}
.lichtbak::backdrop{background:rgba(74,48,56,.6)}
.lichtbak img{display:block;max-width:100%;max-height:78vh;margin:0 auto}
.lichtbak p{font-family:var(--hand);font-size:1.5rem;text-align:center;padding:8px 0}
.lichtbak .sluit{position:absolute;top:6px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:var(--roze-zacht);font-size:1.6rem;cursor:pointer;color:var(--tekst)}