/* Paul Lauren Designs: site styles, in the studio's beige */
:root{
  --bg:#EFE9E1;--sand:#CEC4B6;--ink:#2A2622;--head:#3B3630;--acc:#6E655A;--rule:rgba(59,54,48,.32);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --g:clamp(16px,2.5vw,36px);--hdr:60px;--ease:cubic-bezier(.25,.6,.2,1);--pagebg:var(--bg)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--pagebg)}
body{margin:0;background:var(--pagebg);color:var(--ink);font:400 20px/1.6 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-home{--pagebg:var(--sand);--acc:#4F483F;--rule:rgba(59,54,48,.4)}
html:has(body.is-home){background:var(--sand)}
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(--head);margin:0;line-height:1.2;letter-spacing:-.01em}
address{font-style:normal}
button{font:inherit;color:inherit}
.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(--head);color:var(--bg);padding:10px 16px}.skip:focus{left:10px}
.wrap{width:100%;padding:0 var(--g)}
.caps{font:500 12px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.caps a,a.caps{color:var(--acc);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(--acc)}
.arw{width:22px;height:12px;transition:transform .35s var(--ease)}

/* 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);color:var(--head);transition:color .4s,background-color .4s}
.hdr::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,0));opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.hdr__logo{display:block;line-height:0}
.hdr__mono{height:30px;width:auto}
.hdr__menu{background:none;border:0;padding:16px 0 16px 24px;cursor:pointer;color:inherit;font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.hdr__close{display:none}
.has-hero .hdr:not(.is-past){color:#fff}
.has-hero .hdr:not(.is-past)::before{opacity:1}
.hdr.is-past{background:var(--pagebg)}
.menu-open .hdr__open{display:none}.menu-open .hdr__close{display:inline}

/* Home hero: auto-advancing full-screen crossfade */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--head)}
.hero__stage{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__slide.is-on{opacity:1;z-index:1}
.hero__slide picture,.hero__slide img{width:100%;height:100%}
.hero__slide img{object-fit:cover}

/* Selected projects */
.selected{padding:clamp(100px,11vw,170px) 0 60px}
.sel{margin-bottom:45px}
.sel__img{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:rgba(59,54,48,.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)}
.sel__t a,.card__t a{transition:opacity .3s}.sel__t a:hover,.card__t a:hover{opacity:.6}

/* Cards: two columns of tall photographs */
.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:rgba(59,54,48,.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__p{font-size:19px;line-height:1.5;max-width:600px;margin:4px 0 14px}
.duo{padding:140px 0 120px}
.port{padding-bottom:120px}
.port__note p{font-size:20px;max-width:820px;color:var(--acc);padding-bottom:110px;margin:0}

/* Page heads */
.phead__lede{font:300 clamp(22px,1.9vw,26px)/1.42 var(--serif);color:var(--head);max-width:920px;margin:0 0 clamp(50px,6vw,90px)}

/* Project page */
.phero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--head)}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pintro{padding-top:60px;padding-bottom:110px}
.pintro__d{font:300 clamp(22px,2.2vw,32px)/1.38 var(--serif);color:var(--ink);max-width:1240px;margin:0 0 70px}
.pinfo summary::-webkit-details-marker{display:none}
.pinfo summary::after{content:"+";transition:transform .3s}
.pinfo[open] summary::after{transform:rotate(45deg)}
.pinfo dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 30px;margin:30px 0 0;max-width:1240px}
.pinfo dt{font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.pinfo dd{margin:0;font-size:19px;line-height:1.45}
.gal{display:grid;gap:115px}  /* the space beneath the gallery is set with the section mark (monogram system) */
.shot{margin:0;display:flex;justify-content:center;gap:22px}
.shot__a{display:block;cursor:zoom-in;overflow:hidden;background:rgba(59,54,48,.06)}
.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}
.pnext{padding-bottom:140px}
.pnext .caps{margin:0}
.pnext__t:hover{opacity:.6}

/* Studio */
.lt p{font:300 clamp(26px,2.5vw,36px)/1.32 var(--serif);letter-spacing:-.01em;color:var(--head);max-width:1240px;margin:0 0 110px}
.media{margin-bottom:115px}
.media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.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 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.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.6}
.qb{padding:0 var(--g) 140px}
.qb blockquote{margin:0 auto;max-width:1160px;text-align:center}
.qb blockquote p{font:400 italic clamp(28px,3vw,44px)/1.3 var(--serif);color:var(--head);margin:0 0 22px}
.team,.steps{margin-bottom:140px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:44px 30px}
.steps li{border-top:1px solid var(--rule);padding-top:20px}
.steps .caps{font-size:12px}
.steps h3{font-size:clamp(22px,1.9vw,27px);margin:8px 0 12px}
.steps li p{font-size:19px;line-height:1.55;margin:0}

