/* Alexandra Peck Design: site styles.
   The layout system follows _source/design-spec.md measurement for measurement;
   the palette is strictly black, white and neutral greys (R=G=B). Written for this site, organised by component. */

/* ==================================================================================================== tokens */
:root{
  --bg:#FFFFFF;--bg-2:#F4F4F4;--ink:#0A0A0A;--ink-2:#3A3A3A;--muted:#6E6E6E;
  --rule:rgba(10,10,10,.28);--rule-2:rgba(10,10,10,.28);
  --inv-bg:#0A0A0A;--inv-ink:#FFFFFF;--inv-muted:#8C8C8C;--inv-rule:rgba(255,255,255,.22);
  --pagebg:var(--bg);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Montserrat Fallback","Helvetica Neue",Arial,sans-serif;
  --fv:"SOFT" 50,"WONK" 0;--fv-d:"opsz" 144,"SOFT" 50,"WONK" 0;
  --g:clamp(16px,2.5vw,36px);--ease:cubic-bezier(.25,.6,.2,1);
  --hdr:68px;--mw:min(420px,100vw);
  color-scheme:only light
}
@media (min-width:768px){:root{--hdr:84px}}
@media (max-width:560px){:root{--hdr:64px;--mw:100vw}}

/* Arial resized to Montserrat's caps width and vertical metrics, so labels keep their width while the face loads */
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("ArialMT"),local("Arimo");font-weight:100 500;size-adjust:105%;ascent-override:92.2%;descent-override:23.9%;line-gap-override:0%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold");font-weight:600 900;size-adjust:105.5%;ascent-override:91.75%;descent-override:23.8%;line-gap-override:0%}

