/* Pivothouse · Zeekaart, variant C
   Donkere opening met dieptelijnen, lichte secties eronder.
   Koppen in Fraunces, tekst in Almarai. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  --deep:#14242F; --navy:#2C4A5E; --creme:#EEE9E2; --paper:#F7F4EF; --white:#FFFFFF;
  --terra:#D65E2E; --terra-ink:#A9411A; --line:#9DB4C2; --line-navy:#C5D3DB; --muted:#5A6B75; --ink:#1F3442;
  --rule:rgba(44,74,94,.35);
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Almarai', 'Segoe UI', system-ui, sans-serif;
  color-scheme:light;
}
html{background:var(--deep)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--deep)}
a{color:var(--ink)} a:hover{color:var(--terra-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:max(56px,env(safe-area-inset-left,0px));padding-right:max(56px,env(safe-area-inset-right,0px))}}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;text-wrap:balance;margin:0;color:var(--navy)}
p{margin:0}
.label{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ph{color:var(--muted);font-style:normal}
.k{color:var(--terra)}


/* kop */
.dark{position:relative;overflow:hidden;background:var(--deep);color:var(--creme)}
.dark h1,.dark h2,.dark h3{color:var(--creme)}
.dark .label{color:var(--line)}
.contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
header.site{position:relative;z-index:2}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px;padding-block:14px}
.brand{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.01em;text-decoration:none;color:var(--creme);padding:8px 0}
.brand:hover{color:var(--creme)}
nav.main{display:flex;flex-wrap:wrap;gap:0 26px}
nav.main a{color:var(--creme);font-weight:700;font-size:15px;text-decoration:none;padding:12px 0;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{border-bottom-color:var(--terra)}
.hero{position:relative;z-index:1}
.hero .wrap{padding-block:clamp(32px,6vw,80px) clamp(44px,6vw,84px);display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:clamp(48px,9.5vw,140px);line-height:.95;letter-spacing:-.03em;max-width:12ch}
.hero.sub h1{font-size:clamp(44px,8vw,112px)}
.lede{max-width:600px;font-size:clamp(18px,1.7vw,23px);line-height:1.45}
.btns{display:flex;flex-wrap:wrap;gap:12px 14px}
.btn{display:inline-block;padding:14px 24px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent}
.btn.light{background:var(--creme);color:var(--deep)} .btn.light:hover{color:var(--terra-ink)}
.btn.ghost{border-color:var(--creme);color:var(--creme)} .btn.ghost:hover{color:var(--creme);border-color:var(--terra)}
.btn.navy{background:var(--navy);color:var(--creme)} .btn.navy:hover{color:var(--creme);background:var(--deep)}
.btn.line{border-color:var(--navy);color:var(--navy)}

/* getijdencurve */
.tide{display:flex;flex-direction:column;gap:18px;margin:8px 0 0}
.tide svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15px}
.legend div{display:flex;align-items:center;gap:12px}
.sw{display:block;width:32px;border-top:2px solid var(--line)}
.sw.t{border-top:3px solid var(--terra)}
.sw.u{border-top:2px dotted var(--creme)}

/* secties */
section.s{padding-block:clamp(52px,7vw,100px)}
section.s.white{background:var(--white)}
.shead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 48px;margin-bottom:36px}
.shead h2{font-size:clamp(34px,4.4vw,60px);line-height:1.05}
.shead p{max-width:520px;font-size:19px}
.stack{display:flex;flex-direction:column;gap:12px}

