/* ═══════════════════════════════════════════════════════════
   ABSTRACT AMSTERDAM — horizontal monograph
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Boska';
  src:url(assets/fonts/Boska-Variable.woff2) format('woff2-variations');
  font-weight:200 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url(assets/fonts/GeneralSans-Variable.woff2) format('woff2-variations');
  font-weight:200 700; font-display:swap; font-style:normal;
}

:root{
  /* ── palette: sampled from the photography ── */
  --ink:        #16120e;
  --ink-2:      #1f1913;
  --bone:       #efeae1;
  --sand:       #dcd3c6;
  --clay:       #b4a692;   /* accent, DARK grounds only: 7.82:1 on --ink */
  --clay-deep:  #74664e;   /* the same accent for LIGHT grounds: 4.67:1 on --bone */
  --cream:      #f4efe7;
  --cream-dim:  #c4baa9;
  --taupe:      #574e43;
  /* Two muted greys, one per ground. One token cannot serve both: the old single
     #8a7f6f measured 3.28:1 on bone (sub-AA) and 4.74:1 on ink. Measured, not
     guessed: --taupe-dim 4.89:1 on --bone, --sand-dim 6.56:1 on --ink. */
  --taupe-dim:  #6f6353;   /* muted text on LIGHT grounds */
  --sand-dim:   #a2988a;   /* muted text on DARK grounds */
  --line-l:     rgba(87,78,67,.20);
  --line-d:     rgba(244,239,231,.18);

  --serif:'Boska', 'Times New Roman', serif;
  --sans:'General Sans', system-ui, -apple-system, sans-serif;

  /* ── spacing: keeps every panel clear of the fixed chrome ── */
  --px:  clamp(26px, 4vw, 74px);
  --pt:  clamp(88px, 10vh, 124px);
  --pb:  clamp(96px, 13vh, 148px);

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
ol,ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p,blockquote,figure{margin:0;}
::selection{background:var(--clay);color:var(--ink);}
:focus-visible{outline:1px solid currentColor;outline-offset:4px;}

/* ── typography primitives ─────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.94;
  letter-spacing:-.025em;
}
.label{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(9.5px,.72vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
  display:block;
}
.body{
  font-size:clamp(13px,1.02vw,15.5px);
  line-height:1.72;
  font-weight:400;
  max-width:34ch;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:.06em;}

/* Masked line reveal wrapper. The line slides in from the LEFT inside this box,
   so the mask needs clearance on the left as well as under the descenders, or a
   glyph that overhangs its advance is sheared against the edge it enters from. */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;
    padding-left:.06em;margin-left:-.06em;}
.ln>i{display:block;font-style:normal;will-change:transform;}

.rule{height:1px;width:100%;background:currentColor;opacity:.22;transform-origin:0 50%;}

