/* ==============================================================
   MARLLEX — Swiss editorial system
   White page. Near-black type. Hairlines only, no boxes, no fills.

   MEDIA RULE (home + work):
   every tile has ONE fixed height; the width follows the file's own
   ratio (--ar = width / height). Nothing is cropped, nothing is
   stretched. Drop in any image, gif or video at any size and the
   row stays level — the width just changes.
   ============================================================== */
@font-face{font-family:'Tomato Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/TomatoGrotesk-Light.latin.woff') format('woff')}
@font-face{font-family:'Tomato Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/TomatoGrotesk-Regular.latin.woff') format('woff')}
@font-face{font-family:'Tomato Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/TomatoGrotesk-Medium.latin.woff') format('woff')}
@font-face{font-family:'Tomato Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/TomatoGrotesk-Semibold.latin.woff') format('woff')}

:root{
  --paper:#FFFFFF; --ink:#111111; --grey:#9A9A9A; --far:#C6C6C6;
  --hair:rgba(17,17,17,.13); --slot:#F4F4F4;
  --pad:clamp(20px,3vw,48px); --gap:clamp(20px,2.6vw,44px);
  --wall-h:clamp(140px,calc((100svh - 96px) / 3),460px);    /* home wall: the three rows divide the screen between them */
  --work-h:clamp(380px,72vh,880px);     /* fixed tile height, work page */
  --tile-gap:clamp(5px,0.5vw,9px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Tomato Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--paper);
  color:var(--ink);font-size:14px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
::selection{background:#E9E9E9}
input,select,textarea,button{font:inherit;color:inherit;letter-spacing:inherit}
[hidden]{display:none!important}
.wrap{padding-inline:var(--pad)}
.grey{color:var(--grey)}
.cap{font-size:11.5px;line-height:1.45;color:var(--grey);letter-spacing:0}
.sep{color:var(--grey);padding-inline:.35em}
.page{display:none}
.page.on{display:block}

/* ---------- the media box: fixed height, natural width -------- */
.m{position:relative;display:block;height:100%;width:100%;background:var(--slot);overflow:hidden}
.m img,.m video{width:100%;height:100%;object-fit:contain;object-position:center}
.m[data-fit="cover"] img,.m[data-fit="cover"] video{object-fit:cover}

/* ---------- nav ---------------------------------------------- */
.nav{position:sticky;top:0;z-index:40;background:var(--paper)}
/* Laid out by what each item actually needs, spread apart, so the last one
   finishes on the right margin exactly as the first starts on the left. In
   equal columns the short last item sat at the head of a wide column and left
   a gap the width of a column against the right edge. */
.nav-inner{display:flex;justify-content:space-between;align-items:flex-start;
  column-gap:var(--gap);padding-block:22px 26px}
.nav-inner a{flex:0 1 auto;max-width:34ch}
.nav-inner a:last-child{text-align:right}
.nav a{display:block}
.nav .lbl,.nav .mark{display:block;font-size:14px;line-height:1.45}
.nav .sub{display:block;font-size:14px;line-height:1.45;color:var(--grey);transition:color .25s ease}
/* the page you are on no longer darkens its own sub-line: it made the
   first item read as a different kind of thing from the rest of the bar */
.nav a:hover .sub{color:var(--ink)}
.nav-mobile{display:none;align-items:baseline;justify-content:space-between;padding-block:16px 18px}
.nav-mobile button{background:none;border:0;cursor:pointer;font-size:14px}
.sheet{position:fixed;inset:0;z-index:60;background:var(--paper);display:none;flex-direction:column;padding-inline:var(--pad);overflow-y:auto}
body.nav-open .sheet{display:flex}
.sheet-top{display:flex;align-items:baseline;justify-content:space-between;padding-block:16px 18px;border-bottom:1px solid var(--hair)}
.sheet-top button{background:none;border:0;cursor:pointer;font-size:14px}
.sheet ul{list-style:none}
.sheet li{border-bottom:1px solid var(--hair)}
.sheet li a{display:block;padding-block:20px}
.sheet .lbl{display:block;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.sheet .sub{display:block;font-size:14px;color:var(--grey)}
@media (max-width:900px){.nav-inner{display:none}.nav-mobile{display:flex}}

/* ---------- shared blocks ------------------------------------ */
.head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-block:18px 20px;border-top:1px solid var(--hair)}
.head h1,.head h2{font-size:clamp(17px,1.85vw,26px);font-weight:500;line-height:1.1;letter-spacing:-.025em}
.head .arw{flex:none;width:clamp(22px,2.2vw,32px);height:auto;align-self:center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
a.head:hover .arw{transform:translateX(8px)}
.head .side{font-size:11.5px;color:var(--grey);letter-spacing:0}
.block{padding-block:clamp(24px,4vh,44px) clamp(52px,8vh,100px);border-top:1px solid var(--hair)}
.block.flush{border-top:0}
.row{padding-block:16px;border-top:1px solid var(--hair)}
.duo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--gap)}
.duo .say{font-size:clamp(18px,2vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.025em;max-width:17ch}
.duo .note{font-size:15px;line-height:1.55;max-width:54ch}
.duo h3{font-size:15px;font-weight:400}
.duo p.small{font-size:14px;line-height:1.55;max-width:54ch}
@media (max-width:900px){.duo{grid-template-columns:1fr;row-gap:10px}}

/* ---------- hero ---------------------------------------------
   Built on one ratio. The portrait's own proportion is 1.62 — the
   golden section — so every other measure is derived from it: the
   figure stands 1/φ of the screen tall, the mark behind it is the
   figure scaled by 1/φ⁴, the words begin on the golden line, and the
   lane they leave open is the width of the body itself.
   Three absolutely placed layers, so nothing can drift.
   ------------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;border-top:1px solid var(--hair);
  --fig-h:74svh;                       /* grown from the feet up          */
  --fig-w:calc(var(--fig-h) * 1.623);  /* the file's own golden ratio    */
  --fig-top:3svh;                      /* so the crown lands on the line  */
  --mark-w:94.6svh;                    /* its own size now: the figure may grow without it */
  --mark-y:26%;
  --say-y:54%;                       /* just above the golden line     */
  --lane:calc(var(--fig-w) * .58);     /* the body's width, kept clear  */
}
/* scoped to the hero: the nav carries a .mark of its own — the wordmark — and
   an unscoped rule here drags it into the middle of the bar */
.hero .mark{position:absolute;z-index:1;left:50%;top:var(--mark-y);transform:translate(-50%,-50%);
  width:var(--mark-w);pointer-events:none}
.hero .mark .logo{display:block;width:100%;height:auto;color:var(--ink)}
/* the torn layer sits exactly over the mark, so the two register */
.hero .mark .paint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* the <picture> is only a wrapper; the image inside it is the mark */
.hero .mark picture{display:block}
.hero.painting{cursor:none}
.hero .brush{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
/* The figure is sized by height alone, so its own proportion decides the
   width — swap the portrait in the dashboard and nothing else shifts. */
.plate{position:absolute;z-index:2;top:var(--fig-top);left:50%;transform:translateX(-50%);
  height:var(--fig-h);width:auto;max-width:none}

.says{position:absolute;z-index:3;top:var(--say-y);left:var(--pad);right:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) var(--lane) minmax(0,1fr);
  column-gap:clamp(26px,3.4vw,64px);align-items:start;pointer-events:none}
.says .l{justify-self:end;text-align:left;max-width:none}
.says .r{justify-self:start;text-align:left;max-width:32ch}
.hero h1{font-size:clamp(17px,1.85vw,27px);font-weight:500;line-height:1.26;letter-spacing:-.022em}
.hero .lede{font-size:clamp(12.5px,.98vw,15px);line-height:1.62}
.hero .cv{display:inline-block;margin-top:1.15em;color:var(--ink);font-weight:600;font-size:13px;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  white-space:nowrap;pointer-events:auto}
.hero .cv:hover{text-decoration-thickness:2px}

.hero-meta{position:absolute;z-index:4;top:clamp(16px,2.2vh,24px);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:24px}
.hero-meta p{font-size:11.5px;line-height:1.6;letter-spacing:0}
.hero-meta p:last-child{text-align:right}
.hero .cue{position:absolute;z-index:4;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);font-size:11px}

