/* Shared Work / project-story system. Inherits the site's paper, ink,
   field, narrow gutters, Cabinet Grotesk and easing from page.css. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
.work-index,.case-study-page{--copy:#454541;overflow-x:clip}
.case-study-page{--project-field:var(--field);--project-ink:var(--ink);--project-accent:var(--line)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
button[hidden],[hidden]{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.skip-link{position:fixed;top:12px;left:var(--pad);z-index:60;background:var(--paper);border:1px solid var(--ink);padding:12px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.section-label{font-size:.875rem;line-height:1.4;font-weight:500;color:var(--copy);margin:0}
.page-marker{position:absolute;right:var(--pad);top:calc(var(--pad) * .55);font-size:clamp(30px,4.2vw,74px);font-weight:900;line-height:.82;letter-spacing:-.035em;margin:0}
.work-hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:130px var(--pad);overflow:hidden}
.work-hero-type{position:relative;z-index:2;text-align:center;width:72%;transform:translate(var(--type-x,0px),var(--type-y,0px));transition:transform .65s var(--ease)}
.work-hero-type .section-label{margin-bottom:32px}
.work-hero h1{font-size:clamp(3.5rem,8.3vw,10rem);font-weight:900;line-height:.9;letter-spacing:-.045em;margin:0}
.type-line{display:block;padding:.07em 0;margin:-.035em 0;overflow:hidden}
.type-line>span{display:inline-block}
.hero-description{font-size:clamp(1.0625rem,1.4vw,1.5rem);line-height:1.45;margin:30px 0 0;color:var(--copy)}
.hero-picture{position:absolute;width:20vw;max-width:350px;aspect-ratio:4/3;overflow:hidden;background:var(--field);transform:translate(var(--image-x,0px),calc(var(--image-y,0px) + var(--scroll-shift,0px)));transition:transform .7s var(--ease)}
.hero-picture img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hero-picture--one{left:var(--pad);top:12%}
.hero-picture--two{right:var(--pad);bottom:12%;aspect-ratio:3/2}
.hero-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:end;font-size:.875rem}
.hero-bottom>span{color:var(--copy)}
.hero-bottom>a{justify-self:center;padding:7px 0;border-bottom:1px solid var(--line)}
.motion-toggle{justify-self:end;font-size:.875rem;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 0}
.work-collection{padding:0 var(--pad) 80px;scroll-margin-top:20px}
.collection-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding:22px 0 40px}
.collection-heading h2{font-size:clamp(1.5rem,2.2vw,2.75rem);letter-spacing:-.025em;margin:0}
.collection-heading p,.collection-heading>span{font-size:.875rem;color:var(--copy);margin:0}
.project-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px var(--pad)}
.project-card{min-width:0}
.project-card:first-child{grid-column:1/-1}
.project-card:nth-child(odd):not(:first-child){padding-top:90px}
.project-link{display:block}
.project-cover{position:relative;aspect-ratio:4/3;background:var(--field);overflow:hidden}
.project-card:first-child .project-cover{aspect-ratio:16/9}
.project-cover>img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.project-link:hover img,.project-link:focus-visible img{transform:scale(1.025)}
.project-open{position:absolute;right:18px;bottom:18px;background:var(--paper);padding:10px 14px;font-size:.875rem;transform:translateY(8px);opacity:0;transition:transform .4s var(--ease),opacity .4s}
.project-link:hover .project-open,.project-link:focus-visible .project-open{transform:none;opacity:1}
.project-information{display:grid;grid-template-columns:1fr auto;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.project-information h3{font-size:clamp(1.875rem,3.5vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.project-information p{font-size:clamp(1rem,1.25vw,1.375rem);line-height:1.4;color:var(--copy);margin:8px 0 0}
.project-number{font-size:.875rem;color:var(--copy)}
.project-placeholder{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,50px);height:100%}
.project-placeholder>span{font-size:.875rem;color:var(--copy)}
.project-placeholder strong{font-size:clamp(3rem,7vw,9rem);letter-spacing:-.045em;font-weight:900;line-height:.95}
.project-placeholder small{font-size:.875rem;color:var(--copy)}
.work-close{border-top:1px solid var(--line);text-align:center;padding:clamp(70px,8vw,150px) var(--pad)}
.work-close h2{font-size:clamp(3.5rem,8vw,9rem);line-height:.9;letter-spacing:-.04em;font-weight:900;margin:32px 0}
.work-close>a{display:inline-block;font-size:clamp(1.125rem,1.5vw,1.5rem);border-bottom:1px solid;padding:6px 0}
.work-footer{margin:0 var(--pad);padding:26px 0 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-size:.875rem}
.work-footer>div{display:flex;gap:24px}.work-footer>span{color:var(--copy)}
/* Project pages: cover, editorial story, full-width media and a clear next step. */
.case-topline{display:flex;justify-content:space-between;gap:20px;padding:20px var(--pad);font-size:.875rem}
.case-topline>a{padding-bottom:5px}
.case-topline>span{color:var(--copy);margin-left:auto}
.case-intro{padding:clamp(50px,8vw,130px) var(--pad) 40px}
.case-intro h1{font-size:clamp(4.5rem,15vw,18rem);line-height:.85;letter-spacing:-.045em;font-weight:900;margin:0 0 32px}
.case-intro-bottom{display:flex;justify-content:space-between;gap:32px;align-items:end}
.case-intro-bottom>p{font-size:clamp(1.75rem,3.4vw,4rem);font-weight:600;line-height:1.05;letter-spacing:-.025em;margin:0;max-width:22ch}
.case-meta{display:flex;gap:40px;font-size:.875rem;line-height:1.5}
.case-meta>div{display:flex;flex-direction:column;gap:7px}.case-meta dt{color:var(--copy)}.case-meta dd{margin:0}
.case-preview-note{margin:0 var(--pad);border-top:1px solid var(--line);padding:16px 0;font-size:.875rem;line-height:1.5;color:var(--copy)}
.case-brandmark{position:relative;display:grid;place-items:center;min-height:clamp(300px,43vw,680px);margin:0 var(--pad) var(--pad);padding:clamp(48px,8vw,130px);overflow:hidden;background:var(--project-field)}
/* height:auto is load-bearing on both marks. They carry width/height attributes
   for CLS, and those map to a presentational height hint. With only width and
   max-height declared, that hint would win and size the logo by its intrinsic
   pixel height instead of its aspect ratio — the same failure that stretched
   the work-page reel. */
