/* ═══════════════════════════════════════════════════════════════════════════
   August Marlow — Photographer
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0b0b0c;
  --ink-2:    #101012;
  --bone:     #ede9e3;
  --bone-dim: rgba(237,233,227,.52);
  --ink-dim:  rgba(11,11,12,.55);
  --line:     rgba(237,233,227,.16);
  --line-ink: rgba(11,11,12,.16);
  --ember:    #ff4a1c;

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --pad: clamp(1.15rem, 3.6vw, 4rem);
  --sect: clamp(6rem, 14vh, 11rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--ink); -webkit-text-size-adjust:100%; }
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }

body{
  font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.0625rem);
  line-height:1.6;
  color:var(--bone);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--ember); color:#fff; }

/* ─── shared type ─────────────────────────────────────────────────────────── */
.lbl,.sect-tag{
  font-size:.6875rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; line-height:1;
}
.sect-tag{ display:flex; align-items:center; gap:.7em; opacity:.55; margin-bottom:clamp(2rem,5vw,4rem); }
.sect-tag i{ font-style:normal; color:var(--ember); opacity:.9; }
.lbl{ display:block; opacity:.45; margin-bottom:.7em; }

/* split-text primitives */
[data-split]{ }
.w{ display:inline-block; white-space:nowrap; }
.c{ display:inline-block; overflow:hidden; vertical-align:top;
    padding-bottom:.14em; margin-bottom:-.14em; }
.ci{ display:inline-block; transform:translate3d(0,110%,0); will-change:transform; }
.wd{ display:inline-block; }

/* ─── cursor ──────────────────────────────────────────────────────────────── */
.cursor{ position:fixed; inset:0; z-index:500; pointer-events:none;
         mix-blend-mode:difference; display:none; }
/* Position, scale and centring are all owned by GSAP — mixing them with CSS
   transforms makes GSAP flatten the -50% offsets into stale pixel values. */
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%;
  will-change:transform; }
.cursor__dot{ width:6px; height:6px; background:var(--bone); }
.cursor__ring{
  width:82px; height:82px; border:1px solid rgba(237,233,227,.75);
  display:grid; place-items:center;
}
.cursor__label{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transition:opacity .3s; color:var(--bone);
}
.cursor.is-view .cursor__label,
.cursor.is-drag .cursor__label{ opacity:1; }
@media (hover:hover) and (pointer:fine) and (min-width:861px){ .cursor{ display:block; } }

/* ─── loader ──────────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:600; background:var(--ink);
  display:grid; align-content:center; padding:var(--pad);
  clip-path:inset(0 0 0 0);
}
.loader__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,9vw,8rem); line-height:.95; letter-spacing:-.02em;
}
.loader__meta{
  display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.4rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:0;
}
.loader__count{
  position:absolute; right:var(--pad); bottom:calc(var(--pad) + 1.4rem);
  font-size:clamp(2.5rem,7vw,5rem); line-height:1; font-weight:300;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.loader__count i{ font-style:normal; font-size:.28em; vertical-align:super; opacity:.5; margin-left:.2em; }
.loader__bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad); height:1px; background:var(--line); }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--bone); }

/* ─── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.9rem) var(--pad);
  mix-blend-mode:difference; color:#fff;
  will-change:transform;
}
.nav__brand{ display:flex; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.nav__mark{ width:9px; height:9px; border:1px solid currentColor; border-radius:50%;
  transition:background-color .4s var(--ease); }
.nav__brand:hover .nav__mark{ background:currentColor; }

.nav__links{ display:flex; gap:clamp(1.2rem,2.6vw,2.6rem); justify-self:center; }
.nav__brand{ grid-column:1; }
.nav__links{ grid-column:2; }
.lang{ grid-column:3; justify-self:end; }
.nav__burger{ grid-column:3; justify-self:end; }
.nav__links a{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden; display:inline-block; padding-block:.15em; }
.nav__links a span{ display:inline-block; transition:transform .55s var(--ease); }
.nav__links a::before{
  content:""; position:absolute; left:0; bottom:.05em; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.nav__links a:hover::before{ transform:scaleX(1); transform-origin:0 50%; }

/* ─── language slider ─────────────────────────────────────────────────────── */
.lang{
  position:relative; display:flex; align-items:center; isolation:isolate;
  border:1px solid currentColor; border-radius:999px; padding:2px;
  font-size:.625rem; letter-spacing:.12em; line-height:1;
}
.lang__opt{
  position:relative; z-index:1; cursor:pointer; padding:.42em .72em;
  border-radius:999px; font:inherit; letter-spacing:inherit; color:currentColor;
  opacity:.5; transition:opacity .35s var(--ease);
}
.lang__opt[aria-pressed="true"]{ opacity:1; }
/* the pill slides between the two options; it is positioned from JS so the
   widths can differ without hard-coding either */
