/* ============================================================
   TYPEFACES
   Space Grotesk (variable 300-700) for everything that is read,
   Space Mono for labels and metadata. Both self-hosted: no third
   party request, and the site looks the same on every machine.
   Times New Roman is gone.
   ============================================================ */
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk-var.woff2") format("woff2-variations"),
      url("fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("fonts/space-mono-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   TOKENS
   Palette: paper / ink only. Photography carries all colour.
   ============================================================ */
:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --graphite:#141414;
  --g04:#f5f5f5;
  --g10:#e8e8e8;
  --g20:#d2d2d2;
  --g45:#8f8f8f;
  --g65:#5c5c5c;
  --g85:#2b2b2b;

  /* Display: tight grotesque. Editorial: serif, reserved for the voice
     of the photographer. Data: monospace, for plate metadata only. */
  --display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* the large statements are the same family, set wide and tight: the sans
     itself is the visual element now, not a second typeface */
  --editorial:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --data:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --m:clamp(20px,5.5vw,110px);        /* page margin */
  --gap:clamp(14px,2vw,28px);
  --rule:1px solid var(--g20);

  /* One scale, resolved for every screen. Desktop figures are the brief's.
     Nothing renders below 15px from 1000px up. */
  --t1:clamp(2.5rem,1.2rem + 6.4vw,6rem);            /* hero           46 -> 96px  */
  --t2:clamp(2.2rem,1.25rem + 3vw,3.5rem);          /* section title  35 -> 56px  */
  --t3:clamp(1.5rem,1.2rem + 1vw,1.75rem);          /* card title     24 -> 28px  */
  --lede:clamp(1.02rem,.96rem + .35vw,1.25rem);     /* section text   16 -> 20px  */
  --body:clamp(1.06rem,1rem + .32vw,1.125rem);      /* reading        17 -> 18px  */
  --small:clamp(1rem,.95rem + .3vw,1.125rem);       /* card text      16 -> 18px  */
  --micro:clamp(.8rem,.68rem + .45vw,.9375rem);     /* labels, meta   13 -> 15px  */
  --nav:clamp(.94rem,.88rem + .3vw,1rem);           /* navigation     15 -> 16px  */
  --btn:clamp(.9375rem,.9rem + .2vw,1.0625rem);     /* buttons        15 -> 17px  */
  --cap:clamp(.9375rem,.9rem + .15vw,1rem);         /* captions       15 -> 16px  */
  --lh:1.7;

  /* Heading weight. The identity is a light grotesque, so 500 is as heavy as
     this typeface should go here; raise to 600 or 700 if you want it bolder. */
  --w-head:500;

  /* One vertical rhythm, used for every gap between text and text */
  --s1:clamp(8px,.7vw,12px);
  --s2:clamp(14px,1.2vw,20px);
  --s3:clamp(22px,1.9vw,32px);
  --s4:clamp(34px,3vw,52px);
  --s5:clamp(38px,3.2vw,58px);

  --ease:cubic-bezier(.16,.84,.34,1);
  --slow:1.15s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:var(--body);line-height:var(--lh);
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:var(--w-head);letter-spacing:-.022em;line-height:1.06}
p{margin:0}
:focus-visible{outline:1px solid currentColor;outline-offset:6px}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- primitives ---------- */
.wrap{padding-inline:var(--m)}
.sec{padding-block:clamp(50px,5vw,86px);position:relative}
.sec--flush{padding-block:0}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--dark .eyebrow-line{background:rgba(255,255,255,.22)}
.sec--tint{background:var(--g04)}

.eyebrow{
  display:flex;align-items:center;gap:18px;
  font-family:var(--data);font-size:var(--micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--g45);
  margin-bottom:var(--s5);
}
.eyebrow-line{flex:1;height:1px;background:var(--g20);max-width:180px}
.lede{
  font-size:var(--lede);line-height:1.55;
  letter-spacing:-.008em;max-width:42ch;color:var(--g65);
}
.sec--dark .lede{color:var(--g45)}

/* Link with a rule that draws itself */
.link{
  display:inline-flex;align-items:center;gap:.7em;position:relative;
  font-family:var(--data);font-size:var(--btn);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding-block:.85em;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:.35em;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left;
  transition:transform .7s var(--ease);
}
.link:hover::after,.link:focus-visible::after{transform:scaleX(.22)}
.link .arw{transition:transform .6s var(--ease)}
.link:hover .arw{transform:translateX(6px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1em;
  border:1px solid currentColor;padding:1.05em 2.25em;
  font-family:var(--data);font-size:var(--btn);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;
}
.btn span{position:relative;z-index:1;transition:color .55s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover span{color:var(--paper)}
.sec--dark .btn:hover span,.btn--invert:hover span{color:var(--ink)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);transition-delay:var(--d,0ms)}
}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ---------- frame: the plate ---------- */
.plate{margin:0}
.plate figcaption{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
  margin-top:var(--s2);font-family:var(--data);font-size:var(--cap);
  letter-spacing:.1em;text-transform:uppercase;color:var(--g45);
}
.plate figcaption .no{color:var(--ink)}
.sec--dark .plate figcaption .no{color:var(--paper)}
.frame{display:block;position:relative;overflow:hidden;background:var(--g10)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
a.frame:hover img,.hoverable:hover .frame img{transform:scale(1.045)}
.r-16-9{aspect-ratio:16/9}
.r-3-2{aspect-ratio:3/2}
.r-4-5{aspect-ratio:4/5}
.r-1-1{aspect-ratio:1/1}

/* ============================================================
   NAV
   ============================================================ */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.45),rgba(10,10,10,0));
  transition:opacity .5s linear;
}
.nav.solid::before{opacity:0}
.nav{
  position:fixed;inset:0 0 auto;z-index:60;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.1vw,30px) var(--m);
  color:var(--paper);
  transition:transform .6s var(--ease),opacity .4s linear,background .5s linear,color .3s linear;
}
.nav.solid{
  color:var(--ink);
  background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  border-bottom:var(--rule);
}
.nav.hide{transform:translateY(-105%);opacity:0}
/* Logo files ship white on transparent. The nav blends over the hero for automatic
   contrast; once it turns into a paper bar the mark is inverted to black. */
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
/* The logo as drawn — the light "Mohmmad", the heavy "Muhsen", the mark and
   PHOTOGRAPHY beneath. Never retyped in a website font. The lockup is 5.9:1,
   so its height is what gets set. */
