/* Tegenlicht · Jorgen Milans
   Een witte kamer op een zonnige namiddag. Alleen het werk heeft kleur. */

:root{
  --paper:#f6f5f2;      /* muur */
  --paper-hi:#fbfaf7;   /* muur in de zon */
  --ink:#1f1e1c;        /* tekst */
  --ink-2:#5c5852;      /* tweede stem (6:1 op papier) */
  --ink-3:#8d8880;      /* alleen groot of decoratief */
  --hair:#dcd9d3;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Jost","Avenir Next","Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);       /* zacht uitlopen */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --slow:1400ms; --mid:800ms; --fast:260ms;
  --gutter:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(17px,1.15vw,19px)/1.65 var(--serif);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:#e6e1d6;color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px;border-radius:1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:12px}

/* labels */
.eyebrow,.label{font:400 11.5px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hair{height:1px;background:var(--hair);border:0;margin:0}

/* canvas (gordijnen + licht) ligt over de inhoud, onder de navigatie */
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:5;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}
.gl-ready #gl{opacity:1}
.no-gl #gl{display:none}

/* ---------------------------------------------------------------- navigatie */
.site-head{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);pointer-events:none;transition:transform var(--mid) var(--ease),background var(--mid) var(--ease),padding var(--mid) var(--ease)}
.site-head::before{content:"";position:absolute;inset:0;background:rgba(244,243,240,.84);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity var(--mid) var(--ease);z-index:-1;border-bottom:1px solid rgba(220,217,211,.7)}
.site-head.is-solid::before{opacity:1}
.site-head.is-solid{padding-top:12px;padding-bottom:12px}
.site-head.is-hidden{transform:translateY(-110%)}
.menu-open.site-head{transform:none}
.site-head a,.site-head button{pointer-events:auto}
.brand{font:400 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ink);padding:12px 0}
.nav{display:flex;gap:clamp(18px,3vw,40px)}
.nav a{position:relative;font:400 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);padding:14px 0;transition:color var(--fast)}
.nav a::after{content:"";position:absolute;left:0;right:.28em;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--mid) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
@media (min-width:721px){ .nav a.ig{margin-left:clamp(6px,1.4vw,22px)} }   /* Instagram: een tikje los van de pagina's */
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none;background:none;border:0;font:400 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);padding:14px 0;min-height:44px;cursor:pointer}
@media (max-width:720px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:rgba(244,243,240,.96);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity var(--mid) var(--ease),visibility 0s linear var(--mid)}
  .nav a{font:200 34px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
  .nav a::after{bottom:4px}
  .menu-open .nav{opacity:1;visibility:visible;transition:opacity var(--mid) var(--ease)}
  .menu-btn{position:relative;z-index:2}
}

/* ---------------------------------------------------------------- hero: het raam */
.hero{position:relative;height:235vh;height:235svh}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:
    radial-gradient(42% 46% at 71% 13%,rgba(255,255,253,1) 0%,rgba(255,254,250,.9) 28%,rgba(255,254,250,0) 72%),
    linear-gradient(90deg,#e6e4df 0%,#e8e6e1 8%,#f7f6f2 12.5%,#faf9f6 50%,#f7f6f2 87.5%,#e8e6e1 92%,#e6e4df 100%)}
/* onderaan vloeit het raam over in de muur van de pagina: geen naad */
.hero__stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;background:linear-gradient(to bottom,rgba(246,245,242,0),var(--paper))}
/* het raam achter de vitrage: roeden en kozijn, zacht onscherp */
.window{position:absolute;inset:5% 12.5% -4% 12.5%;pointer-events:none;filter:blur(5px)}
.window::before,.window::after{content:"";position:absolute;background:rgba(112,106,96,.13)}
.window::before{left:50%;top:0;bottom:0;width:12px;transform:translateX(-50%)}
.window::after{left:0;right:0;top:33%;height:13px}
.window i{position:absolute;inset:0;border:14px solid rgba(112,106,96,.10);border-bottom:0}
.hero__title{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 var(--gutter)}
.hero__title .eyebrow{margin:0 0 clamp(18px,2.4vw,30px)}
.hero h1{margin:0;font:200 clamp(58px,11.5vw,176px)/.92 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.hero__line{margin:clamp(18px,2.4vw,30px) 0 0;font:300 italic clamp(19px,1.7vw,26px)/1.3 var(--serif);color:var(--ink-2)}
.hero__hint{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);text-align:center;margin:0;
  font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  opacity:calc(1 - var(--p,0) * 6);transition:opacity .3s}