/* ═══ FIXED CHROME ═══════════════════════════════════════ */
.chrome{
  /* above .menu (70) so the close button stays clickable while it is open */
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(22px,2.6vh,34px) var(--px) 0;
  pointer-events:none;
}
.chrome > *{pointer-events:auto;}
.wordmark{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(11px,.86vw,13.5px);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);transition:color .45s var(--ease);
}
.menu-btn{
  display:flex;align-items:center;gap:14px;
  color:var(--cream);transition:color .45s var(--ease);
}
.menu-btn__t{font-size:clamp(10px,.78vw,12px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;}
.menu-btn__i{display:block;width:26px;height:8px;position:relative;}
.menu-btn__i span{
  position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .5s var(--ease);
}
.menu-btn__i span:nth-child(1){top:0;}
.menu-btn__i span:nth-child(2){top:7px;}
body.menu-open .menu-btn__i span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
body.menu-open .menu-btn__i span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

/* HUD — bottom bar */
.hud{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 var(--px) clamp(20px,2.6vh,32px);
  pointer-events:none;
  transition:opacity .55s var(--ease);
}
/* the deck HUD is meaningless once the footer arrives */
/* visibility, not opacity alone: the rail re-enables pointer-events, so a HUD
   faded to 0 still swallowed the clicks on three footer links (measured at the
   release and bottom stops). visibility also takes the slider out of the tab
   order once it has nothing left to steer. */
body.at-foot .hud{opacity:0;visibility:hidden;}
.hud{transition:opacity .55s var(--ease), visibility 0s linear 0s;}
body.at-foot .hud{transition:opacity .55s var(--ease), visibility 0s linear .55s;}
/* each chrome cluster reads the tone of the panel actually beneath it */
.wordmark,.hud__ch,.menu-btn,.hud__hint,.hud__mid{
  color:var(--cream);transition:color .45s var(--ease);
}
.hud__ch{display:flex;align-items:baseline;gap:12px;font-size:clamp(10px,.78vw,12px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;}
.hud__ch b{font-weight:500;opacity:.5;}
.hud__ch em{font-style:normal;display:block;overflow:hidden;min-width:10em;}
.hud__ch em span{display:block;}

.hud__mid{display:flex;align-items:center;gap:16px;flex:0 1 min(420px,34vw);}
.hud__pct{font-size:clamp(10px,.76vw,11.5px);letter-spacing:.1em;font-variant-numeric:tabular-nums;opacity:.72;}

/* ── DEVICE 1 · de loper ──────────────────────────────────
   A slider, so it is focusable, hit-testable and 44px tall to the finger while
   the drawn rule stays a hairline. The 44px comes from the padding, not from a
   taller line: the padding is the touch target and is load-bearing at 390. */
.rail{
  position:relative;flex:1;pointer-events:auto;cursor:ew-resize;
  padding:22px 0;                 /* 1px rule + 2x22 = 45px of touch target */
  touch-action:none;              /* the drag is ours, not the browser's */
  -webkit-tap-highlight-color:transparent;
}
.rail__bar{position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.24;}
.rail__bar i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:0 50%;}
/* the ticks are the panels' real fractions of the travel, written by JS */
.rail__ticks{position:absolute;left:0;right:0;top:50%;height:1px;}
.rail__ticks b{
  position:absolute;top:-3px;width:1px;height:7px;background:currentColor;opacity:.36;
  transition:opacity .4s var(--ease),height .4s var(--ease),top .4s var(--ease);
}
.rail:hover .rail__ticks b,.rail:focus-visible .rail__ticks b{opacity:.6;height:11px;top:-5px;}
.rail__grip{
  position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:currentColor;
  transition:transform .35s var(--ease);
}
.rail:hover .rail__grip,body.rail-drag .rail__grip{transform:scale(1.5);}
body.rail-drag .rail{cursor:grabbing;}
.rail:focus-visible{outline:1px solid currentColor;outline-offset:0;}

.hud__hint{display:flex;align-items:center;gap:10px;font-size:clamp(10px,.76vw,11.5px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.8;}
.hud__hint svg{width:24px;height:6px;overflow:visible;display:block;}
.hud__hint svg path{stroke:currentColor;stroke-width:1;fill:none;}
.hud__hint i{display:block;animation:nudge 2.4s var(--ease) infinite;}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* one flag per chrome corner — horizontally the deck varies by x, vertically by y,
   so each cluster reads the panel actually sitting under its own position */
body[data-tone-tl="light"] .wordmark{color:var(--ink);}
body[data-tone-tr="light"] .menu-btn{color:var(--ink);}
body[data-tone-bl="light"] .hud__ch{color:var(--ink);}
body[data-tone-br="light"] .hud__hint{color:var(--ink);}
body[data-tone="light"] .hud__mid{color:var(--ink);}
body.menu-open .wordmark,body.menu-open .hud__ch,
body.menu-open .menu-btn,body.menu-open .hud__hint,
body.menu-open .hud__mid{color:var(--cream);}

/* ═══ GRAIN ══════════════════════════════════════════════ */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ═══ CURSOR ═════════════════════════════════════════════ */
.cursor{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  width:9px;height:9px;border-radius:50%;
  background:var(--cream);mix-blend-mode:difference;
  transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s, width .5s var(--ease), height .5s var(--ease);
  display:grid;place-items:center;
}
.cursor__t{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ink);opacity:0;transition:opacity .3s;white-space:nowrap;
}
body.cursor-on .cursor{opacity:1;}
body.cursor-lg .cursor{width:88px;height:88px;}
body.cursor-lg .cursor__t{opacity:1;}
@media (hover:none),(pointer:coarse){.cursor{display:none!important;}}

/* ═══ LOADER ═════════════════════════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:grid;grid-template-rows:1fr auto;
  padding:var(--px);
}
.loader__mid{display:grid;place-items:center;}
.loader__wm{
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(30px,5.4vw,84px);letter-spacing:-.02em;line-height:1;
  display:flex;gap:.26em;
}
.loader__wm span{display:block;overflow:hidden;padding-bottom:.06em;}
.loader__wm span i{display:block;font-style:normal;}
.loader__bot{display:flex;align-items:flex-end;justify-content:space-between;color:var(--cream-dim);}
.loader__lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;}
.loader__pct{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,52px);font-variant-numeric:tabular-nums;line-height:1;color:var(--cream);}
.loader__bar{position:absolute;left:var(--px);right:var(--px);bottom:calc(var(--px) + 64px);height:1px;background:var(--line-d);}
.loader__bar i{position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:0 50%;}
html.no-js .loader{display:none;}

/* ═══ MENU OVERLAY ═══════════════════════════════════════ */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--pt) + 10px) var(--px) var(--pb);
  /* closed state is a LEFT inset so the overlay opens left to right, on the same
     axis as the deck. Written here, not only in JS, because a clip-path
     transition out of `none` does not interpolate (BUILD-PITFALLS 22). */
  clip-path:inset(0 100% 0 0);
  visibility:hidden;
}
body.menu-open .menu{visibility:visible;}
.menu__list{display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,.5vh,8px);}
.menu__item{overflow:hidden;padding-bottom:.06em;}
.menu__link{
  display:grid;grid-template-columns:clamp(34px,3.2vw,54px) auto;align-items:start;
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(34px,9.5vw,86px);line-height:1.08;letter-spacing:-.028em;
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.menu__link b{font-family:var(--sans);font-weight:500;font-size:clamp(10px,.8vw,12px);letter-spacing:.2em;opacity:.45;padding-top:1.1em;}
.menu__list:hover .menu__link{opacity:.3;}
.menu__list .menu__link:hover{opacity:1;transform:translateX(clamp(8px,1.4vw,26px));}
.menu__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;color:var(--cream-dim);}
.menu__foot a{transition:color .35s;}
.menu__foot a:hover{color:var(--cream);}
.menu__socials{display:flex;gap:clamp(14px,1.8vw,28px);}