.brand-logo{
  display:block;width:auto;
  height:clamp(26px,1.3rem + 1.2vw,40px);
  transition:filter .35s linear;
}
.brand img{height:clamp(26px,1.3rem + 1.2vw,40px);width:auto;transition:filter .35s linear}
.nav.solid .brand img,.nav.solid .brand-logo{filter:invert(1)}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand b{font-weight:500;font-size:clamp(.94rem,.86rem + .32vw,1.12rem);letter-spacing:.1em;text-transform:uppercase}
.brand i{
  font-style:normal;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.13em;text-transform:uppercase;opacity:.6;
}
@media (max-width:420px){.brand i{display:none}}
body.is-locked .nav{opacity:0;pointer-events:none}
.menu-head{
  position:sticky;top:0;z-index:2;background:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.2vh,24px) 0 clamp(16px,3vh,30px);
}
.menu-logo{height:clamp(28px,1.4rem + 1.2vw,42px);width:auto}
.nav-links{display:none;gap:clamp(20px,2.1vw,38px);align-items:center}
.nav-links a{
  font-family:var(--data);font-size:var(--nav);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;padding-block:12px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
@media (min-width:1180px){.nav-links{display:flex}.burger{display:none}}
.burger{
  display:flex;flex-direction:column;gap:5px;padding:10px;margin:-10px;
}
.burger i{display:block;width:26px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
  height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:0 var(--m) clamp(22px,4vh,40px);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease),visibility .8s step-end;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu a{
  font-size:clamp(1.6rem,7vw,2.9rem);letter-spacing:-.035em;
  padding-block:.18em;border-bottom:1px solid rgba(255,255,255,.12);
}
.menu-close{
  position:relative;width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;color:var(--paper);
}
.menu-close::before,.menu-close::after{
  content:"";position:absolute;left:11px;right:11px;height:1px;background:currentColor;
  transition:transform .35s var(--ease);
}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}
.menu-close:hover::before{transform:rotate(45deg) scaleX(.8)}
.menu-close:hover::after{transform:rotate(-45deg) scaleX(.8)}
.menu-foot{margin-top:40px;font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;color:var(--g45);display:flex;flex-wrap:wrap;gap:20px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--ink);color:var(--paper);overflow:hidden}
.hero-media{position:absolute;inset:-8% 0;will-change:transform}
.hero-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* without a script the photograph is simply there; with one it settles into place */
.js .hero-frame{opacity:0;transform:scale(1.055)}
.js .hero-frame.is-on{
  opacity:1;transform:none;
  transition:opacity 1.6s var(--ease),transform 2.6s var(--ease);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.34) 58%,rgba(10,10,10,.6) 100%);
}
.hero-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--m) clamp(32px,5vw,72px);
}
.hero h1{
  font-size:var(--t1);letter-spacing:-.03em;line-height:1.03;max-width:18ch;
  text-wrap:balance;margin-bottom:clamp(20px,3vw,34px);
}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
/* CSS-driven so the headline can never be left hidden by a script */
.hero h1 .ln>span{
  display:block;transform:translateY(105%);
  animation:heroLine 1.5s var(--ease) forwards;
  animation-delay:calc(760ms + var(--d,0ms));
}
@keyframes heroLine{to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ln>span{transform:none;animation:none}
}
.hero-row{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;
}
.hero-sub{font-family:var(--data);font-size:clamp(.9375rem,.9rem + .15vw,1rem);letter-spacing:.1em;text-transform:uppercase;color:var(--g20);max-width:40ch;line-height:1.6}
.scroll-cue{
  position:absolute;right:var(--m);bottom:clamp(32px,5vw,72px);z-index:2;
  display:none;writing-mode:vertical-rl;font-family:var(--data);
  font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45);
}
@media (min-width:900px){.scroll-cue{display:block}}

/* ============================================================
   PROJECTS
   ============================================================ */
.pgrid{display:block}
.pentry{display:grid;gap:clamp(18px,2.4vw,34px);margin-bottom:clamp(56px,9vw,168px)}
.pentry:last-child{margin-bottom:0}
.pentry-meta{align-self:end}
.pentry h3{font-size:var(--t3);letter-spacing:-.02em;line-height:1.18}
.pentry .proj-meta{margin-top:12px}
.pentry .link{margin-top:clamp(10px,1.4vw,18px)}

@media (min-width:860px){
  /* three widths and two alignments, cycling, so no two entries repeat */
  .pentry{grid-template-columns:minmax(0,1fr) minmax(200px,.42fr);align-items:end;
          gap:clamp(26px,3.4vw,60px)}
  .pentry--wide  .frame{width:100%}
  .pentry--tall  {grid-template-columns:minmax(200px,.42fr) minmax(0,1fr);align-items:start}
  .pentry--tall  .pentry-meta{order:-1;align-self:start;padding-top:.4em}
  .pentry--tall  .frame{width:82%;margin-left:auto}
  .pentry--small {grid-template-columns:minmax(0,.62fr) minmax(200px,.38fr);align-items:center}
  .pentry--small .frame{width:100%}
  /* the run drifts down the page instead of marching */
  .pentry--tall{margin-left:clamp(0px,4vw,90px)}
  .pentry--small{margin-right:clamp(0px,6vw,140px)}
}
.p-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3) var(--s4);margin-bottom:clamp(32px,3.8vw,56px)}
.p-head h2{font-size:var(--t2);max-width:22ch}
.proj{display:block;margin-bottom:clamp(56px,9vw,150px);position:relative}
.proj:last-child{margin-bottom:0}
.proj-title{font-size:var(--t3);letter-spacing:-.02em;line-height:1.18;margin-top:var(--s3);position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.6em;align-items:baseline}
.proj-title em{font-style:normal;font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45)}
.proj-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) 30px;margin-top:var(--s2);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;color:var(--g45);
}
.proj-open{margin-top:20px}
/* editorial pairing */
.pair{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:800px){
  .pair{grid-template-columns:1fr 1fr;align-items:end}
  .pair--offset>*:last-child{transform:translateY(clamp(20px,5vw,80px))}
  .pair--wide{grid-template-columns:1.7fr 1fr}
  .proj--inset{width:min(100%,860px);margin-inline:auto}
  .proj--right{width:min(100%,720px);margin-left:auto}
}
/* full-bleed cover, used to break the rhythm on one project */
@media (min-width:0px){
  .proj--bleed{margin-inline:calc(var(--m) * -1)}
  .proj--bleed .proj-title,.proj--bleed .proj-meta,.proj--bleed .proj-open{padding-inline:var(--m)}
}