.rt{color:var(--far);transition:color .12s linear;will-change:color}
.hero-meta p,.hero .cue{color:var(--far)}
@media (hover:none),(prefers-reduced-motion:reduce){
  .rt{color:var(--ink)!important;transition:none}
  .hero-meta p,.hero .cue{color:var(--grey)}
  /* no pointer to tear with: the markup has already handed it the painting */
  .hero .mark .paint,.hero .brush{display:none}
}
/* a shorter screen keeps the same ratios, just less of them */
@media (max-height:760px) and (min-width:901px){
  .hero{--fig-h:69svh;--fig-top:3svh;--mark-w:88.5svh;--mark-y:24%;--say-y:56%}
}
/* hero on a phone: the picture owns the first screen, the words wait below it.
   Figure and mark share one grid cell, so nothing here is told the picture's
   proportion — the dashboard can be given any portrait, cut out or not, and it
   can neither land on the words nor overflow its screen. */
@media (max-width:900px){
  /* Row one is exactly one screen less the bar above it, so the copy begins
     below the fold instead of crowding the phone the moment it opens.
     Row two is then free to be as tall as that copy needs. */
  .hero{height:auto;min-height:0;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1fr);
    /* the picture takes what is left after the copy has been given its room,
       so both headline and lede land on the first screen at any phone height */
    grid-template-rows:min(56svh, calc(100svh - var(--navh) - 268px)) auto;
    --navh:55px;                        /* the mobile bar: 16 + 20.3 + 18 + hairline */
    --fig-w:172vw;                       /* the man himself ≈ 88vw, uncropped */
    --mark-w:96vw;                       /* the whole word, edge to edge      */
    padding-top:0;padding-bottom:clamp(26px,5vh,44px)}
  .hero::before{display:none}                        /* the grid reserves the room now */
  /* Both carry the same nudge, so they stay registered on each other. Nothing
     is cropped here: the figure keeps his shoulders and the word keeps its ends,
     and the air left around them is the composition, not a gap to be filled. */
  .hero .mark,.hero .plate{grid-area:1/1;position:relative;top:auto;left:auto;
    transform:translateY(-2svh);justify-self:center;align-self:center}
  /* the word rides a little higher than the figure, so it reads across the
     brow instead of sitting behind the beard */
  .hero .mark{width:var(--mark-w);z-index:1;transform:translateY(-6svh)}
  /* never taller than its screen, whatever picture the dashboard is given */
  .hero .plate{width:var(--fig-w);height:auto;max-height:100%;object-fit:contain;
    max-width:none;z-index:2}
  /* the copy now reaches into the first screen and says "there is more" by
     itself, so the hint would only sit under it */
  .hero .cue{display:none}
  /* pulled up into the air under the shoulders, so the copy starts while
     that space is still in view instead of waiting below it */
  .says{grid-area:2/1;position:static;display:block;margin-top:14px;padding-inline:var(--pad)}
  .says .l,.says .r{max-width:none;justify-self:start;text-align:left}
  .says .r{margin-top:16px}
  .says > div:nth-child(2){display:none}
  .hero h1{font-size:clamp(21px,5.6vw,30px);line-height:1.22}
  .hero .lede{font-size:14px}
  .hero-meta{top:10px}
  .hero-meta p{font-size:10.5px}
}

