/* Shared responsive shell, loaded after the page and brand styles. */
:root{--site-header-height:86px}
html{scroll-padding-top:calc(var(--site-header-height) + 20px)}
.wrap{width:min(1160px,calc(100% - clamp(32px,7.2vw,96px)))}
:is(.hero-copy,.about-copy,.section-heading>*,.project-caption>*,.footer-bottom>*,.case-next>*){min-width:0}
:is(h1,h2,h3,p,dd,li,figcaption){overflow-wrap:anywhere}
:is(.hero-actions,.footer-bottom){flex-wrap:wrap}
/* Keep captions together and use the established dark-surface text colour. */
.work-section .section-heading h2>span{color:var(--on-ink-2)}
.project-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.project-caption .round{margin-top:2px}
.secondary-media{height:auto;aspect-ratio:16/10}
.lexer-ai-media{aspect-ratio:16/9}
.lexer-ai-media img{object-fit:contain}
.nav nav{min-width:0}
.nav nav a{justify-content:center;min-width:44px}
.nav-contact{flex-shrink:0}
.case-study .story-copy section{scroll-margin-top:20px}
@media(max-width:950px){
 .nav{padding-inline:clamp(20px,4vw,40px);gap:20px}
 .nav .brand-home{width:160px}
 .nav nav{gap:24px}
 .about{grid-template-columns:1fr;gap:32px}
 .about-copy>p{max-width:66ch}
}
@media(min-width:701px) and (max-width:900px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:72px;min-height:0}
 .identity{max-width:100%}
 .hero-actions{gap:16px}
 .project-grid{grid-template-columns:1fr}
 .section-heading{align-items:start;gap:24px}
 .section-heading>p{max-width:30ch}
}
@media(max-width:600px){
 :root{--site-header-height:112px}
 .nav{height:auto;min-height:var(--site-header-height);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 20px;padding:8px 20px 4px;padding-top:max(8px,env(safe-area-inset-top))}
 .nav .brand-home{width:130px;min-height:44px;grid-column:1;grid-row:1}
 .nav .nav-contact{grid-column:2;grid-row:1;padding:10px 16px;min-height:44px;font-size:13px}
 .nav nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;gap:32px;font-size:14px}
 .nav nav a:last-child{display:inline-flex}
 .nav nav a{padding:8px;min-height:44px}
 .case-next{padding:28px;align-items:start;flex-direction:column}
 .case-next h3{font-size:clamp(24px,6vw,30px)}
 .case-next .pill{max-width:100%;white-space:normal;text-align:left}
 .footer-bottom{gap:12px 24px}
 .footer-main h2{font-size:clamp(38px,10vw,49px)}
 .project-caption .round{flex-shrink:0}
}
@media(max-width:360px){
 .nav{padding-inline:16px;column-gap:12px}
 .nav .brand-home{width:120px}
 .nav nav{gap:24px}
 .hero-actions{gap:12px}
 .hero-actions .pill{padding-inline:18px}
 .result-sticker{width:160px;right:12px;bottom:12px}
}
@media(max-width:360px){.identity{width:240px}.deck-card{width:260px;margin-left:-130px}}

@media(max-width:700px){
 .home .dashboard-media{height:auto;aspect-ratio:4/3;display:grid;place-items:center;padding:24px 16px}
 .home .dashboard-media img{width:100%;max-width:100%;margin:0}
 .home .project-caption h3{font-size:23px;line-height:1.25}
 .home .project-caption{gap:12px}
}