/* cursor label (desktop pointer only) */
.cursor{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:104px;height:104px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.11em;text-transform:uppercase;
  transform:translate(-50%,-50%) scale(0);transition:transform .45s var(--ease);
}
.cursor.on{transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ============================================================
   STORY
   ============================================================ */
.story-grid{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr}
@media (min-width:920px){.story-grid{grid-template-columns:1fr 1fr;align-items:center}}
.story-body{margin-top:28px;display:grid;gap:1.1em;color:var(--g45);max-width:46ch}
.story-sign{margin-top:32px;font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g65)}
.story-strip{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,6vw,90px)}
@media (max-width:640px){.story-strip{grid-template-columns:1fr}}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba-top{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr;margin-bottom:clamp(28px,4vw,56px)}
@media (min-width:900px){.ba-top{grid-template-columns:1.1fr 1fr;align-items:end}}
.ba-stage{position:relative;transition:opacity .4s var(--ease)}
.ba-stage.fading{opacity:0}
.ba{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite);
  touch-action:pan-y;cursor:ew-resize;user-select:none;
}
.ba-bar{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--g45);
}
.sec--dark .dot{background:rgba(255,255,255,.26)}
.sec--dark .dot.on{background:var(--paper)}
.ba-hint{
  position:absolute;left:50%;top:calc(50% + 52px);transform:translateX(-50%);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;
  color:#fff;opacity:.85;pointer-events:none;transition:opacity .5s linear;text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.ba.touched .ba-hint{opacity:0}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{
  position:absolute;bottom:16px;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.13em;text-transform:uppercase;padding:.6em 1em;
  background:rgba(10,10,10,.66);color:#fff;backdrop-filter:blur(6px);
}
.ba-tag.l{left:16px}
.ba-tag.r{right:16px}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:#fff;
  transform:translateX(-.5px);pointer-events:none;
}
.ba-knob{transition:transform .5s var(--ease);
  
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border:1px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(10,10,10,.28);
  backdrop-filter:blur(4px);font-family:var(--data);font-size:1rem;letter-spacing:.1em;
}
.ba-range{position:absolute;inset:auto 0 0;width:100%;opacity:0;height:44px;cursor:ew-resize}
.ba-range:focus-visible+.ba-handle .ba-knob{outline:2px solid #fff;outline-offset:4px}
.ba-notes{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3.6vw,48px)}
@media (max-width:760px){.ba-notes{grid-template-columns:1fr}}
.note{border-top:1px solid var(--g20);padding-top:18px}
.sec--dark .note{border-color:rgba(255,255,255,.18)}
.note h3,.note h4{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);letter-spacing:-.01em;line-height:1.3;margin-bottom:var(--s2);font-weight:var(--w-head)}
.note p{font-size:var(--small);line-height:1.7;color:var(--g45)}
@media (min-width:760px){}
@media (min-width:1180px){}
@media (min-width:760px){}
@media (min-width:1180px){}
/* ============================================================
   SERVICES
   ============================================================ */
.srv{position:relative;border-top:1px solid rgba(255,255,255,.16)}
.srv-row{
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.6vw,38px);
  align-items:baseline;padding:clamp(14px,1.6vw,22px) 0;
  border-bottom:1px solid rgba(255,255,255,.16);position:relative;
}
.srv-row b{font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;color:var(--g65);font-weight:400}
.srv-row h3{
  font-size:clamp(1.35rem,3.4vw,2.6rem);letter-spacing:-.035em;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.srv-row p{grid-column:2;font-size:var(--small);line-height:1.6;color:var(--g45);max-width:56ch;margin-top:8px}
@media (hover:hover) and (min-width:900px){
  .srv-row h3{transform-origin:left}
  .srv-row:hover h3{transform:translateX(18px)}
  .srv-list:hover .srv-row:not(:hover) h3{opacity:.32}
}
.srv-peek{
  position:absolute;top:0;right:0;width:min(30vw,340px);aspect-ratio:4/5;
  pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);overflow:hidden;
}
.srv-peek.on{opacity:1;transform:none}
.srv-peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.srv-peek{display:none}}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--rule)}
@media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr);border-top:0}}
.step{padding:clamp(16px,1.8vw,24px) 0;border-bottom:var(--rule)}
@media (min-width:900px){
  .step{border-top:1px solid var(--ink);border-bottom:0;padding-right:clamp(14px,2vw,30px);position:relative}
  .step::before{
    content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--ink);
    transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);transition-delay:var(--d,0ms);
  }
  .step.in::before{transform:scaleX(1)}
}
.step b{display:block;font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;color:var(--g45);margin-bottom:12px;font-weight:400}
.step h3{font-size:clamp(1.2rem,1.08rem + .55vw,1.5rem);letter-spacing:-.02em;line-height:1.25;margin-bottom:var(--s2)}
.step p{font-size:var(--small);line-height:1.6;color:var(--g65);max-width:36ch}
.step i{display:block;margin-top:14px;font-style:normal;font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45)}
.dots{display:flex;gap:4px;align-items:center}
.dot{width:38px;height:38px;position:relative;background:none}
.dot::after{
  content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;
  background:var(--g20);transition:background .4s;
}
.dot.on::after{background:var(--ink)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-bottom:var(--rule)}
.faq details:first-of-type{border-top:var(--rule)}
.faq summary{
  display:flex;align-items:baseline;gap:18px;cursor:pointer;list-style:none;
  padding:clamp(16px,1.5vw,22px) 0;font-size:clamp(1.15rem,1rem + .8vw,1.45rem);
  letter-spacing:-.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--data);font-size:1.3rem;
  color:var(--g45);transition:transform .45s var(--ease)
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 clamp(18px,1.8vw,26px);max-width:64ch;color:var(--g65);font-size:var(--small);line-height:1.62}
.faq .a p+p{margin-top:.9em}

/* ============================================================
   CONTACT
   ============================================================ */
.c-grid{display:grid;gap:clamp(38px,6vw,90px);grid-template-columns:1fr}
@media (min-width:960px){.c-grid{grid-template-columns:1.05fr 1fr}}
.c-grid h2{font-size:var(--t2);max-width:19ch;text-wrap:balance}
.c-avail{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45);
}
.c-avail i{width:6px;height:6px;border-radius:50%;background:var(--paper);display:block}
.channels{margin-top:clamp(34px,4vw,56px);display:grid;gap:0;border-top:1px solid rgba(255,255,255,.18)}
.channels a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;
}
.channels a span:last-child{color:var(--g45);transition:color .4s,transform .5s var(--ease)}
.channels a:hover span:last-child{color:var(--paper);transform:translateX(-4px)}
form{display:grid;gap:clamp(20px,2.4vw,30px)}
.field{position:relative;display:grid;gap:9px}
.field label{
  font-family:var(--data);font-size:var(--micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--g65);
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--body);color:var(--paper);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.16);border-radius:0;
  padding:clamp(13px,1.4vw,16px) clamp(14px,1.5vw,18px);
  letter-spacing:-.005em;-webkit-appearance:none;appearance:none;
  transition:background .35s linear,border-color .35s linear;
}
.field input::placeholder,.field textarea::placeholder{color:var(--g65);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.3)}
/* a browser's own autofill paints the field white; keep it dark */
.field input:-webkit-autofill,.field textarea:-webkit-autofill,.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 60px #141414 inset;caret-color:var(--paper);
}
.field textarea{resize:vertical;min-height:clamp(96px,11vw,132px);line-height:1.55}
.field select{appearance:none;cursor:pointer;padding-right:44px}
.field select option{background:#111;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:rgba(255,255,255,.08);border-color:var(--paper)}
.field.filled label,.field:focus-within label{transform:translateY(-13px) scale(.9);opacity:.6}
.field:focus-within{border-color:var(--paper)}
.f-arrow{position:absolute;right:16px;bottom:clamp(15px,1.6vw,19px);color:var(--g45);pointer-events:none;font-family:var(--data)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
.form-note{font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45);max-width:30ch;line-height:1.9}
.sent{font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;color:var(--paper)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--g45);padding:clamp(30px,4vw,54px) var(--m) clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.14)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;align-items:flex-end}
.foot-logo{width:min(70vw,520px);height:auto}
.foot-meta{display:flex;flex-wrap:wrap;gap:var(--s2) 36px;margin-top:var(--s4);font-family:var(--data);font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.foot-meta span:last-child{font-size:.875rem;letter-spacing:.08em}
.to-top{font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--paper)}