/* ---------- the wall: rows that run on their own -------------- */
.wall{border-top:1px solid var(--hair);padding-block:6px clamp(8px,1.2vh,14px)}
.wall-row{overflow:hidden;padding-block:9px 1px;      /* only the room the lift needs — the rows sit almost touching */
  cursor:grab;touch-action:pan-y}                    /* the row can be pulled; the page still scrolls */
.wall.by-hand,.wall.by-hand .wall-row,.wall.by-hand .tile{cursor:grabbing}
.wall.by-hand .tile{transform:none!important}        /* nothing lifts while the row is being pulled */
.track{display:flex;gap:var(--tile-gap);width:max-content;will-change:transform}
.wall .tile img,.wall .tile video{-webkit-user-drag:none;user-select:none}
.tile{flex:none;display:block;position:relative;background:var(--paper);
  width:calc(var(--wall-h) * var(--ar));
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tile .m{height:var(--wall-h)}                       /* the one fixed height */
/* The caption lies on the piece rather than under it: a line of type between
   the rows was the only white left there, and it cost every row its height.
   One line, always — a caption that wrapped made its row taller than the other
   two and pushed the whole band off the screen. */
.tile .label{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;gap:12px;
  padding:14px 10px 7px;font-size:10.5px;line-height:1.35;letter-spacing:0;white-space:nowrap;
  color:#FFF;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(to top,rgba(17,17,17,.72),rgba(17,17,17,0))}
.tile .label > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tile .label em{font-style:normal;color:rgba(255,255,255,.72)}
.tile:hover .label,.tile:focus-visible .label{opacity:1}
@media (hover:hover) and (pointer:fine){
  /* lifts out of the wall instead of growing sideways, so it never runs into
     the piece beside it and no two captions can ever touch */
  .tile:hover{transform:translateY(-8px) scale(1.015);z-index:5}
}
.wall-hint{display:flex;justify-content:space-between;gap:20px;padding-block:0 clamp(14px,2vh,26px);font-size:11.5px;color:var(--grey)}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  /* two columns, nothing moves */
  /* A grid, not CSS columns: a column box whose children change height as
     their pictures arrive can spill its content over whatever follows it in
     Safari, which is what put a grey tile on top of the copy below. */
  .wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tile-gap);
    padding-inline:var(--pad);align-items:start}
  .wall-row{overflow:visible;padding:0;cursor:auto;touch-action:auto}
  .track{display:block;width:auto;transform:none!important}
  .tile{width:100%;margin-bottom:0;transform:none!important}
  .tile .label{position:static;opacity:1;padding:4px 0 0;color:var(--ink);background:none}
  .tile .label em{color:var(--grey)}
  .tile .m{height:auto;aspect-ratio:var(--ar)}
}

