/* Bonhaus
   Handgemaakt zoals het logo: hoge handgesneden kapitalen met ruwe rand (SVG-filter #rough),
   de gestreepte halve cirkels uit het logo rond elke titel, en inktspikkels (grain).
   Eén vaste ritmeschaal (--s1 … --s7) voor alle afstanden. Wit op groen voor contact. */

@font-face{font-family:"Bebas Neue";src:url(/assets/fonts/bebas-neue-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/assets/fonts/work-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/assets/fonts/work-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/assets/fonts/work-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#161514; --paper:#efede9; --wit:#ffffff; --muted:#625e59; --line:#d3cec7; --groen:#1d4a36; --zacht:#d9d5cf;
  --display:"Bebas Neue","Arial Narrow","Impact",sans-serif;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  /* ritme */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:clamp(72px,9vw,120px);
  --gutter:max(20px,4vw);
  --maat:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper) url(/assets/img/grain-donker.png);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--groen);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--maat);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--wit);padding:8px 12px;z-index:10}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:clamp(17px,1.5vw,20px);max-width:46ch}

/* secties: overal dezelfde ademruimte */
.sectie{padding-block:var(--s7)}
.sectie--donker{background:var(--ink) url(/assets/img/grain-licht.png);color:var(--wit)}
.sectie--groen{background:var(--groen) url(/assets/img/grain-licht.png);color:var(--wit)}
.sectie--rand{border-top:1px solid var(--line)}