.lang__pill{
  position:absolute; z-index:0; top:2px; bottom:2px; left:2px; width:0;
  border-radius:999px; background:currentColor; opacity:.22;
  transition:transform .45s var(--ease), width .45s var(--ease);
}
.lang:hover .lang__opt{ opacity:.75; }
.lang:hover .lang__opt[aria-pressed="true"]{ opacity:1; }

.nav__burger{ display:none; width:34px; height:34px; position:relative; cursor:pointer; }
.nav__burger i{ position:absolute; left:6px; right:6px; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s; }
.nav__burger i:first-child{ top:14px; } .nav__burger i:last-child{ top:20px; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:290; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--pad) + 4rem) var(--pad) calc(var(--pad) + 1rem);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .8s var(--slow);
}
.menu.is-open{ clip-path:inset(0 0 0% 0); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; gap:.15rem; margin-top:auto; }
.menu__links a{ display:flex; align-items:baseline; gap:1rem;
  border-bottom:1px solid var(--line); padding:.5rem 0 .7rem; overflow:hidden; }
.menu__links a i{ font-style:normal; font-size:.625rem; letter-spacing:.14em;
  opacity:.35; min-width:1.6rem; }
.menu__links a span{ font-family:var(--serif);
  font-size:clamp(2.4rem,13vw,4rem); line-height:1; letter-spacing:-.02em; }
.menu__foot{ display:flex; flex-wrap:wrap; gap:1.6rem 2.5rem; margin-top:2.5rem;
  font-size:.75rem; opacity:.75; }
.menu__foot .lbl{ opacity:.4; }

/* ─── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden;
       display:flex; flex-direction:column; justify-content:flex-end;
       padding:var(--pad); padding-bottom:calc(var(--pad) + .5rem); }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:none; }
html.gl-on .hero__canvas{ display:block; }
html.gl-on .hero__fallback{ display:none; }
.hero__fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); }

/* Light scrim — pooled behind the headline and under the meta row rather than
   laid flat over the frame, so the photograph stays open everywhere else.
   The nav needs none of it: it blends in difference mode and inverts itself. */
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 64%, rgba(11,11,12,.24) 100%),
    radial-gradient(115% 80% at 0% 100%, rgba(11,11,12,.40) 0%,
                    rgba(11,11,12,.14) 40%, transparent 70%); }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
/* No scrim — the photographs are shown without anything laid over them. */

.hero__type{ position:relative; z-index:2; margin-bottom:clamp(2rem,7vh,5rem); }
.hero__title{ font-family:var(--serif); font-weight:400;
  /* Floor restored to the original 3.6rem so phones read as they did before;
     the fluid range and ceiling are the halved values +30% for desktop. */
  font-size:clamp(3.6rem,10vw,9.75rem); line-height:.86; letter-spacing:-.025em; }
.hero__line{ display:block; }
.hero__line--b{ padding-left:.09em; }
/* Ruim genoeg voor de langste van de twee zinnen (het Engels, ~48ch), zodat
   die op één regel blijft; `min()` laat hem alsnog inpakken als het scherm
   smaller is dan dat. Op 34ch brak de zin altijd, ook met ruimte over. */