/* ---------- home story: air first ----------------------------- */
.story{padding-block:clamp(56px,11vh,150px) clamp(60px,12vh,170px)}
.story-open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,6vw,110px);row-gap:32px;align-items:start}
.story-open .say{font-size:clamp(24px,3.2vw,50px);font-weight:500;line-height:1.08;letter-spacing:-.03em}
.story-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:22px}
.story-cols p{font-size:14px;line-height:1.6;color:var(--grey)}
.story-cols p b{font-weight:400;color:var(--ink)}
.story-facts{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gap);row-gap:clamp(34px,5vh,56px);
  margin-top:clamp(46px,8vh,110px)}
.story-facts span{display:block;font-size:clamp(26px,3.2vw,48px);font-weight:500;line-height:1;letter-spacing:-.035em}
.story-facts em{display:block;font-style:normal;font-size:11.5px;color:var(--grey);letter-spacing:0;margin-top:12px}
.story-block{margin-top:clamp(56px,11vh,150px)}
.story-block > h3{font-size:11.5px;color:var(--grey);letter-spacing:0;padding-bottom:20px;border-bottom:1px solid var(--hair)}
.cols5{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gap);row-gap:40px;margin-top:36px}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);row-gap:40px;margin-top:36px}
.cols5 .n,.cols4 .n{display:block;font-size:11.5px;color:var(--grey);letter-spacing:0;margin-bottom:14px}
.cols5 b,.cols4 b{display:block;font-size:clamp(15px,1.35vw,19px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.cols5 p,.cols4 p{font-size:13px;line-height:1.55;color:var(--grey);margin-top:10px;max-width:26ch}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:13px}
.more svg{width:20px;height:auto;transition:transform .35s ease}
.more:hover svg{transform:translateX(6px)}
.lead-line{font-size:clamp(16px,1.7vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.25;max-width:44ch;margin-top:30px}
.brands{margin-top:clamp(30px,4.5vh,52px)}
.brands > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gap);
  padding-block:clamp(20px,3vh,30px);border-top:1px solid var(--hair)}