/* Press strip (helper) */
.pstrip{padding:60px var(--g)}.pstrip ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:12px 36px;font-size:24px;color:var(--head)}

/* Contact */
.ct{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,6vw,110px);padding-bottom:140px}
.ct__big{font:300 clamp(30px,3vw,44px)/1.25 var(--serif);color:var(--head);margin:0 0 6px}
.ct__mid{font:300 clamp(22px,1.9vw,26px)/1.3 var(--serif);color:var(--head);margin:0 0 26px}
.ct address{font-size:21px;line-height:1.5;margin-bottom:22px}
.ct__links{display:flex;flex-wrap:wrap;gap:8px 26px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;align-content:start}
.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(--acc);margin-bottom:4px}
.form input,.form select,.form textarea{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);-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='%233B3630'/%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(--head)}
.form__hp{position:absolute;left:-9999px}
.form__send{background:transparent;color:var(--head);border:1px solid rgba(59,54,48,.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}
.form__msg{font-size:18px;margin:14px 0 0;color:var(--head)}

/* Prose, FAQ, related */
.prose{max-width:860px;padding-bottom:100px}
.prose p,.prose li{font-size:21px;line-height:1.6}
.prose h2{font-size:clamp(28px,2.6vw,36px);margin:1.5em 0 .5em}
.prose h3{font-size:24px;margin:1.3em 0 .4em}
.prose ul{padding-left:1.1em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.faq{max-width:1000px;padding-bottom:110px}
.faq__q{border-top:1px solid var(--rule);padding:22px 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;gap:20px;font:350 clamp(22px,2vw,28px)/1.3 var(--serif);color:var(--head)}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";transition:transform .3s}
.faq__q[open] summary::after{transform:rotate(45deg)}
.faq__a p{font-size:20px;line-height:1.6;margin:16px 0 0;max-width:860px}
.rel{padding-bottom:140px}
.nf{padding-top:calc(var(--hdr) + 120px);padding-bottom:140px}
.nf .caps{display:block;margin-bottom:12px}
.nf__links{display:flex;flex-wrap:wrap;gap:12px 30px}

/* Footer: slim bar */
.ftr{border-top:1px solid var(--rule);background:var(--sand)}
.is-home .ftr{background:var(--sand)}
.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:24px;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--head)}
.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 a{transition:opacity .3s}.ftr a:hover{opacity:.6}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:var(--bg);display:none;align-items:center;justify-content:center}
.lb.is-open{display:flex}
.lb__img{max-width:calc(100vw - 2 * var(--g));max-height:calc(100svh - 130px);width:auto;height:auto;object-fit:contain}
.lb__bar{position:absolute;left:var(--g);right:var(--g);bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.lb__x{position:absolute;top:16px;right:var(--g)}
.lb button{background:none;border:0;cursor:pointer;padding:8px 0}

/* Reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.hero__slide{transition:none}.menu__nav li{transition:none}}

/* Responsive */
@media (max-width:1100px){.pinfo dl{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}.ftr__seo{margin-left:0}}
@media (max-width:760px){
  body{font-size:18px}
  .hdr__mono{height:28px}
  .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}
  .shot--mid .shot__a,.shot--single .shot__a,.shot--pair .shot__a{width:100%}
  .gal{gap:44px}
}

/* ==== Premium pass 1: placeholders taken from the photographs, fade in once decoded ==== */
/* --ph is a two-tone gradient computed at build time from each photograph (ph() in build.py). */
.sel__img,.card__img,.shot__a,.tm__img{background:var(--ph,rgba(59,54,48,.08))}
.media{background:var(--ph,transparent) content-box}
.hero,.phero{background:var(--ph,var(--head))}
.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 :is(.sel__img,.card__img,.shot__a,.tm__img,.media) img[loading="lazy"]{transition:none}}

/* ==== Premium pass 2: hero crossfade without the dip, with a slow settle ==== */
/* The new slide dissolves in over a fully opaque previous slide (is-prev), so no dark flash between photographs. */
.hero__slide{transition:opacity 1.8s var(--ease)}
.hero__slide.is-on{z-index:2}
.hero__slide.is-prev{opacity:1;z-index:1;transition:none}
@media (prefers-reduced-motion:no-preference){.hero__slide.is-on img,.hero__slide.is-prev img{animation:pld-settle 8s cubic-bezier(.22,.55,.3,1) both}}
@keyframes pld-settle{from{transform:scale(1.04)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}}

