
.concept-note{display:flex;justify-content:space-between;gap:20px;padding:12px 4.2vw;background:#e6eadd;font-size:11px}.concept-note a{text-decoration:underline}.project-dialog{border:0;max-width:1100px;width:94vw;max-height:90dvh;padding:0;background:#fff;color:#20231f}.project-dialog::backdrop{background:#15201de0}.dialog-bar{position:sticky;top:0;z-index:2;background:white;padding:15px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-size:12px}.dialog-bar button{background:none;border:1px solid #aaa;padding:12px 20px;min-height:44px}.dialog-content{padding:35px}.dialog-content h2{font-size:56px}.dialog-content>p{max-width:720px;margin:25px 0;font-size:18px}.story-images{display:grid;grid-template-columns:1fr 1fr;gap:20px}.story-images img{height:auto;max-height:520px;object-fit:contain;background:#f3f4ef}.mobile-menu{max-height:calc(100dvh - 90px);overflow:auto}.drawing-stage:focus-within .drawing-paper{opacity:0;pointer-events:none}
@media(max-width:700px){.concept-note{display:block;padding:12px 6vw}.concept-note a{display:block;margin-top:5px}.dialog-content{padding:24px}.dialog-content h2{font-size:36px}.dialog-content>p{font-size:16px}.story-images{grid-template-columns:1fr}.dialog-bar{padding:12px 18px}.hero-title{gap:20px}.hero h1{font-size:clamp(52px,14vw,75px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.drawing-paper{opacity:0!important;visibility:hidden!important}.hero-media:hover img{transform:none}}

/* A small portfolio of overlapping photographic folios, released at the section end. */
@media(max-width:700px) and (min-height:440px) and (prefers-reduced-motion:no-preference){
.stack-enabled .project-grid{position:relative;isolation:isolate;padding-bottom:8px}
.stack-enabled .project-grid>.project{position:sticky;top:calc(var(--dtr-header,76px) + 12px + var(--card-index)*8px);z-index:calc(1 + var(--card-index));margin:0 0 44px;background:#fff;box-shadow:0 -10px 28px #20231f0c;border-top:1px solid #dce0da;scroll-margin-top:calc(var(--dtr-header,76px) + 44px)}
.stack-enabled .project-grid>.project:last-child{margin-bottom:0}
.stack-enabled .project>a{display:flex;flex-direction:column}
.stack-enabled .project-caption{order:-1;padding:17px 12px 18px;gap:8px}
.stack-enabled .project-caption h3{font-size:clamp(24px,6.9vw,31px);line-height:1.04}
.stack-enabled .project-caption .project-brief{font-size:13px;line-height:1.45;margin-top:10px}
.stack-enabled .project-caption .eyebrow{font-size:9px;letter-spacing:.08em}
.stack-enabled .project img,.stack-enabled .project-1 img,.stack-enabled .project-3 img{height:var(--dtr-card-image,260px);object-fit:cover}
.stack-enabled .project a:hover img{transform:none}

}
.project-dialog{overscroll-behavior:contain;scrollbar-gutter:stable}
.project-gallery{margin:32px 0}.gallery-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.gallery-count{font-size:12px;font-variant-numeric:tabular-nums}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;background:#f0f1ec;position:relative}
.gallery-track figure{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.gallery-track img{width:100%;height:min(52dvh,570px);object-fit:contain}.gallery-track figcaption{padding:12px 16px;font-size:11px;background:#f0f1ec}
.gallery-controls{display:none;align-items:center;justify-content:space-between;margin:14px 0;gap:15px}.gallery-ready .gallery-controls{display:flex}.gallery-controls button{width:48px;height:48px;border:1px solid #b7bdb1;background:#fff;font-size:23px;color:#20231f}.gallery-controls button:disabled{opacity:.3}.gallery-controls span{font-size:12px}.gallery-thumbs{display:none;gap:10px}.gallery-ready .gallery-thumbs{display:flex}.gallery-thumbs button{width:76px;padding:3px;background:white;border:1px solid transparent;min-height:54px}.gallery-thumbs button[aria-pressed=true]{border-color:#20231f}.gallery-thumbs img{height:48px;object-fit:cover}.project-context{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:40px 0;border-top:1px solid #dce0da;padding-top:24px}.project-context section>p+p{font-size:16px;line-height:1.6;margin-top:14px}.project-enquiry{display:flex;width:fit-content}.dialog-bar button{cursor:pointer}.dialog-content>.text-link{margin-right:25px}
@media(max-width:700px){.project-dialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0}.dialog-bar{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}.dialog-content{padding:26px 6vw calc(30px + env(safe-area-inset-bottom))}.dialog-content h2{font-size:clamp(35px,10vw,48px)}.project-context{grid-template-columns:1fr;gap:24px;margin:30px 0}.gallery-track img{height:42dvh;min-height:180px}.gallery-controls span{font-size:11px}.gallery-thumbs button{width:68px}.dialog-content>.text-link{font-size:13px;line-height:1.5}.project-gallery{margin:26px 0}}
@media(prefers-reduced-motion:reduce){.gallery-track{scroll-behavior:auto}.project-grid>.project{position:static!important;box-shadow:none!important}}

/* Desktop portfolio: large photographic sheets with an architectural register. */
.folio-number,.folio-invitation{display:none}
@media(min-width:1001px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .desktop-folio .work{max-width:none;padding-inline:4.2vw;padding-bottom:70px}
  .desktop-folio .work>.section-heading{grid-template-columns:1fr 2fr 1fr;margin-bottom:48px}
  .desktop-folio .project-grid{display:block;position:relative;isolation:isolate}
  .desktop-folio .folio-stage{position:sticky;top:calc(var(--dtr-header,91px) + 20px);overflow:hidden}
  .desktop-folio .folio-stage>.project{position:absolute;inset:0 0 74px;margin:0;background:transparent;z-index:calc(var(--card-index) + 1);overflow:hidden;pointer-events:none}
  .desktop-folio .folio-current>a{pointer-events:auto}
  .desktop-folio .project>a{display:grid;grid-template-columns:31% 69%;height:100%;position:relative}
  .desktop-folio .project-caption{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;padding:32px clamp(24px,3vw,52px) 32px 30px;gap:20px;background:#e9ede3;position:relative;opacity:0;transition:opacity .18s ease}
  .desktop-folio .folio-current .project-caption{opacity:1}
  .desktop-folio .project-caption::after{content:'+';position:absolute;right:22px;top:24px;font-size:30px;line-height:1;font-weight:400;color:#74806a}
  .desktop-folio .project-caption>span:not(.folio-number):not(.folio-invitation){display:none}
  .desktop-folio .folio-number{display:block;font-size:clamp(65px,7vw,112px);line-height:.9;letter-spacing:-.08em;font-weight:400;color:#7c896e}
  .desktop-folio .project-caption .eyebrow{font-size:10px;letter-spacing:.07em;line-height:1.5;max-width:24ch}
  .desktop-folio .project-caption h3{font-size:clamp(34px,3.3vw,58px);line-height:1.02;margin-top:17px;max-width:10ch;letter-spacing:-.05em}
  .desktop-folio .project-caption .project-brief{font-size:15px;line-height:1.55;max-width:25ch;margin-top:22px;color:#46513d}
  .desktop-folio .folio-invitation{display:block;width:100%;border-top:1px solid #aeb8a3;padding-top:17px;font-size:13px;letter-spacing:0}
  .desktop-folio .project-image{grid-column:2;grid-row:1;height:100%;min-height:0}
  .desktop-folio .project img,.desktop-folio .project-1 img,.desktop-folio .project-3 img{height:100%;width:calc(100% + 46px);max-width:none;object-fit:cover;transform:translateX(calc(var(--folio-image-x,0px) - 23px));transition:none}
  .desktop-folio .project a:hover img{transform:translateX(calc(var(--folio-image-x,0px) - 23px))}
  .desktop-folio .project-open{bottom:22px;right:22px;width:58px;height:58px;display:grid;place-items:center;padding:0;background:#fffffff0;transition:background .2s,color .2s}
  .desktop-folio .project a:hover .project-open{background:#20231f;color:#fff}
  .desktop-folio .folio-index{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;height:58px}
  .folio-index button{position:relative;display:flex;align-items:center;gap:14px;border:0;border-top:1px solid #cbd1c5;background:white;color:#68715e;text-align:left;font-size:13px;padding:10px 2px;min-height:48px}
  .folio-index button::before{content:'';height:2px;background:#20231f;position:absolute;top:-1px;left:0;width:var(--index-fill,0%)}
  .folio-index button>span:first-child{font-size:11px;font-variant-numeric:tabular-nums}
  .folio-index button[aria-current=true]{color:#20231f;font-weight:500}
  .folio-index button:hover{color:#20231f;background:#f3f5ef}
  .desktop-folio .project>a:focus-visible{outline-offset:-5px}
}
@media(min-width:1001px) and (max-height:760px){
  .desktop-folio .project-caption{padding-block:22px;gap:14px}
  .desktop-folio .folio-number{font-size:64px}
  .desktop-folio .project-caption h3{font-size:36px;margin-top:12px}
  .desktop-folio .project-caption .project-brief{font-size:14px;margin-top:14px}
}
@media print{.desktop-folio .project-grid{height:auto!important}.desktop-folio .folio-stage{position:static;height:auto!important;overflow:visible}.desktop-folio .folio-stage>.project{position:static;clip-path:none!important}.folio-index,.folio-number,.folio-invitation{display:none!important}}
@media(min-width:1001px) and (max-height:680px){
  .desktop-folio .project-caption{padding:18px 24px;gap:10px}
  .desktop-folio .folio-number{font-size:44px}
  .desktop-folio .project-caption h3{font-size:30px;margin-top:10px}
  .desktop-folio .project-caption .project-brief{font-size:13px;margin-top:12px}
  .desktop-folio .folio-invitation{padding-top:12px;font-size:12px}
}
@media print{.desktop-folio .project-caption{opacity:1!important}.desktop-folio .project-image{clip-path:none!important}}