.case-brandmark__primary{display:block;width:min(72%,1100px);height:auto;max-height:45vh;object-fit:contain;animation:case-mark-in 1.1s var(--ease) both}
.case-brandmark__secondary{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(18px,4vw,64px);width:clamp(72px,11vw,160px);height:auto;max-height:28%;object-fit:contain;animation:case-badge-in 1.1s .15s var(--ease) both}
.case-cover{margin:0 var(--pad);background:var(--project-field);overflow:hidden}
.case-cover>img,.case-cover>video{display:block;object-fit:contain}
.case-cover--wide>img,.case-cover--wide>video{width:100%;height:auto}
.case-cover--portrait{display:grid;place-items:center;min-height:min(1040px,92svh);padding:clamp(26px,6vw,92px)}
.case-cover--portrait>img,.case-cover--portrait>video{width:auto;height:auto;max-width:100%;max-height:min(82svh,940px)}
.case-cover--video video{background:#111}
.case-cover .project-placeholder{aspect-ratio:16/7}
.case-overview{display:grid;grid-template-columns:1fr 2fr;gap:var(--pad);padding:clamp(55px,7vw,120px) var(--pad)}
.case-overview>div>h2{font-size:clamp(2.25rem,4.6vw,5rem);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:0 0 35px}
.case-contents{position:sticky;top:24px;align-self:start}
.case-contents .section-label{margin-bottom:20px}
.case-contents a{display:block;width:fit-content;font-size:1rem;line-height:1.5;margin:10px 0}
.case-contents a:hover{text-decoration:underline;text-underline-offset:4px}
.case-chapter{border-top:1px solid var(--line);padding:24px 0 30px;scroll-margin-top:30px}
.case-chapter h3{font-size:clamp(1.5rem,2.3vw,2.75rem);font-weight:650;letter-spacing:-.025em;margin:0 0 18px;line-height:1.05}
.case-chapter p{max-width:55ch;font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;margin:0;color:var(--copy)}
.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:40px var(--pad);padding:0 var(--pad) clamp(60px,6vw,100px);scroll-margin-top:20px}
.case-visual{margin:0;min-width:0;align-self:start}.case-visual--wide{grid-column:1/-1}
.case-visual button{position:relative;width:100%;display:block;background:var(--field);border:0;padding:0;overflow:hidden;cursor:zoom-in}
.case-visual img,.case-visual video{display:block;width:100%;height:auto}
.case-visual img{transition:transform .8s var(--ease)}
.case-visual button:hover img{transform:scale(1.015)}
.case-visual button>span{position:absolute;right:14px;bottom:14px;background:var(--paper);padding:8px 12px;font-size:.875rem}
.case-video-frame{width:100%;overflow:hidden;background:var(--project-field)}
.case-visual figcaption{padding-top:12px;font-size:.875rem;color:var(--copy)}
.case-empty{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--pad)}
.empty-media{background:var(--field);aspect-ratio:4/3;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.empty-media>span{font-size:.875rem;color:var(--copy)}.empty-media>strong{font-size:clamp(1.75rem,3vw,3.5rem);font-weight:650;letter-spacing:-.025em}
.case-next{border-top:1px solid var(--line);padding:clamp(50px,6vw,110px) var(--pad)}
.case-next>a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px}
.case-next strong{font-size:clamp(3.5rem,10vw,12rem);font-weight:900;line-height:.95;letter-spacing:-.045em}
.case-next>a>span{font-size:clamp(2rem,5vw,6rem);transition:transform .4s var(--ease)}
.case-next>a:hover>span{transform:translate(6px,-6px)}
.case-error{padding:80px var(--pad)}.case-error h1{font-size:clamp(3rem,8vw,8rem);line-height:1;letter-spacing:-.04em}.case-error p{font-size:1.25rem}.case-error a{border-bottom:1px solid}
.image-viewer{max-width:none;max-height:none;width:100%;height:100%;margin:0;border:0;padding:70px var(--pad) 24px;background:var(--paper);color:var(--ink)}
.image-viewer::backdrop{background:var(--paper)}
.viewer-bar{position:absolute;inset:16px var(--pad) auto;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:.875rem}
.viewer-bar button{background:none;border:1px solid var(--line);padding:10px 16px}
.viewer-content{height:100%;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center}
.viewer-content img{min-height:0;max-height:calc(100% - 50px);max-width:100%;object-fit:contain}
.viewer-content figcaption{font-size:.875rem}
body.viewer-open{overflow:hidden}
@keyframes case-mark-in{from{opacity:0;transform:translateY(42px) scale(.94)}to{opacity:1;transform:none}}
@keyframes case-badge-in{from{opacity:0;transform:translate(20px,20px) rotate(8deg)}to{opacity:1;transform:none}}
.motion-enabled .type-line>span{animation:work-type-in 1.1s var(--ease) both}
.motion-enabled .type-line:nth-child(2)>span{animation-delay:.14s}
.motion-enabled .hero-picture img{animation:work-image-in 1.25s var(--ease) both}
.motion-enabled .hero-picture--two img{animation-delay:.18s}
.motion-enabled [data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-enabled .awaiting-reveal{opacity:0;transform:translateY(24px)}
.motion-paused *{animation:none!important;transition:none!important}
.motion-paused .hero-picture,.motion-paused .work-hero-type{transform:none!important}
@keyframes work-type-in{from{transform:translateY(115%)}to{transform:none}}
@keyframes work-image-in{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:900px){
 .work-hero{min-height:max(800px,100svh);padding:240px var(--pad)}.work-hero-type{width:100%}.work-hero h1{font-size:clamp(3rem,9vw,5.5rem)}
 .hero-picture{width:28vw;max-width:220px}.hero-picture--one{top:65px}.hero-picture--two{bottom:75px}
 .collection-heading{flex-wrap:wrap}.collection-heading p{order:3;flex-basis:100%}
 .project-grid{gap:40px var(--pad)}.project-card:nth-child(odd):not(:first-child){padding-top:45px}
 .project-information h3{font-size:2rem}.project-open{opacity:1;transform:none;right:10px;bottom:10px}
 .case-intro-bottom{align-items:start;flex-direction:column;gap:24px}.case-meta{margin:0}
 .case-overview{grid-template-columns:1fr;gap:30px}.case-contents{position:static}.case-contents a{display:inline-block;margin:0 18px 12px 0}
 .case-brandmark{min-height:clamp(260px,60vw,440px)}
 .case-cover--portrait{min-height:auto;padding:clamp(18px,5vw,44px)}
 .case-cover--portrait>img,.case-cover--portrait>video{width:min(76%,620px);max-height:none}
}
@media(max-width:580px){
 .work-hero{min-height:780px;padding:215px var(--pad) 225px}.work-hero h1{font-size:clamp(2.375rem,10vw,3.625rem)}
 .work-hero-type .section-label{margin-bottom:24px}.hero-picture{width:38vw}
 .hero-bottom{grid-template-columns:1fr 1fr;gap:10px}.hero-bottom>span{display:none}.hero-bottom>a{justify-self:start}
 .hero-description{font-size:1rem}.project-grid{grid-template-columns:1fr;gap:38px}.project-card:nth-child(odd):not(:first-child){padding:0}
 .project-card:first-child .project-cover{aspect-ratio:4/3}.project-placeholder strong{font-size:clamp(3rem,17vw,5rem)}
 .work-footer{flex-wrap:wrap}.work-footer>span{width:100%}.work-footer>div{gap:18px}
 .case-intro{padding-top:55px}.case-intro h1{font-size:clamp(3.5rem,19vw,7rem)}.case-intro-bottom>p{font-size:1.875rem}
 .case-meta{flex-wrap:wrap;gap:20px}.case-topline>span{font-size:.8125rem}
 .case-brandmark{min-height:230px;padding:38px 28px}.case-brandmark__primary{width:88%}.case-brandmark__secondary{width:68px}
 .case-cover--portrait>img,.case-cover--portrait>video{width:100%}
 .case-cover .project-placeholder{aspect-ratio:4/3}.case-overview{padding-top:55px}.case-empty{grid-template-columns:1fr}
 .case-gallery{display:block}.case-visual+.case-visual{margin-top:30px}.case-visual button>span{font-size:.8125rem;padding:6px 10px}
 .case-next strong{font-size:clamp(3rem,15vw,5rem)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.hero-picture,.work-hero-type{transform:none!important}.awaiting-reveal{opacity:1!important;transform:none!important}
 .motion-enabled .type-line>span,.motion-enabled .hero-picture img{animation:none!important}
 .case-brandmark__primary,.case-brandmark__secondary{animation:none!important}
}