/* ═══ DECK ═══════════════════════════════════════════════ */
#deck{position:relative;}
.track{display:flex;height:100vh;height:100svh;will-change:transform;}
.panel{
  position:relative;flex:0 0 auto;height:100vh;height:100svh;
  overflow:hidden;background:var(--ink);
}
.panel--light{background:var(--bone);color:var(--taupe);}

/* ── P1 · HERO ───────────────────────────────────────── */
.p-hero{width:100vw;}
.strip{position:absolute;inset:0;display:flex;}
.strip__col{position:relative;overflow:hidden;height:100%;}
.strip__col:nth-child(1){flex:0 0 37%;}
.strip__col:nth-child(2){flex:0 0 31%;}
.strip__col:nth-child(3){flex:0 0 32%;}
.strip__col + .strip__col::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(244,239,231,.16);z-index:3;
}
.strip__col img{width:114%;height:100%;object-fit:cover;max-width:none;margin-left:-7%;}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top right, rgba(10,8,6,.95) 0%, rgba(10,8,6,.74) 26%, rgba(10,8,6,0) 60%),
    linear-gradient(to top, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 34%),
    linear-gradient(to bottom, rgba(10,8,6,.42) 0%, rgba(10,8,6,0) 22%);
}
.hero__type{
  position:absolute;z-index:4;left:var(--px);bottom:var(--pb);
  max-width:min(64vw,920px);
}
.hero__type .label{color:var(--cream-dim);margin-bottom:clamp(16px,2.2vh,30px);}
.hero__ttl{font-size:clamp(46px,9.4vw,168px);color:var(--cream);}
.hero__meta{
  position:absolute;z-index:4;right:var(--px);bottom:var(--pb);
  text-align:right;color:var(--cream-dim);
  font-size:clamp(10px,.78vw,12px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  line-height:1.9;
}

/* ── P2 · MANIFEST + DEVICE 2 ────────────────────────── */
/* Two columns: the claim on the left, the claim made operable on the right. The
   panel widened from 80vw to 100vw when the device arrived; the right padding
   reserves the photo slat, which stays absolutely positioned and full height. */
.p-manifest{
  width:100vw;background:var(--ink);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) clamp(300px,28vw,430px);
  gap:clamp(30px,4.2vw,80px);
  align-items:center;
  padding:var(--pt) calc(var(--px) + clamp(150px,17vw,290px)) var(--pb) var(--px);
}
.mf__body{position:relative;z-index:2;}
.mf__body .label{color:var(--clay);margin-bottom:clamp(22px,3.4vh,44px);}
.mf__q{font-size:clamp(30px,4.4vw,76px);line-height:1.04;color:var(--cream);}
.mf__q u{text-decoration:none;color:var(--clay);}
.mf__rule{margin:clamp(28px,4.2vh,54px) 0 clamp(14px,1.8vh,22px);color:var(--cream);}
.mf__cite{
  font-style:normal;color:var(--cream-dim);display:block;
  font-size:clamp(10px,.78vw,12px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.mf__img{
  position:absolute;z-index:1;top:0;bottom:0;right:0;
  width:clamp(150px,17vw,290px);
  overflow:hidden;background:var(--ink-2);
}
.mf__img img{width:112%;height:100%;object-fit:cover;max-width:none;margin-left:-6%;}

/* ── DEVICE 2 · de weglaatproef ──────────────────────────
   Nine switches, six of which can be switched off. Not a card: a hairline
   ledger, same furniture as every index row on the deck. */
.wgl{position:relative;z-index:2;border-top:1px solid var(--line-d);padding-top:clamp(16px,2.2vh,26px);}
.wgl__ttl{color:var(--clay);}
.wgl__hint{
  margin:.9em 0 clamp(18px,2.4vh,28px);color:var(--cream-dim);
  font-size:clamp(12px,.94vw,14px);line-height:1.6;max-width:32ch;
}
.wgl__set{display:flex;flex-wrap:wrap;gap:8px;}
.wgl__chip{
  display:inline-flex;align-items:center;gap:.7em;min-height:44px;
  padding:0 clamp(11px,.95vw,15px);
  border:1px solid var(--line-d);color:var(--cream);
  font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:color .45s var(--ease),border-color .45s var(--ease),opacity .45s var(--ease);
}
/* the dot IS the switch state, so it never depends on colour alone */
.wgl__chip::before{
  content:'';width:7px;height:7px;flex:0 0 auto;border-radius:50%;
  background:var(--clay);border:1px solid var(--clay);
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.wgl__chip[aria-checked="false"]{color:var(--sand-dim);border-color:rgba(244,239,231,.09);opacity:.6;}
.wgl__chip[aria-checked="false"]::before{background:transparent;transform:scale(.72);}
.wgl__chip:hover{border-color:var(--cream-dim);}
.wgl__chip.is-keep{border-style:dashed;cursor:not-allowed;}
.wgl__chip.is-keep::before{background:var(--cream);border-color:var(--cream);}
/* the refusal is a nudge, not a state: 8px there and back, once */
.wgl__chip.is-refuse{animation:refuse .34s var(--ease) 1;}
@keyframes refuse{0%,100%{transform:translateX(0)}30%{transform:translateX(7px)}65%{transform:translateX(-3px)}}

.wgl__out{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:0 clamp(12px,1.1vw,18px);
  margin-top:clamp(20px,2.8vh,32px);
}
.wgl__n{
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(38px,4.2vw,72px);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.wgl__unit{
  font-size:clamp(9.5px,.74vw,11px);letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--sand-dim);line-height:1.6;align-self:end;
}
.wgl__bar{
  grid-column:1 / -1;position:relative;height:1px;margin-top:clamp(14px,1.8vh,22px);
  background:var(--line-d);
}
.wgl__bar i{
  position:absolute;inset:0;background:var(--clay);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.wgl__say{
  margin-top:clamp(12px,1.6vh,18px);color:var(--cream-dim);
  font-size:clamp(12px,.94vw,14px);line-height:1.6;min-height:2.6em;max-width:34ch;
}

/* ── P3 · OVER ONS ───────────────────────────────────── */
.p-about{
  width:112vw;background:var(--bone);color:var(--taupe);
  display:grid;
  grid-template-columns:clamp(220px,19vw,320px) clamp(240px,24vw,410px) 1fr;
  gap:clamp(30px,4vw,74px);
  padding:var(--pt) var(--px) var(--pb);
  align-items:start;
}
.ab__intro{padding-top:clamp(20px,7vh,90px);}
.ab__intro .label{color:var(--taupe-dim);margin-bottom:clamp(18px,2.4vh,30px);}
.ab__img{
  position:relative;overflow:hidden;background:var(--sand);
  margin-top:calc(var(--pt) * -1);
  margin-bottom:calc(var(--pb) * -1);
  height:100vh;height:100svh;
}
.ab__img img{width:112%;height:100%;object-fit:cover;max-width:none;margin-left:-6%;}
.ab__img figcaption{
  position:absolute;left:14px;bottom:calc(var(--pb) - 6px);
  writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--cream);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}
.ab__main{display:flex;flex-direction:column;height:100%;justify-content:center;gap:clamp(30px,5vh,66px);}
.ab__ttl{font-size:clamp(30px,3.8vw,66px);color:var(--ink);}
.ab__idx{display:flex;flex-direction:column;gap:clamp(14px,2vh,26px);}
.ab__row{display:grid;grid-template-columns:clamp(38px,3.4vw,58px) 1fr;gap:clamp(14px,1.6vw,26px);padding-top:clamp(12px,1.6vh,20px);border-top:1px solid var(--line-l);}
.ab__n{font-family:var(--serif);font-weight:300;font-size:clamp(15px,1.3vw,21px);color:var(--clay-deep);line-height:1;}
.ab__row h3{
  font-family:var(--sans);font-weight:500;color:var(--ink);
  font-size:clamp(11px,.86vw,13px);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6em;
}
.ab__row p{color:var(--taupe-dim);font-size:clamp(12.5px,.98vw,14.5px);line-height:1.68;max-width:44ch;}

/* ── P4 · WERK ───────────────────────────────────────── */
.p-work{
  width:max-content;background:var(--bone);color:var(--taupe);
  display:flex;align-items:center;gap:clamp(34px,4.4vw,86px);
  padding:var(--pt) clamp(60px,7vw,150px) var(--pb) var(--px);
}
.wk__head{flex:0 0 clamp(230px,21vw,350px);}
.wk__head .label{color:var(--taupe-dim);margin-bottom:clamp(16px,2.2vh,28px);}
.wk__ttl{font-size:clamp(44px,6.4vw,124px);color:var(--ink);margin-bottom:clamp(20px,3vh,36px);}
.wk__head .body{color:var(--taupe-dim);}
.wk__row{display:flex;align-items:center;gap:clamp(26px,3.4vw,68px);}
.wk__item{flex:0 0 auto;width:var(--w);transform:translateY(var(--y));}
/* explicit height keeps the staggered items clear of the fixed HUD */
.wk__media{position:relative;overflow:hidden;height:var(--h);background:var(--sand);}
.wk__media img{
  width:112%;height:100%;object-fit:cover;max-width:none;margin-left:-6%;
  transition:transform 1.1s var(--ease);
}
.wk__item:hover .wk__media img{transform:scale(1.05);}
/* stacked caption — stays readable at the narrower item widths */
.wk__cap{
  display:grid;grid-template-columns:auto 1fr;gap:.35em clamp(10px,.9vw,14px);
  padding-top:clamp(14px,1.8vh,22px);margin-top:clamp(12px,1.6vh,18px);
  border-top:1px solid var(--line-l);
}
.wk__no{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--clay-deep);padding-top:.55em;}
.wk__nm{grid-column:2;font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.6vw,28px);color:var(--ink);line-height:1.12;letter-spacing:-.015em;}
.wk__mt{grid-column:2;font-size:clamp(9.5px,.74vw,11px);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--taupe-dim);line-height:1.55;}

