/* Country house. Sampled from his own footage: linen and walnut from the drawing
   room, honey, clay and sage from the gardens. Oxblood is the one accent and it has
   one job, the enquiries block, so it reads as his colour rather than decoration */
:root{
  --bg:#f0e8dd;
  --ink:#211a14;
  --soft:#6b5d4e;
  --line:rgba(33,26,20,.15);
  --accent:#7a2e22;
  --inv-bg:var(--accent);
  --inv-ink:#f4ebdf;
  --inv-soft:#dcbfae;
  --b1:#e5c9a2;
  --b2:#d7a584;
  --b3:#c9c4a3;
  --aura:.7;
  --grain:.06;
  color-scheme:light;
}
:root{
  --gutter:clamp(20px,3.4vw,64px);
  --col-gap:clamp(16px,1.6vw,28px);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* motion: critically damped springs, sampled into CSS. No overshoot anywhere,
     nothing on this page is thrown, so nothing bounces. --spring is response .4,
     --spring-quick is response .28 for small controls */
  --spring:linear(0,0.0481,0.1543,0.2802,0.4052,0.5188,0.617,0.699,0.7659,0.8195,0.8618,0.8948,0.9204,0.94,0.9549,0.9663,0.9749,0.9813,0.9861,0.9897,0.9924,0.9944,0.9959,0.997,0.9978,0.9984,0.9988,0.9991,1);
  --spring-quick:linear(0,0.0883,0.2596,0.4358,0.5871,0.7062,0.7951,0.8594,0.9046,0.936,0.9574,0.9718,0.9815,0.9879,0.9921,0.9949,0.9967,0.9979,0.9986,0.9991,1);
  --dur:620ms;
  --dur-quick:440ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;background:var(--bg);-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  transition:background-color 500ms ease,color 500ms ease}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
img,video{display:block;max-width:100%}
a{color:inherit}
p{text-wrap:pretty}
section[id],header[id]{scroll-margin-top:72px}

/* one wide frame, a twelve column grid inside it */
.wrap{padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap)}

/* type: one family, two widths. Extended for the name, normal for everything else */
.wide{font-stretch:125%;font-variation-settings:"wdth" 125}
.small{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
h2{font-size:clamp(30px,3.3vw,58px);font-weight:400;letter-spacing:-.025em;line-height:1.08;max-width:22ch;text-wrap:balance}
h2 span{color:var(--soft)}
h3{font-size:clamp(18px,1.3vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.body{color:var(--soft);font-size:clamp(15px,1.05vw,17px);max-width:46ch}

/* the faded ground: three washes of colour on very slow loops, under a fine grain */
.aura{position:fixed;inset:-25vmax;z-index:0;pointer-events:none;opacity:var(--aura);transition:opacity 500ms ease}
.aura i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
.aura i:nth-child(1){top:0;left:0;background:radial-gradient(closest-side,var(--b1),transparent);
  animation:drift1 70s ease-in-out infinite alternate}
.aura i:nth-child(2){top:20vmax;right:0;background:radial-gradient(closest-side,var(--b2),transparent);
  animation:drift2 84s ease-in-out infinite alternate}
.aura i:nth-child(3){bottom:0;left:20vmax;background:radial-gradient(closest-side,var(--b3),transparent);
  animation:drift3 96s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(30vmax,24vmax)}}
@keyframes drift2{to{transform:translate(-32vmax,20vmax)}}
@keyframes drift3{to{transform:translate(18vmax,-30vmax)}}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*:not(.aura):not(.grain):not(nav):not(.lightbox){position:relative;z-index:1}

.flag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center;padding:10px 0}

/* nav: links left, name centred, enquiries right, the way a house sets it */
/* the bar is a thin material over the page; its rule only appears once content
   actually runs underneath it, a scroll edge rather than a permanent divider */
nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color 300ms ease}
nav.scrolled{border-bottom-color:var(--line)}
.navbar{height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter)}
.navlinks{display:flex;gap:clamp(20px,2.2vw,40px)}
.navlinks a,.navend a{position:relative;text-decoration:none;color:var(--soft);transition:color 200ms ease}
/* hover rule: draws in from the left, leaves to the right, the way the eye reads */
.navlinks a::after,.navend a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-quick) var(--spring-quick)}
.navlinks a:active,.navend a:active,.mark:active{opacity:.55;transition:opacity 0s}
.mark{font-size:14px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;padding-left:.26em}
.navend{display:flex;justify-content:flex-end}
.burger{display:none;width:44px;height:44px;margin-right:-12px;background:none;border:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1px;background:var(--ink);
  transition:transform var(--dur-quick) var(--spring-quick)}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
