/* ==========================================================================
   Floris Wamelink
   A full portfolio: landing, work index, eight case pages, film, about.
   The photographs carry it. Type stays quiet and gets out of the way.
   ========================================================================== */
:root{
  --paper:#FCFCFB; --ink:#0F0E0E; --ink2:#2A2A2A; --meta:#6B6B6B;
  --warm:#F2F1EE; --line:rgba(15,14,14,.12); --line2:rgba(15,14,14,.22);
  --nav:60px; --pad:clamp(18px,4.4vw,64px);
  --s:"Fraunces",ui-serif,Georgia,serif; --b:"Inter",system-ui,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
figure{margin:0}
h1,h2,h3{font-family:var(--s);font-weight:300;margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}

/* film grain, the thing that stops flat white reading as a template */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:160px}

.eyebrow{font-family:var(--b);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin:0}

/* ---- nav --------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--e)}
.nav.on{border-bottom-color:var(--line)}
.nav__mark{font-family:var(--s);font-size:17px;letter-spacing:-.01em}
.nav__links{display:flex;gap:clamp(14px,2.2vw,30px)}
.nav__links a{font-size:13.5px;color:var(--ink2);position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--e)}
.nav__links a:hover::after{transform:scaleX(1)}
@media(max-width:560px){.nav__links a{font-size:12.5px}.nav__mark{font-size:15px}}

/* ---- hero -------------------------------------------------------------- */

/* ---------- opening screen: the work, edge to edge ---------- */
/* Eight projects fill the first viewport. Nothing autoplays. Hovering one restores it
   to full contrast and steps the rest back, so the visitor picks what to look at. */
.cs{position:relative;height:100svh;margin-top:calc(var(--nav) * -1);display:grid;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:2px;background:#0F0E0E;overflow:hidden}
.cs__c{position:relative;overflow:hidden;text-decoration:none;color:#fff;display:block}
.cs__c img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);
  transform:scale(1.02);transition:transform 1s var(--e),filter .7s var(--e),opacity .7s var(--e)}
.cs__c::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,9,.7),rgba(10,9,9,0) 55%);
  opacity:.85;transition:opacity .6s var(--e)}
.cs__l{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--e),transform .45s var(--e)}
.cs__c:hover .cs__l,.cs__c:focus-visible .cs__l{opacity:1;transform:none}
.cs__c:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.cs__t{font-family:var(--s);font-size:clamp(13px,1.25vw,19px);line-height:1.15}
.cs__y{font-family:var(--b);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.7)}
@media(hover:hover){
  .cs:hover .cs__c img{opacity:.32}
  .cs__c:hover img{opacity:1;transform:scale(1.06);filter:grayscale(0) contrast(1)}
  .cs__c:hover::after{opacity:.5}
}
/* a ground under the overlay so the headline is readable over any eight photographs */
.cs::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 50%,rgba(10,9,9,.74) 0%,rgba(10,9,9,.44) 45%,rgba(10,9,9,0) 78%);
  transition:opacity .5s var(--e)}