/* ==================================================================================================== base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--pagebg);scrollbar-gutter:stable;scroll-padding-top:calc(var(--hdr) + 16px);scrollbar-color:rgba(10,10,10,.38) transparent;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--pagebg);color:var(--ink-2);font:400 20px/1.6 var(--serif);font-optical-sizing:auto;font-variation-settings:var(--fv);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;overflow-x:hidden}
body.is-home{--pagebg:var(--bg)}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--ink);margin:0;line-height:1.2;letter-spacing:-.01em}
h1,h2,h3,.pnext__t,.stmt__t{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
address{font-style:normal}
button{font:inherit;color:inherit}
strong,b{font-weight:500}
a,button,summary,label,select{-webkit-tap-highlight-color:transparent}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important}
::selection{background:var(--muted);color:var(--bg)}
:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--ink);color:var(--bg);font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:12px 18px}
.skip:focus{left:var(--g)}
main:focus,main:focus-visible{outline:none}
.wrap{width:100%;padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}

/* small labels */
.caps{font:500 12px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.caps a,a.caps{color:var(--muted);transition:opacity .3s}
.caps a:hover,a.caps:hover{opacity:.65}
.tagrow{display:flex;flex-wrap:wrap;gap:4px 0;margin:0}
.tagrow--acc{color:var(--muted)}
.tagrow span:not(:last-child)::after{content:"\00B7";padding:0 .85em;color:var(--muted)}

/* arrows */
.arw{width:22px;height:12px;transition:transform .35s var(--ease)}
.arw--ext{width:16px;height:9px;transform:rotate(-45deg)}

/* the house link: lowercase Fraunces italic with a fine underline that firms up */
.lnk{display:inline-block;font:italic 400 clamp(18px,1.35vw,20px)/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(10,10,10,.38);transition:text-decoration-color .35s var(--ease)}
.lnk:hover,.lnk:focus-visible{text-decoration-color:currentColor}
.lnk .arw--ext{display:inline-block;vertical-align:.1em;margin-left:.45em}
.lnk:hover .arw--ext{transform:rotate(-45deg) translateX(4px)}

/* display type at the top of the optical range */
.phead__h,.pintro__h,.sec-top__h,.tm__h,.stmt__t,.menu__nav a,.ct__big,.form__done-h,.qb blockquote p,.lt p{font-variation-settings:var(--fv-d)}

/* ==================================================================================================== header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right));color:var(--ink);transition:color .5s var(--ease),background-color .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0 0 -72px;background:linear-gradient(rgba(10,10,10,.44),rgba(10,10,10,.3) 32%,rgba(10,10,10,.13) 62%,rgba(10,10,10,.04) 86%,rgba(10,10,10,0));opacity:0;transition:opacity .5s var(--ease),right .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:-1}
.hdr__logo{display:block;line-height:0}
/* The APD mark is wide (707.9 x 462, ~2.7x PL's tall mark at equal height), so every mark runs at ~0.75x PL's height:
   header 36/28/27 (PL 48/38/36), menu 28 (38), intro 44-58 (58-78), statement 33/30 (44/40), section mark 14 (18),
   footer 21 (28), viewer loader 20 (26). Same optical weight, same positions. */
.hdr__mono{height:28px;width:auto}
.hdr__nav{display:none}
.hdr__nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(28px,3vw,52px)}
.hdr__nav a{display:block;padding:12px 0;font:500 14px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:inherit;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 5px)/0 1px no-repeat;transition:background-size .6s var(--ease),opacity .35s var(--ease)}
.hdr__nav li:last-child a{margin-right:-.15em}
.hdr__nav a[aria-current],.hdr__nav a.is-sec{background-size:calc(100% - .15em) 1px}
.hdr__nav a:focus-visible{outline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .hdr__nav a:hover{background-size:calc(100% - .15em) 1px}
  .hdr__nav ul:has(a:hover) a:not(:hover){opacity:.6}
}
.hdr__menu{background:none;border:0;padding:16px 0 16px 24px;margin-right:-.2em;cursor:pointer;color:inherit;font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;display:grid;justify-items:end}
.hdr__menu>span{grid-area:1/1;transition:opacity .4s var(--ease),visibility .4s}
.hdr__close,.menu-open .hdr__open{display:block;opacity:0;visibility:hidden}
.menu-open .hdr__close{display:block;opacity:1;visibility:visible}
.hdr__menu:focus-visible,.hdr__logo:focus-visible{outline-offset:6px}
@media (hover:hover) and (pointer:fine){.hdr__menu{transition:opacity .3s}.hdr__menu:hover{opacity:.7}}
/* over a full-screen photograph: white type, a deep top shade and a soft halo */
.has-hero .hdr:not(.is-past){color:#fff}
.has-hero .hdr:not(.is-past)::before{opacity:1}
.has-hero .hdr:not(.is-past) .hdr__nav a{text-shadow:0 0 2px rgba(10,10,10,.22),0 1px 16px rgba(10,10,10,.42)}
/* solid once past the hero (or 8px down on plain pages) */
.hdr.is-past{background:var(--pagebg);box-shadow:0 1px 0 rgba(10,10,10,.12)}
.hdr.is-past .hdr__nav a{color:var(--ink)}
/* while the menu panel is open: Close sits on the black panel, the shade stops at its edge */
.menu-open .hdr__menu{color:var(--inv-ink);position:relative;z-index:1}
.menu-open .hdr::before{right:var(--mw)}
.menu-open .hdr.is-past{background:linear-gradient(to left,transparent var(--mw),var(--pagebg) var(--mw));box-shadow:none}
@media (min-width:768px){
  .hdr__mono{height:36px}
  .hdr__nav{display:block}
  .hdr__menu,.menu,.menu__scrim{display:none}
}
@media (min-width:1440px){.hdr__nav a{font-size:15px}}
@media (max-width:560px){
  .hdr__mono{height:27px}
  .menu-open .hdr,.menu-open .has-hero .hdr:not(.is-past){color:var(--inv-ink)}
  .menu-open .hdr::before,.menu-open .has-hero .hdr:not(.is-past)::before{opacity:0}
}
@media (prefers-reduced-motion:reduce){.hdr__menu>span,.hdr__nav a{transition:none}}

/* ==================================================================================================== menu panel */
.menu{--muted:var(--inv-muted);--rule:var(--inv-rule);position:fixed;inset:0 0 0 auto;width:var(--mw);height:100%;z-index:55;display:block;padding:0;background:var(--inv-bg);color:var(--inv-ink);box-shadow:-1px 0 0 rgba(0,0,0,.14),-22px 0 44px -26px rgba(0,0,0,.4);opacity:1;visibility:hidden;transform:translateX(100%);transition:transform .55s cubic-bezier(.6,0,.25,1),visibility 0s linear .55s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .menu{visibility:visible;transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s}
.menu__scrim{position:fixed;inset:0;z-index:54;display:none;background:transparent}
.menu-open .menu__scrim{display:block}
.menu__in{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:104px max(40px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) 40px}
.menu__mono{position:absolute;top:calc((var(--hdr) - 28px) / 2);left:40px;height:28px;width:auto;color:var(--inv-ink)}
.menu__nav ul{list-style:none;margin:0;padding:0}
.menu__nav li{margin:0 0 8px;opacity:0;transform:translateX(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.menu-open .menu__nav li{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(.07s * var(--i) + .2s)}
.menu__nav a{display:inline-block;font:italic 300 40px/1.2 var(--serif);letter-spacing:-.015em;color:var(--inv-ink);font-variation-settings:var(--fv-d);transition:opacity .45s var(--ease)}
.menu__nav a[aria-current],.menu__nav a.is-sec{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(255,255,255,.45)}
.menu__nav a:focus-visible{outline-offset:8px}
@media (hover:hover){.menu__nav ul:has(a:hover) a:not(:hover){opacity:.4}}
.menu__ad{border-top:1px solid var(--rule);padding-top:18px;margin-top:44px;opacity:0;transition:opacity .25s var(--ease)}
.menu-open .menu__ad{opacity:1;transition:opacity .8s var(--ease) .45s}
.menu__label{margin:0 0 16px;font-size:11px}
.menu__adrow{display:grid;grid-template-columns:1fr 112px;gap:22px;align-items:end}
.menu__links{margin:0}
.menu__links a{display:table;font:400 20px/1.6 var(--serif);color:var(--inv-ink);white-space:nowrap}
.menu__pic{margin:0}
.menu__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ph,rgba(255,255,255,.08))}
.menu__img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.menu__img img.is-in{opacity:1}
.menu__pic figcaption{margin-top:8px;line-height:1.25}
.menu__cap{font:italic 400 13px/1.3 var(--serif);color:var(--inv-ink)}
/* contact view inside the panel */
.menu__contact[hidden],.menu__main[hidden]{display:none}
.menu__contact{display:flex;flex-direction:column;animation:ap-mc-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes ap-mc-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.menu__back{align-self:flex-start;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--inv-muted);margin:0 0 26px;display:inline-flex;align-items:center;gap:10px}
.menu__back::before{content:"";width:16px;height:1px;background:currentColor}
.menu__h{font:300 40px/1.2 var(--serif);font-style:italic;color:var(--inv-ink);margin:0 0 22px}
.menu__ph{font:400 26px/1.3 var(--serif);color:var(--inv-ink);margin:0 0 26px}
.menu__k{font-size:11px;margin:0 0 6px}
.menu__em{font:400 min(21px,6.2vw)/1.35 var(--serif);color:var(--inv-ink);margin:0 0 24px;word-break:break-word}
.menu__ad2{font:400 18px/1.5 var(--serif);color:var(--inv-ink);margin:0 0 22px}
.menu__ad2 a,.menu__em a,.menu__ph a{transition:opacity .3s}
.menu__ad2 a:hover,.menu__em a:hover,.menu__ph a:hover{opacity:.6}
.menu__go{margin:8px 0 0}
.menu__go a{font:300 italic 24px/1.3 var(--serif);color:var(--inv-ink);border-bottom:1px solid currentColor;padding-bottom:3px}
@media (max-width:560px){
  .menu__mono{display:none}
  .menu__in{padding:92px max(24px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
  .menu__nav a{font-size:36px}
  .menu__links a{font-size:19px}
  .menu__adrow{grid-template-columns:1fr 104px}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-open .menu,.menu__nav li,.menu-open .menu__nav li,.menu__ad,.menu-open .menu__ad,.menu__img img{transition:none}
  .menu__nav li{transform:none}
  .menu__contact{animation:none}
}

/* ==================================================================================================== one hover language: a drawn hairline */
.sel__t a,.card__t a,.pnext__t,.ftr a,.menu__links a,.menu__cap{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease),opacity .3s}
.card__t a:focus-visible,.pnext__t:focus-visible{background-size:100% 1px}
@media (hover:hover) and (pointer:fine){
  .sel:hover .sel__t a,.card:hover .card__t a,.pnext__t:hover,.ftr a:hover,.menu__links a:hover,.menu__cap:hover{background-size:100% 1px}
  .pnext:has(.pnext__img:hover) .pnext__t{background-size:100% 1px}
}

/* ==================================================================================================== first-visit intro (home) */
.intro{display:none}
.ap-intro .intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,2.2vw,28px);background:var(--inv-bg);color:var(--inv-ink);animation:ap-intro-out .45s cubic-bezier(.4,0,.2,1) .9s both}
.intro__mono{height:clamp(44px,4.5vw,58px);width:auto;animation:ap-intro-mono .62s cubic-bezier(.2,.6,.2,1) .05s both}
.intro__line{display:block;width:clamp(56px,5vw,72px);height:1px;background:currentColor;opacity:.55;animation:ap-intro-line .5s var(--ease) .4s both}
@keyframes ap-intro-mono{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ap-intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ap-intro-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:no-preference){.ap-intro .hero__bar{animation-delay:1.15s}}
@media (prefers-reduced-motion:reduce){.ap-intro .intro{display:none}}

/* ==================================================================================================== home hero slideshow */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ph,var(--ink))}
.hero__stage{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s var(--ease);background:var(--lq,none) 50% 50%/cover no-repeat}
.hero__slide.is-on{opacity:1;z-index:2}
.hero__slide.is-prev{opacity:1;z-index:1;transition:none}
.hero__slide picture,.hero__slide img{width:100%;height:100%}
.hero__slide img{object-fit:cover}
@media (prefers-reduced-motion:no-preference){.hero__slide.is-on img,.hero__slide.is-prev img{animation:ap-settle 8s cubic-bezier(.22,.55,.3,1) both}}
@keyframes ap-settle{from{transform:scale(1.04)}to{transform:none}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(38%,340px);z-index:3;pointer-events:none;background:linear-gradient(rgba(10,10,10,0),rgba(10,10,10,.14) 45%,rgba(10,10,10,.42))}
.hero__bar{position:absolute;z-index:4;left:max(var(--g),env(safe-area-inset-left));right:max(var(--g),env(safe-area-inset-right));bottom:calc(clamp(22px,4.2vh,42px) + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#fff;text-shadow:0 1px 18px rgba(10,10,10,.35)}
.hero__caps{display:grid;min-width:0}
.hero__cap{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s linear .7s}
.hero__cap.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 1.2s var(--ease) .55s,transform 1.4s var(--ease) .55s,visibility 0s}
.hero__t{font:italic 300 clamp(20px,1.8vw,27px)/1.2 var(--serif);letter-spacing:-.004em}
a.hero__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:rgba(255,255,255,0);transition:text-decoration-color .4s var(--ease)}
a.hero__t:hover,a.hero__t:focus-visible{text-decoration-color:rgba(255,255,255,.75)}
/* keyboard-only pause control (like the skip link): invisible until focused, then a small caps label at the bar's right */
.hero__pause{position:absolute;right:0;bottom:0;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;background:none;color:#fff;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.hero__pause:focus{width:auto;height:auto;overflow:visible;clip-path:none;padding:6px 0}
@media (max-width:760px){.hero__pause{bottom:100%;margin-bottom:14px}}
.hero__p,.hero__k{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){.hero__bar{animation:ap-up 1.2s var(--ease) .7s both}}
@keyframes ap-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__slide,.hero__cap,.hero__cap.is-on{transition:none}}

