/* Homepage uses the shared local font faces and discrete typography tokens. */
.home-page{--project-title-width:220px;--project-gap:100px;--footer-gap:160px;text-transform:uppercase}
.home-introduction{font:inherit;width:342px;margin:8px 10px 150px}
.home-projects{margin-inline:10px;display:flex;flex-direction:column;gap:var(--project-gap)}
.home-project{min-width:0;scroll-margin-top:12px}
.project-preview{display:block;position:relative;overflow:hidden;border-radius:var(--media-radius);aspect-ratio:1900 / 1000}
/* A white overlay gives the same 80% image effect without recompositing the image stack. */
a.project-preview[href]::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.2);opacity:0;pointer-events:none;border-radius:inherit}
a.project-preview[href]:hover{opacity:1}
a.project-preview[href]:hover::after{opacity:1}
.project-preview img{position:absolute;max-width:none;object-position:center top;pointer-events:none}
.listing-preview>.preview-background{left:-.368421%;top:-16.952381%;width:100.368421%;height:120.380952%;object-fit:cover}
.listing-screen{position:absolute;left:50%;transform:translateX(-50%);top:9.047619%;width:90.210526%;height:96.857143%;overflow:hidden;border-radius:16px;box-shadow:0 8px 35px 8px #0000001a}
.listing-screen img{left:0;top:0;width:100%;height:115.45%}
.project-caption{display:grid;grid-template-columns:19% calc(31% + 5px) minmax(0,1fr);margin-top:10px;align-items:start;min-height:66px}
.listing-project .project-caption{min-height:44px}
.project-date{font-weight:300;opacity:.4}
.project-title{font:inherit;font-weight:700;width:var(--project-title-width)}
.listing-project .project-title{width:185px}
.project-description{font-weight:300}
@media(min-width:1024px) and (max-width:1919px){.home-page{--project-title-width:185px;--footer-gap:140px}
.home-introduction{width:291px}
.listing-preview>.preview-background{left:-.492958%;top:-3.299492%;width:101.971831%;height:121.827411%}
.listing-screen{left:4.225352%;transform:none;top:12.055838%;width:89.436620%;height:95.685279%}
.project-caption{min-height:54px}
.listing-project .project-caption{min-height:36px}
}
@media(min-width:1024px) and (max-width:1439px){/* The homepage's 1024 design retains 14px, unlike the case-page body. */
 .home-page{--body-size:14px;--body-line:18px;--project-title-width:160px;--footer-gap:120px}
.listing-preview>.preview-background{left:0;top:-3.27%;width:100%;height:108.66%}
.listing-screen{left:calc(50% - .5px);transform:translateX(-50%);top:17.055655%;width:90.338645%;height:96.588869%}
.long-project-title{display:none}
.project-caption{min-height:72px}
.listing-project .project-caption{min-height:54px}
.listing-project .project-title{width:108px}
}
@media(max-width:1023px){.home-page{--project-gap:69px;--footer-gap:69px}
.home-introduction{width:auto;margin:6px 6px 116px}
.home-projects{margin-inline:6px}
.project-preview{border-radius:var(--media-radius)}
.listing-preview>.preview-background{left:-2.272727%;top:-9.326425%;width:104.870130%;height:110.880829%}
.listing-screen{left:50%;transform:translateX(-50%);top:13.989637%;width:87.012987%;height:82.383420%;border-radius:2px}
.project-caption{display:flex;flex-direction:column;margin-top:8px;min-height:0}
.listing-project .project-caption{min-height:0}
.project-title,.listing-project .project-title{width:100%;margin-top:12px}
.listing-project .project-title{margin-top:14px}
.project-description{margin-top:8px}
.long-project-title{display:none}
}

/* Homepage scrolling is native: no backdrop readback or JS layout changes. */
.home-page>.site-header{position:sticky;top:0;z-index:100;background:#fff;color:#000;padding-bottom:10px;backdrop-filter:none;-webkit-backdrop-filter:none}

.listing-preview .listing-case-preview{display:block;width:100%;height:100%;object-fit:contain}

/* The strategy card uses the supplied complete artwork at every breakpoint. */
.strategy-preview>.strategy-card-image{inset:0;width:100%;height:100%;object-fit:cover}

.project-preview>img{border-radius:var(--media-radius)}