/* =============================================================
   Lee Jaffe
   Built in the Jason Martin visual language, to Lee's rules:
   a safe zone on every edge, nothing touching the page border,
   air between the words, and a phone that is treated as the
   main event rather than an afterthought.
   ============================================================= */

:root{
  --accent:#000;
  --ink:#000;
  --ink-soft:rgba(0,0,0,.45);
  --ink-mid:rgba(0,0,0,.62);
  --ink-cap:rgba(0,0,0,.8);
  --rule:#e6e6e6;
  --blockh:62px;
  /* the rail: empty space down the left so the + / × at the top left
     always has room of its own */
  --rail:0px;
  /* nothing begins on the control's line: the page starts below it */
  --maskh:64px;
  --drop:clamp(34px, 5vh, 86px);
  --gut-l:calc(var(--gut) + var(--rail));

  /* ---- THE SAFE ZONE ----------------------------------------
     --gut is the page gutter: nothing, picture or word, ever
     sits outside it. --edge is the margin around a full-bleed
     picture so it never touches the edge of the screen. ------- */
  --gut:clamp(30px, 5vw, 86px);
  --edge:clamp(16px, 2.6vw, 34px);
  --navh:214px;          /* the nav bar, to Lee's measurement   */
  --gap:clamp(26px, 3.4vw, 56px);
  --sec:clamp(64px, 9vw, 150px);   /* air between sections      */

  --ease-out:cubic-bezier(0.33, 1, 0.68, 1);
  --ease-nav:cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-soft:cubic-bezier(0.16, 1, 0.3, 1);

  --mono:"Martian Mono","Inter",ui-monospace,monospace;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
/* the plus-sign nav is the foot of every page — leave it room */
body{padding-bottom:clamp(70px,8vh,120px)}
.over>:last-child,.carried>:last-child{margin-bottom:var(--sec)}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html.snap{scroll-snap-type:y proximity}
html.snap .slide{scroll-snap-align:start; scroll-snap-stop:normal}
.slide,.sect,[id]{scroll-margin-top:calc(var(--maskh) + 8px)}
.navbar+*{margin-top:0}
@media (prefers-reduced-motion:reduce){ html.snap{scroll-snap-type:none} }
@media (hover:none){
  html.snap{scroll-snap-type:none}
  html{scroll-behavior:auto}
  /* a finger moves one page and one page only */
  html,body{overscroll-behavior-y:none}
}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--sans);
  font-size:17px; line-height:1.85;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(0,0,0,.06);
}
img{display:block; max-width:100%}
h1,h2,h3,p,span,a,figcaption{overflow-wrap:break-word}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
::selection{background:#000; color:#fff}

/* a column of words is never wider than the eye wants */
p{margin:0 0 1.3em}

/* ---------- page wipe: white then black, 0.8s ---------- */
#preloader,#loading{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:99999;
  pointer-events:none; opacity:0;
  transition:opacity .8s var(--ease-out);
}
#preloader{background:#fff; transition-delay:.4s}
#loading{background:#000}
body.is-leaving #loading{opacity:1}

/* =============================================================
   THE NAV BAR
   Lee's own measurements: 1724 x 214 at desktop width.
   Two interleaved rows of works on the left, the wordmark and
   the studio links on the right, the credits beneath them.
   It is on every page except the landing.
   ============================================================= */
.header{
  position:fixed; top:0; left:0; width:100%; height:1px; z-index:9999;
  overflow:visible;
  font-family:var(--mono); text-transform:uppercase;
}
.header-wrapper{
  position:absolute; top:0; left:0; width:100%;
  min-height:var(--navh); background:#fff;
  padding:calc(var(--maskh) + 30px) var(--gut) 34px;
  transform:translateY(-130%);
  transition:transform .35s var(--ease-nav);
  border-bottom:1px solid var(--rule);
  box-shadow:none;
}
body.menu-open .header-wrapper{box-shadow:0 24px 60px rgba(0,0,0,.06)}
body.menu-open .header-wrapper{transform:translateY(0)}
.header-content{
  opacity:0; transition:opacity .9s .15s;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--gap); row-gap:26px; align-items:start;
  max-width:1680px; margin:0 auto;
}
body.menu-open .header-content{opacity:1}

/* the two rows of work links */
.nav-rows{display:flex; flex-direction:column; gap:14px}
.nav-row{display:flex; flex-wrap:wrap; gap:14px 38px; margin:0; padding:0; list-style:none}
.nav-row.two{padding-left:84px}
.nav-rows a{
  display:inline-block; font-size:22px; line-height:1.1;
  letter-spacing:.015em; padding:6px 2px;
  color:var(--ink-soft); transition:color .35s var(--ease-out);
}
@media (max-width:980px){ .nav-rows a{color:var(--ink-mid)} }
.nav-rows a:hover,.nav-rows a[aria-current]{color:var(--ink)}
.nav-rows a.strong{color:var(--ink)}

/* the right-hand block */
.nav-side{display:grid; grid-template-columns:auto; row-gap:16px;
  align-items:start; justify-items:start; min-width:min(32ch,32vw)}
.nav-side .nav-studio{flex-direction:row; gap:clamp(18px,2.2vw,38px)}
.nav-mark{
  grid-column:1 / -1; transition:opacity .25s var(--ease-out);
  font-family:"Archivo Black",system-ui,sans-serif;
  font-size:clamp(26px,2.3vw,38px); letter-spacing:.09em; line-height:1;
  margin:0 0 4px;
}
.nav-studio{display:flex; flex-direction:column; gap:10px}
.nav-studio a{font-size:22px; line-height:1.1; letter-spacing:.015em; padding:4px 2px}
.nav-studio a:hover{color:var(--ink-soft)}
.nav-mark:hover{opacity:.5}
.nav-credits{
  font-size:11px; line-height:2; letter-spacing:.04em; text-transform:none;
  color:var(--ink-soft); max-width:36ch; margin-top:4px;
}
.nav-credits a{color:var(--ink-mid)}
.nav-credits a:hover{color:var(--ink)}
.nav-legal{
  grid-column:1 / -1; font-size:11px; line-height:1.9; letter-spacing:.04em;
  text-transform:none; color:var(--ink-soft);
}


/* the + that opens it */

.menu-btn{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  position:absolute; top:50%; margin-top:-22px;
  left:var(--gut-l);
  width:44px; height:44px; z-index:2;
  transition:transform .35s var(--ease-soft);
}
.menu-btn::before,.menu-btn::after{
  content:""; display:block; position:absolute; background:var(--ink);
  transition:.35s var(--ease-soft);
}
.menu-btn::before{top:50%; left:5px; right:5px; height:2.5px; border-radius:2px;
  transform:translateY(-50%)}
