@font-face{font-family:"EB Garamond";src:url("../assets/fonts/eb-garamond.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../assets/fonts/eb-garamond-italic.ttf") format("truetype");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../assets/fonts/dm-mono.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--bg:#faf9f7;--fg:#1a1916;--muted:#6b6860;--accent:#245c73;--border:rgba(26,25,22,.11);--serif:"EB Garamond",Georgia,serif;--mono:"DM Mono",ui-monospace,monospace;--inset:60px;--block-top:clamp(64px,5vw,80px);--block-bottom:clamp(72px,7vw,110px)}
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);font-family:var(--serif);-webkit-font-smoothing:antialiased;border-top:2px solid var(--accent)}a{color:inherit}button{font:inherit}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3{font-weight:400}h1 em,h2 em{color:var(--muted);font-weight:400}p{font-size:22px;line-height:1.55}p+p{margin-top:16px}[id]{scroll-margin-top:28px}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}a,button{touch-action:manipulation}.skip-link{position:absolute;left:20px;top:-100px;z-index:1100;padding:14px;background:var(--bg)}.skip-link:focus{top:12px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.17em;line-height:1.6;text-transform:uppercase;color:var(--accent)}
.button{min-height:52px;padding:15px 19px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.13em;line-height:1.6;text-decoration:none;text-transform:uppercase;transition:background .18s ease}.primary{background:var(--accent);color:#fff}.primary:hover{background:#194559}.text-link{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding:12px 0}footer{padding:40px var(--inset);display:flex;align-items:center;justify-content:space-between;gap:30px}footer p{font-size:17px;color:var(--muted);margin-top:10px}footer>a{font:10px/1.8 var(--mono);color:var(--muted);text-decoration:none}footer>a span{color:var(--fg)}footer a:hover{color:var(--accent)}

:root{--block-inline:clamp(46px,7vw,110px)}
.story-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"heading photo" "details photo";min-height:720px;border:0;gap:0}
.story-block:nth-child(even){grid-template-areas:"photo heading" "photo details"}
.block-heading{grid-area:heading;padding:var(--block-top) var(--block-inline) 42px;min-width:0}
.block-heading h2{font:400 10px/1.6 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.block-subtitle{margin-top:28px;font-size:clamp(50px,5.6vw,88px);line-height:.96;letter-spacing:-.04em;overflow-wrap:break-word}
.block-media{grid-area:photo;position:relative;min-height:720px;overflow:hidden;background:#eeede8}
.block-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.block-media figcaption{position:absolute;bottom:24px;left:24px;padding:10px 14px;background:var(--bg);font-size:20px;font-style:italic}
.block-details{grid-area:details;padding:0 var(--block-inline) var(--block-bottom);min-width:0}
.block-details p{max-width:680px;color:var(--muted);font-size:clamp(21px,1.83vw,24px);line-height:1.68}
.block-details .eyebrow{font-size:10px;color:var(--accent)}
.block-details .approach{margin-top:28px;font-style:italic}.approach .eyebrow{display:block;margin-bottom:8px;font-style:normal}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
.block-details>.button{margin-top:32px}
.introduction{min-height:clamp(620px,68vh,760px)}
.introduction .block-heading{padding:48px 60px 44px}
.introduction .block-heading h1,.introduction .block-subtitle{font-size:clamp(62px,6vw,106px);font-weight:400;line-height:.94;letter-spacing:-.05em}
.introduction .block-subtitle{margin-top:.11em;color:var(--muted);font-style:italic}
.introduction .block-media{min-height:clamp(620px,68vh,760px)}
.introduction .block-details{padding-inline:60px}
#schip .block-heading h2,#schipper .block-heading h2,#contact .block-heading h2{font:400 clamp(50px,5.6vw,88px)/.96 var(--serif);letter-spacing:-.04em;text-transform:none;color:var(--fg)}
#schip .block-subtitle,#schipper .block-subtitle,#contact .block-subtitle{font-size:24px;letter-spacing:0;line-height:1.4;font-style:italic;color:var(--muted)}
#schipper .block-media img{object-position:50% 38%}
.ship-facts{display:flex;gap:44px;margin-top:38px;padding-top:22px;border-top:1px solid var(--border)}
.ship-facts dt{font:10px var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}
.ship-facts dd{font-size:40px;margin-top:10px}.ship-facts dd span{display:block;font-size:17px;color:var(--muted)}
@media(max-width:1100px){:root{--inset:40px}footer{flex-wrap:wrap}}
@media(max-width:980px){.story-block,.story-block:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"heading" "photo" "details";min-height:0}.block-heading,.introduction .block-heading{padding:var(--block-top) 40px 52px}.introduction .block-heading{padding-top:48px}.block-media,.introduction .block-media{min-height:58vw}.block-details,.introduction .block-details{padding:52px 40px 88px}.block-details>:first-child{margin-top:0}}
@media(max-width:640px){:root{--inset:20px}.block-heading{padding:58px 20px 44px}.introduction .block-heading{padding:36px 20px 44px}.introduction .block-heading h1,.introduction .block-subtitle{font-size:clamp(42px,12vw,58px);line-height:.96}.block-subtitle,#schip .block-heading h2,#schipper .block-heading h2,#contact .block-heading h2{font-size:clamp(36px,10.5vw,48px)}.block-media,.introduction .block-media{min-height:360px}.block-details,.introduction .block-details{padding:44px 20px 82px}.block-details p{font-size:18px;line-height:1.55}#schip .block-subtitle,#schipper .block-subtitle,#contact .block-subtitle{font-size:20px}.ship-facts{gap:40px}footer{flex-direction:column;align-items:flex-start}.brand{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Origineel scheepslogo: wit mengt met de warme pagina-achtergrond. */
.brand-logo{display:block;width:174px;height:auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:640px){.brand-logo{width:140px}}

/* Fotoselectie homepage: behoud de persoon en het schip in de uitsnede. */
#learning-experiences .block-media img{object-position:25% 50%}
#schip .block-media img{object-position:50% 50%}

/* Doorlopende beeldvlakken, zonder scheidingslijn tussen de secties. */
.story-block{margin:0}
@media(min-width:981px){#schip .block-media{min-height:max(720px,54.084vw)}}
/* De portretfoto van het schip behoudt op mobiel ruimte voor romp en masten. */
@media(max-width:980px){#schip .block-media{min-height:0;aspect-ratio:1200/1298}}

/* Paginalinks behouden de bestaande homepagecompositie. */
.heading-link{color:inherit;text-decoration:none}
.heading-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* Vervolgpagina's gebruiken dezelfde blokken, met één H1 per pagina. */
.detail-page .block-heading h1{font:400 10px/1.6 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.detail-page #schip .block-heading h1,.detail-page #schipper .block-heading h1,.detail-page #contact .block-heading h1{font:400 clamp(50px,5.6vw,88px)/.96 var(--serif);letter-spacing:-.04em;text-transform:none;color:var(--fg)}
.contact-address{margin-top:24px;overflow-wrap:anywhere}
@media(max-width:640px){.detail-page #schip .block-heading h1,.detail-page #schipper .block-heading h1,.detail-page #contact .block-heading h1{font-size:clamp(36px,10.5vw,48px)}}