@media(hover:hover){.cs:hover::before{opacity:0}}
.cs__over{position:absolute;z-index:5;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;
  text-align:center;padding:0 var(--pad);color:#fff}
.cs__eyebrow{font-family:var(--b);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 16px}
.cs__h{font-family:var(--s);font-weight:300;font-size:clamp(34px,6.6vw,108px);line-height:.94;letter-spacing:-.02em;
  margin:0;text-shadow:0 2px 60px rgba(0,0,0,.5)}
.cs__sub{margin:18px auto 0;max-width:44ch;font-family:var(--b);font-size:clamp(13px,1.2vw,16px);line-height:1.55;
  color:rgba(255,255,255,.9);text-shadow:0 1px 30px rgba(0,0,0,.55)}
.cs__cue{position:absolute;z-index:5;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;
  font-family:var(--b);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* the sheet assembles once the loader has cleared */
.js .cs__over,.js .cs__cue{opacity:0;transform:translateY(calc(-50% + 18px))}
.js .cs__cue{transform:translateY(10px)}
.js .cs.in .cs__over{opacity:1;transform:translateY(-50%);transition:opacity 1.1s var(--e),transform 1.2s var(--e)}
.js .cs.in .cs__cue{opacity:1;transform:none;transition:opacity .9s var(--e) .5s,transform .9s var(--e) .5s}
.js .cs__c{opacity:0}
.js .cs__c img{transform:scale(1.06)}
.js .cs.in .cs__c{opacity:1;transition:opacity .9s var(--e)}
.js .cs.in .cs__c img{transform:scale(1.02)}
.js .cs.in .cs__c:nth-child(1){transition-delay:0s}   .js .cs.in .cs__c:nth-child(2){transition-delay:.06s}
.js .cs.in .cs__c:nth-child(3){transition-delay:.12s} .js .cs.in .cs__c:nth-child(4){transition-delay:.18s}
.js .cs.in .cs__c:nth-child(5){transition-delay:.09s} .js .cs.in .cs__c:nth-child(6){transition-delay:.15s}
.js .cs.in .cs__c:nth-child(7){transition-delay:.21s} .js .cs.in .cs__c:nth-child(8){transition-delay:.27s}
@media(hover:hover){.cs:hover .cs__over,.cs:hover .cs__cue{opacity:0;transition:opacity .4s var(--e)}}

@media(max-width:900px){
  .cs{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
  /* On a phone the captions sit exactly where the headline does. The grid reads as
     pure image instead, and the cue tells you it is tappable. */
  .cs__l{display:none}
  .cs__h{font-size:clamp(30px,8.4vw,50px)}
  .cs__sub{font-size:13px;margin-top:13px;max-width:30ch}
  .cs__eyebrow{margin-bottom:11px;font-size:9px}
  .cs::before{background:radial-gradient(78% 34% at 50% 50%,rgba(10,9,9,.86) 0%,rgba(10,9,9,.6) 48%,rgba(10,9,9,.05) 82%)}
  .cs__c img{filter:grayscale(1) contrast(1.05) brightness(.86)}
}
@media(max-width:900px) and (max-height:620px){
  .cs__sub{display:none}
}

/* ---------- loading screen ---------- */
/* Real progress: the bar tracks the eight hero frames actually decoding. It is not a
   timed animation pretending to be one. Without JS it never appears at all. */
.load{display:none}
.js .load{display:flex;position:fixed;inset:0;z-index:300;align-items:flex-end;justify-content:center;
  background:var(--paper);padding:0 var(--pad) clamp(46px,12vh,110px)}
.load__in{width:min(560px,100%);display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:baseline}
.load__mark{font-family:var(--s);font-size:clamp(19px,2.4vw,28px);letter-spacing:-.01em}
.load__pct{font-family:var(--b);font-size:11px;letter-spacing:.14em;color:var(--meta);font-variant-numeric:tabular-nums}
.load__pct::after{content:"%"}
.load__bar{grid-column:1 / -1;height:1px;background:var(--rule,#E3E1DD);overflow:hidden}
.load__bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .35s var(--e)}
.js .load{transition:transform 1s var(--e),opacity .5s var(--e) .5s}
.js .load.done{transform:translateY(-100%);opacity:0;pointer-events:none}
.js body.is-loading{overflow:hidden}
@media(prefers-reduced-motion:reduce){.js .load{transition:opacity .3s}.js .load.done{transform:none;opacity:0}}

/* ---------- the clock ---------- */
.nav__clock{display:inline-flex;align-items:center;gap:7px;font-family:var(--b);font-size:11px;letter-spacing:.04em;
  color:var(--meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav__dot{width:5px;height:5px;border-radius:50%;background:#4B8B5B;flex:none}
.nav__dot[data-shut]{background:var(--meta)}
@media(max-width:1080px){.nav__clock{display:none}}

/* film row sitting under the four features */

.lrow--film{margin-top:clamp(10px,2vh,20px)}

.strip{display:flex;flex-wrap:wrap;gap:8px 26px;padding:clamp(22px,4vh,40px) var(--pad);max-width:1500px;margin:0 auto;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);border-bottom:1px solid var(--line)}

/* ---- landing feature cases --------------------------------------------- */
.feature{max-width:1500px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--pad);display:grid;gap:clamp(46px,9vh,130px)}
.fcase{display:grid;gap:clamp(16px,3vw,44px);align-items:center}
@media(min-width:900px){
  .fcase{grid-template-columns:1.35fr 1fr}
  .fcase:nth-child(even) .fcase__img{order:2}
  .fcase:nth-child(even){grid-template-columns:1fr 1.35fr}
}
.fcase__img{overflow:hidden;background:var(--warm)}
/* Every hero keeps its own proportion. Forcing them all into 4:3 and covering threw
   away 47% of the Skate Furniture shot, which is a single object photographed upright.
   Portrait plates sit narrower instead, so the column heights stay in the same range. */
.fcase__img img{width:100%;height:auto;display:block;transition:transform 1.2s var(--e)}
.fcase__img--tall{max-width:min(74%,470px);margin-inline:auto}
.fcase:hover .fcase__img img{transform:scale(1.035)}
.fcase__body{display:flex;flex-direction:column;gap:9px}
.fcase__n{font-size:11px;letter-spacing:.16em;color:var(--meta)}
.fcase__t{font-family:var(--s);font-weight:300;font-size:clamp(28px,4.4vw,60px);line-height:1.02;letter-spacing:-.02em}
.fcase__m{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.fcase__d{margin:6px 0 0;color:var(--ink2);max-width:44ch}
.fcase__go{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line2);padding-bottom:3px;align-self:flex-start;transition:padding-right .4s var(--e)}
.fcase:hover .fcase__go{padding-right:16px}

/* ---- index listing ----------------------------------------------------- */
.listing{max-width:1500px;margin:0 auto;padding:clamp(30px,6vh,70px) var(--pad) clamp(50px,9vh,110px)}
.listing__h{font-size:clamp(22px,2.6vw,34px);margin-bottom:16px}
.lrow{display:grid;grid-template-columns:1.6fr .5fr 1fr auto;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);
  font-size:13.5px;transition:padding-left .45s var(--e)}
.lrow:last-of-type{border-bottom:1px solid var(--line)}
.lrow:hover{padding-left:12px}
.lrow span:nth-child(2),.lrow span:nth-child(3){color:var(--meta);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lrow__go{justify-self:end;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.lrow:hover .lrow__go{color:var(--ink)}
@media(max-width:700px){.lrow{grid-template-columns:1fr auto;row-gap:2px}.lrow span:nth-child(2),.lrow span:nth-child(3){grid-column:1}}

/* ---- page head (work index, about) ------------------------------------- */
.pagehead{padding:calc(var(--nav) + clamp(48px,10vh,110px)) var(--pad) clamp(26px,5vh,54px);max-width:1500px;margin:0 auto}
.pagehead__h{font-size:clamp(44px,8vw,116px);margin-top:14px}
.pagehead__sub{margin:18px 0 0;max-width:52ch;color:var(--ink2)}

/* ---- work grid --------------------------------------------------------- */
.grid{max-width:1500px;margin:0 auto;padding:0 var(--pad) clamp(50px,9vh,110px);display:grid;gap:clamp(14px,2.2vw,30px)}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}.tile--wide{grid-column:span 2}}
.tile{display:block}
.tile__img{overflow:hidden;background:var(--warm)}
.tile__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--e)}
.tile--wide .tile__img img{aspect-ratio:16/10}
.tile:hover .tile__img img{transform:scale(1.035)}
.tile__cap{display:flex;flex-direction:column;gap:2px;margin-top:11px}
.tile__t{font-family:var(--s);font-size:19px;font-weight:300;letter-spacing:-.01em}
.tile__m{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta)}

/* ---- case page --------------------------------------------------------- */
.case{padding:calc(var(--nav) + clamp(48px,10vh,110px)) var(--pad) clamp(22px,4vh,40px);max-width:1500px;margin:0 auto}
.case__h{font-size:clamp(42px,8vw,116px);margin-top:14px}
.case__sub{margin:16px 0 0;max-width:46ch;font-size:clamp(16px,1.7vw,20px);color:var(--ink2);font-family:var(--s);font-style:italic;font-weight:300}
.case__hero{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.case__hero img{width:100%;height:clamp(300px,78vh,820px);object-fit:cover}
.case__brief{max-width:1500px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--pad);display:grid;gap:clamp(24px,4vw,70px)}
@media(min-width:860px){.case__brief{grid-template-columns:1fr 1fr}}
.case__label{font-family:var(--b);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:12px}
.case__ask{font-family:var(--s);font-weight:300;font-size:clamp(19px,2.3vw,29px);line-height:1.24;letter-spacing:-.015em;margin:0;max-width:26ch}
.case__block p{margin:0 0 1em;color:var(--ink2);max-width:52ch}

/* ---- plates ------------------------------------------------------------ */
.plates{max-width:1500px;margin:0 auto;padding:0 var(--pad) clamp(40px,7vh,90px);display:grid;gap:clamp(12px,2vw,26px)}
.plate{overflow:hidden;background:var(--warm)}
.plate img{width:100%;height:auto;display:block}
.plate--wide img{max-height:86vh;object-fit:cover;width:100%}
.plate-pair{display:grid;gap:clamp(12px,2vw,26px)}
@media(min-width:760px){.plate-pair{grid-template-columns:1fr 1fr}}

/* ---- next project ------------------------------------------------------ */
.next{position:relative;display:block;max-width:1500px;margin:0 auto;padding:clamp(40px,8vh,100px) var(--pad);border-top:1px solid var(--line);overflow:hidden}
.next__k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);display:block}
.next__t{font-family:var(--s);font-weight:300;font-size:clamp(34px,6.4vw,88px);line-height:1.02;letter-spacing:-.02em;display:block;margin-top:8px}
.next__m{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);display:block;margin-top:10px}
.next__img{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%) scale(.98);width:min(320px,32vw);aspect-ratio:4/5;object-fit:cover;
  opacity:0;transition:opacity .6s var(--e),transform .9s var(--e)}
