/* KLUP — de website.
   Eén achtergrond: oranje. Eén inkt: geel. Verder niets — geen zwarte balken,
   geen witte kaarten, geen gele vlakken. Wat een rand nodig heeft krijgt een
   dunne gele lijn, en wat eruit moet springen draait de twee om: geel vlak met
   oranje letters. Dat is de hele huisstijl, en daar blijft het bij. */
@font-face{font-family:'Krapka';src:url(/assets/krapka.woff2) format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Public Sans';src:url(/assets/public-sans.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap}

:root{
  --orange:#FF723D; --yellow:#FFFA69;
  /* De inkt nog een keer, los in cijfers. Zo kan een dunne lijn of een gedempte
     zin uit dezelfde kleur worden gemaakt, en verandert alles mee als iemand
     een ander duo kiest. */
  --inkt:255,250,105;
  --zacht:rgba(var(--inkt),.88);   /* de inkt, iets gedempt: voor bijzinnen */
  --lijn:rgba(var(--inkt),.45);    /* de inkt, dun: voor randen en scheidingen */
  --pijl:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFFA69' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --r:16px;
  --font:'Public Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:'Krapka','Public Sans',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* De oude site leest ruim: negentien punten met veel wit tussen de regels, en
   een lege regel tussen alinea's. Dat is het meeste van het gevoel. */
body{margin:0;background:var(--orange);color:var(--yellow);font-family:var(--font);
  font-size:19px;line-height:1.75;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Alles staat in één kolom die zelf midden op het scherm staat. Zo hoeft er
   niets per blok gecentreerd te worden en lopen de kop, de tekst en wat
   eronder staat over dezelfde linkerlijn. */
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
/* Een smalle kolom binnen die kolom: voor een stuk waar een brede regel te
   ver zou uitlopen. */
.smal > *{max-width:820px;margin-left:auto;margin-right:auto}

/* ------------------------------------------------------------------ menu */
/* Acht gele woorden op het oranje, ruim uit elkaar. De pagina waar je bent
   krijgt een streepje eronder; verder geen randjes en geen vlakken. */
.top{position:sticky;top:0;z-index:20;background:var(--orange)}
/* De rij mag afbreken. Op een telefoon gaat het menu onder het logo staan, en
   dat kan alleen als deze rij een tweede regel mag beginnen; zonder dat wordt
   de balk breder dan het scherm en schuift de hele pagina opzij. */
.topin{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding:26px 40px;max-width:1240px;margin:0 auto}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.merk img{width:46px;height:46px}
/* Het sterretje is één vlak in één kleur. Als plaatje zou het de kleur van het
   plaatje houden; als masker neemt het de inkt over, welk duo er ook aan staat. */
.merk .teken{width:40px;height:40px;background:var(--yellow);
  -webkit-mask:url(/assets/logo-yellow.png) center/contain no-repeat;
          mask:url(/assets/logo-yellow.png) center/contain no-repeat}
.menu{margin-left:auto;display:flex;gap:30px;flex-wrap:wrap;align-items:center}
.menu a{text-decoration:none;font-weight:400;font-size:17px;color:var(--yellow);
  white-space:nowrap;padding:2px 0;border-bottom:1.5px solid transparent}
.menu a:hover{border-bottom-color:var(--yellow)}
.menu a.nu{border-bottom-color:var(--yellow)}
.menuknop{margin-left:auto;display:none;background:transparent;color:var(--yellow);
  border:1.5px solid var(--yellow);border-radius:999px;padding:8px 16px;font:inherit;
  font-size:15px;cursor:pointer}
@media(max-width:1120px){
  .topin{gap:14px;padding:18px 40px}
  .menuknop{display:block}
  .menu{display:none;order:3;flex:1 0 100%;flex-direction:column;align-items:flex-start;
    gap:2px;margin:14px 0 4px}
  .menu.open{display:flex}
  .menu a{padding:9px 0;font-size:17px}
}

/* Het vinkje van Cloudflare, vlak boven de verzendknop. Meestal staat er niets
   in — dan neemt het ook geen ruimte in. */
.vinkjevak{margin:0 0 14px}
.vinkjevak:empty{display:none}
.brief .vinkjevak{flex:1 0 100%;margin:0}

/* ------------------------------------------------------------- pick your vibe */
/* Het logo staat in tien kleurduo's — steeds een vlak en een inkt, en van
   elk duo ook de omgekeerde. Oranje met geel blijft waar de site mee opent;
   de rest mag je zelf pakken. De keuze blijft in deze browser staan en gaat
   nergens anders heen. */
.vibe{position:relative;flex:0 0 auto}
.vibeknop{display:flex;align-items:center;gap:9px;background:transparent;
  color:var(--yellow);border:1.5px solid var(--lijn);border-radius:999px;
  padding:6px 15px 6px 8px;font:inherit;font-size:15px;cursor:pointer;white-space:nowrap}
.vibeknop:hover{border-color:var(--yellow)}
/* Een rondje dat schuin doormidden is: de ene helft het vlak, de andere de
   inkt. Zo zie je aan de knop welk duo er aanstaat. */
.vibestip{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--yellow);
  background:linear-gradient(135deg,var(--yellow) 0 50%,var(--orange) 50% 100%)}
.vibevak{position:absolute;right:0;top:calc(100% + 12px);z-index:30;
  background:var(--orange);border:1.5px solid var(--yellow);border-radius:var(--r);
  padding:18px;display:none}
.vibevak.open{display:block}
.vibetitel{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--zacht);margin:0 0 14px;text-align:center}
/* De tien staan in een kring, en elk duo staat tegenover zijn omgekeerde: geel
   op oranje recht tegenover oranje op geel. Zo is in één oogopslag te zien dat
   het er vijf zijn, twee kanten op. */
.vibegrid{position:relative;width:224px;height:224px;margin:0 auto}
.vibemidden{position:absolute;left:50%;top:50%;width:30px;height:30px;
  margin:-15px 0 0 -15px;background:var(--lijn);
  -webkit-mask:url(/assets/logo-yellow.png) center/contain no-repeat;
          mask:url(/assets/logo-yellow.png) center/contain no-repeat}
.vibekeus{position:absolute;left:50%;top:50%;margin:-23px 0 0 -23px;
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--lijn);
  padding:0;cursor:pointer;display:grid;place-items:center}
