/* Werkpagina Freij Visuals. Zelfde taal als de voorstellen: zwart en wit,
   Inter Tight voor koppen, kop in een blok, geen afgeronde hoeken. */
@font-face{font-family:'Inter Tight';font-weight:700;font-display:swap;src:url(fonts/InterTight-700.woff2) format('woff2');}
@font-face{font-family:'Inter Tight';font-weight:800;font-display:swap;src:url(fonts/InterTight-800.woff2) format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(fonts/Inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(fonts/Inter-500.woff2) format('woff2');}

:root{
  --ink:#0C0C0C; --paper:#FFFFFF; --grey:#5A5A5A; --grey-d:#A3A3A3; --tile:#191919;
  --gutter:clamp(16px,4vw,56px); --max:1400px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--ink);color:var(--paper);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img,video{display:block;}

/* kopbalk: wit met difference, leesbaar op zwart en op wit */
.kopbalk{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--gutter);color:#fff;mix-blend-mode:difference;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.kopbalk.weg{transform:translateY(-110%);}
.kopbalk a{pointer-events:auto;text-decoration:none;}
.merk{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:21px;letter-spacing:-0.035em;line-height:1;}
.naarcontact{font-weight:500;font-size:15px;border-bottom:1.5px solid currentColor;padding-bottom:1px;}

/* held met videomuur */
.held{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);}
.muur{position:absolute;inset:-4% -2%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;opacity:.62;align-items:start;}
.kolom{display:flex;flex-direction:column;gap:10px;will-change:transform;}
.muurtegel{background:var(--tile);overflow:hidden;flex:none;}
.muurtegel.v{aspect-ratio:9/16;}
.muurtegel.h{aspect-ratio:16/9;}
.muurtegel video{width:100%;height:100%;object-fit:cover;}
.held::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,0) 22%,rgba(12,12,12,0) 42%,rgba(12,12,12,.92) 82%,var(--ink) 100%);}
.heldtekst{position:absolute;z-index:2;inset:auto 0 0 0;padding:0 var(--gutter) clamp(24px,4vw,48px);}
.woordmerk{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(56px,17.4vw,290px);line-height:.84;
  letter-spacing:-0.06em;margin-left:-0.04em;}
.heldonder{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(30px,4vw,64px);}
.heldonder p{max-width:520px;color:#D6D6D6;font-size:clamp(15px,1.3vw,18px);}
.omlaag{flex:none;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;text-decoration:none;
  background:var(--paper);color:var(--ink);padding:13px 20px 14px;transition:transform .15s;}
.omlaag:active{transform:scale(.98);}

/* lopende namen */
.namen{background:var(--paper);color:var(--ink);overflow:hidden;padding:clamp(18px,2.4vw,30px) 0;}
.loop{display:flex;align-items:center;width:max-content;animation:loop 60s linear infinite;}
.loop span{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(40px,7vw,104px);line-height:1;
  letter-spacing:-0.045em;white-space:nowrap;padding-bottom:.08em;}
.loop i{width:clamp(20px,2.4vw,36px);height:clamp(5px,.6vw,9px);background:var(--ink);margin:0 clamp(18px,2.4vw,36px);flex:none;}
@keyframes loop{to{transform:translateX(-50%);}}

/* blokken */
.blok{padding:clamp(72px,10vw,140px) 0;}
.blok.licht{background:var(--paper);color:var(--ink);}
.binnen{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.kop2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-bottom:clamp(40px,5vw,64px);}
.label{justify-self:start;display:inline-block;background:var(--paper);color:var(--ink);font-family:'Inter Tight',sans-serif;
  font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-0.035em;padding:.16em .36em .24em;}
.licht .label{background:var(--ink);color:var(--paper);}
h2{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(30px,3.3vw,46px);line-height:1.04;letter-spacing:-0.035em;}
h3{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(22px,2vw,26px);line-height:1.1;letter-spacing:-0.025em;}
.dash{width:30px;height:4px;background:currentColor;margin:14px 0 16px;}
.blok p{color:var(--grey-d);max-width:560px;}
.licht p{color:var(--grey);}
.kopzij{padding-top:.4em;}

/* speelbare tegels */
.speel{position:relative;display:block;width:100%;background:var(--tile);overflow:hidden;}
.licht .speel{background:#EFEFEF;}
.speel.v{aspect-ratio:9/16;}
.speel.h{aspect-ratio:16/9;}
.speel video,.speel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.kijk{position:absolute;left:12px;bottom:12px;z-index:1;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14px;
  background:var(--paper);color:var(--ink);padding:7px 11px 8px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;}
.speel:hover video,.speel:hover img{transform:scale(1.035);}
.speel:hover .kijk,.speel:focus-visible .kijk{opacity:1;transform:none;}
.speel:focus-visible{outline:3px solid currentColor;outline-offset:3px;}
@media (hover:none){.kijk{opacity:1;transform:none;}}

.werk figcaption{display:flex;justify-content:space-between;gap:14px;padding-top:12px;font-size:14.5px;line-height:1.4;color:var(--grey-d);}
.licht .werk figcaption{color:var(--grey);}
.werk figcaption b{display:block;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.015em;color:var(--paper);}
.licht .werk figcaption b{color:var(--ink);}
.tijd{flex:none;font-variant-numeric:tabular-nums;}

/* vespucci: drie lagen */
.lagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);}
.laag{display:flex;flex-direction:column;}
.balk{position:relative;height:40px;margin-bottom:22px;border-bottom:1px solid #2C2C2C;}
.balk i{position:absolute;left:0;bottom:0;height:12px;background:var(--paper);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
.lagen.zichtbaar .balk i{transform:none;}
.lagen.zichtbaar .laag:nth-child(2) .balk i{transition-delay:.15s;}
.lagen.zichtbaar .laag:nth-child(3) .balk i{transition-delay:.3s;}
.balk span{position:absolute;left:0;top:0;font-size:13.5px;font-weight:500;color:var(--grey-d);}
.laagkop{display:flex;align-items:baseline;gap:14px;}
.nr{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(44px,5vw,72px);line-height:.8;letter-spacing:-0.05em;}
.laag p{font-size:15px;margin:12px 0 22px;min-height:4.8em;}
.laag .speel{margin-top:auto;}

/* reels */
.reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(12px,1.6vw,22px);}

/* films */
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(12px,1.6vw,22px);}
.films .vol{grid-column:1/-1;}
.films .vol .speel{aspect-ratio:21/9;}
.films .vol figcaption b{font-size:22px;}