/* ==== Premium pass 3: typography ==== */
body{-moz-osx-font-smoothing:grayscale;font-kerning:normal}
h1,h2,h3,.pnext__t,.stmt__t{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.hdr__menu{margin-right:-.2em} /* cancels the trailing tracking: the last letter sits on the right gutter */

/* ==== Premium pass 4: Menu and Close cross-fade in the header button (panel rules are in the PLD identity block) ==== */
html{scrollbar-gutter:stable}
.hdr__menu{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}
@media (prefers-reduced-motion:reduce){
  .hdr__menu>span{transition:none}
}

/* ==== Premium pass 5: one hover language, a drawn hairline instead of dimming ==== */
.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}
.sel__t a:hover,.card__t a:hover,.pnext__t:hover,.ftr a:hover,.menu__links a:hover,.menu__cap:hover{opacity:1} /* no dimming anywhere, so taps on phones leave no stuck state */
@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}
  .hdr__menu{transition:opacity .3s}.hdr__menu:hover{opacity:.7}
}

/* ==== Premium pass 6: reveal choreography ==== */
.js .rv{transform:translateY(16px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.js .sel.rv .sel__cap{opacity:0;transition:opacity 1s var(--ease) .22s}
.js .sel.rv.in .sel__cap{opacity:1}
@media (prefers-reduced-motion:reduce){.js .rv,.js .sel.rv .sel__cap{opacity:1;transform:none;transition:none}}

/* ==== Premium pass 7: hero chrome ==== */
.hdr{transition:color .5s var(--ease),background-color .5s var(--ease)}
.hdr::before{inset:0 0 -64px;background:linear-gradient(rgba(42,38,34,.3),rgba(42,38,34,.2) 28%,rgba(42,38,34,.1) 56%,rgba(42,38,34,.03) 82%,rgba(42,38,34,0));transition:opacity .5s var(--ease)}
html{scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ==== Premium pass 8: focus, selection, touch ==== */
:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.menu__nav a:focus-visible{outline-offset:8px}
.hdr__menu:focus-visible,.hdr__logo:focus-visible,.shot__a:focus-visible{outline-offset:6px}
.faq__q summary:focus-visible,.pinfo summary:focus-visible{outline-offset:8px}
::selection{background:var(--acc);color:var(--bg)}
a,button,summary,label,select{-webkit-tap-highlight-color:transparent}
html{scrollbar-color:rgba(59,54,48,.38) transparent}
.skip{font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:12px 18px}.skip:focus{left:var(--g)}

/* ==== Premium: service lists, process steps, copy columns (services and area pages) ==== */
/* Hairline lists in the FAQ's language: no browser markers, no double numbering, no 140px hole after the steps. */
.svc{list-style:none;margin:8px 0 36px;padding:0}
.svc__i{border-top:1px solid var(--rule);padding:22px 0}
.svc__i:last-child{border-bottom:1px solid var(--rule)}
.svc__i h3,.steps--prose h3{font-size:clamp(21px,1.7vw,24px);line-height:1.3;margin:0 0 8px}
.svc__i p{margin:0}
.steps--prose{list-style:none;margin:8px 0 36px;padding:0}
.steps--prose li{display:grid;grid-template-columns:46px 1fr;column-gap:12px;border-top:1px solid var(--rule);padding:22px 0}
.steps--prose li:last-child{border-bottom:1px solid var(--rule)}
.steps__n{grid-row:1 / span 2;font:500 12px/1 var(--sans);letter-spacing:.2em;color:var(--acc);padding-top:.7em}
.steps--prose h3,.steps--prose li p{grid-column:2}
.steps--prose li p{margin:0}
.tm--copy .tm__txt ul:not(.svc){list-style:none;padding:0;margin:4px 0 1em}
.tm--copy .tm__txt ul:not(.svc) 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:not(.svc) li:last-child{border-bottom:1px solid var(--rule)}
/* inline links in the copy are visible: a fine underline that firms up on hover */
.tm--copy .tm__txt a,.faq__a a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(59,54,48,.4);transition:text-decoration-color .3s}
.tm--copy .tm__txt a:hover,.faq__a a:hover{text-decoration-color:currentColor}
/* the tall Services columns keep their photograph beside the list while it is read (browsers without :has() keep the centred pair) */
@media (min-width:761px){
  .tm--copy:has(.svc,.steps--prose){align-items:start}
  .tm--copy:has(.svc,.steps--prose) .tm__img{position:sticky;top:calc(var(--hdr) + 28px)}
  .tm--copy:has(.svc,.steps--prose) .tm__img img{max-height:calc(100svh - var(--hdr) - 56px)}
}
@media (max-width:760px){.steps--prose li{grid-template-columns:36px 1fr}}

/* ==== Premium: contact form ==== */
/* A hairline draws in under the active field; the label darkens; autofill keeps the canvas; a quiet thank-you. */
.form{gap:40px 34px}
.form input,.form select,.form textarea{display:block;caret-color:var(--head)}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--rule)}
.form__f{position:relative}
.form__f:not(.form__f--send)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--head);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);pointer-events:none}
.form__f:focus-within::after{transform:scaleX(1)}
.form label{transition:color .4s}
.form__f:focus-within label,.form__f:has([aria-invalid="true"]) label{color:var(--head)}
.form [aria-invalid="true"]{border-bottom-color:var(--head)}
.form input::placeholder,.form textarea::placeholder{color:var(--acc);opacity:.7;font-style:italic}
.form select:has(option[value=""]:checked){color:var(--acc)}
.form option{color:var(--ink)}
.form input:-webkit-autofill,.form input:-webkit-autofill:hover,.form input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 600000s 0s}
.form__send{display:inline-flex;align-items:center;transition:background-color .45s var(--ease),border-color .45s var(--ease)}  /* the send button: a hairline frame and Fraunces italic, filled with her beige on hover (no caps, no arrow) */
.form__send:hover{background:var(--sand);border-color:var(--head)}
.form__send:disabled{opacity:.6;cursor:progress}
.form__msg{min-height:1.5em;font-style:italic}
.form.is-sent .form__f{display:none}
.form__done{grid-column:1/-1;outline:none;animation:pldUp 1s var(--ease) both}
.form__done-h{font:300 italic clamp(34px,3.4vw,48px)/1.2 var(--serif);color:var(--head);margin:0 0 14px}
@keyframes pldUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form__f::after{transition:none}.form__done{animation:none}}