.vibekeus:hover{border-color:var(--yellow)}
.vibekeus[aria-pressed="true"]{border-color:var(--yellow);
  box-shadow:0 0 0 2px var(--orange),0 0 0 3.5px var(--yellow)}
.vibekeus i{display:block;width:27px;height:27px;
  -webkit-mask:url(/assets/logo-yellow.png) center/contain no-repeat;
          mask:url(/assets/logo-yellow.png) center/contain no-repeat}
@media(max-width:1120px){
  .vibe{margin-left:auto;order:2}
  .menuknop{margin-left:0}
}
@media(max-width:560px){
  .vibeknop span:not(.vibestip){display:none}
  .vibeknop{width:40px;height:40px;padding:0;justify-content:center;
    border-color:var(--yellow)}
  .vibestip{width:20px;height:20px}
  .vibevak{padding:16px}
}

/* --------------------------------------------------------------- koppen */
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.5vw,76px);
  line-height:1.02;margin:0 0 34px;color:var(--yellow);letter-spacing:.01em}
/* Een tussenkopje is een vette regel boven zijn eigen alinea en verder niets:
   geen andere letter, geen grotere maat, geen witregel ertussen. */
h2,h3{font-family:var(--font);font-weight:800;font-size:1em;line-height:1.75;
  margin:0;color:var(--yellow)}
