*{box-sizing:border-box}
body{margin:0;background:#F7F2E9}
.site-shell{font-family:'Source Sans 3',sans-serif;color:#2B2620;background:#F7F2E9;font-size:18px;line-height:1.6}
a{color:#2B2620}a:hover{color:#8A5E05}
html{scroll-padding-top:16px}
img{max-width:100%;height:auto}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #E0A10E;outline-offset:4px;box-shadow:0 0 0 2px #2B2620}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:100;background:#2B2620;color:#FBF8F2;padding:12px 20px;font-weight:600}
.skip-link:focus{transform:translateY(0);color:#FBF8F2}
nav a{display:inline-flex;align-items:center;min-height:44px}
.site-main{display:block}
#firm [style*="grid-template-columns"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important}
#contact a{overflow-wrap:anywhere}
[role="dialog"]{overflow:auto;overscroll-behavior:contain}
[role="dialog"] button{min-width:44px;min-height:44px}
[role="dialog"]>div:last-child{flex-shrink:0}
@media(max-width:600px){
 header>div{padding:16px 20px!important;gap:12px!important}
 header>div>a{gap:12px!important;max-width:100%}
 header>div>a img{height:42px!important;width:auto}
 header>div>a span{font-size:12px!important;letter-spacing:0!important}
 nav{width:100%;gap:0 20px!important;font-size:15px!important}
 #top{padding:40px 20px 48px!important;gap:32px!important}
 h1{font-size:clamp(2rem,8vw,2.5rem)!important;line-height:1.12!important;overflow-wrap:break-word}
 h2{font-size:1.8rem!important;line-height:1.2}
 #services>div,#studies>div,#firm>div{padding:48px 20px!important}
 #work,#contact{padding:48px 20px!important}
 #contact{gap:28px!important}
 #firm>div{gap:32px!important}
 #top>div>p:first-child{font-size:12px!important}
 #project-invitation{align-items:flex-start!important;gap:20px!important}
 #project-invitation p{font-size:1.1rem!important}
 [role="dialog"]{justify-content:flex-start!important;padding:64px 16px 20px!important;gap:12px!important;min-height:100svh}
 [role="dialog"]>img{max-height:48svh!important;flex-shrink:0}
 [role="dialog"] button img{width:64px!important;height:40px!important}
 footer>div{padding:28px 20px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Visual hierarchy: shared across the homepage and collection pages. */
.section-heading{font-size:2.45rem!important;line-height:1.15!important;margin-bottom:24px!important;letter-spacing:-0.015em}
.section-heading::after{content:"";display:block;width:56px;height:3px;margin-top:18px;background:#E0A10E}
.project-name,.study-title,.staff-name{font-size:20px!important;font-weight:700!important;line-height:1.3!important;margin-top:16px!important;margin-bottom:6px!important}
.project-type,.study-description{font-size:16px!important;line-height:1.6!important;color:#50483F!important}
.study-label{font-size:13px!important;letter-spacing:0.06em!important}
.image-count{font-size:13px!important;letter-spacing:0.035em!important}
.image-caption{font-size:15px!important;line-height:1.5!important;color:#50483F!important;margin-top:12px!important}
.contact-label{font-size:14px!important;font-weight:700!important;letter-spacing:0.08em!important}
@media(max-width:600px){
 .section-heading{font-size:1.95rem!important;line-height:1.18!important}
 .section-heading::after{margin-top:16px}
}

@media(max-width:900px){.services-grid{grid-template-columns:1fr!important;gap:28px!important}}

/* Compact biographies keep the principals visible without a long phone detour. */
.staff-bio summary{display:none;cursor:pointer;min-height:44px;padding:10px 0;color:#F5EEE2;font-weight:600;font-size:16px}
summary:focus-visible{outline:3px solid #E0A10E;outline-offset:4px}
.footer-contact a{display:inline-block;padding:6px 0;overflow-wrap:anywhere;font-weight:600}
.study-image-opener{font:inherit}
@media(max-width:600px){
 #firm img{aspect-ratio:3 / 2!important;height:200px!important;object-position:center top!important}
 .staff-bio summary{display:list-item;list-style-position:inside}
 .staff-bio[open] summary{margin-bottom:8px}
}
/* In short, wide viewports the photograph and controls share the available height. */
@media(orientation:landscape) and (max-height:500px){
 .project-gallery{display:grid!important;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr) auto;align-items:center!important;justify-items:center;gap:12px 20px!important;padding:52px 16px 12px!important;min-height:0!important;height:100svh;overflow:auto}
 .project-gallery>img{grid-column:1;grid-row:1 / 3;max-height:calc(100svh - 64px)!important;max-width:100%;min-height:0;object-fit:contain}
 .project-gallery>div{grid-column:2;max-width:100%;min-width:0}
 .project-gallery>div:last-child{gap:6px!important;align-self:start}
 .project-gallery>div:last-child button{padding:0!important}
 .project-gallery button img{width:44px!important;height:30px!important}
 .project-gallery p{font-size:14px!important}
}

/* Native modal with ordinary image links as a no-script fallback. */
.project-gallery:not([open]){display:none!important}
.project-gallery[open]{position:fixed;inset:0;z-index:50;margin:0;border:0;width:100%;height:100svh;max-width:none;max-height:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 16px 24px;background:rgba(28,22,16,.94);color:#F5EEE2;font-family:'Source Sans 3',sans-serif}
.project-gallery::backdrop{background:rgba(28,22,16,.4)}
.gallery-close{position:absolute;top:12px;right:12px;padding:0 16px}
.project-gallery button{min-width:44px;min-height:44px;border:1px solid rgba(251,248,242,.4);background:transparent;color:#FBF8F2;font:600 18px 'Source Sans 3',sans-serif;cursor:pointer}
.gallery-image{max-width:min(1200px,100%);max-height:68svh;object-fit:contain;display:block}
.gallery-caption{text-align:center}
#gallery-title{font:700 20px/1.3 Archivo,sans-serif!important;margin:0 0 6px}
.full-size-image{color:#F5EEE2;font-size:14px;display:inline-block;padding:6px 0}
.full-size-image:hover{color:#E0A10E}
.gallery-position{margin:2px 0 0;color:#D9C9AE;font-size:15px}
.gallery-controls,.gallery-thumbnails{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.gallery-controls[hidden]{display:none!important}
.gallery-thumbnails button{padding:0;border:2px solid transparent}
.gallery-thumbnails button[aria-pressed="true"]{border-color:#E0A10E}
.gallery-thumbnails img{width:96px;height:54px;object-fit:cover;display:block}
@media(max-width:600px){
 .project-gallery[open]{justify-content:flex-start;padding:64px 16px 20px;gap:12px}
 .gallery-image{max-height:48svh;flex-shrink:0}
 .gallery-thumbnails img{width:64px;height:40px}
}
@media(orientation:landscape) and (max-height:500px){
 .project-gallery[open]{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr) auto;gap:12px 20px;padding:52px 16px 12px}
 .gallery-controls,.gallery-thumbnails{gap:6px}
}
