*,*::before,*::after{box-sizing:border-box}
:root{
  --teal:#074F57;
  --cream:#F7F3EC;
  --white:#fff;
  --ink:#000;
  --content:1080px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Red Hat Display","Red Hat Text",-apple-system,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:20px;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal)}
a:hover{color:#0A6157}

/* Menu */
.menu{position:sticky;top:0;z-index:10;height:64px;background:var(--white);box-shadow:0 4px 4px rgba(0,0,0,.25)}
.menu-in{width:min(var(--content),100% - 48px);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.menu-logo img{width:137px;height:36px;object-fit:contain}
.menu nav{display:flex;gap:64px}
.menu nav a{font-size:16px;line-height:1;color:var(--teal);text-decoration:none}
.menu nav a:hover{text-decoration:underline}

main{display:flex;flex-direction:column;align-items:center;gap:100px}

/* Hero
   The tile clusters keep their real size (36px per tile) and stay pinned to the
   screen edges. Once the screen gets narrower than --collapse, both clusters
   slide outward together so they never run into the logo/title. */
.hero{--s:1;position:relative;width:100%;overflow:hidden;height:calc(var(--h) * var(--s))}
.hero-home{--h:504px;--collapse:1100px;margin-top:76px;margin-bottom:-136px}
.hero-spel{--h:396px;--collapse:1260px;margin-bottom:-244px}
.tiles{position:absolute;top:0;height:calc(var(--h) * var(--s));width:auto;max-width:none}
.tiles-left{left:min(0px, (100% - var(--collapse) * var(--s)) / 2)}
.tiles-right{right:min(0px, (100% - var(--collapse) * var(--s)) / 2)}
.hero-logo{margin:0;position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(640px, 100% - 48px);z-index:1}
.hero-logo img{width:100%}
.page-title{position:absolute;left:0;right:0;top:calc(75px * var(--s));margin:0;text-align:center;font-family:var(--serif);font-weight:400;font-size:calc(64px * var(--s));line-height:1;color:var(--ink);z-index:1}
/* Below 1440px the side clusters move closer to the copy, so the copy starts under the tiles instead of overlapping them */
@media (max-width:1439px){
  .hero-home{margin-bottom:-60px}
  .hero-spel{height:calc(260px * var(--s));margin-bottom:-60px}
}
@media (max-width:700px){
  .hero{--s:.6}
  .hero-home{margin-top:32px}
}

/* Titles & text */
.title{margin:0;width:100%;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;text-align:center;color:inherit}
.title em,.page-title em{font-style:italic}
.title.left{text-align:left}
.text p{margin:0}
.text p+p,.text p+ul,.text ul+p{margin-top:30px}
.text ul{margin:0;padding:0 0 0 30px;list-style:none}
.text li{position:relative}
.text li::before{content:"•";position:absolute;left:-18px}
.text.center{text-align:center}
.text.narrow{max-width:948px}
.text.wide{max-width:1000px}

/* Content block */
.block{position:relative;z-index:1;width:min(var(--content),100% - 48px);display:flex;flex-direction:column;align-items:center;gap:24px}
.block.rules{align-items:flex-start}
.block.rules .text{width:100%}
.intro{position:relative}

/* Full-width teal band */
.band{width:100%;background:var(--teal);color:var(--white);padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:32px}
.band .text,.band .title{max-width:var(--content)}
.cards{width:min(var(--content),100%);display:flex;gap:60px;align-items:flex-start}
.card{flex:1 1 320px;max-width:320px;display:flex;flex-direction:column;gap:12px}
.cards-spel{gap:46px}
.cards-spel .card:nth-child(1){flex-basis:293px;max-width:293px}
.cards-spel .card:nth-child(2){flex-basis:360px;max-width:360px}
.cards-spel .card:nth-child(3){flex-basis:339px;max-width:339px}
.card h3{margin:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.35}
.card p{margin:0;font-size:20px;line-height:1.3}

/* Waarom meedoen */
.waarom{flex-direction:row;align-items:center;gap:60px}
.waarom-photo{flex:none;width:320px;height:420px;object-fit:cover}
.waarom-text{flex:1;max-width:700px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}

/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 24px;border-radius:100px;background:var(--teal);color:var(--white);font-family:var(--display);font-weight:700;font-size:20px;line-height:1.5;text-decoration:none;transition:background .15s}
.btn:hover{background:#0A6157;color:var(--white)}

/* Categories */
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,179px);grid-auto-rows:120px;row-gap:24px;justify-content:center}
.cats li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cats img{width:72px;height:72px}
.cats span{font-size:16px;line-height:1.2;max-width:140px}
.cats li:nth-child(7) span{max-width:203px}

/* Vorige editie */
.vorige-title{left:50%;right:auto;transform:translateX(-50%);top:calc(31px * var(--s));width:min(571px,100% - 48px);font-style:normal;font-size:calc(48px * var(--s))}
.hero-vorige{--collapse:1440px;margin-bottom:-144px}
.winners{gap:48px}
.win-grid{list-style:none;margin:0;padding:0;width:min(var(--content),100%);display:grid;grid-template-columns:repeat(5,200px);justify-content:center;gap:48px 20px}
.win-grid li{display:flex;flex-direction:column;align-items:center;gap:18px}
.win-logo{position:relative;display:block;width:200px;height:54px;overflow:hidden}
.win-logo img{position:absolute;max-width:none}
.win-cat{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;text-align:center;color:var(--white)}
@media (max-width:1100px){.win-grid{grid-template-columns:repeat(auto-fill,200px)}}
@media (max-width:1439px){.hero-vorige{margin-bottom:-60px}}
@media (max-width:700px){.vorige-title{font-size:32px}}

/* Footer */
.foot{margin-top:100px;height:360px;background:var(--white);display:flex;align-items:center;justify-content:center;padding:0 24px}
.foot img{width:640px}

/* Smaller screens */
@media (max-width:1100px){
  .cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:min(var(--content),100%);grid-auto-rows:auto}
  .cards,.cards-spel{flex-direction:column;gap:32px}
  .waarom{align-items:flex-start}
  .waarom-photo{width:260px;height:auto;aspect-ratio:320/420}
  .card,.cards-spel .card:nth-child(n){max-width:none;flex-basis:auto}
}
@media (max-width:800px){
  body{font-size:18px}
  main{gap:64px}
  .menu nav{gap:24px}
  .title{font-size:30px}
  .waarom{flex-direction:column;align-items:flex-start;gap:32px}
  .waarom-photo{width:100%;height:auto;aspect-ratio:320/420;max-height:520px}
  .foot{height:auto;padding:64px 24px;margin-top:64px}
}
@media (max-width:520px){
  .menu-logo img{width:110px}
  .menu nav a{font-size:14px}
  .menu nav{gap:16px}
}