/* repeating title, drifts left faster than the work row */
.marq{overflow:hidden;padding-top:clamp(24px,5vw,72px)}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite;will-change:transform}
.mq-half{display:flex}
.mq-item{margin:0;font-weight:500;font-size:clamp(5.5rem,30vw,32rem);line-height:.86;letter-spacing:-.065em;white-space:nowrap;padding-right:.4em;padding-bottom:.04em}
@keyframes mq{to{transform:translateX(-50%)}}
.meta-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px var(--gutter);padding-block:clamp(28px,4vw,56px) clamp(32px,5vw,72px);margin:0}
.meta-grid div{grid-column:span 4}
.meta-grid dt{color:var(--mute);font-size:.9rem}
.meta-grid dd{margin:0;font-weight:500}
.bleed{position:relative;overflow:hidden;height:clamp(280px,54vw,820px);background:var(--line)}
.bleed img{width:100%;height:122%;margin-top:-11%;object-fit:cover;object-position:50% 50%;will-change:transform}
.prose{grid-column:5/13;max-width:36em;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.4;letter-spacing:-.01em}
.prose p+p{margin-top:1em}

/* pinned device scene: laptop tilts flat, screen wipes to next page, phone rises in */
.scene{position:relative;height:300vh;margin-top:clamp(24px,4vw,56px)}
.scene-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vw,36px);overflow:hidden;perspective:1700px;perspective-origin:50% 40%}
.dev{position:relative;width:min(80vw,1120px);transform-style:preserve-3d}
.laptop{position:relative;transform-origin:50% 100%;transform:translate3d(calc(var(--lx,0)*1%),0,0) rotateX(calc(var(--rx,40)*1deg)) rotateZ(calc(var(--rz,-5)*1deg)) scale(var(--sc,.8));transform-style:preserve-3d;will-change:transform}
.lid{position:relative;background:#171716;border-radius:clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px) 0 0;padding:2.4% 2.4% 3%;box-shadow:0 0 0 1px #3a3a37 inset,0 50px 80px -50px rgba(20,20,18,.55)}
.cam{position:absolute;top:1.1%;left:50%;width:.7%;aspect-ratio:1;border-radius:50%;background:#3b3b38;transform:translateX(-50%)}
.lid-screen{position:relative;aspect-ratio:2880/1624;overflow:hidden;background:#fff;border-radius:2px}
.lid-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lid-screen .s2{clip-path:inset(0 0 0 calc(100% - var(--wp,0)*1%))}
.base{height:clamp(8px,1.3vw,16px);width:112%;margin-left:-6%;background:linear-gradient(#e4e2da,#b9b6ab);border-radius:0 0 clamp(10px,2vw,24px) clamp(10px,2vw,24px);box-shadow:0 30px 40px -20px rgba(20,20,18,.45);position:relative}
.base::after{content:"";position:absolute;top:0;left:50%;width:14%;height:55%;transform:translateX(-50%);background:#a8a599;border-radius:0 0 8px 8px}
.phone-m{position:absolute;right:-2%;bottom:-6%;width:clamp(110px,19%,230px);aspect-ratio:800/1624;border:clamp(5px,.6vw,8px) solid #171716;border-radius:clamp(20px,3vw,34px);overflow:hidden;background:#fff;box-shadow:0 50px 70px -30px rgba(20,20,18,.6);opacity:var(--po,0);transform:translate3d(0,calc(var(--py,110)*1%),0) rotate(calc(var(--pr,8)*1deg));will-change:transform,opacity}
.phone-m img{width:100%;height:100%;object-fit:cover;display:block}
.steps{display:flex;gap:clamp(14px,3vw,40px);list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--mute)}
.steps li{transition:color .4s var(--ease),opacity .4s var(--ease);opacity:.45}
.steps li.on{color:var(--ink);opacity:1}

/* full-bleed image that grows from a rounded inset to the full width */
.bleed.grow{clip-path:inset(0 var(--gi,12%) 0 var(--gi,12%) round var(--gr,24px));margin-top:clamp(40px,6vw,90px)}

/* stacking image cards: each one slides over the last, which shrinks and tilts back */
.stack{padding-top:clamp(40px,6vw,90px)}
.sc{position:sticky;top:calc(84px + var(--i,0)*12px);margin:0 0 clamp(24px,16vh,160px);will-change:transform;transform-origin:50% 0}
.sc:last-child{margin-bottom:0}
.sc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px -40px rgba(20,20,18,.5)}

.next{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:clamp(48px,8vw,120px) 0;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.04em;font-weight:500}
.next a{text-decoration:none;display:inline-flex;align-items:center;min-height:56px;border-bottom:2px solid var(--ink)}
.small-note{color:var(--mute);font-size:.9rem;padding-top:16px}

/* long titles */
.marq.long .mq-item{font-size:clamp(4.5rem,19vw,20rem)}
/* sketch -> photograph wipe, pinned while scrolling */
.wipe{position:relative;height:240vh;margin-top:clamp(24px,4vw,56px)}
.wipe-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vw,36px);overflow:hidden}
.wipe-fig{position:relative;width:min(92vw,1240px);aspect-ratio:1456/816;overflow:hidden;background:var(--line);transform:scale(var(--ws,.92));will-change:transform}
.wipe-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe-fig .top{clip-path:inset(0 calc(100% - var(--wp,0)*1%) 0 0)}
.wipe-fig::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--wp,0)*1%);width:2px;margin-left:-1px;background:#fff;opacity:calc(var(--wl,0));mix-blend-mode:difference}
/* two portrait posters drifting at different speeds */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start;padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(24px,5vw,72px)}
.duo figure{overflow:hidden;background:var(--line);aspect-ratio:4/5}
.duo figure:nth-child(2){margin-top:clamp(40px,10vw,160px)}
.duo img{width:100%;height:112%;margin-block:-6%;object-fit:cover;will-change:transform}
.sc.tall img{width:auto;max-width:100%;aspect-ratio:auto;max-height:calc(100svh - 150px);margin:0 auto}
.sc.wide img{aspect-ratio:16/9}
@media (max-width:820px){
  .prose{grid-column:1/13}
  .meta-grid div{grid-column:span 6}
  .scene{height:240vh}
  .dev{width:90vw}
  .scene-pin{gap:56px}
  .phone-m{right:-3%;bottom:-12%;width:30%}
  .steps{font-size:.8rem}
  .sc{top:calc(72px + var(--i,0)*10px)}
  .sc img{aspect-ratio:4/3}
  .sc.wide img{aspect-ratio:16/9}
  .wipe{height:200vh}
  .duo{gap:12px}
  .next{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .wipe{height:auto;padding-block:48px}.wipe-pin{position:static;height:auto}.wipe-fig{aspect-ratio:auto;transform:none!important;display:grid;gap:12px;background:none}.wipe-fig img{position:static;height:auto}.wipe-fig .top{clip-path:none!important}.wipe-fig::after{display:none}.duo img{transform:none!important}
  .bleed img{transform:none!important}
  .mq-track{animation:none}
  .scene{height:auto;padding-block:48px}
  .scene-pin{position:static;height:auto}
  .laptop{transform:none!important}
  .phone-m{opacity:1!important;transform:none!important}
  .lid-screen .s2{clip-path:none!important}
  .bleed.grow{clip-path:none!important}
  .sc{position:static;transform:none!important}
}

/* compact project pages */
.meta-grid{padding-block:clamp(16px,2.5vw,32px) clamp(20px,3vw,40px)}
.scene{height:250vh;margin-top:clamp(8px,2vw,24px)}
.wipe{height:200vh;margin-top:clamp(8px,2vw,24px)}
.stack{padding-top:clamp(24px,4vw,56px)}
.bleed.grow{margin-top:clamp(24px,4vw,56px)}
.sc{margin:0 0 clamp(16px,9vh,90px)}
.sc:last-child{margin-bottom:0}
.duo{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(8px,2vw,24px)}
.next{padding-block:clamp(32px,5vw,72px) 0}
@media (max-width:820px){
  .scene{height:200vh}
  .wipe{height:170vh}
  .sc{margin-bottom:10vh}
  .sc:last-child{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.scene,.wipe{height:auto}}

/* pinned stages replace the old parallax and sticky card rules */
.pin-stage .bleed{height:min(76svh,62vw,820px)}
.bleed.grow{clip-path:inset(0 var(--gi,12%) 0 var(--gi,12%) round var(--gr,24px));margin-top:0}
.duo-stage figure:nth-child(2){margin-top:0!important}
@media (max-width:820px){.pin-stage .bleed{height:min(62svh,100vw)}}
.duo{display:block;padding:0;gap:0}
.js .duo .duo-stage{display:grid}
@media (max-width:820px){
  .js .duo .duo-stage{grid-template-columns:1fr}
  .duo-stage figure{grid-area:1/1}
  .duo-stage img{max-width:min(88vw,520px)!important}
}

.scene{height:215vh}
.wipe{height:170vh}
.pin-stage .bleed{height:min(84svh,64vw,860px)}
@media (max-width:820px){.scene{height:175vh}.wipe{height:150vh}.pin-stage .bleed{height:min(70svh,110vw)}}

/* desktop only: the laptop scene always fits inside the screen height */
@media (min-width:821px){
  .scene-pin{padding-top:64px;box-sizing:border-box}
  .dev{width:min(80vw,1120px,calc((100svh - 200px)/.62))}
}

/* AcadeMedia: card fan hero */
.js .fanpin{height:150svh}
.fanpin .pin-stage{display:flex;align-items:center;justify-content:center}
.fan-stage{position:relative;width:100%;height:min(84svh,64vw,860px);background:#0e2e2b;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.fan-card{grid-area:1/1;height:66%;width:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.4));will-change:transform;transform-origin:50% 90%}
.fan-logo{position:absolute;left:clamp(16px,3vw,40px);top:clamp(16px,3vw,36px);width:clamp(46px,5vw,72px);height:auto;opacity:.9}
/* four decks, each lifts and tilts toward the cursor */
.deck{list-style:none;margin:0;padding:clamp(24px,4vw,56px) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,36px)}
.deck-card{margin:0;perspective:900px}
.deck-tilt{display:block;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--ly,0px));transition:transform .6s var(--ease);will-change:transform}
.deck-tilt img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(20,20,18,.18))}
.deck-card:hover .deck-tilt{--ly:-10px}
.deck-t{display:block;margin-top:14px;font-size:.95rem;color:var(--mute)}
/* app screens on two tablets */
.tabs{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,4vw,64px);padding-block:clamp(24px,4vw,56px)}
.tab{margin:0;width:min(34vw,440px);border:clamp(8px,1vw,14px) solid #171716;border-radius:clamp(18px,2.4vw,34px);overflow:hidden;background:#171716;box-shadow:0 40px 70px -40px rgba(20,20,18,.55);will-change:transform}
.tab img{display:block;width:100%;aspect-ratio:3/4.2;object-fit:cover;object-position:50% 0;border-radius:clamp(8px,1vw,18px)}
.tab-b{margin-top:clamp(40px,8vw,120px)}
@media (max-width:820px){
  .deck{grid-template-columns:1fr 1fr}
  .tab{width:44vw}
  .fan-card{height:56%}
}
@media (prefers-reduced-motion:reduce){.js .fanpin{height:auto}.deck-tilt{transition:none}}
.fan-card{height:50%}
@media (max-width:820px){.fan-stage{height:min(66svh,118vw)}.fan-card{height:44%}}
.fan-stage{--fh:min(84svh,64vw,860px);height:var(--fh)}
.fan-card{height:calc(var(--fh)*.5)}
@media (max-width:820px){.fan-stage{--fh:min(66svh,118vw)}.fan-card{height:calc(var(--fh)*.46)}}

/* calmer pace on project pages */
.meta-grid{padding-block:clamp(28px,4vw,56px) clamp(40px,5vw,80px)}
.next{padding-block:clamp(64px,8vw,120px) 0}
.scene{height:220vh}
.wipe{height:180vh}
.js .fanpin{height:150svh}
.deck,.tabs{padding-block:clamp(48px,6vw,96px)}
.sw-can{padding-block:clamp(40px,5vw,80px)}
@media (max-width:820px){.scene{height:200vh}.wipe{height:170vh}}
@media (prefers-reduced-motion:reduce){.scene,.wipe,.js .fanpin{height:auto}}

/* "My role" box: the same facts in the same place on every project */
.role-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line)!important;margin-bottom:clamp(8px,2vw,24px)}
.role-box .rows li>span:last-child{line-height:1.45}
.role-box .tool-list{display:flex;flex-wrap:wrap;gap:6px}
.role-box .tool-list span{border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.92rem;line-height:1.5}
/* honest captions under images */
.img-note{color:var(--mute);font-size:.92rem;line-height:1.45;max-width:44em;margin:14px 0 0}
.img-note.center{text-align:center;margin-inline:auto}
.wipe .img-note{margin-top:0;padding-inline:16px}