/* Mobile experience: preserve the artwork and make every interaction touch accessible. */
@media(max-width:1000px){
 body{padding-top:80px}body.home{padding-top:0}
 body>header,.home>header{position:fixed;inset:0 0 auto;height:80px;padding:0 max(5vw,env(safe-area-inset-left));background:var(--paper);border-bottom:1px solid var(--line);z-index:50}
 .we{display:none}.brand{font-size:12px}.brand small{font-size:9px}.signature{width:30px;height:54px}
 .menu-toggle{display:block;min-width:64px;min-height:48px;padding:10px 0 10px 12px;font-size:16px}
 header nav{display:none;position:fixed;inset:80px 0 0;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:28px 6vw max(28px,env(safe-area-inset-bottom));box-shadow:none;font-size:clamp(24px,5vw,36px);gap:10px;flex-direction:column}
 header nav.open{display:flex}header nav a{display:block;padding:16px 0;line-height:1.25;min-height:56px}
 body.menu-open{overflow:hidden}
 .page,.project-page{scroll-margin-top:96px}.services{scroll-margin-top:100px}
 button,input,textarea,summary{font-size:16px}button,summary{min-height:44px}
 .footer-bottom>div{flex-wrap:wrap;gap:12px 24px}.footer-bottom a,.footer-bottom button{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
 .reveal-controls button,.reveal-controls>a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
 .reveal-surface{cursor:pointer;touch-action:pan-y pinch-zoom}
 .study-controls button{min-height:48px}.reference-marker{min-height:44px}
}
@media(max-width:760px){
 .page,.project-page{padding-left:6vw;padding-right:6vw}
 h1,.page-intro h1{font-size:clamp(42px,10.5vw,72px);overflow-wrap:break-word}
 .contact-page h1{font-size:clamp(40px,10.5vw,64px)}
 .page-intro a{overflow-wrap:anywhere}.eyebrow{line-height:1.5;letter-spacing:.11em}
 .page-intro{margin-bottom:40px}.back{min-height:44px;display:inline-flex;align-items:center;margin-bottom:28px}
 .studio-intro h2{font-size:clamp(32px,8vw,45px)}
 .project-story p,.case-story>div>p,.lab-intro,.service-intro{font-size:16px;line-height:1.65}
 .case-category,.portfolio-meta p{line-height:1.6}
 .case-heading,.case-story,.case-pair,.lab-split,.direction-copy,.service-grid,.newsletter-layout{min-width:0}
 .case-heading>*,.case-story>*,.lab-split>*,.service-grid>*{min-width:0}
 .lab-index .lab-card{aspect-ratio:4/5}.lab-card>div{left:22px;right:22px;bottom:26px}
 .lab-index .lab-card h2{font-size:clamp(32px,8vw,48px);line-height:1.06}
 .lab-card .eyebrow{margin-bottom:12px}.lab-index .lab-card p{margin-bottom:16px}
 .study-controls{gap:8px}.study-controls button{padding:10px 14px}
 .reference-details{min-height:0}.reference-explorer{margin:55px 0}
 .reference-marker{box-shadow:0 0 0 3px #ffffff25}.reference-panel h3{margin-bottom:20px}
 .reference-panel figure img{max-height:320px}
 .apple-sketch{padding:12px}.nike-sequence{padding:28px 18px}
 .lab-monthly{padding:32px 22px}.lab-monthly h2{font-size:clamp(34px,8vw,52px)}
 .footer-title{font-size:clamp(38px,10vw,64px);line-height:1.1}.footer-title>span{float:none;display:inline-block;margin-left:10px}
 .site-footer{padding:45px 6vw max(25px,env(safe-area-inset-bottom))}
 .footer-bottom{display:block}.footer-bottom>div{margin-top:16px}.music-credit{overflow-wrap:anywhere}
 .feature-work>span{flex-wrap:wrap;gap:12px}.form-note,.form-status{font-size:14px;overflow-wrap:anywhere}
 .solid{width:100%;min-height:52px}input:not([type=checkbox]),textarea{font-size:16px;min-height:48px}
 .consent input{flex-shrink:0;width:22px;height:22px}.consent{font-size:14px;line-height:1.5}
 /* A flexible scene avoids overlaps between title, controls, artwork and copy. */
 #journey{height:420svh}
 .journey-sticky{height:100svh;min-height:610px;display:grid;grid-template-rows:auto auto minmax(100px,1fr) auto auto;gap:8px;padding:96px 6vw max(12px,env(safe-area-inset-bottom));overflow:hidden}
 .hero-title{position:static;grid-row:1;opacity:1!important}
 .hero-title .eyebrow{font-size:11px;margin-bottom:8px}
 .hero-title h1{font-size:clamp(34px,8.5vw,48px);max-width:none;line-height:1.04}
 .hero-title h1 em{display:inline}
 .scene-tools{position:static;grid-row:2;justify-content:space-between;gap:12px;font-size:10px}
 .scene-tools>span{display:block;font-size:10px;letter-spacing:.06em}.scene-tools button{min-height:44px;font-size:12px;padding:8px 0}
 #scene{position:relative;inset:auto;grid-row:3;min-height:100px;width:calc(100% + 6vw);margin-left:-3vw}
 .phase-copy{position:static;grid-row:4;display:grid;grid-template-columns:1fr;gap:4px;pointer-events:auto;align-content:start}
 .phase-copy>span{font-size:12px}.phase-copy h2{font-size:clamp(22px,5.8vw,28px);margin:0;line-height:1.12}
 .phase-copy p{font-size:14px;line-height:1.5;max-width:none}
 .phase-copy>a{display:inline-flex;align-items:center;justify-self:start;min-height:44px;margin:0;font-size:14px;white-space:normal}
 .journey-bottom{position:static;grid-row:5}.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 .phases button{font-size:12px;line-height:1.3;min-height:52px;padding:6px 0;gap:5px}.phases button small{font-size:12px}
 .phases button[aria-current] small{min-width:25px;text-align:center}.progress{margin-top:4px}
 .scroll-hint{display:none}.home-work h2{font-size:clamp(36px,9vw,64px)}
}
@media(max-width:600px){
 .detail-gallery,.case-pair,.cafe-pair,.process-grid{grid-template-columns:1fr;gap:28px}
 .case-pair figure:last-child{margin-top:0}.snowflake-story{grid-template-columns:1fr}
 .snowflake-story>div:first-child,.iteration-sheet{grid-column:auto}
 .study-controls button{flex:1 1 auto}.nike-sequence .study-controls button{padding:10px 8px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){#motion{display:none}.kinetic{perspective:none}}
/* Drawn arrows avoid platform-dependent emoji rendering. */
.link-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.1em;flex:none;margin-left:.18em;color:inherit}
.footer-title .link-arrow{width:.85em;height:.85em;color:#E38C39}
.phase-copy .link-arrow{color:#E38C39}
.touch-reveal-hint{display:none}
@media(hover:none) and (pointer:coarse){
 .touch-reveal-hint{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}
 .reveal-surface{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 .reveal-surface img{-webkit-user-drag:none}
}
@media(max-width:760px){
 /* Reset the tablet CTA column: otherwise it creates an unintended second column. */
 .phase-copy>*{grid-column:1/-1;grid-row:auto;justify-self:start;min-width:0}
 .phase-copy{gap:8px;padding-top:12px}
 .phase-copy>span{font-size:11px;letter-spacing:.12em}
 .phase-copy h2{font-size:clamp(23px,5.8vw,28px);line-height:1.15}
 .phase-copy p{max-width:38ch;line-height:1.5}
 .phase-copy>a{justify-self:stretch;display:flex;justify-content:space-between;gap:20px;margin-top:4px;padding:10px 0;min-height:46px;border-top:1px solid var(--line);text-decoration:none}
 .phase-copy>a .link-arrow{width:20px;height:20px;margin-left:auto}
 .journey-bottom{margin-top:4px}
 .footer-bottom a{gap:5px}
}
@media(prefers-reduced-motion:reduce){.touch-reveal-hint{display:none}}

/* Keep all five phases scrollable within a short landscape viewport. */
@media(max-width:1000px) and (orientation:landscape) and (max-height:600px){
 .home>header{height:56px}.home .signature{height:42px}
 .home header nav{inset:56px 0 0}
 #journey{height:560svh}
 .journey-sticky{position:sticky;top:0;height:100svh;min-height:300px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 48px;gap:6px 24px;padding:64px max(4vw,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));overflow:hidden}
 .hero-title{position:static;grid-column:1;grid-row:1;opacity:1!important}
 .hero-title .eyebrow{display:none}.hero-title h1{font-size:clamp(20px,3.5vw,30px);line-height:1.05;max-width:none}.hero-title h1 em{display:inline}
 .scene-tools{position:static;grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center}
 .scene-tools>span{display:none}.scene-tools button{font-size:12px;min-height:36px;padding:4px 0}
 #scene{position:relative;inset:auto;grid-column:1;grid-row:2;width:100%;height:100%;min-height:0;margin:0}
 .phase-copy{position:static;grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:0;pointer-events:auto}
 .phase-copy>span{font-size:10px}.phase-copy h2{font-size:22px;line-height:1.1;margin:0}
 .phase-copy p{font-size:13px;line-height:1.35;max-width:36ch}
 .phase-copy>a{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:13px;min-height:36px;padding:4px 0;margin:0;gap:10px;white-space:normal}
 .journey-bottom{position:static;grid-column:1/-1;grid-row:3;margin:0}
 .phases{display:flex;justify-content:space-between;gap:8px}
 .phases button{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:12px;min-height:40px;padding:4px 0}
 .phases button small{font-size:11px}.progress{margin-top:2px}.scroll-hint{display:none}
}