/* projectkaarten */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--white);text-decoration:none;border-top:3px solid var(--navy);transition:transform .2s}
.card:hover{transform:translateY(-3px);color:var(--ink)}
.card.live{border-top-color:var(--terra)}
.art{position:relative;height:170px;overflow:hidden}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.art .no{position:absolute;left:22px;top:18px;font-family:var(--display);font-size:42px;line-height:1;color:var(--creme)}
.card .body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px}
.card h3{font-size:30px;line-height:1.1}
.status{display:inline-flex;align-items:center;gap:8px}
.dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.dot.live{background:var(--terra)} .dot.idle{background:transparent;border:1.5px solid var(--navy);box-sizing:border-box}
.more{margin-top:auto;padding-top:6px;font-weight:700;color:var(--navy)}
.bench{box-sizing:border-box;min-height:300px;border:1px dashed rgba(44,74,94,.6);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.bench .label{color:var(--terra-ink)}

/* lab-band */
.lab{position:relative;overflow:hidden;background:var(--navy);color:var(--creme)}
.lab h2{color:var(--creme);font-size:clamp(40px,6vw,84px);line-height:1}
.lab .label{color:var(--line-navy)}
.lab .wrap{position:relative;padding-block:clamp(60px,8vw,112px);display:flex;flex-direction:column;gap:26px}
.lab .inner{max-width:760px;display:flex;flex-direction:column;gap:24px;margin-left:auto}
.lab p{font-size:clamp(19px,1.9vw,24px);line-height:1.45}
.drive{font-size:15px!important;color:var(--line-navy)}

/* duo */
.duo{display:flex;flex-wrap:wrap;gap:48px 72px}
.duo>div{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px}
.duo h2{font-size:clamp(34px,4.4vw,56px)}
.row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;text-decoration:none}
.row strong{font-family:var(--display);font-weight:600;font-size:23px;color:var(--navy)}
.frame{aspect-ratio:16/9;max-width:100%;box-sizing:border-box;border:1px dashed rgba(44,74,94,.6);display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}

/* filter */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:700 15px var(--sans);padding:9px 18px;border:1px solid rgba(44,74,94,.5);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--navy);color:var(--creme);border-color:var(--navy)}
.keys{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)}
.keys span{display:inline-flex;align-items:center;gap:8px}

/* project- en tekstpagina */
dl.facts{margin:0;display:flex;flex-wrap:wrap;gap:18px 52px;border-top:1px solid rgba(157,180,194,.4);padding-top:22px}
dl.facts div{display:flex;flex-direction:column;gap:4px}
dl.facts dt{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--line)}
dl.facts dd{margin:0}
.crumb{display:flex;gap:0 10px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--line)}
.crumb a{color:var(--line);padding:10px 0} .crumb span{padding:10px 0}
.split{display:flex;flex-wrap:wrap;gap:24px 64px}
.split h2{flex:1 1 280px;font-size:clamp(34px,4.4vw,56px);line-height:1.05}
.split .txt{flex:2 1 460px;min-width:0;max-width:680px;display:flex;flex-direction:column;gap:18px}
.big{font-size:clamp(20px,1.9vw,24px);line-height:1.45;color:var(--navy)}
.three{display:flex;flex-wrap:wrap;gap:28px 36px}
.three>div{flex:1 1 240px;border-top:1px solid var(--navy);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.three>div.on{border-top:3px solid var(--terra);padding-top:16px}
.three h3{font-size:26px;font-weight:600}
.pager .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-block:30px;border-top:1px solid var(--rule)}
.pager a{display:flex;flex-direction:column;gap:4px;padding:6px 0;text-decoration:none}
.pager a:last-child{align-items:flex-end;text-align:right}
.pager .t{font-family:var(--display);font-size:25px;color:var(--navy)}
article.read{max-width:680px;display:flex;flex-direction:column;gap:22px;font-size:18px;line-height:1.7}
article.read .first{font-size:22px;line-height:1.55;color:var(--navy)}
article.read h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin-top:12px}
.sign{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1.1;color:var(--navy)}
.contact{display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--navy);background:var(--white);padding:26px}

footer.site{background:var(--deep);color:var(--creme)}
footer.site .wrap{padding-block:clamp(44px,6vw,76px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 64px}
footer.site .big{font-family:var(--display);font-size:clamp(42px,5.5vw,76px);line-height:1;letter-spacing:-.02em;color:var(--creme)}
footer.site .links{display:flex;flex-wrap:wrap;gap:0 28px;font-weight:700;font-size:15px}
footer.site .links a,footer.site .links span{color:var(--creme);padding:12px 0}

.photo{margin:0 0 56px;display:flex;flex-direction:column;gap:12px;max-width:820px}
.photo img{display:block;width:100%;max-width:100%;aspect-ratio:16/7;object-fit:cover;object-position:50% 58%}
.photo figcaption{font-size:15px;color:var(--muted)}
.mail{user-select:all;font-weight:700}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage{display:block;width:100%;max-width:100%;aspect-ratio:3/2;object-fit:cover}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:20;background:var(--creme);color:var(--deep);padding:8px 12px}
/* Afwisselende achtergrond voor secties op project- en tekstpagina's */
.alt > section.s:nth-of-type(even){background:var(--white)}
article.read .label{margin-top:24px}
article.read .label:first-child{margin-top:0}
article.read .label + h2{margin-top:0}
article.read ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}