/* Font faces are inlined here rather than in a separate stylesheet to save a
   render-blocking request. Paths are relative to this file. */
/* Newsreader and Hanken Grotesk, self-hosted (SIL Open Font License 1.1),
   latin + latin-ext subsets. */

/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   VAL ATELIER — design system
   --------------------------------------------------------------------------
   bone   #F2EEE7  page ground
   putty  #E8E1D6  alternating bands
   frame  #DED7CB  image wells before load
   line   #D8D1C5  hairlines
   muted  #665F54  secondary type
   brass  #9A7B4F  accent (rules and grounds; --brass-ink for text)
   ink    #23201C  primary type / inverted sections
   ========================================================================== */

:root{
  --bone:#F2EEE7;
  --putty:#E8E1D6;
  --frame:#DED7CB;
  --line:#D8D1C5;
  --muted:#665F54;      /* 5.45:1 on bone, 4.86:1 on putty */
  --brass:#9A7B4F;      /* rules, hairlines, grounds: not for text */
  --brass-ink:#745B30;  /* the same brass for text: 5.53:1 on bone, 4.93:1 on putty */
  --ink:#23201C;

  --ink-soft:#43403A;
  --bone-dim:#CFC7B8;
  --bone-mute:#A89F8E;
  --line-dark:#39342C;
  --ink-deep:#1A1714;

  --disp:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);

  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;
  --sec:clamp(76px,11vh,152px);
  --nav-h:108px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--bone)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap--wide{max-width:1600px}
.sec{padding:var(--sec) 0;position:relative}
.sec--tight{padding:clamp(56px,7vh,92px) 0}
.band-putty{background:var(--putty);--band:var(--putty)}

.rule{height:1px;background:var(--line);border:0;width:100%}

/* ---------- type ---------- */
.label{
  display:inline-block;font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);line-height:1.4;
}

.d2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.6vw,62px);line-height:1.04;letter-spacing:-.018em}
.d3{font-family:var(--disp);font-weight:400;font-size:clamp(23px,2.7vw,36px);line-height:1.12;letter-spacing:-.012em}

em,.it{font-style:italic}
/* set a step down so short intro paragraphs don't compete with the work */
.lede{font-weight:300;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.7;color:var(--ink-soft)}

p.body{font-size:15.5px;line-height:1.8;color:var(--ink-soft);font-weight:400;max-width:58ch}

.measure{max-width:44ch}
.measure-sm{max-width:34ch}
.num{font-family:var(--disp);font-size:12.5px;letter-spacing:.05em;color:var(--brass-ink)}

/* section head — label, rule, title, note */
.head{margin-bottom:clamp(40px,6vh,72px)}
.head__top{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.head__top .bar{flex:0 0 44px;height:1px;background:var(--brass)}
.head__grid{display:grid;gap:24px}
@media(min-width:900px){
  .head__grid{grid-template-columns:1.45fr .95fr;gap:64px;align-items:end}
}

/* ---------- buttons / links ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;overflow:hidden;
  padding:15px 30px;border:1px solid var(--ink);
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:transparent;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease-io);
}
.btn:hover{color:var(--bone)}
.btn:hover::before{transform:translateY(0)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(6px)}
.btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink-soft)}
.btn--solid::before{background:var(--brass)}
.btn--solid:hover{color:var(--bone);border-color:var(--brass)}

.alink{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:7px;color:inherit;
}
.alink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-io);
}
.alink:hover::after{transform:scaleX(1);transform-origin:left}
.alink .ar{transition:transform .45s var(--ease)}
.alink:hover .ar{transform:translateX(7px)}

/* ---------- header ---------- */
.hdr{
  /* above .sheet (65) so the burger stays tappable while the menu is open */
  position:fixed;top:0;left:0;right:0;z-index:66;
  /* the bar sits on the page ground above the hero rather than over it */
  background:var(--bone);border-bottom:1px solid var(--line);
  transition:transform .6s var(--ease);
}
.hdr.is-up{transform:translateY(-102%)}
.hdr.is-open{transform:none;background:transparent;border-bottom-color:transparent}
/* the enquiry button is the one thing on the bar meant to be pressed */
.hdr__cta{border-radius:999px}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);padding:0 var(--pad)}

.brand{display:flex;align-items:center;gap:14px;z-index:72;position:relative}
/* The lockup is sized so the ATELIER line (8% of the artwork's height) stays
   legible. Both lockup files are stacked in the same box and the bar fades
   between them; both are the one-tone cut. */
.brand__mark{position:relative;display:block;flex:0 0 auto;height:72px}
.brand__mark img{display:block;height:100%;width:auto}
.brand__ink,.brand__lit{transition:opacity .45s var(--ease)}
.brand__lit{position:absolute;left:0;top:0;opacity:0}
.hdr.is-open .brand__ink{opacity:0}
.hdr.is-open .brand__lit{opacity:1}
@media(max-width:820px){:root{--nav-h:92px}.brand__mark{height:58px}}

.nav{display:none;align-items:center;gap:38px}
.nav a{position:relative;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;color:var(--ink-soft)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-io)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a.is-here{color:var(--brass-ink)}
.nav a.is-here::after{background:var(--brass);transform:scaleX(1)}
/* The enquiry button is on the bar at every width. On a phone it sits tight
   against the burger, set smaller and without its arrow, because the room
   between it and the lockup is the only room there is. */
.hdr__cta{display:inline-flex}
@media(max-width:1019px){
  .hdr__cta{margin-left:auto;padding:10px 15px;font-size:9.5px;letter-spacing:.16em;gap:0}
  .hdr__cta .ar{display:none}
}
@media(max-width:390px){.hdr__cta{padding:9px 12px;font-size:9px;letter-spacing:.12em}}
/* it would otherwise sit over the open menu */
.hdr.is-open .hdr__cta{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}

@media(min-width:1020px){
  .nav{display:flex}
}

/* burger */
.burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:34px;height:34px;z-index:72;position:relative}
.burger span{display:block;width:26px;height:1px;background:var(--ink);transition:transform .5s var(--ease),opacity .3s var(--ease),background .4s var(--ease)}
.hdr.is-open .burger span{background:var(--bone)}
.hdr.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.hdr.is-open .burger span:nth-child(2){opacity:0;transform:scaleX(.2)}
.hdr.is-open .burger span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}
@media(min-width:1020px){.burger{display:none}}

/* slide-in menu sheet */
/* visibility removes the closed menu from the tab order and the
   accessibility tree; it waits for the slide-out to finish and switches on
   immediately when opening */
.sheet{
  position:fixed;inset:0;z-index:65;background:var(--ink);color:var(--bone);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .8s var(--ease-io), visibility 0s linear .8s;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 32px) var(--pad) 40px;overflow-y:auto;
}
.sheet.is-open{transform:translateX(0);visibility:visible;transition:transform .8s var(--ease-io), visibility 0s linear 0s}
.sheet__nav{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line-dark)}
.sheet__nav a{
  display:block;padding:18px 0;border-bottom:1px solid var(--line-dark);
  font-family:var(--body);font-weight:400;font-size:clamp(24px,6.4vw,40px);line-height:1.1;letter-spacing:-.01em;
  opacity:0;transform:translateX(38px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),color .4s var(--ease);
}
.sheet.is-open .sheet__nav a{opacity:1;transform:none}
.sheet.is-open .sheet__nav a:nth-child(1){transition-delay:.16s}
.sheet.is-open .sheet__nav a:nth-child(2){transition-delay:.23s}
.sheet.is-open .sheet__nav a:nth-child(3){transition-delay:.30s}
.sheet.is-open .sheet__nav a:nth-child(4){transition-delay:.37s}
.sheet.is-open .sheet__nav a:nth-child(5){transition-delay:.44s}
.sheet__nav a:hover{color:var(--brass-ink)}
.sheet__foot{margin-top:40px;opacity:0;transition:opacity .6s var(--ease) .5s}
.sheet.is-open .sheet__foot{opacity:1}
.sheet__foot a{
  display:inline-flex;align-items:center;gap:11px;padding:15px 28px;border-radius:40px;
  border:1px solid rgba(242,238,231,.5);color:var(--bone);
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.sheet__foot a svg{width:17px;height:17px;fill:currentColor}
.sheet__foot a:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ---------- splash screen ----------
   The opening cover. It is display:none by default and only shown once the
   page has said it can run JavaScript, because a cover that cannot be lifted
   is a black screen with the site behind it. Same reason it goes when someone
   has asked for less motion. preloader.js drives it; the rules below are all
   that is needed to run the sequence when GSAP never arrives. */
.splash{display:none}
html.js .splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-deep);color:var(--bone-mute);
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){html.js .splash{display:none}}
html.is-splashing{overflow:hidden}

.splash__lock{text-align:center;transform-origin:50% 50%}
/* The mark rises out of a clip rather than sliding over the ground, the same
   way a photograph arrives elsewhere on the site. */
.splash__mark{display:block}
.splash__mark img{
  /* phase two scales the lockup by 1.045, so it is the size after that which
     has to stay inside the artwork's 1000px */
  display:block;width:clamp(170px,32vw,400px);height:auto;
  /* it arrives a little large and closes on its own size */
  transform:scale(1.08);opacity:0;
}
/* nothing moves it if the sequence never runs */
.splash.is-ready .splash__mark img,
html:not(.js) .splash__mark img{transform:none;opacity:1}