.brands h4{font-size:11.5px;font-weight:400;color:var(--grey);letter-spacing:0;padding-top:.5em}
.brands p{font-size:clamp(16px,1.5vw,23px);line-height:1.55;letter-spacing:-.02em}
.brands p .d{color:var(--far);padding-inline:.28em}
/* The logo wall, on paper like everything else. The marks were supplied drawn
   for a black ground, so each one was re-inked for white: light ink flipped to
   the same weight of dark, brand colour left alone. Each tile is the same
   canvas with its logo centred at true size, so equal cells reproduce the
   original sheet's relative scale — a small mark stays small beside a wide one.
   Tiles bring their own padding, which is why the grid runs without a gap. */
.logo-wall{margin-top:clamp(30px,4.5vh,52px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(88px,8.4vw,150px),1fr));
  padding:clamp(10px,1.4vw,22px) 0}
.logo-wall img{display:block;width:100%;height:auto}
@media (max-width:640px){.logo-wall{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));padding:8px 0}}
.markets{margin-top:clamp(34px,5vh,60px);display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gap);row-gap:clamp(30px,4.5vh,48px)}
.markets b{display:block;font-size:clamp(15px,1.25vw,18px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.markets span{display:block;font-size:11.5px;color:var(--grey);letter-spacing:0;margin-top:5px}
.markets p{font-size:13px;line-height:1.55;color:var(--grey);margin-top:12px;max-width:24ch}
@media (max-width:900px){.brands > div{grid-template-columns:1fr;row-gap:10px}.markets{grid-template-columns:1fr 1fr}}
.big-names{font-size:clamp(16px,1.7vw,24px);line-height:1.4;letter-spacing:-.02em;max-width:36ch;margin-top:32px}
.names{font-size:15px;line-height:1.9;max-width:80ch;margin-top:32px}
@media (max-width:900px){
  .story-open,.story-cols{grid-template-columns:1fr}
  .story-facts{grid-template-columns:1fr 1fr}
  .cols5,.cols4{grid-template-columns:1fr 1fr}
}

/* ---------- work --------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;column-gap:var(--gap);row-gap:8px;padding-block:18px 20px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.filters button{background:none;border:0;padding:0;cursor:pointer;font-size:14px;color:var(--grey);transition:color .25s ease}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.project{padding-block:clamp(28px,4.5vh,56px) clamp(40px,6vh,80px);border-top:1px solid var(--hair)}
.project:first-of-type{border-top:0}
.project-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gap);margin-bottom:clamp(20px,3vh,32px)}
.project h2{font-size:clamp(20px,2.2vw,30px);font-weight:500;line-height:1.12;letter-spacing:-.025em}
.project .meta{font-size:11.5px;color:var(--grey);margin-top:6px}
/* the paragraph runs the full width of its column — no dead space on the right */
/* light and a touch smaller, running the full width of its column */
.project .desc{font-size:12px;font-weight:300;line-height:1.55;max-width:none;align-self:end}
/* Four across, always. Every cell is the same shape and the file fills it, so a
   row reads as one block whatever ratios the files came in at — and the page can
   never scroll sideways. */
.project-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tile-gap)}
/* One shape for every cell, set in the dashboard, so the row stays level. The
   file is shown whole inside it — export at that shape and the cell is exactly
   what the gallery opens, only smaller. */
