@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo.woff2) format('woff2')}

:root{
  /* primitives */
  --white:oklch(0.985 0 0);
  --ink-900:#141414;
  --ink-600:oklch(0.42 0 0);
  --ink-300:oklch(0.86 0 0);
  --vermillion:#FF4F1F;
  --board:#141414;
  --board-line:#2e2e2e;
  --board-dim:#a3a3a3;
  /* semantic */
  --bg:var(--white);--fg:var(--ink-900);--mute:var(--ink-600);--rule:var(--ink-300);--acc:var(--vermillion);
  /* type */
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  /* space */
  --pad:clamp(20px,4vw,48px);--gut:clamp(16px,2vw,24px);
  --ease:cubic-bezier(.16,1,.3,1);
  /* z */
  --z-dock:20;--z-top:30;--z-skip:40;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--display);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:var(--z-skip);background:var(--fg);color:var(--bg);padding:10px 16px}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3{font-family:var(--display);text-wrap:balance}
h2{font-stretch:125%;font-weight:800;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.015em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.btn--acc{background:var(--acc);color:var(--ink-900)}
.btn--acc:hover{background:var(--ink-900);color:var(--white)}
.btn--ink{background:var(--ink-900);color:var(--white)}
.btn--ink:hover{background:var(--acc);color:var(--ink-900)}
.btn--line{border-color:var(--fg);color:var(--fg)}
.btn--line:hover{background:var(--fg);color:var(--bg)}
.btn--wide{width:100%}

/* header */
.top{position:sticky;top:0;z-index:var(--z-top);background:var(--bg);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;gap:32px;height:72px}
.logo img{height:28px;width:auto}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s var(--ease)}
.nav a:hover{background-size:100% 1.5px}
nav{margin-left:auto}
.top__end{display:flex;align-items:center;gap:16px}
.lang{display:flex;border:1px solid var(--rule)}
.lang button{border:0;background:none;padding:8px 10px;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;color:var(--mute)}
.lang button[aria-pressed=true]{background:var(--fg);color:var(--bg)}

