/* Gedeelde stijl voor de binnenpagina's (missions, en later book, authors, press).
   Zelfde tokens en fonts als de homepage v3. Twee gewichten: 300 voor koppen, 400 voor tekst en labels. */
@font-face{font-family:"Stack Sans Headline";src:url(/fonts/stack-sans-headline-latin-wght-normal.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
:root{
  color-scheme:dark;
  --void:#050608;
  --deep:#0b0d11;
  --ink:#edebe6;
  --ink-2:#b4b6bb;
  --mute:#8e929a;
  --line:rgba(237,235,230,.14);
  --limb:#7fb2e6;
  --foil:linear-gradient(100deg,#8a8d93 0%,#f4f4f1 16%,#a2a5aa 30%,#ecece8 46%,#8e9196 60%,#f6f6f3 78%,#9b9ea3 100%);
  --display:"Stack Sans Headline","Helvetica Neue",Arial,sans-serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w-light:300;
  --w-text:400;
  --gut:max(16px,5vw);
  --gap:24px;
  --vh:100vh;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@supports (height:100svh){:root{--vh:100svh}}
@media (max-width:860px){:root{--gap:16px}}
html{background:var(--void);overflow-x:clip}
body{background:var(--void);color:var(--ink);font:var(--w-text) 17px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--limb);color:var(--void)}
:focus-visible{outline:2px solid var(--limb);outline-offset:4px}
p{text-wrap:pretty}

/* system */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--gut)}
.wrap{padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;font-weight:var(--w-text);letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
@media (min-width:1200px){.mono{font-size:12.5px}}
.display{font-family:var(--display);font-weight:var(--w-light);line-height:.94;letter-spacing:-.03em;margin:0;text-wrap:balance}
.body{margin:0;color:var(--ink-2);font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:42ch}
.slot{display:flex;justify-content:space-between;gap:16px;color:var(--mute);margin:0}
.slot .n{color:var(--ink)}
.foil{background:var(--foil);background-size:300% 100%;background-position:40% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* foil text is painted from the background, so block-level foil needs room below the descenders */
.display.foil,.display .ln.foil{padding-bottom:.2em;margin-bottom:-.2em}
@media (forced-colors:active){.foil{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
.nw{white-space:nowrap}
.skip{position:fixed;left:var(--gut);top:12px;z-index:100;background:var(--ink);color:var(--void);padding:14px 18px;text-decoration:none;transform:translateY(-160%);transition:transform .3s}
.skip:focus{transform:none}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;transition:background-color .5s ease,border-color .5s ease;border-bottom:1px solid transparent}
.nav.solid{background:rgba(5,6,8,.82);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:inline-block;padding-block:12px;line-height:20px;font-family:var(--display);font-weight:var(--w-text);font-size:17px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand span{font-weight:var(--w-light)}
.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.links a{text-decoration:none;color:var(--ink-2);transition:color .3s;padding-block:12px}
.links a:hover,.links a[aria-current]{color:var(--ink)}
.links a[aria-current]{background:linear-gradient(var(--ink),var(--ink)) 0 calc(100% - 8px) / 100% 1px no-repeat}
.links .order-btn{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);border:1px solid rgba(237,235,230,.3);padding:0 18px;border-radius:0;transition:background .3s,color .3s,border-color .3s}
.links .order-btn:hover{background:var(--ink);color:var(--void);border-color:var(--ink)}
.menu-btn{display:none;min-height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
@media (max-width:860px){
  .brand{font-size:16px}
  .nav.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,6,8,.94)}
  .menu-btn{display:block;position:relative;z-index:2}
  .links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:0 var(--gut);background:var(--void);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
  .links a{font-family:var(--display);font-weight:var(--w-light);font-size:clamp(2.6rem,12vw,4rem);letter-spacing:-.03em;text-transform:none;line-height:1.1;color:var(--ink);padding-block:4px}
  .links a[aria-current]{background:none;color:var(--limb)}
  .links .order-btn{border:0;padding:4px 0;min-height:0}
  .menu-open .links{opacity:1;visibility:visible}
  .menu-open .brand{position:relative;z-index:2}
}

/* page intro */
.page-intro{padding-block:calc(150px + env(safe-area-inset-top,0px)) clamp(70px,12vh,140px);row-gap:0}
.page-intro .slot{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(40px,8vh,90px)}
.page-intro h1{grid-column:1 / span 10;font-size:clamp(3.2rem,8.4vw,9.6rem)}
.page-intro .body{grid-column:7 / span 5;margin-top:clamp(36px,7vh,72px)}
@media (max-width:860px){.page-intro{padding-top:calc(120px + env(safe-area-inset-top,0px))}.page-intro .slot{margin-bottom:36px}.page-intro h1,.page-intro .body{grid-column:1 / -1}.page-intro .body{margin-top:32px}}

/* closer */
.closer{padding-block:clamp(90px,16vh,180px);row-gap:0;align-items:end}
.closer .slot{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(40px,7vh,80px)}
.closer h2{grid-column:1 / span 7;font-size:clamp(3rem,6.4vw,7.2rem)}
.closer .side{grid-column:8 / span 5;display:grid;gap:26px;justify-items:start}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.cta{display:inline-flex;align-items:center;gap:14px;min-height:52px;background:var(--ink);color:var(--void);text-decoration:none;padding:0 28px;border-radius:0;transition:background .3s}
.cta:hover{background:#fff}
.tlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink);background:linear-gradient(var(--line),var(--line)) 0 calc(100% - 8px) / 100% 1px no-repeat;transition:background-image .3s}
.tlink:hover{background-image:linear-gradient(var(--ink),var(--ink))}
.cta svg,.tlink svg{transition:transform .4s var(--ease)}
.cta:hover svg,.tlink:hover svg{transform:translateX(4px)}
@media (max-width:860px){.closer h2,.closer .side{grid-column:1 / -1}.closer .side{margin-top:32px}}

/* footer */
footer{position:relative;overflow:hidden;padding-top:clamp(32px,5vh,56px);border-top:1px solid var(--line)}
.foot-cols{row-gap:14px;color:var(--ink-2)}
.foot-cols p{margin:0;grid-column:span 3}
.foot-cols a{display:inline-block;padding-block:14px 12px;margin-block:-14px -12px;text-decoration:none;background:linear-gradient(var(--line),var(--line)) 0 calc(100% - 10px) / 100% 1px no-repeat;transition:color .3s}
.foot-cols a:hover{color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink))}
.foot-cols p:last-child{text-align:right}
.foot-cols .k{display:block;color:var(--mute)}
.wordmark{display:block;margin:clamp(32px,6vh,72px) 0 0;padding-inline:var(--gut);font-size:9.6vw;white-space:nowrap;line-height:1;height:.64em;overflow:hidden;letter-spacing:-.035em}
.wordmark b{font-weight:var(--w-text)}
.foot-note{margin:clamp(28px,5vh,56px) 0 0;color:var(--ink)}
.foot-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px}
.foot-legal{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--ink-2)}
.foot-legal a{display:inline-block;padding-block:14px 12px;margin-block:-14px -12px;text-decoration:none;background:linear-gradient(var(--line),var(--line)) 0 calc(100% - 10px) / 100% 1px no-repeat;transition:color .3s}
.foot-legal a:hover{color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink))}
.foot-line{height:1px;background:var(--limb);box-shadow:0 0 14px 1px rgba(127,178,230,.55)}
@media (max-width:860px){.foot-cols p{grid-column:span 6}.foot-cols p:nth-child(3){text-align:left}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.links{transition:none}}
picture.av{display:contents}
/* tap targets of at least 44px on touch screens, without changing the visual rhythm */
nav.crumbs a{display:inline-block;padding-block:13px;margin-block:-13px}
footer .foot-nav a{padding-block:14px;margin-block:-7px}