/* ==================================================================================================== page / project hero */
.phero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--lq,none) 50% 50%/cover no-repeat,var(--ph,var(--ink))}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .phero img{transform:scale(1.035);transition:transform 2.8s cubic-bezier(.2,.6,.2,1)}
.js .phero.is-in img{transform:none}
.phero--studio::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(rgba(10,10,10,0),rgba(10,10,10,.42));pointer-events:none}
.phero__cap{position:absolute;z-index:2;left:var(--g);bottom:clamp(22px,4vh,40px);margin:0;display:flex;flex-direction:column;gap:4px;color:#fff;text-shadow:0 1px 14px rgba(10,10,10,.35)}
.phero__cap-t{font:300 italic clamp(24px,2.2vw,32px)/1.2 var(--serif)}
.phero__cap-p{font:500 11.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.js .phero img{transform:none;transition:none}}

/* ==================================================================================================== home statement */
.stmt{padding:clamp(110px,12vw,190px) 0 0}
.stmt__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.stmt__mono{height:33px;width:auto;color:var(--ink);margin:0 0 clamp(30px,3vw,44px)}
.stmt__t{font:italic 300 clamp(30px,3.5vw,52px)/1.16 var(--serif);letter-spacing:-.015em;color:var(--ink);font-variation-settings:var(--fv-d);max-width:24ch;margin:0;text-wrap:balance}
.stmt__l{margin:clamp(22px,2.2vw,32px) 0 0}
.stmt__l span{white-space:nowrap}
.stmt__l span+span::before{content:"\00B7";padding:0 .85em}
.stmt__n{font:300 clamp(20px,1.7vw,24px)/1.5 var(--serif);color:var(--ink);max-width:36ch;margin:clamp(30px,3vw,44px) 0 0;text-wrap:balance}
.stmt__a{margin:14px 0 0}
@media (max-width:480px){.stmt__l span{display:block}.stmt__l span+span{margin-top:6px}.stmt__l span+span::before{content:none}}

/* ==================================================================================================== section openings */
.sec-top{border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px);margin-bottom:clamp(44px,4.4vw,68px)}
.sec-top__k{display:flex;align-items:baseline;gap:1.5em;margin:0 0 clamp(28px,3.2vw,48px)}
.sec-top__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 48px}
.sec-top__h{font:italic 300 clamp(38px,4.4vw,64px)/1.08 var(--serif);letter-spacing:-.018em;font-variation-settings:var(--fv-d);max-width:28ch}
.sec-top .lnk{white-space:nowrap}
.sec-top__s{font:300 clamp(19px,1.5vw,22px)/1.55 var(--serif);color:var(--ink);max-width:760px;margin:clamp(18px,1.8vw,26px) 0 0}
.faq-sec .sec-top{margin-bottom:clamp(34px,3.4vw,52px)}
.svcs>.wrap>.sec-top{margin-bottom:clamp(60px,6vw,96px)}

/* ==================================================================================================== page openings */
.phead{padding-top:calc(var(--hdr) + clamp(28px,4vw,56px))}
.phead__in{border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px);margin-bottom:clamp(50px,6vw,90px)}
.phead__label{margin:0 0 clamp(26px,3vw,44px)}
.phead__h,.pintro__h{font:300 clamp(46px,5.2vw,80px)/1.04 var(--serif);letter-spacing:-.022em;font-variation-settings:var(--fv-d)}
.phead__h{margin:0}
.phead__lede{font:300 clamp(22px,1.9vw,26px)/1.42 var(--serif);color:var(--ink);max-width:920px;margin:0 0 clamp(50px,6vw,90px)}

/* ==================================================================================================== selected work (wide rows) */
.selected{padding:clamp(100px,11vw,170px) 0 60px}
.selected--area{padding-top:30px}
.sel{margin-bottom:45px}
.sel__img{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.sel__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.sel:hover .sel__img img{transform:scale(1.015)}
.js .sel.rv .sel__cap{opacity:0;transition:opacity 1s var(--ease) .22s}
.js .sel.rv.in .sel__cap{opacity:1}

/* captions: the name in Fraunces italic, the place in small caps beneath */
.pcap{margin-top:16px}
.pcap__t,.card__t{font:italic 350 clamp(23px,2.1vw,31px)/1.2 var(--serif);letter-spacing:-.006em;color:var(--ink);margin:0}
.pcap .pcap__p{margin:8px 0 0;font-size:11.5px}

/* ==================================================================================================== cards and grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:80px 22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 22px}
.card{margin:0}
.card__img{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.card:hover .card__img img{transform:scale(1.02)}
.card--team .card__img img{object-position:50% 22%}
.card--team:hover .card__img img{transform:none}
.card__img--mark{display:grid;place-items:center;color:var(--muted)}
.card__mono{height:33px;width:auto}
.card__p{font-size:19px;line-height:1.5;max-width:600px;margin:4px 0 14px;hanging-punctuation:first}
.card__line{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--ink-2);max-width:470px;margin:12px 0 0}
.card--press .tagrow{margin-top:16px}
.card--press .tagrow span:first-child{color:var(--ink)}
.card--press .card__t{margin:8px 0 12px;line-height:1.25}
.card__more{margin:0}
.duo{padding:140px 0 120px}
.team{margin-bottom:140px}
.press{padding-bottom:clamp(100px,9vw,140px)}
@media (hover:none){.card:hover .card__img img,.sel:hover .sel__img img{transform:none}}

/* ==================================================================================================== portfolio: filter bar + grid */
.pf{display:none}
.js .pf{display:block;position:sticky;top:var(--hdr);z-index:20;background:var(--pagebg);margin:0 0 clamp(40px,4.4vw,64px)}
.pf__in{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 44px;padding-top:16px;padding-bottom:16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pf__k{margin:0;color:var(--muted)}
.pf__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 34px}
.pf__b{border:0;border-radius:0;padding:6px 0 7px;cursor:pointer;font:500 13px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease),color .35s}
.pf__b:hover{color:var(--ink)}
.pf__b[aria-pressed="true"]{color:var(--ink);background-size:100% 1px}
.pf__b:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.port{padding-bottom:120px;transition:opacity .26s var(--ease)}
.port.is-switching{opacity:0}
.port .card[hidden]{display:none!important}
.port__note p{font-size:20px;max-width:820px;color:var(--muted);padding-bottom:110px;margin:0}
@media (prefers-reduced-motion:reduce){.port,.pf__b{transition:none}}