@media(max-width:820px){.next__img{display:none}}
.next:hover .next__img{opacity:1;transform:translateY(-50%) scale(1)}

/* ---- about ------------------------------------------------------------- */
.about{max-width:1500px;margin:0 auto;padding:0 var(--pad) clamp(40px,7vh,80px);display:grid;gap:clamp(26px,4vw,70px)}
@media(min-width:860px){.about{grid-template-columns:1.4fr 1fr}}
.about__body p{margin:0 0 1.2em;font-size:clamp(16px,1.7vw,19px);color:var(--ink2);max-width:56ch}
.about__body p:first-child{font-family:var(--s);font-weight:300;font-size:clamp(20px,2.4vw,30px);line-height:1.26;color:var(--ink);letter-spacing:-.015em}
.about__list{list-style:none;margin:0;padding:0}
.about__list li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}

/* ---- footer ------------------------------------------------------------ */
.foot{border-top:1px solid var(--line);max-width:1500px;margin:0 auto;padding:clamp(34px,6vh,70px) var(--pad) clamp(24px,4vh,40px)}
.foot__meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(26px,5vh,52px);font-size:12px;color:var(--meta)}

/* ---- reveal ------------------------------------------------------------ */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .85s var(--e),transform .85s var(--e)}
@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.in{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- practice intro on the landing -------------------------------------
   The site opens with a position rather than a grid. One lead paragraph set
   large, then the argument underneath it. */
.intro{max-width:1500px;margin:0 auto;padding:clamp(46px,9vh,120px) var(--pad);display:grid;gap:clamp(18px,3vw,60px);border-bottom:1px solid var(--line)}
@media(min-width:900px){.intro{grid-template-columns:.4fr 1.6fr}}
.intro__body p{margin:0 0 1.15em;max-width:64ch;color:var(--ink2);font-size:clamp(15px,1.6vw,18px)}
.intro__lead{font-family:var(--s)!important;font-weight:300;font-size:clamp(21px,2.9vw,38px)!important;line-height:1.2;letter-spacing:-.018em;color:var(--ink)!important;max-width:24ch!important}
.case__mat{margin-top:1.6em!important;padding-top:1.1em;border-top:1px solid var(--line);font-size:12.5px!important;letter-spacing:.05em;color:var(--meta)!important;max-width:40ch!important}

/* ==========================================================================
   FILM. One film per row, quiet. The previous page put a video, three stills
   and a metadata block on every entry, seven times over, which read as noise.
   Now: the film, then who and when. Nothing else.
   ========================================================================== */
.films{max-width:1500px;margin:0 auto;padding:0 var(--pad) clamp(50px,9vh,110px);display:grid;gap:clamp(58px,11vh,150px)}
.film{margin:0}
.film__stage{position:relative;overflow:hidden;background:var(--warm);margin-inline:auto;width:100%}
.film--wide .film__stage{aspect-ratio:16/9}
.film--fourthree .film__stage{aspect-ratio:4/3;max-width:min(1040px,100%)}
.film--vertical .film__stage{aspect-ratio:9/16;max-width:min(470px,80vw)}
.film__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .5s var(--e)}
.film__stage.is-playing .film__poster{opacity:0;pointer-events:none}
.film__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:70px;height:70px;border-radius:50%;
  border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(252,252,251,.94);color:var(--ink);box-shadow:0 8px 34px rgba(15,14,14,.2);
  transition:transform .4s var(--e),opacity .4s var(--e)}