.menu-btn::after{top:5px; bottom:5px; left:50%; width:2.5px; border-radius:2px;
  transform:translateX(-50%)}
.menu-btn.on-dark::before,.menu-btn.on-dark::after{background:#fff}
/* over the landing photograph the control is white; once the writing
   arrives it turns black again */

body.menu-open .menu-btn{transform:rotate(45deg)}
body.menu-open .menu-btn::before,body.menu-open .menu-btn::after{background:var(--ink)}

@media (max-width:1240px){
  .nav-rows a,.nav-studio a{font-size:19px}
  .nav-row.two{padding-left:48px}
}
@media (max-width:980px){
  :root{--navh:auto}
  .header-wrapper{
    min-height:100svh; max-height:100svh; overflow-y:auto;
    padding:calc(var(--maskh) + 26px) var(--gut) calc(var(--gut) + 30px);
    transform:translateY(-100%);
  }
  .header-content{grid-template-columns:1fr; row-gap:clamp(34px,9vw,54px)}
  .nav-rows{padding-left:0; gap:2px}
  .nav-row{flex-direction:column; gap:2px}
  .nav-row.two{padding-left:0}
  .nav-rows a,.nav-studio a{font-size:clamp(23px,6.2vw,30px); padding:13px 0;
    line-height:1.15}
  .nav-side{grid-template-columns:1fr; row-gap:22px; min-width:0;
    border-top:1px solid var(--rule); padding-top:clamp(26px,7vw,40px)}
  .nav-mark{font-size:clamp(22px,6vw,28px); margin-bottom:10px}
  .nav-side .nav-studio{gap:clamp(22px,7vw,34px)}
  .nav-credits{line-height:2.2; margin-top:10px}
  .nav-legal{line-height:2.2}
    .menu-btn{top:50%; margin-top:-20px; left:var(--gut-l);
      width:40px; height:40px}
}

/* =============================================================
   THE LANDING
   Two beats on one screen. First the name over the moving
   picture. Then, as you scroll, the name goes, the picture
   settles back, and the menu arrives. Full bleed — no border.
   ============================================================= */
.intro-wrap{position:relative}
.intro{
  position:relative;
  width:100%; height:calc(100svh - var(--maskh)); background:#000; overflow:hidden;
}
.sheet-a,.sheet-b{z-index:auto; margin-top:0}
.is-landing .over{position:relative; margin-top:0}
.intro-bg{
  position:absolute; inset:0; z-index:10;
  background-size:cover; background-position:50% 38%; background-repeat:no-repeat;
  animation:intro-bg 60s linear infinite alternate-reverse;
  image-rendering:auto; will-change:transform;
}
@keyframes intro-bg{0%{background-position:62% 56%}100%{background-position:38% 24%}}
.intro-shade{position:absolute; inset:0; z-index:15; background:#000; opacity:.22}
.intro-shade--deep{opacity:.34}
/* the second sheet shows the whole photograph — black around it, never cropped */
.intro-bg--whole{
  background-size:cover; background-color:#000;
  background-position:50% 48%;
  filter:grayscale(1) blur(14.5px); animation:none;
  transform:scale(1.12);
}

.intro-name{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:22px; padding:0 var(--gut);
}
.wordmark{
  color:#fff; font-family:"Archivo Black",system-ui,sans-serif;
  letter-spacing:.1em; font-size:clamp(34px,6.4vw,92px); line-height:1;
  text-transform:uppercase; margin:0;
}
.roles{
  color:rgba(255,255,255,.82); font-size:clamp(9px,.85vw,11px);
  letter-spacing:.3em; line-height:2; text-transform:uppercase; margin:0;
}
.roles span+span::before{content:" · "}

.nav-items{
  position:absolute; inset:0; z-index:22;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(6px,1vw,14px); padding:0 clamp(26px,5.5vw,96px);
}
.nav-item{
  display:block; color:#fff; text-align:left;
  font-family:var(--mono); font-weight:300;
  font-size:clamp(24px,2.9vw,44px); line-height:1.24;
  letter-spacing:.03em; text-transform:uppercase;
  transition:opacity .3s var(--ease-out); padding:3px 0;
}
.nav-item:hover{opacity:.45}
.btn-arrowdown{
  position:absolute; bottom:clamp(26px,5vh,54px); left:50%;
  transform:translateX(-50%);
  z-index:50; width:56px; display:flex; flex-direction:column;
  align-items:center; gap:10px; color:#fff;
  animation:arrowMoveUpDown 1.3s ease-in-out infinite;
  transition:opacity .4s;
}
.btn-arrowdown span{
  font-family:var(--mono); font-weight:300; font-size:9px;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.75);
}
.btn-arrowdown svg{width:52px; height:40px; display:block}

@keyframes arrowMoveUpDown{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@media (max-width:860px){
  .nav-item{font-size:clamp(23px,6.2vw,34px); line-height:1.4}
}

/* =============================================================
   THE UNCOVERING
   Each .cover section stays put while the page that follows
   slides up over it — and uncovers it again on the way back.
   ============================================================= */
/* One page at a time. Nothing is pinned behind anything else — on a
   phone that layering showed through as text over text while scrolling. */
.cover{position:relative; top:auto; z-index:auto}
.over{position:relative; z-index:auto; background:#fff}

/* a picture arriving: unmasked from the bottom, never scaled */
.pic{--rise:0}
.pic>img{clip-path:inset(0 0 0 0)}
.reveal-up{opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal-up.is-seen{opacity:1; transform:none}

/* =============================================================
   PAGE HEADER BLOCK
   ============================================================= */
.pbanner{
  padding:calc(var(--drop) + clamp(10px,2vh,34px)) var(--gut) clamp(40px,6vw,80px);
  border-bottom:1px solid var(--rule);
}
.back-btn{
  display:inline-flex; align-items:center; min-height:46px;
  border:1px solid rgba(0,0,0,.35); padding:0 22px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:38px;
  transition:.25s var(--ease-out);
}
.back-btn:hover{background:#000; color:#fff; border-color:#000}
.eyebrow{font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); margin:0}
.pbanner h1{
  font-family:var(--mono); font-weight:300;
  font-size:clamp(32px,5vw,62px); line-height:1.1;
  letter-spacing:.015em; text-transform:uppercase; margin:18px 0 0;
}
.lede{max-width:52ch; font-size:17px; line-height:2.1; color:var(--ink-mid); margin:26px 0 0}

/* =============================================================
   THE BLOCKS — the only way between subjects
   ============================================================= */
.blockwrap{padding:clamp(26px,3.4vw,46px) var(--gut) 0}
.blocks{display:flex; flex-wrap:wrap; gap:12px}
.block{
  display:inline-flex; align-items:center; min-height:52px;
  padding:0 22px; border:1px solid #d9d9d9;
  font-family:var(--mono); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; line-height:1;
  transition:.25s var(--ease-out); white-space:nowrap;
}
@media (max-width:620px){
  .block{white-space:normal; line-height:1.5; padding:10px 14px; max-width:100%}
  .blocks{gap:10px}
}
.block:hover{border-color:#000}

/* The Prints live inside Jean-Michel Basquiat, joined to his block */
.block-set{display:inline-flex; align-items:stretch; max-width:100%}
.block-set .block--head{border-right-width:0}
.block-set .block--sub{
  font-size:10px; letter-spacing:.18em; padding:0 16px;
  background:#fafafa; color:var(--ink-soft);
  border-left:1px solid #ececec;
}
.block-set .block--sub::before{content:"↳"; margin-right:9px; opacity:.5}
.block-set .block--sub:hover{background:#fff; color:var(--ink)}
.block-set .block--sub.is-here{background:#000; color:#fff; border-color:#000}
.block-set .block--head.is-here+.block--sub{border-left-color:#000}
@media (max-width:620px){
  .block-set{flex-wrap:wrap}
  .block-set .block--head{border-right-width:1px}
  .block-set .block--sub{border-left:1px solid #ececec; margin-left:14px}
}
.block.is-here{background:#000; color:#fff; border-color:#000}

/* the titles of a page, set under its writing */
.work-sidebar .blocks{
  margin:clamp(26px,2.6vw,40px) 0 0; gap:8px;
  pointer-events:auto; max-width:34ch;
}
.work-sidebar .block{min-height:40px; padding:0 14px; font-size:10px;
  letter-spacing:.16em; border-color:#e4e4e4}


/* =============================================================
   SINGLE OR SIDE BY SIDE
   ============================================================= */
.viewswitch{
  position:absolute; top:50%; transform:translateY(-50%);
  right:var(--gut-l); z-index:3;
  display:flex; border:1px solid #d9d9d9; background:#fff;
}
.viewswitch button{
  min-height:40px; padding:0 15px;
  font-family:var(--mono); font-weight:300; font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  transition:.2s var(--ease-out);
}
.viewswitch button+button{border-left:1px solid #e6e6e6}
.viewswitch button.is-on{background:#000; color:#fff}

body.view-2 .stage{display:grid; grid-template-columns:1fr 1fr;
  align-items:start; padding:clamp(26px,3vw,48px) 0}
body.view-2 .slide{min-height:0; padding:clamp(18px,2vw,30px) clamp(16px,2vw,34px)}

/* a heading inside the scroll is a heading, never a column */
.stage>.sect,.sect--full,body.view-2 .stage>.sect{grid-column:1 / -1}
.stage>.sect{padding-top:var(--sec)}
body.view-2 .slide .pic{position:relative; width:100%; height:auto;
  inset:auto; top:auto; left:auto; right:auto; bottom:auto}
body.view-2 .grid3{grid-template-columns:repeat(2,1fr)}
body.view-2 .cards{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
  body.view-2 .stage{grid-template-columns:1fr 1fr}
  body.view-2 .slide{min-height:auto; padding:clamp(16px,4vw,28px) clamp(10px,3vw,20px)}
  body.view-2 .grid3{grid-template-columns:repeat(2,1fr); gap:clamp(18px,5vw,28px)}
  .viewswitch{right:var(--gut-l)}
  .viewswitch button{min-height:34px; padding:0 11px; font-size:8px; letter-spacing:.16em}
}

/* the subject pills */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0}
.pills a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid #dcdcdc; padding:0 16px; line-height:1;
  transition:.25s var(--ease-out);
}
.pills a:hover,.pills a.active{background:#000; color:#fff; border-color:#000}

/* =============================================================
   CARDS
   ============================================================= */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sec) var(--gap);
  padding:clamp(56px,7vw,110px) var(--gut) clamp(70px,9vw,130px);
}
.card .t{display:block; font-family:var(--mono); font-weight:300;
  font-size:clamp(15px,1.4vw,19px); letter-spacing:.05em;
  text-transform:uppercase; margin-top:24px}
.card .m{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:12px}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards{grid-template-columns:1fr; gap:clamp(44px,12vw,64px)} }

/* =============================================================
   THE WORKS VIEW — words on the left, one picture per screen
   ============================================================= */
.work-sidebar{
  position:fixed; top:0; left:0; width:32vw; height:100svh; z-index:100;
  /* the column is fixed, so it must clear the bar itself */
  padding:calc(var(--maskh) + var(--drop)) clamp(26px,2.8vw,44px) clamp(34px,3.4vw,58px);
  user-select:none; pointer-events:none;
  opacity:0; transition:opacity .7s var(--ease-out) .2s;
  display:flex; flex-direction:column;
}
body.ready .work-sidebar{opacity:1}
.ttl-row{display:flex; align-items:baseline; gap:clamp(14px,1.6vw,26px);
  flex-wrap:wrap; pointer-events:auto}
.enquire{
  display:inline-flex; align-items:center; min-height:38px; padding:0 18px;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:300; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; line-height:1;
  transition:.25s var(--ease-out);
}
.enquire:hover{background:#fff; color:var(--ink)}
@media (max-width:980px){ .enquire{min-height:44px} }
.work-sidebar .ttl{
  font-family:var(--mono); font-weight:300; font-size:clamp(20px,1.9vw,27px);
  line-height:1.2; letter-spacing:.02em; text-transform:uppercase; margin:0;
}
.work-sidebar .desc{
  font-size:16px; line-height:2; margin:34px 0 0; color:var(--ink-mid);
  max-width:34ch;
}
.work-sidebar .cap{
  margin-top:auto; padding-top:34px; padding-bottom:26px; padding-right:58px;
  font-family:var(--mono); font-size:13px; line-height:1.7; font-weight:300;
}
.work-sidebar .cap b{display:block; font-weight:400}
.work-sidebar .cap span{display:block; color:var(--ink-soft); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; margin-top:12px}

.stage{margin-left:32vw; width:68vw}
.slide{
  position:relative; width:100%; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--drop) clamp(30px,4.5vw,80px) clamp(70px,12vh,140px);
  background:#fff;
}
.slide .pic{position:absolute; width:auto; height:auto;
  top:var(--drop); bottom:clamp(70px,12vh,140px);
  left:clamp(30px,4.5vw,80px); right:clamp(30px,4.5vw,80px)}

.nav-arrows{position:fixed; bottom:clamp(88px,11vh,140px);
  left:calc(30vw - clamp(26px,2.5vw,42px)); z-index:60}
.nav-arrows button{width:26px; height:40px; display:block; transition:.25s; opacity:.75}
.nav-arrows button+button{margin-top:16px}
.nav-arrows button:hover{opacity:.4}
.nav-arrows svg{width:100%; height:100%; display:block}
.works-arrow-down{
  position:fixed; bottom:clamp(14px,2vw,28px); left:calc(30vw + 35vw);
  margin-left:-16px; width:32px; height:32px; z-index:50;
  animation:arrowDownMoveUpDown 1.5s ease-in-out infinite; transition:opacity .25s;
}
@keyframes arrowDownMoveUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.works-arrow-down.gone{opacity:0; pointer-events:none}
body.ready.past-stage .work-sidebar,
body.past-stage .nav-arrows,
body.past-stage .works-arrow-down{opacity:0; pointer-events:none}
.work-sidebar,.nav-arrows{transition:opacity .45s var(--ease-out)}

@media (max-width:980px){
  .work-sidebar{
    position:static; width:100%; height:auto; opacity:1; transition:none;
    padding:var(--drop) var(--gut) 0; display:block;
  }
  .work-sidebar .desc{max-width:40ch; font-size:16px}
  .work-sidebar .cap{display:none}
  .stage{margin-left:0; width:100%}
  .slide{min-height:auto; padding:clamp(28px,6vw,44px) var(--gut)}
  .slide .pic{position:relative; width:100%; height:auto;
    inset:auto; top:auto; left:auto; right:auto; bottom:auto}
  .nav-arrows,.works-arrow-down{display:none}
}

/* ---------- a picture: shown whole, never cropped ---------- */
.pic{position:relative; overflow:hidden; background:#fff; width:100%}
.pic.can-open{cursor:zoom-in}

/* the lightbox */
.lb{position:fixed; inset:0; z-index:12000; background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(34px,5vw,80px) clamp(44px,7vw,120px) clamp(72px,9vh,120px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out)}
.lb.is-open{opacity:1; pointer-events:auto}
.lb .pic{position:absolute; inset:clamp(34px,5vw,80px) clamp(44px,7vw,120px) clamp(72px,9vh,120px);
  width:auto; height:auto; cursor:default}
.lb-cap{position:absolute; left:clamp(44px,7vw,120px); bottom:clamp(26px,3.4vh,44px);
  right:clamp(44px,7vw,120px);
  font-family:var(--mono); font-weight:300; font-size:11px; letter-spacing:.14em;
  line-height:1.9; text-transform:uppercase; color:var(--ink-soft)}
.lb-close{position:absolute; top:clamp(20px,2.4vw,34px); right:clamp(20px,2.4vw,34px);
  width:44px; height:44px; z-index:2}
.lb-close::before,.lb-close::after{content:""; position:absolute; top:50%; left:6px; right:6px;
  height:2.5px; background:var(--ink); border-radius:2px}
.lb-close::before{transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:46px; opacity:.7; transition:opacity .2s; z-index:2}
.lb-prev{left:clamp(8px,1.4vw,22px)}
.lb-next{right:clamp(8px,1.4vw,22px)}
.lb-prev:hover,.lb-next:hover{opacity:.35}
.lb-prev svg,.lb-next svg{width:100%; height:100%; display:block}
body.lb-open{overflow:hidden}
/* while a sheet is open the page behind is frozen and cannot be scrolled */
body.is-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden}
.header-wrapper,.lb{overscroll-behavior:contain}
/* the exhibition strip holds a sideways flick, but a vertical scroll over
   it belongs to the page underneath */
.show-strip{overscroll-behavior-x:contain; overscroll-behavior-y:auto}
.header-wrapper{-webkit-overflow-scrolling:touch}
.pic>img{position:absolute; display:block; max-width:none; width:auto; height:auto;
  object-fit:fill; opacity:0; transition:opacity .5s var(--ease-out)}
.pic>img.is-in{opacity:1}
.pic--fit{height:auto}
.card .pic,.grid3 .pic,.carried .pic{position:relative; inset:auto}

/* ---------- contact sheet ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sec) var(--gap);
  padding:clamp(40px,5vw,70px) var(--gut) clamp(60px,8vw,120px)}
.grid3 figure{margin:0; display:flex; flex-direction:column; gap:16px}
.grid3 figcaption{font-size:10px; letter-spacing:.16em; line-height:2;
  text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:1000px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid3{grid-template-columns:1fr; gap:clamp(40px,11vw,56px)} }

.sect{padding:var(--sec) var(--gut) 0}
.sect h2{font-family:var(--mono); font-weight:300;
  font-size:clamp(30px,4.2vw,56px); line-height:1.08; text-transform:uppercase;
  letter-spacing:.01em; margin:0}
.sect .meta{font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin:18px 0 0}

/* ---------- prose ---------- */
.prose{padding:0 var(--gut) clamp(70px,9vw,140px); max-width:none}
.prose p{font-size:17px; line-height:2.1; margin:0 0 1.55em; max-width:62ch}
.prose h2{font-family:var(--mono); font-weight:300; font-size:clamp(20px,2.2vw,28px);
  text-transform:uppercase; margin:2.4em 0 .8em}

.split{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  gap:clamp(34px,5vw,90px);
  padding:var(--sec) var(--gut) 0; align-items:start}
.split+.split{padding-top:var(--sec)}
.split-pic,.split-words{padding-top:0}
.split-words{padding-top:4px}
.split-cta{margin:clamp(30px,3.4vw,46px) 0 0}
.split-cta .back-btn{margin-bottom:0}
.split .lead{font-size:clamp(21px,2.1vw,30px); line-height:1.5; margin:18px 0 26px;
  max-width:22ch; font-weight:400}
.split .body{font-size:16px; line-height:2.05; color:var(--ink-mid); max-width:44ch}
.split h2.mono{font-family:var(--mono); font-weight:300;
  font-size:clamp(23px,2.8vw,38px); line-height:1.15; text-transform:uppercase;
  letter-spacing:.015em; margin:18px 0 22px}
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:clamp(28px,8vw,44px)}
  .split .lead{max-width:none}
}

/* ---------- rows / timeline ---------- */
.rows,.timeline{padding:0 var(--gut) clamp(70px,9vw,140px)}
.row{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:10px 34px;
  padding:30px 0; border-top:1px solid var(--rule); align-items:baseline}
.row .yr{font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink-soft)}
.row .ti{font-size:18px; line-height:1.6}
.row .ve{font-size:14px; line-height:1.8; color:var(--ink-soft); margin-top:8px}
.row .go{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:760px){ .row{grid-template-columns:1fr; gap:6px; padding:24px 0} }

/* =============================================================
   THE CARRIED PAGES — books, store, exhibitions, music,
   features, contact. Same air as everywhere else.
   ============================================================= */
.carried{padding-bottom:clamp(40px,6vw,80px)}
.carried section{padding:var(--sec) 0 0}
.carried .wrap{padding:0 var(--gut); max-width:1680px; margin:0 auto}
.carried h2,.section-head h2{
  font-family:var(--mono); font-weight:300;
  font-size:clamp(23px,2.8vw,36px); line-height:1.2; letter-spacing:.015em;
  text-transform:uppercase; margin:0 0 .9em;
}
.carried h3{font-family:var(--mono); font-weight:300; font-size:clamp(18px,1.8vw,22px);
  line-height:1.35; margin:0 0 .7em; letter-spacing:.01em}
.carried p{font-size:16px; line-height:2.05; color:var(--ink-mid); max-width:60ch}
.carried a{text-decoration:none}
.carried .sub{color:var(--ink-soft)}
.section-head{margin-bottom:clamp(28px,4vw,52px)}

/* books */
.book-entry{padding:0 0 var(--sec)}
.book-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gap); align-items:start}
.book-cover{display:flex; flex-direction:column; align-items:flex-start; gap:30px}
.book-copy h2{margin-bottom:.5em}
.book-copy .blurb{font-size:17px; line-height:1.95}
.book-shop,.btn-light,.submit-btn,.p-cart{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px;
  border:1px solid rgba(0,0,0,.35); padding:0 26px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  transition:.25s var(--ease-out); cursor:pointer;
}
.book-shop:hover,.btn-light:hover,.submit-btn:hover,.p-cart:hover{
  background:#000; color:#fff; border-color:#000}
.book-reviews{margin:40px 0 0; display:flex; flex-direction:column; gap:22px}
.book-reviews p,.book-reviews blockquote{
  margin:0; padding-left:22px; border-left:1px solid var(--rule);
  font-size:15px; line-height:1.95; color:var(--ink-mid)}
.bibliography{padding-top:var(--sec)}
.bib-list{display:flex; flex-direction:column}
.bib-entry{display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px 34px;
  padding:26px 0; border-top:1px solid var(--rule)}
.bib-year{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-soft)}
@media (max-width:900px){
  .book-grid{grid-template-columns:1fr; gap:clamp(26px,7vw,40px)}
  .bib-entry{grid-template-columns:1fr; gap:6px}
}

/* store */
.store-item{padding:0 0 var(--sec)}
.store-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gap); align-items:start}
.store-media{display:flex; flex-direction:column; gap:24px}
.store-copy{display:flex; flex-direction:column; gap:10px}
.store-title{font-family:var(--mono); font-weight:300; font-size:clamp(17px,1.7vw,21px);
  line-height:1.35; text-transform:uppercase; letter-spacing:.02em; margin:0}
.store-copy p{font-size:15px; line-height:1.9}
.store-avail{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft)}
.store-buy{margin:clamp(26px,3vw,42px) 0 0}
.store-buy .book-shop{min-height:52px}
.store-opts{display:flex; flex-direction:column; gap:14px; margin-top:6px}
.store-opt{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  padding:18px 0; border-top:1px solid var(--rule)}
.store-opt-title{font-size:15px; line-height:1.6}
@media (max-width:860px){ .store-grid{grid-template-columns:1fr; gap:clamp(26px,7vw,40px)} }

/* music */
.music-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap); align-items:center; padding:0 0 var(--sec)}
.music-copy p{font-size:16px; line-height:1.95}
.music-note{font-size:14px; line-height:1.9; letter-spacing:.01em;
  text-transform:none; color:var(--ink-soft); margin-top:24px; max-width:52ch}
