:root{font-family:Arial,Helvetica,sans-serif;color:#151515;background:#fff;font-synthesis:none;--pad:3.8vw}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #145cff;outline-offset:6px}header{padding:36px var(--pad) 44px;display:grid;grid-template-columns:1fr 1fr auto;align-items:start;gap:24px}.wordmark{font-size:clamp(26px,2.5vw,40px);font-weight:700;letter-spacing:-1.8px;line-height:1}header p{font-size:16px;line-height:1.25;margin:0}nav{display:flex;gap:30px;font-size:15px}nav a{padding:5px 0}nav a:hover,.textlink:hover,.footer-bottom a:hover{text-decoration:underline;text-underline-offset:5px}main{padding:0 var(--pad)}.section-line{border-top:1px solid #ccc;padding:20px 0;display:flex;justify-content:space-between;align-items:center}.section-line h1{font-size:14px;letter-spacing:.01em;font-weight:400;margin:0}.section-line span{font-size:14px;color:#666}#projects{display:grid;grid-template-columns:1fr 1fr;gap:65px 26px}.project{min-width:0}.project:first-child{grid-column:1/-1}.project .visual{display:block;overflow:hidden;position:relative;background:#e9e9e9;aspect-ratio:1.45}.project:first-child .visual{aspect-ratio:2.08}.visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.visual:hover img{transform:scale(1.025)}.open-label{position:absolute;bottom:22px;right:22px;padding:13px 18px;border-radius:30px;background:white;color:#151515;font-size:14px;transform:translateY(8px);opacity:0;transition:.25s}.visual:hover .open-label,.visual:focus-visible .open-label{opacity:1;transform:none}.project-info{display:flex;justify-content:space-between;gap:15px;padding-top:17px}.project h2{font-size:clamp(22px,2vw,32px);font-weight:400;letter-spacing:-.8px;margin:0}.project p{font-size:14px;color:#626262;margin:7px 0 0;line-height:1.45}.project .index{color:#777;font-size:14px;padding-top:6px}.project:first-child h2{font-size:clamp(28px,3vw,43px)}#about{border-top:1px solid #bcbcbc;margin-top:110px;padding:55px 0 105px;display:grid;grid-template-columns:1fr 2fr;gap:50px}.eyebrow{font-size:14px}#about h2{font-size:clamp(36px,4.5vw,66px);font-weight:400;letter-spacing:-2.7px;line-height:1.05;margin:0 0 34px}#about p{font-size:20px;line-height:1.5;max-width:670px;color:#4a4a4a}.textlink{display:inline-block;border-bottom:1px solid #151515;margin-top:18px;padding-bottom:6px;font-size:16px}footer{background:#151515;color:white;padding:55px var(--pad) 30px}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:25px;padding-bottom:65px}.footer-top>span{font-size:16px;padding-top:10px}.footer-top>a{font-size:clamp(60px,9.5vw,150px);line-height:1;letter-spacing:-6px}.footer-top>a:hover{color:#c9c9c9}.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;border-top:1px solid #555;padding-top:25px;font-size:14px;color:#c7c7c7}.footer-bottom div{display:flex;gap:22px}.footer-bottom>span{color:#aaa}@media(hover:none){.open-label{opacity:1;transform:none}}@media(min-width:1700px){body{max-width:1920px;margin:auto}}@media(max-width:700px){:root{--pad:20px}header{grid-template-columns:1fr auto;padding-top:25px;padding-bottom:30px;gap:20px}.wordmark{font-size:29px}header p{font-size:14px;text-align:right}nav{grid-column:1/-1;gap:25px;font-size:14px}#projects{grid-template-columns:1fr;gap:38px}.project:first-child{grid-column:auto}.project:first-child .visual{aspect-ratio:1.35}.project .visual{aspect-ratio:1.35}.project h2,.project:first-child h2{font-size:27px}.open-label{bottom:14px;right:14px;padding:10px 14px}.project-info{padding-top:14px}#about{grid-template-columns:1fr;margin-top:65px;gap:30px;padding:30px 0 60px}#about h2{letter-spacing:-1.5px;font-size:42px}#about p{font-size:18px}.footer-top{display:block;padding-bottom:45px}.footer-top>a{display:block;margin-top:26px;font-size:70px;letter-spacing:-3px}.footer-bottom{flex-direction:column;gap:22px}footer{padding-top:35px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
[hidden]{display:none!important}.project:nth-child(4){grid-column:1/-1}.project:nth-child(4) .visual{aspect-ratio:2.08}.back-link{display:inline-block;font-size:14px;padding:22px 0}.case-title{border-top:1px solid #ccc;padding:28px 0 35px;display:flex;justify-content:space-between;gap:20px;align-items:end}.case-title .eyebrow{margin:0 0 18px;color:#666}.case-title h1{font-size:clamp(42px,7.2vw,106px);line-height:1.04;font-weight:400;letter-spacing:-.055em;margin:0;outline:none}.case-count{white-space:nowrap;font-size:14px;color:#777;padding-bottom:10px}.case-intro{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:25px 0 55px}.case-intro h2{font-weight:400;font-size:clamp(27px,3.2vw,45px);letter-spacing:-.04em;line-height:1.12;margin:0;max-width:550px}.case-intro p{margin:0;font-size:18px;line-height:1.55;color:#444}.case-intro .credit{margin-top:22px;color:#666;font-size:14px}.case-media{display:grid;gap:26px}.case-media figure{margin:0;min-width:0}.case-film{background:#eee;position:relative}.case-film iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#111}.case-film video{display:block;width:100%;max-height:85vh;background:#111}.case-image img{display:block;width:100%;height:auto}.media-error{padding:18px;background:#fff}.case-end{padding:48px 0 80px;display:flex;justify-content:space-between;gap:35px;align-items:start}.source-credit{font-size:14px;color:#666;border-bottom:1px solid #aaa;padding-bottom:5px}.case-end>a:last-child{text-align:right}.case-end span{display:block;font-size:14px;color:#666;margin-bottom:15px}.case-end strong{font-weight:400;font-size:clamp(28px,3.5vw,50px);letter-spacing:-.04em}@media(max-width:700px){.project:nth-child(4){grid-column:auto}.project:nth-child(4) .visual{aspect-ratio:1.35}.case-intro{grid-template-columns:1fr;gap:25px;padding:15px 0 35px}.case-title{padding:24px 0}.case-title h1{font-size:44px}.case-intro p{font-size:17px}.case-count{display:none}.case-media{gap:16px}.case-end{flex-direction:column;padding:35px 0 55px}.case-end>a:last-child{text-align:left}.case-film video{min-height:170px}}
/* Project stories */
.viewing-case header{padding-top:24px;padding-bottom:22px}.viewing-case .wordmark{font-size:28px;letter-spacing:-1.3px}.viewing-case header p{font-size:14px}.viewing-case #case{padding:0 18px}.case-breadcrumb{padding:10px calc(var(--pad) - 18px) 20px;display:flex;justify-content:space-between;font-size:14px;color:#616161}.story-hero{overflow:hidden;border-radius:8px;height:min(73vh,850px);min-height:350px;background:#f0f0f0}.story-hero figure,.story-hero video,.story-hero img{width:100%;height:100%;margin:0;object-fit:cover}.story-intro{display:grid;grid-template-columns:36% 1fr;gap:30px;padding:65px 0 100px;max-width:1700px;margin:auto}.story-identity{display:flex;flex-direction:column;justify-content:space-between;gap:55px}.story-intro h1,.story-intro h2{font-weight:400;font-size:clamp(32px,3.4vw,52px);letter-spacing:-.045em;line-height:1.08;margin:0;outline:none}.story-description p{font-size:18px;line-height:1.45;max-width:640px;margin:52px 0 0}.story-tags{display:flex;flex-wrap:wrap;gap:5px}.story-tags span{font-size:12px;text-transform:uppercase;background:#f2f2f2;padding:8px 10px;letter-spacing:.01em}.story-body{display:grid;gap:10px}.story-grid{display:grid;gap:10px;align-items:stretch}.story-grid figure{margin:0;overflow:hidden;border-radius:8px;background:#f1f1f1;min-width:0;position:relative}.story-grid img{display:block;width:100%;height:auto}.grid-8{grid-template-columns:1fr}.grid-44{grid-template-columns:1fr 1fr}.grid-13{grid-template-columns:repeat(3,1fr)}.grid-53{grid-template-columns:5fr 3fr}.grid-53.mirror{grid-template-columns:3fr 5fr}.grid-422{grid-template-columns:4fr 2fr 2fr}.grid-44>.story-image img,.grid-13>.story-image img,.grid-53>.story-image img,.grid-422>.story-image img{height:100%;object-fit:cover}.story-motion video{display:block;width:100%;height:auto;aspect-ratio:var(--media-ratio,auto);object-fit:contain;background:transparent}.story-grid:not(.grid-8) .story-motion video{height:100%;object-fit:cover}.story-grid.grid-8 .is-film video{max-height:86vh;background:#111}.story-motion{position:relative}.motion-toggle{position:absolute;bottom:14px;right:14px;border:1px solid #ffffff60;background:#1117;color:white;padding:7px 12px;border-radius:20px;font-size:12px;cursor:pointer;backdrop-filter:blur(12px);opacity:0;transition:opacity .2s}.story-motion:hover .motion-toggle,.motion-toggle:focus-visible{opacity:1}.story-copy{padding:105px 0 105px 3vw;display:grid;grid-template-columns:5fr 3fr;gap:40px}.story-copy h2{font-size:clamp(30px,3.4vw,52px);line-height:1.13;letter-spacing:-.045em;font-weight:400;max-width:970px;margin:0}.story-copy.copy-right{grid-template-columns:3fr 5fr;padding-right:3vw}.copy-right h2{grid-column:2}.story-film{background:#141414!important}.film-poster{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#141414;border:0;padding:0;color:white;cursor:pointer;overflow:hidden}.film-poster>img{width:100%;height:100%;object-fit:cover;filter:brightness(.84);transition:transform .6s,filter .6s}.film-poster:hover>img{transform:scale(1.025);filter:brightness(.98)}.play-disc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid #fffa;background:#ffffff20;backdrop-filter:blur(12px);padding-left:4px;font-size:20px}.film-label{position:absolute;bottom:26px;left:28px;font-size:15px}.story-film iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.story-credits{padding:70px 3vw 90px;display:grid;grid-template-columns:36% 1fr;gap:30px;font-size:15px}.story-credits p{margin:0 0 15px}.story-credits a{font-size:14px;color:#777;border-bottom:1px solid #aaa;padding-bottom:4px}.story-next{display:block;height:360px;position:relative;overflow:hidden;border-radius:8px;margin-bottom:18px;color:white}.story-next>img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.next-shade{position:absolute;inset:0;background:#0007}.next-content{position:absolute;inset:0;padding:40px;display:flex;flex-direction:column;justify-content:end;gap:15px}.next-content>span{font-size:14px}.next-content strong{font-weight:400;font-size:clamp(35px,5.5vw,84px);line-height:1;letter-spacing:-.04em}.story-next:hover>img{transform:scale(1.025)}.media-error{font-size:14px;padding:12px}.is-loop:focus-within .motion-toggle{opacity:1}@media(hover:none){.motion-toggle{opacity:1}}@media(max-width:700px){.viewing-case #case{padding:0 12px}.case-breadcrumb{padding:4px 8px 16px}.viewing-case header{padding-bottom:15px}.story-hero{min-height:0;height:54vh;max-height:570px;border-radius:5px}.story-intro{padding:35px 8px 50px;grid-template-columns:1fr;gap:30px}.story-identity{gap:20px}.story-intro h1,.story-intro h2{font-size:34px}.story-description p{font-size:17px;margin-top:22px}.story-copy,.story-copy.copy-right{display:block;padding:55px 8px}.story-copy h2{font-size:30px}.story-body,.story-grid{gap:7px}.grid-53,.grid-422{grid-template-columns:1fr 1fr}.grid-422>figure:first-child{grid-column:1/-1}.grid-53.mirror{grid-template-columns:1fr 1fr}.grid-13{grid-template-columns:1fr 1fr}.grid-13>figure:last-child{grid-column:1/-1;max-height:560px}.grid-44{grid-template-columns:1fr}.story-grid:not(.grid-8) .story-motion video{height:auto;object-fit:contain}.story-grid .story-image img{height:auto;object-fit:contain}.story-grid figure{border-radius:5px}.story-credits{grid-template-columns:1fr;padding:50px 8px;gap:20px}.story-next{height:260px}.next-content{padding:22px}.play-disc{width:52px;height:52px;font-size:16px}.film-label{bottom:15px;left:18px}}

.vimeo-loop{position:relative;aspect-ratio:16/9}.vimeo-toggle{position:absolute;right:14px;bottom:14px;z-index:2;background:#1119;color:white;border:1px solid #fff6;padding:7px 12px;border-radius:20px;cursor:pointer}.vimeo-loop iframe{position:absolute;inset:0;height:100%}.motion-toggle:has(+.media-error:not([hidden])){opacity:1}

/* Neas reference layout. Scoped so the other seven cases remain unchanged. */
body[data-project="neas"]{max-width:none}
body[data-project="neas"] header{position:absolute;z-index:5;top:0;left:0;right:0;padding:16px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
body[data-project="neas"] header>a,body[data-project="neas"] header nav{pointer-events:auto;background:#fffe;padding:10px 14px;border-radius:6px}
body[data-project="neas"] header p{display:none}
body[data-project="neas"] header .wordmark{font-size:23px;letter-spacing:-1px}
body[data-project="neas"] header nav{gap:20px}
#case[data-project="neas"]{padding:0;max-width:2400px;margin:auto}
#case[data-project="neas"] .case-breadcrumb{position:absolute;z-index:4;top:76px;left:16px;right:16px;padding:0}
#case[data-project="neas"] .case-breadcrumb a{background:#fffe;border-radius:4px;padding:7px 10px}
#case[data-project="neas"] .case-breadcrumb>span{display:none}
#case[data-project="neas"] .story-hero{height:70svh;min-height:0;max-height:none;border-radius:0}
#case[data-project="neas"] .story-intro{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:8px 16px 0;padding:48px 0 128px;max-width:none}
#case[data-project="neas"] .story-identity,#case[data-project="neas"] .story-description{display:contents}
#case[data-project="neas"] .story-identity h1{grid-column:1/span 3;grid-row:1}
#case[data-project="neas"] .story-description h2{grid-column:4/span 3;grid-row:1}
#case[data-project="neas"] .story-intro h1,#case[data-project="neas"] .story-intro h2{font-size:40px;line-height:1.2;letter-spacing:-.035em}
#case[data-project="neas"] .story-tags{grid-column:1/span 3;grid-row:2;align-self:start;margin-top:128px}
#case[data-project="neas"] .story-tags span{font-size:14px;text-transform:none;padding:3px 8px;border-radius:6px}
#case[data-project="neas"] .story-description p{grid-column:4/span 3;grid-row:2;margin:128px 0 0;font-size:18px;line-height:1.5;color:#151515;max-width:none}
#case[data-project="neas"] .story-body{display:block;margin:0 16px}
#case[data-project="neas"] .story-grid{gap:8px;padding-top:8px;align-items:start}
#case[data-project="neas"] .grid-26{grid-template-columns:3fr 1fr}
#case[data-project="neas"] .story-grid figure{border-radius:12px;background:transparent;align-self:start}
#case[data-project="neas"] .story-grid .story-motion video{width:100%;height:auto;aspect-ratio:var(--media-ratio);object-fit:contain;max-height:none;background:transparent}
#case[data-project="neas"] .story-copy{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:0;margin:160px 0 24px}
#case[data-project="neas"] .story-copy h2{grid-column:6/span 3;font-size:30px;line-height:1.2;letter-spacing:-.025em;max-width:none}
#case[data-project="neas"] .motion-toggle{font-size:14px;opacity:0}
#case[data-project="neas"] .motion-toggle:focus-visible,#case[data-project="neas"] .story-motion:hover .motion-toggle{opacity:1}
#case[data-project="neas"] .story-credits{margin:0 16px;padding:96px 0;grid-template-columns:3fr 5fr}
#case[data-project="neas"] .story-next{margin:0 16px 16px}
@media(max-width:1023px) and (min-width:768px){#case[data-project="neas"] .story-description h2{grid-column:4/span 4}}
@media(max-width:767px){
 body[data-project="neas"] header{padding:8px;gap:8px}body[data-project="neas"] header .wordmark{font-size:20px}body[data-project="neas"] header nav{gap:12px;font-size:14px}
 #case[data-project="neas"] .case-breadcrumb{left:8px;top:65px}
 #case[data-project="neas"] .story-intro{margin:8px 8px 0;padding:40px 0 128px;gap:8px}
 #case[data-project="neas"] .story-identity h1{grid-column:1/-1;grid-row:1;font-size:20px}
 #case[data-project="neas"] .story-description h2{grid-column:1/-1;grid-row:2;font-size:40px}
 #case[data-project="neas"] .story-tags{grid-column:1/-1;grid-row:3;margin-top:64px}
 #case[data-project="neas"] .story-description p{grid-column:1/-1;grid-row:4;margin-top:64px}
 #case[data-project="neas"] .story-body{margin:0 8px}
 #case[data-project="neas"] .story-grid{grid-template-columns:1fr;gap:8px}
 #case[data-project="neas"] .grid-13>figure:last-child{grid-column:auto;max-height:none}
 #case[data-project="neas"] .story-copy h2{grid-column:1/-1;font-size:24px}
 #case[data-project="neas"] .story-credits{margin:0 8px;grid-template-columns:1fr;gap:24px}
 #case[data-project="neas"] .story-next{margin:0 8px 8px}
}
@media(hover:none){#case[data-project="neas"] .motion-toggle{opacity:1}}

/* Tekna reference layout. Same page frame as the approved Neas; project-scoped. */
body[data-project="tekna"]{max-width:none}
body[data-project="tekna"] header{position:absolute;z-index:5;top:0;left:0;right:0;padding:16px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
body[data-project="tekna"] header>a,body[data-project="tekna"] header nav{pointer-events:auto;background:#fffe;padding:10px 14px;border-radius:6px}
body[data-project="tekna"] header p{display:none}
body[data-project="tekna"] header .wordmark{font-size:23px;letter-spacing:-1px}
body[data-project="tekna"] header nav{gap:20px}
#case[data-project="tekna"]{padding:0;max-width:2400px;margin:auto}
#case[data-project="tekna"] .case-breadcrumb{position:absolute;z-index:4;top:76px;left:16px;right:16px;padding:0}
#case[data-project="tekna"] .case-breadcrumb a{background:#fffe;border-radius:4px;padding:7px 10px}
#case[data-project="tekna"] .case-breadcrumb>span{display:none}
#case[data-project="tekna"] .story-hero{height:70svh;min-height:0;max-height:none;border-radius:0}
#case[data-project="tekna"] .story-intro{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:8px 16px 0;padding:48px 0 128px;max-width:none}
#case[data-project="tekna"] .story-identity,#case[data-project="tekna"] .story-description{display:contents}
#case[data-project="tekna"] .story-identity h1{grid-column:1/span 3;grid-row:1}
#case[data-project="tekna"] .story-description h2{grid-column:4/span 3;grid-row:1}
#case[data-project="tekna"] .story-intro h1,#case[data-project="tekna"] .story-intro h2{font-size:40px;line-height:1.2;letter-spacing:-.035em}
#case[data-project="tekna"] .story-tags{grid-column:1/span 3;grid-row:2;align-self:start;margin-top:128px}
#case[data-project="tekna"] .story-tags span{font-size:14px;text-transform:none;padding:3px 8px;border-radius:6px}
#case[data-project="tekna"] .story-description p{grid-column:4/span 3;grid-row:2;margin:128px 0 0;font-size:18px;line-height:1.5;color:#151515;max-width:none}
#case[data-project="tekna"] .story-body{display:block;margin:0 16px}
#case[data-project="tekna"] .story-grid{gap:8px;padding-top:8px;align-items:start}
#case[data-project="tekna"] .grid-26{grid-template-columns:3fr 1fr}
#case[data-project="tekna"] .story-grid figure{border-radius:12px;background:transparent;align-self:start}
#case[data-project="tekna"] .story-grid .story-motion video{width:100%;height:auto;aspect-ratio:var(--media-ratio);object-fit:contain;max-height:none;background:transparent}
#case[data-project="tekna"] .story-copy{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:0;margin:160px 0 24px}
#case[data-project="tekna"] .story-copy h2{grid-column:6/span 3;font-size:30px;line-height:1.2;letter-spacing:-.025em;max-width:none}
#case[data-project="tekna"] .motion-toggle{font-size:14px;opacity:0}
#case[data-project="tekna"] .motion-toggle:focus-visible,#case[data-project="tekna"] .story-motion:hover .motion-toggle{opacity:1}
#case[data-project="tekna"] .story-credits{margin:0 16px;padding:96px 0;grid-template-columns:3fr 5fr}
#case[data-project="tekna"] .story-next{margin:0 16px 16px}
@media(max-width:1023px) and (min-width:768px){#case[data-project="tekna"] .story-description h2{grid-column:4/span 4}}
@media(max-width:767px){
 body[data-project="tekna"] header{padding:8px;gap:8px}body[data-project="tekna"] header .wordmark{font-size:20px}body[data-project="tekna"] header nav{gap:12px;font-size:14px}
 #case[data-project="tekna"] .case-breadcrumb{left:8px;top:65px}
 #case[data-project="tekna"] .story-intro{margin:8px 8px 0;padding:40px 0 128px;gap:8px}
 #case[data-project="tekna"] .story-identity h1{grid-column:1/-1;grid-row:1;font-size:20px}
 #case[data-project="tekna"] .story-description h2{grid-column:1/-1;grid-row:2;font-size:40px}
 #case[data-project="tekna"] .story-tags{grid-column:1/-1;grid-row:3;margin-top:64px}
 #case[data-project="tekna"] .story-description p{grid-column:1/-1;grid-row:4;margin-top:64px}
 #case[data-project="tekna"] .story-body{margin:0 8px}
 #case[data-project="tekna"] .story-grid{grid-template-columns:1fr;gap:8px}
 #case[data-project="tekna"] .grid-13>figure:last-child{grid-column:auto;max-height:none}
 #case[data-project="tekna"] .story-copy h2{grid-column:1/-1;font-size:24px}
 #case[data-project="tekna"] .story-credits{margin:0 8px;grid-template-columns:1fr;gap:24px}
 #case[data-project="tekna"] .story-next{margin:0 8px 8px}
}
@media(hover:none){#case[data-project="tekna"] .motion-toggle{opacity:1}}

/* Tekna mixed-format rows retain their natural aspect ratios. */
#case[data-project="tekna"] .story-grid .story-image img{height:auto;object-fit:contain;aspect-ratio:var(--media-ratio,auto)}
#case[data-project="tekna"] .story-copy{margin:160px 0 24px}
#case[data-project="tekna"] .story-copy h2{grid-column:1/span 3;font-size:40px;line-height:1.2}
#case[data-project="tekna"] .story-copy.copy-right h2{grid-column:6/span 3;font-size:30px}
#case[data-project="tekna"] .story-process{margin:0 16px 96px}
#case[data-project="tekna"] .process-intro{display:grid;grid-template-columns:3fr 5fr;gap:8px;padding:32px 0 72px}
#case[data-project="tekna"] .process-intro h2{font-size:40px;font-weight:400;letter-spacing:-.035em;margin:0}
#case[data-project="tekna"] .process-intro p{font-size:18px;line-height:1.5;max-width:500px;margin:0}
#case[data-project="tekna"] .process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
#case[data-project="tekna"] .process-grid figure{margin:0;overflow:hidden;border-radius:12px}
#case[data-project="tekna"] .process-grid video{display:block;width:100%;height:auto;aspect-ratio:var(--media-ratio);object-fit:contain}
@media(max-width:767px){
 #case[data-project="tekna"] .story-copy h2,#case[data-project="tekna"] .story-copy.copy-right h2{grid-column:1/-1;font-size:24px}
 #case[data-project="tekna"] .story-process{margin:0 8px 64px}
 #case[data-project="tekna"] .process-intro{grid-template-columns:1fr;gap:24px;padding-bottom:40px}
 #case[data-project="tekna"] .process-grid{grid-template-columns:1fr 1fr}
}

/* Loose eight-column process wall, matching the reference's varied scale. */
@media(min-width:768px){
 #case[data-project="tekna"] .process-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:48px 16px}
 #case[data-project="tekna"] .process-grid>figure:nth-child(1){grid-column:1/span 4}
 #case[data-project="tekna"] .process-grid>figure:nth-child(2){grid-column:6/span 2}
 #case[data-project="tekna"] .process-grid>figure:nth-child(3){grid-column:3/span 3}
 #case[data-project="tekna"] .process-grid>figure:nth-child(4){grid-column:6/span 3}
 #case[data-project="tekna"] .process-grid>figure:nth-child(5){grid-column:1/span 3}
 #case[data-project="tekna"] .process-grid>figure:nth-child(6){grid-column:5/span 4}
 #case[data-project="tekna"] .process-grid>figure:nth-child(7){grid-column:2/span 2}
 #case[data-project="tekna"] .process-grid>figure:nth-child(8){grid-column:5/span 3}
 #case[data-project="tekna"] .process-grid>figure:nth-child(9){grid-column:1/span 3}
 #case[data-project="tekna"] .process-grid>figure:nth-child(10){grid-column:6/span 2}
 #case[data-project="tekna"] .process-grid>figure:nth-child(11){grid-column:3/span 4}
}

/* Approved homepage: paired projects, final TV 2 feature. */
:root{--pad:32px}header{padding:38px var(--pad) 48px}.wordmark{font-size:32px;letter-spacing:-1.5px}#projects{gap:44px 20px}.project:first-child,.project:nth-child(4){grid-column:auto}.project .visual,.project:first-child .visual,.project:nth-child(4) .visual{aspect-ratio:1.72}.project:last-child{grid-column:1/-1}.project:last-child .visual{aspect-ratio:2.55}.project h2,.project:first-child h2{font-size:24px;letter-spacing:-.6px}.project-info{padding-top:14px}.project .index{padding-top:3px}footer{background:white;color:#151515;border-top:1px solid #ccc}.footer-top>a{font-size:clamp(48px,7vw,100px);letter-spacing:-3px}.footer-bottom{color:#555;border-color:#ccc}
/* Shared natural media sizing for restored cases. */
#case .story-grid{align-items:start}#case .story-grid figure{min-width:0;align-self:start}#case .story-grid img,#case .story-grid video{display:block;width:100%;height:auto;max-height:none;object-fit:contain;aspect-ratio:var(--media-ratio,auto)}
#case .grid-53{grid-template-columns:5fr 3fr}#case .grid-53.mirror{grid-template-columns:3fr 5fr}#case .grid-26{grid-template-columns:3fr 1fr}#case .grid-26.mirror{grid-template-columns:1fr 3fr}
#case .story-process{margin:0 16px 96px}#case .process-intro{display:grid;grid-template-columns:3fr 5fr;gap:24px;padding:32px 0 64px}#case .process-intro h2{font-size:40px;font-weight:400;margin:0}#case .process-intro p{font-size:18px;line-height:1.5;margin:0}#case:not([data-project="tekna"]) .process-grid{display:block;columns:3;column-gap:16px}#case .process-grid figure{break-inside:avoid;margin:0 0 16px}#case .process-grid img,#case .process-grid video{width:100%;height:auto;object-fit:contain}.motion-toggle{font-size:14px}
@media(max-width:767px){:root{--pad:16px}header{padding-top:24px;padding-bottom:30px}#projects{grid-template-columns:1fr;gap:32px}.project:last-child{grid-column:auto}.project .visual,.project:first-child .visual,.project:nth-child(4) .visual,.project:last-child .visual{aspect-ratio:1.5}#case .story-grid{grid-template-columns:1fr!important}#case .story-grid>figure{grid-column:auto!important}#case .process-intro{grid-template-columns:1fr}#case:not([data-project="tekna"]) .process-grid{columns:2}#case .story-process{margin:0 8px 64px}}

/* Homepage thumbnails — Øyedrops-style rounded cards and paired width hover. */
#projects{display:flex;flex-direction:column;gap:44px}
#projects>.project-row{display:flex;align-items:flex-start;gap:20px;min-width:0}
#projects>.project-row>.project{width:50%;flex:0 1 auto;min-width:0;grid-column:auto;transition:width 500ms cubic-bezier(.4,0,.2,1)}
#projects>.project-row>.project .visual{border-radius:12px;overflow:hidden;aspect-ratio:1.72}
#projects>.project-row>.project .visual img{transform:none;transition:none}
#projects>.project-row>.project h2{font-size:24px;letter-spacing:-.6px}
#projects>.project-row-solo>.project{width:100%}
#projects>.project-row-solo>.project .visual{aspect-ratio:2.55}
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 #projects>.project-row:not(.project-row-solo)>.project:hover{width:56%}
 #projects>.project-row:not(.project-row-solo):focus-within:not(:hover)>.project:focus-within{width:56%}
}
@media(max-width:767px){
 #projects{gap:32px}
 #projects>.project-row{flex-direction:column;gap:32px}
 #projects>.project-row>.project{width:100%;transition:none}
 #projects>.project-row>.project .visual{aspect-ratio:1.5}
}
@media(prefers-reduced-motion:reduce){#projects>.project-row>.project{transition:none}}

/* Tighter homepage pairs; cover source-image edge pixels inside the rounded mask. */
#projects>.project-row{column-gap:8px}
#projects>.project-row>.project .visual{background:transparent}
#projects>.project-row>.project .visual img{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;object-fit:cover;transform:none}

/* Homepage spacing and vertically centered case hero media. */
#projects>.project-row{column-gap:10px}
#case .story-hero{position:relative}
#case .story-hero>figure{position:relative;width:100%;height:100%;margin:0}
#case .story-hero>figure>video,
#case .story-hero>figure>img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 50%}

/* Eliteserien: the diagonal-system study occupies columns 4–7 of eight. */
#case[data-project="eliteserien"] .story-body>.grid-4{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding-top:8px}
#case[data-project="eliteserien"] .story-body>.grid-4>figure{grid-column:4/span 4;border-radius:12px;overflow:hidden}
#case[data-project="eliteserien"] .story-body>.story-copy:nth-child(6){display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:0;margin:160px 0 24px}
#case[data-project="eliteserien"] .story-body>.story-copy:nth-child(6)>h2{grid-column:4/span 3;font-size:24px;line-height:1.2;letter-spacing:-.025em;max-width:none;margin:0}
@media(max-width:767px){
 #case[data-project="eliteserien"] .story-body>.grid-4{grid-template-columns:1fr}
 #case[data-project="eliteserien"] .story-body>.grid-4>figure{grid-column:1/-1}
 #case[data-project="eliteserien"] .story-body>.story-copy:nth-child(6){grid-template-columns:1fr;margin-top:96px}
 #case[data-project="eliteserien"] .story-body>.story-copy:nth-child(6)>h2{grid-column:1/-1}
}

/* Eliteserien text grid and type. */
#case[data-project="eliteserien"] .story-body { display: block; }
#case[data-project="eliteserien"] .story-body > .story-grid { padding-top: 8px; }
#case[data-project="eliteserien"] .story-body > .story-copy {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 160px 0 24px;
}
#case[data-project="eliteserien"] .story-body > .story-copy > h2 {
  grid-column: 1 / span 3;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  max-width: none;
  min-width: 0;
  margin: 0;
}
#case[data-project="eliteserien"] .story-body > .story-copy:nth-child(6) > h2 {
  grid-column: 4 / span 3;
  font-size: 24px;
}
#case[data-project="eliteserien"] .story-body > .grid-4 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
#case[data-project="eliteserien"] .story-body > .grid-4 > figure {
  grid-column: 4 / span 4;
  min-width: 0;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 767px) {
  #case[data-project="eliteserien"] .story-body > .story-copy,
  #case[data-project="eliteserien"] .story-body > .story-copy:nth-child(6) {
    grid-template-columns: 1fr;
    margin: 96px 0 24px;
  }
  #case[data-project="eliteserien"] .story-body > .story-copy > h2,
  #case[data-project="eliteserien"] .story-body > .story-copy:nth-child(6) > h2 {
    grid-column: 1 / -1;
    font-size: 24px;
  }
  #case[data-project="eliteserien"] .story-body > .grid-4 { grid-template-columns: 1fr; }
  #case[data-project="eliteserien"] .story-body > .grid-4 > figure { grid-column: 1 / -1; }
}

/* Every case uses the approved Neas hero and overlay navigation. */
body.viewing-case[data-project]{max-width:none}
body.viewing-case[data-project] header{position:absolute;z-index:5;top:0;left:0;right:0;padding:16px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
body.viewing-case[data-project] header>a,
body.viewing-case[data-project] header nav{pointer-events:auto;background:#fffe;padding:10px 14px;border-radius:6px}
body.viewing-case[data-project] header p{display:none}
body.viewing-case[data-project] header .wordmark{font-size:23px;letter-spacing:-1px}
body.viewing-case[data-project] header nav{gap:20px}
#case[data-project]{--hero-gutter:18px}
#case[data-project="neas"],#case[data-project="tekna"]{--hero-gutter:0px;max-width:none}
#case[data-project] .case-breadcrumb{position:absolute;z-index:4;top:76px;left:16px;right:16px;padding:0}
#case[data-project] .case-breadcrumb a{background:#fffe;border-radius:4px;padding:7px 10px}
#case[data-project] .case-breadcrumb>span{display:none}
#case[data-project] .story-hero{height:70svh;min-height:0;max-height:none;border-radius:0;margin:0 calc(-1 * var(--hero-gutter));width:calc(100% + 2 * var(--hero-gutter))}
@media(max-width:767px){
 body.viewing-case[data-project] header{padding:8px;gap:8px}
 body.viewing-case[data-project] header .wordmark{font-size:20px}
 body.viewing-case[data-project] header nav{gap:12px;font-size:14px}
 #case[data-project] .case-breadcrumb{left:8px;top:65px}
}
@media(max-width:700px){
 #case[data-project]{--hero-gutter:12px}
 #case[data-project="neas"],#case[data-project="tekna"]{--hero-gutter:0px}
}

/* Keep case navigation available throughout the project. */
body.viewing-case[data-project] header{position:fixed;z-index:50}
#case[data-project] .case-breadcrumb{position:fixed;z-index:49;pointer-events:none}
#case[data-project] .case-breadcrumb a{pointer-events:auto}

/* Reveal navigation on upward scroll without shifting page content. */
body.viewing-case[data-project] header,
#case[data-project] .case-breadcrumb{transition:transform 240ms ease;transform:translateY(0)}
body.viewing-case.case-nav-hidden[data-project] header{transform:translateY(-110%)}
body.viewing-case.case-nav-hidden #case[data-project] .case-breadcrumb{transform:translateY(calc(-100% - 100px))}
body.viewing-case.case-nav-hidden[data-project] header>a,
body.viewing-case.case-nav-hidden[data-project] header nav,
body.viewing-case.case-nav-hidden #case[data-project] .case-breadcrumb a{pointer-events:none}
.footer-top{align-items:center;padding-bottom:40px}
.footer-top>a{font-size:32px;line-height:1.2;letter-spacing:-.8px}
.footer-top>span{padding-top:0}
@media(max-width:700px){.footer-top>a{font-size:28px;letter-spacing:-.6px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){
 body.viewing-case[data-project] header,#case[data-project] .case-breadcrumb{transition:none}
}

/* Shared case introduction: approved Neas typography and eight-column grid. */
#case[data-project] .story-intro{
 display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;
 margin:8px calc(16px - var(--hero-gutter,0px)) 0;padding:48px 0 128px;max-width:none;
}
#case[data-project] .story-identity,#case[data-project] .story-description{display:contents}
#case[data-project] .story-identity h1{grid-column:1/span 3;grid-row:1}
#case[data-project] .story-description h2{grid-column:4/span 3;grid-row:1}
#case[data-project] .story-intro h1,#case[data-project] .story-intro h2{
 font-size:40px;font-weight:400;line-height:1.2;letter-spacing:-.035em;margin:0;
}
#case[data-project] .story-tags{grid-column:1/span 3;grid-row:2;align-self:start;margin-top:128px}
#case[data-project] .story-tags span{font-size:14px;text-transform:none;padding:3px 8px;border-radius:6px}
#case[data-project] .story-description p{
 grid-column:4/span 3;grid-row:2;margin:128px 0 0;font-size:18px;line-height:1.5;color:#151515;max-width:none;
}
/* Contact follows the same column as the case description. */
body.viewing-case footer{padding-left:16px;padding-right:16px}
body.viewing-case .footer-top{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:baseline}
body.viewing-case .footer-top>span{grid-column:1/span 3}
body.viewing-case .footer-top>a{grid-column:4/span 3;justify-self:start;margin:0;font-size:32px;line-height:1.2;letter-spacing:-.8px}
@media(max-width:1023px) and (min-width:768px){
 #case[data-project] .story-description h2{grid-column:4/span 4}
}
@media(max-width:767px){
 #case[data-project] .story-intro{margin:8px calc(8px - var(--hero-gutter,0px)) 0;padding:40px 0 128px}
 #case[data-project] .story-identity h1{grid-column:1/-1;grid-row:1;font-size:20px}
 #case[data-project] .story-description h2{grid-column:1/-1;grid-row:2;font-size:40px}
 #case[data-project] .story-tags{grid-column:1/-1;grid-row:3;margin-top:64px}
 #case[data-project] .story-description p{grid-column:1/-1;grid-row:4;margin-top:64px}
 body.viewing-case footer{padding-left:8px;padding-right:8px}
 body.viewing-case .footer-top{grid-template-columns:1fr;gap:20px}
 body.viewing-case .footer-top>span,body.viewing-case .footer-top>a{grid-column:1/-1}
 body.viewing-case .footer-top>a{font-size:28px}
}

/* Consistent heading size and a centered contact link on every page. */
:root{--heading-size:40px}
#about h2{font-size:var(--heading-size);line-height:1.2;letter-spacing:-.035em;font-weight:400}
.footer-top,body.viewing-case .footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:baseline}
.footer-top>span,body.viewing-case .footer-top>span{grid-column:1;grid-row:1;justify-self:start}
.footer-top>a,body.viewing-case .footer-top>a{grid-column:2;grid-row:1;justify-self:center;text-align:center;margin:0;font-size:var(--heading-size);line-height:1.2;letter-spacing:-.035em;font-weight:400}
/* Keep the existing single underline, including on hover. */
#about .textlink,#about .textlink:hover,#about .textlink:focus-visible{text-decoration:none;border-bottom:1px solid currentColor}
.footer-bottom div{flex-wrap:wrap}
@media(max-width:700px){
 .footer-top,body.viewing-case .footer-top{grid-template-columns:1fr;gap:20px}
 .footer-top>span,body.viewing-case .footer-top>span{grid-column:1;grid-row:1}
 .footer-top>a,body.viewing-case .footer-top>a{grid-column:1;grid-row:2;justify-self:center}
}

/* Final case-wide type scale. These override legacy per-project sizes,
   including mobile rules and the Eliteserien nth-child exception. */
:root{--case-large-type:40px;--case-small-type:18px}
#case[data-project]{font-size:var(--case-small-type)}
#case[data-project] :is(h1,h2,h3,h4,h5,h6){
 font-size:var(--case-large-type)!important;
 line-height:1.2!important;
 font-weight:400!important;
 letter-spacing:-.035em!important;
}
#case[data-project] :is(p,.story-tags span,.story-credits,.story-credits a,.eyebrow,.case-count,.source-credit){
 font-size:var(--case-small-type)!important;
 line-height:1.5!important;
 letter-spacing:normal!important;
}

/* Match the About text column exactly, including page gutters. */
footer,body.viewing-case footer{padding-left:var(--pad);padding-right:var(--pad)}
.footer-top,body.viewing-case .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:50px;align-items:baseline}
.footer-top>span,body.viewing-case .footer-top>span{grid-column:1;grid-row:1}
.footer-top>a,body.viewing-case .footer-top>a{grid-column:2;grid-row:1;justify-self:start;text-align:left}
@media(max-width:700px){
 .footer-top,body.viewing-case .footer-top{grid-template-columns:1fr;gap:24px}
 .footer-top>span,body.viewing-case .footer-top>span{grid-column:1;grid-row:1}
 .footer-top>a,body.viewing-case .footer-top>a{grid-column:1;grid-row:2;justify-self:start}
}

/* Resume behaves like the top navigation links. */
#about .textlink,#about .textlink:hover,#about .textlink:focus-visible{border-bottom:0;text-decoration:none}
#about .textlink:hover,#about .textlink:focus-visible{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* Social links begin at the same column as About and Let's talk. */
.footer-bottom{display:grid;grid-template-columns:calc((100% - 50px)/3) minmax(0,1fr) auto;column-gap:50px;row-gap:24px;align-items:baseline}
.footer-bottom>div{grid-column:2;justify-self:start;justify-content:flex-start;min-width:0}
.footer-bottom>a{grid-column:1;grid-row:1;overflow-wrap:anywhere}
.footer-bottom>span{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:700px){
 .footer-bottom{grid-template-columns:1fr;gap:22px}
 .footer-bottom>a,.footer-bottom>div,.footer-bottom>span{grid-column:1;grid-row:auto;justify-self:start}
}

/* Premier League: retain original media rows and right-side text placement. */
#case[data-project="premier-league"] .story-body{display:block}
#case[data-project="premier-league"] .story-grid{gap:8px;padding-top:8px}
#case[data-project="premier-league"] .story-grid figure{border-radius:12px}
#case[data-project="premier-league"] .story-copy{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:0;margin:160px 0 24px}
#case[data-project="premier-league"] .story-copy h2{grid-column:6/span 3;max-width:none}
@media(max-width:767px){#case[data-project="premier-league"] .story-copy h2{grid-column:1/-1}}

/* Video follows the same rounded, responsive frame as the still cover. */
#projects .visual .cover-motion {
 position:absolute; inset:-2px;
 width:calc(100% + 4px); height:calc(100% + 4px);
 max-width:none; display:block; object-fit:cover; object-position:center;
 pointer-events:none; opacity:0;
}
#projects .visual .cover-motion.cover-playing { opacity:1; }
@media (prefers-reduced-motion:reduce) {
 #projects .visual .cover-motion { display:none; }
}

/* ============================================================
   FINAL MOBILE PASS — 2026-09-23
   Desktop is intentionally untouched. These rules only refine
   phones / narrow tablets and override older mobile experiments.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --pad: 16px;
    --heading-size: 34px;
    --case-large-type: clamp(30px, 8.8vw, 36px);
    --case-small-type: 16px;
  }

  html { scroll-padding-top: 72px; }
  body { min-width: 0; overflow-x: clip; }
  img, video, iframe { max-width: 100%; }

  /* Homepage header */
  body:not(.viewing-case) header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 16px;
    padding: 22px var(--pad) 28px;
  }
  body:not(.viewing-case) .wordmark {
    font-size: 28px;
    line-height: .95;
    letter-spacing: -1.35px;
  }
  body:not(.viewing-case) header p {
    font-size: 13px;
    line-height: 1.25;
    text-align: right;
  }
  body:not(.viewing-case) header nav {
    grid-column: 1 / -1;
    gap: 22px;
    font-size: 14px;
  }
  body:not(.viewing-case) header nav a { padding: 4px 0; }

  /* Homepage list */
  .section-line { padding: 16px 0; }
  #projects { gap: 34px; }
  #projects > .project-row {
    flex-direction: column;
    gap: 34px;
  }
  #projects > .project-row > .project {
    width: 100%;
    transition: none;
  }
  #projects > .project-row > .project .visual,
  #projects > .project-row-solo > .project .visual {
    aspect-ratio: 1.5;
    border-radius: 9px;
  }
  .project-info {
    padding-top: 12px;
    gap: 12px;
  }
  #projects > .project-row > .project h2,
  .project h2,
  .project:first-child h2 {
    font-size: 23px;
    line-height: 1.08;
    letter-spacing: -.5px;
  }
  .project p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.35;
  }
  .project .index {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 13px;
  }

  /* About */
  #about {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 76px;
    padding: 28px 0 72px;
  }
  #about h2 {
    margin-bottom: 26px;
    font-size: var(--heading-size);
    line-height: 1.08;
    letter-spacing: -1.25px;
  }
  #about p {
    max-width: none;
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.5;
  }
  #about p br { display: none; }
  #about .textlink {
    margin-top: 8px;
    font-size: 15px;
  }

  /* Case overlay navigation */
  body.viewing-case[data-project] header {
    padding: 8px;
    gap: 8px;
    align-items: center;
  }
  body.viewing-case[data-project] header > a,
  body.viewing-case[data-project] header nav {
    padding: 8px 10px;
    border-radius: 5px;
  }
  body.viewing-case[data-project] header .wordmark {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
    letter-spacing: -.8px;
  }
  body.viewing-case[data-project] header nav {
    margin-left: auto;
    gap: 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  #case[data-project] .case-breadcrumb {
    top: 58px;
    left: 8px;
    right: 8px;
  }
  #case[data-project] .case-breadcrumb a {
    padding: 7px 9px;
    font-size: 13px;
  }

  /* Case hero */
  .viewing-case #case { overflow-x: clip; }
  #case[data-project] .story-hero {
    height: min(62svh, 520px);
    min-height: 330px;
  }
  #case[data-project] .story-hero > figure > video,
  #case[data-project] .story-hero > figure > img {
    object-position: 50% 50%;
  }

  /* Case introduction */
  #case[data-project] .story-intro {
    grid-template-columns: 1fr;
    margin: 8px calc(8px - var(--hero-gutter,0px)) 0;
    padding: 34px 0 76px;
    gap: 0;
  }
  #case[data-project] .story-identity,
  #case[data-project] .story-description { display: contents; }
  #case[data-project] .story-identity h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 14px;
  }
  #case[data-project] .story-description h2 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }
  #case[data-project] .story-tags {
    grid-column: 1;
    grid-row: 3;
    margin-top: 30px;
    gap: 5px;
  }
  #case[data-project] .story-tags span {
    padding: 4px 7px;
    border-radius: 5px;
  }
  #case[data-project] .story-description p {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin: 34px 0 0;
  }

  /* Case media / story blocks */
  #case[data-project] .story-body { margin-left: 8px; margin-right: 8px; }
  #case[data-project] .story-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding-top: 8px;
  }
  #case[data-project] .story-grid > figure {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-height: none !important;
    border-radius: 8px;
  }
  #case[data-project] .story-grid img,
  #case[data-project] .story-grid video {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  #case[data-project] .story-copy,
  #case[data-project] .story-copy.copy-right,
  #case[data-project="eliteserien"] .story-body > .story-copy,
  #case[data-project="eliteserien"] .story-body > .story-copy:nth-child(6),
  #case[data-project="premier-league"] .story-copy {
    display: block;
    margin: 72px 0 24px;
    padding: 0;
  }
  #case[data-project] .story-copy h2,
  #case[data-project] .story-copy.copy-right h2,
  #case[data-project="eliteserien"] .story-body > .story-copy > h2,
  #case[data-project="eliteserien"] .story-body > .story-copy:nth-child(6) > h2,
  #case[data-project="premier-league"] .story-copy h2 {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* Process walls remain compact on mobile */
  #case .story-process {
    margin: 0 8px 72px;
  }
  #case .process-intro {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 34px 0 38px;
  }
  #case:not([data-project="tekna"]) .process-grid { columns: 2; column-gap: 8px; }
  #case .process-grid figure { margin-bottom: 8px; border-radius: 8px; overflow: hidden; }
  #case[data-project="tekna"] .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #case[data-project="tekna"] .process-grid > figure { grid-column: auto !important; }

  /* Touch UI */
  .motion-toggle {
    right: 9px;
    bottom: 9px;
    padding: 6px 10px;
    font-size: 12px;
    opacity: .9;
  }

  /* Footer */
  footer,
  body.viewing-case footer {
    padding: 36px var(--pad) 24px;
  }
  .footer-top,
  body.viewing-case .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 38px;
  }
  .footer-top > span,
  body.viewing-case .footer-top > span,
  .footer-top > a,
  body.viewing-case .footer-top > a {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .footer-top > a,
  body.viewing-case .footer-top > a {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1px;
  }
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 20px;
  }
  .footer-bottom > a,
  .footer-bottom > div,
  .footer-bottom > span {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .footer-bottom div { gap: 18px; }
}

@media (max-width: 380px) {
  :root {
    --pad: 14px;
    --heading-size: 32px;
    --case-large-type: 31px;
  }
  body:not(.viewing-case) header { gap: 12px; }
  body:not(.viewing-case) .wordmark { font-size: 26px; }
  body:not(.viewing-case) header nav { gap: 18px; font-size: 13px; }

  body.viewing-case[data-project] header > a,
  body.viewing-case[data-project] header nav { padding: 7px 8px; }
  body.viewing-case[data-project] header .wordmark { font-size: 18px; }
  body.viewing-case[data-project] header nav { gap: 8px; font-size: 12px; }

  #case[data-project] .story-hero {
    height: 58svh;
    min-height: 300px;
  }
  #case[data-project] .story-intro { padding-bottom: 64px; }
  #case:not([data-project="tekna"]) .process-grid { columns: 1; }
}