/* the sequence without GSAP: the same three phases, same timings */
.splash.is-css .splash__mark img{animation:splashMark 1s var(--ease-out) both}
.splash.is-css .splash__lock{animation:splashHold .8s var(--ease-out) 1.2s both}
.splash.is-css.is-out{transform:translateX(-100%);transition:transform .8s cubic-bezier(.76,0,.24,1)}
@keyframes splashMark{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes splashHold{from{transform:scale(1)}to{transform:scale(1.045)}}

/* ---------- page transition curtain ----------
   Without JS the curtain simply sits off-screen and never shows. With JS it
   covers the page before first paint, lifts away on arrival, and drops back
   in before the browser leaves for the next page. */
.curtain{
  position:fixed;inset:0;z-index:110;background:var(--ink);pointer-events:none;
  transform:translateY(100%);will-change:transform;
}
html.js .curtain{transform:translateY(0)}
html.js .curtain.is-out{transform:translateY(-100%);transition:transform .74s var(--ease-io) .06s}
html.js .curtain.is-park{transform:translateY(100%);transition:none}
html.js .curtain.is-in{transform:translateY(0);transition:transform .6s var(--ease-io)}
.curtain__mark{
  position:absolute;left:50%;top:50%;width:104px;
  transform:translate(-50%,-50%) translateY(8px);opacity:0;
  transition:opacity .5s var(--ease),transform .7s var(--ease-out);
}
html.js .curtain:not(.is-out):not(.is-park) .curtain__mark{opacity:.9;transform:translate(-50%,-50%)}

/* ---------- motion primitives ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .92s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-56px);transition:opacity .84s var(--ease-out),transform .98s var(--ease-out)}
.rv-r{opacity:0;transform:translateX(56px);transition:opacity .84s var(--ease-out),transform .98s var(--ease-out)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
/* Slide-ins run at every width. Sections clip sideways (overflow-x: clip does
   not create a scroll container, so position: sticky keeps working), which is
   what stops an un-revealed block pushing the page sideways on a phone. */
@media(max-width:860px){
  .rv-l{transform:translateX(-38px)}
  .rv-r{transform:translateX(38px)}
}
section,.sec,.mast,.cta,.deck,.pj-next{overflow-x:clip}
.rv[data-d="1"],.rv-l[data-d="1"],.rv-r[data-d="1"]{transition-delay:.10s}
.rv[data-d="2"],.rv-l[data-d="2"],.rv-r[data-d="2"]{transition-delay:.20s}
.rv[data-d="3"],.rv-l[data-d="3"],.rv-r[data-d="3"]{transition-delay:.30s}
.rv[data-d="4"]{transition-delay:.40s}
.rv[data-d="5"]{transition-delay:.50s}

/* staggered line reveal for display type */
.ln{display:block;overflow:hidden}
.ln > i{display:block;font-style:inherit;transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.in .ln > i{transform:none}
.ln:nth-child(2) > i{transition-delay:.10s}
.ln:nth-child(3) > i{transition-delay:.20s}
.ln:nth-child(4) > i{transition-delay:.30s}

/* natural-ratio image plate: width and height attributes on the <img> reserve
   the space before it loads. .well (object-fit: cover) is only for the hero
   and the full-bleed bands. */
.shot{position:relative;display:block;background:var(--frame);overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot.wipe img{clip-path:inset(0 0 100% 0);transform:none;transition:clip-path .78s var(--ease-io)}
.shot.wipe.in img{clip-path:inset(0 0 0 0)}
.shot.wipe[data-d="1"] img{transition-delay:.1s}
.shot.wipe[data-d="2"] img{transition-delay:.2s}
.shot.wipe[data-d="3"] img{transition-delay:.3s}

/* two-column image grid — every photograph keeps its own proportions and the
   columns absorb the difference in height. Nothing is cropped or stretched. */
.mgrid{column-count:1;column-gap:clamp(14px,1.7vw,26px)}
.mgrid > *{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block;margin:0 0 clamp(14px,1.7vw,26px)}
@media(min-width:721px){.mgrid{column-count:2}}
@media(min-width:1180px){.mgrid--three{column-count:3}}

@media(hover:hover){
  .hov{cursor:pointer}
  .hov .shot{transition:transform .6s var(--ease-out)}
  .hov .shot img{transition:filter .6s var(--ease),clip-path 1.2s var(--ease-io)}
  .hov:hover .shot{transform:translateY(-6px)}
  .hov:hover .shot img{filter:brightness(1.05) saturate(1.03)}
}

/* ---------- figure caption ---------- */
.plate{display:block}
.plate figcaption{
  margin-top:15px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:18px;
}

/* flex-basis 0 lets a long descriptor wrap inside the name column instead of
   pushing the area onto its own line (a wrapping flex container decides line
   breaks from the basis before shrinking anything) */
.plate .ttl{flex:1 1 0;min-width:0;font-family:var(--disp);font-size:clamp(19px,1.7vw,23px);font-weight:400;letter-spacing:-.008em;transition:color .4s var(--ease)}
.plate .sub{display:block;font-family:var(--body);font-size:12.5px;color:var(--muted);margin-top:4px;letter-spacing:0}
.plate .meta{flex-shrink:0;text-align:right;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);line-height:1.6}
.plate:hover .ttl{color:var(--brass-ink)}
/* where a project has been published, the card carries a line saying so. It
   takes a row of its own under the name and the area, which is why the caption
   is allowed to wrap; nothing else in a caption is wide enough to need it. */
.card__feat{
  flex:0 0 100%;margin-top:9px;
  font-size:10px;font-weight:600;letter-spacing:.14em;line-height:1.6;
  text-transform:uppercase;color:var(--brass-ink);
}

/* the project count: figure and line side by side, stacked on a phone */
.claim{
  /* centred against the figure rather than sat on its baseline: a line of type
     two or three deep hangs off a baseline and reads as though it slipped */
  display:flex;align-items:center;gap:clamp(16px,1.9vw,28px);
  margin-top:clamp(24px,3.2vw,38px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
}
/* with no lede above it, the rule has nothing to separate */
.mast__lede > .claim:first-child{margin-top:0;padding-top:0;border-top:0}
/* the figure sits in a rosette of fifty hairlines, every fifth one longer */
.claim__mark{
  flex:0 0 auto;position:relative;
  display:grid;place-items:center;
  width:clamp(148px,15.5vw,224px);aspect-ratio:1;   /* reserved, so nothing jumps */
}
.claim__ring{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.claim__tick{
  stroke:var(--brass);stroke-width:1;stroke-linecap:butt;
  opacity:.55;transform-origin:50% 50%;
}
.claim__tick--long{opacity:.9}
.claim__sweep{
  fill:none;stroke:var(--brass);stroke-width:1;opacity:.85;
  stroke-linecap:round;
}
.claim__fig{
  flex:0 0 auto;position:relative;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(48px,6.2vw,92px);line-height:.88;letter-spacing:-.035em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.claim__plus{font-style:normal;color:var(--brass-ink)}

/* ---- the drawing, where it is wanted ----
   The resting state is the finished rosette, so a visitor without script, or
   one who has asked for less movement, sees the complete drawing rather than
   an empty ring. Only once the script has marked the block as ready does it
   start from nothing and draw itself in. */
.js .claim__mark.is-armed .claim__tick{opacity:0;transform:scale(.55)}
.js .claim__mark.is-armed .claim__sweep{stroke-dashoffset:var(--len)}
.js .claim__mark.is-armed .claim__plus{opacity:0}

/* these have to outweigh the armed rules above, which carry .js as well */
.js .claim__mark.is-armed.is-drawn .claim__tick{
  opacity:.55;transform:scale(1);
  transition:opacity .5s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--i) * 17ms);
}
.js .claim__mark.is-armed.is-drawn .claim__tick--long{opacity:.9}
.js .claim__mark.is-armed.is-drawn .claim__sweep{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.15s var(--ease-io);
}
.js .claim__mark.is-armed.is-drawn .claim__plus{
  opacity:1;transition:opacity .45s var(--ease) .95s;
}
@media(prefers-reduced-motion:reduce){
  .js .claim__mark.is-armed .claim__tick{opacity:.55;transform:none}
  .js .claim__mark.is-armed .claim__tick--long{opacity:.9}
  .js .claim__mark.is-armed .claim__sweep{stroke-dashoffset:0}
  .js .claim__mark.is-armed .claim__plus{opacity:1}
  .js .claim__mark.is-armed.is-drawn .claim__tick,
  .js .claim__mark.is-armed.is-drawn .claim__sweep,
  .js .claim__mark.is-armed.is-drawn .claim__plus{transition:none}
}
@media(max-width:560px){
  .claim__mark{width:clamp(132px,42vw,168px)}
}
.claim__lab{
  max-width:34ch;
  font-size:clamp(12.5px,.95vw,14px);line-height:1.65;color:var(--muted);
}
@media(max-width:560px){
  .claim{flex-direction:column;gap:10px}
  .claim__lab{max-width:none}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--bone);padding:clamp(56px,8vh,90px) 0 34px}
.foot__grid{display:grid;gap:44px}
@media(min-width:820px){.foot__grid{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:56px}}
.foot__mark{width:132px;opacity:.9;margin-bottom:24px}
.foot h4{font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:20px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a,.foot ul span{font-size:14px;color:var(--bone-dim);transition:color .35s var(--ease)}
.foot ul a:hover{color:var(--brass-ink)}
/* the Instagram handle, given its own weight in the footer and again on the
   contact page: the studio posts there before anywhere else */
.ig{
  display:inline-flex;align-items:center;gap:15px;margin-top:30px;
  padding:15px 22px;border:1px solid var(--line-dark);color:var(--bone-dim);
  transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease);
}
.ig:hover{border-color:var(--brass);color:var(--bone);background:rgba(255,255,255,.03)}
.ig__ic{flex:0 0 auto;display:block}
.ig__t{display:flex;flex-direction:column;gap:3px;line-height:1.15}
.ig__h{font-family:var(--disp);font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--bone)}
.ig__n{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-mute)}
.ig .ar{margin-left:6px;transition:transform .4s var(--ease)}
.ig:hover .ar{transform:translateX(5px)}
@media(max-width:400px){.ig{gap:12px;padding:13px 16px}.ig__n{letter-spacing:.14em}}

/* on the light contact page the same block reads against the paper */
.ig--light{border-color:var(--line);color:var(--ink-soft);margin-top:0}
.ig--light:hover{border-color:var(--brass);color:var(--ink);background:rgba(0,0,0,.02)}
.ig--light .ig__h{color:var(--ink);font-size:clamp(15px,1.15vw,17px)}
.ig--light .ig__n{font-size:9.5px}
.ig--light .ig__n{color:var(--muted)}

.foot__bottom{
  margin-top:clamp(44px,6vh,72px);padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
}
.foot__bottom span,.foot__bottom a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-mute)}
.foot__bottom a:hover{color:var(--bone)}