/* ── P5 · WERKWIJZE ──────────────────────────────────── */
.p-proc{
  width:120vw;background:var(--ink);color:var(--cream-dim);
  display:grid;
  grid-template-columns:clamp(250px,23vw,410px) 1fr clamp(230px,25vw,420px);
  grid-template-rows:1fr auto;
  gap:clamp(28px,3.6vh,56px) clamp(30px,4vw,76px);
  padding:var(--pt) var(--px) var(--pb);
}
.pr__lead{align-self:center;}
.pr__lead .label{color:var(--clay);margin-bottom:clamp(18px,2.6vh,32px);}
.pr__ttl{font-size:clamp(27px,3.4vw,58px);color:var(--cream);}
.pr__steps{align-self:center;display:flex;flex-direction:column;}
.pr__step{
  display:grid;grid-template-columns:clamp(42px,3.6vw,64px) 1fr;
  gap:clamp(14px,1.8vw,30px);
  padding:clamp(16px,2.2vh,28px) 0;
  border-top:1px solid var(--line-d);
  transition:padding-left .6s var(--ease);
}
.pr__step:last-child{border-bottom:1px solid var(--line-d);}
.pr__step:hover{padding-left:clamp(8px,1vw,18px);}
.pr__n{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.5vw,26px);color:var(--clay);line-height:1;}
.pr__step h3{
  font-family:var(--sans);font-weight:500;color:var(--cream);
  font-size:clamp(11px,.9vw,13.5px);letter-spacing:.17em;text-transform:uppercase;margin-bottom:.7em;
}
.pr__step p{font-size:clamp(12.5px,.98vw,14.5px);line-height:1.7;max-width:46ch;}
.pr__img{
  position:relative;overflow:hidden;background:var(--ink-2);
  margin-top:calc(var(--pt) * -1);      /* bleeds off the top edge */
  align-self:stretch;                   /* …and fills down to the stat band */
}
.pr__img img{width:112%;height:100%;object-fit:cover;max-width:none;margin-left:-6%;}
.pr__stats{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,60px);
  border-top:1px solid var(--line-d);padding-top:clamp(18px,2.4vh,30px);
  max-width:min(76vw,1020px);
}
.pr__stat b{
  display:block;font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(34px,4vw,70px);line-height:.94;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
/* direct child only — the count-up <span> lives inside <b> and must inherit its size */
.pr__stat > span{
  display:block;margin-top:.7em;color:var(--sand-dim);
  font-size:clamp(9.5px,.74vw,11px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}

/* ── P6 · CONTACT ────────────────────────────────────── */
.p-contact{width:100vw;display:grid;grid-template-columns:44% 1fr;background:var(--ink);}
.ct__img{position:relative;overflow:hidden;background:var(--ink-2);}
.ct__img img{width:112%;height:100%;object-fit:cover;max-width:none;margin-left:-6%;}
.ct__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pt) var(--px) var(--pb);max-width:780px;
}
.ct__body .label{color:var(--clay);margin-bottom:clamp(20px,3vh,36px);}
.ct__ttl{font-size:clamp(30px,4vw,70px);color:var(--cream);margin-bottom:clamp(20px,2.8vh,34px);}
.ct__body .body{color:var(--cream-dim);margin-bottom:clamp(28px,4vh,52px);}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:16px;
  align-self:flex-start;overflow:hidden;
  border:1px solid var(--line-d);
  padding:clamp(14px,1.7vh,20px) clamp(20px,2vw,32px);
  font-size:clamp(10px,.8vw,12px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--cream);transition:color .55s var(--ease), border-color .55s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--cream);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .6s var(--ease);z-index:0;
}
.btn:hover{color:var(--ink);border-color:var(--cream);}
.btn:hover::before{transform:scaleY(1);transform-origin:50% 0;}
.btn span,.btn svg{position:relative;z-index:1;}
.btn svg{width:26px;height:8px;overflow:visible;transition:transform .55s var(--ease);}
.btn svg path{stroke:currentColor;stroke-width:1;fill:none;}
.btn:hover svg{transform:translateX(7px);}
.ct__mail{margin-top:clamp(24px,3.4vh,42px);}
.ct__mail .label{color:var(--sand-dim);margin-bottom:.9em;}
.ct__mail a{
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(17px,1.7vw,30px);letter-spacing:-.015em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .6s var(--ease);padding-bottom:.1em;
}
.ct__mail a:hover{background-size:100% 1px;}