/* ==================================================================================================== project page: intro, facts, rooms */
.pintro{padding-top:60px;padding-bottom:110px}
.pintro__h{margin:20px 0 30px}
.pintro__d{font:300 clamp(22px,2.2vw,32px)/1.38 var(--serif);color:var(--ink-2);max-width:1240px;margin:0 0 70px;hanging-punctuation:first}
.pintro__d:last-child{margin-bottom:0}
@media (min-width:1000px){.pintro:has(.pinfo) .pintro__d{font-weight:300}}
.pinfo{interpolate-size:allow-keywords}
.pinfo summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:14px;font:italic 300 clamp(22px,2vw,28px)/1.3 var(--serif);color:var(--ink)}
.pinfo summary::-webkit-details-marker{display:none}
.pinfo summary::after{content:"+";font-weight:300;transition:transform .5s var(--ease)}
.pinfo[open] summary::after{transform:rotate(45deg)}
.pinfo summary:focus-visible{outline-offset:8px}
/* each ::details-content rule stands alone, so a browser without it drops only that rule and opens instantly */
.pinfo::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .7s var(--ease),opacity .6s var(--ease),content-visibility .7s allow-discrete}
.pinfo[open]::details-content{block-size:auto;opacity:1}
.pinfo dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 30px;margin:0;padding-top:34px;max-width:1240px}
.pinfo dl.pinfo__dl--team{grid-template-columns:repeat(3,minmax(0,1fr))}
.pinfo dl>div{border-top:1px solid var(--rule);padding-top:16px}
.pinfo dt{font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pinfo dd{margin:0;font-size:19px;line-height:1.45;overflow-wrap:break-word}
.pinfo dd a{text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule);text-underline-offset:.28em;transition:text-decoration-color .3s}
.pinfo dd a:hover{text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){.pinfo::details-content{transition:none}}
.rooms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:10px 30px;max-width:1240px;margin-top:clamp(36px,3.6vw,52px);border-top:1px solid var(--rule);padding-top:16px}
.rooms__k{margin:0;font-size:11.5px;padding-top:.3em}
.rooms__l{list-style:none;margin:0;padding:0;font:italic 350 clamp(17px,1.3vw,19px)/1.75 var(--serif);color:var(--ink);text-wrap:pretty}
.rooms__l li{display:inline;white-space:nowrap}
.rooms__l li:not(:last-child)::after{content:"\00B7";color:var(--muted);font-style:normal;margin:0 .32em 0 .6em}
.rooms__l a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.rooms__l a:focus-visible{background-size:100% 1px;outline-offset:4px}
@media (hover:hover) and (pointer:fine){.rooms__l a:hover{background-size:100% 1px}}