/* ---------- shared page masthead ---------- */
.mast{padding:calc(var(--nav-h) + clamp(56px,9vh,116px)) 0 clamp(40px,6vh,76px);position:relative}
.mast__grid{display:grid;gap:30px}
#careers{scroll-margin-top:var(--nav-h)}
#careers a.u{text-decoration:underline;text-underline-offset:3px}
/* the lede and the line under it read as one column of text */
.mast__lede{display:grid;gap:clamp(12px,1.6vh,18px)}
/* a quieter second line: set smaller and lighter than the lede so it reads as
   a footnote to it rather than a second statement */
.note{
  font-size:clamp(12px,.92vw,13.5px);line-height:1.65;letter-spacing:.005em;
  color:var(--muted);
}

@media(min-width:920px){.mast__grid{grid-template-columns:1.4fr 1fr;gap:70px;align-items:end}}
.mast h1{font-family:var(--disp);font-weight:400;font-size:clamp(42px,7.4vw,104px);line-height:.96;letter-spacing:-.028em}
/* where the masthead carries the mark instead of the name set in type: the
   artwork is 1200px, so this stays well inside it on a retina screen */
.mast h1.mast__mark{font-size:0;line-height:0}
/* the mark is the page title here; capped so it doesn't fill the first screen */
.mast h1.mast__mark img{display:block;width:clamp(120px,14vw,200px);height:auto}
.mast .crumb{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.mast .crumb .bar{width:40px;height:1px;background:var(--brass)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .rv,.rv-l,.rv-r{opacity:1 !important;transform:none !important}
  .ln > i{transform:none !important}
  .wipe img{clip-path:inset(0 0 0 0) !important;transform:none !important}
  .curtain{display:none}
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- THE OPENING: full bleed, the work behind the name -------------------
   One photograph filling the screen and every word set on it. The bar runs
   across the head, the studio's name sits low on the left, and what is on
   screen, with the way through it, sits low on the right. A wash at the top
   and the foot is all that holds the white type up, so the middle of the
   picture is never touched. */
.hero{
  position:relative;width:100%;overflow:hidden;background:var(--ink);
  /* the bar stands above it rather than on it */
  margin-top:var(--nav-h);
}

/* The work itself, one frame at a time. On a screen held wide the frame
   is the screen below the bar and the landscape photograph fills it. On a
   screen held upright (.hero--tall, set by index.html) the frame takes the
   portrait photograph's own 2:3 shape across the full width, so it is shown
   whole. */
.hero__slides{position:relative;width:100%;height:calc(100svh - var(--nav-h));min-height:420px;overflow:hidden;z-index:0}
.hero--tall .hero__slides{height:auto;min-height:0;aspect-ratio:2 / 3}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Only the head and the foot, and only as far in as the type reaches. The
   middle two fifths of every photograph are left alone. */
.hero__scrim{
  /* the wash follows the words: it covers what is in view on the first
     screen, not the part of a tall frame below the fold */
  position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  height:min(100%, calc(100svh - var(--nav-h)));
  bottom:max(0px, calc(100% - (100svh - var(--nav-h))));
  /* the head carries no type, so only the foot gets a wash */
  background:
    /* the foot has to hold its type over a wall in full sun as readily as
       over a dark room */
    linear-gradient(0deg,rgba(10,9,8,.80) 0,rgba(10,9,8,.58) 11%,rgba(10,9,8,.34) 22%,rgba(10,9,8,.14) 34%,rgba(10,9,8,.04) 45%,rgba(10,9,8,0) 58%);
}

/* letterbox bars that retract as the frame opens */
.hero__bar{position:absolute;left:0;right:0;height:clamp(26px,5.5vh,58px);z-index:4;background:var(--ink);pointer-events:none;
  transition:transform 1.5s var(--ease-io) .15s}
.hero__bar--t{top:0}
.hero__bar--b{bottom:0}
.hero.is-lit .hero__bar--t{transform:translateY(-100%)}
.hero.is-lit .hero__bar--b{transform:translateY(100%)}

/* the two halves of the foot, on one baseline */
.hero__foot{
  /* low on the first screen: at the foot of the frame, or, where the frame
     runs past the fold, at the foot of what is in view */
  --gap:clamp(26px,4.6vh,54px);
  position:absolute;z-index:3;left:var(--pad);right:var(--pad);
  bottom:max(var(--gap), calc(100% - (100svh - var(--nav-h)) + var(--gap)));
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,72px);
}

/* ---- the line, low on the left ---------------------------------------- */
.hero__lede{position:relative;z-index:4;min-width:0}
/* read but not seen */
.u-hide{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* the line sits on the left edge, aligned with the lockup above it, with the
   deck opposite */
.hero__sub{
  display:block;margin:0;max-width:19ch;
  font-family:var(--disp);font-weight:400;letter-spacing:-.006em;
  font-size:clamp(19px,1.7vw,27px);line-height:1.38;color:var(--bone);
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s var(--ease-out) .72s,transform 1.2s var(--ease-out) .72s;
}
.hero.is-lit .hero__sub{opacity:1;transform:none}
/* each span of the line starts on its own line */
.hero__sub{max-width:none}
.hero__sub span{display:block;white-space:nowrap}
.hero__kicker{
  margin:clamp(12px,1.8vh,18px) 0 0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,238,231,.78);
  opacity:0;transition:opacity 1s var(--ease-out) 1s;
}
.hero.is-lit .hero__kicker{opacity:1}
.hero--tall .hero__kicker{text-shadow:0 1px 14px rgba(10,9,8,.55)}
@media(max-width:520px){.hero__kicker{font-size:9px;letter-spacing:.1em;white-space:nowrap}}

/* ---- what is on screen, low on the right -------------------------------- */
.hero__deck{
  position:relative;z-index:4;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  gap:clamp(7px,1vh,11px);
  opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease-out) .95s,transform 1.1s var(--ease-out) .95s;
}
.hero.is-lit .hero__deck{opacity:1;transform:none}
.hero__count{font-size:11px;letter-spacing:.24em;color:rgba(242,238,231,.78);font-variant-numeric:tabular-nums}
.hero__proj{
  font-family:var(--disp);font-weight:400;letter-spacing:-.008em;
  font-size:clamp(18px,1.5vw,25px);line-height:1.2;color:var(--bone);
}
.hero__meta{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,238,231,.6)}
/* two square plates, parted by a hairline rather than run together */
.hero__arrows{display:flex;gap:1px;background:rgba(14,12,10,.45);margin-top:clamp(6px,1.2vh,14px)}
.hero__arrow{
  width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);
  display:flex;align-items:center;justify-content:center;
  background:var(--bone);color:var(--ink);border:0;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.hero__arrow svg{width:19px;height:19px}
.hero__arrow:hover{background:var(--ink);color:var(--bone)}
.hero__arrow:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---- narrower than a laptop --------------------------------------------
   The same composition, closed up: the name comes down, and the deck runs as
   a line under it with the frame's name at one end and the way through it at
   the other. The bar has already gone behind its own menu by here. */
@media(max-width:820px){
  .hero__foot{flex-direction:column;align-items:stretch;gap:clamp(20px,3.2vh,30px)}
  
  /* the three lines stack in one column and the arrows stand beside them,
     however many of the lines a given width is showing */
  .hero__deck{
    display:grid;grid-template-columns:1fr auto;align-items:end;
    gap:4px clamp(14px,4vw,24px);width:100%;text-align:left;justify-items:start;
  }
  .hero__count,.hero__proj,.hero__meta{grid-column:1}
  .hero__arrows{grid-column:2;grid-row:1 / -1;align-self:end;justify-self:end;margin-top:0}
}

/* a phone: the same again, smaller, and the record line drops away */
@media(max-width:520px){
  .hero__proj{font-size:17px}
  .hero__meta{display:none}
  .hero__arrow{width:40px;height:40px}
  .hero__arrow svg{width:17px;height:17px}
  .hero__count{font-size:10px}
}

/* An upright frame carries the words over more of the picture, so the wash
   reaches further up and is deeper at the foot, and the type carries a soft
   shadow for the pale walls */
.hero--tall .hero__foot{--gap:clamp(22px,3.6vh,38px)}
.hero--tall .hero__scrim{background:linear-gradient(0deg,rgba(10,9,8,.86) 0,rgba(10,9,8,.72) 16%,rgba(10,9,8,.50) 32%,rgba(10,9,8,.24) 46%,rgba(10,9,8,.06) 58%,rgba(10,9,8,0) 66%)}
.hero--tall .hero__sub,.hero--tall .hero__count,.hero--tall .hero__proj,.hero--tall .hero__meta{text-shadow:0 1px 14px rgba(10,9,8,.55)}