.project-media .wm{width:100%;height:auto;aspect-ratio:var(--work-ar,16/9);flex:none}
.project-media .shot{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
/* black behind the file, not white: a piece that is not the row's shape is
   framed by it rather than dissolving into the page */
.project-media .wm .m{height:100%;background:var(--ink)}
.project-media .m img,.project-media .m video{object-fit:contain;transition:filter .35s ease}
/* the page is white, so fading a piece out only made it paler — it darkens instead */
@media (hover:hover) and (pointer:fine){.project-media .shot:hover .m img,.project-media .shot:hover .m video{filter:brightness(.72)}}
/* a document keeps the shape of the row: first page in the cell, the file one click away */
.shot.doc{cursor:pointer}
.m object{width:100%;height:100%;display:block;background:var(--paper);pointer-events:none}
.doc-tag{position:absolute;left:0;bottom:0;font-style:normal;font-size:10px;letter-spacing:.04em;
  line-height:1;padding:6px 7px;background:var(--ink);color:var(--paper)}

/* the rest of the set: 0fr → 1fr opens on its own height, no measuring in JS */
.project-rest{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.project-rest > div{overflow:hidden;min-height:0}
.project-rest .project-media{padding-top:var(--tile-gap)}
.project.open .project-rest{grid-template-rows:1fr}
/* sits at the right edge of the grid it belongs to */
.more-shots{display:flex;width:fit-content;margin-left:auto;align-items:center;gap:8px;
  margin-top:clamp(14px,2vh,20px);background:none;border:0;padding:0;
  cursor:pointer;font-size:11.5px;letter-spacing:0;color:var(--grey);transition:color .25s ease}
.more-shots:hover{color:var(--ink)}
.more-shots span{border-bottom:1px solid currentColor;padding-bottom:2px}
.more-shots em{font-style:normal}
.project.open .more-shots .on{display:none}
.more-shots .off{display:none}
.project.open .more-shots .off{display:inline}
@media (prefers-reduced-motion:reduce){.project-rest{transition:none}}
@media (max-width:900px){
  .project-head{grid-template-columns:1fr;row-gap:12px}
  .project-media{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the gallery: the page, quietly taken over --------- */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column;
  opacity:0;transition:opacity .35s ease}
.lb.on{opacity:1}
.lb-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-block:16px 18px;border-bottom:1px solid var(--hair)}
.lb-title{font-size:14px}
.lb-meta{display:flex;align-items:baseline;gap:clamp(16px,2vw,28px)}
.lb-count{font-size:11.5px;color:var(--grey);letter-spacing:0;font-variant-numeric:tabular-nums}
.lb-close{background:none;border:0;padding:0;cursor:pointer;font-size:14px;transition:opacity .25s ease}
.lb-close:hover{opacity:.55}
/* the picture gets everything that is left, and is never cropped in here */
.lb-stage{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(10px,2vw,30px);padding:clamp(16px,3vh,34px) var(--pad)}
.lb-frame{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;
  touch-action:pan-y}
.lb-frame img,.lb-frame video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:0;transition:opacity .35s ease}
.lb-frame.ready img,.lb-frame.ready video{opacity:1}
.lb-nav{background:none;border:0;padding:0;cursor:pointer;color:var(--far);transition:color .25s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.lb-nav:hover{color:var(--ink)}
.lb-next:hover{transform:translateX(6px)}
.lb-prev:hover{transform:translateX(-6px)}
.lb-nav svg{width:clamp(24px,2.4vw,34px);height:auto;display:block}
.lb-prev svg{transform:scaleX(-1)}
.lb-nav[disabled]{opacity:.3;cursor:default;transform:none}
.lb-rail{display:flex;justify-content:center;gap:6px;padding-block:0 clamp(18px,3vh,30px)}
.lb-rail i{display:block;width:20px;height:1px;background:var(--hair);transition:background .3s ease}
.lb-rail i.on{background:var(--ink)}
@media (max-width:900px){
  .lb-stage{grid-template-columns:minmax(0,1fr);padding-inline:12px}
  .lb-nav{display:none}
}
@media (prefers-reduced-motion:reduce){.lb,.lb-frame img,.lb-frame video,.lb-nav{transition:none}}

/* ---------- method flow -------------------------------------- */
.flow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--gap);border-top:1px solid var(--hair)}
.flow-rail{position:sticky;top:120px;align-self:start;padding-block:clamp(28px,5vh,60px)}
.flow-num{display:block;font-size:clamp(34px,5vw,76px);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--flow-num,var(--far));transition:color .4s ease}
.flow-title{font-size:clamp(18px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin-top:12px;max-width:14ch}
.flow-progress{display:flex;gap:6px;margin-top:22px}
.flow-progress i{display:block;width:20px;height:1px;background:var(--hair);transition:background .3s ease}
.flow-progress i.on{background:var(--ink)}
.flow-steps{padding-bottom:clamp(30px,6vh,80px)}
.flow-step{min-height:56vh;display:flex;align-items:center;border-top:1px solid var(--hair);padding-block:28px}
.flow-step:first-child{border-top:0}
.flow-step p{font-size:clamp(15px,1.35vw,19px);line-height:1.5;max-width:48ch;color:var(--grey);transition:color .5s ease}
.flow-step.live p{color:var(--ink)}
@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .flow-rail{position:static;padding-block:24px 0}
  .flow-step{min-height:0;border-top:1px solid var(--hair)}
  .flow-step p{color:var(--ink)}
}