.hero__sub{ margin-top:clamp(1.1rem,2.4vw,1.8rem); max-width:min(100%,48ch);
  font-size:clamp(.9rem,1.15vw,1.0625rem); line-height:1.5; color:rgba(237,233,227,.78);
  text-wrap:balance; }
.hero__sub em{ font-family:var(--serif); font-style:italic; font-size:1.15em; color:var(--bone); }

.hero__foot{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1.6rem 3rem;
  padding-top:1.3rem; border-top:1px solid var(--line); font-size:.75rem; }
.hero__col{ display:flex; flex-direction:column; gap:.45rem; }
.hero__col--r{ margin-left:auto; text-align:right; }
.hero__col span:not(.lbl){ opacity:.85; }
.hero__col .lbl{ margin-bottom:0; }

.hero__scroll{ position:absolute; z-index:2; right:var(--pad); top:52%;
  display:flex; align-items:center; gap:.7rem;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
.hero__scroll i{ display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--ember);
  transform:translateX(-100%); animation:sweep 2.6s var(--ease) infinite; }
@keyframes sweep{ 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ─── manifesto (light) ───────────────────────────────────────────────────── */
.manifesto{ background:var(--bone); color:var(--ink); padding:var(--sect) var(--pad);
  position:relative; z-index:2; }
.manifesto .sect-tag{ opacity:.5; }
.manifesto__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:end; }
.manifesto__text{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4vw,3.7rem); line-height:1.14; letter-spacing:-.015em;
  max-width:24ch; }
.manifesto__text .wd{ opacity:.14; }
.manifesto__sig{ margin-top:clamp(2.5rem,6vw,4.5rem); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.5; }

.manifesto__aside{ justify-self:end; width:min(100%,420px); }
.manifesto__frame{ overflow:hidden; aspect-ratio:3/2; background:#ddd8d0;
  clip-path:inset(0 0 100% 0); }
.manifesto__frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) contrast(1.06); transform:scale(1.16); will-change:transform; }
.manifesto__aside figcaption{ margin-top:.85rem; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
.manifesto__aside figcaption span{ color:var(--ember); opacity:.85; margin-right:.5em; }

/* ─── works (horizontal) ──────────────────────────────────────────────────── */
.works{ background:var(--ink); position:relative; z-index:2; }
.works__pin{ height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; position:relative; }
.works__head{ display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); position:absolute; top:clamp(5.5rem,12vh,8rem); left:0; right:0; }
.works__head .sect-tag{ margin:0; }
.works__hint{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5;
  display:flex; align-items:center; gap:.6rem; }
.works__hint i{ font-style:normal; animation:nudge 1.8s var(--ease) infinite; display:inline-block; }
@keyframes nudge{ 50%{ transform:translateX(6px);} }

.works__track{ display:flex; align-items:center; gap:clamp(1.12rem,2.56vw,2.72rem);  /* -20% */
  padding-inline:var(--pad); will-change:transform; }
/* Shape is locked to a ratio, never to the window. Height is bounded on both
   axes (--figH) and the width is derived from it, so a panel keeps its 3:4 in
   a 16:9 fullscreen, an ultrawide or a tall window alike. Sizing the width in
   vw and the height in vh — as this did — let the shape drift with the
   viewport aspect and squared off on wide screens. */
.panel{ flex:0 0 auto; position:relative;
  --figH:min(62vh,58vw); width:calc(var(--figH) * 3 / 4); }
.panel--wide{ --figH:min(46vh,34vw); width:calc(var(--figH) * 3 / 2); }
.panel--tall{ --figH:min(70vh,46vw); width:calc(var(--figH) * 2 / 3); }
.panel figure{ overflow:hidden; position:relative; background:var(--ink-2);
  height:var(--figH); aspect-ratio:3/4; }