/* ============================================================
   PROJECT VIEWER
   ============================================================ */
.viewer{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .85s var(--ease),visibility .85s step-end;
}
.viewer.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .85s var(--ease),visibility 0s}
.v-bar{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,1.8vw,22px) var(--m);background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:var(--rule);
}
.v-bar b{font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;font-weight:400}
.v-close{display:flex;align-items:center;gap:10px;font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase}
.v-head{padding:clamp(40px,7vw,110px) var(--m) clamp(26px,4vw,50px);display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:900px){.v-head{grid-template-columns:1.3fr 1fr;align-items:end}}
.v-head h2{font-size:var(--t2);letter-spacing:-.045em;max-width:20ch}
.v-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
.v-facts div{border-top:1px solid var(--g20);padding-top:12px}
.v-facts dt{font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;color:var(--g45)}
.v-facts dd{margin:8px 0 0;font-size:var(--small);line-height:1.6}
.v-body{padding-inline:var(--m);max-width:62ch;color:var(--g65);display:grid;gap:1em;margin-bottom:clamp(34px,5vw,64px)}
.v-gal{padding-bottom:clamp(50px,8vw,130px)}
/* Editorial rhythm: full-bleed, within-margin, inset, offset single, or a pair.
   The engine in buildGallery() assigns these so no two neighbours repeat. */
.v-block{margin-bottom:clamp(18px,3vw,52px)}
.v-block--full{padding-inline:0;margin-bottom:clamp(26px,4.6vw,86px)}
.v-block--wide,.v-block--inset,.v-block--pair,.v-block--left,.v-block--right{padding-inline:var(--m)}
.v-block--inset .plate{width:min(100%,1120px);margin-inline:auto}
.v-block--pair{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:start}
@media (min-width:800px){.v-block--pair{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .v-block--left .plate{width:58%}
  .v-block--right .plate{width:58%;margin-left:auto}
}

/* the opening frame of a project is cropped to a cinematic band */
.v-block--lead{padding-inline:0;margin-bottom:clamp(30px,5vw,96px)}
.v-block--lead .frame{aspect-ratio:auto !important;height:min(88vh,64vw);min-height:340px}

/* a pause: the text of the project, set between two sequences of photographs */
.v-pause{
  padding-inline:var(--m);margin:clamp(40px,7vw,130px) 0 clamp(46px,8vw,140px);
}
.v-pause p{
  max-width:34ch;margin-inline:auto;text-align:center;color:var(--g65);
  font-family:var(--editorial);font-size:clamp(1.25rem,1.05rem + .95vw,2rem);
  font-weight:400;line-height:1.38;letter-spacing:-.014em;
}
.v-pause::before,.v-pause::after{
  content:"";display:block;width:1px;height:clamp(30px,5vw,70px);
  margin:0 auto clamp(22px,3vw,40px);background:var(--g20);
}
.v-pause::after{margin:clamp(22px,3vw,40px) auto 0}

/* the sequence breathes differently after a full-bleed than after a pair */
.v-block--full + .v-block--pair,.v-block--full + .v-block--wide{margin-top:clamp(6px,1vw,18px)}
.v-next{border-top:var(--rule);padding:clamp(30px,5vw,70px) var(--m);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px}
.v-next h3{font-size:clamp(1.6rem,4vw,3rem);letter-spacing:-.04em}

/* ============================================================
   CONTINUITY
   Bridges carry one hairline through every colour change, so the
   page reads as a single scroll rather than a stack of sections.
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:65;
  transform:scaleX(0);transform-origin:left;background:var(--g45);
  pointer-events:none;
}
.bridge{
  position:relative;display:grid;place-items:center;
  height:clamp(84px,7.4vw,120px);
}
.bridge--to-ink{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 40%,#050505 100%)}
.bridge--to-paper{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 8%,var(--paper) 66%,var(--paper) 100%)}
.bridge--to-tint{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 8%,var(--g04) 66%,var(--g04) 100%)}
.bridge-line{
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,rgba(140,140,140,0) 0%,rgba(140,140,140,.85) 45%,rgba(140,140,140,0) 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.4s var(--ease);
}
.bridge.in .bridge-line{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.bridge-line{transform:none}}
.bridge-note{
  position:absolute;left:var(--m);max-width:24ch;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.85;
}
/* the note always lands on the flat part of the gradient, in the darker grey */
.bridge--to-ink .bridge-note{top:0;color:var(--g65)}
.bridge--to-paper .bridge-note,.bridge--to-tint .bridge-note{bottom:0;color:var(--g65)}
.bridge--tint-ink .bridge-note{top:0;color:var(--g65)}
@media (min-width:900px){.bridge-note{left:calc(var(--m) + 26px)}}

/* an image that starts in one colour and finishes in the next */
.lift{margin-top:calc(-1 * clamp(70px,11vw,190px));position:relative;z-index:1}
.lift .frame{box-shadow:0 40px 90px rgba(0,0,0,.45)}
.sec--tight-top{padding-top:clamp(30px,4vw,60px)}

/* ============================================================
   MY STORY
   ============================================================ */
.story-chapter{max-width:1280px;margin-inline:auto}
.story-label{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--g45);margin-bottom:clamp(26px,4vw,54px);font-weight:400;
}
.story-open{
  font-family:var(--editorial);font-size:clamp(1.9rem,1.1rem + 3.4vw,3.7rem);
  font-weight:400;line-height:1.14;letter-spacing:-.024em;max-width:30ch;
}
.story-open span{display:block}
.story-open .em{color:var(--paper)}
.story-open .sub{color:var(--g45);font-size:.58em;line-height:1.42;margin-top:.75em;max-width:32ch}
.story-cols{
  display:grid;gap:clamp(30px,5vw,80px);grid-template-columns:1fr;
  margin-top:clamp(46px,7vw,120px);align-items:start;
}
@media (min-width:900px){.story-cols{grid-template-columns:1fr 1fr}}
.story-p{color:var(--g45);max-width:46ch;display:grid;gap:1.3em;font-size:var(--body);line-height:var(--lh)}
.story-p strong{color:var(--paper);font-weight:400}
.story-say{
  font-family:var(--editorial);font-size:clamp(1.5rem,3.4vw,2.9rem);
  font-weight:400;line-height:1.2;letter-spacing:-.024em;max-width:26ch;color:var(--paper);
}
.story-band{
  margin-top:clamp(50px,8vw,130px);padding-top:clamp(34px,5vw,70px);
  border-top:1px solid rgba(255,255,255,.16);
}
.story-close{display:grid;gap:.55em;margin-top:clamp(40px,6vw,90px)}
.story-close p{
  font-family:var(--editorial);font-size:clamp(1.35rem,3vw,2.5rem);
  font-weight:400;line-height:1.2;letter-spacing:-.024em;max-width:34ch;
}
.story-close .quiet{color:var(--g65)}
.story-close .last{
  font-family:var(--display);font-size:var(--body);
  letter-spacing:.01em;line-height:1.66;color:var(--g45);max-width:48ch;margin-top:1.5em;
}
.story-sign2{
  margin-top:clamp(34px,5vw,64px);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g65);
}