.video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#000}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.credits-head{margin:0 0 clamp(26px,3vw,44px)}
.credits-head h3{font-family:var(--mono); font-weight:300;
  font-size:clamp(17px,1.8vw,22px); line-height:1.3; letter-spacing:.02em;
  text-transform:uppercase; margin:0}
.credits-head p{font-size:14px; line-height:1.9; color:var(--ink-soft);
  margin:12px 0 0; max-width:46ch}
.credits{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--gap); align-items:start}
.credit-group{display:flex; flex-direction:column; gap:16px}
@media (max-width:620px){ .credits{gap:clamp(30px,8vw,44px)} }
.credit-group h4{margin:0}
.credit-group h3,.credit-group h4,.credit-group strong{font-family:var(--mono); font-weight:300;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.carried ul{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:12px}
.carried li{font-size:15px; line-height:1.8; color:var(--ink-mid);
  padding-left:18px; position:relative}
.carried li::before{content:""; position:absolute; left:0; top:.85em;
  width:7px; height:1px; background:rgba(0,0,0,.3)}
.credit-feature{font-size:15px; line-height:1.8; color:var(--ink-mid)}
@media (max-width:860px){ .music-row{grid-template-columns:1fr} }

/* features */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sec) var(--gap)}
.gallery-grid .tile{display:flex; flex-direction:column; gap:16px}
.gallery-grid .tile.wide{grid-column:span 2}
.gallery-grid .cap{font-size:10px; letter-spacing:.16em; line-height:2;
  text-transform:uppercase; color:var(--ink-soft)}