/* ═══ FOOTER ═════════════════════════════════════════════ */
.foot{
  position:relative;background:var(--ink);color:var(--cream-dim);
  padding:clamp(64px,11vh,140px) var(--px) clamp(26px,3.6vh,42px);
}
.foot__wm{
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(38px,11.2vw,214px);line-height:.9;letter-spacing:-.035em;
  margin-bottom:clamp(44px,7vh,96px);
}
.foot__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(28px,3.4vw,60px);
  border-top:1px solid var(--line-d);padding-top:clamp(26px,3.6vh,46px);
  margin-bottom:clamp(44px,6.5vh,88px);
}
.foot__col .label{color:var(--sand-dim);margin-bottom:clamp(14px,1.9vh,22px);}
.foot__col p,.foot__col a{
  display:block;font-size:clamp(12.5px,.98vw,14.5px);line-height:1.85;color:var(--cream-dim);
}
.foot__col a{transition:color .35s;width:fit-content;}
.foot__col a:hover{color:var(--cream);}
.nl{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-d);padding-bottom:10px;max-width:280px;}
.nl input{
  flex:1;background:none;border:0;outline:none;color:var(--cream);
  font-family:var(--sans);font-size:13.5px;padding:4px 0;min-width:0;
}
.nl input::placeholder{color:var(--sand-dim);}
.nl button{color:var(--cream-dim);transition:color .35s,transform .5s var(--ease);}
.nl button:hover{color:var(--cream);transform:translateX(4px);}
.nl svg{width:24px;height:8px;overflow:visible;display:block;}
.nl svg path{stroke:currentColor;stroke-width:1;fill:none;}
.foot__legal{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line-d);padding-top:clamp(18px,2.4vh,26px);
  font-size:clamp(10px,.76vw,11.5px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--sand-dim);
}
.foot__legal a:hover{color:var(--cream);}

