/* Archive motion: three visible planes, two softly receding previews. */
[data-mode=archive] #portfolio{max-width:1440px;grid-template-columns:245px minmax(0,1fr);column-gap:90px;padding:clamp(70px,16vh,160px) 130px 85px 65px}
[data-mode=archive] .home-view{max-width:620px;margin:auto}
[data-mode=archive] .work-stage{aspect-ratio:1.95;margin:50px 0 0;perspective:none}
[data-mode=archive] .work-card{transform-origin:center top;transition:none;will-change:transform,opacity,filter;box-shadow:0 17px 32px -27px #1e253840;border-radius:4px}
[data-mode=archive] .work-card.active:hover{box-shadow:0 17px 32px -27px #1e253840}
[data-mode=archive] .visual{padding:5%;border-radius:4px}
[data-mode=archive] .visual img{max-width:100%;max-height:100%;height:auto;object-fit:contain}
[data-mode=archive] .visual[data-visual=lynk]{padding:0;background:#cbd0d2}
[data-mode=archive] .visual[data-visual=lynk] img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0;box-shadow:none}
[data-mode=archive][data-presentation=devices] .visual{padding:0;background:#e9e9e9}
[data-mode=archive][data-presentation=devices] .visual img{width:100%;height:100%;object-fit:contain;box-shadow:none;border-radius:0}
[data-mode=archive] .timeline{right:-78px;top:50%;width:60px}
[data-mode=archive] .timeline button{height:48px}
[data-mode=archive] .timeline span{display:block;opacity:1;right:34px;top:8px;font-size:10px;color:#b0b0b2;transform:none;transition:color .3s}
[data-mode=archive] .timeline button[aria-current=true] span,[data-mode=archive] .timeline button:hover span{color:#444}
[data-mode=archive] .timeline b{width:8px;background:#dededf}
[data-mode=archive] .timeline i{width:16px;background:#c9c9cc}
[data-mode=archive] .timeline button[aria-current=true] i{width:29px;background:#555}
[data-mode=archive] .timeline button:hover i{width:29px}
[data-mode=archive] .company{transition:background .3s,opacity .3s,box-shadow .3s;}
/* Detail: a persistent left rail, with a separate reading column. */
[data-mode=archive].is-detail #portfolio{display:grid;grid-template-columns:245px minmax(0,1fr);grid-template-rows:auto;gap:90px;max-width:1440px;padding:85px 65px 90px}
[data-mode=archive].is-detail .identity{display:none}
[data-mode=archive].is-detail .work-area{grid-column:2;grid-row:1;align-self:start}
[data-mode=archive].is-detail .back-button{position:fixed;top:52px;left:max(65px,calc((100vw - 1310px)/2));right:auto;padding:0;gap:10px;color:#767678;font-size:13px}
.case-index{position:fixed;top:112px;width:235px}
.case-label{font-size:24px;letter-spacing:-.6px}.case-dates{font-size:12px;color:#969699;margin-top:10px}
.case-index nav{display:flex;flex-direction:column;gap:18px;margin-top:36px;font-size:13px;color:#9b9b9d}
.case-index a[aria-current=true]{color:#252526}.case-index a{transition:color .2s}
[data-mode=archive].is-detail .company-nav{position:fixed;top:330px;left:auto;width:235px;transform:none;flex-direction:column;gap:5px;background:none;padding:0;backdrop-filter:none;border-radius:0;box-shadow:none}
[data-mode=archive].is-detail .company{width:100%;height:52px;justify-content:flex-start;gap:13px;padding:8px 10px;opacity:.4;transform:none}
[data-mode=archive].is-detail .company[aria-pressed=true],[data-mode=archive].is-detail .company:hover{opacity:1}
[data-mode=archive].is-detail .company img{width:32px;height:32px}
[data-mode=archive].is-detail .company-copy{display:flex}
[data-mode=archive].is-detail .company strong{font-size:13px}
[data-mode=archive].is-detail .company small{font-size:10px}
[data-mode=archive] .case-intro{text-align:left;padding:0 0 35px;max-width:none}
[data-mode=archive] .case-intro h1{font-size:clamp(28px,3vw,40px);max-width:620px;letter-spacing:-1px;margin:14px 0}
[data-mode=archive] .case-intro p{font-size:14px;line-height:1.6;margin:0;max-width:580px}
[data-mode=archive] .case-hero{aspect-ratio:1.7;margin:0 0 65px;width:100%;scroll-margin-top:45px}
.case-role{margin:0 0 60px;scroll-margin-top:60px}.case-role h2{font-weight:400;font-size:22px;letter-spacing:-.3px}.case-role p{font-size:15px;color:#777;line-height:1.8;max-width:610px}
[data-mode=archive] .case-gallery{gap:36px 22px;scroll-margin-top:40px}
[data-mode=archive] .case-figure>div{border-radius:4px;overflow:hidden}
@media(max-width:1100px) and (min-width:721px){[data-mode=archive] #portfolio{grid-template-columns:210px minmax(0,1fr);padding:80px 100px 85px 36px;column-gap:45px}[data-mode=archive].is-detail #portfolio{grid-template-columns:210px minmax(0,1fr);gap:35px;padding:80px 36px}[data-mode=archive].is-detail .back-button{left:36px}.case-index,[data-mode=archive].is-detail .company-nav{width:200px}[data-mode=archive] .timeline{right:-72px}}
@media(max-width:720px){[data-mode=archive] #portfolio{display:flex;padding:38px 24px 85px;gap:0}[data-mode=archive] .work-stage{margin:48px 0 0;aspect-ratio:1.85}[data-mode=archive] .work-card{transform:translateY(calc(var(--depth)*-22px)) scale(calc(1 - var(--depth)*.065))}[data-mode=archive] .timeline{position:relative;right:auto;top:auto;transform:none;flex-direction:row;width:100%;gap:15px;margin:24px 0 0;justify-content:space-between}[data-mode=archive] .timeline button{height:35px;width:38px;justify-content:flex-end;padding:5px 0}[data-mode=archive] .timeline span{top:0;left:0;right:0;text-align:center;font-size:10px}[data-mode=archive] .timeline i{height:2px}[data-mode=archive] .company-nav{margin:28px 0 18px}.presentation-options{margin-top:18px}[data-mode=archive].is-detail #portfolio{display:block;padding:195px 24px 60px}[data-mode=archive].is-detail .back-button{top:23px;left:24px}.case-index{top:19px;left:115px;right:24px;width:auto;background:#f5f5f4;z-index:32}.case-label{font-size:17px}.case-dates{font-size:10px;margin-top:3px}.case-index nav{flex-direction:row;gap:22px;margin-top:17px;font-size:11px;position:fixed;left:24px;top:118px}[data-mode=archive].is-detail .company-nav{flex-direction:row;top:65px;left:20px;width:calc(100% - 40px);justify-content:space-between;z-index:35;background:#f5f5f4;padding:6px 0}[data-mode=archive].is-detail .company{width:45px;height:44px;justify-content:center;padding:6px}[data-mode=archive].is-detail .company-copy{display:none}[data-mode=archive].is-detail::before{content:'';position:fixed;inset:0 0 auto;height:170px;background:#f5f5f4f5;backdrop-filter:blur(16px);z-index:30}[data-mode=archive] .case-intro h1{font-size:30px}[data-mode=archive] .case-hero{scroll-margin-top:190px;margin-bottom:40px}.case-role,[data-mode=archive] .case-gallery{scroll-margin-top:190px}.case-role{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){[data-mode=archive] .work-card{transition:none}}

[data-mode=archive] .intro{font-size:20px;line-height:1.45}
[data-mode=archive].is-detail .company-nav{margin:0}

/* Frame the photographic background, keeping the devices inside the crop. */
[data-mode=archive][data-presentation=devices] .visual img{object-fit:contain;object-position:center}
[data-mode=archive] .visual[data-visual=lynk] img,[data-mode=archive][data-presentation=devices] .visual[data-visual=lynk] img{object-fit:cover;object-position:50% 50%}
@media(min-width:721px){
 [data-mode=archive] .home-view{width:100%;max-width:720px;height:var(--rail-height,480px);margin:0 auto}
 [data-mode=archive] .stage-wrap{height:100%;padding-top:50px}
 [data-mode=archive] .work-stage{height:calc(var(--rail-height,480px) - 50px);aspect-ratio:auto;margin:0}
 [data-mode=archive] .timeline{position:fixed;top:var(--timeline-center,50%);right:0;width:72px;height:var(--rail-height,480px);transform:translateY(-50%);margin:0;gap:0;z-index:10}
 [data-mode=archive] .timeline button{height:20%;padding-right:0}
 [data-mode=archive] .timeline span{right:35px;top:8px}
}

[data-mode=archive] .company{border-radius:5px}
[data-mode=archive] .company[aria-pressed=true]{box-shadow:none;background:#ffffff95}
[data-mode=archive] .case-hero .visual{border-radius:4px}
[data-mode=archive] .home-footer>span{display:none}
@media(min-width:721px){[data-mode=archive]:not(.is-detail) .work-area{align-self:start;margin-top:0}}
@media(max-width:720px){[data-mode=archive] .timeline{top:auto}[data-mode=archive] .work-stage{aspect-ratio:1.6}}
.timeline-toggle{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:#929295;padding:0;margin-left:auto}
.timeline-toggle:hover{color:#454548}
.timeline-toggle i{position:relative;display:block;width:23px;height:13px;border-radius:8px;background:#dddde0;transition:background .2s}
.timeline-toggle i::after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px #00000012}
.timeline-toggle[aria-pressed=true] i{background:#85858a}
.timeline-toggle[aria-pressed=true] i::after{transform:translateX(10px)}
/* Home controls remain quiet, with room recovered when the timeline is hidden. */
.presentation-toggle{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:11px}
.presentation-toggle button{padding:4px 7px;color:#aaa;transition:color .2s,background .2s;border-radius:3px}
.presentation-toggle button[aria-pressed=true]{color:#555;background:#ffffff80}
.presentation-toggle+.timeline-toggle{margin-left:15px}
@media(min-width:721px){
 [data-mode=archive]:not(.is-detail) #portfolio{transition:padding-right 500ms var(--ease-spring)}
 [data-mode=archive] .home-view{transition:max-width 500ms var(--ease-spring)}
 [data-mode=archive][data-timeline=hidden]:not(.is-detail) #portfolio{padding-right:90px}
 [data-mode=archive][data-timeline=hidden] .home-view{max-width:810px}
}
@media(min-width:721px) and (max-width:1100px){[data-mode=archive][data-timeline=hidden]:not(.is-detail) #portfolio{padding-right:64px}}
/* The left experience rail retains its home geometry in a case study. */
[data-mode=archive].is-detail .identity{display:block;position:fixed;top:var(--identity-top,85px);left:var(--identity-left,65px);width:var(--identity-width,245px);z-index:32}
[data-mode=archive].is-detail .identity .name,[data-mode=archive].is-detail .case-intro{display:none}
.rail-case-title{font-size:24px;font-weight:400;line-height:1.22;letter-spacing:-.6px;margin:0}
.rail-case-description{font-size:13px;line-height:1.55;color:#828285;margin:12px 0 0}
.rail-case-title:focus{outline:none}
[data-mode=archive].is-detail .back-button{left:var(--identity-left,65px);top:max(12px,calc(var(--identity-top,85px) - 42px))}
[data-mode=archive].is-detail .company-nav{top:var(--company-top,280px);left:var(--company-left,53px);width:var(--company-width,245px);gap:var(--company-list-gap,7px);justify-content:flex-start}
[data-mode=archive].is-detail .company{height:var(--company-height,61px);width:100%;padding:var(--company-padding,11px 12px);gap:var(--company-gap,15px);border-radius:5px}
[data-mode=archive].is-detail .company img{height:var(--company-logo-size,39px);width:var(--company-logo-size,39px);border-radius:8px}
[data-mode=archive].is-detail .company strong{font-size:var(--company-name-size,16px)}
[data-mode=archive].is-detail .company small{font-size:var(--company-role-size,12px)}
[data-mode=archive].is-detail .case-index{top:calc(var(--company-top,280px) + 5*var(--company-height,61px) + 4*var(--company-list-gap,7px) + 24px);left:var(--identity-left,65px);width:var(--identity-width,245px)}
.case-index .case-label,.case-index .case-dates{display:none}
.case-index nav{flex-direction:row;gap:17px;margin:0;font-size:11px;position:static}
@media(max-width:720px){
 [data-mode=archive] .home-footer{flex-wrap:wrap;gap:12px 16px;bottom:24px;align-items:center}
 .presentation-toggle{margin-left:auto;font-size:10px}
 .presentation-toggle+.timeline-toggle{margin-left:auto;font-size:10px}
 [data-mode=archive].is-detail .identity{top:var(--identity-top,38px);left:24px;width:calc(100% - 48px)}
 .rail-case-title{font-size:22px;line-height:1.2}.rail-case-description{font-size:12px;line-height:1.5;margin-top:8px}
 [data-mode=archive].is-detail .company-nav{left:var(--company-left,24px);width:var(--company-width,342px);padding:0;gap:var(--company-list-gap,7px);justify-content:space-between}
 [data-mode=archive].is-detail .company{width:52px;height:var(--company-height,50px);padding:7px;justify-content:center}
 [data-mode=archive].is-detail .case-index{top:calc(var(--company-top,180px) + var(--company-height,50px) + 24px);left:24px;width:calc(100% - 48px);right:auto;background:none}
 [data-mode=archive].is-detail .case-index nav{position:static}
 [data-mode=archive].is-detail::before{height:calc(var(--company-top,180px) + var(--company-height,50px) + 55px)}
 [data-mode=archive].is-detail #portfolio{padding-top:calc(var(--company-top,180px) + var(--company-height,50px) + 65px)}
}

/* Fill the scene width with its photographic background instead of grey bars. */
[data-mode=archive][data-presentation=devices] .visual img{object-fit:cover;object-position:50% 58%}