.cta-band{background:#000; color:#fff; padding:clamp(50px,7vw,96px) var(--gut);
  margin-top:var(--sec); display:flex; flex-direction:column; align-items:flex-start;
  gap:22px}
.cta-band p{color:rgba(255,255,255,.72)}
.eyebrow.on-dark{color:rgba(255,255,255,.6)}
.cta-band .btn-light{border-color:rgba(255,255,255,.5); color:#fff}
.cta-band .btn-light:hover{background:#fff; color:#000; border-color:#fff}
@media (max-width:1000px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .gallery-grid{grid-template-columns:1fr}
  .gallery-grid .tile.wide{grid-column:auto} }

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sec) var(--gap); align-items:start}
.contact-grid form{display:flex; flex-direction:column; gap:30px; max-width:52ch}
.field{display:flex; flex-direction:column; gap:12px}
.field label{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft)}
.field input,.field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  border:0; border-bottom:1px solid #d6d6d6; background:none;
  padding:14px 2px; width:100%; border-radius:0; transition:border-color .25s;
}
.field textarea{min-height:150px; resize:vertical; line-height:1.8}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:#000}
.submit-btn{align-self:flex-start; margin-top:8px}
.contact-info{display:flex; flex-direction:column; gap:30px}
.contact-info .row{grid-template-columns:120px minmax(0,1fr); padding:22px 0}
.contact-info .k{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft)}
.contact-info .v{font-size:16px; line-height:1.8}
.social-row{display:flex; flex-direction:column; gap:14px; padding-top:22px;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:14px}
.social-row a:hover{color:var(--ink-soft)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
@media (max-width:620px){
  .contact-info .row{grid-template-columns:1fr; gap:8px}
  .bib-entry,.row{grid-template-columns:1fr}
}

/* the catalogue — Lee's own titles, no prices */
.catalogue{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sec) var(--gap); padding:clamp(40px,5vw,70px) var(--gut) 0;
}
.cat-item{display:flex; flex-direction:column; gap:18px; margin:0}
.cat-item .pic{align-self:flex-start; width:100%}
.cat-pending{
  width:100%; aspect-ratio:4/5; border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.cat-no{font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); margin:8px 0 0}