/* ═══ RESPONSIVE — the phone is its own design ═══════════
   THE 390 DECISION: below 901px the deck stops being horizontal and becomes a
   vertical page. It is not a media query on a horizontal deck, it is a different
   reading. A sideways deck on a phone fights the browser's own back-swipe, hides
   how much is left, and the panels are portrait-photography-led anyway, so they
   want a column. What carries the monograph idea across is the device: the rail
   stays, keyed to the same six sheets over the same arithmetic, and on the phone
   it is promoted from a companion to the primary navigator, which is why
   `.hud__mid` is shown here and `.hud__hint` is the thing that goes.

   Same condition as the JS matchMedia branches that skip the pinned deck. If the
   two ever disagree the track keeps its 732vw flex layout with nothing driving it
   on X, and every panel past the hero becomes unreachable. */
@media (max-width:900px), (prefers-reduced-motion:reduce){
  :root{--pt:clamp(96px,13vh,120px);--pb:clamp(112px,14vh,140px);}
  .track{display:block;height:auto;}
  .panel{width:100%!important;height:auto;min-height:100svh;overflow:hidden;}

  .strip__col:nth-child(3){display:none;}
  .strip__col:nth-child(1){flex:0 0 56%;}
  .strip__col:nth-child(2){flex:0 0 44%;}
  .hero__ttl{font-size:clamp(42px,13vw,74px);}
  .hero__meta{display:none;}

  /* One column, and the device follows the claim instead of sitting beside it.
     The panel is allowed to be taller than the screen here: the weglaatproef is
     the reason to stop on this sheet, so cramming it into 100svh would be the
     desktop composition scaled down rather than a phone design (law 49). */
  .p-manifest{
    grid-template-columns:1fr;align-items:start;
    gap:clamp(26px,4vh,40px);
    padding:var(--pt) var(--px) var(--pb);
    height:auto;
  }
  .mf__q{font-size:clamp(26px,7.2vw,44px);}
  .mf__img{display:none;}
  .wgl__n{font-size:clamp(40px,12vw,60px);}

  .p-about{grid-template-columns:1fr;gap:clamp(28px,5vh,48px);}
  .ab__img{margin:0;height:62svh;}
  /* vertical caption would run straight through the fixed wordmark / chapter */
  .ab__img figcaption{
    writing-mode:horizontal-tb;transform:none;
    left:16px;right:16px;bottom:14px;
  }
  .ab__ttl{font-size:clamp(28px,8vw,46px);}
  .ab__intro{padding-top:0;}
  .ab__main{justify-content:flex-start;}

  /* the deck's wide right gutter is dead space once the panel is full-width */
  .p-work{flex-direction:column;align-items:stretch;gap:clamp(30px,5vh,52px);
          padding-right:var(--px);}
  .wk__head{flex:0 0 auto;}
  .wk__row{flex-direction:column;align-items:flex-start;gap:clamp(30px,5vh,52px);}
  .wk__item{width:100%!important;transform:none!important;}
  .wk__media{height:clamp(300px,50svh,460px);}

  .p-proc{grid-template-columns:1fr;grid-template-rows:none;}
  .pr__img{margin-top:0;height:38svh;order:-1;}
  .pr__stats{grid-template-columns:1fr;gap:24px;max-width:none;}
  .pr__ttl{font-size:clamp(26px,7.4vw,42px);}

  .p-contact{grid-template-columns:1fr;}
  .ct__img{height:52svh;}
  .ct__ttl{font-size:clamp(28px,8vw,46px);}

  /* The HUD stacks: the sheet you are on, then the rail across the full width.
     The rail is a device, so it is the one part of the deck chrome that must
     survive the phone; the scroll hint is the part that does not. */
  .hud{flex-direction:column;align-items:stretch;gap:clamp(8px,1.2vh,12px);}
  .hud__hint{display:none;}
  .hud__mid{flex:1 1 auto;gap:12px;}
  /* 44px of tap target on every piece of chrome, from padding, not from type */
  .wordmark,.menu-btn{min-height:44px;display:flex;align-items:center;}
  .menu-btn{justify-content:flex-end;}
  .chrome{padding-top:clamp(10px,1.6vh,20px);}
  .foot__col a,.foot__legal a,.menu__socials a{min-height:44px;display:flex;align-items:center;}
  .nl button{min-width:44px;min-height:44px;justify-content:flex-end;display:flex;align-items:center;}
  /* measured at 390: 43.7px, 21.7px and 26px before this block */
  .btn{min-height:48px;}
  .ct__mail a{min-height:44px;display:inline-flex;align-items:center;}
  .nl{padding-bottom:0;}
  .nl input{min-height:44px;}
  /* the contact sheet must not hand its call to action to the fixed HUD */
  .ct__body{padding-bottom:calc(var(--pb) + 16px);}

  .foot__wm{font-size:clamp(34px,13vw,64px);}
}