/* ==== Premium: pull quotes (studio, press) ==== */
/* Light italic, true curly quotes, balanced lines, and a hairline that draws down like the home page's scroll line. */
.qb{padding:clamp(30px,4vw,60px) var(--g) clamp(120px,11vw,170px)}
.qb blockquote::before{content:"";display:block;width:1px;height:64px;margin:0 auto 44px;background:var(--acc);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-weight:300;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}
.press{padding-bottom:clamp(100px,9vw,140px)}
@media (prefers-reduced-motion:reduce){.qb blockquote::before{transition:none}}

/* ==== Premium: FAQ ==== */
/* A drawn hairline plus that turns into a minus; site.js eases the answer open and closed. */
.faq__q{padding:26px 0}
.faq__q summary{align-items:flex-start;transition:color .3s}
.faq__q summary:hover{color:var(--acc)}
.faq__q summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.42em;color:var(--acc);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__a{overflow:hidden}
.faq__a p{margin:18px 0 0;max-width:820px}

/* ==== Premium: typographic finish (adds to passes 3 and 8, which already balance headings and set focus, selection and tap colours) ==== */
figcaption{text-wrap:pretty}
.tm__txt p:not(.caps),.card__p,.faq__a p,.prose p{hanging-punctuation:first}

/* ==== Premium: press ==== */
/* Publication in the head tone, date in the accent; an up-right arrow for articles that leave the site. */
.card--press .tagrow span:first-child{color:var(--head)}
.arw--ext{width:16px;height:9px;transform:rotate(-45deg)}
.lnk:hover .arw--ext{transform:rotate(-45deg) translateX(4px)}
.lb--one .lb__p,.lb--one .lb__n{visibility:hidden}

/* ==== Premium: studio team and visit block ==== */
.card--team:hover .card__img img{transform:none} /* portraits are not links, so they do not suggest a click */
.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}

/* ==== Premium: pacing and reveal (area, service and FAQ pages; text-and-photo pairs) ==== */
/* About 140px from the intro to the projects heading, matching the site's section rhythm (was about 320px). */
.pintro__d:last-child{margin-bottom:0}
.selected--area{padding-top:30px}
/* the photograph settles from 1.04 as its pair arrives; the opacity fade of pass 1 is kept in the same transition list */
.tm__img{overflow:hidden}
.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}
@media (prefers-reduced-motion:reduce){.js .tm__img.rv img{transform:none;transition:none}}

/* ==== Premium: legal and 404 ==== */
/* A 720px measure, hairline-separated sections and caps sub-labels; real weights only (Fraunces is loaded from 300 to 500). */
.prose strong{font-weight:500}
.prose--legal{max-width:720px;padding-bottom:clamp(110px,10vw,150px)}
.prose--legal p,.prose--legal li{font-size:clamp(17px,1.35vw,19px);line-height:1.75}
.prose--legal h2{font-size:clamp(24px,2vw,28px);margin:2.6em 0 .7em;padding-top:1.3em;border-top:1px solid var(--rule)}
.prose--legal h3{font:500 12px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin:34px 0 8px}
.prose--legal ul{padding-left:1.15em;margin:0 0 1.2em}
.prose--legal li{margin-bottom:.4em}
.prose--legal li::marker{color:var(--acc)}
.prose--legal > p:first-child:has(> strong){font:500 12px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:2.4em}
.prose--legal > p:first-child:has(> strong) strong{font-weight:600}
.prose--legal a{text-decoration-thickness:1px;text-decoration-color:rgba(59,54,48,.4);transition:text-decoration-color .3s}
.prose--legal a:hover{text-decoration-color:currentColor}
.nf{min-height:calc(100svh - 92px)}
.nf .phead__lede{margin-bottom:44px}
.nf__links{gap:14px 44px}