.cat-title{font-family:var(--mono); font-weight:300;
  font-size:clamp(16px,1.6vw,21px); line-height:1.35; letter-spacing:.01em;
  margin:0}
.cat-detail{font-size:14px; line-height:1.9; color:var(--ink-mid); margin:0; max-width:40ch}
@media (max-width:1000px){ .catalogue{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .catalogue{grid-template-columns:1fr; gap:clamp(44px,12vw,64px)} }

/* installation views — a strip you scroll sideways */
.carried .sect,.sect{padding:var(--sec) var(--gut) 0}
.show,.carried .show{padding:clamp(34px,4vw,60px) 0 clamp(50px,6vw,90px)}
.carried .show:first-child{padding-top:clamp(40px,5vw,78px)}
.show-head{padding:0 var(--gut); margin-bottom:clamp(22px,2.6vw,40px)}
.show-head h3{font-family:var(--mono); font-weight:300;
  font-size:clamp(22px,2.6vw,34px); line-height:1.18; letter-spacing:.01em;
  text-transform:uppercase; margin:0}
.show-head .where{font-size:13px; line-height:1.9; letter-spacing:.04em;
  color:var(--ink-mid); margin:14px 0 0}
.show-head .count{font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin:8px 0 0}
.show+.show{border-top:1px solid var(--rule); padding-top:clamp(40px,5vw,72px)}
.show-strip{
  display:flex; scroll-padding-left:var(--gut); gap:var(--gap); align-items:flex-start;
  padding:0 var(--gut) 18px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.show-shot{margin:0; flex:0 0 auto; width:clamp(240px,27vw,360px);
  scroll-snap-align:start; display:flex; flex-direction:column; gap:14px}
.show-shot .pic{position:relative; inset:auto; width:100%;
  height:clamp(180px,20vw,260px); cursor:zoom-in}
.show-shot figcaption{font-size:10px; letter-spacing:.18em; line-height:2;
  text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:860px){ .show-shot{width:70vw}
  .show-shot .pic{height:46vw} }

/* the press list */
.press{padding:clamp(30px,4vw,54px) var(--gut) 0; padding-left:var(--gut-l);
  max-width:1680px}
.press-row{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);
  gap:10px 30px; align-items:baseline;
  padding:24px 0; border-top:1px solid var(--rule);
  transition:opacity .25s var(--ease-out);
}
.press-row:hover{opacity:.55}
.press-pub{font-family:var(--mono); font-weight:300; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.press-ti{font-size:17px; line-height:1.6}
.press-dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-align:right}
@media (max-width:760px){
  .press-row{grid-template-columns:1fr; gap:8px; padding:20px 0}
  .press-dt{text-align:left}
}

/* a quote inside the story */
.pull{
  margin:clamp(30px,4vw,52px) 0; padding-left:clamp(18px,2vw,30px);
  border-left:1px solid var(--rule); max-width:52ch;
}
.pull blockquote{margin:0; font-style:italic; font-size:16px; line-height:1.9;
  color:var(--ink-mid)}
.pull figcaption{margin:12px 0 0; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft)}
.pull figcaption a:hover{color:var(--ink)}