/* ============================================================
   CALL TO ACTION BAND
   ============================================================ */
.cta-band{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:20px clamp(20px,4vw,60px);margin-top:clamp(28px,3.4vw,52px);
  padding-top:clamp(18px,2.2vw,30px);border-top:var(--rule);
}
.sec--dark .cta-band{border-top-color:rgba(255,255,255,.18)}
.cta-band p{font-size:clamp(1.22rem,1.05rem + .95vw,1.9rem);letter-spacing:-.02em;line-height:1.32;max-width:26ch}

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.page-head{padding:clamp(96px,9vw,124px) var(--m) clamp(18px,2vw,30px)}
.page-head h1{font-size:clamp(2.3rem,1.5rem + 3.2vw,4.2rem);letter-spacing:-.03em;line-height:1.04;max-width:20ch}
.crumbs{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:clamp(20px,3vw,36px);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;color:var(--g45);
}
.crumbs a:hover{color:var(--ink)}
.pcard{display:flex;flex-direction:column}
.pcard .proj-title{margin-top:clamp(14px,1.8vw,22px)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:14px 20px;font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
/* anchored sections must clear the fixed bar */
section[id],main[id],[id="top"]{scroll-margin-top:clamp(74px,11vw,116px)}

/* the menu must never trap its own links off-screen */
.menu{overflow-y:auto;overscroll-behavior:contain}
@media (max-height:760px){
  .menu a{font-size:clamp(1.3rem,5.4vw,1.9rem);padding-block:.12em}
}
@media (max-width:460px){
  .menu-foot{gap:10px 18px;margin-top:28px}
}

/* nothing sits on top of a project title, at any width */
.pcard .frame,.proj>.frame{margin-bottom:0}
.proj-title,.proj-meta,.proj-open{max-width:100%;overflow-wrap:anywhere}

/* the lifted opener keeps its shadow off the text below on small screens */
@media (max-width:640px){
  .lift .frame{box-shadow:0 20px 50px rgba(0,0,0,.4)}
  .bridge-note{max-width:16ch;letter-spacing:.13em}
}

/* ============================================================
   GUIDE LINES
   One vertical thread sits just outside the text column and runs
   the height of the page, with short horizontal ticks into each
   title. The bridge hairline is the same line, continuing through
   the colour changes.
   ============================================================ */
:root{--gutter:clamp(16px,2.2vw,34px)}

@media (min-width:900px){
  .bridge-line{left:calc(var(--m) - var(--gutter))}

  .p-head,.story-chapter{position:relative}
  .p-head::before,.story-chapter::before{
    content:"";position:absolute;left:calc(-1 * var(--gutter));top:.2em;bottom:0;width:1px;
    background:var(--g20);transform:scaleY(0);transform-origin:top;
    transition:transform 1.3s var(--ease);
  }
  .sec--dark .p-head::before,.sec--dark .story-chapter::before{background:rgba(255,255,255,.22)}
  .p-head.in::before,.story-chapter.in::before{transform:scaleY(1)}

  /* the tick that ties the thread to the title */
  .p-head::after,.story-chapter::after{
    content:"";position:absolute;left:calc(-1 * var(--gutter));top:.7em;
    width:var(--gutter);height:1px;background:var(--g20);
    transform:scaleX(0);transform-origin:left;
    transition:transform .9s var(--ease) .35s;
  }
  .sec--dark .p-head::after,.sec--dark .story-chapter::after{background:rgba(255,255,255,.22)}
  .p-head.in::after,.story-chapter.in::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .p-head::before,.p-head::after,.story-chapter::before,.story-chapter::after{transform:none}
}

/* horizontal rules that earn their place: they separate one idea from the next */
.story-band{border-top-width:1px}

/* ============================================================
   IMAGE PROTECTION
   A transparent shield sits over every photograph, so right-click,
   drag and long-press land on the shield rather than the image.
   ============================================================ */
img{
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  pointer-events:none;
}
/* The shield must never sit over a link, or it eats the tap on mobile.
   Images already have pointer-events:none, which is what stops long-press. */
.frame:not(a)::after,.lb-stage::after{
  content:"";position:absolute;inset:0;z-index:3;
  -webkit-touch-callout:none;user-select:none;
}
a.frame{
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;      /* no double-tap delay swallowing the first tap */
}
/* a text link needs a real tap target on a phone */
@media (max-width:820px){
  .pentry .link,.proj-open .link,.home-open{padding-block:1em;min-height:44px;display:inline-flex;align-items:center}
}
.hero-media::after{content:"";position:absolute;inset:0;z-index:3}

/* ============================================================
   FULL-SCREEN VIEWER (LIGHTBOX)
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(6,6,6,.97);
  /* dvh so mobile browser chrome cannot push the image off screen */
  height:100dvh;max-height:100dvh;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s step-end;
}
.lb.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.lb-top{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2vw,26px) var(--m);color:var(--paper);
}
.lb-title{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--g45);
}
.lb-close{
  display:flex;align-items:center;gap:10px;color:var(--paper);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase;
}
.lb-stage{
  position:relative;display:grid;place-items:center;overflow:hidden;
  padding:0 clamp(12px,5vw,90px);min-height:0;min-width:0;touch-action:pan-y;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.lb-stage img.shown{opacity:1;transform:none}
.lb-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2vw,26px) var(--m);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--g45);
}
.lb-count{color:var(--paper)}
.lb-nav{
  position:absolute;top:auto;bottom:0;transform:none;z-index:4;
  width:clamp(44px,5vw,58px);height:clamp(44px,5vw,58px);border:1px solid rgba(255,255,255,.3);
  border-radius:50%;display:grid;place-items:center;color:var(--paper);
  background:rgba(10,10,10,.35);backdrop-filter:blur(6px);
  transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.lb-nav:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb-prev{right:50%;left:auto;margin-right:7px}
.lb-next{left:50%;right:auto;margin-left:7px}
.lb-prev:hover{transform:translateX(-3px)}
.lb-next:hover{transform:translateX(3px)}
@media (max-width:640px){
  .lb-nav{width:42px;height:42px}
  .lb-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .lb,.lb-stage img{transition:opacity .2s linear}
  .lb-stage img{transform:none}
}
/* the gallery advertises that its frames open */
.v-gal .frame{cursor:zoom-in}

/* the hero's longest word stays inside the margins on the narrowest phones */
@media (max-width:400px){
  .hero h1{letter-spacing:-.038em}
}

/* ============================================================
   HERO
   A veil that lifts when the photograph has actually decoded, a
   slow dissolve between frames, and the frame credited like the
   cover of a magazine.
   ============================================================ */
.hero-veil{
  position:absolute;inset:0;z-index:4;background:var(--ink);
  opacity:0;pointer-events:none;
}
/* only ever visible while a script is running the sequence */
.js .hero-veil{opacity:1;transition:opacity .9s var(--ease)}
.js .hero-veil.lift{opacity:0}

.hero-credit{
  position:absolute;right:var(--m);bottom:clamp(32px,5vw,72px);z-index:3;
  margin:0;text-align:right;color:var(--g20);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.9;
  opacity:0;transition:opacity 1s var(--ease);
}
.hero-credit.on{opacity:.72}
.hero-credit b{display:block;color:var(--paper);font-weight:400}
@media (max-width:900px){
  .hero-credit{display:none}
}

/* the scroll cue picks up the thread motif: a line with light travelling down it */
.hero-cue{
  position:absolute;left:50%;bottom:0;z-index:3;width:1px;
  height:clamp(48px,7vw,92px);overflow:hidden;
  background:rgba(255,255,255,.22);
}
.hero-cue i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
  transform:translateY(-100%);
  animation:cueRun 2.6s var(--ease) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-100%)}
  60%{transform:translateY(100%)}
  100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){.hero-cue i{animation:none;transform:none;opacity:.5}}