@keyframes cue{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

@media(prefers-reduced-motion:reduce){
  .hero__bar{display:none}
  .hero__deck,.hero__sub,.hero__kicker{opacity:1 !important;transform:none !important}
  .hero__slide{transition:none}
}

/* ---------- "as featured in" logo band --------------------------------
   Scrolls continuously and pauses on hover. The second group repeats the
   first, and the track moves exactly half its width, so the loop is seamless. */
.tally{overflow:hidden;padding:clamp(30px,4.6vh,52px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tally__track{display:flex;width:max-content;animation:tally 64s linear infinite}
.tally__group{display:flex}
.tally__item{display:grid;gap:clamp(9px,1.1vh,13px);align-content:center;
  padding:0 clamp(28px,3.8vw,64px);border-right:1px solid var(--line);white-space:nowrap}

/* publication mastheads in each title's own colours, on a light band so they
   show as published; each is sized by eye so a squarish mark and a long
   wordmark carry the same weight */
.tally__logo{display:block;width:auto}
.tally__logo--ad{height:clamp(46px,5vw,68px)}
.tally__logo--cd{height:clamp(36px,3.8vw,52px)}
.tally__logo--ed{height:clamp(32px,3.4vw,46px)}
.tally__logo--ltd{height:clamp(30px,3.2vw,44px)}

.tally__logo--id{height:clamp(42px,4.4vw,60px)}
@keyframes tally{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tally:hover .tally__track{animation-play-state:paused}
/* nothing should move for a reader who has asked it not to: the band settles
   into a centred row instead, and the duplicate list is dropped */
@media(prefers-reduced-motion:reduce){
  .tally__track{animation:none;width:100%}
  .tally__group{flex-wrap:wrap;justify-content:center;width:100%}
  .tally__group[aria-hidden="true"]{display:none}
  .tally__item{padding-block:clamp(12px,1.6vh,18px)}
  .tally__item:last-child{border-right:0}
  /* the logos repeat only to fill the moving loop; still, each shows once */
  .tally__item:nth-child(n+6){display:none}
  .tally__item:nth-child(5){border-right:0}
}

/* ---------- approach / numbered principles ---------- */
.princ{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:720px){.princ{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.princ{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1080px){.princ--three{grid-template-columns:repeat(3,1fr)}}
a.princ__cell{display:block;color:inherit}
.princ__cell{background:var(--bone);padding:clamp(28px,3vw,42px) clamp(22px,2.4vw,34px);position:relative;overflow:hidden}
.band-putty .princ__cell{background:var(--putty)}
.princ__cell .n{font-family:var(--disp);font-style:italic;font-size:clamp(30px,3.4vw,44px);color:var(--frame);line-height:1;margin-bottom:26px;transition:color .5s var(--ease)}
.band-putty .princ__cell .n{color:#D2C9B8}
.princ__cell h4{font-family:var(--disp);font-weight:400;font-size:23px;letter-spacing:-.01em;margin-bottom:12px}
.princ__cell p{font-size:14.5px;line-height:1.78;color:var(--ink-soft)}
.princ__cell::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-io)}
@media(hover:hover){.princ__cell:hover::after{transform:scaleX(1)}.princ__cell:hover .n{color:var(--brass-ink)}}

/* section footer link into the archive */
.sec-foot{
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  margin-top:clamp(26px,4vh,44px);padding-top:22px;border-top:1px solid var(--line);
}

/* ---------- the principal designer, on the home page ---------- */
/* her quote runs across the page at a moderate size so the name below reads
   as the larger of the two */
.intro__say{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.004em;
  color:var(--brass-ink);max-width:54ch;
  margin:clamp(22px,3vh,34px) 0 clamp(34px,4.6vh,58px);
  padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--brass);
}
.intro__say em{font-style:italic}
@media(max-width:899px){.intro__say{max-width:none}}

.person{display:grid;gap:clamp(28px,4vw,68px);align-items:center}
@media(min-width:900px){.person{grid-template-columns:.85fr 1.15fr}}

/* ---------- studio strip (image + text) ---------- */
.duo{display:grid;gap:clamp(34px,4vw,72px);align-items:center}
@media(min-width:900px){.duo{grid-template-columns:.92fr 1.08fr}.duo--flip .duo__fig{order:2}}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px 44px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}

.facts .k{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}

.facts .v{font-family:var(--disp);font-size:clamp(19px,1.7vw,23px);letter-spacing:-.005em}

/* ---------- big CTA ---------- */
.cta{text-align:center;padding:clamp(84px,13vh,168px) 0}
.cta h2{font-family:var(--disp);font-weight:400;font-size:clamp(38px,6.6vw,94px);line-height:1;letter-spacing:-.026em;margin:26px 0 36px}

.cta__row{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- projects archive ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:clamp(38px,5vh,60px);flex-wrap:wrap}
.tabs button{
  position:relative;padding:16px 4px;margin-right:34px;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  transition:color .4s var(--ease);
}
.tabs button .c{font-family:var(--disp);font-size:11px;letter-spacing:.04em;color:var(--brass-ink);margin-left:8px;vertical-align:super}
.tabs button::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-io)}
.tabs button:hover{color:var(--ink-soft)}
.tabs button.is-on{color:var(--ink-soft)}
.tabs button.is-on::after{transform:scaleX(1)}

.panel{display:none}
.panel.is-on{display:block;animation:panelIn .75s var(--ease-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* the archive: every cover takes the same shape so rows line up; the full
   frame is on the project page */
/* two even columns; at three the covers came out too small */
.grid-work{
  display:grid;grid-template-columns:1fr;align-items:start;
  /* the plates side by side sit on the same thin gutter as the project
     galleries */
  gap:clamp(16px,1.8vw,26px) clamp(3px,.4vw,6px);
}
@media(min-width:900px){ .grid-work{grid-template-columns:repeat(2,1fr)} }
.grid-work > *{margin-bottom:0;break-inside:auto;min-width:0}
.grid-work .card .shot{aspect-ratio:var(--r, auto)}
.grid-work .card .shot img{width:100%;height:auto;display:block}
.card{position:relative;display:block}
.card__n{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:10px;letter-spacing:.22em;color:var(--bone);
  background:rgba(35,32,28,.42);backdrop-filter:blur(4px);padding:7px 11px;
}

/* "Featured" mark on published projects, opposite the frame number */
.shot__feat{
  position:absolute;top:16px;right:16px;z-index:3;   /* level with the frame number opposite */
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);line-height:1;
  font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--bone);padding:7px 11px;
  box-shadow:0 1px 16px rgba(10,9,8,.16);
}
.shot__feat::before{
  content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:var(--brass);
}
@media(max-width:640px){
  .shot__feat{top:10px;right:10px;padding:6px 9px;font-size:8.5px;letter-spacing:.18em}
}

.card__go{
  margin-top:14px;display:inline-flex;align-items:center;gap:9px;
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  transition:color .4s var(--ease);
}
.card:hover .card__go{color:var(--brass-ink)}
.card__go .ar{transition:transform .45s var(--ease)}
.card:hover .card__go .ar{transform:translateX(7px)}

/* empty archive state (finished projects) */
.empty{border:1px solid var(--line);padding:clamp(34px,5vw,70px)}
.empty__top{display:grid;gap:26px}
@media(min-width:900px){.empty__top{grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}}
.empty__frames{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(38px,5vh,58px)}
@media(min-width:820px){.empty__frames{grid-template-columns:repeat(4,1fr)}}
.empty__frame{
  aspect-ratio:4/5;border:1px dashed var(--line);position:relative;
  display:flex;align-items:center;justify-content:center;
}
.empty__frame span{font-family:var(--disp);font-style:italic;font-size:14px;color:#C3BAA9}
.empty__note{margin-top:clamp(30px,4vh,46px);padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}

/* ---------- project detail ---------- */
/* The lead photograph is shown complete: never cropped, never distorted. It is
   capped to the viewport height so it still reads as a hero rather than a wall,
   and --ar (its true width/height) shrinks the frame to hug it, so a portrait
   never sits inside empty bars. */
.pj-lead{
  --cap:78vh;
  background:var(--frame);overflow:hidden;margin:0 auto;
  max-width:min(100%, calc(var(--cap) * var(--ar, 1.5)));
}
.pj-lead img{width:100%;height:auto;display:block;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-io)}
.pj-lead.in img{clip-path:inset(0 0 0 0)}
@media(max-width:760px){.pj-lead{--cap:70vh}}
.pj-head{display:grid;gap:20px;margin-top:clamp(26px,3.6vh,44px)}
@media(min-width:900px){.pj-head{grid-template-columns:1.3fr .7fr;gap:56px;align-items:end}}
.pj-head h1{font-family:var(--disp);font-weight:400;font-size:clamp(38px,6.2vw,86px);line-height:.98;letter-spacing:-.026em}
.pj-head .label{display:block;margin-bottom:16px}
.pj-back{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease)}
.pj-back .ar{transition:transform .45s var(--ease)}
.pj-back:hover{color:var(--brass-ink)}
.pj-back:hover .ar{transform:translateX(-7px)}

/* only the rows that have a value are printed, so the grid fits what it gets */
/* the four facts under a project name: understated, editorial, and never
   competing with the name above it */

.pj-facts{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pj-facts > div{background:var(--bone);padding:26px clamp(18px,2vw,28px)}
.pj-facts .k{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pj-facts .v{font-family:var(--disp);font-size:clamp(19px,1.7vw,23px);letter-spacing:-.005em}

.pj-story{display:grid;gap:34px}
@media(min-width:920px){
  /* the two halves sit against each other's middle rather than both hanging
     from the top, where the brief in the display face runs to a different
     depth than the copy beside it and the pair looked misaligned */
  .pj-story{grid-template-columns:.85fr 1.15fr;gap:clamp(44px,5vw,88px);align-items:center}
}
.pj-story p + p{margin-top:20px}
/* the summary alone, when the story itself is set among the photographs */
.pj-story--solo{grid-template-columns:1fr !important}
.pj-story--solo .pull{max-width:34ch}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.chips span{border:1px solid var(--line);padding:10px 16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ==========================================================================
   PROJECT GALLERY — shared figure styles
   ========================================================================== */
.mag{--g:clamp(3px,.4vw,6px);display:flex;flex-direction:column;gap:var(--g);margin-top:clamp(32px,4.5vh,60px)}

.mag__f{margin:0;min-width:0;cursor:zoom-in}
.mag__f .shot{aspect-ratio:var(--cr);height:100%}
.mag__f .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media(hover:hover){.mag__f:hover .shot img{transform:scale(1.025)}}

/* text blocks set among the gallery photographs */

.ed__h{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(20px,1.9vw,28px);line-height:1.1;color:var(--ink-soft)}
.ed__body p{font-family:var(--body);font-size:clamp(13px,.95vw,14.5px);line-height:1.8;color:var(--ink-soft);max-width:46ch}
.ed__body p + p{margin-top:1em}

.pj-next{border-top:1px solid var(--line);display:grid;gap:1px;background:var(--line)}
@media(min-width:760px){.pj-next{grid-template-columns:1fr 1fr}}
@media(max-width:759px){.pj-next .next{order:-1}}
.pj-next a{
  background:var(--bone);padding:clamp(30px,4.4vw,58px) var(--pad);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;transition:color .5s var(--ease);
}
.pj-next a .label{transition:color .5s var(--ease)}
.pj-next a .t{font-family:var(--disp);font-size:clamp(24px,3vw,40px);letter-spacing:-.016em;transition:transform .6s var(--ease-io)}
.pj-next a::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .62s var(--ease-io);z-index:0}
.pj-next a > *{position:relative;z-index:1}
@media(hover:hover){
  .pj-next a:hover{color:var(--bone)}
  .pj-next a:hover::before{transform:translateY(0)}
  .pj-next a:hover .label{color:var(--bone-mute)}
  .pj-next a.prev:hover .t{transform:translateX(-12px)}
  .pj-next a.next:hover .t{transform:translateX(12px)}
}
.pj-next a.next{text-align:right;align-items:flex-end}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(26,23,20,.96);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lb.is-open{opacity:1;visibility:visible}
.lb__stage{position:absolute;inset:clamp(56px,8vh,86px) clamp(16px,5vw,90px)}
.lb__stage img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .5s var(--ease),transform .7s var(--ease-out)}
.lb__stage img.on{opacity:1;transform:none}
.lb__bar{position:absolute;left:0;right:0;top:0;height:clamp(56px,8vh,86px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,5vw,90px)}
.lb__bar .c{font-size:10.5px;letter-spacing:.24em;color:var(--bone-mute)}
.lb__x{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim);transition:color .35s var(--ease)}
.lb__x:hover{color:var(--brass-ink)}
.lb__nav{position:absolute;left:0;right:0;bottom:0;height:clamp(56px,8vh,86px);display:flex;align-items:center;justify-content:center;gap:14px}
.lb__nav button{width:50px;height:50px;border:1px solid rgba(242,238,231,.28);border-radius:50%;color:var(--bone);display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.lb__nav button:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ---------- pages index ---------- */

.dir{
  background:var(--bone);padding:clamp(30px,3.4vw,46px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:250px;transition:color .5s var(--ease);
}
.dir::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease-io);z-index:0}
.dir > *{position:relative;z-index:1}
.dir h3{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.014em;margin:18px 0 12px}
.dir p{font-size:14.5px;line-height:1.78;color:var(--ink-soft);transition:color .5s var(--ease)}
.dir .go{margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .5s var(--ease)}
.dir .go .ar{transition:transform .45s var(--ease)}
@media(hover:hover){
  a.dir:hover{color:var(--bone)}
  a.dir:hover::before{transform:translateY(0)}
  a.dir:hover p{color:var(--bone-dim)}
  a.dir:hover .label{color:var(--bone-mute)}
  a.dir:hover .go{color:var(--brass-ink)}
  a.dir:hover .go .ar{transform:translateX(7px)}
}