.film__play:hover{transform:translate(-50%,-50%) scale(1.08)}
.film__play svg{width:21px;height:21px;transform:translateX(2px)}
.film__stage.is-playing .film__play{opacity:0;pointer-events:none}

.film__meta{display:grid;gap:10px 30px;margin-top:20px;align-items:start}
@media(min-width:820px){.film__meta{grid-template-columns:44px 1fr 200px}}
.film__n{font-size:11px;letter-spacing:.14em;color:var(--meta);font-variant-numeric:tabular-nums;padding-top:6px}
.film__t{font-family:var(--s);font-weight:300;font-size:clamp(23px,3.2vw,42px);line-height:1.04;letter-spacing:-.02em}
.film__sub{margin:4px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.film__note{margin:12px 0 0;color:var(--ink2);max-width:52ch;font-size:15px}
.film__side{display:flex;flex-direction:column;gap:5px;font-size:11.5px;letter-spacing:.06em;color:var(--meta)}
@media(max-width:819px){.film__side{flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-top:8px}}

/* ---- menu counts -------------------------------------------------------- */
.nav__links sup{font-size:9px;margin-left:3px;color:var(--meta);vertical-align:super;font-variant-numeric:tabular-nums}

/* ---- footer as a closing, not a link strip ----------------------------- */
.foot__top{padding-bottom:clamp(30px,5vh,60px)}
.foot__line{margin:14px 0 0;font-size:13px;color:var(--meta)}
.foot__cols{display:grid;gap:26px 40px;padding:clamp(26px,4vh,48px) 0;border-top:1px solid var(--line)}
@media(min-width:700px){.foot__cols{grid-template-columns:repeat(3,1fr)}}
.foot__cols div{display:flex;flex-direction:column;gap:6px}
.foot__k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-bottom:5px}
.foot__cols a,.foot__cols span:not(.foot__k){font-size:13.5px;color:var(--ink2);transition:color .25s}
.foot__cols a:hover{color:var(--ink)}
.foot__meta{border-top:1px solid var(--line);padding-top:18px}