/* the hero hands the page over rather than simply scrolling away */
.hero-inner{will-change:transform,opacity}

/* ============================================================
   LARGE DISPLAYS
   More margin rather than wider text: photographs keep the width,
   paragraphs keep their measure.
   ============================================================ */
@media (min-width:2200px){
  :root{--m:clamp(140px,7vw,240px)}
}
@media (min-width:1600px){
  .nav-links{gap:clamp(30px,2.4vw,48px)}
}

/* anchored sections clear the taller header */
section[id],main[id],[id="top"]{scroll-margin-top:clamp(84px,11vw,132px)}

/* ============================================================
   HEADER BALANCE
   The logo, the wordmark and the link row share one optical line.
   The role line only appears where there is room for it, so the
   header is never crowded at any width.
   ============================================================ */
.nav{gap:clamp(20px,3vw,56px)}
.brand-txt{gap:2px}
.brand i{display:none}
@media (min-width:1400px){
  .brand i{display:block}
}
@media (min-width:1180px){
  .nav-links a{padding-block:14px}
}

/* ============================================================
   HOME PAGE FRAMES
   Three photographs at full width, each credited and each a way in.
   ============================================================ */
.home-frame{display:block;margin-bottom:clamp(12px,1.4vw,22px)}
.home-frame:last-of-type{margin-bottom:0}
.home-cap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s1) clamp(16px,2.2vw,34px);
  padding-inline:var(--m);margin-top:var(--s3);
  font-family:var(--data);font-size:var(--cap);letter-spacing:.1em;
  text-transform:uppercase;color:var(--g45);
}
.home-cap b{color:var(--ink);font-weight:500;letter-spacing:.09em}
.home-open{margin-left:auto;color:var(--ink);white-space:nowrap;transition:opacity .4s var(--ease)}
@media (hover:hover){
  .home-open{opacity:.45}
  .home-frame:hover .home-open{opacity:1}
}
@media (max-width:640px){
  .home-open{margin-left:0;width:100%}
}

/* the About title carries the one fact that matters */
.story-title{
  font-size:var(--t2);letter-spacing:-.03em;line-height:1.1;
  max-width:26ch;margin-bottom:clamp(30px,4vw,58px);text-wrap:balance;
}
.story-label{margin-bottom:var(--s3)}

/* Before & After: a plain title, and a bigger comparison */
.ba-title{font-size:var(--t2);letter-spacing:-.03em;line-height:1.08;max-width:14ch}
.ba{max-height:88vh}

/* On a phone the hero box is taller than the screen for the parallax, which
   means the photograph gets scaled up. There is no parallax on touch, so the
   box matches the screen exactly and the image stays sharp. */
@media (max-width:820px){
  .hero-media{inset:0}
}

/* A portrait cover is a deliberate choice, so it is shown in full: centred,
   never taller than the window, never cropped into a letterbox. */
.v-block--lead-tall{padding-inline:var(--m);margin-bottom:clamp(30px,5vw,96px)}
.v-block--lead-tall .plate{width:var(--lead-w);margin-inline:auto}

/* the photograph is never larger than the space it sits in */
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:700px){
  .lb-stage{padding:6px 6px 62px}
  .lb-bar{padding:10px 14px}
  .lb-cap{padding:0 14px 12px;max-height:3.4em;overflow:hidden}
}

/* ============================================================
   CLOSING SPREAD
   The last photograph rises out of the gradient and hands the page
   to the contact section, so the page ends on an image, not on text.
   ============================================================ */
.cta-spread{
  position:relative;z-index:1;
  margin-top:calc(-1 * clamp(70px,11vw,190px));
}
.cta-spread .frame{aspect-ratio:4/3;box-shadow:0 40px 90px rgba(0,0,0,.45)}
@media (min-width:800px){
  .cta-spread .frame{aspect-ratio:16/9}
}
@media (max-width:640px){
  .cta-spread .frame{box-shadow:0 20px 50px rgba(0,0,0,.4)}
}

/* the caption under a home page frame is now the link itself */
a.home-cap{text-decoration:none}
a.home-cap:hover .home-open{opacity:1}
@media (max-width:820px){ a.home-cap{padding-block:.6em} }

