:root{--choc:#412F26;--blue:#053845;--terra:#D58469;--sand:#EFC4B4;--grey:#7A8C8B;--off:#FFE6D7;--paper:#FFFAF6;--line:#EFC4B4}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:Montserrat,system-ui,sans-serif;background:var(--paper);color:var(--choc);line-height:1.55;font-size:16px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--blue);line-height:1.02;font-weight:700}
em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--terra)}
a{color:inherit}
.lab{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--terra)}
.in{max-width:1220px;margin:0 auto;padding:0 32px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.live{background:var(--terra);color:#FFFAF6;font-weight:700;font-size:.9rem}
.live .in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 32px;flex-wrap:wrap}
.live a{color:#FFFAF6}
.live i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#FFFAF6;margin-right:10px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}

nav.top{background:var(--paper);border-bottom:1.5px solid var(--blue);position:sticky;top:0;z-index:50}
nav.top .in{display:flex;justify-content:space-between;align-items:center;height:74px;gap:20px}
.wm{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--blue);line-height:1.2;text-decoration:none}
.wm i{font-style:normal;color:var(--terra)}
nav.top ul{display:flex;gap:30px;list-style:none;font-size:.86rem;font-weight:600}
nav.top ul a{text-decoration:none}
nav.top .acts{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--terra);color:#FFFAF6;text-decoration:none;font-weight:700;padding:16px 26px;border-radius:3px;font-size:.95rem;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--blue)}
.btn.blue{background:var(--blue);color:var(--off)}.btn.blue:hover{box-shadow:4px 4px 0 var(--terra)}
.btn.line{background:none;border:1.5px solid var(--blue);color:var(--blue)}
.btn.sm{padding:10px 16px;font-size:.85rem}
.arrow::after{content:"→";font-weight:400}

.hh .in{padding-top:70px}
.hh h1{font-size:clamp(3rem,7.6vw,7rem);letter-spacing:-.035em;line-height:.93}
.hh h1 em{display:block}
.hh .row{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:36px;padding-bottom:46px}
.hh .row p{max-width:600px;font-size:1.1rem}
.hh .row .ctas{display:flex;gap:12px;flex-wrap:wrap}
.wide{height:560px;background-size:cover;background-position:50% 38%;position:relative}
.wide .badge{position:absolute;right:6%;bottom:-54px;width:160px;height:160px;border-radius:50%;background:var(--terra);color:#FFFAF6;display:grid;place-items:center;text-align:center;font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;padding:18px;transform:rotate(-10deg);box-shadow:0 14px 30px rgba(65,47,38,.25)}
.wide .badge b{display:block;font-family:'Playfair Display',serif;font-size:1.7rem;letter-spacing:0;text-transform:none}

section.s{padding:110px 0}
section.s.off{background:var(--off)}
section.s.dark{background:var(--blue);color:var(--off)}
section.s.dark h2,section.s.dark h3{color:var(--off)}
section.s.dark .lab{color:var(--sand)}
.h2{font-size:clamp(2.3rem,4.6vw,3.8rem);margin-top:14px;letter-spacing:-.02em}
.sub{margin-top:14px;max-width:660px;font-size:1.05rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.txt p{margin-top:16px;font-size:1.05rem}
.big{font-family:'Playfair Display',serif;font-size:1.55rem;line-height:1.35;color:var(--blue)}
.frame{position:relative;z-index:0}
.frame img{width:100%;display:block;border-radius:3px;object-fit:cover}
.frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--terra);border-radius:3px;z-index:-1}

.obs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.obs div{border-top:2px solid var(--blue);padding-top:18px}
.obs b{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--terra);display:block;line-height:1}
.obs p{font-family:'Playfair Display',serif;font-size:1.2rem;line-height:1.35;color:var(--blue);margin-top:12px}