nav.open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
nav.open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* links and the one button. Square, quiet, no pills */
/* every control answers on press, not on release: it dips the instant a finger or
   button goes down, then springs back */
.link{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding-bottom:6px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left}
.link .arrow{transition:transform var(--dur-quick) var(--spring-quick)}
.link:active{opacity:.55;transition:opacity 0s}
@keyframes wipe{
  0%{transform:scaleX(1);transform-origin:right}
  45%{transform:scaleX(0);transform-origin:right}
  46%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}}
/* the fill rises from the bottom edge, like a shutter */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;
  border:1px solid var(--ink);text-decoration:none;box-shadow:inset 0 0 0 0 var(--ink);
  transition:box-shadow var(--dur-quick) var(--spring-quick),color 240ms ease,transform var(--dur-quick) var(--spring-quick)}
.btn:active{transform:scale(.97);transition-duration:var(--dur-quick),240ms,90ms}
.heroactions .btn{height:54px;padding:0 30px;font-size:12px;font-weight:600;gap:10px}
/* a square the height of its neighbours, for a single icon */
.heroactions .btn.btn-icon{width:54px;padding:0;flex:none}
/* the call to act: his oxblood, the only filled colour above the fold, so a reader
   finds it without looking. Hover deepens it to walnut from the bottom up */
.btn.btn-solid{background:var(--accent);border-color:var(--accent);color:var(--inv-ink)}
.btn.btn-sm{height:38px;padding:0 18px;font-size:11px;font-weight:600;white-space:nowrap}
.navend .btn::after{display:none}

/* 1. hero. Three pieces locked together rather than placed apart: the photo
   rises behind the foot of the name, over open sky, with its left edge on the C
   of Colbeanu; the copy sits on the G with its last line on the photo's bottom
   edge. --cx is the C's offset, measured from the set name by script */