/* a heading that carries structure without taking space on screen */
.sr-only{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* the questions read as one tight list, not eight separate blocks */
.faq{margin-top:calc(-1 * clamp(10px,1.6vw,26px))}
@media (min-width:900px){
  .faq summary{line-height:1.3}
  .faq .a{padding-bottom:clamp(16px,1.5vw,22px)}
}

/* ============================================================
   FIT TO SCREEN
   A photograph is only worth showing if it can be seen at once.
   Every gallery frame is capped by height, and the width follows
   from its own ratio, so nothing needs scrolling to be read.
   ============================================================ */
:root{--fit:64vh;--fit-home:52vh}
@media (min-width:900px){ :root{--fit:62vh} }
@media (min-width:1600px){ :root{--fit:64vh} }
@media (max-width:640px){ :root{--fit:120vh;--fit-home:120vh} }  /* on a phone width is the limit */

/* the opening band and the project brief that follows it */
.v-block--lead .frame{height:min(56vh,48vw)}
.p-brief{
  display:grid;gap:clamp(20px,3vw,52px);grid-template-columns:1fr;
  padding-block:clamp(26px,3.4vw,52px) clamp(30px,4.5vw,72px);
}
@media (min-width:900px){
  .p-brief{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}
.p-brief .v-facts{grid-template-columns:repeat(2,1fr);max-width:520px}
.p-brief .lede{max-width:56ch}

/* the full screen viewer sits the photograph inside the window, with air */
.lb-stage{padding:clamp(8px,2vh,22px) clamp(10px,1.6vw,24px) clamp(66px,10vh,88px)}
.lb-stage img{max-height:100%;max-width:100%}

/* About: the portrait and one column of text, side by side */
@media (min-width:900px){
  .story-cols--about{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
  .story-cols--about .story-p{max-width:58ch}
}
.story-cols--about .story-p{font-size:var(--body);line-height:var(--lh)}

/* ============================================================
   DATE PICKER
   One date, or several the client could do. Same palette, same
   monospace numerals, no library.
   ============================================================ */
.field--dates{position:relative;display:grid;gap:9px}
.dates-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;color:var(--paper);cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);
  padding:clamp(13px,1.4vw,16px) clamp(14px,1.5vw,18px);
  transition:background .35s linear,border-color .35s linear;
}
.dates-trigger:hover{border-color:rgba(255,255,255,.3)}
.dates-trigger[aria-expanded="true"]{background:rgba(255,255,255,.08);border-color:var(--paper)}
.dates-trigger .f-arrow{position:static;color:var(--g65)}
.dates-title{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--g65);
}
.dates-value{
  grid-column:1;font-size:var(--body);letter-spacing:-.01em;color:var(--g45);
}
.dates-value.has{color:var(--paper)}
.dates-trigger .f-arrow{
  grid-column:2;grid-row:1 / span 2;position:static;align-self:center;
  color:var(--g45);transition:transform .35s var(--ease);
}
.field--dates.is-open .dates-trigger .f-arrow{transform:rotate(180deg);color:var(--paper)}
.dates-panel{
  position:absolute;left:0;right:0;top:100%;z-index:8;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.2);
  padding:clamp(16px,2vw,24px);box-shadow:0 30px 60px rgba(0,0,0,.55);
}
.dates-done{margin-top:var(--s2);width:100%;justify-content:center;display:flex}
.dates-mode{display:flex;gap:8px;margin-bottom:var(--s2);flex-wrap:wrap}
.chip{
  border:1px solid rgba(255,255,255,.28);color:var(--g20);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.12em;
  text-transform:uppercase;padding:.7em 1.15em;min-height:40px;
  transition:background .3s,color .3s,border-color .3s;
}
.chip.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cal{max-width:360px}
.cal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s2);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
}
.cal-head button{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.28);color:var(--paper);
  display:grid;place-items:center;transition:background .3s,color .3s;
}
.cal-head button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.cal-head button:disabled{opacity:.3}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{
  font-family:var(--data);font-size:.72rem;letter-spacing:.06em;color:var(--g65);
  text-align:center;padding-bottom:6px;
}
.cal-day{
  aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--data);font-size:var(--micro);color:var(--g20);
  border:1px solid rgba(255,255,255,.12);
  transition:background .25s,color .25s,border-color .25s;
}
.cal-day:hover:not(:disabled):not(.off){border-color:var(--paper);color:var(--paper)}
.cal-day.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cal-day:disabled{color:rgba(255,255,255,.18);border-color:rgba(255,255,255,.06);cursor:default}
.cal-day.off{visibility:hidden}

/* the three home page frames are sized to be seen whole, caption included */
@media (min-width:900px){
  .home-frame{width:min(100%,calc(var(--fit-home) * 1.5));margin-inline:auto}
  .home-frame.proj--bleed{margin-inline:auto}
  .home-frame .home-cap{padding-inline:0}
}

/* the panel floats, so nothing below it moves when it opens */
.field--dates{position:relative;z-index:6}


/* the dots, on a dark section */
.sec--dark .dot::after{background:rgba(255,255,255,.26)}
.sec--dark .dot.on::after{background:var(--paper)}

/* on a phone: labels smaller, knob bigger, controls on their own line */
@media (max-width:640px){
  .ba-tag{font-size:.78rem;letter-spacing:.09em;padding:.5em .7em;bottom:12px}
  .ba-tag.l{left:12px}
  .ba-tag.r{right:12px}
  .ba-knob{width:56px;height:56px}
}


/* one word for the mood of a project, in place of a paragraph */
.p-mood{
  font-size:clamp(2.6rem,1.4rem + 5vw,5.5rem);
  font-weight:300;letter-spacing:-.04em;line-height:.95;
  color:var(--g20);text-transform:lowercase;
  align-self:end;margin:0;
}
@media (min-width:900px){ .p-mood{text-align:right} }

/* the note under the comparison */
.ba-note{margin-top:clamp(20px,2.4vw,32px);max-width:64ch}

/* the two closing sections are both dark, so a hairline divides them */
#contact{border-top:1px solid rgba(255,255,255,.16)}

/* About: less air under the closing lines now that one has gone */
.story-band:last-of-type{margin-top:clamp(18px,2vw,30px)}
.story-close .last{margin-top:var(--s3)}


/* the alternative spellings of the name: quiet, but readable and indexable */
.foot-alt{color:var(--g65);letter-spacing:.06em;text-transform:none;font-size:.8125rem}

.foot-geo{display:inline-flex;gap:16px}
.foot-geo a{color:var(--g65);text-transform:none;letter-spacing:.06em;font-size:.8125rem}
.foot-geo a:hover{color:var(--paper)}


/* ============================================================
   COMPARISON ARROWS
   Below the photograph on a phone, flanking it on a desktop, and
   they nudge twice on first sight so they are not missed.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .ba-step{animation:none!important}
}

/* Get quotation reads as the heading, and its words carry full contrast */
.q-title{font-size:var(--t2);letter-spacing:-.03em;line-height:1.05}
.lede--bright{color:var(--paper)}
#quote .field label,#quote .dates-title{color:var(--g20)}
#quote .eyebrow{color:var(--g20)}


/* About: the closing block and the button sit closer together */
#main .story-chapter .cta-band{margin-top:clamp(20px,2.4vw,34px)}
.story-sign2{margin-top:clamp(18px,2vw,30px)}
.story-close .last{margin-top:var(--s2)}