p{margin:0 0 1.55em}
.lead{font-size:1em;line-height:1.75;max-width:none;margin:0 0 1.55em}
a{text-decoration:underline;text-underline-offset:3px}
.menu a,.btn,.onder a,.evblok,.ev{text-decoration:none}
.sec{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 12px}
/* Alles staat op hetzelfde oranje, dus er is geen kleurwissel die de secties
   uit elkaar houdt. Daarom minder lucht per sectie: twee die op elkaar volgen
   gaven anders een gat van ruim honderd punten. */
section.band{padding:30px 0}
main > section.band:first-child{padding-top:30px}
main > section.band:last-child{padding-bottom:70px}

/* ------------------------------------------------------------------ loper
   De naam van de pagina loopt als een lint over de volle breedte voorbij, zoals
   op de oude site. Wie liever geen beweging ziet krijgt hem stil: dat is geen
   uitzondering die we erbij verzinnen maar een voorkeur die de browser
   doorgeeft. */
.loper{overflow:hidden;width:100%;padding:26px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lopertrein{display:flex;width:max-content;animation:lopen 30s linear infinite}
.lopertrein span{font-family:var(--display);font-weight:400;color:var(--yellow);
  font-size:clamp(44px,10.5vw,124px);line-height:1.06;letter-spacing:.01em;
  text-transform:uppercase;white-space:nowrap;padding-right:.5em}
@keyframes lopen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.lopertrein{animation:none}}

/* ------------------------------------------------------------------ vakken
   Een "kaart" is hier niet meer dan een dunne gele lijn om een stuk tekst. */
.kaart{border:0;padding:0}
.kaart.midden{margin-left:auto;margin-right:auto}
.kaart.omlijnd{border:1.5px solid var(--lijn);border-radius:var(--r);padding:26px}
.rij{display:grid;gap:34px 90px}
.rij.twee{grid-template-columns:1fr 1fr}
.rij.drie{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.rij.twee,.rij.drie{grid-template-columns:1fr}}

/* Een knop draait de kleuren om: geel vlak, oranje letters. */
.btn{display:inline-block;font:inherit;font-weight:800;font-size:16px;padding:12px 26px;
  border-radius:999px;border:2px solid var(--yellow);background:var(--yellow);
  color:var(--orange);cursor:pointer;text-decoration:none}
.btn:hover{opacity:.86}
.btn-ghost{background:transparent;color:var(--yellow)}
.btn-ghost:hover{background:var(--yellow);color:var(--orange);opacity:1}

.bijschrift{font-size:15px;color:var(--zacht);margin:14px 0 0;line-height:1.6}

/* De waarden staan als vier stukken tekst in twee kolommen, en de rechter
   kolom lijnt aan de rechterkant uit. Geen kopjes erboven: de tekst is het
   kopje. Ze lezen van boven naar beneden per kolom, niet van links naar
   rechts per regel. */
.waarden{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  grid-auto-flow:column;gap:60px 110px;margin-top:20px}
.waarden p{font-size:clamp(22px,2.4vw,34px);line-height:1.3;margin:0}
.waarden p:nth-child(n+3){text-align:right}
@media(max-width:820px){
  .waarden{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;gap:40px}
  .waarden p:nth-child(n+3){text-align:left}
}

/* --------------------------------------------------- twee koppen naast elkaar
   Op de voorpagina zijn "Work it" en "Host it" geen kaartjes met een knop maar
   twee namen naast elkaar waar je op kunt drukken, zoals op de oude site. */
.tweekoppen{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:center}
.tweekoppen h1{margin:0}
.tweekoppen a{text-decoration:none}
.tweekoppen a:hover{text-decoration:underline;text-underline-offset:6px}
@media(max-width:760px){.tweekoppen{grid-template-columns:1fr;gap:30px}}