.panel--wide figure{ aspect-ratio:3/2; }
.panel--tall figure{ aspect-ratio:2/3; }
.panel figure::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.5)); opacity:0; transition:opacity .6s; }
/* no grade — the photographs run at their own colour */
.panel img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); will-change:transform; }
.panel:hover figure::after{ opacity:1; }
/* same ember lift the contact email makes on hover */
.panel__meta h3{ transition:color .45s var(--ease); }
.panel:hover .panel__meta h3,
.panel:focus-visible .panel__meta h3{ color:var(--ember); }

.panel__meta{ display:flex; align-items:baseline; gap:.85rem; margin-top:1.1rem; flex-wrap:wrap; }
.panel__no{ font-size:.6875rem; letter-spacing:.12em; opacity:.4; }
.panel__meta h3{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1.9vw,1.9rem); line-height:1; letter-spacing:-.01em; }
.panel__cat{ margin-left:auto; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.4; }

/* Alleen op aanraak: daar mist de hover-cursor die op desktop 'Bekijk' toont,
   dus is er geen enkele hint dat een paneel klikbaar is. Geen eigen knop —
   het hele <article> is al de knop; dit is puur het label erbij. */
.panel__cta{ display:none }
.panel__cta i{ font-style:normal; transition:transform .5s var(--ease); display:inline-block }

.panel--end{ width:26vw; display:flex; flex-direction:column; justify-content:center;
  gap:1.4rem; padding-left:clamp(1rem,2vw,2rem); border-left:1px solid var(--line);
  align-self:stretch; }
.panel--end span{ font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.6rem); line-height:1.05; }
.panel--end a{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.5rem; width:max-content; }
.panel--end a:hover{ border-color:var(--ember); color:var(--ember); }

.works__prog{ position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(2rem,6vh,3.5rem); height:1px; background:var(--line); }
.works__prog span{ display:block; height:100%; width:0%; background:var(--bone); }

/* ─── index list ──────────────────────────────────────────────────────────── */
.index{ background:var(--ink); padding:var(--sect) var(--pad); position:relative; z-index:2; }
.list{ list-style:none; border-top:1px solid var(--line); }
.list li{ border-bottom:1px solid var(--line); }
.list a{ display:grid; grid-template-columns:3.5rem 1fr auto auto;
  align-items:center; gap:1.5rem; padding:clamp(1.1rem,2.4vw,1.9rem) 0;
  position:relative; }
.list a::before{ content:""; position:absolute; left:-2vw; right:-2vw; top:0; bottom:0;
  background:rgba(237,233,227,.035); opacity:0; transition:opacity .5s var(--ease); }
.list a:hover::before{ opacity:1; }
.list__no{ font-size:.6875rem; letter-spacing:.12em; opacity:.35; position:relative; }
.list__ttl{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.015em;
  position:relative; transition:transform .6s var(--ease), color .5s; }
.list a:hover .list__ttl{ transform:translateX(clamp(.5rem,1.5vw,1.6rem)); }
.list__cat,.list__yr{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.4; position:relative; }
.list__yr{ min-width:3.2rem; text-align:right; }
.list__thumb{ display:none; }

.peek{ position:fixed; top:0; left:0; z-index:60; width:clamp(180px,17vw,290px);
  aspect-ratio:4/5; overflow:hidden; pointer-events:none; opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.86); will-change:transform,opacity; }
.peek img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }

/* ─── about (light) ───────────────────────────────────────────────────────── */
.about{ background:var(--bone); color:var(--ink); padding:var(--sect) var(--pad);
  /* .9fr/1.1fr put the portrait at 45% of the available width; .63fr/1.37fr
     is 31.5% — the same picture, 30% narrower. */
  display:grid; grid-template-columns:minmax(0,.63fr) minmax(0,1.37fr);
  gap:clamp(2.5rem,6vw,7rem); align-items:start; position:relative; z-index:2; }
/* the tag is a grid child now — span both columns so it sits at the page edge
   above them, matching Selected work and Contact */
.about > .sect-tag{ grid-column:1 / -1; opacity:.5; }
/* let the portrait drop below the text, so the two columns don't start level */
.about__media{ margin-top:clamp(2rem,5vw,4.5rem); }
.about__frame{ overflow:hidden; background:#ddd8d0; aspect-ratio:4/5;
  clip-path:inset(0 0 100% 0); }