/* ==========================================================================
   MOTION, and it is part of the story rather than decoration.
   The work is about things being uncovered: cast, pressed, pulled apart. So
   images arrive by clip-path wipe, as if being revealed from under something,
   instead of fading in. Everything else stays still.
   ========================================================================== */
.js .plate img,.js .fcase__img img,.js .tile__img img,.js .hero__plate img,.js .case__hero img{
  clip-path:inset(0 0 100% 0);transform:scale(1.06);
}
.js .plate.in img,.js .fcase.in .fcase__img img,.js .tile.in .tile__img img,
.js .hero__plate.in img,.js .case__hero.in img{
  clip-path:inset(0 0 0 0);transform:scale(1);
  transition:clip-path 1.15s var(--e),transform 1.5s var(--e);
}
/* scroll progress: a single hairline, so you always know where you are in a case */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--ink);z-index:90;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .js .plate img,.js .fcase__img img,.js .tile__img img,.js .hero__plate img,.js .case__hero img{
    clip-path:none;transform:none}
  .prog{display:none}
}

/* ---------- footer ---------- */
/* A closing page, not a strip of small print: the address to write to first, then
   four columns, then his name set large enough to be a sign-off. */
/* letter-spacing computes to a length and inherits, so the 108px heading was passing
   a -3px tracking down onto the 16px address underneath and crushing it. Each part
   sets its own type. */