/* ---------- evidence ----------------------------------------- */
.evidence{display:grid;grid-template-columns:repeat(12,1fr);padding-block:clamp(24px,4vh,44px) clamp(52px,8vh,100px);border-top:1px solid var(--hair)}
.ev{position:relative}
.ev span{display:block;background:var(--slot);width:100%;height:100%}
.ev figcaption{position:absolute;left:0;bottom:-18px;font-size:11px;color:var(--grey);white-space:nowrap}
.ev.a{grid-column:1/6;grid-row:1/4;aspect-ratio:4/3}
.ev.b{grid-column:5/9;grid-row:2/5;aspect-ratio:3/4;z-index:2}
.ev.c{grid-column:8/13;grid-row:1/3;aspect-ratio:16/10}
.ev.d{grid-column:2/6;grid-row:4/7;aspect-ratio:1/1;z-index:2}
.ev.e{grid-column:6/11;grid-row:5/8;aspect-ratio:4/3}
.ev.f{grid-column:9/13;grid-row:3/6;aspect-ratio:3/4;z-index:3}
.ev.g{grid-column:1/5;grid-row:7/9;aspect-ratio:16/10;z-index:2}
.ev.h{grid-column:5/10;grid-row:8/10;aspect-ratio:16/9}
.evidence .ev:hover{z-index:9}
@media (max-width:900px){
  .evidence{grid-template-columns:1fr 1fr;gap:12px}
  .ev{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important}
  .ev figcaption{position:static;margin-top:6px}
}

/* ---------- career ------------------------------------------- */
.years{display:flex;justify-content:space-between;gap:8px;padding-block:16px;border-top:1px solid var(--hair);overflow-x:auto}
.years span{font-size:12px;color:var(--far);transition:color .35s ease;white-space:nowrap}
.years span.lit{color:var(--ink)}
.chap-tabs{display:flex;flex-wrap:wrap;column-gap:var(--gap);row-gap:10px;padding-block:18px 20px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.chap-tabs button{background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--grey);transition:color .25s ease;
  font-size:clamp(16px,1.7vw,24px);letter-spacing:-.025em;line-height:1.2}
.chap-tabs button em{display:block;font-style:normal;font-size:11.5px;color:var(--far);letter-spacing:0;margin-top:4px;transition:color .25s ease}
.chap-tabs button:hover{color:var(--ink)}
.chap-tabs button[aria-pressed="true"]{color:var(--ink)}
.chap-tabs button[aria-pressed="true"] em{color:var(--grey)}
.chap-panel{padding-block:clamp(28px,5vh,60px) clamp(40px,7vh,90px)}
.chap-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--gap)}
.chap-side .claim{font-size:clamp(18px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.15;max-width:15ch}
.beats{margin-top:26px}
.beat{display:flex;gap:14px;padding-block:9px;border-top:1px solid var(--hair);font-size:13px}
.beat span{color:var(--grey);min-width:4.5em}
.chap-body p{font-size:15px;line-height:1.6;max-width:60ch}
.chap-body p+p{margin-top:1.1em}
@media (max-width:900px){.chap-grid{grid-template-columns:1fr;row-gap:20px}}
.cv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--gap);padding-block:15px;border-top:1px solid var(--hair)}
.cv span:first-child{color:var(--grey)}
@media (max-width:900px){.cv{grid-template-columns:1fr;row-gap:2px}}