.about__frame img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.18); will-change:transform; }
.about__cap{ display:block; margin-top:.9rem; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.45; }
.about__h{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-.02em;
  margin-bottom:clamp(1.5rem,3vw,2.4rem); }
.about__body p{ max-width:58ch; color:var(--ink-dim); margin-bottom:1.1rem;  /* 52ch +12% */
  /* Uitgevuld, maar zonder woordafbreking: een woord dat niet meer past gaat
     in zijn geheel naar de volgende regel. Justify kan dan alleen nog de
     woordspaties rekken, dus die krijgen een bovengrens mee.
     Justified, but never hyphenated — a word that no longer fits moves down
     whole. That leaves word spacing as the only slack, so it is capped. */
  text-align:justify; -webkit-hyphens:none; hyphens:none;
  word-spacing:-.01em; text-wrap:pretty; }
/* the closing invitation, lifted out of the body colour so it reads as an offer */
.about__cta{ color:var(--ink); margin-top:1.8rem; }

/* ─── album overlay ───────────────────────────────────────────────────────── */
/* Sits above the nav but below the cursor, so the custom cursor
   the custom cursor keep working over it. */
/* focus returns to the panel on close — show the ring for keyboards only */
.panel[data-album]{ cursor:pointer; outline:none; }
.panel[data-album]:focus-visible{ outline:1px solid var(--ember); outline-offset:8px; }

.album{
  position:fixed; inset:0; z-index:350; background:var(--ink);
  visibility:hidden; opacity:0;
}
.album.is-open{ visibility:visible; opacity:1; }

.album__scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}

.album__close{
  position:absolute; top:clamp(1rem,2.2vw,1.9rem); right:var(--pad); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(237,233,227,.35); background:rgba(11,11,12,.35);
  backdrop-filter:blur(6px); mix-blend-mode:difference;
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.album__close i{ position:absolute; left:14px; right:14px; top:22px; height:1px;
  background:var(--bone); transform-origin:50% 50%; }
.album__close i:first-child{ transform:rotate(45deg); }
.album__close i:last-child{ transform:rotate(-45deg); }
.album__close:hover{ border-color:var(--bone); transform:rotate(90deg); }

.album__lead{ position:relative; height:min(74vh,760px); overflow:hidden; background:var(--ink-2); }
/* focal point comes from the album's `lead` field; centre unless stated */
.album__lead img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.album__leadScrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.42) 0%,rgba(11,11,12,0) 30%,rgba(11,11,12,.72) 100%),
    linear-gradient(90deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,0) 55%); }
.album__leadType{ position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(1.6rem,4vw,3rem); }
.album__leadType .sect-tag{ margin-bottom:.9rem; opacity:.75; }
.album__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,6.5vw,6rem); line-height:.95; letter-spacing:-.025em; }

.album__body{ padding:clamp(3rem,7vw,6rem) var(--pad) calc(var(--pad) + 2rem); }

/* Multi-column masonry — mixed portrait/landscape flow without needing to
   declare each image's dimensions, so adding a photo stays a one-line edit. */
/* CSS multi-column fills each column top-to-bottom, so the reading order ran
   down and then across. A grid on a fine row unit, with each figure spanning
   however many units it needs, places them left-to-right instead — and still
   lets every photograph keep its own aspect ratio. Spans are set in main.js. */
.album__grid{ --albumGap:clamp(.25rem,.5vw,.5rem); --albumRow:4px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--albumGap); grid-auto-rows:var(--albumRow); }
/* grid-row-END, not the `grid-row` shorthand: the shorthand sets the START as
   a span, and a span on both ends makes the browser discard the end one — so
   the JS-computed span would be ignored and every tile would occupy 60 rows. */
.album__grid figure{ grid-row-end:span 60; margin:0;
  overflow:hidden; background:var(--ink-2); position:relative; cursor:pointer; }
/* fills the tile exactly, so rounding the span to the row unit never leaves
   a sliver of background at the bottom */