/* the gallery band on the contact page */
.gallery-band,.carried .gallery-band{
  margin-top:var(--sec); padding:clamp(60px,8vw,120px) var(--gut);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.gallery-inner{max-width:1680px; margin:0 auto}
.gallery-name{
  font-family:var(--mono); font-weight:300;
  font-size:clamp(38px,7vw,96px); line-height:1.02; letter-spacing:.01em;
  text-transform:uppercase; margin:20px 0 0;
}
.gallery-where{font-family:var(--mono); font-weight:300;
  font-size:clamp(15px,1.7vw,22px); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin:18px 0 0}
.gallery-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,58px); margin:clamp(40px,5vw,76px) 0 0;
}
.gallery-meta .lbl{display:block; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px}
.gallery-meta p{font-size:16px; line-height:1.95; margin:0}
.gallery-meta a:hover{color:var(--ink-soft)}
.gallery-cta{margin:clamp(36px,4vw,60px) 0 0}
.gallery-cta .back-btn{margin-bottom:0}
@media (max-width:760px){ .gallery-meta{grid-template-columns:1fr; gap:30px} }

/* the Impact film, inside the scroll */
.film{padding:var(--sec) clamp(30px,4.5vw,80px) var(--sec); margin:0; grid-column:1 / -1}
.film video{width:100%; max-width:1180px; max-height:none; height:auto;
  display:block; margin:0 auto; background:#000}
.film figcaption{font-size:10px; letter-spacing:.16em; line-height:2;
  text-transform:uppercase; color:var(--ink-soft); margin:18px auto 0;
  max-width:1180px}

/* =============================================================
   FOOTER — white, always
   ============================================================= */
.footer{
  background:#fff; color:#000; border-top:1px solid var(--rule);
  padding:clamp(60px,8vw,120px) var(--gut) calc(clamp(34px,4vw,56px) + 70px);
  font-family:var(--mono);
}
.footer-map{display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(36px,4.6vw,72px) var(--gap); align-items:start;
  max-width:1680px; margin:0 auto}
.fnav{display:flex; flex-direction:column; gap:12px}
.fnav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:10px 30px}
.fnav .two{padding-left:38px}
.fnav .three{padding-left:76px}
.fnav a{font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mid); transition:color .25s}
.fnav a:hover{color:var(--ink)}
@media (max-width:980px){
  .footer-map{grid-template-columns:repeat(2,1fr)}
  .fnav{grid-column:1 / -1}
  .fnav .two,.fnav .three{padding-left:0}
}
@media (max-width:560px){ .footer-map{grid-template-columns:1fr} }
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr);
  gap:var(--sec) var(--gap); align-items:start; max-width:1680px; margin:0 auto}