/* ==== Premium: project and portfolio pages ==== */
/* -- Lightbox refinement: two stacked layers (site.js), a soft open, a serif caption over a tabular counter, hairline arrows.
      The incoming photograph dissolves in on top; the outgoing one holds a moment before it fades, so there is no dip. -- */
html.is-locked{overflow:hidden;scrollbar-gutter:stable}
.lb{display:flex;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;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{top:8px}
.lb__bar{bottom:10px}
.lb button{min-height:44px;padding:0;display:inline-flex;align-items:center;gap:12px;color:var(--head);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(--head);max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb__cap:empty,.lb__k:empty{display:none}
.lb__k{font-size:11px;font-weight:500;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.lb__p,.lb__n{font:italic 350 18px/1.25 var(--serif);letter-spacing:0;text-transform:lowercase}  /* previous and next in the house link voice: lowercase Fraunces italic beside the fine arrow, never caps */
.lb :focus-visible{outline-offset:6px}
@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}}

/* -- Next project: a cinematic band of the next home, in the home page's Selected Projects pattern
      (wide photograph, the stacked caption beneath). -- */
.pnext__top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:30px}
.pnext__img{display:block;aspect-ratio:21/9;overflow:hidden;background:var(--ph,rgba(59,54,48,.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)}}
@media (max-width:760px){.pnext__img{aspect-ratio:16/9}.pnext{padding-bottom:100px}}
@media (prefers-reduced-motion:reduce){.js .pnext__img img[loading="lazy"]{transition:none}}

/* -- Project hero: a slow settle once the photograph is ready (site.js adds is-in; transform only, so LCP is unaffected) -- */
.js .phero img{transform:scale(1.035);transition:transform 2.8s cubic-bezier(.2,.6,.2,1)}
.js .phero.is-in img{transform:none}
@media (prefers-reduced-motion:reduce){.js .phero img{transform:none;transition:none}}

/* -- Portfolio and gallery photographs settle as their frame reveals; hover is one slow breath and a drawn hairline,
      for real pointers only, so taps on phones leave nothing stuck. The opacity fade of pass 1 is kept in the transition list. -- */
.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}
.card__t a:focus-visible,.pnext__t:focus-visible{background-size:100% 1px}
@media (hover:hover) and (pointer:fine){.pnext:has(.pnext__img:hover) .pnext__t{background-size:100% 1px}}
@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 (hover:none){.card:hover .card__img img,.sel:hover .sel__img img{transform:none}}
@media (prefers-reduced-motion:reduce){.js .shot.rv .shot__a img,.js .port .card.rv .card__img img{transform:none;transition:none}}

/* -- Project Info: an unhurried disclosure and a spec-sheet finish. Each ::details-content rule stands alone, so a browser
      without it drops only that rule and opens instantly as before. Padding, not margin, so the gap unfolds with the rest. -- */
.pinfo{interpolate-size:allow-keywords}
.pinfo summary::after{font-weight:300;transition:transform .5s var(--ease)}
.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{margin-top:0;padding-top:34px}
.pinfo dl>div{border-top:1px solid var(--rule);padding-top:16px}
.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}}

/* -- Focus, touch and mobile rhythm: pair photographs stack 44px apart on phones, the same as the rows -- */
.shot__a:focus-visible{outline-color:var(--head);outline-offset:8px}
@media (max-width:760px){.shot{gap:44px}}

/* -- Typographic finish: the one large project paragraph in Fraunces Light on wide screens (weight already loaded) -- */
.pintro__d{hanging-punctuation:first}
@media (min-width:1000px){.pintro:has(.pinfo) .pintro__d{font-weight:300}}

/* -- Page to page: a soft dissolve instead of a hard cut (Chromium 126+, Safari 18.2+; other browsers unchanged) -- */
@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)}
}

/* ==== Refinement (technical quality): fonts, first paint, contrast, safe areas, browser details ==== */
/* -- Font swap without reflow: Arial resized to Montserrat's caps (fontTools, frequency-weighted A to Z and space:
      500 0.637em vs Arial 0.607em; 600/700 0.643 to 0.649em vs Arial Bold 0.614em) and given its vertical metrics
      (hhea 0.968/0.251, no line gap), so MENU and the caps labels keep their width and baseline when the brand face lands. -- */