.album__grid img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.12) contrast(1.03); transform:scale(1.001);
  transition:filter .7s var(--ease), transform 1s var(--ease); }
.album__grid figure:hover img{ filter:grayscale(0) contrast(1); transform:scale(1.04); }
.album__grid figure:focus-visible{ outline:1px solid var(--ember); outline-offset:3px; }

.album__foot{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }
.album__foot span{ opacity:.45; }
.album__back{ cursor:pointer; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.4rem; transition:color .4s, border-color .4s; }
.album__back:hover{ color:var(--ember); border-color:var(--ember); }

/* ─── lightbox ────────────────────────────────────────────────────────────── */
.lbox{
  position:fixed; inset:0; z-index:370; display:grid; place-items:center;
  background:rgba(8,8,9,.94); backdrop-filter:blur(10px);
  visibility:hidden; opacity:0;
}
.lbox.is-open{ visibility:visible; }
.album.lbox-open .album__scroll{ overflow:hidden; }

.lbox__stage{ margin:0; max-width:92vw; max-height:84vh; display:grid; place-items:center; }
.lbox__stage img{ max-width:92vw; max-height:84vh; width:auto; height:auto;
  object-fit:contain; display:block; will-change:transform,opacity; }

.lbox__close,.lbox__nav{
  position:absolute; z-index:2; cursor:pointer; border-radius:50%;
  border:1px solid rgba(237,233,227,.28); background:rgba(11,11,12,.45);
  backdrop-filter:blur(6px); color:var(--bone);
  transition:border-color .4s var(--ease), background-color .4s, transform .5s var(--ease);
}
.lbox__close{ top:clamp(1rem,2.2vw,1.9rem); right:var(--pad); width:46px; height:46px; }
.lbox__close i{ position:absolute; left:14px; right:14px; top:22px; height:1px; background:var(--bone); }
.lbox__close i:first-child{ transform:rotate(45deg); }
.lbox__close i:last-child{ transform:rotate(-45deg); }
.lbox__close:hover{ border-color:var(--bone); transform:rotate(90deg); }

.lbox__nav{ top:50%; margin-top:-27px; width:54px; height:54px; font-size:1.05rem; line-height:1; }
.lbox__nav--prev{ left:clamp(.6rem,2vw,2.2rem); }
.lbox__nav--next{ right:clamp(.6rem,2vw,2.2rem); }
.lbox__nav:hover{ border-color:var(--bone); background:rgba(237,233,227,.12); }
.lbox__nav[disabled]{ opacity:.25; pointer-events:none; }

.lbox__count{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5;
  font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .lbox__nav{ width:44px; height:44px; margin-top:-22px; }
  .lbox__stage img{ max-width:96vw; max-height:76vh; }
}

/* the element that flies from the clicked panel into the lead slot */
.album__flier{ position:fixed; z-index:360; overflow:hidden; pointer-events:none;
  background:var(--ink-2); }
.album__flier img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

html.album-open, html.album-open body{ overflow:hidden; }

@media (max-width:1100px){ .album__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .album__grid{ grid-template-columns:1fr; }
  .album__lead{ height:min(62vh,560px); }
  .album__close{ width:40px; height:40px; }
  .album__close i{ left:12px; right:12px; top:19px; }
}

/* ─── marquee ─────────────────────────────────────────────────────────────── */
.marquee{ background:var(--ink); padding:clamp(2.5rem,6vw,4.5rem) 0;
  overflow:hidden; border-block:1px solid var(--line); position:relative; z-index:2; }
.marquee__row{ display:flex; width:max-content; will-change:transform; }
.marquee__row span{ font-family:var(--serif);
  font-size:clamp(1.8rem,4.6vw,4rem); line-height:1; white-space:nowrap; padding-right:.4em; }
/* U+2731 HEAVY ASTERISK, not U+2733 — the latter is a real emoji (✳️), so iOS
   resolves it from Apple Color Emoji and paints it green, ignoring `color`.
   The explicit stack keeps the fallback on a text font either way. */
