/* Ga op je handen zitten · website 4.0
   Layout: home = tegelraster in kleurvlakken; pagina = 2/3 tekst + 1/3 kleurvlak met alleen de knop. Eén vaste look. */
:root{
  --cream:#FAF8EC; --blue:#0067B4; --wine:#960025; --red:#FB1B01; --pink:#F98FA8;
  --head:"Poppins",Helvetica,Arial,sans-serif;
  --body:"Manrope",Helvetica,Arial,sans-serif;
  /* vaste lettermaten, overal gelijk */
  --t-tile:28px; --t-boek:64px; --t-h1:34px; --t-lead:24px; --t-p:17px; --t-btn:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--wine);font:300 var(--t-p)/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* kop */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding-block:14px;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));background:var(--cream)}
.bril img{width:74px;display:block}
.wm img{width:min(330px,50vw);display:block}
.burger{justify-self:end;width:44px;height:36px;display:grid;align-content:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.burger i{display:block;height:4px;background:var(--blue);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.menu{background:var(--cream);padding-block:8px 32px;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.menu ul{list-style:none;margin:0 auto;padding:0;max-width:900px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 32px}
.menu a{display:block;padding:6px 0;text-decoration:none;font:800 24px/1.2 var(--head)}
.menu a:hover{text-decoration:underline}
.m-blue{color:var(--blue)} .m-wine{color:var(--wine)} .m-red{color:var(--red)} .m-pink{color:var(--pink)}

/* home: grote naam met boventitel */
.top.home{padding-block:26px 30px;row-gap:0}
.top.home .wm img{width:min(560px,62vw)}
.tagline{grid-column:1/-1;justify-self:stretch;text-align:center;max-width:none;margin:16px 0 0;font:300 20px/1.45 var(--body);color:var(--blue);display:grid;gap:1.4em}
.tagline p{margin:0}

/* home */
.grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto)}
.tile{display:grid;place-items:center;text-align:center;padding:20px;text-decoration:none;font:800 var(--t-tile)/1.1 var(--head);text-wrap:balance}
.tile:hover{filter:brightness(1.06)}
.tile:focus-visible{outline:4px solid var(--cream);outline-offset:-8px}
.t-creatief{grid-row:span 2}
.t-boek{grid-column:span 2;grid-row:span 2;font-size:var(--t-boek)}
.t-keynote{grid-row:span 2}
.wide{grid-column:span 2}
.blue{background:var(--blue);color:var(--cream)} .wine{background:var(--wine);color:var(--cream)}
.red{background:var(--red);color:var(--cream)} .pink{background:var(--pink);color:var(--cream)}
.pink.bt{color:var(--blue)}

/* pagina */
.page{flex:1;display:grid;grid-template-columns:2fr 1fr;min-height:560px}
.txt{padding-block:48px 56px;padding-left:clamp(20px,8vw,180px);padding-right:clamp(16px,4vw,64px);display:grid;align-content:start;gap:18px;min-width:0}
.txt h1{font:800 var(--t-h1)/1.15 var(--head);margin:0}
.txt .lead{font:300 var(--t-lead)/1.35 var(--body);margin:0 0 6px;max-width:60ch}
.txt p{margin:0;max-width:60ch;font:300 var(--t-p)/1.55 var(--body)}
.txt h3{margin:6px 0 -12px;font:700 var(--t-p)/1.4 var(--body)}
.txt a{text-underline-offset:3px}
.side{display:grid;align-content:end;justify-items:center;padding:40px 16px 48px;min-width:0}
.blob{width:170px;height:140px;display:grid;place-items:center;text-align:center;text-decoration:none;font:800 var(--t-btn)/1.05 var(--head);color:var(--cream);border-radius:56% 44% 52% 48% / 52% 58% 42% 48%;transition:transform .2s}
.blob:hover{transform:rotate(-4deg) scale(1.04)}
.side{gap:18px}
.blob.words{font-size:20px;line-height:1.15;padding:18px;width:190px;height:150px}
.b-red{background:var(--red)} .b-blue{background:var(--blue)} .b-wine{background:var(--wine)} .b-pink{background:var(--pink)}

/* quote in de rechterkolom, in een handschrift dat lijkt op 'je' uit het logo */
.side{grid-template-rows:1fr auto;align-content:stretch}
.sq{margin:0;align-self:center;text-align:center;font:400 29px/1.6 "Caveat","Comic Sans MS",cursive;letter-spacing:.03em;word-spacing:.08em;max-width:26ch;text-wrap:balance}
.m-only{display:none}
.quote{background:var(--cream);padding-block:32px 20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));justify-items:center}
.quote blockquote{margin:0;max-width:30ch;text-align:center;font:400 26px/1.55 "Caveat","Comic Sans MS",cursive;letter-spacing:.03em;word-spacing:.08em;text-wrap:balance}

/* uitgesneden foto in de zijkolom (Over Ons) */
.side.has-photo{grid-template-rows:1fr auto;gap:28px}
.side-photo{align-self:center;justify-self:center;width:min(86%,380px);height:auto;display:block}
.photo-band{position:relative;padding-block:32px 28px;justify-items:center}
.photo-band img{width:min(78%,340px);height:auto;display:block}

/* voet */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cream);
  padding-block:18px;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.back{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;color:var(--cream);text-decoration:none;font:800 18px/1 var(--head);white-space:nowrap;transition:transform .2s}
.back:hover{transform:translateX(-3px)}
.merk{display:flex;align-items:center;gap:10px;color:var(--red);font-size:13px}
.jump{width:72px;height:auto;display:block}

@media (prefers-reduced-motion:reduce){.blob,.burger i,.back{transition:none}}

/* mobiel: volgorde zoals in het ontwerp */
@media (max-width:700px){
  :root{--t-tile:20px;--t-boek:38px;--t-h1:24px;--t-lead:18px;--t-p:15px;--t-btn:20px}
  .bril img{width:50px}
  .top.home{padding-block:16px 20px}
  .top.home .wm img{width:58vw}
  .tagline{font-size:15px;margin-top:12px}
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(110px,auto)}
  .tile{grid-row:auto!important;grid-column:auto!important;padding:14px}
  .t-boek{grid-column:1/-1!important;order:1;min-height:150px}
  .t-creatief{order:2} .t-keynote{order:3}
  .t-podcast{grid-column:1/-1!important;order:4}
  .t-overons{order:5} .t-teamtraject{order:6}
  .t-ebook{order:7} .t-jaargroep{order:8}
  .t-dagsessie{grid-column:1/-1!important;order:9}
  .t-jump{order:10} .t-dagstart{order:11}
  .t-kaartdeck,.t-teamjump{grid-column:1/-1!important;order:12}
  .page{grid-template-columns:7fr 3fr;min-height:0}
  .txt{padding:28px 16px 36px max(16px,env(safe-area-inset-left,0px))}
  .side{padding:28px 6px 36px max(6px,env(safe-area-inset-right,0px))}
  .blob{width:96px;height:82px}
  .blob.words{width:104px;height:96px;font-size:12px;padding:10px}
  .menu a{font-size:20px}
  .merk{font-size:11px;text-align:right}
  .sq{display:none}
  .quote.m-only{display:grid}
  .side{grid-template-rows:none;align-content:end}
  .side-photo{display:none}
  .photo-band.m-only{display:grid}
  .side.has-photo .blob{display:none}
  .photo-band img{width:min(56%,230px)}
  .photo-band .blob{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:24px}
  .jump{width:56px}
  .back{font-size:15px;padding:9px 14px}
}