@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%}
:root{--sans:"Montserrat","Montserrat Fallback","Helvetica Neue",Arial,sans-serif;color-scheme:only light}

/* -- Full-screen heroes: a blurred preview of the same photograph (inlined by build.py as --lq) instead of a flat
      block, so the first screen comes into focus. The two-tone --ph and the ink colour stay underneath as fallbacks. -- */
.phero{background:var(--lq,none) 50% 50%/cover no-repeat,var(--ph,var(--head))}
.hero__slide{background:var(--lq,none) 50% 50%/cover no-repeat}

/* -- AA contrast: caps labels on her beige (menu and footer) take the darker accent: #6E655A on #CEC4B6 is 3.32:1,
      #4F483F is 5.23:1. Placeholders at full accent on the canvas (4.74:1) instead of 70%. -- */
.menu,.ftr{--acc:#4F483F}
.form input::placeholder,.form textarea::placeholder{opacity:1}

/* -- On phones the studio's opening paragraph sits in the first screen: never held back by the reveal (LCP) -- */
@media (max-width:760px){.js .lt.rv{opacity:1;transform:none;transition:none}}

/* -- Browser details: no iOS data-detector blue, no tap flash, tabular figures for counters and step numbers -- */
html{-webkit-tap-highlight-color:transparent}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important}
.steps .caps,.steps__n,.lb__k{font-variant-numeric:lining-nums tabular-nums}
.faq__q summary span{text-wrap:balance}

/* -- Safe areas (viewport-fit=cover): on a landscape iPhone the monogram, MENU, copy and lightbox controls clear the
      notch, and the bottom controls clear the home indicator. Browsers without env() keep the rules above. -- */
.hdr,.wrap{padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}
.ftr__in{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.lb__x{right:max(var(--g),env(safe-area-inset-right))}
.lb__bar{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))}

/* ==== Final QA: Our Approach columns start their paragraphs on one line ==== */
/* Two of the five step titles run to two lines at desktop widths, so their paragraphs began lower than their neighbours'.
   Every title now reserves two lines (h3 line-height is 1.25), so the five paragraphs share a top edge. Phones stack, so no reserve. */
@media (min-width:761px){.steps:not(.steps--prose) h3{min-height:2.5em}}

/* ==================================================================================================================
   PLD identity: Fraunces type system, section openings, stacked captions, hero caption bar, menu panel, footer mark.
   Replaces the earlier statement, section row, caption, scroll cue and dark menu rules (removed above).
   ================================================================================================================== */

/* -- Type system. Fraunces is variable: optical size 9 to 144, weight 300 to 500, softness and wonk. Every serif setting
      softens the terminals (SOFT 50) and keeps the plain forms (WONK 0). Running text keeps automatic optical sizing;
      display type is set at the top of the optical range (opsz 144), light, with slightly tighter tracking.
      Labels are Montserrat 500 (never bold), 11 to 12px, uppercase, .2em, in the accent colour (4.74:1 on the canvas,
      5.23:1 on her beige with the darker accent). No metric-matched fallback is declared for Fraunces: Georgia stands in
      while it loads (display=swap). -- */
:root{--fv:"SOFT" 50,"WONK" 0;--fv-d:"opsz" 144,"SOFT" 50,"WONK" 0;--mw:min(420px,100vw)}
body{font-variation-settings:var(--fv)}
strong,b{font-weight:500}
.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)}
.phead__h,.pintro__h{font:300 clamp(46px,5.2vw,80px)/1.04 var(--serif);letter-spacing:-.022em;font-variation-settings:var(--fv-d)}
.pintro__h{margin:20px 0 30px}
.steps h3,.svc__i h3,.steps--prose h3,.prose h3{font-weight:400;line-height:1.25}
.tm__txt p:not(.caps),.prose p,.prose li,.faq__a p{line-height:1.65}
.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(--head)}
.pinfo summary::-webkit-details-marker{display:none}

/* -- Small labels: places and tags run on one line with a middle dot between them, never a wide gap -- */
.tagrow span:not(:last-child)::after{content:"\00B7";padding:0 .85em;color:var(--acc)}  /* the dot trails its tag, so a wrapped row never begins with one */

/* -- The house link: lowercase italic serif with a fine underline that firms up on hover (replaces caps and arrow) -- */
.lnk{display:inline-block;font:italic 400 clamp(18px,1.35vw,20px)/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--head);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(59,54,48,.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}