.marquee__row i{ font-style:normal; color:var(--ember); font-size:.5em;
  vertical-align:middle; opacity:.85;
  font-family:"Instrument Serif","Times New Roman",Times,serif;
  /* `middle` aligns to half the x-height, which drops a small glyph ~0.18em
     below the optical centre of the caps around it — nudge it back up. The
     side margins give it more air than a word space, so it reads as a
     separator rather than as part of the phrase. */
  position:relative; top:-.18em; margin-inline:.34em; }

/* ─── contact ─────────────────────────────────────────────────────────────── */
.contact{ background:var(--ink); padding:var(--sect) var(--pad) calc(var(--pad) + 1rem);
  position:relative; z-index:2; }
.contact__h{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,11vw,10rem); line-height:.94; letter-spacing:-.025em; }
.mail{ display:inline-block; margin-top:clamp(2rem,5vw,3.5rem); position:relative;
  font-size:clamp(1rem,2.2vw,1.7rem); letter-spacing:-.01em; will-change:transform; }
.mail span{ position:relative; display:inline-block; }
.mail span::after{ content:""; position:absolute; left:0; bottom:-.18em; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:100% 50%;
  transition:transform .6s var(--ease); }
.mail:hover span::after{ transform:scaleX(0); }
.mail:hover{ color:var(--ember); }

.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin-top:clamp(4rem,10vw,8rem); padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.8125rem; }
.contact__grid a{ opacity:.8; transition:opacity .3s, color .3s; }
.contact__grid a:hover{ opacity:1; color:var(--ember); }
.contact__grid > div > span:not(.lbl){ opacity:.7; line-height:1.5; }
.contact__grid .tel{ display:block; font-variant-numeric:tabular-nums; }
.contact__clock #clock{ font-variant-numeric:tabular-nums; }

.contact__bar{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(3rem,7vw,5rem); padding-top:1.3rem; border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; opacity:.45; }

