.project-page .site-header{height:68px}
.project-main{max-width:1360px}
.case-switcher{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #dedede}
.case-switcher-inner{display:flex;align-items:center;gap:24px;width:min(1360px,calc(100% - 88px));min-height:54px;margin-inline:auto}
.case-switcher a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;padding:0 10px;white-space:nowrap}
.case-return{color:#737373;margin-left:-10px}
.case-tabs{display:flex;align-items:center;gap:8px}
.case-tabs a{border-bottom:2px solid transparent}
.case-tabs a[aria-current="page"]{border-color:#222222;color:#222222}
.case-switcher a:hover{color:#222222}
.project-hero{display:flex;align-items:end;justify-content:space-between;gap:45px;padding:24px 0}
.project-hero .kicker{color:#222222;margin-bottom:17px}
.project-hero h1{font-size:clamp(40px,4.5vw,64px);font-weight:700;letter-spacing:-2.8px;line-height:1;margin:0}
.hero-aside{max-width:380px;padding-bottom:5px}
.hero-aside p{font-size:14px;line-height:1.7;margin:0 0 14px;color:#606060}
.hero-aside>span{font:9px var(--mono);color:#888}
.project-cover,.detail-stage{margin:0;background:var(--stage);color:var(--stage-ink);padding:36px 6% 25px}
.project-cover.cover-plain{padding:0;background:#fff;color:#777}
.cover-plain>img{display:block;width:100%;height:auto;border:1px solid #e8e8e8}
.cover-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font:9px var(--mono);text-transform:uppercase;letter-spacing:.6px;margin:0 0 30px}
.project-cover .screen-browser,.detail-stage .screen-browser{border-radius:5px;box-shadow:0 20px 55px #0002}
.project-cover .browser-rail,.detail-stage .browser-rail{height:26px;padding:0 13px;gap:5px}
.project-cover .browser-rail i,.detail-stage .browser-rail i{width:5px;height:5px}
.project-cover .browser-rail span,.detail-stage .browser-rail span{font-size:8px}
.project-cover figcaption,.detail-stage figcaption{font:9px var(--mono);opacity:.65;text-align:center;margin-top:23px}
.project-overview{display:grid;grid-template-columns:1.7fr 1fr;gap:100px;padding:60px 0}
.project-overview h2{font-size:clamp(27px,2.8vw,41px);font-weight:600;line-height:1.1;letter-spacing:-1.5px;max-width:650px;margin:0 0 24px}
.project-description{font-size:15px;line-height:1.85;color:#676767;max-width:740px;margin:0}
.project-meta{display:grid;gap:28px;align-content:start;padding-top:5px}
.project-tags{display:flex;flex-wrap:wrap;gap:8px 17px;font:9px/1.8 var(--mono);color:#666}
.project-palette{display:flex;gap:14px;font:8px var(--mono);color:#888}
.project-palette>span{display:block;flex:1}
.project-palette i{display:block;background:var(--swatch);height:38px;margin-bottom:10px;border:1px solid #0001}
.project-links{display:flex;flex-wrap:wrap;gap:12px}
.project-links>a{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:#222222;color:#fff;padding:12px 18px;min-height:44px;font-size:12px}
.project-links>a:hover{background:#111}
.project-links>a.secondary{background:#fff;color:#111;border:1px solid #111}
.project-links>p{font-size:11px;color:#777;line-height:1.7;margin:0;max-width:320px}
.project-story{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid #d7d7d7;padding:32px 0 56px}
.project-story>div{display:grid;grid-template-columns:27px 1fr;gap:16px}
.project-story>div>span{font:9px var(--mono);color:#888;padding-top:7px}
.project-story h2{font-size:26px;letter-spacing:-.7px;margin:0}
.project-story p{grid-column:2;font-size:13px;line-height:1.85;color:#666;margin:0;max-width:560px}
.case-chapter{padding-top:32px}
.chapter-head{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:end;margin-bottom:26px}
.chapter-head>span{font:9px var(--mono);color:#777;grid-column:1 / -1}
.chapter-head h2{font-size:clamp(25px,2.8vw,40px);font-weight:600;line-height:1.1;letter-spacing:-1.3px;margin:0;max-width:750px}
.chapter-head>p{font:9px/1.6 var(--mono);color:#777;max-width:230px;text-align:right;margin:0}
.detail-stage{padding-top:42px}
.mobile-chapter{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;margin-top:50px}
.mobile-copy{max-width:470px;padding-left:9%}
.mobile-copy h2{font-size:clamp(30px,3vw,45px);line-height:1.08;letter-spacing:-1.8px;font-weight:600;margin:0 0 24px}
.mobile-copy>p:not(.kicker){font-size:14px;line-height:1.8;color:#777;margin:0 0 30px}
.mobile-spec{font:9px var(--mono);color:#888}
.mobile-stage{display:grid;justify-items:center;background:var(--stage);color:var(--stage-ink);margin:0;padding:45px 30px 30px}
.mobile-device{width:65%;max-width:270px;background:#161715;border:4px solid #161715;padding:4px;border-radius:29px;overflow:hidden;box-shadow:0 20px 45px #0003}
.mobile-device img{display:block;width:100%;height:auto;border-radius:20px}
.mobile-stage figcaption{font:9px var(--mono);opacity:.65;margin-top:25px}
.project-next{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:60px;margin-top:72px;border-top:1px solid #111;border-bottom:1px solid #111;padding:28px 0}
.project-next>div>span{display:block;font:9px var(--mono);color:#777;margin-bottom:24px}
.project-next>div>a{display:flex;align-items:center;gap:50px;font-size:clamp(25px,3.5vw,48px);font-weight:600;letter-spacing:-1.5px}
.project-next>div>a:hover{color:#222222}
.next-preview{padding:18px;background:var(--stage);overflow:hidden}
.next-preview img{width:100%;height:auto;display:block;transition:transform .3s}
.next-preview:hover img{transform:scale(1.03)}
.project-bottom{display:flex;justify-content:space-between;gap:25px;margin-top:32px;font-size:11px}
.project-bottom a:hover{color:#222222}
.project-bottom>a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1100px){.case-switcher-inner{width:calc(100% - 56px)}.project-hero h1{font-size:64px;letter-spacing:-3px}.project-overview{gap:50px}.project-next{grid-template-columns:1fr 230px}.mobile-chapter{gap:45px}.mobile-copy{padding-left:0}}
@media(max-width:760px){
  .project-page .site-header{height:60px}
  .case-switcher-inner{width:calc(100% - 40px);min-height:50px;gap:8px}.case-switcher a{font-size:11px;padding:0 7px}.case-return{margin-left:-7px}.case-tabs{gap:0}
  .project-hero{display:block;padding:22px 0}.project-hero h1{font-size:clamp(39px,10vw,68px);letter-spacing:-2.5px;overflow-wrap:anywhere}.hero-aside{padding:0;margin-top:16px;max-width:none}.hero-aside p{font-size:12px;margin-bottom:10px}.hero-aside>span{font-size:8px}
  .project-cover,.detail-stage{padding:22px 5% 19px}.cover-top{font-size:7px;letter-spacing:0;gap:10px;margin-bottom:20px}.project-cover .browser-rail,.detail-stage .browser-rail{height:18px}.project-cover .browser-rail i,.detail-stage .browser-rail i{width:4px;height:4px}.project-cover .browser-rail span,.detail-stage .browser-rail span{font-size:6px}.project-cover figcaption,.detail-stage figcaption{font-size:7px;margin-top:16px}
  .project-overview{grid-template-columns:1fr;gap:27px;padding:35px 0}.project-overview h2{font-size:29px;letter-spacing:-1px;margin-bottom:20px}.project-description{font-size:13px}.project-meta{gap:20px}.project-palette{max-width:320px}.project-palette i{height:32px}.project-links>p{max-width:none}
  .project-story{grid-template-columns:1fr;gap:28px;padding:28px 0 35px}.project-story>div{gap:12px}.project-story h2{font-size:25px}.project-story p{font-size:12px}.case-chapter{padding-top:15px}.chapter-head{grid-template-columns:1fr;gap:13px;margin-bottom:20px}.chapter-head h2{font-size:29px;letter-spacing:-1px}.chapter-head>p{text-align:left;max-width:none;font-size:8px}
  .mobile-chapter{grid-template-columns:1fr;gap:25px;margin-top:35px}.mobile-copy{max-width:470px;padding:0}.mobile-copy h2{font-size:31px;letter-spacing:-1.2px;margin-bottom:18px}.mobile-copy>p:not(.kicker){font-size:13px;margin-bottom:20px}.mobile-stage{padding:30px 20px 24px}.mobile-device{width:64%;max-width:260px;border-radius:26px}.mobile-device img{border-radius:17px}.mobile-stage figcaption{font-size:8px}
  .project-next{grid-template-columns:1fr 100px;gap:20px;margin-top:40px;padding:24px 0}.project-next>div>span{font-size:7px;margin-bottom:17px}.project-next>div>a{font-size:clamp(19px,5.5vw,30px);gap:15px;letter-spacing:-.8px}.project-next>div>a>span{font-size:25px}.next-preview{padding:8px}.project-bottom{font-size:10px;gap:25px;margin-top:26px}
}
@media(max-width:480px){.project-next{grid-template-columns:1fr 80px}.project-next>div>a{font-size:21px}.project-bottom{flex-wrap:wrap}}