/* -- Section openings: a hairline across the top, a small (numbered) label, then the heading in Fraunces Light Italic -- */
.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__n{color:var(--head);font-variant-numeric:lining-nums tabular-nums}
.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}
.faq-sec .sec-top,.steps .sec-top{margin-bottom:clamp(34px,3.4vw,52px)}

/* -- Page openings (Portfolio, Studio, Press, Contact, legal): the same hairline, label and title; no rule beneath -- */
.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{margin:0}

/* -- Project captions: the name in Fraunces italic, the place in small caps on the line 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(--head);margin:0}
.pcap .pcap__p{margin:8px 0 0;font-size:11.5px}
.pnext__t{display:inline-block;font-size:clamp(26px,2.6vw,38px);line-height:1.15}
.pnext__cap{margin-top:18px}
.pnext__top{border-top:1px solid var(--rule);padding-top:clamp(18px,1.6vw,24px)}  /* the section hairline, inside the gutters */
.card--press .tagrow{margin-top:16px}
.card--press .card__t{margin:8px 0 12px;line-height:1.25}
.card__more{margin:0}
.tm__addr .lnk:hover{opacity:1}
.nf>.caps:first-child{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}

/* -- Home statement: the PL monogram, one italic line and a small label, centred, with generous air -- */
.stmt{padding:clamp(110px,12vw,190px) 0 0}
.stmt__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.stmt__mono{height:44px;width:auto;color:var(--head);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(--head);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}
@media (max-width:480px){.stmt__l span{display:block}.stmt__l span+span{margin-top:6px}.stmt__l span+span::before{content:none}}  /* phones: two centred lines, never a dangling dot */

/* -- 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(--head);margin:0 0 30px}
.inq__links{display:flex;flex-wrap:wrap;gap:10px 40px;margin:0}

/* -- Hero caption bar: the slide's name and place bottom left, the counter bottom right, inside the side gutters.
      A soft shade at the foot of the photograph keeps the white type legible; site.js changes both with the crossfade. -- */
.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(42,38,34,0),rgba(42,38,34,.14) 45%,rgba(42,38,34,.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(42,38,34,.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)}
.hero__p,.hero__k{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.hero__k{margin:0;display:flex;gap:.8em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;margin-right:-.2em}
.hero__of{opacity:.7}
@media (prefers-reduced-motion:no-preference){.hero__bar{animation:pldUp 1.2s var(--ease) .7s both}}

/* -- Menu: the right-hand panel in her beige, dark type, a thin shadow on its left edge, the PL monogram top left,
      links in Fraunces Light Italic, the studio's details in Fraunces, and a project photograph that changes each time. -- */
.menu{position:fixed;inset:0 0 0 auto;width:var(--mw);height:100%;z-index:55;display:block;padding:0;background:var(--sand);color:var(--head);box-shadow:-1px 0 0 rgba(59,54,48,.14),-22px 0 44px -26px rgba(42,38,34,.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:15px;left:40px;height:30px;width:auto;color:var(--head)}
.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(--head);font-variation-settings:var(--fv-d);transition:opacity .45s var(--ease)}
.menu__nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(59,54,48,.45)}
@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(--head);white-space:nowrap}
.menu__pic{margin:0}
.menu__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ph,rgba(59,54,48,.1))}
.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(--head)}
/* the header while the panel is open: Close sits on the beige, the hero's top shade stops at the panel's edge,
   and a solid header bar gives way over the panel so the panel reads to the top */
.hdr::before{transition:opacity .5s var(--ease),right .6s cubic-bezier(.2,.7,.2,1)}
.menu-open .hdr__menu{color:var(--head);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))}
@media (max-width:560px){  /* phones: the panel is the full width, so the whole header turns dark on it */
  :root{--mw:100vw}
  .menu-open .hdr,.menu-open .has-hero .hdr:not(.is-past){color:var(--head)}
  .menu-open .hdr::before,.menu-open .has-hero .hdr:not(.is-past)::before{opacity:0}
  .menu__mono{display:none}  /* the header's own monogram sits in the same corner */
  .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}
}

/* -- Footer: the PL monogram centred above the slim bar -- */
.ftr__mark{display:flex;justify-content:center;padding:clamp(56px,6vw,84px) 0 clamp(20px,2.2vw,30px);color:var(--head)}
.ftr__mono{height:28px;width:auto}

/* -- Phones -- */
@media (max-width:760px){
  .tagrow{flex-direction:column;gap:5px 0}  /* place and tag on their own lines: a wrapped row would begin with a dot */
  .tagrow span:not(:last-child)::after{content:none}
  .sec-top__row{display:block}
  .sec-top .lnk{margin-top:14px}
  .stmt__mono{height:40px}
  .hero__bar{gap:16px}
}
@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,.hero__cap,.hero__cap.is-on{transition:none}
  .menu__nav li{transform:none}
  .hero__k{display:none}  /* the slideshow stays on its first photograph */
}