/* ==================================================================================================== project gallery */
.gal{display:grid;gap:115px;padding-bottom:clamp(80px,8vw,116px)}
.gal [id^="room-"]{scroll-margin-top:clamp(14px,3vh,36px)}
.shot{margin:0;display:flex;justify-content:center;gap:22px}
.shot__a{display:block;cursor:zoom-in;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.shot__a img{width:100%;height:100%;object-fit:cover}
.shot--full .shot__a{width:100%;aspect-ratio:16/9}
.shot--mid .shot__a{width:74%;aspect-ratio:16/9}
.shot--single .shot__a,.shot--pair .shot__a{width:calc(50% - 11px);aspect-ratio:3/4}
.shot__a:focus-visible{outline-color:var(--ink);outline-offset:8px}
.js .shot.rv .shot__a img,.js .port .card.rv .card__img img{transform:scale(1.035);transition:opacity 1s var(--ease),transform 2s var(--ease)}
.js .shot.rv.in .shot__a img,.js .port .card.rv.in .card__img img{transform:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .shot__a:hover img,.js .shot.rv.in .shot__a:hover img{transform:scale(1.015)}
  .js .port .card.rv.in:hover .card__img img{transform:scale(1.02)}
}
@media (prefers-reduced-motion:reduce){.js .shot.rv .shot__a img,.js .port .card.rv .card__img img{transform:none;transition:none}}

/* video frames (APD addition, same frames as the gallery): muted loops that play while in view */
.vid__f{position:relative;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.vid__f video{width:100%;height:100%;object-fit:cover}
.shot--full .vid__f{width:100%;aspect-ratio:16/9}
.shot--mid .vid__f{width:74%;aspect-ratio:16/9}
.shot--single .vid__f,.shot--pair .vid__f{width:calc(50% - 11px);aspect-ratio:3/4}
.vid__btn{position:absolute;right:14px;bottom:12px;z-index:2;background:none;border:0;padding:8px 0 8px 12px;cursor:pointer;color:#fff;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 14px rgba(10,10,10,.45);opacity:.85;transition:opacity .3s}
.vid__btn:hover{opacity:1}
.vid__btn:focus-visible{outline-offset:4px}
.tm__img .vid__f{aspect-ratio:3/4}
.vid__cap{margin:14px 0 0;font:italic 350 clamp(17px,1.3vw,19px)/1.4 var(--serif);color:var(--ink)}
.shot.vid{flex-wrap:wrap}
.shot.vid .vid__cap{flex-basis:100%;text-align:center}
.vids{padding-bottom:clamp(80px,8vw,116px)}
.vids .shot+.shot{margin-top:115px}
/* gallery room notes and pull quotes (APD addition: her room-by-room write-ups inside PL's gallery rhythm).
   A note sits in the mid column (74%, the width of a "mid" frame): hairline, caps room label left, light serif right. */
.gnote{width:74%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:0 clamp(28px,3vw,48px);border-top:1px solid var(--rule);padding-top:22px}
.gnote__k{margin:7px 0 0;font-weight:inherit}
.gnote--label{display:block;padding-top:20px}.gnote--label .gnote__k{margin:0}
/* a label-only note belongs to the photographs below it: halve the gallery gap after it */
.gnote--label{margin-bottom:-58px}
@media (max-width:760px){.gnote--label{margin-bottom:-22px}}
.gnote__t p{font:300 clamp(19px,1.55vw,22px)/1.6 var(--serif);color:var(--ink-2);margin:0 0 .9em;font-variation-settings:var(--fv-d);hanging-punctuation:first}
.gnote__t p:last-child{margin-bottom:0}
.gnote__t a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.gnote__t a:hover{text-decoration-color:currentColor}
.gq blockquote{margin:0 auto;max-width:1060px;text-align:center}
.gq blockquote::before{content:"";display:block;width:1px;height:64px;margin:0 auto 40px;background:var(--muted);transform-origin:50% 0;transition:transform 1.4s var(--ease) .3s}
.gq.rv:not(.in) blockquote::before{transform:scaleY(0)}
.gq blockquote p{font:300 italic clamp(26px,2.6vw,38px)/1.3 var(--serif);font-variation-settings:var(--fv-d);color:var(--ink);margin:0 0 22px;text-wrap:balance;quotes:"\201C" "\201D"}
.gq blockquote p::before{content:open-quote}
.gq blockquote p::after{content:close-quote}
.gq blockquote footer{font-size:12px;text-wrap:balance}
@media (max-width:1100px){.gnote{width:100%}}
@media (max-width:760px){.gnote{grid-template-columns:1fr;gap:14px 0;padding-top:18px}.gnote__k{margin:0}}
@media (prefers-reduced-motion:reduce){.gq blockquote::before{transition:none}}

/* ==================================================================================================== details strip, section mark, next project */
.det{padding-bottom:clamp(80px,8vw,116px)}
.det__top{border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px);margin-bottom:clamp(26px,2.6vw,38px)}
.det__k{margin:0}
.det__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.det__i{aspect-ratio:1/1;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.det__i img{width:100%;height:100%;object-fit:cover}
.js .det__i img[loading="lazy"]{opacity:0;transform:scale(1.035);transition:opacity 1s var(--ease),transform 2s var(--ease)}
.js .det__i img.is-in{opacity:1}
.js .det__i.rv.in img{transform:none}
@media (prefers-reduced-motion:reduce){.js .det__i img[loading="lazy"]{transform:none;transition:none}}
.smark{display:flex;justify-content:center;color:var(--muted);padding-bottom:clamp(80px,8vw,116px)}
.smark__mono{height:14px;width:auto}
.smark+.inq{padding-top:0}
.pnext{padding-bottom:140px}
.pnext .caps{margin:0}
.pnext__top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:30px;border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px)}
.pnext__img{display:block;aspect-ratio:21/9;overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.pnext__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.js .pnext__img img[loading="lazy"]{opacity:0;transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.js .pnext__img img.is-in{opacity:1}
@media (hover:hover) and (pointer:fine){.pnext__img:hover img,.pnext:has(.pnext__t:hover) .pnext__img img{transform:scale(1.015)}}
.pnext__t{display:inline-block;font-size:clamp(26px,2.6vw,38px);line-height:1.15}
.pnext__cap{margin-top:18px}
@media (prefers-reduced-motion:reduce){.js .pnext__img img[loading="lazy"]{transition:none}}

/* ==================================================================================================== text and photograph pairs (about, services, process) */
.media{margin-bottom:115px;background:var(--ph,transparent) content-box}
.media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lt p{font:300 clamp(26px,2.5vw,36px)/1.32 var(--serif);letter-spacing:-.01em;color:var(--ink);max-width:1240px;margin:0 0 110px;font-variation-settings:var(--fv-d)}
.tm{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(40px,6vw,110px);align-items:center;margin-bottom:115px}
.tm--rev .tm__img{order:2}
.tm__img{overflow:hidden;background:var(--ph,rgba(10,10,10,.08))}
.tm__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* graphics on white (concept boards, plans): mounted on the secondary surface */
.tm__img--board{background:var(--bg-2)}
.tm__img--board img{mix-blend-mode:multiply}
.js .tm__img.rv img{transform:scale(1.04);transition:opacity 1s var(--ease),transform 2.2s var(--ease)}
.js .tm__img.rv.in img{transform:none}
.tm__txt{max-width:620px}
.tm__txt .caps{margin:0 0 14px}
.tm__h{font-size:clamp(34px,3.4vw,50px);line-height:1.08;letter-spacing:-.018em;margin:0 0 24px}
.tm__txt p:not(.caps){font-size:clamp(18px,1.5vw,21px);line-height:1.65;hanging-punctuation:first}
.tm__go{margin:8px 0 0}
.tm--svc{scroll-margin-top:calc(var(--hdr) + 16px)}
.tm--copy .tm__txt ul{list-style:none;padding:0;margin:4px 0 1em}
.tm--copy .tm__txt ul li{border-top:1px solid var(--rule);padding:12px 0;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.tm--copy .tm__txt ul li:last-child{border-bottom:1px solid var(--rule)}
.tm--copy .tm__txt a,.faq__a a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.tm--copy .tm__txt a:hover,.faq__a a:hover{text-decoration-color:currentColor}
.tm__addr{font-size:clamp(18px,1.5vw,21px);line-height:1.6;margin:0 0 1em}
.tm__addr a{transition:opacity .3s}
.tm__addr a:hover{opacity:.6}
.tm__addr .lnk:hover{opacity:1}
@media (min-width:761px){.tm--bio{align-items:start}.tm--bio .tm__img{position:sticky;top:calc(var(--hdr) + 32px)}}
@media (prefers-reduced-motion:reduce){.js .tm__img.rv img{transform:none;transition:none}}

/* pull quote */
.qb{padding:clamp(30px,4vw,60px) var(--g) clamp(120px,11vw,170px)}
.qb.wrap{padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}
.qb blockquote{margin:0 auto;max-width:1160px;text-align:center}
.qb blockquote::before{content:"";display:block;width:1px;height:64px;margin:0 auto 44px;background:var(--muted);transform-origin:50% 0;transition:transform 1.4s var(--ease) .3s}
.js .qb.rv:not(.in) blockquote::before{transform:scaleY(0)}
.qb blockquote p{font:400 italic clamp(28px,3vw,44px)/1.3 var(--serif);font-weight:300;font-variation-settings:var(--fv-d);color:var(--ink);margin:0 0 22px;text-wrap:balance;quotes:"\201C" "\201D"}
.qb blockquote p::before{content:open-quote}
.qb blockquote p::after{content:close-quote}
.qb blockquote footer{font-size:12px;text-wrap:balance}
/* several quotes in one section (About's testimonials): each blockquote reveals, and draws its hairline, on its own */
.js .qb blockquote.rv:not(.in)::before{transform:scaleY(0)}
.qb--many blockquote+blockquote{margin-top:clamp(64px,6.5vw,96px)}
@media (prefers-reduced-motion:reduce){.qb blockquote::before{transition:none}}

/* ==================================================================================================== process: hairline columns, services, anywhere */
.proc{padding-bottom:clamp(110px,10vw,150px)}
.mng--home{padding-top:clamp(70px,8vw,120px);padding-bottom:clamp(40px,5vw,80px)}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(26px,3vw,48px)}
.stage{border-top:1px solid var(--rule);padding-top:20px}
.stage__h{font:400 clamp(22px,1.9vw,27px)/1.25 var(--serif);margin:0 0 12px}
.stage p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;margin:0}
.tm__txt p.svc__tag{font:italic 300 clamp(20px,1.6vw,24px)/1.45 var(--serif);color:var(--ink);margin:0 0 26px}
.svc__dl{margin:0}
.svc__dl div{border-top:1px solid var(--rule);padding:16px 0 18px}
.svc__dl div:last-child{border-bottom:1px solid var(--rule)}
.svc__dl dt{margin:0 0 6px;font-size:11.5px}
.svc__dl dd{margin:0;font-size:clamp(17px,1.35vw,19px);line-height:1.6}
.svc-light{padding-bottom:clamp(90px,9vw,140px)}
.svc-light .stage__h{border-top:1px solid var(--rule);padding-top:20px;max-width:820px}
.svc-light p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:820px;margin:0}
.anyw{padding-top:clamp(20px,3vw,50px)}
.anyw__pair{margin-bottom:clamp(70px,7vw,110px)}
.tm__txt p.anyw__lead{font:300 clamp(22px,2vw,29px)/1.45 var(--serif);color:var(--ink);margin:0}
.stages--any{margin-bottom:clamp(90px,9vw,130px)}
.anyw__close{font:italic 300 clamp(26px,2.8vw,40px)/1.25 var(--serif);font-variation-settings:var(--fv-d);letter-spacing:-.012em;color:var(--ink);text-align:center;max-width:30ch;margin:0 auto;text-wrap:balance}
@media (max-width:1100px){.stages{grid-template-columns:1fr 1fr}}

/* ==================================================================================================== inquire band */
.inq{padding:clamp(110px,11vw,160px) 0 clamp(100px,10vw,140px)}
.inq__in{max-width:980px}
.inq__p{font:300 clamp(22px,1.9vw,27px)/1.45 var(--serif);color:var(--ink);margin:0 0 30px}
.inq__links{display:flex;flex-wrap:wrap;gap:10px 40px;margin:0}

/* ==================================================================================================== contact */
.ct{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:start;padding-bottom:140px}
.ct__big{font:300 clamp(30px,3vw,44px)/1.25 var(--serif);font-variation-settings:var(--fv-d);color:var(--ink);margin:0 0 6px}
.ct__mid{font:300 clamp(22px,1.9vw,26px)/1.3 var(--serif);color:var(--ink);margin:0 0 26px}
.ct address{font-size:21px;line-height:1.5;margin-bottom:22px}
.ct__note{font-size:21px;line-height:1.5;margin:0 0 22px}
.ct__links{display:flex;flex-wrap:wrap;gap:8px 26px}
.ct__remote{font:300 clamp(21px,1.75vw,25px)/1.45 var(--serif);color:var(--ink);margin:0 0 clamp(36px,3.4vw,52px);text-wrap:pretty}
.form{display:grid;grid-template-columns:1fr 1fr;gap:40px 34px;align-content:start}
.form__f{position:relative}
.form__f--full{grid-column:1/-1}
.form label{display:block;font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;transition:color .4s}
.form input,.form select,.form textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:10px 0;font:400 21px/1.4 var(--serif);color:var(--ink-2);caret-color:var(--ink);-webkit-appearance:none;appearance:none}
.form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A'/%3E%3C/svg%3E") right 2px center no-repeat}
.form textarea{resize:vertical;min-height:130px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--rule)}
.form__f:not(.form__f--send)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);pointer-events:none}
.form__f:focus-within::after{transform:scaleX(1)}
.form__f:focus-within label,.form__f:has([aria-invalid="true"]) label{color:var(--ink)}
.form [aria-invalid="true"]{border-bottom-color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:var(--muted);opacity:1;font-style:italic}
.form select:has(option[value=""]:checked){color:var(--muted)}
.form option{color:var(--ink-2)}
.form input:-webkit-autofill,.form input:-webkit-autofill:hover,.form input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink-2);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 600000s 0s}
.form__hp{position:absolute;left:-9999px}
.form__send{display:inline-flex;align-items:center;background:transparent;color:var(--ink);border:1px solid rgba(10,10,10,.62);border-radius:0;padding:14px 40px 15px;cursor:pointer;font:italic 350 20px/1.3 var(--serif);font-variation-settings:"SOFT" 50,"WONK" 0;letter-spacing:0;text-transform:none;transition:background-color .45s var(--ease),border-color .45s var(--ease)}
.form__send:hover{background:var(--bg-2);border-color:var(--ink)}
.form__send:disabled{opacity:.6;cursor:progress}
.form__msg{font-size:18px;margin:14px 0 0;color:var(--ink);min-height:1.5em;font-style:italic}
.form__msg a{text-decoration:underline;text-underline-offset:.22em}
.form.is-sent .form__f{display:none}
.form__done{grid-column:1/-1;outline:none;animation:ap-up 1s var(--ease) both}
.form__done-h{font:300 italic clamp(34px,3.4vw,48px)/1.2 var(--serif);font-variation-settings:var(--fv-d);color:var(--ink);margin:0 0 14px}
.form__done-p{font-size:clamp(19px,1.5vw,21px);line-height:1.55;max-width:560px;margin:0 0 22px;color:var(--ink-2)}
.form__done-l{margin:0;color:var(--muted)}
.form__done-l a{color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease)}
.form__done-l a:hover{background-size:0 1px}
@media (prefers-reduced-motion:reduce){.form__f::after{transition:none}.form__done{animation:none}}