.state h2{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1;max-width:1050px;letter-spacing:-.02em}
.state .qs{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.state .qs span{border:1.5px solid var(--sand);color:var(--sand);padding:12px 18px;font-family:'Playfair Display',serif;font-style:italic;font-size:1.2rem;border-radius:3px}
.state p.after{max-width:640px;margin-top:40px;font-size:1.1rem}

.rules{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;background:var(--blue);color:var(--off)}
.rules div{padding:30px 24px;border-right:1.5px solid rgba(255,230,215,.2)}
.rules div:last-child{border-right:0}
.rules b{font-family:'Playfair Display',serif;font-size:3rem;color:var(--terra);line-height:1}
.rules h3{font-size:1.35rem;margin:14px 0 10px;color:var(--off)}
.rules p{font-size:.92rem}
.rules .x{display:inline-block;margin-top:12px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}

/* voorbeeldmissies: omdraaikaarten */
.flips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.flip{perspective:1200px;height:360px;cursor:pointer;background:none;border:0;padding:0;font:inherit;text-align:left}
.flip:nth-child(odd){transform:rotate(-1.3deg)}.flip:nth-child(even){transform:rotate(1.1deg) translateY(14px)}
.flip .c{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.flip.on .c{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;padding:24px;display:flex;flex-direction:column;border:2px solid var(--blue);border-radius:4px}
.flip .f{background:var(--paper);box-shadow:6px 6px 0 var(--terra)}
.flip .b{background:var(--blue);color:var(--off);transform:rotateY(180deg);box-shadow:6px 6px 0 var(--terra)}
.flip .p{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--grey)}
.flip h3{font-size:1.6rem;margin:12px 0 12px}
.flip .f p{font-size:.92rem}
.flip .turn{margin-top:auto;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.flip .b .lab{color:var(--sand)}
.flip .b p{font-family:'Playfair Display',serif;font-size:1.3rem;line-height:1.35;margin-top:14px}
.flip .b .when{margin-top:auto;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}

.rep{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.rep div{background:var(--paper);border:2px solid var(--blue);padding:22px}
.rep b{font-family:'Playfair Display',serif;font-size:3rem;color:var(--blue);display:block;line-height:1}
.rep span{font-size:.82rem;font-weight:600}
.rep-note{font-size:.82rem;color:var(--grey);margin-top:14px}

.road{margin-top:52px;display:flex;flex-direction:column}
.road>div{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:24px 0;border-top:1.5px solid var(--blue);align-items:baseline}
.road>div:last-child{border-bottom:1.5px solid var(--blue)}
.road .w{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terra)}
.road h3{font-size:1.6rem}
.road p{margin-top:6px;max-width:700px}
.road>div.now h3{color:var(--terra)}

.join{background:var(--blue);color:var(--off);padding:110px 0}
.join .in{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.join h2{color:var(--off)}
.join .lab{color:var(--sand)}
.join ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.join li{padding-left:28px;position:relative}
.join li::before{content:"✓";position:absolute;left:0;color:var(--terra);font-weight:800}
.card{background:var(--paper);color:var(--choc);padding:34px;border-radius:3px;box-shadow:10px 10px 0 var(--terra)}
.card h3{font-size:1.8rem}
.card p{margin-top:12px}
.card .btn{margin-top:22px}

footer.f{padding:64px 0 44px;font-size:.88rem;border-top:1.5px solid var(--blue)}
footer.f .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer.f h3{font-size:1.5rem}
footer.f p{margin-top:10px}
.giant{font-family:'Playfair Display',serif;font-weight:800;color:var(--blue);font-size:clamp(2.2rem,7.4vw,7rem);line-height:.9;letter-spacing:-.04em;white-space:nowrap;padding:40px 0 0}
.giant em{font-weight:600}

@media (max-width:960px){
  nav.top ul{display:none}
  .split,.join .in,footer.f .cols{grid-template-columns:1fr}
  .obs,.rules,.rep,.flips{grid-template-columns:1fr 1fr}
  .rules div{border-right:0;border-bottom:1.5px solid rgba(255,230,215,.2)}
  section.s,.join{padding:72px 0}
  .split{gap:44px}
  .hh .row{grid-template-columns:1fr}
  .wide{height:360px}
  .road>div{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){
  .in{padding:0 20px}.live .in{padding:10px 20px}
  .obs,.rules,.flips{grid-template-columns:1fr}
  .flip{height:320px}
  .frame::before{inset:12px -10px -12px 12px}.wm{font-size:.66rem}
  .giant{white-space:normal}
  nav.top .acts .btn.line{display:none}
  nav.top .acts .btn{padding:10px 12px;font-size:.78rem}
  .wide .badge{width:120px;height:120px;bottom:-40px}
}
.playstrip{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--blue);color:var(--off);text-decoration:none;padding:16px 22px;margin:0 0 46px;border-radius:3px;transition:transform .15s,box-shadow .15s}
.playstrip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--terra)}
.playstrip b{color:var(--off)}
.playstrip span:last-child{font-weight:800;color:var(--terra);letter-spacing:.04em}
.hh .row{padding-bottom:28px}
.theme{margin-top:34px;max-width:820px;border-left:3px solid var(--terra);padding:4px 0 4px 20px}
.theme p{margin-top:10px}
.cform{display:grid;gap:14px}
.cform label{display:block;font-size:.84rem;font-weight:600;color:var(--choc)}
.cform label i{font-style:normal;font-weight:400;color:var(--grey)}
.cform .field{display:block;width:100%;margin-top:5px;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:3px;background:#FFFAF6;font:inherit;color:inherit}
.cform textarea.field{min-height:84px;resize:vertical}
.cform .field:focus{outline:none;border-color:var(--blue)}
.cform .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform .btn{justify-content:center;margin-top:4px}
.cform .error{color:#412F26;font-weight:600;font-size:.9rem}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.muted{color:var(--grey)}.small{font-size:.85rem}
@media (max-width:560px){.cform .r2{grid-template-columns:1fr}.cform{padding:24px}}
.txt p.big{font-size:1.55rem}
.hh h1 em.h1sub{font-size:.62em;line-height:1.05;margin-top:10px;max-width:15em}
nav.top .acts{align-items:center}
nav.top .login{font-size:.86rem;font-weight:700;color:var(--blue);text-decoration:none;margin-right:6px}
@media (max-width:560px){nav.top .login{font-size:.78rem;margin-right:2px}}
.hq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:40px}
.hq blockquote{border-left:3px solid var(--terra);padding:4px 0 4px 20px;font-family:'Playfair Display',serif;font-style:italic;font-size:1.45rem;line-height:1.35;color:var(--off)}
.hq cite{display:block;margin-top:12px;font-family:Montserrat,sans-serif;font-style:normal;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--sand)}
section[hidden]{display:none}