/* ------------------------------------------------------------------- voet */
.voet{padding:48px 0 36px;border-top:1px solid var(--lijn);margin-top:50px}
.voetrij{display:grid;grid-template-columns:1.7fr 1fr .8fr 1fr;gap:26px}
@media(max-width:760px){.voetrij{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.voetrij{grid-template-columns:1fr}}
.voet h4{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 10px;color:var(--zacht)}
.voet p{font-size:16px;margin:0 0 6px}
.brief{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.brief input{flex:1 1 130px;font:inherit;font-size:15px;padding:11px 13px;
  border:1.5px solid var(--yellow);border-radius:11px;background:transparent;color:var(--yellow);
  min-width:0}
.brief input::placeholder{color:rgba(var(--inkt),.55)}
.brief button{font:inherit;font-weight:800;padding:11px 20px;border-radius:999px;
  border:2px solid var(--yellow);background:var(--yellow);color:var(--orange);cursor:pointer}
.briefmelding{font-size:14px;margin:10px 0 0;min-height:1.2em}
.onder{margin-top:34px;padding-top:18px;border-top:1px solid var(--lijn);
  font-size:13px;color:var(--zacht);display:flex;gap:14px;flex-wrap:wrap}
.onder a{text-decoration:none}

/* ------------------------------------------------------------------ skip */
.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:12px;z-index:50;background:var(--yellow);color:var(--orange);
  padding:10px 16px;border-radius:999px;font-weight:800}

/* ---------------------------------------------------------------- events
   Dezelfde opbouw als de eventpagina zelf: per maand een kopje, en per event
   een brede regel met de foto, de datum, waar het over gaat en of je je moet
   aanmelden of gewoon kunt binnenlopen. Alleen in de kleuren van de site. */
.maandkop{margin:34px 0 12px;font-size:12.5px}
.maandkop:first-child{margin-top:0}
.evlijst{display:grid;gap:14px}
.ev{border:1.5px solid var(--lijn);border-radius:var(--r);padding:18px 20px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  text-decoration:none;color:var(--yellow)}
.ev:hover{border-color:var(--yellow)}
.evfoto{flex:0 0 92px;width:92px;height:92px;object-fit:cover;border-radius:12px;
  border:1.5px solid var(--lijn)}
@media(max-width:560px){.evfoto{flex:0 0 62px;width:62px;height:62px}}
.evdatum{flex:0 0 76px;text-align:center;border:1.5px solid var(--lijn);border-radius:12px;
  padding:8px 4px}
.evdatum .d{font-family:var(--display);font-size:27px;line-height:1;display:block}
.evdatum .m{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.evkern{flex:1 1 300px;min-width:0;display:block}
.evtitel{display:block;font-family:var(--display);font-weight:400;font-size:24px;
  line-height:1.15;margin-bottom:6px}
.evwanneer{display:block;font-size:14px;font-weight:700}
.evuitleg{display:block;font-size:14.5px;line-height:1.55;color:var(--zacht);margin-top:6px}
.evpijl{flex:0 0 auto;align-self:center;font-size:20px}
.pillen{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pil{display:inline-block;border:1.5px solid var(--lijn);border-radius:999px;
  padding:4px 12px;font-size:11.5px;font-weight:800;letter-spacing:.03em}
.pil-vrij{background:var(--yellow);border-color:var(--yellow);color:var(--orange)}
.pil-vol{border-color:var(--yellow);opacity:.6}

/* De vier op de voorpagina: kop met de datum erachter, een zin, "View event". */
.evblokken{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:1000px){.evblokken{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.evblokken{grid-template-columns:1fr}}
.evblok{display:block;text-decoration:none;color:var(--yellow)}
.evblok h2{font-size:clamp(20px,1.7vw,25px);margin:0 0 10px}
.evblok p{font-size:15px;line-height:1.5;margin:0 0 12px}
.evblok .meer{font-size:15px;text-decoration:underline;text-underline-offset:3px}
.evblok:hover h2{text-decoration:underline;text-underline-offset:4px}

/* Knoppen naast elkaar horen op één lijn te staan en links te beginnen. */
.knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}

/* --------------------------------------------------------------- vragen */
.vragen{list-style:none;counter-reset:v;padding:0;margin:0}
.vragen li{counter-increment:v;display:grid;grid-template-columns:52px 1fr 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--lijn)}
.vragen li:first-child{border-top:0;padding-top:0}
.vragen li::before{content:counter(v);font-family:var(--display);font-size:26px;line-height:1}
/* De kolommen staan vast: het nummer links, de vraag ernaast, het antwoord
   rechts. Zonder dat zou een tweede alinea van hetzelfde antwoord op een nieuwe
   regel in de nummerkolom belanden, en dat is een kolom van vijftig punten. */
.vragen h3{grid-column:2;font-family:var(--display);font-weight:400;font-size:23px;
  line-height:1.15;margin:0}
.vragen p{grid-column:3;font-size:15px;line-height:1.6;color:var(--zacht);margin:0 0 10px}
.vragen p ~ p{grid-row:auto}
.vragen p:last-child{margin-bottom:0}
@media(max-width:760px){
  .vragen li{grid-template-columns:34px 1fr;gap:14px}
  .vragen li::before{font-size:20px}
  .vragen h3{grid-column:2}
  .vragen p{grid-column:2}
}

/* -------------------------------------------------------------- formulier */
.veld{margin-bottom:16px}
label.lbl{display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--zacht);margin:0 0 6px}
.lbl .nodig{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.invul{width:100%;font:inherit;font-size:17px;padding:12px 14px;
  border:1.5px solid var(--yellow);border-radius:11px;background:transparent;color:var(--yellow)}
.invul::placeholder{color:rgba(var(--inkt),.55)}
textarea.invul{resize:vertical}
.invul:focus{outline:2px solid var(--yellow);outline-offset:1px}
/* Het keuzelijstje tekent de browser zelf in zijn eigen kleuren; met een eigen
   pijltje blijft ook dat de inkt op het vlak. Een tekeningetje in een adres kan
   geen kleur uit een variabele lezen, dus staat het hele tekeningetje zélf in
   een variabele: kiest iemand een ander duo, dan wordt die opnieuw gezet. */
select.invul{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:var(--pijl);
  background-repeat:no-repeat;background-position:right 15px center}
select.invul option{background:var(--orange);color:var(--yellow)}
.vinkje{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.vinkje input{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:2px 0 0;
  border:1.5px solid var(--yellow);border-radius:5px;background:transparent;flex:0 0 auto;
  cursor:pointer}
.vinkje input:checked{background:var(--yellow)}
.vinkje input:checked::after{content:'';display:block;width:4.5px;height:9px;margin:1px auto 0;
  border:solid var(--orange);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.vinkje input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.melding{font-size:14px;margin:12px 0 0;min-height:1.2em;font-weight:700}
.melding.fout{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------- vormen
   De beelden van KLUP zijn uit een vorm geknipt en hebben doorzichtige randen.
   Die horen zonder kader op het oranje te staan; een lijstje eromheen maakt de
   vorm juist weer kapot. */
.vorm{display:block;max-width:100%;height:auto;margin:0 auto}
/* Het grote sterretje op de voorpagina. Het plaatje is één kleur met gaten
   erin — de woorden zijn de gaten, en daar schijnt het vlak doorheen. Als
   masker doet het dus precies hetzelfde als eerst, maar dan in de kleuren die
   op dat moment aanstaan. */
.held{display:block;width:100%;max-width:980px;aspect-ratio:1/1;margin:0 auto;
  background:var(--yellow);
  -webkit-mask:url(/assets/site/home-logo-masker.png) center/contain no-repeat;
          mask:url(/assets/site/home-logo-masker.png) center/contain no-repeat}
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Wat geweest is staat onder de agenda, iets stiller: het is om terug te
   kijken, niet om nog iets mee te doen. */
.voorbijkop{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);
  line-height:1.05;margin:20px 0 22px}
.ev-voorbij{opacity:.82}
.ev-voorbij:hover{opacity:1}