/* ---------- services ---------- */
.svc{list-style:none;border-top:1px solid var(--line)}
.svc > li{border-bottom:1px solid var(--line)}
.svc__head{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:26px 4px;text-align:left}
.svc__head .n{font-family:var(--disp);font-size:12px;color:var(--brass-ink);width:26px}
.svc__head .t{font-family:var(--disp);font-size:clamp(21px,2.4vw,32px);letter-spacing:-.014em;transition:color .4s var(--ease)}
.svc__head .pm{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 34px;transition:background .45s var(--ease),border-color .45s var(--ease)}
.svc__head .pm::before,.svc__head .pm::after{content:"";position:absolute;background:var(--ink);transition:transform .5s var(--ease-io),background .45s var(--ease)}
.svc__head .pm::before{width:12px;height:1px}
.svc__head .pm::after{width:1px;height:12px}
.svc > li.is-open .svc__head .pm{background:var(--ink);border-color:var(--ink-soft)}
.svc > li.is-open .svc__head .pm::before,.svc > li.is-open .svc__head .pm::after{background:var(--bone)}
.svc > li.is-open .svc__head .pm::after{transform:scaleY(0)}
.svc > li.is-open .svc__head .t{color:var(--brass-ink)}
.svc__body{overflow:hidden;height:0;transition:height .6s var(--ease-io)}
.svc__body > div{padding:0 4px 32px;display:grid;gap:26px}
@media(min-width:820px){.svc__body > div{grid-template-columns:1fr 1fr;gap:56px;padding-left:46px}}
.svc__body ul{list-style:none;display:grid;gap:10px}
.svc__body ul li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink-soft)}
.svc__body ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--brass)}

/* ---------- contact ---------- */
.ct-grid{display:grid;gap:clamp(44px,5vw,84px)}
/* the form leads: it is the route the studio actually wants people to take,
   so it takes the wider half and the column beside it reads as a short list
   of quicker ways to get hold of them rather than a second form */
@media(min-width:960px){.ct-grid{grid-template-columns:.8fr 1.2fr;gap:clamp(48px,6vw,96px)}}
.ct-rows{border-top:1px solid var(--line)}
.ct-row{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);position:relative}
.ct-row .k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
/* every block in the studio column follows the same pattern as the rows:
   label, display-face line, text-face note */
.ct-block{margin-top:clamp(30px,3.8vh,44px)}
.ct-block .v{
  display:block;margin-top:14px;
  font-family:var(--disp);font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.35;letter-spacing:-.006em;
}
.ct-block .n{
  display:block;margin-top:8px;max-width:40ch;
  font-size:13.5px;line-height:1.7;color:var(--muted);
}
/* Services: the four ways of working, each a line in the same display face
   as the blocks around it, linking through to the services page */

.ct-row .v{font-family:var(--disp);font-size:clamp(15px,1.05vw,16.5px);letter-spacing:-.006em;transition:transform .5s var(--ease-io),color .4s var(--ease)}
.ct-row .ar{color:var(--brass-ink);opacity:0;transform:translateX(-12px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
@media(hover:hover){
  a.ct-row:hover .v{transform:translateX(10px);color:var(--brass-ink)}
  a.ct-row:hover .ar{opacity:1;transform:translateX(0)}
}
@media(max-width:560px){
  .ct-row{grid-template-columns:1fr auto}
  .ct-row .k{grid-column:1;grid-row:1}
  .ct-row .v{grid-column:1;grid-row:2;margin-top:6px}
  .ct-row .ar{grid-row:2}
}
.form{display:grid;gap:26px}
.field{position:relative}
.field label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-family:var(--disp);font-size:19px;color:var(--ink);
  transition:border-color .45s var(--ease);
}
.field textarea{resize:vertical;min-height:104px;font-size:17px;line-height:1.6}
.field select{font-family:var(--disp);font-size:19px;cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:#B7AE9D}
.form__two{display:grid;gap:26px}
@media(min-width:640px){.form__two{grid-template-columns:1fr 1fr}}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:6px}
.form__foot p{font-size:12.5px;color:var(--muted);max-width:34ch}
.form__msg{font-size:13px;color:var(--brass-ink);min-height:20px}

/* ---------- about ---------- */
.quote{
  font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.9vw,54px);line-height:1.16;
  letter-spacing:-.02em;max-width:22ch;
}
/* ---------- how a project runs: five named steps ------------------------
   Five cells across on a wide screen, two on a tablet, one on a phone, on the
   same hairline grid as the principles. */
.steps{list-style:none;display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:680px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps li{background:var(--bone);display:grid;align-content:start;
  gap:clamp(10px,1.3vh,15px);padding:clamp(26px,3.4vh,38px) clamp(18px,1.7vw,26px)}
.band-putty .steps li{background:var(--putty)}
.steps .num{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--brass-ink)}
/* one of the five names runs to two lines, so every name is given the height
   of two: it keeps the five one-liners on a common baseline across the row */
.steps h4{font-family:var(--disp);font-weight:400;line-height:1.14;
  font-size:clamp(20px,1.9vw,25px);letter-spacing:-.012em}
@media(min-width:1040px){.steps h4{min-height:2.28em}}
.steps p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- full-bleed statement band ---------- */
.bleed{position:relative;overflow:hidden;background:var(--ink);color:var(--bone)}
.bleed__media{position:absolute;inset:-8% 0;z-index:0}
.bleed__media img{width:100%;height:100%;object-fit:cover;opacity:.42;will-change:transform}
.bleed::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,23,20,.62),rgba(26,23,20,.34) 45%,rgba(26,23,20,.7))}
.bleed__in{position:relative;z-index:2;padding:clamp(96px,17vh,220px) 0;text-align:center}
.bleed__in .label{color:#CFC7B8}
.bleed blockquote{
  font-family:var(--disp);font-weight:400;font-size:clamp(27px,4.4vw,62px);line-height:1.14;
  letter-spacing:-.022em;max-width:19ch;margin:26px auto 0;color:var(--bone);
}
.bleed blockquote em{color:#DCCBAC}
.bleed cite{display:block;margin-top:30px;font-style:normal;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-mute)}

/* ---------- pull quote on light ---------- */
.pull{
  border-left:1px solid var(--brass);padding:6px 0 6px clamp(22px,3vw,40px);
  font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.5vw,32px);line-height:1.24;
  letter-spacing:-.014em;max-width:26ch;
}

/* ---------- small utilities ---------- */
.stack-sm > * + *{margin-top:14px}
.stack > * + *{margin-top:22px}

.mt-l{margin-top:clamp(34px,5vh,58px)}

/* ---------- press ---------- */
.press{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* features are separated only by the container's hairline */
.pcard{
  background:var(--bone);display:grid;gap:0;position:relative;overflow:hidden;
  transition:background .5s var(--ease);
}
@media(min-width:820px){.pcard{grid-template-columns:.42fr 1fr;align-items:start}}
/* the plate follows its photograph's own proportions, so pictures are never
   cropped to make the cards match */
.pcard__fig{background:var(--frame);overflow:hidden;position:relative;
  display:block;min-height:0;aspect-ratio:var(--r, auto)}
.pcard__fig img{position:static;width:100%;height:auto;display:block;
  transition:transform 1.4s var(--ease)}
/* stacked on a phone the plate still follows its own photograph */
@media(max-width:819px){
  .pcard__fig{min-height:0;aspect-ratio:auto}
  .pcard__fig--mark{aspect-ratio:auto}
}
/* the plate a feature carries until its own cover image arrives: the
   publication set as a masthead, on the studio's own ground */
.pcard__fig--mark{
  background:var(--putty);
  /* no min-height of its own: it takes the same one as a photograph plate,
     so a card still waiting for its cover lines up with the rest */
  padding:clamp(24px,3vw,42px);
  border-right:1px solid var(--line);
  align-items:center;
}
.pcard__mark{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;width:100%}
.pcard__mark em{
  font-family:var(--disp);font-style:normal;font-weight:400;
  font-size:clamp(17px,1.7vw,24px);line-height:1.25;letter-spacing:-.008em;color:var(--ink-soft);
}
.pcard__rule{width:34px;height:1px;background:var(--brass);opacity:.7}
@media(max-width:819px){
  .pcard__fig--mark{min-height:0;border-right:0;border-bottom:1px solid var(--line);
    padding:clamp(26px,6vw,38px)}
}
.pcard__body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.pcard__outlet{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.pcard__outlet .o{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink)}
.pcard__outlet .m{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(23px,2.7vw,38px);line-height:1.12;letter-spacing:-.016em;max-width:26ch}
.pcard p{font-size:15px;line-height:1.75;color:var(--ink-soft);max-width:52ch}
.pcard__go{margin-top:6px}
@media(hover:hover){
  .pcard:hover .pcard__fig img{transform:scale(1.045)}
  .pcard:hover h3{color:var(--brass-ink)}
}
.pcard h3{transition:color .4s var(--ease)}
.press-note{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:clamp(28px,4vh,44px)}

/* ---------- floating WhatsApp ---------- */
/* --wa-foot is the room the floating button needs in the bottom-right corner,
   so anything else placed low and right can clear it */
:root{--wa-size:56px;--wa-gap:clamp(16px,2.4vw,30px);--wa-foot:calc(var(--wa-gap) + var(--wa-size) + 20px)}
.wa{
  position:fixed;right:var(--wa-gap);bottom:var(--wa-gap);z-index:55;
  width:var(--wa-size);height:var(--wa-size);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bone);border:1px solid var(--ink);
  box-shadow:0 10px 30px rgba(35,32,28,.26);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease-out),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.wa.on{opacity:1;transform:none;pointer-events:auto}