/* ==================================================================================================== questions */
.faq{max-width:1000px;padding-bottom:110px}
.faq__q{border-top:1px solid var(--rule);padding:26px 0}
.faq__q:last-child{border-bottom:1px solid var(--rule)}
.faq__q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font:350 clamp(22px,2vw,28px)/1.3 var(--serif);color:var(--ink);transition:color .3s}
.faq__q summary:hover{color:var(--muted)}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary span{text-wrap:balance}
.faq__q summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.42em;color:var(--muted);background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1px 100% no-repeat;transition:transform .55s var(--ease),background-size .55s var(--ease)}
.faq__q[open] summary::after{transform:rotate(180deg);background-size:100% 1px,1px 0}
.faq__q.is-closing summary::after{transform:none;background-size:100% 1px,1px 100%}
.faq__q summary:focus-visible{outline-offset:8px}
.faq__a{overflow:hidden}
.faq__a p{font-size:20px;line-height:1.65;margin:18px 0 0;max-width:820px;hanging-punctuation:first}
.faq__a ul,.faq__a ol{font-size:20px;line-height:1.65;margin:18px 0 0;max-width:820px;padding-left:1.1em}

/* ==================================================================================================== prose (journal posts) and 404 */
.prose{max-width:860px;padding-bottom:100px}
.prose p,.prose li{font-size:clamp(18px,1.5vw,21px);line-height:1.65}
.prose p{hanging-punctuation:first}
.prose h2{font-size:clamp(28px,2.6vw,36px);margin:1.5em 0 .5em}
.prose h3{font-size:24px;font-weight:400;line-height:1.25;margin:1.3em 0 .4em}
.prose ul,.prose ol{padding-left:1.1em}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:500}
.prose figure{margin:2em 0}
.prose figcaption{margin-top:12px;font:italic 350 17px/1.4 var(--serif);color:var(--muted)}
.nf{padding-top:calc(var(--hdr) + 120px);padding-bottom:140px;min-height:calc(100svh - 92px)}
.nf>.caps:first-child{display:block;border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px);margin-bottom:clamp(26px,3vw,44px)}
.nf .phead__h{margin:0 0 28px}
.nf .phead__lede{margin-bottom:44px}
.nf__links{display:flex;flex-wrap:wrap;gap:14px 44px}