/* ============================================================
   SOCIAL ICONS
   Drawn as hairline strokes so they belong to the same drawing
   as the rules and the arrows. No icon font, no library.
   ============================================================ */
.socials{display:flex;gap:10px;margin-top:clamp(18px,2.2vw,30px);flex-wrap:wrap}
.ch-social{
  width:clamp(48px,6vw,56px);height:clamp(48px,6vw,56px);
  border:1px solid rgba(255,255,255,.26);
  display:grid;place-items:center;color:var(--g20);
  transition:border-color .4s,color .4s,background .4s;
}
.ch-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.ch-social svg .dot{fill:currentColor;stroke:none}
.ch-social span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ch-social:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}


/* the menu footer icons sit on the ink panel */
.ch-social--menu{border-color:rgba(255,255,255,.3)}

/* on a phone every photograph in the viewer opens at the full screen width */
@media (max-width:820px){
  .lb-stage{padding:6px 0 62px}
  .lb-stage img{width:100%;height:auto;max-height:none;object-fit:contain}
}


/* ============================================================
   PHOTOGRAPH CAPTIONS
   The editorial layer of a monograph, and the strongest text
   signal a search engine can attach to an image.
   ============================================================ */
.v-cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px clamp(12px,1.6vw,22px);
  margin-top:var(--s2);font-size:var(--cap);line-height:1.5;color:var(--g45);
  max-width:64ch;
}
.v-cap span{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--g65);
}
.v-block--full .v-cap,.v-block--lead .v-cap{padding-inline:var(--m)}
.v-block--pair .v-cap{font-size:var(--micro)}
@media (max-width:640px){
  .v-cap{margin-top:10px;font-size:.875rem}
  .v-cap span{font-size:.75rem}
}


/* a line back to the city and the portfolio, at the end of a project */
.p-related{
  padding:clamp(20px,2.4vw,32px) var(--m) 0;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--g45);
}
.p-related a{color:var(--ink);border-bottom:1px solid var(--g20);padding-bottom:2px}
.p-related a:hover{border-bottom-color:var(--ink)}

.foot-meta a{color:inherit;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
.foot-meta a:hover{border-bottom-color:var(--paper)}


/* Selected Work is now a run of photographs, so they sit close together and
   read as one sequence rather than three separate cards. */
.home-frame:last-of-type{margin-bottom:0}
@media (min-width:900px){
  .home-frame{width:min(100%,calc(var(--fit-home) * 1.5));margin-inline:auto}
}


/* ============================================================
   SERVICES AS PICTURES
   Seven cards, each with a photograph from the work itself. The old
   row list showed its preview on hover only, which meant nothing at
   all on a phone — where most people read this section.
   ============================================================ */
.srv-grid{
  display:grid;gap:clamp(20px,2.6vw,40px) clamp(16px,2vw,30px);
  grid-template-columns:1fr;
  margin-top:clamp(28px,3.4vw,52px);
}
@media (min-width:700px){ .srv-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .srv-grid{grid-template-columns:repeat(3,1fr)} }

.srv-card{min-width:0}
.srv-card > summary{
  display:block;cursor:pointer;list-style:none;
}
.srv-card > summary::-webkit-details-marker{display:none}
.srv-card .frame{overflow:hidden;background:rgba(255,255,255,.05)}
.srv-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
@media (hover:hover){ .srv-card:hover img{transform:scale(1.035)} }

.srv-no{
  display:block;margin-top:var(--s2);
  font-family:var(--data);font-size:var(--micro);
  letter-spacing:.14em;color:var(--g65);
}
.srv-card h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:6px;font-size:clamp(1.06rem,.98rem + .34vw,1.26rem);
  letter-spacing:-.015em;line-height:1.26;
}
/* a plus that becomes a minus, so it is clear the card opens */
.srv-card h3 i{
  position:relative;flex:0 0 13px;width:13px;height:13px;top:-1px;
}
.srv-card h3 i::before,.srv-card h3 i::after{
  content:"";position:absolute;left:0;right:0;top:6px;height:1px;
  background:currentColor;opacity:.55;transition:transform .35s var(--ease),opacity .35s linear;
}
.srv-card h3 i::after{transform:rotate(90deg)}
.srv-card[open] h3 i::after{transform:rotate(0)}
.srv-card[open] h3 i::before,.srv-card[open] h3 i::after{opacity:1}

.srv-card > p{
  margin-top:var(--s2);font-size:var(--small);line-height:1.6;
  color:var(--g45);max-width:44ch;
}
/* the description slides open rather than appearing */
.js .srv-card > p{
  animation:srvOpen .42s var(--ease) both;
}
@keyframes srvOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .js .srv-card > p{animation:none} }



/* ============================================================
   BEFORE & AFTER — the controls
   Under the photograph, where they can be read: a step back, where
   you are in the set, a step forward. The label spells out "2 of 3"
   so it is obvious there is more than one pair.
   ============================================================ */
.ba-bar{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.6vw,18px);margin-top:clamp(16px,2vw,26px);
}
/* the position, then the two steps, then the dots — one centred column at
   every width, so nothing wraps and nothing runs off the edge */
.ba-of{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--g45);white-space:nowrap;
}
.q-arrows{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px)}
.ba-step{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:1px solid var(--g20);color:var(--ink);
  padding:.7em 1.15em;min-height:44px;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.ba-step b{
  font-family:var(--data);font-weight:400;font-size:var(--micro);
  letter-spacing:.12em;text-transform:uppercase;
}
.ba-step span{font-size:1.02rem;line-height:1}
.ba-step:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ba-step:disabled{opacity:.35;cursor:default}
.ba-step:disabled:hover{background:none;color:var(--ink);border-color:var(--g20)}
.ba-bar .dots{display:flex;justify-content:center}

/* a nudge on the forward step, twice, until the visitor uses it */
@keyframes baNudge{0%,100%{transform:translateX(0)}40%{transform:translateX(5px)}70%{transform:translateX(0)}}
.ba:not(.ba-used) ~ .ba-bar #baNext{animation:baNudge 1.1s var(--ease) 1.4s 2}
@media (prefers-reduced-motion:reduce){ .ba-step{animation:none!important} }

/* Services are text-only until the chosen photographs arrive. Without a picture
   above it, each card needs its own rule to read as a row rather than a stray
   line — and the grid narrows so the titles do not float in empty columns. */
.srv-card:not(:has(.frame)){
  border-top:var(--rule);padding-top:clamp(14px,1.8vw,20px);
}
.srv-card:not(:has(.frame)) .srv-no{margin-top:0}
.srv-card:not(:has(.frame)) h3{margin-top:4px}
@supports not (selector(:has(*))){
  .srv-card{border-top:var(--rule);padding-top:clamp(14px,1.8vw,20px)}
  .srv-card .srv-no{margin-top:0}
}