.wa svg{width:25px;height:25px;fill:currentColor}
.wa:hover{background:var(--brass);border-color:var(--brass);color:var(--bone)}
.wa::after{
  content:attr(data-label);position:absolute;right:calc(100% + 12px);white-space:nowrap;
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);padding:9px 14px;
  opacity:0;transform:translateX(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none;
}
@media(hover:hover){.wa:hover::after{opacity:1;transform:none}}
@media(max-width:600px){:root{--wa-size:52px}.wa::after{display:none}}

/* ---------- studio & principal designer, one section ---------- */
/* portrait on the left, all the writing in one column on the right, centred
   against each other */
.intro{display:grid;gap:clamp(30px,4vw,72px);align-items:center}
@media(min-width:900px){.intro{grid-template-columns:1fr 1.12fr}}
/* between a tablet and a small laptop the text runs long and narrow, so the
   portrait takes more of the row to keep the two sides near the same height */
@media(min-width:900px) and (max-width:1179px){.intro{grid-template-columns:1.18fr 1fr}}
.intro__room__body{display:grid;gap:clamp(14px,1.8vh,22px)}
.intro__room__go{margin-top:clamp(12px,1.6vh,20px)}
/* the portrait fills its column at its own proportions */
.intro__fig{align-self:center}
.intro__fig img{
  display:block;height:auto;
  width:100%;max-width:100%;
  margin-inline:auto;
}
.intro__name{font-family:var(--disp);font-weight:400;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.026em}
/* the credit sits clear of the name on its own rule, tracked tighter so it
   stays the shorter line */
.intro__role{
  margin-top:clamp(16px,1.8vh,22px);padding-top:clamp(14px,1.6vh,18px);
  border-top:1px solid var(--line);
  max-width:min(100%, 430px);
  font-size:10px;font-weight:600;letter-spacing:.14em;line-height:1.8;
  text-transform:uppercase;color:var(--brass-ink);
}
.intro__rule{height:1px;background:var(--line);margin:clamp(26px,3.4vh,40px) 0}

/* ---------- the project grid ---------- */
/* Justified rows: each plate's flex-basis and flex-grow are both scaled by its
   aspect ratio, so every plate in a row lands at the same height and the row
   fills the width, with nothing cropped and no measuring in JavaScript. */
.pgrid{
  display:flex;flex-wrap:wrap;
  /* the plates side by side sit on the same thin gutter as the project
     galleries */
  gap:clamp(16px,1.8vw,26px) clamp(3px,.4vw,6px);
  margin-top:clamp(30px,4.5vh,54px);
}
/* the cap stops a panorama from swallowing a short last row */
.pgrid > .ptile{
  flex-grow:var(--r, 1.5);
  flex-shrink:1;
  flex-basis:calc(var(--r, 1.5) * 150px);
  max-width:calc(var(--r, 1.5) * 330px);
  min-width:0;
}
/* below 640 the row is one plate wide and the ratio no longer decides anything */
@media(max-width:639px){ .pgrid > .ptile{flex-basis:100%;max-width:100%} }
/* Plates hang from the top of the row. With the row justified they all reach
   the same height anyway, so this only matters on the last row of a wrap. */
.pgrid{align-items:flex-start}
.ptile{
  display:flex;flex-direction:column;justify-content:flex-start;
  text-align:center;color:inherit;
}
/* the plate takes the cover's own proportions; tiles hang from the top of the
   row so each name sits directly under its photograph */
.ptile__fig{
  display:block;width:100%;aspect-ratio:var(--r, auto);background:var(--frame);
  overflow:hidden;transition:transform .7s var(--ease-io);
}
.ptile__fig img{width:100%;height:auto;display:block}
.ptile__name{
  display:block;margin-top:18px;
  font-family:var(--disp);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.006em;color:var(--ink);
  transition:color .45s var(--ease);
}
.ptile__meta{
  display:block;margin-top:7px;
  font-size:12.5px;letter-spacing:.01em;color:var(--muted);
}
.band-putty .ptile__name{color:var(--ink-soft)}
@media(hover:hover){
  .ptile:hover .ptile__fig{transform:translateY(-6px)}
  .ptile:hover .ptile__name{color:var(--brass-ink)}
}

/* ---------- archive category filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vh,44px)}
.filters button{
  padding:11px 22px;border:1px solid var(--line);border-radius:40px;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.filters button:hover{color:var(--ink);border-color:var(--ink-soft)}
.filters button.is-on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.filters button .c{margin-left:8px;color:var(--brass-ink);font-family:var(--disp);font-size:11px;vertical-align:super}
.filters button.is-on .c{color:#DCCBAC}
.filters + .filters__note{margin:calc(clamp(28px,4vh,44px) * -.45) 0 clamp(28px,4vh,44px);max-width:52ch;font-family:var(--disp);font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--ink-soft)}

/* ---------- nothing may stay hidden -------------------------------------
   Reveals start at opacity 0 and wait for an IntersectionObserver. Without
   JavaScript, in print, or for a crawler that doesn't scroll, the content is
   shown in its finished state instead. */
html:not(.js) .rv, html:not(.js) .rv-l, html:not(.js) .rv-r,
html:not(.js) .ptile, html:not(.js) .card, html:not(.js) .pcard,
html:not(.js) .hero__scrim,
html:not(.js) .hero__deck, html:not(.js) .hero__sub, html:not(.js) .hero__kicker,
html:not(.js) .intro__role{opacity:1;transform:none;filter:none}
html:not(.js) .ln > i{transform:none}
html:not(.js) .shot.wipe img,
html:not(.js) .pj-lead.wipe img{clip-path:none}
html:not(.js) .curtain,
html:not(.js) .hero__bar{display:none}

@media print{
  .rv, .rv-l, .rv-r, .ptile, .card, .pcard,
  .hero__scrim, .hero__deck, .hero__sub, .hero__kicker,
  .intro__role{opacity:1 !important;transform:none !important;filter:none !important}
  .ln > i{transform:none !important}
  .shot.wipe img, .pj-lead.wipe img{clip-path:none !important}
  .curtain, .hero__bar, .wa, .hdr{display:none !important}
  .hero{height:auto;min-height:0}
  body{background:#fff}
}

/* ==========================================================================
   PROJECT GALLERY
   Every block shares the same edges and spacing: wide (one landscape across),
   text (a passage beside a portrait, alternating sides) and pair (two
   pictures of the same shape).
   ========================================================================== */
/* every picture sits on the same thin gutter, between blocks and inside them */
.mag:has(> .gx){gap:var(--g)}
.gx{--col:var(--g)}
.gx .mag__f,.gx .mag__f .shot{height:100%}
.gx .mag__f .shot img{object-fit:cover;transition:transform 1.4s var(--ease-out)}
@media(hover:hover){.gx .mag__f:hover .shot img{transform:scale(1.03)}}

.gx--wide .mag__f .shot{aspect-ratio:16 / 9}

.gx--pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col)}
.gx--pair .mag__f .shot{aspect-ratio:4 / 5}
.gx--pair-l .mag__f .shot{aspect-ratio:3 / 2}

/* text: exactly half and half, on the same thin gutter as the pairs, so the
   picture lines up with the pictures above and below it and the passage
   has the other half to itself */
.gx--text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:center}
.gx--text .gx__copy{grid-column:1;padding:clamp(28px,4vh,56px) clamp(24px,6vw,120px)}
.gx--text .mag__f{grid-column:2}
.gx--text .mag__f .shot{aspect-ratio:4 / 5}
.gx--text-r .mag__f{grid-column:1;grid-row:1}
.gx--text-r .gx__copy{grid-column:2;grid-row:1}
.gx__copy .ed__body{margin-top:clamp(20px,2.6vh,30px)}
.gx__copy .ed__body p{max-width:46ch}

@media(max-width:1099px){
  .gx--text .gx__copy{padding:24px clamp(18px,4vw,48px)}
}
@media(max-width:759px){
  .gx--wide .mag__f .shot{aspect-ratio:3 / 2}
  .gx--text{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .gx--text .gx__copy,.gx--text .mag__f,.gx--text-r .gx__copy,.gx--text-r .mag__f{grid-column:1;grid-row:auto}
  .gx--text .mag__f{order:-1}
  .gx--text .gx__copy{padding:0 4px 8px}
}

/* ==========================================================================
   STUDIO FEEDBACK, 14 OCTOBER
   ========================================================================== */
/* hero: the line on one line and the small line on one line, a little
   smaller and lower; the line scales down to fit a phone's width */
.hero__sub{white-space:nowrap;font-size:min(clamp(17px,1.5vw,24px), calc((100vw - 2 * var(--pad)) / 25))}
.hero__sub span{display:inline}
.hero__foot{--gap:clamp(16px,2.6vh,32px)}
.hero--tall .hero__foot{--gap:clamp(12px,2vh,22px)}

/* swipeable photographs inside a project tile */
.sl{position:relative;width:100%;height:100%}
.sl__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sl__track::-webkit-scrollbar{display:none}
.sl__s{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:block}
.sl__s img{width:100%;height:100%;object-fit:cover;display:block}
.sl__dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:6px;pointer-events:none}
.sl__dots i{width:5px;height:5px;border-radius:50%;background:rgba(242,238,231,.55);box-shadow:0 0 6px rgba(10,9,8,.3);transition:background .3s var(--ease)}
.sl__dots i.on{background:var(--bone)}
.sl__b{position:absolute;top:50%;z-index:3;width:38px;height:38px;margin-top:-19px;border-radius:50%;
  background:rgba(242,238,231,.88);color:var(--ink);font-size:15px;line-height:38px;text-align:center;
  opacity:0;transition:opacity .35s var(--ease)}