.foot__big{display:block;text-decoration:none;font-size:0;line-height:1;letter-spacing:normal}
.foot__big-t{display:block;font-family:var(--s);font-weight:300;font-size:clamp(38px,8vw,108px);line-height:.98;
  letter-spacing:-.03em}
.foot__big-a{display:inline-block;margin-top:18px;letter-spacing:.01em;line-height:1.4;font-family:var(--b);font-size:clamp(13px,1.3vw,16px);color:var(--meta);
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;
  background-position:0 100%;transition:color .3s var(--e)}
.foot__big:hover{opacity:1}
.foot__big:hover .foot__big-a{color:var(--ink)}
.foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.foot__col{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
/* the address is one long unbreakable token and was pushing the grid wide on a phone */
.foot__col a,.foot__col span{overflow-wrap:anywhere;max-width:100%}
.foot__col a{position:relative;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--e),color .25s}
.foot__col a:hover{background-size:100% 1px}
.foot__col a i{font-style:normal;font-size:9px;vertical-align:5px;margin-left:3px;color:var(--meta)}
.foot__clock{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.foot__avail{color:var(--meta) !important}
/* the name, ruled through, as a sign-off */
.foot__rule{display:flex;align-items:center;gap:clamp(14px,3vw,34px);padding:clamp(18px,3.5vh,38px) 0 clamp(14px,2.5vh,26px)}
.foot__rule::before,.foot__rule::after{content:"";flex:1;height:1px;background:var(--line)}
.foot__name{font-family:var(--s);font-weight:300;font-size:clamp(15px,2.2vw,30px);letter-spacing:.02em;color:var(--ink2);
  white-space:nowrap}
.foot__meta{justify-content:space-between}
@media(max-width:860px){
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 26px}
  .foot__col--say a{font-size:12.5px}
  .foot__rule::before{display:none}
  .foot__name{font-size:15px}
  .foot__meta{gap:6px 18px;font-size:11.5px}
}

/* small phones: the wordmark shortens and the menu tightens so nothing runs off */
@media(max-width:430px){
  .nav{gap:10px}
  .nav__mark{font-size:15px}
  .nav__links{gap:13px}
  .nav__links a{font-size:12.5px}
  .nav__links sup{margin-left:2px}
}
@media(max-width:430px){
  /* Contact leaves the phone menu. The footer is one large mail link, so nothing is
     lost, and four items plus the wordmark do not fit a 360px screen. */
  .nav__links a[href^="mailto:"]{display:none}
}
@media(max-width:380px){
  .nav__mark{font-size:0;line-height:0}
  .nav__mark::after{content:"Floris W.";font-size:15px;line-height:1.2}
  .nav__links{gap:11px}
  .nav__links a{font-size:12px}
}

/* the cue reads correctly on whichever input the visitor actually has */
.cs__cue b{font-weight:inherit}
.cs__cue-t{display:none}
@media(hover:none),(pointer:coarse){.cs__cue-h{display:none}.cs__cue-t{display:inline}}

/* ---- film archive band -------------------------------------------------
   The film work used to sit at the bottom of the landing as one thin table
   row, which read as a footnote. This is a dark full width band: the page
   goes from paper to ink, and seven frames run across it at one shared
   height. Nothing is cropped, so the vertical films stay narrow and the
   aftermovies stay long, which is what a real contact strip looks like.
   The whole band is a single link to /film.
   ------------------------------------------------------------------------ */