/* ═══ responsive ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  /* No panel width overrides here. Setting width in vw while the figure is
     still sized from --figH split the two apart: between 861 and 1100px the
     panel box grew to 50vw while the photograph stayed at the ratio's width,
     so the title and year ran ~120px past the edge of the image. Width is
     derived from --figH at every size above the mobile breakpoint. */
  .about{ grid-template-columns:1fr;
    /* justified copy needs a little more breathing room from the edges on a
       narrow screen, or the flush right margin reads as touching the bezel */
    padding-inline:calc(var(--pad) + .85rem); }
  .about__media{ max-width:300px; }
  .contact__grid{ grid-template-columns:repeat(2,1fr); gap:2.2rem; }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  /* De links staan hier op display:none en grid slaat een verborgen item over,
     dus elk kind krijgt hieronder expliciet zijn kolom — anders schuift alles
     een cel op en komt niets meer op zijn plek terecht. */
  /* drie kolommen: merk links, taalkeuze in het midden, menu rechts */
  .nav{ grid-template-columns:1fr auto 1fr; }
  .lang{ grid-column:2; justify-self:center; }
  /* de streepjes zitten 6px binnen de knop; die marge terugnemen zodat ze
     exact uitlijnen met de rechterrand van de tekst eronder */
  .nav__burger{ margin-right:-6px; }

  .hero{ min-height:560px; }
  .hero__scroll{ display:none; }
  /* type runs the full width here, so a band reads better than a corner pool */
  .hero__scrim{ background:linear-gradient(180deg, transparent 42%, rgba(11,11,12,.38) 100%); }
  .hero__foot{ gap:1.1rem 2rem; font-size:.6875rem; }
  .hero__col--r{ margin-left:0; text-align:left; }
  /* op een telefoon past de zin nooit op één regel — geef hem dan tenminste
     de volle kolombreedte, zodat het bij twee regels blijft */
  .hero__sub{ max-width:100%; }

  .manifesto__grid{ grid-template-columns:1fr; gap:clamp(2.5rem,9vw,4rem); }
  .manifesto__text{ max-width:100%; }
  .manifesto__sig{ margin-top:2rem; }
  .manifesto__aside{ justify-self:start; width:min(100%,260px); }

  /* horizontal → vertical */
  .works__pin{ height:auto; padding:var(--sect) 0 clamp(3rem,10vw,5rem); overflow:visible; }
  .works__head{ position:static; padding:0 var(--pad); margin-bottom:2.5rem; }
  .works__hint{ display:none; }
  .works__track{ flex-direction:column; align-items:stretch; transform:none !important;
    gap:clamp(2.5rem,9vw,4rem); }
  .panel,.panel--wide,.panel--tall,.panel--end{ width:100%; }
  .panel figure,.panel--tall figure,.panel--wide figure{ height:auto; aspect-ratio:4/5; }
  .panel--wide figure{ aspect-ratio:3/2; }
  .panel img{ transform:scale(1.06); }
  .panel--end{ border-left:0; border-top:1px solid var(--line); padding:2rem 0 0; align-self:auto; }
  .works__prog{ display:none; }

  .list a{ grid-template-columns:2.2rem 1fr auto; gap:.9rem 1rem; }
  /* background-image (set inline), not <img> — a display:none box never
     generates a request, so desktop pays nothing for these. */
  .list__thumb{ display:block; grid-row:2; grid-column:1/-1; margin-top:.4rem;
    aspect-ratio:16/7; background-size:cover;
    background-position:center 32%; filter:grayscale(.2) contrast(1.05); }
  .list__cat{ display:none; }
  .list a:hover .list__ttl{ transform:none; }

  .panel[data-album] .panel__cta{
    display:inline-flex; align-items:center; gap:.5em;
    /* op de foto zelf, rechtsonder in de hoek */
    position:absolute; z-index:2;
    right:clamp(.9rem,4vw,1.6rem); bottom:clamp(.9rem,4vw,1.6rem);
    font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--bone);
    border-bottom:1px solid rgba(237,233,227,.55);
    padding-bottom:.45rem; width:max-content;
    /* de foto's lopen van bijna wit tot bijna zwart, dus draagt het label
       zijn eigen leesbaarheid mee in plaats van op de foto te vertrouwen */
    text-shadow:0 1px 12px rgba(11,11,12,.75), 0 0 3px rgba(11,11,12,.55);
  }
  .peek{ display:none; }

  .contact__bar{ flex-direction:column; gap:.5rem; }
}

@media (max-width:480px){
  .contact__grid{ grid-template-columns:1fr; }
  .hero__foot .hero__col:nth-child(2){ display:none; }
}

/* Reduced motion kills the scroll-driven reel, so the horizontal track has no
   driver — lay the same photographs out as a plain grid instead. */
@media (min-width:861px){
  html.reduced .works__pin{ height:auto; overflow:visible;
    padding:var(--sect) 0 clamp(3rem,8vw,5rem); }
  html.reduced .works__head{ position:static; padding:0 var(--pad); margin-bottom:clamp(2rem,4vw,3rem); }
  html.reduced .works__hint,
  html.reduced .works__prog{ display:none; }
  html.reduced .works__track{ display:grid; grid-template-columns:repeat(2,1fr);
    gap:clamp(2rem,4vw,3.5rem); align-items:start; transform:none !important; }
  html.reduced .panel,
  html.reduced .panel--wide,
  html.reduced .panel--tall{ width:auto; }
  html.reduced .panel figure,
  html.reduced .panel--tall figure,
  html.reduced .panel--wide figure{ height:auto; aspect-ratio:4/5; }
  html.reduced .panel img{ transform:none; }
  html.reduced .panel--wide{ grid-column:span 2; }
  html.reduced .panel--wide figure{ aspect-ratio:16/9; }
  html.reduced .panel--end{ grid-column:span 2; width:auto; align-self:auto;
    flex-direction:row; align-items:baseline; justify-content:space-between;
    border-left:0; border-top:1px solid var(--line); padding:2rem 0 0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .ci{ transform:none !important; }
}