header{padding-top:clamp(36px,5vw,88px)}
.name{position:relative;z-index:2;font-size:9.6vw;font-weight:500;letter-spacing:-.035em;line-height:.9;white-space:nowrap}
/* +.55vw moves the edge from the C's letter box onto its visible curve */
.herogrid{display:grid;grid-template-columns:calc(var(--cx,50%) + .55vw) 1fr;column-gap:0;align-items:end;margin-top:-4.1vw}
.herotext{padding:0 var(--col-gap) 2px 0}
.herotext .small{color:var(--soft)}
.herotext .state{margin-top:20px;font-size:clamp(22px,2vw,31px);letter-spacing:-.018em;line-height:1.18;max-width:25ch;text-wrap:balance}
.herotext .body{margin-top:12px;max-width:36ch}
.heroactions{margin-top:34px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* capped so the buttons and the client names both land on the first screen:
   the name's height scales with width */
.heromedia{position:relative;z-index:1;width:min(100%,calc(100svh - 190px - 9.6vw));min-width:320px}
.heromedia figure{aspect-ratio:1}
.hm{position:relative;height:100%;overflow:hidden;background:var(--line)}

/* the opening: held until the typeface has arrived, so the name never reflows in
   front of anyone. Then the name settles, the copy follows, and the frame opens
   upward like a shutter while the picture inside eases out of a slight push in */
.js .name,.js .herotext{opacity:0;transform:translateY(22px)}
.js .heromedia .hm{clip-path:inset(100% 0 0 0)}
.js .heromedia .hm img{transform:scale(1.08)}
.ready .name,.ready .herotext{opacity:1;transform:none;
  transition:opacity 700ms ease var(--d,0ms),transform 1000ms var(--spring) var(--d,0ms)}
.ready .herotext{--d:140ms}
.ready .heromedia .hm{clip-path:inset(0);transition:clip-path 1150ms var(--spring) 220ms}
.ready .heromedia .hm img{transform:none;transition:transform 1600ms var(--spring) 220ms}
.hm img,.hm video{width:100%;height:100%;object-fit:cover}

/* 2. figures */
.figs{margin-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.figmeta{padding:16px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--soft);border-bottom:1px solid var(--line)}
.nums{grid-template-columns:repeat(4,1fr)}
.num{padding:clamp(28px,3vw,48px) 0 clamp(28px,3vw,44px);border-right:1px solid var(--line);padding-right:20px}
.num+.num{padding-left:clamp(16px,1.6vw,28px)}
.num:last-child{border-right:0}
.nums:has(>.num:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.numfig{font-size:clamp(44px,5.6vw,104px);font-weight:300;letter-spacing:-.045em;line-height:.95;
  font-variant-numeric:tabular-nums}
.numfig span{color:var(--soft)}
.numlab{margin-top:18px;font-size:15px;font-weight:500}
.numsrc{margin-top:4px;font-size:13.5px;color:var(--soft)}
.kit{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.kit p{color:var(--soft);font-size:15px}
.kit p b{color:var(--ink);font-weight:500}

/* section heads: the label sits in the margin column, the heading in the body */
section{padding:clamp(96px,10vw,180px) 0 0}
.head{align-items:baseline}
.head .idx{grid-column:1/span 3;color:var(--soft)}
.head h2{grid-column:4/span 9}
.head .body{grid-column:4/span 6;margin-top:20px}

/* 3. work: four across on a wide screen */
/* every grid is a true grid: equal columns, and every tile in a grid shares one
   shape, so rows line up whatever the source ratio. A tile crops to fit; the
   lightbox and the project page show the full frame */
.gallery{margin-top:clamp(40px,4vw,72px);display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--col-gap)}
.gallery .frame{aspect-ratio:2/3}
/* home: four equal columns. A film keeps its own 9:16 and a landscape piece spans
   three columns at exactly the height of the film beside it, so every row lines
   up and nothing is cropped to make it fit */
.gallery.home{grid-template-columns:repeat(4,1fr)}
.gallery.home .frame{aspect-ratio:9/16}
.gallery.home .span3{grid-column:span 3}
.gallery.home .span3 .frame{aspect-ratio:auto;height:0;padding-top:calc((100% - 2*var(--col-gap))/3*16/9)}
.gallery.home .span3 .frame img{position:absolute;inset:0;width:100%;height:100%}
.gallery.home .prow{flex-direction:column;gap:2px}
.gallery.home .pcap{text-align:left}
/* six across, a caption sits under its title rather than beside it */
.gallery:not(.home):not(.pgrid) .prow{flex-direction:column;gap:2px}
.gallery:not(.home):not(.pgrid) .pcap{text-align:left}
.pgrid{grid-template-columns:repeat(4,1fr)}
.pgrid .frame,.stills .frame{aspect-ratio:3/4}
.stills.wide .frame{aspect-ratio:16/9}
.pnext .frame{aspect-ratio:1}
.gallery .frame img,.stills .frame img,.pnext .frame img{height:100%;object-fit:cover}
/* a tile is as tall as its own picture and caption and sits at the top of its row,
   so a caption that runs to two lines never pushes a neighbour's picture down */
.gallery>.piece,.stills>.piece{align-self:start}
.piece{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;width:100%;
  margin:0 0 clamp(32px,3vw,52px);padding:0;border:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.frame{position:relative;overflow:hidden;background:var(--line);
  transition:transform var(--dur) var(--spring)}
.piece:active .frame{transform:scale(.985);transition-duration:90ms}
.frame img,.frame video{width:100%;height:auto;display:block;
  transition:transform 1200ms var(--spring),opacity 500ms ease}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* nothing pops in: a still waits on the panel colour and fades up once decoded,
   and a film only replaces its poster once it is actually playing */
.js .frame img,.js .hm img{opacity:0}
.js .frame img.loaded,.js .hm img.loaded{opacity:1}
.frame video,.hm video{opacity:0;transition:opacity 500ms ease}
.frame video.playing,.hm video.playing{opacity:1}
/* the tile the lightbox flew out of stays empty until it flies back */
.frame.away{visibility:hidden}

/* scroll: each block arrives once, a short rise and a fade, staggered along the
   row it belongs to. Never replayed, never tied to scroll position */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none;
  transition:opacity 800ms ease var(--d,0ms),transform 1000ms var(--spring) var(--d,0ms)}
.prow{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13.5px}
.pmeta{font-weight:500}
.pcap{color:var(--soft);text-align:right}
/* the back catalogue link: loud on purpose, his call */
.more{margin-top:8px;font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.more a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.more a:active{opacity:.55}
/* sector filter: the hotel reader gets to the hotel work in one tap */
.filters{margin-top:clamp(28px,3vw,44px);display:flex;gap:clamp(18px,2vw,32px);flex-wrap:wrap}
.filters button{min-height:44px;padding:0;background:none;border:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:var(--soft);cursor:pointer;text-decoration:none;
  transition:color 200ms ease}
.filters button:active{opacity:.55}
.filters button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.piece[hidden]{display:none}
/* the one film with sound, and the only landscape asset: full width, and it says it plays */
.feature{margin-top:12px}
.feature+.gallery{margin-top:0}
.feature.after{margin-top:0}
.playmark{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;
  background:var(--bg);color:var(--ink)}
/* results: named projects, the figure picked out by ink rather than by size */
.cases{margin-top:clamp(40px,4vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
.case h3{margin-top:18px}
.case .small{margin-top:6px;color:var(--soft)}
.case p{margin-top:14px;color:var(--soft);font-size:clamp(15px,1.05vw,17px);max-width:46ch}
.case strong{color:var(--ink);font-weight:500}
.aud{border-top:1px solid var(--line);padding:18px 0;font-size:15px;color:var(--soft)}
.aud b{color:var(--ink);font-weight:500}
/* selected clients: one quiet ruled line, the names doing the work */
.proof{margin-top:clamp(36px,4vw,64px);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(20px,3vw,56px)}
.proof .small{flex:none;color:var(--soft)}
.proof ul{flex:1;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:clamp(16px,2.4vw,44px)}
/* each mark carries its own height so they read as the same visual size,
   since a badge and a long wordmark look wrong at one height */
.proof li{flex:none;display:flex}
.proof img{display:block;width:auto;height:calc(var(--h)*var(--u,1px))}
@media (max-width:1120px){.proof{--u:.78px}}

/* 4. services: four columns, ruled */
.ways{margin-top:clamp(40px,4vw,72px);grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.way{padding:28px clamp(16px,1.6vw,28px) 0 0;display:flex;flex-direction:column}
.way+.way{border-left:1px solid var(--line);padding-left:clamp(16px,1.6vw,28px)}
.way p{margin-top:12px;color:var(--soft);font-size:15px;flex:1}
.wayfoot{margin-top:28px;padding:16px 0 4px;border-top:1px solid var(--line);font-size:15px;font-weight:500}

/* 5. clients: a set index, sector in the margin, names in columns */
.clients{margin-top:clamp(40px,4vw,72px);border-top:1px solid var(--line)}
.crow{padding:28px 0;border-bottom:1px solid var(--line)}
.crow .small{grid-column:1/span 3;color:var(--soft);padding-top:8px}
.crow ul{grid-column:4/span 9;list-style:none;columns:3;column-gap:var(--col-gap)}
.crow li{font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;line-height:1.5;font-weight:400;break-inside:avoid}

/* 7. contact: full bleed, inverted */
#contact{padding-top:clamp(96px,10vw,180px)}
.contact{background:var(--inv-bg);color:var(--inv-ink);padding:clamp(56px,7vw,128px) 0 clamp(40px,4vw,64px);
  transition:background-color 500ms ease,color 500ms ease}
.contact .idx{color:var(--inv-soft)}
.contact h2 span{color:var(--inv-soft)}
.contact :focus-visible{outline-color:var(--inv-ink)}
.email{display:block;margin-top:clamp(48px,6vw,112px);font-size:6.4vw;font-weight:400;letter-spacing:-.04em;
  line-height:1;text-decoration:none;white-space:nowrap}
.email span{position:relative;display:inline-block;padding-bottom:.08em}
.email span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left}
.email:active{opacity:.7;transition:opacity 0s}
.cfoot{margin-top:clamp(48px,5vw,88px);padding-top:20px;border-top:1px solid color-mix(in srgb,var(--inv-ink) 18%,transparent);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--inv-soft)}
.cfoot nav{all:unset;display:flex;gap:28px}
.cfoot a{text-decoration:none;transition:color 160ms ease}
footer{padding:22px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--soft)}

/* lightbox: the tile itself flies up to fill the screen and flies back to its
   place on close, along the same path. Driven from script so it can be caught and
   reversed mid flight, and dragged down to dismiss on a phone */
.lightbox{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.lightbox.on{visibility:visible;pointer-events:auto}
.lbscrim{position:absolute;inset:0;background:var(--bg);opacity:0}
.lbmedia{position:absolute;transform-origin:0 0;overflow:hidden;background:var(--line) center/cover no-repeat;
  will-change:transform;touch-action:none}
.lbmedia iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lbmedia video,.lbmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lbcap,.lbclose{opacity:0;transition:opacity 300ms ease}
.lightbox.settled .lbcap,.lightbox.settled .lbclose{opacity:1}
.lbcap{position:absolute;left:0;right:0;font-size:13px;color:var(--soft);text-align:center}
.lbclose{position:absolute;top:14px;right:var(--gutter);height:44px;padding:0 4px;background:none;border:0;
  color:var(--ink);font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lbclose:active{opacity:.55;transition:opacity 0s}

@media (hover:hover) and (pointer:fine){
  .navlinks a:hover,.navend a:hover{color:var(--ink)}
  .navlinks a:hover::after,.navend a:hover::after{transform:scaleX(1);transform-origin:left}
  .link:hover::after,.email:hover span::after{animation:wipe 760ms var(--ease-out)}
  .link:hover .arrow{transform:translateX(5px)}
  .btn:hover{box-shadow:inset 0 -60px 0 0 var(--ink);color:var(--bg)}
  .btn.btn-solid:hover{border-color:var(--ink);color:var(--inv-ink)}
  .piece:hover .frame img,.piece:hover .frame video{transform:scale(1.03)}
  .cfoot a:hover{color:var(--inv-ink)}
}

@media (max-width:1100px){
  .gallery:not(.pgrid){grid-template-columns:repeat(3,1fr)}
  .gallery.home{grid-template-columns:repeat(4,1fr)}
  .ways{grid-template-columns:repeat(2,1fr)}
  .way:nth-child(3){border-left:0;padding-left:0}
  .way:nth-child(n+3){margin-top:40px}
  .crow ul{columns:2}
}
@media (max-width:900px){
  .navbar{grid-template-columns:1fr auto}
  /* the menu unrolls downward out of the bar that owns it, and rolls back up
     into it. A transition, so a second tap mid motion simply reverses it */
  .navlinks{position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--gutter) 14px;
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path var(--dur-quick) var(--spring-quick),visibility 0s linear var(--dur-quick)}
  nav.open .navlinks{clip-path:inset(0 0 -1px 0);visibility:visible;
    transition:clip-path var(--dur) var(--spring),visibility 0s}
  .navlinks a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);
    opacity:0;transform:translateY(-8px);transition:opacity 160ms ease,transform 160ms ease}
  nav.open .navlinks a{opacity:1;transform:none;
    transition:opacity 400ms ease calc(60ms + var(--i,0) * 40ms),transform var(--dur) var(--spring) calc(60ms + var(--i,0) * 40ms)}
  .navlinks a::after{display:none}
  .navlinks a:last-child{border-bottom:0}
  .navbar{grid-template-columns:1fr auto auto;column-gap:8px}
  .mark{grid-column:1;justify-self:start;padding-left:0;font-size:11px;letter-spacing:.1em}
  .navend{grid-column:2;grid-row:1}
  .btn.btn-sm{height:34px;padding:0 10px;font-size:11px;letter-spacing:.08em}
  .burger{display:block;justify-self:end}
  /* his full name stays, so on the very smallest phones the button gives way */
  @media (max-width:365px){.btn-sm .longer{display:none}}
  /* phone: the three hero buttons share one line. The two worded ones split the
     width, the icon keeps its square, and "(PDF)" gives way to the arrow */
  @media (max-width:520px){
    .heroactions{flex-wrap:nowrap;gap:8px}
    .heroactions .btn{flex:1 1 auto;min-width:0;padding:0 8px;white-space:nowrap;letter-spacing:.1em}
    .heroactions .btn.btn-icon{flex:none;padding:0}
    .heroactions .pdf{display:none}
  }
  .name{font-size:8.9vw}
  /* one column: the photo still tucks under the name, full width, copy below */
  .herogrid{grid-template-columns:1fr;margin-top:-3.6vw}
  .heromedia{order:-1;width:100%;min-width:0;margin-bottom:36px}
  .herotext{padding-right:0}
  .nums{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(2){border-right:0}
  .num:nth-child(3){padding-left:0}
  .num:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* three figures stack rather than leave a hole in a two by two */
  .nums:has(>.num:nth-child(3):last-child){grid-template-columns:1fr}
  .nums:has(>.num:nth-child(3):last-child) .num{border-right:0;padding-left:0;border-bottom:1px solid var(--line)}
  .nums:has(>.num:nth-child(3):last-child) .num:last-child{border-bottom:0}
  .head .idx,.head h2,.head .body{grid-column:1/-1}
  .head h2{margin-top:14px}
  .gallery:not(.pgrid),.pgrid{grid-template-columns:repeat(2,1fr)}
  .gallery.home .span3{grid-column:span 2}
  .gallery.home .span3 .frame{padding-top:56.25%}
  .prow{flex-direction:column;gap:2px}
  .pcap{text-align:left}
  .ways{grid-template-columns:1fr}
  .way,.way+.way{border-left:0;padding-left:0;min-height:0;margin-top:0;padding-bottom:32px}
  .way+.way{border-top:1px solid var(--line)}
  .crow .small,.crow ul{grid-column:1/-1}
  .crow ul{margin-top:12px}
  .cases{grid-template-columns:1fr;gap:44px}
  .proof{flex-direction:column;align-items:stretch;gap:16px}
  /* two rows of four on a phone, scaled with the screen so the row always fits */
  @media (max-width:720px){
    .proof{--u:min(.1867vw,.9px)}
    .proof ul{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;justify-items:center;gap:18px 8px}
  }
  .email{font-size:8.6vw}
}
/* reduced motion keeps every fade, because fades carry meaning, and drops every
   travel: no rise, no shutter, no push in, no flying lightbox */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aura i{animation:none}
  .js .name,.js .herotext,.js .reveal,.js .heromedia .hm img{transform:none !important}
  .js .heromedia .hm{clip-path:none}
  .frame,.frame img,.frame video,.link .arrow,.burger i,.btn{transition-property:opacity,color,box-shadow}
  .piece:active .frame,.btn:active{transform:none}
  .link:hover::after,.email:hover span::after{animation:none}
  .navlinks,.navlinks a{transform:none !important;clip-path:none !important}
}
@media (prefers-reduced-transparency:reduce){
  nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* the pages beyond home: Work and one page per project */
a.piece{text-decoration:none}
.navlinks a[aria-current]{color:var(--ink)}
.pagehead{padding-top:clamp(28px,3.4vw,64px)}
.ptitle{font-size:clamp(40px,7.6vw,150px);font-weight:500;letter-spacing:-.035em;line-height:.96;text-wrap:balance}
.back{color:var(--soft);margin-bottom:clamp(20px,2vw,36px)}
.back:hover{color:var(--ink)}
/* small text links get a finger sized hit area without growing on the page */
.cfoot a{position:relative}
.back::before,.cfoot a::before{content:"";position:absolute;inset:-12px -10px}
.plabel{margin-top:clamp(16px,1.6vw,26px);color:var(--soft)}

.projtop{margin-top:clamp(32px,3.6vw,64px);align-items:stretch}
.pfilm{grid-column:1/span 5}
.pfilm .piece{margin:0;width:min(100%,calc((100svh - 96px)*9/16))}
.ptext{grid-column:7/span 6;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
/* a landscape lead runs the full width, with the line and the facts side by side beneath */
.projtop.wide .pfilm{grid-column:1/-1}
.projtop.wide .pfilm .piece{width:min(100%,calc((100svh - 96px)*16/9))}
.projtop.wide .ptext{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);
  align-items:start;margin-top:clamp(32px,3.6vw,64px)}
.projtop.wide .ptext>div{grid-column:1/span 5}
.projtop.wide .ptext>.pfacts{grid-column:7/span 6}
.pline{font-size:clamp(22px,2vw,31px);letter-spacing:-.018em;line-height:1.18;max-width:25ch;text-wrap:balance}
.ptext .body{margin-top:18px}
.pfacts{border-top:1px solid var(--line)}
.pfacts div{display:grid;grid-template-columns:1fr 2fr;column-gap:var(--col-gap);padding:14px 0;border-bottom:1px solid var(--line)}
.pfacts dt{color:var(--soft);padding-top:3px}
.pfacts dd{font-size:clamp(15px,1.05vw,17px)}

.stills{margin-top:clamp(56px,6vw,104px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap)}
.stills .piece{margin:0}

.pnextwrap{padding-top:clamp(72px,8vw,140px)}
.pnext{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:end;
  padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.pnext .small{grid-column:1/span 3;color:var(--soft);align-self:start;padding-top:8px}
.pnext h2{grid-column:4/span 6;align-self:start}
.pnext h2 .arrow{display:inline-block;color:var(--ink);transition:transform var(--dur-quick) var(--spring-quick)}
.pnext .frame{grid-column:10/span 3}
.pnext:active{opacity:.55;transition:opacity 0s}
@media (hover:hover) and (pointer:fine){.pnext:hover h2 .arrow{transform:translateX(8px)}}

.pfeature{margin-top:clamp(32px,3.6vw,64px)}
.pfeature .piece{margin:0}
.pintro{grid-column:1/span 5}
.pintro .body{margin-top:18px}
.projtop>.pfacts{grid-column:7/span 6;align-self:start}
.stills.wide{grid-template-columns:repeat(2,1fr);row-gap:var(--col-gap)}
.stills.three{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){
  .stills.three{grid-template-columns:repeat(2,1fr)}
  .stills.three .piece:first-child{grid-column:1/-1}
  .pintro,.projtop>.pfacts{grid-column:1/-1}
  .projtop>.pfacts{margin-top:32px}
  .stills.wide{grid-template-columns:1fr}
  .pfilm,.ptext{grid-column:1/-1}
  .pfilm .piece{width:100%}
  .ptext{margin-top:32px}
  .projtop.wide .ptext{display:flex;gap:32px}
  .stills{grid-template-columns:repeat(2,1fr)}
  .pnext .small,.pnext h2{grid-column:1/-1}
  .pnext h2{margin-top:10px}
  .pnext .frame{grid-column:1/span 6;margin-top:20px}
}