/* ---------- contact ------------------------------------------ */
.kind{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:8px;margin-bottom:clamp(28px,4.5vh,48px)}
.kind button{background:none;border:0;cursor:pointer;font-size:clamp(16px,1.7vw,24px);letter-spacing:-.02em;line-height:1.3;color:var(--grey);padding:0;transition:color .3s ease}
.kind button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.kind button:hover{color:var(--ink)}
.kind .sep{font-size:clamp(16px,1.7vw,24px)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:26px;max-width:920px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;color:var(--grey);letter-spacing:0}
.field input,.field select,.field textarea{background:none;border:0;border-bottom:1px solid var(--hair);padding:6px 0 8px;font-size:15px;border-radius:0;transition:border-color .3s ease}
.field input:hover,.field select:hover,.field textarea:hover,.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0}
.field textarea{resize:vertical;min-height:76px}
.field select{appearance:none;-webkit-appearance:none}
.send{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(26px,4vh,40px);background:none;border:0;cursor:pointer;font-size:clamp(16px,1.7vw,24px);letter-spacing:-.02em}
.send svg{width:30px;height:auto;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.send:hover svg{transform:translateX(10px)}
.send[disabled]{color:var(--grey);cursor:default}
.sent{margin-top:clamp(26px,4vh,40px);font-size:15px}
.direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:28px}
.direct h3{font-size:11.5px;color:var(--grey);letter-spacing:0;margin-bottom:10px}
.direct a,.direct p{font-size:15px;line-height:1.6;display:block}
.direct a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.form-grid,.direct{grid-template-columns:1fr}}

/* ---------- footer ------------------------------------------- */
.get{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(26px,4vh,44px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* on the contact page itself the invitation is already answered — but the
   hairline it drew above the footer has to stay, so the footer draws its own */
body[data-route="contact"] .get{display:none}
body[data-route="contact"] .foot{border-top:1px solid var(--hair)}
.get h2{font-size:clamp(32px,6vw,90px);font-weight:400;line-height:1.02;letter-spacing:-.03em}
.get .arw{flex:none;width:clamp(36px,4.6vw,68px);height:auto;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.get:hover .arw{transform:translateX(clamp(8px,1.2vw,20px))}
.foot{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);padding-block:clamp(30px,5vh,56px) clamp(38px,6vh,68px)}
.foot p,.foot a{font-size:14px;line-height:1.5}
.foot-mark{display:block;width:clamp(104px,8.5vw,140px);height:auto}
/* the mark is the way home from anywhere on the page */
.foot-mark-link{display:block;width:fit-content;margin-bottom:16px;transition:opacity .25s ease}
.foot-mark-link:hover{opacity:.6}
/* The last column becomes a column flexbox purely so the mark can be pushed
   into the white space at the page's right edge, at every width. */
.foot .col-c{display:flex;flex-direction:column;align-items:flex-start}
.foot-mark-link.is-right{align-self:flex-end;margin:26px 0 0}
.foot .col-a,.foot .col-c{color:var(--grey)}
.foot .col-a strong{font-weight:400}
.foot ul{list-style:none}
.foot .col-c a{color:var(--ink)}
@media (max-width:900px){.foot{grid-template-columns:1fr;row-gap:26px}}

/* ---------- CV download states ------------------------------- */
a[data-cv]{transition:opacity .25s ease}
a[data-cv][aria-busy="true"]{opacity:.5;cursor:progress}
a[data-cv].is-error{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}