.shop-community{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:80px;align-items:center}
.shop-community img{width:100%;height:auto;display:block}
.shop-community:has(>img:only-child){grid-template-columns:1fr}
.shop-community>img:only-child{max-width:660px;justify-self:center}
.wide-shop-photo img{aspect-ratio:3/2;object-position:center 62%}
.shop-teaser img{aspect-ratio:4/3}
/* Homepage-only type and spacing. Project-page title standards are unchanged. */
.home-intro{grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:56px}
.home-intro h1{font-size:clamp(42px,5vw,74px)}
.home-intro .intro-copy{max-width:540px;justify-self:start;padding-bottom:0;font-size:19px}
.home-featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.home-featured .project-card:last-child{padding-top:0}
.home-featured .project-card:first-child figure,.home-featured .project-card:last-child figure{aspect-ratio:4/3}
.home-featured .project-card[data-slug=richard-meier-lights] img{object-fit:cover;object-position:center top}
.project-card[data-slug=valerie-name-bench] img{object-fit:cover;object-position:center}
.home-work-more{padding-top:64px;padding-bottom:72px}
.process-teaser{padding-top:60px;padding-bottom:60px}
.shop-teaser{margin-bottom:72px}
@media(max-width:700px){
 .home-intro{padding-top:32px;padding-bottom:36px}
 .home-intro h1{font-size:clamp(42px,10vw,60px)}
 .home-intro .intro-copy{margin-top:24px;font-size:18px}
 .home-featured{grid-template-columns:1fr;gap:32px}
 .home-work-more{padding-top:48px;padding-bottom:48px}
 .home-grid{gap:32px}
 .process-teaser{padding-top:40px;padding-bottom:40px}
 .shop-teaser{gap:24px;margin-bottom:48px}
 .wide-shop-photo img{aspect-ratio:4/3}
 .shop-community{margin-bottom:48px}
}
/* Shared editorial type roles. Scoped away from drawings and interactive controls. */
:root{--type-title:clamp(40px,4.8vw,70px);--type-section:clamp(28px,3vw,44px);--type-body:19px;--type-small:15px;--type-caption:14px;--reading-width:850px}
body .site-main h1,body .project-title h1{font:450 var(--type-title)/1.08 var(--site-font);letter-spacing:-.035em}
.site-main :is(.section-heading,.process-teaser,.shop-teaser,.editorial-section,.process-row) h2{font:450 var(--type-section)/1.12 var(--site-font);letter-spacing:-.035em}
.home-intro,.page-intro{grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-top:48px;padding-bottom:56px}
.home-intro .intro-copy,.page-intro .intro-copy{max-width:540px;justify-self:start;align-self:center;padding:0;font:400 var(--type-body)/1.6 var(--site-font)}
.contact-main{padding-top:48px}
.contact-main .contact-intro,.editorial-section .editorial-copy,.process-row p,.process-teaser .process-copy,.shop-teaser p,.clients-context{font:400 var(--type-body)/1.6 var(--site-font)}
.home-featured .project-card h3,.home-grid .project-card h3,.work-grid .project-card h3{font:450 21px/1.18 var(--site-font)!important;letter-spacing:-.025em!important}
.process-images figcaption,.project-media figcaption{font:400 var(--type-caption)/1.5 var(--site-font)}