.fcol{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.footer .mark{font-family:"Archivo Black",system-ui,sans-serif; font-size:21px;
  letter-spacing:.1em; text-transform:uppercase}
.footer .blurb{font-size:12px; line-height:2.1; max-width:30ch;
  color:var(--ink-soft); margin:12px 0 0}
.footer .lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px}
.footer .sub{font-size:12px; letter-spacing:.03em; line-height:1.6}
.footer .sub:hover{color:var(--ink-soft)}
.footer .fnote{font-size:11px; line-height:2.1; color:var(--ink-soft);
  max-width:24ch; margin:14px 0 0}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  border-top:1px solid var(--rule); padding-top:30px;
  margin:var(--sec) auto 0; max-width:1680px;
  font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
}
@media (max-width:980px){ .footer-grid{grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,9vw,50px) var(--gap)} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ============================================================
   THE WHOLE PAGE SITS RIGHT OF THE RAIL
   ============================================================ */
.pbanner,.blockwrap,.cards,.sect,.carried .sect,.prose,.split,.rows,.timeline,
.carried .wrap,.grid3,.catalogue,.show-head,.gallery-band,.carried .gallery-band,
.cta-band,.film,.footer,.header-wrapper,.nav-items,.show-strip{
  padding-left:var(--gut-l);
}
.show-strip{scroll-padding-left:var(--gut-l)}
.work-sidebar{padding-left:var(--gut-l)}
.footer-bottom{padding-left:0}
@media (max-width:980px){
  .header-wrapper{padding-left:var(--gut-l)}
  .work-sidebar{padding-left:var(--gut-l)}
  .slide{padding-left:var(--gut-l)}
}

/* nothing is allowed to touch the edge of the screen */
@media (max-width:620px){
  .carried .wrap,.prose,.split,.rows,.timeline,.sect,.cards,.grid3,.pbanner,.film{
    padding-left:var(--gut-l); padding-right:var(--gut);
  }
}


/* ============================================================
   A PHONE IS CENTRED
   No rail on a small screen: the gutters match on both sides and
   the control sits above the page rather than beside it.
   ============================================================ */
@media (max-width:860px){
  :root{--rail:0px; --gut-l:var(--gut); --maskh:58px}
  .work-sidebar{padding-left:var(--gut-l); padding-right:var(--gut)}
  .slide{padding-left:var(--gut-l); padding-right:var(--gut)}
  .header-wrapper{padding-left:var(--gut-l); padding-right:var(--gut)}
  .footer-bottom{padding-left:0; padding-right:0}
}

/* ============================================================
   THE LANDING ON A PHONE
   No sticky sheets and no transform driven by scroll events —
   iOS does not fire those while a finger is moving, which is what
   made it judder. Three plain screens, stacked, in order.
   ============================================================ */


/* ============================================================
   THE TOP BAND
   Words end cleanly at the top of the screen instead of sliding
   half-visible under the control. A solid white band, the height
   of the control's row, sits over the page and under the menu.
   ============================================================ */
/* The nav bar: a plain white band across the top of every page, the
   height of the control, so the × always has the same place to live. */
/* the bar: the first thing on the page, and it stays at the top */
.navbar{
  position:sticky; top:0; z-index:9998;
  height:var(--maskh); background:#fff;
  border-bottom:1px solid var(--rule);
}
/* when the sheet is open the bar rises above it so the × stays put */
body.menu-open .navbar{z-index:10001; background:transparent; border-color:transparent}
body.menu-open .viewswitch{opacity:0; pointer-events:none}


/* ============================================================
   THE MENU PICTURE ON A PHONE
   The figure on the right, filling the screen, no black at the
   edges, brighter exposure, still heavily blurred, nothing
   layered over it.
   ============================================================ */
@media (max-width:860px){
  /* the phone frames the figure on the right and fills the screen with
     him — brighter, still heavily blurred, and nothing laid over it */
  .sheet-b{height:116svh}
  .intro-shade--deep{opacity:.3}
  .sheet-b .intro-bg--whole{
    background-size:cover;
    background-position:80% 44%;
    filter:grayscale(1) blur(17px) brightness(1.45) contrast(.92);
    transform:scale(1.2);
  }
}



/* ============================================================
   AIR
   The menu has room to spare, so the words use it. And the
   subject blocks under the writing stop touching each other
   on a phone.
   ============================================================ */

/* the menu words, desktop
   The first word sits on the same line as the ×, indented past it by a
   fixed clearance, so the two can never meet at any window width. */
.header-wrapper{padding-top:10px; padding-bottom:26px}
.nav-rows{gap:16px; padding-left:calc(44px + 26px)}
.nav-row{gap:16px 44px}
.nav-rows a{padding:9px 2px}
.nav-studio{gap:14px}
.nav-studio a{padding:7px 2px}
.header-content{row-gap:30px; align-items:start}

/* the menu words, phone — same rule, narrower clearance */
@media (max-width:980px){
  .header-wrapper{padding-top:10px}
  .nav-rows{gap:4px; padding-left:calc(40px + 20px)}
  .nav-row{gap:4px}
  .nav-rows a,.nav-studio a{padding:15px 0}
  .nav-side{padding-left:calc(40px + 20px)}
  .nav-side .nav-studio{gap:clamp(24px,7vw,36px)}
  .header-content{row-gap:clamp(30px,8vw,48px)}
}

/* Prints always sits to the RIGHT of Jean-Michel Basquiat, never under it,
   whatever the screen. On a phone the pair shrinks to fit rather than wraps. */
.block-set{flex-wrap:nowrap}
@media (max-width:860px){
  .block-set{flex-wrap:nowrap; max-width:100%}
  .block-set .block--head{border-right-width:0; padding:0 11px;
    letter-spacing:.11em; flex:0 1 auto; min-width:0}
  .block-set .block--sub{border-left:1px solid #ececec; margin-left:0;
    padding:0 11px; letter-spacing:.11em; flex:0 0 auto}
  .block-set .block--sub::before{margin-right:6px}
}

/* the bar is very slightly see-through, so the page shows faintly
   through it as it passes underneath */