.hero__hint span{display:block;width:1px;height:38px;margin:14px auto 0;background:linear-gradient(var(--ink-3),transparent);animation:breathe 3.6s var(--ease-soft) infinite}
@keyframes breathe{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
.hero__title{transform:translateY(calc(var(--p,0) * -4vh));opacity:calc(1 - var(--p,0) * .25)}

/* ---------------------------------------------------------------- secties */
main{position:relative;z-index:1}
.section{position:relative;padding:clamp(90px,16vh,200px) var(--gutter)}
.quote{margin:0 auto;max-width:21ch;font:200 italic clamp(30px,4.2vw,62px)/1.22 var(--serif);letter-spacing:-.01em;text-align:center;color:var(--ink)}
.quote cite{display:block;margin-top:clamp(26px,3vw,40px);font:400 11.5px/1 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}

/* werken: hangen ruim op de muur */
.works{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:clamp(110px,18vh,220px);padding-top:clamp(40px,8vh,100px)}
.work{margin:0}
.work img{width:100%;box-shadow:0 1px 1px rgba(40,34,26,.06),0 18px 40px -22px rgba(40,34,26,.35)}
.work figcaption{margin-top:18px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.work .t{font:300 italic 19px/1.3 var(--serif);color:var(--ink)}
.work .m{font:400 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.w1{grid-column:6 / span 6}
.w2{grid-column:2 / span 5}
.w3{grid-column:7 / span 5}
.w4{grid-column:3 / span 4}
.w5{grid-column:8 / span 4}
@media (max-width:720px){ .works{row-gap:96px} .w1,.w2,.w3,.w4,.w5{grid-column:1 / -1} .w2,.w4{margin-right:14%} .w3,.w5{margin-left:14%} }
.more{display:inline-flex;align-items:center;gap:14px;font:400 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);padding:16px 0;min-height:44px}
.more::after{content:"";width:46px;height:1px;background:currentColor;transition:width var(--mid) var(--ease)}
.more:hover::after{width:86px}
.works .more{grid-column:1 / -1;justify-self:center;margin-top:-30px}

/* komend event */
.event{text-align:center}
.event h2{margin:22px 0 0;font:200 clamp(44px,7vw,104px)/1 var(--serif);letter-spacing:-.01em}
.event .date{margin:26px 0 6px;font:300 clamp(21px,2vw,30px)/1.35 var(--serif)}
.event .meta{margin:0 0 30px;color:var(--ink-2)}

/* over (teaser) */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);align-items:end}
.about figure{grid-column:2 / span 4;margin:0}
.about figure img{width:100%;filter:grayscale(1) contrast(1.02);max-width:380px}
.about figure figcaption{margin-top:14px}
.about .text{grid-column:7 / span 5;padding-bottom:10px}
.about .text p{margin:0 0 1.1em;max-width:34em}
.about h2{margin:0 0 26px;font:200 clamp(36px,4.6vw,68px)/1.05 var(--serif)}
@media (max-width:720px){ .about figure,.about .text{grid-column:1 / -1} .about figure{max-width:300px;margin-bottom:40px} }

/* voet */
.site-foot{position:relative;z-index:1;padding:clamp(80px,14vh,160px) var(--gutter) 46px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:36px}
.site-foot .big{grid-column:1 / span 7;font:200 clamp(34px,4.4vw,64px)/1.05 var(--serif);margin:0}
.site-foot .cols{grid-column:8 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:16px;line-height:1.6}
.site-foot .cols a{border-bottom:1px solid var(--hair);transition:border-color var(--fast)}
.site-foot .cols a:hover{border-color:var(--ink)}
.site-foot .fine{grid-column:1 / -1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--hair)}
@media (max-width:720px){ .site-foot .big,.site-foot .cols{grid-column:1 / -1} .site-foot .cols{grid-template-columns:1fr} }

/* zacht verschijnen: licht vervaagd, een paar pixels omhoog */
.js .reveal{opacity:0;transform:translateY(16px);filter:blur(9px);transition:opacity 2s var(--ease),transform 2.2s var(--ease),filter 2.4s var(--ease)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.18s}.reveal[data-delay="2"]{transition-delay:.36s}.reveal[data-delay="3"]{transition-delay:.54s}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
  .hero{height:auto}.hero__stage{position:relative}
  .hero__hint span{animation:none}
}
/* zonder WebGL: een zachte geschilderde sluier in CSS */
.no-gl .hero__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 3%,rgba(255,255,255,.55) 6%,rgba(255,255,255,0) 9%);opacity:.8}