.job-intro{display:block;padding-top:24px;padding-bottom:0;font:400 14px/1.5 var(--site-font)}
.job-return{display:inline-flex;min-height:44px;margin:0;align-items:center;font:400 14px/1.5 var(--site-font)}
.project-title{padding-top:12px;padding-bottom:32px}
body .project-subhead{width:calc(100% - 2 * var(--site-pad));max-width:var(--reading-width);margin:0 auto;padding:20px 0 0;font:400 var(--type-small)/1.5 var(--site-font);letter-spacing:0}
@media(max-width:700px){
 :root{--type-title:40px;--type-section:30px;--type-body:18px;--type-small:14px}
 .home-intro,.page-intro{display:block;padding-top:32px;padding-bottom:36px}
 .home-intro .intro-copy,.page-intro .intro-copy{margin-top:24px}
 .contact-main{padding-top:32px}
 .job-intro{padding-top:12px}
 .project-title{padding-top:12px;padding-bottom:24px}
 .project-title h1{overflow-wrap:anywhere}
 body .project-subhead{padding-top:16px}
 .shop-community{grid-template-columns:1fr}
}
/* Shared project sections. Every project uses this geometry and these type roles. */
@font-face{font-family:ProjectMono;src:url('/presentation/fonts/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.shared-project{padding-bottom:24px}
.project-hero{margin-top:0;margin-bottom:0}
/* The hero band takes the photograph's own ratio from the build, clamped. It is
   filled edge to edge: no wash, no matting on any project. */
.project-hero .job-image-button{height:auto;background:none}
.project-hero img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
/* An upright hero is sized by height instead, so the box matches the photograph
   exactly. Nothing is cropped and no matte appears. It sits flush left under the
   title. */
.project-hero[data-orientation=portrait] .job-image-button{height:min(82svh,860px);width:auto;max-width:100%;margin-right:auto}
.project-description{width:calc(100% - 2 * var(--site-pad));max-width:var(--reading-width);margin:0 auto;padding:28px 0 48px;font:400 var(--type-body)/1.6 var(--site-font)}
.project-description p{margin:0 0 18px}
.project-section{margin-top:16px;margin-bottom:64px}
.project-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.shared-project .project-section-heading h2{font:450 24px/1.25 var(--site-font);letter-spacing:-.025em;margin:0}
.drawing-controls button{width:44px;height:44px;flex:none;border:1px solid var(--site-line);background:transparent;color:var(--site-ink);font-size:22px;cursor:pointer}
/* Every photograph on the project is in view at once. The cell is filled, and the
   whole uncropped frame is one click away in the dialog. */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-photo{min-width:0;margin:0}
.project-photo .job-image-button{aspect-ratio:4/3;background:none;overflow:hidden}
.project-photo img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;transition:opacity .16s ease}
.project-photo .job-image-button:hover img{opacity:.86}
.shared-project .asset-credit{font:400 11px/1.5 ProjectMono,monospace;color:var(--site-muted);padding-top:8px;letter-spacing:0}
.video-grid,.drawing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;align-items:start}
.project-video{min-width:0;margin:0}
/* The frame carries the clip's real ratio from the build, so a phone-shot
   vertical clip is never matted. A tall clip is held to a readable width. */
.video-frame{position:relative;background:var(--site-wash);aspect-ratio:16/9}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover}
.project-video[data-orientation=portrait]{max-width:390px}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:none;cursor:pointer}
.video-play svg{width:62px;height:62px;transition:transform .16s ease,opacity .16s ease}
.video-play:hover svg{transform:scale(1.06)}
.video-play[hidden]{display:none}
.shared-project .video-label{font:400 12px/1.5 ProjectMono,monospace;margin:10px 0 0;color:var(--site-muted)}
.shared-project .video-label:has(.video-duration:empty){display:none}
.drawing-tile{min-width:0;border-top:1px solid var(--site-line);padding-top:16px}
.shared-project .drawing-tile h3{font:450 18px/1.35 var(--site-font);letter-spacing:0;margin:0 0 16px}
/* A drawing is never cropped. Dropping the fixed box removes the matting
   instead, so the sheet sits on the page at its own size. */
.drawing-image{display:block;background:none}
.drawing-image img{max-width:100%;max-height:62svh;width:auto;height:auto;display:block;margin:0 auto}
.drawing-controls{display:flex;gap:14px;align-items:center;margin-top:12px}
.drawing-controls input{min-width:0;flex:1;accent-color:var(--site-ink);height:44px;cursor:pointer}
.shared-project .drawing-position,.shared-project .drawing-label,.shared-project .drawing-source{font:400 12px/1.5 ProjectMono,monospace;margin:8px 0 0;color:var(--site-muted)}
.drawing-label:empty{display:none}
.project-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 36px;margin:0 0 28px}
.project-credits div{min-width:0}
.project-credits dt{font:400 12px/1.5 ProjectMono,monospace;color:var(--site-muted);margin-bottom:5px}
.project-credits dd{margin:0;font:400 16px/1.5 var(--site-font)}
/* Press is links and nothing else. Publication first, then the piece. */
.project-press .press-list{list-style:none;margin:0;padding:0;max-width:940px}
.project-press .press-list li{border-top:1px solid var(--site-line)}
.project-press .press-list li:last-child{border-bottom:1px solid var(--site-line)}
.project-press .press-list a{display:flex;align-items:center;gap:18px;min-height:58px;padding:12px 0;text-decoration:none;font:400 18px/1.45 var(--site-font)}
.project-press .press-list a:hover{text-decoration:underline}
.project-press .press-list a:after{content:'↗';margin-left:auto;padding-left:16px;color:var(--site-muted);font-size:17px}
.project-closing{border-top:1px solid var(--site-line);padding-top:24px}
.project-closing a{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){
 .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media(max-width:700px){
 .project-hero .job-image-button{max-height:68svh}
 .project-hero[data-orientation=portrait] .job-image-button{height:auto;width:100%;max-height:none}
 .project-description{padding-top:24px;padding-bottom:36px}
 .project-section{margin-top:8px;margin-bottom:40px}
 .shared-project .project-section-heading h2{font-size:22px}
 .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .video-grid,.drawing-grid,.project-credits{grid-template-columns:1fr}
 .project-video[data-orientation=portrait]{max-width:none}
 .drawing-image img{max-height:none}
 .project-press .press-list a{font-size:17px;min-height:54px}
}