.navbar{background:rgba(255,255,255,.9); backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px)}
body.menu-open .navbar{background:transparent; backdrop-filter:none;
  -webkit-backdrop-filter:none}

/* the landing menu — the words carry the screen, so they are large
   and set well apart */
.nav-items{gap:clamp(9px,1.4vw,19px)}
.nav-item{font-size:clamp(26px,3vw,46px); line-height:1.3; padding:5px 0}
@media (max-width:860px){
  .nav-items{gap:clamp(12px,3vw,21px)}
  .nav-item{font-size:clamp(25px,7vw,36px); line-height:1.3; padding:5px 0}
}

/* the subject blocks under the writing keep their own size on a phone —
   only the white between them grows */
@media (max-width:860px){
  .work-sidebar .blocks{margin-top:clamp(32px,8vw,48px); gap:18px; max-width:100%}
  .block-set{margin-bottom:6px}
  .blocks{gap:18px}
  .blockwrap{padding-top:clamp(32px,8vw,48px)}
}


/* the landing has no bar over the photograph — the bar belongs to the
   white section and arrives with it */
.is-landing .over{position:relative}
.is-landing .navbar{position:sticky; top:0;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease-out)}
.is-landing.bar-on .navbar{opacity:1; pointer-events:auto}

/* every wrapper keeps the page's gutter, inside .carried or not */
.wrap{padding:0 var(--gut) 0 var(--gut-l); max-width:1680px; margin:0 auto}


/* ============================================================
   ONE SCALE PER RANK
   A section heading on a carried page is the same rank as the
   headings around it, so it is the same size as them.
   ============================================================ */
.carried .sect h2{font-size:clamp(23px,2.8vw,36px); line-height:1.2;
  letter-spacing:.015em}

/* an enquiry names the work it is about */
.store-work{display:flex; align-items:baseline; gap:14px; margin:0 0 18px}
.store-work .lbl{font-family:var(--mono); font-weight:300; font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.store-workname{font-family:var(--mono); font-weight:300; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}

/* a list heading is the quieter rank, wherever it sits */
.sect--list h2{font-size:clamp(23px,2.8vw,36px); line-height:1.2;
  letter-spacing:.015em}


/* ============================================================
   ONE PAGE TITLE
   Exhibitions and Published used the big banner scale while
   Photography, Art and Performance used the gallery scale.
   Every page title is now the gallery scale.
   ============================================================ */
.pbanner h1{font-size:clamp(20px,1.9vw,27px); line-height:1.2;
  letter-spacing:.02em; margin:16px 0 0}
.pbanner .lede{font-size:16px; line-height:2; margin:22px 0 0}


/* ============================================================
   LAUNCH PASS — one scale per rank, and the menu centred
   ============================================================ */

/* every H2 on the site is one size. The landing wordmark is the only
   heading deliberately set as display type. */
.sect h2,.carried h2,.section-head h2,.carried .sect h2,.sect--list h2,
.lead{
  font-size:clamp(23px,2.8vw,36px); line-height:1.2; letter-spacing:.015em;
}
/* every H3 is one size, exhibitions included */
.carried h3,.show-head h3{font-size:clamp(18px,1.8vw,22px); line-height:1.35;
  letter-spacing:.01em}

/* the open menu: air above the words, and the block sits in the
   vertical middle of the panel without the panel growing */
.header-wrapper{padding-top:22px; padding-bottom:22px}
.header-content{align-items:center}
.nav-rows{gap:12px}
.nav-row{gap:12px 44px}
.nav-rows a{padding:7px 2px}
@media (max-width:980px){
  .header-wrapper{padding-top:calc(var(--maskh) + 16px)}
  .nav-rows{gap:4px}
  .nav-rows a,.nav-studio a{padding:14px 0}
}

/* the enquiry sits beside the work, divided by a hairline — no box */
.store-work{display:flex; align-items:center; gap:0; margin:26px 0 0}
.store-work .lbl{display:none}
.store-workname{font-family:var(--mono); font-weight:300; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  padding-right:16px}
.store-buy{margin:0}
.store-enq{display:inline-flex; align-items:center;
  font-family:var(--mono); font-weight:300; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); background:none; border:0;
  border-left:1px solid var(--rule); padding:0 0 0 16px; min-height:0;
  transition:color .25s var(--ease-out)}
.store-enq:hover{color:var(--ink); background:none}

/* the landing's section heading joins the same rank as every other H2 */
.split h2.mono{font-size:clamp(23px,2.8vw,36px); line-height:1.2;
  letter-spacing:.015em}


/* ============================================================
   THE LANDING IS WHOLE SCREENS
   No bar sits above it any more, so each sheet is a full screen
   and nothing of the next one shows underneath.
   ============================================================ */
.intro{height:100svh}
@media (max-width:860px){ .sheet-b{height:100svh} }

/* the enquiry beside a page title: a button, but no box —
   only a hairline dividing it from the title */
.ttl-row{align-items:center; gap:0}
.enquire{
  min-height:0; padding:0 0 0 16px; margin-left:16px;
  background:none; color:var(--ink-soft);
  border:0; border-left:1px solid var(--rule);
  font-size:10px; letter-spacing:.22em; line-height:1.4;
}
.enquire:hover{background:none; color:var(--ink)}
@media (max-width:980px){ .enquire{min-height:0} }


/* ============================================================
   PRINTS — a section marker, not an item title
   It takes the page-title rank, so it reads a level above the
   work beneath it rather than competing with it. The eyebrow
   "Signed, from the studio" belongs to the work, which keeps
   the book rank.
   ============================================================ */
.carried .sect--mark,.sect--mark{padding-top:0; padding-bottom:0;
  margin-top:calc(var(--sec) * -0.45)}
.carried .sect--mark h2,.sect--mark h2{font-size:clamp(20px,1.9vw,27px);
  line-height:1.2; letter-spacing:.02em; margin:0}
/* and the work follows close behind it */
.sect--mark + .carried{padding-top:0}
.sect--mark + .carried .store-item{padding-top:clamp(14px,1.6vw,22px)}


/* ============================================================
   THE MENU BEAT IS PLAIN WHITE
   No photograph behind the menu — just the words on white.
   ============================================================ */
.sheet-b{background:#fff}
.sheet-b .intro-bg--whole,
.sheet-b .intro-shade,
.sheet-b .intro-shade--deep{display:none}
.sheet-b .nav-item{color:var(--ink)}
.sheet-b .nav-item:hover{opacity:.45}
@media (max-width:860px){
  .sheet-b{background:#fff}
  .sheet-b .intro-bg--whole{display:none}
}