/* ==================================================================================================== footer */
.ftr{border-top:1px solid var(--rule);background:var(--bg-2)}
.ftr__mark{display:flex;justify-content:center;padding:clamp(56px,6vw,84px) 0 clamp(20px,2.2vw,30px);color:var(--ink)}
.ftr__mono{height:21px;width:auto}
.ftr__in{min-height:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 30px;padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ftr p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.ftr__seo{display:inline-flex;flex-wrap:wrap;gap:8px 22px;margin-left:30px}
.ftr__tag{font:italic 300 15px/1.3 var(--serif);letter-spacing:0;text-transform:none}

/* ==================================================================================================== photograph viewer */
html.is-locked{overflow:hidden;scrollbar-gutter:stable}
.lb{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;overscroll-behavior:contain;touch-action:pinch-zoom}
.lb.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center}
.lb__img{grid-area:1/1;max-width:calc(100vw - 2 * var(--g));max-height:calc(100svh - 130px);width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .5s var(--ease) .25s,transform .9s var(--ease);cursor:pointer;-webkit-user-select:none;user-select:none}
.lb__img.is-on{z-index:1;opacity:1;transform:none;transition:opacity .55s var(--ease),transform .9s var(--ease)}
.lb--one .lb__img{cursor:zoom-out}
.lb__x,.lb__bar{z-index:2}
.lb__x{position:absolute;top:8px;right:max(var(--g),env(safe-area-inset-right))}
.lb__bar{position:absolute;left:max(var(--g),env(safe-area-inset-left));right:max(var(--g),env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:20px}
.lb button{background:none;border:0;cursor:pointer;min-height:44px;padding:0;display:inline-flex;align-items:center;gap:12px;color:var(--ink);transition:opacity .3s}
.lb__p .arw{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.lb button:hover{opacity:.6}.lb__n:hover .arw{transform:translateX(5px)}.lb__p:hover .arw{transform:scaleX(-1) translateX(5px)}}
.lb__c{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lb__cap{font:italic 350 18px/1.25 var(--serif);color:var(--ink);max-width:46vw;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-wrap:balance}
.lb__cap:empty,.lb__k:empty{display:none}
.lb__k{font-size:11px;font-weight:500;letter-spacing:.2em;font-variant-numeric:lining-nums tabular-nums}
.lb__p,.lb__n{font:italic 350 18px/1.25 var(--serif);letter-spacing:0;text-transform:lowercase}
.lb--one .lb__p,.lb--one .lb__n{visibility:hidden}
.lb :focus-visible{outline-offset:6px}
.lb__load{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;color:var(--muted);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.lb.is-loading .lb__load{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.lb__mono{height:20px;width:auto}
.lb.is-loading .lb__mono{animation:ap-pulse 1.6s ease-in-out infinite}
@keyframes ap-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.lb.is-loading .lb__img.is-on{opacity:0;transition:opacity .4s var(--ease)}
@media (max-width:760px){.lb__w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.lb button{min-width:44px;justify-content:center}.lb__cap{max-width:58vw;font-size:16px}}
@media (prefers-reduced-motion:reduce){
  .lb,.lb.is-open,.lb__img,.lb__img.is-on{transition-duration:.01s;transition-delay:0s}.lb__img{transform:none}
  .lb.is-loading .lb__mono{animation:none;opacity:.8}
  .lb__load,.lb.is-loading .lb__load,.lb.is-loading .lb__img.is-on{transition:none}
}

/* ==================================================================================================== toast */
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:95;margin:0;max-width:calc(100vw - 32px);transform:translate(-50%,14px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);font:400 15px/1.4 var(--sans);letter-spacing:.02em;padding:13px 22px;text-align:center;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ==================================================================================================== reveal and arrival */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js :is(.sel__img,.card__img,.shot__a,.tm__img,.media) img[loading="lazy"]{opacity:0;transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.js :is(.sel__img,.card__img,.shot__a,.tm__img,.media) img.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .sel.rv .sel__cap{opacity:1;transform:none;transition:none}
  .js :is(.sel__img,.card__img,.shot__a,.tm__img,.media) img[loading="lazy"]{transition:none}
}

/* ==================================================================================================== page to page */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.25,.6,.2,1)}
}

/* ==================================================================================================== responsive */
@media (max-width:1100px){
  .pinfo dl,.pinfo dl.pinfo__dl--team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:1fr 1fr}
  .ftr__seo{margin-left:0}
  .pf__k{display:none}
}
@media (min-width:761px){.mng--home .stages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  body{font-size:18px}
  .grid2,.grid3,.tm,.ct,.form{grid-template-columns:1fr}
  .grid2{gap:56px}
  .tm--rev .tm__img{order:0}
  .duo{padding-top:90px}
  .shot{flex-direction:column;align-items:center;gap:44px}
  .shot--mid .shot__a,.shot--single .shot__a,.shot--pair .shot__a,.shot--mid .vid__f,.shot--single .vid__f,.shot--pair .vid__f{width:100%}
  .gal{gap:44px}
  .vids .shot+.shot{margin-top:44px}
  .stages{grid-template-columns:1fr;gap:34px}
  .rooms{grid-template-columns:1fr;gap:8px}
  .det__g{grid-template-columns:1fr 1fr;gap:12px}
  .pnext__img{aspect-ratio:16/9}
  .pnext{padding-bottom:100px}
  .tagrow{flex-direction:column;gap:5px 0}
  .tagrow span:not(:last-child)::after{content:none}
  .sec-top__row{display:block}
  .sec-top .lnk{margin-top:14px}
  .stmt__mono{height:30px}
  .hero__bar{gap:16px}
  .pf__in{padding-top:6px;padding-bottom:6px}
  .pf__list{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .pf__b{font-size:11.5px;letter-spacing:.13em;white-space:nowrap;text-align:left}
  .js .lt.rv{opacity:1;transform:none;transition:none}
}

/* ============================================================================ page-owned blocks (APD)
   Each page builder may add rules ONLY between its own markers (re-read the file before every edit). Prefer the
   existing PL classes above; add rules here only when PL has no equivalent. B&W tokens only. */
/* ==== page:projects ==== */
/* Project info: several press articles in one fact, one per line (span.pinfo__li) with a little air between them */
.pinfo dd .pinfo__li{display:block}
.pinfo dd .pinfo__li+.pinfo__li{margin-top:.55em}
/* Next project: the caps place sits 8px under the title as on PL (.pnext .caps{margin:0} above outranks .pcap__p here) */
.pnext__cap .pcap__p{margin-top:8px}
/* Project info on phones: a paragraph-length fact (span.pinfo__long in its md: Role, The project, stats) spans both
   columns instead of a 164px sliver of 25+ lines; short facts keep PL's two-up grid */
@media (max-width:760px){.pinfo dl>div:has(.pinfo__long){grid-column:1/-1}}
/* ==== end:projects ==== */
/* ==== page:select-work ==== */
/* ==== end:select-work ==== */
/* ==== page:home ==== */
/* Home duo: her photographer's credit closing the two portraits (PL caps label, muted; the name underlined like PL's
   inline links); the section mark keeps PL's gap below it. */
.duo__credit{margin:clamp(28px,2.6vw,36px) 0 0}
.duo__credit a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(10,10,10,.3);transition:text-decoration-color .3s,opacity .3s}
.duo__credit a:hover,.duo__credit a:focus-visible{opacity:1;color:var(--ink);text-decoration-color:currentColor}
/* Home design philosophy: her three lines are longer than PL's stage titles, so two of them wrap at three columns.
   The stages share one heading row (subgrid) so the three paragraphs start on the same line, as PL's do. One row of
   three, so dropping the row gap changes nothing else. */