/* citaten */
.citaten .binnen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);}
.citaat blockquote{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.18;letter-spacing:-0.025em;}
.citaat figcaption{margin-top:24px;font-weight:500;font-size:15.5px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;}
.tekstknop{font-weight:500;border-bottom:1.5px solid currentColor;padding:0 0 1px;color:var(--grey);}
.tekstknop:hover{color:var(--ink);}

/* contact */
.contact{padding-bottom:28px;}
.contact .binnen:first-child{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.contact h2{font-size:clamp(38px,5vw,72px);}
.nummer{display:inline-block;margin-top:28px;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-0.03em;text-decoration:none;}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.knop{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;text-decoration:none;background:var(--paper);color:var(--ink);
  padding:13px 22px 14px;border:2px solid var(--paper);transition:transform .15s;}
.knop.omlijnd{background:none;color:var(--paper);}
.knop:active{transform:scale(.98);}
.groot{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(180px,30vw,440px);line-height:.8;letter-spacing:-0.06em;}
.voet{display:flex;justify-content:space-between;margin-top:clamp(56px,8vw,110px);padding-top:18px;border-top:1px solid #2C2C2C;
  font-size:13px;color:#6E6E6E;}

/* speler */
.speler{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:rgba(8,8,8,.97);color:var(--paper);}
.speler::backdrop{background:rgba(8,8,8,.97);}
.speler[open]{display:flex;}
.spelerbinnen{margin:auto;display:flex;flex-direction:column;align-items:center;padding:16px;max-width:100%;}
.spelerbeeld video,.spelerbeeld img{max-width:min(92vw,1500px);max-height:calc(100dvh - 120px);width:auto;height:auto;background:#000;}
.spelerbalk{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;}
.spelertitel{font-size:14.5px;color:var(--grey-d);line-height:1.35;}
.spelertitel b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;color:var(--paper);margin-right:8px;}
.spelerknoppen{display:flex;gap:8px;flex:none;}
.spelerknoppen button{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15px;padding:9px 14px 10px;border:1.5px solid #3A3A3A;}
.spelerknoppen button:hover{border-color:var(--paper);}
.spelerknoppen .sluit{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* tablet */
@media (max-width:1000px){
  .reels{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* telefoon */
@media (max-width:700px){
  .kopbalk{padding:16px var(--gutter);}
  .merk{font-size:19px;}
  .muur{gap:6px;inset:-4% -6%;}
  .kolom{gap:6px;}
  .heldonder{flex-direction:column;align-items:flex-start;gap:18px;}
  .kop2{grid-template-columns:1fr;gap:22px;}
  .kopzij{padding-top:0;}
  .lagen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 6px;scrollbar-width:none;}
  .lagen::-webkit-scrollbar{display:none;}
  .laag{flex:0 0 68%;scroll-snap-align:start;scroll-margin-left:var(--gutter);}
  .laag p{min-height:0;}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px;}
  .werk figcaption{font-size:13px;flex-direction:column;gap:2px;}
  .werk figcaption b{font-size:15px;}
  .films{grid-template-columns:1fr;}
  .films .vol .speel{aspect-ratio:16/9;}
  .citaten .binnen{grid-template-columns:1fr;}
  .contact .binnen:first-child{grid-template-columns:1fr;}
  .groot{display:none;}
  .spelerbalk{flex-direction:column;align-items:flex-start;}
  .spelerbeeld video,.spelerbeeld img{max-width:100%;max-height:calc(100dvh - 150px);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .loop{animation:none;}
  .speel video,.speel img,.kijk,.kopbalk{transition:none;}
  .balk i{transform:none;transition:none;}
}