/* A finger is a finger at any width. The 44px floor above is written against a
   width because that is where the phone design lives; this repeats it for a
   touch device wide enough to keep the desktop deck, which the width query
   would otherwise miss entirely. Selectors are repeated rather than inherited:
   a media query adds nothing to specificity (BUILD-PITFALLS 47). */
@media (pointer:coarse){
  .wordmark,.menu-btn{min-height:44px;display:flex;align-items:center;}
  .btn{min-height:48px;}
  .ct__mail a{min-height:44px;display:inline-flex;align-items:center;}
  .nl{padding-bottom:0;}
  .nl input{min-height:44px;}
  .nl button{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:flex-end;}
  .foot__col a,.foot__legal a,.menu__socials a{min-height:44px;display:flex;align-items:center;}
}

@media (max-width:520px){
  .hud__ch{font-size:9.5px;}
  .hud__ch em{min-width:0;}
  .strip__col:nth-child(2){display:none;}
  .strip__col:nth-child(1){flex:1 1 100%;}
  .wgl__set{gap:7px;}
  .wgl__chip{font-size:10.5px;letter-spacing:.08em;padding:0 11px;}
}

/* Stacked layout on a wide screen (reduced motion). Every frame above is sized
   for a phone column; at 1600px the portrait crops would letterbox, so cap them
   and let the type keep its own measure. */
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .strip__col:nth-child(3){display:block;}
  .wk__item{max-width:430px;}
  .wk__media{height:640px;}
  .ab__img,.pr__img,.ct__img{max-width:820px;}
  .ab__img{height:76svh;}
  .pr__img{height:56svh;}
  .ct__img{height:70svh;}
  .pr__stats{grid-template-columns:repeat(3,1fr);max-width:820px;}
}

/* ═══ REDUCED MOTION / NO-JS ═════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .grain{animation:none;}
}
html.no-js .track{display:block;height:auto;}
html.no-js .panel{width:100%!important;height:auto;min-height:100svh;overflow:hidden;}
html.no-js .cursor,html.no-js .menu{display:none;}
html.no-js .p-manifest{grid-template-columns:1fr;align-items:start;height:auto;
  padding:var(--pt) var(--px) var(--pb);}
html.no-js .mf__img{display:none;}
/* the weglaatproef needs a script to be operated; without one it is a list */
html.no-js .wgl__bar,html.no-js .wgl__say{display:none;}