/* sectietitel: gecentreerd, ruwe rand zoals de letters van het logo */
.badge-kop{text-align:center;margin-bottom:var(--s6)}
.badge-kop__tekst{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(48px,7vw,88px);line-height:.9;letter-spacing:.01em;margin:0;filter:url(#rough);text-wrap:balance}

/* header */
.top{background:var(--ink) url(/assets/img/grain-licht.png);color:var(--wit);position:sticky;top:0;z-index:5}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:76px;padding-block:var(--s2)}
.top__logo{display:block;transition:opacity .25s ease}
.top__logo img{width:60px;height:60px}
.top__nav{display:flex;gap:clamp(var(--s3),3vw,var(--s5));margin-left:auto}
.top__nav a{font-family:var(--display);font-size:22px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;position:relative;padding-block:var(--s1)}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;filter:url(#rough-sm)}
.top__nav a:hover::after{transform:scaleX(1)}
.js-home .top__logo{opacity:0;pointer-events:none}
.js-home.logo-out .top__logo{opacity:1;pointer-events:auto}

/* hero: alles op de middenas van het badge-logo */
.hero{padding-top:var(--s6)}
.hero__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__logo{width:clamp(160px,17vw,220px);height:auto;margin-bottom:var(--s5)}
.hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,5.6vw,80px);line-height:.92;letter-spacing:.01em;margin:0 0 var(--s3);filter:url(#rough);text-wrap:balance}
.hero .lead{color:var(--zacht);margin-bottom:var(--s5)}
.hero__bio{font-size:clamp(19px,1.8vw,24px);line-height:1.45}
.hero__strip{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s6)}
.hero__strip a{display:block;overflow:hidden;background:#2a2826}
.hero__strip img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.hero__strip a:hover img{transform:scale(1.04)}

/* technieken als ruwe balken, zoals de strepen in het logo */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.tags li{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:5px 12px;isolation:isolate}
.tags li::before{content:"";position:absolute;inset:0;background:var(--wit);z-index:-1;filter:url(#rough-sm)}
.tags .tags__meer{color:var(--wit)}
.tags .tags__meer::before{background:none;border:1.5px solid var(--wit)}

/* instagram */
.ig-icon{width:1.25em;height:1.25em;flex:none}
.top__ig{display:flex;align-items:center}
.top__ig .ig-icon{width:24px;height:24px}
.top__nav .top__ig::after{display:none}
.ig-knop{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--display);font-size:clamp(22px,2vw,26px);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 22px 8px}
.ig-knop::before{content:"";position:absolute;inset:0;background:var(--wit);z-index:-1;filter:url(#rough-sm);transition:transform .2s ease}
.ig-knop:hover::before{transform:scale(1.04)}
.ig-knop--donker{color:var(--wit)}
.ig-knop--donker::before{background:var(--ink)}
.hero .ig-knop{margin-top:var(--s5)}
.ig-band{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.ig-band__tekst{font-size:clamp(17px,1.4vw,19px);max-width:46ch}
.foot a{color:inherit}

/* projecten */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s6) var(--s4)}
.card{grid-column:span 2;min-width:0}
.card--groot{grid-column:span 3}
.card--half{grid-column:span 3}
.card--breed{grid-column:1/-1}
.card--breed .card__img img{aspect-ratio:21/9}
.card__link{display:flex;flex-direction:column;text-decoration:none;height:100%}
.card__img{overflow:hidden;background:var(--line);margin-bottom:var(--s3)}
.card__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.card--groot .card__img img{aspect-ratio:5/4}
.card__link:hover .card__img img{transform:scale(1.03)}
.card__meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.card__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.6vw,38px);line-height:1;letter-spacing:.01em;margin:0 0 var(--s2);filter:url(#rough-sm)}
.card--groot .card__title{font-size:clamp(36px,3.6vw,52px)}
.card__kort{color:var(--muted)}

/* over */
.over__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--s6);align-items:start;max-width:1000px;margin:0 auto}
.over__text{display:grid;gap:var(--s3)}
.over__text p{font-size:clamp(17px,1.4vw,19px);max-width:58ch}
.over__text em{font-style:normal;font-weight:600}
.over__text .over__punch{font-family:var(--display);font-size:clamp(34px,3.4vw,44px);line-height:1;text-transform:uppercase;filter:url(#rough-sm)}
.over__img{margin:0}
.over__img img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* contact: wit op groen, gecentreerd */
.contact__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.contact .badge-kop{margin-bottom:var(--s4)}
.contact .lead{margin-bottom:var(--s6)}
.contact__list{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.contact__list li{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.35);min-width:0}
.contact__list .label{color:var(--zacht)}
.contact__list a{font-size:clamp(18px,1.8vw,24px);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.contact__list a:hover{text-decoration:underline;text-underline-offset:6px}

/* footer */
.foot{background:var(--ink) url(/assets/img/grain-licht.png);color:#bdb8b1;font-size:14px;padding-block:var(--s6) var(--s5)}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center}
.foot__logo{width:72px;height:72px}
.foot__legal{font-size:10px;letter-spacing:.02em;color:#7d7871}

/* projectpagina */
.project{padding-top:var(--s5)}
.terug{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-bottom:var(--s5)}
.terug:hover{text-decoration:underline}
.project__head{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--s6)}
.project__head .badge-kop{margin-bottom:var(--s5)}
.meta{margin:0 0 var(--s5);display:grid;grid-template-columns:repeat(3,auto);gap:var(--s2) var(--s6);justify-content:center;text-align:center}
.meta div{display:flex;flex-direction:column;gap:var(--s1)}
.meta dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:0;font-weight:500}
.project__tekst{display:grid;gap:var(--s3);max-width:60ch}
.project__tekst p{font-size:clamp(17px,1.4vw,19px)}
/* galerij: uniform raster zoals Instagram */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);max-width:1000px;margin-inline:auto}
.gal__item{position:relative;display:block;overflow:hidden;background:var(--line);}
.gal__item img,.gal__item video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .4s ease,opacity .2s ease}
.gal__item--video{cursor:default;background:#000}
.gal__play{transition:opacity .2s ease}
.speelt .gal__play{opacity:0}
.gal__play{position:absolute;top:10px;right:10px;width:30px;height:30px;color:var(--wit);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.gal__play svg{width:100%;height:100%}
@media (max-width:560px){.gal{grid-template-columns:repeat(2,1fr)}.gal__play{width:24px;height:24px;top:6px;right:6px}}
.volgend{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);text-decoration:none;text-align:center}
.volgend .label{color:var(--muted)}
.volgend__titel{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,5vw,64px);line-height:1;filter:url(#rough)}
.volgend:hover .volgend__titel{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}

@media (max-width:900px){
  .over__in{grid-template-columns:1fr}
  .over__img{max-width:400px}
  .hero__strip{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3)}
  .card,.card--groot,.card--half{grid-column:span 1}
  .card--groot,.card--breed{grid-column:1/-1}
  .card--breed .card__img img{aspect-ratio:5/4}
  .contact__list{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:560px){
  :root{--s6:48px}
  .grid{grid-template-columns:1fr}
  .card--groot .card__img img{aspect-ratio:4/5}
  .top__in{min-height:64px}
  .top__logo img{width:48px;height:48px}
  .top__nav a{font-size:19px}
  .meta{grid-template-columns:1fr;gap:var(--s3)}
}