/* hero */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(72px,10vw,136px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.hero__title{grid-column:1/10;grid-row:1;position:relative;z-index:1;font-stretch:125%;font-weight:850;font-size:clamp(2.9rem,6.2vw,6rem);line-height:.97;letter-spacing:-.02em;max-width:10.4ch}
.board{grid-column:7/13;grid-row:1/3;align-self:start;margin-right:calc(var(--pad) * -1);margin-top:clamp(4px,.9vw,14px);background:var(--board);color:#f3f3f3;padding:20px 0 10px}
.hero__copy{grid-column:1/6;grid-row:2;padding-top:clamp(28px,3vw,40px)}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--mute);max-width:44ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.board__head{display:flex;justify-content:space-between;gap:16px;padding:0 24px 14px;font-stretch:112%;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--board-dim)}
.board__clock{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.board__tag{color:var(--board-dim)}
.board__rows{counter-reset:none}
.slot{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.1fr) 132px;gap:14px;align-items:center;padding:15px 24px;border-top:1px solid var(--board-line);font-stretch:112%;font-size:15px;font-variant-numeric:tabular-nums}
.slot__t{font-weight:700;color:#fff}
.slot__role{font-weight:600}
.slot__where{color:#cfcfcf}
.state{justify-self:stretch;display:flex;align-items:center;justify-content:center;gap:7px;height:30px;font-size:12px;font-weight:700;letter-spacing:.09em;border:1px solid #6a6a6a;color:#d0d0d0;transform-origin:50% 50%;backface-visibility:hidden}
.state svg{width:15px;height:13px;fill:currentColor}
.state--gedekt{background:var(--acc);border-color:var(--acc);color:var(--ink-900)}
.state--zoekt{border-color:#e6e6e6;color:#fff}
.state--zoekt::after{content:'';width:5px;height:5px;background:currentColor;animation:blink 1s steps(2) infinite}
.state.flip{animation:flip .36s var(--ease)}
.slot.enter{animation:enter .5s var(--ease) both}
.slot.leave{animation:leave .45s var(--ease) both}
.board__legend{padding:12px 24px 6px;font-size:12px;color:var(--board-dim)}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}55%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes leave{to{opacity:0;transform:translateY(-12px)}}
@keyframes blink{50%{opacity:0}}

/* roles */
.roles{padding:clamp(88px,12vw,168px) 0;border-top:1px solid var(--rule)}
.roles__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.roles__head{grid-column:1/5;align-self:start;position:sticky;top:120px}
.roles__note{margin-top:24px;color:var(--mute);max-width:32ch}
.roles__list{grid-column:6/13;border-bottom:1px solid var(--rule)}
.role{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:22px;align-items:center;padding:30px 0;border-top:1px solid var(--rule)}
.role h3{font-stretch:118%;font-weight:800;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.01em}
.role p{color:var(--mute);margin-top:6px}
.role__tick{width:44px;height:37px;fill:var(--acc);clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
.role__book{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid var(--fg);opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease) .35s,transform .4s var(--ease) .35s,background-color .2s,color .2s}
.role__book:hover{background:var(--fg);color:var(--bg)}
.role.is-on .role__tick{clip-path:inset(0 0 0 0)}
.role.is-on .role__book{opacity:1;transform:none}

/* how */
.how{padding:clamp(80px,10vw,144px) 0;background:var(--ink-900);color:var(--white)}
.how__title{max-width:16ch}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:clamp(48px,6vw,80px);padding-top:56px}
.rail::before{content:'';position:absolute;left:0;right:0;top:21px;border-top:2px dashed #5b5b5b}
.rail::after{content:'';position:absolute;left:0;right:0;top:21px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.rail.is-on::after{transform:scaleX(1)}
.stop{position:relative}
.stop__n{position:absolute;top:-56px;left:0;display:grid;place-items:center;width:44px;height:44px;background:var(--ink-900);border:2px solid #5b5b5b;font-stretch:112%;font-weight:800;font-size:16px;transition:border-color .3s,background-color .3s,color .3s}
.stop__n--tick svg{width:22px;height:18px;fill:currentColor}
.rail.is-on .stop__n{border-color:var(--acc)}
.rail.is-on .stop:nth-child(1) .stop__n{transition-delay:.1s}
.rail.is-on .stop:nth-child(2) .stop__n{transition-delay:.45s}
.rail.is-on .stop:nth-child(3) .stop__n{transition-delay:.8s}
.rail.is-on .stop:nth-child(4) .stop__n{transition-delay:1.15s;background:var(--acc);border-color:var(--acc);color:var(--ink-900)}
.stop h3{font-stretch:112%;font-weight:700;font-size:21px;line-height:1.2;margin-top:8px}
.stop p{color:#c4c4c4;margin-top:10px;font-size:16px;max-width:30ch}

/* proper */
.proper{padding:clamp(88px,12vw,168px) 0}
.proper__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:56px}
.proper h2{grid-column:1/6;font-size:clamp(2.2rem,4.2vw,4rem);align-self:start;position:sticky;top:120px}
.sheet{grid-column:7/13;border:2px solid var(--fg)}
.sheet__head{display:flex;justify-content:space-between;padding:14px 22px;background:var(--fg);color:var(--bg);font-stretch:112%;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sheet__row{display:grid;grid-template-columns:34px 1fr;column-gap:16px;padding:26px 22px;border-top:1px solid var(--rule)}
.sheet__row:first-child{border-top:0}
.sheet__row svg{width:28px;height:23px;fill:var(--acc);grid-row:1/3;margin-top:3px}
.sheet dt{font-stretch:112%;font-weight:800;font-size:20px}
.sheet dd{color:var(--mute);margin:8px 0 0;max-width:46ch}

/* crew */
.crew{padding:clamp(88px,11vw,152px) 0;background:oklch(0.94 0 0)}
.crew__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:48px;align-items:start}
.crew__grid>div{grid-column:1/6}
.crew__lede{margin:24px 0 36px;color:var(--mute);font-size:18px;max-width:40ch}
.crew__list{grid-column:7/13}
.crew__list li{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:22px 0;border-top:1px solid oklch(0.8 0 0);font-size:18px;color:var(--mute)}
.crew__list li:last-child{border-bottom:1px solid oklch(0.8 0 0)}
.crew__list b{color:var(--fg);font-weight:700}
.crew__list svg{width:26px;height:22px;fill:var(--fg);margin-top:4px}

/* book */
.book{padding:clamp(88px,11vw,152px) 0;background:var(--acc);color:var(--ink-900)}
.book__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:40px}
.book__grid>div{grid-column:1/6;align-self:start;position:sticky;top:120px}
.book h2{font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:.98}
.book__lede{margin-top:24px;font-size:19px;max-width:30ch}
.form{grid-column:7/13;display:grid;gap:18px}
.form__who{display:flex;gap:0;border:1.5px solid var(--ink-900);padding:0;margin:0}
.form__who label{flex:1;position:relative;cursor:pointer}
.form__who input{position:absolute;opacity:0}
.form__who span{display:block;text-align:center;padding:14px 10px;font-weight:700;font-size:15px}
.form__who input:checked+span{background:var(--ink-900);color:var(--white)}
.form__who input:focus-visible+span{outline:3px solid var(--white);outline-offset:-5px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.f{display:grid;gap:6px;font-size:14px;font-weight:700}
.f input,.f select,.f textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--white);border:1.5px solid var(--ink-900);border-radius:0;font-weight:400;font-size:16px}
.f textarea{resize:vertical;min-height:96px}
.f input::placeholder{color:#6e6e6e}
.f :focus-visible{outline:3px solid var(--ink-900);outline-offset:2px}
.f .bad{border-color:#000;box-shadow:inset 0 0 0 2px #000}
.form__fine{font-size:14px}
.quick{display:flex;gap:8px}
.quick button{min-height:36px;padding:0 12px;border:1.5px solid var(--ink-900);background:none;font-weight:700;font-size:14px;cursor:pointer}
.quick button:hover,.quick button[aria-pressed=true]{background:var(--ink-900);color:var(--white)}
.direct[hidden]{display:none}
.direct{margin-top:48px;display:grid;gap:14px;justify-items:start}
.direct__label{font-weight:700}
.direct__tel{font-stretch:125%;font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);text-decoration:none;line-height:1}
.form .btn--ink:hover{background:var(--white);color:var(--ink-900)}
.is-crew [data-venue-only]{display:none}

/* footer */
.foot{padding:clamp(64px,8vw,112px) 0 40px}
.last{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--board);color:#fff;padding:22px 24px;font-stretch:112%;font-size:clamp(16px,1.6vw,20px)}
.last .state{width:150px;height:36px}
.last__what{font-weight:600}
.foot__mark{width:clamp(160px,22vw,300px);height:auto;margin-top:clamp(48px,6vw,80px)}
.foot__row{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);font-size:15px;color:var(--mute)}
.foot__row a{color:var(--fg)}
.foot__row span:last-child{margin-left:auto}

/* mobile dock */
.dock{display:none}

@media (max-width:1100px){
  .nav{display:none}
  .hero__title{grid-column:1/13;max-width:12ch}
  .board{grid-column:4/13;grid-row:2;margin-top:28px;align-self:start}
  .hero__copy{grid-column:1/13;grid-row:3;padding-top:40px}
  .roles__head{grid-column:1/13;position:static;margin-bottom:40px}
  .roles__list{grid-column:1/13}
  .proper h2{grid-column:1/13;position:static}
  .sheet{grid-column:1/13}
  .crew__grid>div,.crew__list,.book__grid>div,.form{grid-column:1/13}
  .book__grid>div{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .top__in{height:64px;gap:12px}
  .logo img{height:24px}
  .top__end .btn{display:none}
  .top__end{margin-left:auto}
  .hero{padding-top:36px}
  .hero__title{font-size:clamp(2.4rem,11.2vw,3.6rem);max-width:none}
  :lang(nl) .hero__title{font-size:clamp(2.2rem,9.6vw,3.4rem)}
  .board{grid-column:1/13;margin-inline:calc(var(--pad) * -1);margin-top:28px}
  .board__head{padding-inline:var(--pad)}
  .slot{grid-template-columns:auto 1fr;grid-template-areas:"t s" "r r";row-gap:4px;padding:14px var(--pad)}
  .slot__t{grid-area:t}.state{grid-area:s;justify-self:end;width:120px}
  .slot__role{grid-area:r}
  .slot__where{display:none}
  .slot__role::after{content:' · ' attr(data-where);font-weight:400;color:#cfcfcf}
  .board__legend{padding-inline:var(--pad)}
  .hero__btns .btn{flex:1 1 100%}
  .role{grid-template-columns:40px 1fr;padding:24px 0}
  .role__tick{width:34px;height:28px}
  .role__book{grid-column:2;justify-self:start}
  .rail{grid-template-columns:1fr;padding-top:0;padding-left:64px;gap:40px}
  .rail::before{left:21px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed #5b5b5b}
  .rail::after{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .rail::after{background:var(--acc);transform:scaleY(0);transform-origin:50% 0}
  .rail.is-on::after{transform:scaleY(1)}
  .stop__n{top:0;left:-64px}
  .stop h3{margin-top:0}
  .form__row{grid-template-columns:1fr}
  .foot__row span:last-child{margin-left:0}
  .last{grid-template-columns:1fr auto;grid-template-areas:"t s" "w w";row-gap:8px;padding:18px var(--pad);margin-inline:calc(var(--pad) * -1)}
  .last .slot__t{grid-area:t}.last .state{grid-area:s;width:120px}.last__what{grid-area:w}
  .sheet__head span:last-child{display:none}
  .dock{display:flex;box-shadow:0 0 0 1.5px var(--white);position:fixed;left:12px;right:12px;bottom:12px;z-index:var(--z-dock);transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .dock.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none}
  .foot{padding-bottom:100px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}