/* ==================================================================================================================
   PLD monogram system: the first-visit reveal (home), section marks, and the photo viewer's loader.
   All three draw the header's own monogram path (<use href="#pl-mono">), so its outline is sent once per page.
   ================================================================================================================== */

/* -- First visit (home, first page view of a browser session): her beige, the PL monogram fades and rises in, a fine
      hairline draws out beneath it, then the overlay lifts off the hero: 1.35s in all. It shows only when the head
      script has added pld-intro before the first paint (never without JS, never with reduced motion). It is pure
      CSS over the page: the hero photograph keeps downloading and painting underneath, and the animation ends on its
      own even if site.js never arrives; site.js lets a click, key, wheel or touch skip it and then removes it. -- */
.intro{display:none}
.pld-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(--sand);color:var(--head);animation:pld-intro-out .45s cubic-bezier(.4,0,.2,1) .9s both}
.intro__mono{height:clamp(58px,6vw,78px);width:auto;animation:pld-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:pld-intro-line .5s var(--ease) .4s both}
@keyframes pld-intro-mono{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pld-intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pld-intro-out{to{opacity:0;visibility:hidden}}
/* the hero's caption bar rises once the photograph is uncovered (pld-intro stays on the page, so this never jumps) */
@media (prefers-reduced-motion:no-preference){.pld-intro .hero__bar{animation-delay:1.15s}}
@media (prefers-reduced-motion:reduce){.pld-intro .intro{display:none}}

/* -- Section marks: the monogram at 18px in the accent colour, centred, a quiet pause before Inquire (home) and before
      Next project (project pages). Decorative (aria-hidden). The same space sits above and below it; the section that
      follows begins at its own hairline. -- */
.smark{display:flex;justify-content:center;color:var(--acc);padding-bottom:clamp(80px,8vw,116px)}
.smark__mono{height:18px;width:auto}
.smark+.inq{padding-top:0}
.gal{padding-bottom:clamp(80px,8vw,116px)}

/* -- Photo viewer loader: while a photograph is on its way, a small PL monogram pulses softly at the centre of the
      canvas instead of a blank (after a 160ms grace, so photographs already in the cache never show it). The photograph
      on screen steps back while it waits, and the loader goes the moment the new one is shown. Reduced motion: still. -- */
.lb__load{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;color:var(--acc);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:26px;width:auto}
.lb.is-loading .lb__mono{animation:pld-pulse 1.6s ease-in-out infinite}
@keyframes pld-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.lb.is-loading .lb__img.is-on{opacity:0;transition:opacity .4s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .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}
}

/* ==================================================================================================================
   Project pages, room by room: the room index under the introduction and the Details strip after the gallery.
   ================================================================================================================== */

/* -- Room index: the Project Info spec-sheet language (hairline, small label in a quarter column), then the rooms in
      small Fraunces italic with accent middle dots. Each room and its dot stay together, so lines only break between
      rooms and never begin with a dot. A room glides to its first photograph (site.js), which lands clear of the
      header: scroll-padding on html plus the margin below. -- */
.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(--head);text-wrap:pretty}
.rooms__l li{display:inline;white-space:nowrap}
.rooms__l li:not(:last-child)::after{content:"\00B7";color:var(--acc);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}}
.gal [id^="room-"]{scroll-margin-top:clamp(14px,3vh,36px)}
@media (max-width:760px){.rooms{grid-template-columns:1fr;gap:8px}}

/* -- Details: a small label at the section hairline, then four square close-ups of the project's own materials
      (two by two on phones). Not links and not in the viewer, so no zoom cursor and no hover. The same space sits
      below it as below the gallery, before the section mark and 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(59,54,48,.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 (max-width:760px){.det__g{grid-template-columns:1fr 1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){.js .det__i img[loading="lazy"]{transform:none;transition:none}}

/* Menu: contact view inside the panel */
.menu__contact[hidden],.menu__main[hidden]{display:none}
.menu__contact{display:flex;flex-direction:column;animation:mcIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes mcIn{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(--acc);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(--head);margin:0 0 22px}
.menu__ph{font:400 26px/1.3 var(--serif);color:var(--head);margin:0 0 26px}
.menu__k{font-size:11px;margin:0 0 6px}
.menu__em{font:400 21px/1.35 var(--serif);color:var(--head);margin:0 0 24px;word-break:break-word}
.menu__ad2{font:400 18px/1.5 var(--serif);color:var(--head);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(--head);border-bottom:1px solid currentColor;padding-bottom:3px}
@media (prefers-reduced-motion:reduce){.menu__contact{animation:none}}