.sl__b--p{left:12px}
.sl__b--n{right:12px}
@media(hover:hover){.sl:hover .sl__b{opacity:1}}
@media(hover:none){.sl__b{display:none}}
.ptile__fig .sl__s img,.grid-work .card .shot .sl__s img{height:100%}
/* a photograph of another shape sits whole in the frame, on the studio's putty */
.sl__s--fit{background:var(--putty)}
.sl__s--fit img,.ptile__fig .sl__s--fit img,.grid-work .card .shot .sl__s--fit img{object-fit:contain}
/* the last panel leads on to the project */
.sl__end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--putty);color:var(--ink);text-align:center;padding:0 24px}
.sl__end-t{font-family:var(--disp);font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.sl__end-go{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink)}
.sl__count{position:absolute;right:12px;bottom:12px;z-index:3;pointer-events:none;padding:5px 9px;
  background:rgba(26,23,20,.55);color:var(--bone);font-size:10px;font-weight:600;letter-spacing:.16em;line-height:1}

/* home tiles: the name and line sit close under their own photograph, with
   more room before the next project */
.pgrid{row-gap:clamp(34px,4.4vw,56px)}
.ptile__name{margin-top:10px;color:inherit}
.ptile__meta{margin-top:4px}

/* archive cards: no rule between a photograph and its own name; a rule
   between one project and the next instead */
.card__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:6px 18px;margin-top:12px;color:inherit}
.card__cap .card__go{flex:0 0 100%;margin-top:6px}
.card:hover .ttl{color:var(--brass-ink)}
.grid-work{row-gap:0}
.grid-work > .card{padding:clamp(22px,3vh,34px) 0;border-bottom:1px solid var(--line)}
.grid-work > .card:first-child{padding-top:0}
@media(min-width:900px){.grid-work > .card:nth-child(2){padding-top:0}}

/* category chips a little smaller */
.filters button{padding:9px 16px;font-size:9px;letter-spacing:.18em}

/* the archive header closes up so the projects start sooner */
.mast--tight{padding-top:calc(var(--nav-h) + clamp(28px,5vh,64px));padding-bottom:clamp(16px,3vh,36px)}
.mast--tight .claim__mark{width:clamp(120px,12vw,180px)}
.mast--tight + .sec--tight{padding-top:0}
.mast--tight + .sec--tight .tabs{margin-bottom:clamp(22px,3vh,36px)}

/* about: Vaishnavi and a short line open the page, the studio follows as
   three photographs in a row */
.ab-open__grid{display:grid;gap:clamp(24px,3vh,36px)}
@media(min-width:760px){.ab-open__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}}
.ab-open__fig{margin:0;aspect-ratio:988 / 1235}
.ab-open__fig img{width:100%;height:100%;object-fit:cover}
.ab-open__say{margin:clamp(18px,2.4vh,26px) 0 0;max-width:30ch;font-family:var(--disp);font-weight:400;
  font-size:clamp(20px,1.9vw,28px);line-height:1.35;letter-spacing:-.008em;color:var(--ink)}
.ab-open__name{margin-top:clamp(20px,2.8vh,30px);font-family:var(--disp);font-size:clamp(17px,1.3vw,20px);color:var(--ink)}
.ab-open__role{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ab-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1vw,14px)}
.ab-row figure{margin:0;aspect-ratio:2 / 3}
.ab-row img{width:100%;height:100%;object-fit:cover}
.ab-row{max-width:960px}
/* the hero line in the same face as the small line under it */
.hero__sub{font-family:var(--body);font-weight:400;letter-spacing:.005em;line-height:1.3;
  font-size:min(clamp(16px,1.35vw,21px), calc((100vw - 2 * var(--pad)) / 27))}

/* about, who we are: the text beside three studio photographs, no repeats */
.ab-who{padding-top:clamp(28px,4vh,56px)}
.ab-who__grid{display:grid;gap:clamp(26px,4vh,40px)}
@media(min-width:900px){.ab-who__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(40px,5vw,80px);align-items:center}}
.ab-who__h{margin:clamp(16px,2vh,22px) 0 clamp(18px,2.6vh,28px);font-family:var(--disp);font-weight:400;
  font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.018em;color:var(--ink)}
.ab-who__txt .body{font-size:14.5px;line-height:1.75}
.ab-who__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.9vw,12px)}
.ab-who__row figure{margin:0;aspect-ratio:2 / 3}
.ab-who__row img{width:100%;height:100%;object-fit:cover}
/* archive cards: the area joins the description line, the lines sit closer
   together, and each row of projects has more room before the next */
.card__cap{gap:0 18px;margin-top:14px}
.card__cap .sub{margin-top:5px;line-height:1.55}
.card__cap .card__feat{margin-top:8px;line-height:1.5}
.card__cap .card__go{margin-top:10px}
.grid-work > .card{padding:clamp(36px,5vh,60px) 0}
.grid-work > .card:first-child{padding-top:0}
@media(min-width:900px){.grid-work > .card:nth-child(2){padding-top:0}}
/* the project name in the hero in the same face as the line on the left */
.hero__proj{font-family:var(--body);font-weight:400;letter-spacing:.005em;font-size:clamp(16px,1.35vw,21px)}
@media(max-width:520px){.hero__proj{font-size:15px}}
/* home tiles: the line hugs the name; more room before the next project */
.ptile__name{line-height:1.2}
.ptile__meta{margin-top:3px;line-height:1.4}
.pgrid{row-gap:clamp(52px,5.4vw,80px)}

/* phone hero: the line sits lower, closer to the project under it */
@media(max-width:820px){ .hero__foot{gap:18px} }
/* the hero line in bold, sentence case, with the small line close under it */
.hero__sub{font-weight:600;letter-spacing:0}
.hero__sub{line-height:1.15}
.hero__kicker{margin-top:7px;line-height:1.2}
.sl{touch-action:pan-y}
/* phone hero: smaller arrows, centred on the project name beside them */
@media(max-width:820px){
  .hero__arrows{grid-row:2;align-self:center}
  .hero__proj{align-self:center}
  .hero__arrow{width:30px;height:30px}
  .hero__arrow svg{width:13px;height:13px}
}

/* project page: the floor plan, whole, its white paper melted into the page
   (multiply over the page colour), opening full-frame */
.pj-plan{margin:clamp(22px,3vh,36px) auto 0;max-width:min(100%,880px);cursor:zoom-in;text-align:center;background:var(--bone)}
.pj-plan img{display:block;width:auto;max-width:100%;max-height:84vh;height:auto;margin:0 auto;mix-blend-mode:multiply}
.pj-plan figcaption{margin-top:8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pj-plan + .pj-plan{margin-top:clamp(64px,9vh,110px)}

/* contact: the form alone under the heading, labels sitting close to their
   own field and clear room between one field and the next */
.ct-form{max-width:760px}
.ct-form .form{gap:38px}
.ct-form .form__two{gap:38px}
.ct-form .field label{font-size:11px;margin-bottom:4px;color:var(--ink-soft)}
.ct-form .field input,.ct-form .field select,.ct-form .field textarea{font-size:18px;padding:8px 0 10px}
.ct-form .field textarea{font-size:15px;line-height:1.6;min-height:120px;padding:12px 14px;margin-top:6px;
  border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.35)}
.ct-form .field textarea::placeholder{font-size:15px}
.ct-form .field textarea:focus{border-color:var(--brass)}
.ct-form .form__foot{flex-direction:column;align-items:flex-start;gap:14px}
.ct-form .form__foot p{max-width:56ch}

/* category | year under each project name, small and spaced */
.ptile__meta,.card__cap .sub{font-family:var(--body);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:pre}

/* ---- a quieter type scale, after the studio's reference (normcph.com):
   smaller headings and titles, the same calm spacing, still easy to read -- */
.mast h1{font-size:clamp(34px,4.4vw,60px);line-height:1.02}
.pj-head h1{font-size:clamp(32px,3.8vw,52px);line-height:1.02}
.d2{font-size:clamp(26px,3vw,42px)}
.d3{font-size:clamp(20px,1.9vw,27px)}
.cta h2{font-size:clamp(30px,3.8vw,54px);margin:18px 0 30px}
.pull{font-size:clamp(18px,1.6vw,22px);line-height:1.4;max-width:34ch}
.plate .ttl{font-size:clamp(17px,1.35vw,20px)}
.nav a{font-size:11px}