.filmband{display:block;background:var(--ink);color:var(--paper);
  padding:clamp(40px,8vh,96px) 0 clamp(30px,5vh,58px);position:relative;overflow:hidden}
.filmband__head{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.filmband__eyebrow{font-family:var(--b);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(252,252,251,.55);margin:0}
.filmband__h{font-family:var(--s);font-weight:300;font-size:clamp(38px,6.6vw,92px);line-height:.98;
  letter-spacing:-.025em;margin:.18em 0 0;color:var(--paper)}
.filmband__meta{margin-top:clamp(14px,2.4vh,26px);display:grid;gap:14px 40px;align-items:end}
.filmband__p{margin:0;max-width:52ch;color:rgba(252,252,251,.68);font-size:clamp(14px,1.5vw,17px);line-height:1.55}
.filmband__go{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  border-bottom:1px solid rgba(252,252,251,.34);padding-bottom:4px}
.filmband__arrow{width:17px;height:17px;transition:transform .45s var(--e)}
.filmband:hover .filmband__arrow{transform:translateX(6px)}
@media(min-width:900px){
  .filmband__meta{grid-template-columns:1fr auto}
  .filmband__go{justify-self:end}
}

/* the strip: hairlines top and bottom with perforations, so it reads as film */
.filmband__strip{position:relative;margin-top:clamp(26px,4.5vh,50px);padding:15px 0;
  border-top:1px solid rgba(252,252,251,.16);border-bottom:1px solid rgba(252,252,251,.16)}
.filmband__strip::before,.filmband__strip::after{content:"";position:absolute;left:0;right:0;height:6px;
  background-image:repeating-linear-gradient(to right,rgba(252,252,251,.26) 0 11px,transparent 11px 28px);
  pointer-events:none}
.filmband__strip::before{top:4px}
.filmband__strip::after{bottom:4px}

.filmband__reel{display:flex;gap:clamp(10px,1.4vw,20px);align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding-left:var(--pad);scroll-padding-left:var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* Safari and Chrome both drop trailing padding on a flex scroller, so the last
   frame needs a real box after it or it sits flush against the right edge. */
.filmband__reel::after{content:"";flex:0 0 var(--pad);align-self:stretch}
.filmband__reel::-webkit-scrollbar{display:none}

.fstrip{margin:0;flex:0 0 auto;scroll-snap-align:start}
.fstrip__frame{position:relative;display:block;background:#1B1A1A;overflow:hidden}
.fstrip img{height:clamp(112px,15.5vw,188px);width:auto;max-width:none;display:block;
  transition:filter .6s var(--e),opacity .6s var(--e),transform 1s var(--e)}
.fstrip__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(15,14,14,.42);backdrop-filter:blur(3px);color:var(--paper);
  opacity:.85;transition:opacity .45s var(--e),background .45s var(--e)}
.fstrip__play svg{width:16px;height:16px;margin-left:1px}
.fstrip__c{margin-top:9px;max-width:15ch;display:grid;gap:2px}
.fstrip__c b{font-family:var(--s);font-weight:300;font-size:13.5px;line-height:1.15;color:rgba(252,252,251,.92)}
.fstrip__c span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(252,252,251,.45)}

/* The grey resting state only exists where there is a pointer to lift it with.
   On a phone there is no hover, so the frames stay in colour. */
@media(hover:hover){
  .fstrip img{filter:grayscale(1) contrast(1.05);opacity:.78}
  .fstrip:hover img{filter:grayscale(0) contrast(1);opacity:1;transform:scale(1.04)}
  .fstrip:hover .fstrip__play{opacity:1;background:rgba(15,14,14,.62)}
}
/* on phones the reel scrolls rather than shrinking to nothing */
@media(max-width:700px){
  .fstrip img{height:132px}
  .fstrip__play{width:28px;height:28px}
  .fstrip__play svg{width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){
  .fstrip img{transition:none}
  .filmband__reel{scroll-snap-type:none}
}