@media (min-width:761px){
  .mng--home .stages{grid-template-rows:auto auto;row-gap:0}
  .mng--home .stage{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
}
/* ==== end:home ==== */
/* ==== page:about ==== */
/* About: photo credits closing the bios (caps, muted), links inside bio copy,
   testimonial cites that break after the comma, and "Projects include" (PL's team grid rendered as stages: one
   hairline column per category, one project per line) */
.tm--apd .tm__txt p.tm__credit{margin:30px 0 0;font-size:11px;line-height:1.7}
.tm--apd .tm__txt p:not(.caps) a:not(.lnk),.apd-pl a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.38);transition:text-decoration-color .3s}
.tm--apd .tm__txt p:not(.caps) a:not(.lnk):hover,.apd-pl a:hover{text-decoration-color:currentColor}
.apd-cite{display:inline-block}
.apd-pl{list-style:none;margin:0;padding:0}
.apd-pl li{font-size:clamp(17px,1.35vw,19px);line-height:1.6}
.apd-pl__n{color:var(--muted);font-style:italic}
/* ==== end:about ==== */
/* ==== page:approach ==== */
/* project links inside the service spec sheets and the hospitality note (same treatment as Services copy links) */
.svcs .svc__dl dd a,.svcs .svc-light p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.svcs .svc__dl dd a:hover,.svcs .svc-light p a:hover,.svcs .svc__dl dd a:focus-visible,.svcs .svc-light p a:focus-visible{text-decoration-color:currentColor}
/* phone hero (portrait source, 4:5 shown in a ~0.46 viewport): keep the pendant, sofa, lamp and garden door in frame */
@media (max-aspect-ratio:4/5){.pg-apr .phero img{object-position:79% 50%}}
/* ==== end:approach ==== */
/* ==== page:press ==== */
/* her press squares are 1080x1080 graphics with the masthead and headline set into the artwork: square frames
   (a 3:4 crop would cut the type); near-white squares get a hairline so they hold their edge on the white canvas */
.press--sq .card__img{aspect-ratio:1/1}
.press--sq .card__img.is-edge{outline:1px solid var(--rule);outline-offset:-1px}
/* grid -> press-inquiries line -> quote: PL's portfolio ending (.port 120px, then .port__note with its own 110px),
   so the quote keeps the air PL gives it below the last card */
.press--sq{padding-bottom:120px}
/* press-inquiries line closing the grid: PL's port__note type, the address underlined like PL's inline links */
.press__note a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.press__note a:hover{text-decoration-color:currentColor}
/* ==== end:press ==== */
/* ==== page:inquire ==== */
/* Inquire + project inquiry (/inquire/, /inquiry/): her checkbox/radio groups, hints and notes, and the
   signed sign-off in the side column, all in PL's form language (caps labels, hairlines, italic muted hints). */
.form .form__set{border:0;margin:0;padding:0;min-width:0}
.form .form__set legend{float:left;width:100%;padding:0;font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;transition:color .4s}
.form .form__set legend+*{clear:both}
.form .form__set:focus-within legend,.form .form__set:has([aria-invalid="true"]) legend{color:var(--ink)}
.form__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 34px;padding:8px 0 12px;border-bottom:1px solid var(--rule)}
.form__set--inline .form__opts{grid-template-columns:repeat(4,max-content);gap:0 56px}
.form label.form__opt{display:flex;align-items:flex-start;gap:14px;margin:0;padding:8px 0;font:400 19px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer;transition:color .3s var(--ease)}
.form label.form__opt:has(input:checked){color:var(--ink)}
.form .form__opt input{flex:none;width:17px;height:17px;margin:.2em 0 0;padding:0;border:1px solid rgba(10,10,10,.62);border-radius:0;background:transparent 50% 50%/11px 9px no-repeat;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.form .form__opt input[type="radio"]{border-radius:50%}
.form .form__opt:hover input{border-color:var(--ink)}
.form .form__opt input:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.6l3.1 3L10 1.2' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E")}
.form .form__opt input[type="radio"]:checked{background-image:none;box-shadow:inset 0 0 0 3.5px var(--bg)}
.form .form__opt input:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.form__hint{font:italic 300 16px/1.5 var(--serif);color:var(--muted);margin:0 0 2px;max-width:640px}
.form__note{margin:-22px 0 0;font:italic 300 16px/1.5 var(--serif);color:var(--muted);max-width:640px}
.form__note::after,.form__files::after{content:none}
.form__lbl{font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.form__files .form__hint{font-size:18px;color:var(--ink-2);max-width:none}
.ct__sign{margin:clamp(40px,4.2vw,64px) 0 0;padding-top:clamp(18px,1.6vw,24px);border-top:1px solid var(--rule)}
.ct__sign .ct__note{font:italic 300 clamp(20px,1.6vw,23px)/1.4 var(--serif);color:var(--ink);margin:0 0 6px}
.ct__sig{width:190px;max-width:60%;height:auto;margin-left:-6px;color:var(--ink)}
.ct__press{margin:clamp(18px,1.6vw,24px) 0 0;font-size:18px;line-height:1.5;color:var(--ink-2)}
.ct__press a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(10,10,10,.4);transition:text-decoration-color .3s}
.ct__press a:hover{text-decoration-color:currentColor}
.form__opt>span,.form .form__f>label,.form .form__set legend,.form__lbl{text-wrap:balance}
.form__hint,.form__note{text-wrap:pretty}
.form__opt .form__nw{white-space:nowrap}
.form__done-p+.form__done-p{margin-top:-8px}
@media (max-width:760px){
  .form__opts{grid-template-columns:minmax(0,1fr)}
  .form__set--inline .form__opts{grid-template-columns:repeat(2,max-content);gap:0 44px}
  .form label.form__opt{font-size:18px;padding:7px 0}
  .form__note{margin-top:-24px}
  .ct__sig{width:160px}
}
/* portrait screens show a slice of the one landscape (like PL's studio hero): the lounge keeps its lamp-lit
   portrait photograph and armchairs in frame, the study its bookcase and the corner of the desk */
@media (max-aspect-ratio:4/5){.pg-inq .phero--studio img{object-position:28% 50%}.pg-inq--q .phero--studio img{object-position:10% 50%}}
/* ==== end:inquire ==== */