*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#F4EEE5;color:#3E2C22;font-family:Arial,Helvetica,sans-serif}a{color:inherit}header{max-width:1180px;margin:auto;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px}header .brand{font-weight:500;letter-spacing:.18em;text-decoration:none;font-size:16px}header .brand span{display:block;font-size:9px;letter-spacing:.22em;margin-top:6px;text-align:center;font-weight:400}nav{display:flex;gap:23px;align-items:center}nav a{font-size:12px;text-decoration:none;letter-spacing:.09em}nav a:hover{text-decoration:underline}.intro{text-align:center;max-width:900px;padding:34px 20px 36px;margin:auto}.overline{text-transform:uppercase;letter-spacing:.26em;font-size:11px}.intro h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(36px,6vw,75px);line-height:1.05;letter-spacing:-.035em;margin:14px 0}.intro p{font-size:15px;line-height:1.8;max-width:560px;margin:16px auto 0}.grid{width:min(1080px,calc(100% - 48px));margin:0 auto 70px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.32;background:#e5dbcd;text-decoration:none}.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.tile:hover img{transform:scale(1.04)}.tile:focus-visible{outline:3px solid #3E2C22;outline-offset:3px}.tile .caption{position:absolute;bottom:0;left:0;right:0;padding:38px 16px 16px;color:white;background:linear-gradient(transparent,rgba(28,20,13,.64));font-size:13px;letter-spacing:.17em;text-transform:uppercase;text-align:center}.tile.logo .caption,.tile.symbol .caption{color:#3E2C22;background:linear-gradient(transparent,rgba(244,238,229,.96))}.note{max-width:800px;margin:0 auto 60px;text-align:center;padding:0 25px;font-size:13px;line-height:1.8}.link{display:inline-block;border-bottom:1px solid #3E2C22;text-decoration:none;padding-bottom:5px;margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}footer{border-top:1px solid #c8bbab;padding:25px 28px 34px;text-align:center;font-size:11px;letter-spacing:.1em;line-height:2}footer a{text-decoration:none}section.page{width:min(1040px,calc(100% - 48px));margin:35px auto 90px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%}section.page img{width:100%;height:auto;max-height:610px;object-fit:cover}section.page h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,70px);line-height:1.07;margin:16px 0 24px}section.page p{font-size:16px;line-height:1.9;max-width:510px}section.page .back{font-size:12px;letter-spacing:.12em;text-decoration:none}.more{padding:0 24px 80px;text-align:center}.more h2{font-family:Georgia,serif;font-weight:400;font-size:32px}.more p{max-width:650px;margin:10px auto;line-height:1.8}button{font:inherit}@media(max-width:700px){header{padding:20px 18px;align-items:flex-start;flex-direction:column;gap:16px}nav{gap:14px;flex-wrap:wrap}nav a{font-size:10px}.intro{padding:32px 18px}.grid{width:calc(100% - 20px);gap:4px}.tile .caption{font-size:9px;letter-spacing:.07em;padding:24px 3px 9px}section.page{grid-template-columns:1fr;gap:25px}section.page img{order:-1;max-height:440px}section.page h1{font-size:42px}.note{font-size:12px}}@media(max-width:450px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{aspect-ratio:1/1.13}}
header a.brand{display:block;flex:none;width:clamp(180px,27vw,310px);line-height:0}header a.brand img{width:100%;height:auto;display:block}.intro .overline{letter-spacing:.22em}.story{max-width:850px;margin:0 auto 92px;padding:0 26px}.story h2{font:normal clamp(30px,4vw,46px)/1.15 Georgia,serif;margin:18px 0}.story h3{font:normal 24px/1.3 Georgia,serif;margin-top:32px}.story p{font-size:16px;line-height:1.9}.story .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em}.story section{border-top:1px solid #c8bbab;padding-top:12px;margin-top:28px}.story:target{scroll-margin-top:22px}section.page .link{margin:22px 0}.intro h1{font-size:clamp(36px,5vw,62px)}@media(max-width:700px){header a.brand{width:210px}.story{margin-bottom:54px}section.page{margin-bottom:40px}}
/* Introductie voor voorlopige publicatie */
.launch{margin:24px auto 0;display:flex;flex-direction:column;align-items:center;gap:8px}.launch:before{content:"";width:58px;border-top:1px solid #3E2C22;margin-bottom:11px}.launch strong{font:normal 25px Georgia,serif}.launch span{font-size:13px;line-height:1.65}.intro h1{font-size:clamp(38px,6vw,76px)}.intro>p{margin-top:6px;font-size:14px;letter-spacing:.13em}

body.bbt-eleven{margin:0!important;background:#F4EEE5!important;color:#3E2C22!important;overflow-x:hidden}
body.bbt-eleven .bbt-wrap{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box}
body.bbt-eleven .bbt-wrap header{width:min(1200px,100%);max-width:1200px;padding:26px 24px;margin:0 auto;flex-wrap:wrap}
body.bbt-eleven .bbt-wrap nav{flex-wrap:wrap;justify-content:flex-end}
body.bbt-eleven .bbt-wrap .grid{max-width:1080px;width:calc(100% - 48px);margin:0 auto 66px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.bbt-eleven .bbt-wrap .intro{text-align:center;max-width:900px;margin:0 auto;padding:50px 18px 32px}
body.bbt-eleven .bbt-wrap .launch:before{display:none}
body.bbt-eleven .bbt-wrap .launch strong{font-size:clamp(34px,4.6vw,56px);font-weight:400}
body.bbt-eleven .bbt-wrap .story,body.bbt-eleven .bbt-wrap section.page{box-sizing:border-box}
body.bbt-eleven .bbt-wrap section.page{width:min(1080px,calc(100% - 48px))}
body.bbt-eleven .bbt-wrap footer{margin-top:40px}
@media(max-width:700px){body.bbt-eleven .bbt-wrap header{flex-direction:column;align-items:flex-start}body.bbt-eleven .bbt-wrap nav{justify-content:flex-start}body.bbt-eleven .bbt-wrap .grid{width:calc(100% - 20px);gap:4px}}

/* V12: database-backed editable content; preserve design and avoid WP block width constraints. */
body.bbt-eleven .bbt-wrap > main {display:block;width:100%;max-width:none;margin:0 auto;}
body.bbt-eleven .bbt-wrap main .grid {display:grid;width:min(1080px,calc(100% - 48px));max-width:1080px;grid-template-columns:repeat(3,minmax(0,1fr));margin-left:auto;margin-right:auto;}
body.bbt-eleven .bbt-wrap main .grid .tile {width:100%;min-width:0;}
body.bbt-eleven .bbt-wrap main .grid .tile img {display:block;width:100%;height:100%;object-fit:cover;}
body.bbt-eleven .bbt-wrap header {display:flex;align-items:center;justify-content:space-between;gap:28px}
body.bbt-eleven .bbt-wrap header nav {display:flex;align-items:center;justify-content:flex-end;gap:17px;flex:1;min-width:0;}
@media(max-width:800px) {body.bbt-eleven .bbt-wrap header {flex-direction:column;align-items:center;}body.bbt-eleven .bbt-wrap header nav {justify-content:center;flex-wrap:wrap;} }
@media(max-width:600px) {body.bbt-eleven .bbt-wrap main .grid {width:calc(100% - 20px);gap:4px;} }


/* V13 – responsive layout: mobile improvements only, no content/database changes. */
@media (max-width: 800px) {
  body.bbt-eleven .bbt-wrap header {
    width:100%; padding:20px 20px 10px; margin:0 auto;
    display:flex; flex-direction:column; justify-content:center;
    align-items:center; gap:22px;
  }
  body.bbt-eleven .bbt-wrap header a.brand {
    width:min(320px, 80vw); max-width:100%; margin:0 auto;
  }
  body.bbt-eleven .bbt-wrap header nav {
    width:100%; max-width:570px; margin:0 auto;
    display:flex; flex:0 0 auto; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:12px 20px;
  }
  body.bbt-eleven .bbt-wrap header nav a {
    font-size:13px; line-height:1.6; letter-spacing:.025em;
    white-space:nowrap; display:inline-block; padding:3px 0;
  }
  body.bbt-eleven .bbt-wrap .intro {
    max-width:100%; padding:34px 18px 26px; margin:0 auto;
  }
  body.bbt-eleven .bbt-wrap .intro .launch {margin:0 auto;}
  body.bbt-eleven .bbt-wrap .intro .launch strong {
    font-size:clamp(32px,7.5vw,48px); line-height:1.13;
  }
  body.bbt-eleven .bbt-wrap main .grid {
    width:calc(100% - 32px); max-width:600px; margin:0 auto 32px;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px;
  }
  body.bbt-eleven .bbt-wrap main .grid .tile {aspect-ratio:1 / 1.18; min-width:0;}
  body.bbt-eleven .bbt-wrap main .grid .tile .caption {
    font-size:10px; line-height:1.25; letter-spacing:.015em;
    padding:22px 2px 10px; overflow-wrap:anywhere;
  }
  body.bbt-eleven .bbt-wrap .note {margin:0 auto 35px;padding:0 20px;max-width:570px;font-size:13px;}
  body.bbt-eleven .bbt-wrap footer {margin-top:24px;}
}
@media (max-width: 390px) {
  body.bbt-eleven .bbt-wrap header {padding-left:12px;padding-right:12px;gap:18px;}
  body.bbt-eleven .bbt-wrap header a.brand {width:min(290px,82vw);}
  body.bbt-eleven .bbt-wrap header nav {gap:8px 14px;}
  body.bbt-eleven .bbt-wrap header nav a {font-size:12px;}
  body.bbt-eleven .bbt-wrap main .grid {width:calc(100% - 20px); gap:4px;}
  body.bbt-eleven .bbt-wrap main .grid .tile .caption {font-size:9px;}
}


/* V14 – uitlijning: WordPress zet class "page" op <body>; .page-regels gelden nu alleen voor <section class="page">. */
body.bbt-eleven{display:block!important;width:100%!important;max-width:none!important;grid-template-columns:none!important;padding:0!important}
body.bbt-eleven .bbt-wrap{display:block;width:100%}
body.bbt-eleven .bbt-wrap > main{display:block;width:100%}
body.bbt-eleven .bbt-wrap header{width:100%;max-width:1200px;margin-left:auto;margin-right:auto}
body.bbt-eleven .bbt-wrap section.page{align-items:center}
body.bbt-eleven .bbt-wrap section.page > div{min-width:0}
body.bbt-eleven .bbt-wrap section.page img{display:block;width:100%}
body.bbt-eleven .bbt-wrap main > *{margin-top:0}
body.bbt-eleven .bbt-wrap .story,body.bbt-eleven .bbt-wrap .note,body.bbt-eleven .bbt-wrap .intro{margin-left:auto;margin-right:auto}
body.bbt-eleven .bbt-wrap footer{width:100%}

/* V14 – header, raster en content op dezelfde linker- en rechterrand (desktop). */
@media (min-width:801px){
 body.bbt-eleven .bbt-wrap header{width:min(1080px,calc(100% - 48px));max-width:1080px;padding-left:0;padding-right:0}
}
/* Logo-tegel: logo niet afsnijden */
body.bbt-eleven .bbt-wrap main .grid .tile.logo img{object-fit:contain;padding:0 8px;background:#F4EEE5}

/* V15 – minder ruimte tussen header, kop en foto's; logo-tegel nooit afsnijden. */
body.bbt-eleven .bbt-wrap header{padding-top:18px;padding-bottom:0}
body.bbt-eleven .bbt-wrap .intro{padding:10px 18px 18px;margin-top:0}
body.bbt-eleven .bbt-wrap .intro > *{margin-top:0}
body.bbt-eleven .bbt-wrap .intro > p:empty,body.bbt-eleven .bbt-wrap .intro br,body.bbt-eleven .bbt-wrap main > p:empty,body.bbt-eleven .bbt-wrap main > br{display:none}
body.bbt-eleven .bbt-wrap .intro h1,body.bbt-eleven .bbt-wrap .intro .launch strong{margin-top:0;margin-bottom:0;line-height:1.1}
body.bbt-eleven .bbt-wrap .intro .launch{margin:0 auto}
body.bbt-eleven .bbt-wrap .grid .tile.logo img{object-fit:contain!important;padding:0 8px;background:#F4EEE5}
@media(max-width:800px){
 body.bbt-eleven .bbt-wrap header{padding-top:14px;gap:14px}
 body.bbt-eleven .bbt-wrap .intro{padding:6px 18px 14px}
}

/* V16: zoekmachinevriendelijke introductie, zonder wijziging aan V15 uitlijning. */
.bbt-seo-context{max-width:760px;margin:0 auto 54px;padding:0 24px;text-align:center;}
.bbt-seo-context h1,.bbt-wrap .note h1{font:normal clamp(24px,3vw,33px)/1.25 Georgia,serif;letter-spacing:0;margin:0 0 12px;}
.bbt-seo-context p{font-size:14px;line-height:1.8;}