/* ---- project page, after normcph.com ------------------------------------ */
.pj-intro{display:grid;gap:36px}
.pj-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin:0}
.pj-meta dt{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.pj-meta dd{margin:5px 0 0;font-family:var(--disp);font-size:16px;color:var(--ink-soft)}
.pj-text p{font-family:var(--disp);font-size:clamp(17px,1.3vw,19px);line-height:1.62;color:var(--ink-soft)}
.pj-text p + p{margin-top:1.1em}
.pj-text__lead{color:var(--ink)!important}
.pj-side{margin:0;max-width:62%;cursor:zoom-in}
.pj-side .shot{aspect-ratio:4 / 5}
.pj-side img{width:100%;height:100%;object-fit:cover}
@media(min-width:960px){
  .pj-intro{grid-template-columns:minmax(150px,1fr) minmax(0,2.2fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start}
  .pj-meta{grid-template-columns:1fr;gap:26px}
  .pj-text p{text-align:justify;hyphens:auto}
  .pj-side{max-width:none}
}
/* the photographs: wider, even gaps, standing pictures three to a row */
.gx--trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
.gx--trio .mag__f .shot{aspect-ratio:3 / 4}
@media(max-width:759px){
  .gx--trio{grid-template-columns:1fr}
  .gx--trio .mag__f .shot{aspect-ratio:4 / 5}
}

/* ---- join us ------------------------------------------------------------ */
.jn-mast{padding-bottom:clamp(28px,4vh,48px)}
.jn-sub{font-family:var(--disp);font-size:clamp(18px,1.6vw,22px);color:var(--ink-soft);margin-top:12px}
.jn-hero{margin:0}
.jn-hero img{display:block;width:100%;height:clamp(260px,52vw,620px);object-fit:cover}
.jn-intro{max-width:760px}
.jn-intro p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-top:14px}
.jn-intro h2{margin-bottom:8px}
.jn-note{display:grid;gap:32px;margin-top:clamp(48px,7vh,80px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.jn-note__img{margin:0;max-width:340px}
.jn-note__img img{width:100%;aspect-ratio:2 / 3;object-fit:cover}
.jn-note blockquote{margin:18px 0 0}
.jn-note blockquote p{font-family:var(--disp);font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink)}
.jn-note blockquote p + p{margin-top:1em}
.jn-sign{margin-top:22px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.jn-sign span{display:block;color:var(--muted);margin-top:4px}
@media(min-width:860px){.jn-note{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}}
.jn-exp{margin-top:clamp(48px,7vh,80px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.jn-exp__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:28px;padding:0}
.jn-exp__list li{display:flex;gap:16px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.jn-ic svg{width:34px;height:34px;fill:none;stroke:var(--ink-soft);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(min-width:960px){.jn-exp__list{grid-template-columns:repeat(4,1fr)}.jn-exp__list li + li{border-left:1px solid var(--line);padding-left:24px}}
.jn-apply{margin-top:clamp(48px,7vh,80px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line);max-width:760px}
.jn-apply > p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-top:14px}
.jn-req{margin:16px 0 26px;padding-left:16px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.jn-mail{margin-top:16px;font-size:12px;line-height:1.7;color:var(--muted)}
.jn-life{margin-top:clamp(48px,7vh,80px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line);max-width:760px}
.jn-life p{font-family:var(--disp);font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink);margin-top:14px}
.jn-note__img img{height:auto;display:block}

/* process on a phone: one horizontal row to swipe, like the tablet view */
@media(max-width:679px){
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(-1 * var(--pad))}
  .steps::-webkit-scrollbar{display:none}
  .steps li{flex:0 0 44%;scroll-snap-align:start}
}
.pj-text__h{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin:2.2em 0 .9em}
.pj-text__h:first-child{margin-top:0}
/* home: "Selected work" heading removed, so the 50+ line opens the section */
#finished{padding-top:clamp(48px,7vh,88px)}
#finished .head{margin-bottom:clamp(28px,4vh,48px)}
#finished .claim{border-top:0;padding-top:0;margin-top:0}

/* project pages: a smaller name, brief and facts (her feedback, 22 Oct) */
.pj-head h1{font-size:clamp(26px,2.9vw,40px);line-height:1.08;letter-spacing:-.018em}
.pull{font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:44ch}
.pj-story--solo .pull{max-width:52ch}
.pj-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pj-facts > div{padding:16px clamp(14px,1.6vw,22px)}
.pj-facts .k{font-size:9.5px;margin-bottom:6px}
.pj-facts .v{font-size:clamp(15px,1.15vw,17px)}
@media(max-width:560px){.pj-facts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pj-facts > div:last-child:nth-child(odd){grid-column:span 2}}

/* gallery passages: the text a short step under its heading, lines a little
   tighter, and clear room before the next photographs (her feedback, 22 Oct) */
.gx__copy .ed__body{margin-top:12px}
.ed__body p{line-height:1.6}
.ed__body p + p{margin-top:.8em}
@media(max-width:759px){
  .gx--text .gx__copy{padding:22px 4px 34px}
}

/* project pages: the brief sits closer to the facts above and the photographs below */
.pj-brief{padding-top:clamp(28px,4vh,48px);padding-bottom:clamp(14px,2.2vh,28px)}
.pj-brief .pj-story.mt-l{margin-top:clamp(14px,2vh,22px)}
.pj-gal .mag{margin-top:0}
/* join us: the founder's note and Life at VAL in the text face, headings stay in the serif */
.jn-note blockquote p,.jn-life p{font-family:var(--body);font-size:15px;line-height:1.75;color:var(--ink-soft)}
.jn-note__txt h2{margin-bottom:4px}
/* phone menu: smaller links, closer together */
.sheet__nav a{font-size:clamp(18px,4.6vw,24px);padding:14px 0;letter-spacing:0}
/* phone menu: smaller still, and sitting higher with room below */
.sheet{justify-content:flex-start;padding-top:calc(var(--nav-h) + 40px)}
.sheet__nav a{font-size:clamp(16px,4vw,19px);padding:12px 0}
.sheet__foot{margin-top:30px}
/* press cards: smaller article titles */
.pcard h3{font-size:clamp(18px,1.7vw,24px);line-height:1.25;max-width:34ch}
/* About: the opening section clears the fixed bar, so "The studio" and the first line are not hidden under it */
.mast.ab-who{padding-top:calc(var(--nav-h) + clamp(36px,6vh,72px))}

/* ---- about: frequently asked questions ---------------------------------- */
.faq h2{margin-top:10px}
.faq__list{margin-top:clamp(22px,3vh,36px);border-top:1px solid var(--line);max-width:900px}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;display:grid;grid-template-columns:34px 1fr 18px;gap:12px;align-items:center;padding:18px 0;cursor:pointer}
.faq__i summary::-webkit-details-marker{display:none}
.faq__n{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--brass-ink)}
.faq__q{font-family:var(--disp);font-size:clamp(16px,1.3vw,19px);line-height:1.35;color:var(--ink)}
.faq__x{position:relative;width:14px;height:14px}
.faq__x::before,.faq__x::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--ink-soft);transition:transform .35s var(--ease)}
.faq__x::after{transform:rotate(90deg)}
.faq__i[open] .faq__x::after{transform:rotate(0)}
.faq__a{padding:0 0 22px 46px;max-width:68ch}
.faq__a p{font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.faq__a p + p,.faq__a p + .faq__t,.faq__t + p{margin-top:.8em}
.faq__t{border-collapse:collapse;font-size:13.5px;color:var(--ink-soft);width:100%;max-width:440px}
.faq__t th,.faq__t td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.faq__t th{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
@media(max-width:560px){.faq__a{padding-left:0}}

/* FAQ, second approach: the number sits small above each question, so the
   question and its answer share one left edge; on wide screens the heading
   stands in its own column beside the list */
.faq__i summary{grid-template-columns:1fr 18px;grid-template-areas:"n x" "q x";gap:6px 16px;align-items:start;padding:20px 0}
.faq__n{grid-area:n}
.faq__q{grid-area:q}
.faq__x{grid-area:x;align-self:center}
.faq__a{padding:0 34px 24px 0}
@media(max-width:560px){.faq__a{padding-right:0}}
@media(min-width:960px){
  .faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(40px,6vw,110px);align-items:start}
  .faq .head__top{grid-column:1}
  .faq h2{grid-column:1;margin-top:14px}
  .faq__list{grid-column:2;grid-row:1 / span 3;margin-top:0}
}
/* FAQ answers justified, both edges straight */
.faq__a p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* justified FAQ: more words per line and word breaks allowed, so the gaps stay small */
.faq__a p{letter-spacing:0;word-spacing:-.02em;overflow-wrap:break-word;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:6 3 3}
@media(max-width:560px){.faq__a p{font-size:14px;line-height:1.7}}
/* FAQ: room on both sides of the answers */
.faq__a{padding:0 clamp(16px,4vw,48px) 24px}
.faq__i summary{padding-left:0;padding-right:0}
@media(max-width:560px){.faq__a{padding:0 14px 22px}}
/* FAQ: whole words only, no breaking across lines */
.faq__a p{hyphens:manual;-webkit-hyphens:manual}
/* About: justified paragraphs, whole words only */
.ab-who .body,.ab-page .head .body,.ab-page .princ__cell p{text-align:justify;hyphens:manual;-webkit-hyphens:manual;word-spacing:-.02em}
/* Even justification lines (assets/js/justify.js) */
.ej{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
.ej--last{text-align-last:auto}
.ej-m{position:absolute;visibility:hidden;white-space:pre;word-spacing:0}
/* Founder quote smaller */
.ab-open__say{font-size:clamp(17px,1.45vw,21px);line-height:1.45;max-width:36ch}
/* Justified running text across the site (assets/js/justify.js evens the gaps) */
p.body,p.lede,p.pull,.ed__body p,.princ__cell p,.faq__a p,.filters__note,.jn-intro p,.jn-note__txt p:not(.jn-sign),.jn-life p,.jn-apply>p:not(.jn-mail),.form__foot p{text-align:justify;hyphens:manual;-webkit-hyphens:manual}
/* lines never widen their container: zero intrinsic width, full used width */
.ej{width:0;min-width:100%}
/* About: studio photographs drift and push in on scroll (script in about.html) */
.ab-who__row .shot{translate:0 var(--dy,0);will-change:translate}
.ab-who__row .shot img{scale:var(--z,1);transform-origin:50% 50%}
/* Join Us: "A place to think, create and grow" beside the library photograph,
   no wider than 640px so it is never enlarged past its own 1280px */
.jn-introrow{display:grid;gap:clamp(28px,4vh,40px)}
.jn-hero img{height:auto;object-fit:initial;aspect-ratio:1280 / 854}
@media(min-width:900px){
  .jn-introrow{grid-template-columns:minmax(0,1fr) minmax(0,min(50%,640px));align-items:center;gap:clamp(40px,5vw,80px)}
  .jn-introrow .jn-intro{max-width:none}
}
/* About and Join Us: paragraph lines rise in one after another (justify.js) */
.ej-lines .ej{opacity:0;transform:translateY(.7em);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc((var(--i, 0) + var(--o, 0)) * 70ms)}
.ej-lines.ej-in .ej{opacity:1;transform:none}
/* with the big photograph gone from under it, the heading leads straight into the opening text */
.jn-mast + .sec.jn{padding-top:clamp(12px,2.5vh,32px)}
/* the website credit links out to the studio that built it */
.foot__bottom span a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}