:root{--paper:#f2efe7;--ink:#101010;--pink:#ff78b9;--acid:#dfff39;--blue:#6677ff;--red:#ff4938;--lilac:#d8b8ef;--white:#fff;--line:1px solid currentColor}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper);width:100%;max-width:100%;overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-weight:700;width:100%;max-width:100%;overflow-x:clip}main{width:100%;max-width:100%;overflow-x:clip}body.index-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.site-head{position:fixed;z-index:90;left:0;right:0;top:0;height:62px;padding:11px 16px;display:flex;justify-content:space-between;align-items:flex-start;mix-blend-mode:difference;color:#fff;pointer-events:none}.site-head>*{pointer-events:auto}.brand{font-size:11px;line-height:.9;letter-spacing:-.04em}.brand span{font-size:7px;margin-left:4px;vertical-align:top}.head-right{display:flex;gap:28px;align-items:flex-start;font-size:10px}.head-current{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.index-open{border:0;background:none;padding:0;cursor:pointer}.index-panel{position:fixed;z-index:120;inset:0;background:var(--paper);transform:translateY(-102%);transition:transform .55s cubic-bezier(.77,0,.18,1);padding:14px 16px 20px;overflow:auto}.index-panel.open{transform:none}.index-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid;padding-bottom:8px;font-size:10px;position:sticky;top:0;background:var(--paper);z-index:4}.index-close{border:0;background:none;font-size:34px;line-height:.65;padding:0;cursor:pointer}.index-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:28px;min-height:calc(100vh - 55px)}.index-list{padding-top:18px}.index-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid;cursor:pointer}.index-item b{font-size:clamp(28px,4.5vw,74px);letter-spacing:-.065em;line-height:.85}.index-item span,.index-item em{font-size:9px;font-style:normal}.index-item:hover,.index-item.active{font-style:italic}.index-preview{margin:0;position:sticky;top:54px;height:calc(100vh - 76px);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.index-preview img{display:block;max-width:90%;max-height:74vh;object-fit:contain}.index-preview figcaption{width:90%;padding-top:10px;font-size:9px}.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:90px 16px 26px;overflow:hidden}.hero-kicker{position:absolute;top:88px;left:16px;font-size:9px;letter-spacing:.09em}.hero h1{position:relative;z-index:4;margin:0;font-size:clamp(68px,14vw,210px);line-height:.72;letter-spacing:-.09em;font-weight:900}.hero h1 span{display:block;white-space:nowrap}.hero h1>span:nth-child(2){text-align:right}.hero h1>span:nth-child(3){padding-left:12vw}.red-dot{display:inline!important;color:var(--red)}.hero-copy{position:absolute;z-index:5;right:16px;bottom:66px;text-align:right;font-size:11px;line-height:1.15}.hero-scroll{position:absolute;z-index:5;left:16px;bottom:22px;font-size:9px}.hero-card{position:absolute;margin:0;z-index:2;pointer-events:none;will-change:transform}.hero-card img{display:block;width:100%;height:100%;object-fit:cover}.hc1{width:min(20vw,285px);right:3vw;top:11vh;transform:rotate(8deg)}.hc2{width:min(15vw,210px);left:4vw;bottom:4vh;transform:rotate(-7deg)}.hc3{width:min(13vw,185px);left:44vw;top:4vh;transform:rotate(4deg)}.hc4{width:min(17vw,230px);right:29vw;bottom:3vh;transform:rotate(-2deg)}.ticker{height:54px;border-top:1px solid;border-bottom:1px solid;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-size:31px;letter-spacing:-.045em}.ticker div{display:inline-block;animation:ticker 25s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}.project{position:relative;overflow:clip;padding-bottom:12vw}.tone-paper{background:var(--paper);color:var(--ink)}.tone-white{background:#fff;color:var(--ink)}.tone-pink{background:var(--pink);color:var(--ink)}.tone-acid{background:var(--acid);color:var(--ink)}.tone-blue{background:var(--blue);color:var(--ink)}.tone-red{background:var(--red);color:var(--ink)}.tone-lilac{background:var(--lilac);color:var(--ink)}.tone-black{background:var(--ink);color:var(--paper)}.project-intro{min-height:60vh;padding:86px 16px 34px;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.project-intro.compact{min-height:48vh}.project-meta{position:absolute;top:78px;left:16px;right:16px;display:flex;justify-content:space-between;border-bottom:1px solid;padding-bottom:7px;font-size:9px}.info-toggle{border:0;background:none;padding:0;cursor:pointer;font-size:9px}.project-intro h2{margin:0;font-size:clamp(65px,13vw,188px);line-height:.73;letter-spacing:-.085em;font-weight:900;text-transform:uppercase;max-width:95vw}.project-info{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.77,0,.18,1),opacity .25s,padding .3s;max-width:620px;margin-left:auto}.project-info p{font-size:14px;line-height:1.25;margin:0}.project-intro.info-open .project-info{max-height:250px;opacity:1;padding-top:18px}.inverse{color:var(--paper)}.image-button{border:0;background:none;padding:0;margin:0;display:block;cursor:zoom-in;overflow:hidden}.image-button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.image-button:hover img{transform:scale(1.015)}.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;padding:0 4vw;align-items:center;min-height:78vh}.triptych .image-button{aspect-ratio:1}.tilt-l{transform:rotate(-4deg)}.tilt-r{transform:rotate(5deg)}.lift{transform:translateY(-5vw)}.big-aside{font-size:clamp(80px,17vw,245px);line-height:.67;letter-spacing:-.09em;margin:4vw 16px 0;text-align:right}.editorial-grid{position:relative;margin:0 16px;min-height:170vh}.rozzi-grid .r-wide{position:absolute;left:0;top:0;width:68%;height:38vw}.rozzi-grid .r-tall{position:absolute;right:2%;top:20vw;width:32%;height:49vw}.rozzi-grid .r-small{position:absolute;left:7%;top:48vw;width:43%;height:27vw}.rozzi-grid .r-small2{position:absolute;right:12%;top:78vw;width:42%;height:26vw}.rozzi-grid .r-end{position:absolute;left:2%;top:101vw;width:32%;height:40vw}.paul-project{min-height:150vh}.paul-object{width:min(78vw,1050px);height:auto;margin:0 auto;position:relative;z-index:2}.paul-object img{object-fit:contain}.giant-number{font-size:52vw;line-height:.55;letter-spacing:-.12em;position:absolute;bottom:0;left:-4vw;color:var(--red);z-index:0;pointer-events:none}.med-layout{display:grid;grid-template-columns:1fr .7fr 1fr;gap:3vw;align-items:start;padding:0 3vw 4vw}.med-layout .med-cover,.med-layout .med-back{aspect-ratio:1}.med-photo{aspect-ratio:1.25;transform:translateY(13vw) rotate(-3deg)}.south-hero{display:grid;grid-template-columns:1.6fr .6fr;gap:2vw;align-items:center;padding:0 16px}.south-hero .image-button{aspect-ratio:1.5}.south-hero video{width:100%;height:42vw;object-fit:cover;display:block}.drag-label{font-size:9px;color:var(--paper);padding:8vw 16px 10px}.drag-label.dark{color:var(--ink)}.drag-strip{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:0 16px 5vw;cursor:grab;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}.drag-strip::-webkit-scrollbar{display:none}.drag-strip.dragging{cursor:grabbing}.drag-strip .poster{flex:0 0 min(28vw,410px);aspect-ratio:.5625}.south-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:4vw 16px 0}.south-pair .image-button{aspect-ratio:1.77}.tv-layout{display:grid;grid-template-columns:1.3fr .65fr .65fr;grid-template-rows:auto auto;gap:2vw;padding:0 4vw}.tv-main{grid-row:1/3;aspect-ratio:1.37}.tv-two,.tv-three{aspect-ratio:1.37}.tv-project blockquote,.project blockquote{margin:8vw 16px 0;font-size:clamp(42px,8vw,115px);line-height:.82;letter-spacing:-.065em}.project blockquote small{display:block;font-size:10px;letter-spacing:0;margin-top:12px}.film-card{min-height:130vh;padding-bottom:0}.film-card .project-intro{min-height:68vh}.watch-card{min-height:62vh;display:flex;align-items:center;justify-content:center;position:relative;border-top:1px solid currentColor;overflow:hidden}.watch-card span{font-size:clamp(100px,27vw,390px);letter-spacing:-.1em;line-height:.6}.watch-card small{position:absolute;bottom:18px;right:16px;font-size:9px}.watch-card:hover span{font-style:italic}.dark-text{color:var(--ink)}.blackpool-stage{min-height:90vh;position:relative;display:flex;align-items:center;justify-content:center}.blackpool-stage .image-button{width:min(38vw,510px);position:relative;z-index:2}.blackpool-stage .image-button img{object-fit:contain}.blackpool-type{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:clamp(100px,23vw,330px);line-height:.66;letter-spacing:-.09em;color:var(--pink);z-index:1}.under-link{display:block;border-top:1px solid var(--paper);border-bottom:1px solid var(--paper);padding:12px 16px;font-size:10px}.divorce-opener{min-height:75vh;display:flex;align-items:center;justify-content:center;gap:8vw;padding:2vw 5vw 8vw}.divorce-opener .plate{width:28vw;aspect-ratio:1;transform:rotate(-7deg)}.divorce-opener .book{width:47vw;aspect-ratio:4/3;transform:rotate(2deg)}.divorce-strip .spread{flex:0 0 min(64vw,920px);aspect-ratio:4/3}.pop-collage{position:relative;min-height:235vh;margin:0 16px}.pop-collage .image-button{position:absolute}.pop-collage .p1{width:56%;left:0;top:0;aspect-ratio:1.47}.pop-collage .p2{width:35%;right:2%;top:13vw;aspect-ratio:1}.pop-collage .p3{width:25%;left:12%;top:44vw;aspect-ratio:.62}.pop-collage .p4{width:42%;right:5%;top:58vw;aspect-ratio:1.07}.pop-collage .p5{width:48%;left:2%;top:91vw;aspect-ratio:1.49}.pop-collage .p6{width:38%;right:1%;top:111vw;aspect-ratio:1.47}.pop-collage .p7{width:34%;left:16%;top:140vw;aspect-ratio:1.33}.pop-collage .p8{width:42%;right:10%;top:158vw;aspect-ratio:1.33}.more-heading{min-height:92vh;padding:70px 16px 26px;display:flex;flex-direction:column;justify-content:center}.more-heading p{margin:0;font-size:clamp(64px,14vw,205px);line-height:.72;letter-spacing:-.085em}.more-heading span{font-size:9px;margin-top:28px}.mini-three{display:grid;grid-template-columns:1.2fr .8fr 1.1fr;gap:2vw;padding:0 3vw}.mini-three .image-button{aspect-ratio:1.35}.mini-three .image-button:nth-child(2){transform:translateY(8vw)}.huge-single{width:min(78vw,1050px);aspect-ratio:1.01;margin:0 auto}.sussex-layout{display:grid;grid-template-columns:.6fr 1.3fr;grid-template-rows:auto auto;gap:2vw;padding:0 4vw;align-items:start}.sussex-layout .s1{grid-row:1/3;aspect-ratio:.75}.sussex-layout .s2{aspect-ratio:2.41}.sussex-layout .s3{aspect-ratio:1.4}.kiruna-single{width:min(60vw,800px);margin:0 auto;aspect-ratio:.673}.kerouac-layout{display:grid;grid-template-columns:1.2fr .7fr 1.1fr;gap:2vw;padding:0 2vw;align-items:center}.kerouac-layout .image-button{aspect-ratio:1.2}.kerouac-layout .tall{aspect-ratio:.72;transform:translateY(6vw)}.who{min-height:110vh;display:grid;grid-template-columns:.75fr 1.25fr;gap:5vw;padding:90px 16px 12vw;background:var(--paper)}.who figure{margin:0;align-self:center}.who figure img{width:100%;display:block}.who-copy{align-self:center}.who-copy>span{font-size:9px}.who-copy h2{font-size:clamp(60px,10vw,152px);line-height:.72;letter-spacing:-.08em;margin:14px 0 30px}.who-copy p{font-size:15px;line-height:1.25;max-width:540px}.contact{min-height:100svh;background:var(--red);padding:80px 16px 28px;display:flex;flex-direction:column;justify-content:center;position:relative}.contact>span{position:absolute;top:78px;font-size:9px}.contact p{font-size:clamp(72px,15vw,220px);line-height:.7;letter-spacing:-.09em;margin:0}.contact a{font-size:clamp(42px,7vw,100px);border-bottom:4px solid;align-self:flex-end;margin-top:6vw;letter-spacing:-.05em}footer{background:var(--ink);color:var(--paper);padding:22px 16px 56px;display:flex;justify-content:space-between;font-size:9px}.scroll-dock{position:fixed;z-index:80;left:0;right:0;bottom:0;height:36px;background:var(--paper);color:var(--ink);border-top:1px solid;display:grid;grid-template-columns:auto 38px minmax(0,1fr) 24vw;gap:8px;align-items:center;padding:0 10px;font-size:9px}.dock-index{border:0;background:none;padding:0;cursor:pointer;text-align:left}.dock-progress{height:1px;background:#b9b6ae}.dock-progress i{display:block;height:1px;background:var(--ink);width:0}.lightbox{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;background:var(--ink);color:var(--paper)}.lightbox::backdrop{background:var(--ink)}.lightbox img{width:100%;height:100%;object-fit:contain;display:block}.lightbox-close{position:fixed;z-index:2;top:12px;right:16px;border:0;background:none;color:var(--paper);font-size:40px;line-height:.7;cursor:pointer}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}
@media(max-width:800px){html,body,main{width:100%;max-width:100%;overflow-x:clip}.hero,.ticker,.project,.more-heading,.who,.contact,footer{max-width:100%;overflow-x:clip}.drag-strip{cursor:auto;overscroll-behavior-x:contain}.hero-card{will-change:auto}.site-head{height:54px;padding:10px 12px}.head-current{display:none}.index-open{font-size:9px}.index-panel{padding:12px}.index-grid{grid-template-columns:1fr}.index-preview{display:none}.index-item{grid-template-columns:32px 1fr}.index-item b{font-size:10vw}.index-item em{display:none}.hero{padding:74px 12px 20px}.hero-kicker{top:65px;left:12px;font-size:8px}.hero h1{font-size:20vw;line-height:.73}.hero h1>span:nth-child(2){text-align:left}.hero h1>span:nth-child(3){padding-left:15vw}.hero-copy{right:12px;bottom:56px;font-size:9px}.hero-scroll{left:12px;bottom:18px}.hc1{width:35vw;right:-7vw;top:15vh}.hc2{width:27vw;left:-6vw;bottom:10vh}.hc3{width:23vw;left:59vw;top:8vh}.hc4{width:31vw;right:24vw;bottom:7vh}.ticker{height:46px;font-size:25px}.project{padding-bottom:22vw}.project-intro,.project-intro.compact{min-height:50vh;padding:66px 12px 22px}.project-meta{top:61px;left:12px;right:12px}.project-intro h2{font-size:18vw;line-height:.75}.project-info p{font-size:12px}.triptych{grid-template-columns:1fr 1fr;gap:10px;padding:0 12px;min-height:auto}.triptych .image-button:nth-child(3){grid-column:1/3;width:62%;margin-left:auto;margin-top:10px}.lift{transform:translateY(7vw)}.big-aside{font-size:22vw;margin:18vw 12px 0}.editorial-grid{margin:0 12px;min-height:150vh}.rozzi-grid .r-wide{width:86%;height:52vw}.rozzi-grid .r-tall{top:43vw;width:45%;height:70vw}.rozzi-grid .r-small{left:0;top:77vw;width:54%;height:36vw}.rozzi-grid .r-small2{right:0;top:120vw;width:75%;height:47vw}.rozzi-grid .r-end{left:5%;top:173vw;width:48%;height:60vw}.paul-project{min-height:110vh}.paul-object{width:94vw}.giant-number{font-size:74vw}.med-layout{grid-template-columns:1fr 1fr;gap:10px;padding:0 12px}.med-photo{grid-column:1/3;width:65%;justify-self:center;transform:translateY(0) rotate(-3deg)}.south-hero{grid-template-columns:1fr;padding:0 12px;gap:10px}.south-hero video{height:125vw}.drag-label{padding:18vw 12px 8px}.drag-strip{padding:0 12px 10vw;gap:9px}.drag-strip .poster{flex-basis:62vw}.south-pair{grid-template-columns:1fr;padding:4vw 12px 0}.tv-layout{grid-template-columns:1fr 1fr;padding:0 12px;gap:9px}.tv-main{grid-column:1/3;grid-row:auto}.project blockquote{font-size:12vw;margin:16vw 12px 0}.film-card{min-height:100vh}.film-card .project-intro{min-height:50vh}.watch-card{min-height:50vh}.watch-card span{font-size:35vw}.blackpool-stage{min-height:74vh}.blackpool-stage .image-button{width:62vw}.blackpool-type{font-size:27vw;left:12px}.under-link{padding:11px 12px}.divorce-opener{min-height:60vh;gap:4vw}.divorce-opener .plate{width:32vw}.divorce-opener .book{width:58vw}.divorce-strip .spread{flex-basis:88vw}.pop-collage{min-height:175vh;margin:0 12px}.pop-collage .p1{width:78%}.pop-collage .p2{width:48%;top:42vw}.pop-collage .p3{width:36%;top:82vw}.pop-collage .p4{width:56%;top:105vw}.pop-collage .p5{width:65%;top:157vw}.pop-collage .p6{width:52%;top:203vw}.pop-collage .p7{width:48%;top:251vw}.pop-collage .p8{width:60%;top:289vw}.more-heading{padding:64px 12px 22px;min-height:75vh}.more-heading p{font-size:18vw}.mini-three{grid-template-columns:1fr 1fr;padding:0 12px;gap:9px}.mini-three .image-button:nth-child(3){grid-column:1/3;width:72%;justify-self:end}.huge-single{width:92vw}.sussex-layout{grid-template-columns:1fr;padding:0 12px}.sussex-layout .s1{grid-row:auto;width:65%}.kiruna-single{width:78vw}.kerouac-layout{grid-template-columns:1fr 1fr;padding:0 12px;gap:9px}.kerouac-layout .image-button:nth-child(3){grid-column:1/3;width:75%;justify-self:end}.who{grid-template-columns:1fr;padding:70px 12px 18vw}.who figure{width:72%}.who-copy h2{font-size:17vw}.who-copy p{font-size:13px}.contact{padding:68px 12px 50px}.contact>span{top:64px}.contact p{font-size:18vw}.contact a{font-size:11vw;border-bottom-width:2px}.scroll-dock{grid-template-columns:auto 26px 1fr;gap:5px;height:34px;padding:0 8px}.dock-progress{display:none}footer{padding:20px 12px 52px}.lightbox-close{right:12px}.reveal{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}.reveal{opacity:1;transform:none;transition:none}.hero-card{transform:none!important}.image-button img{transition:none}.index-panel{transition:none}}

/* V3 — more moving image / whole shooting match */
.getmilk-motion{position:relative;min-height:105vh;padding:4vw 4vw 8vw;display:grid;grid-template-columns:1.4fr .6fr;grid-template-rows:auto auto;gap:2vw;align-items:start;background:#050505}.getmilk-motion video{width:100%;height:min(76vw,90vh);object-fit:cover;grid-row:1/3}.getmilk-poster{width:82%;justify-self:end;transform:rotate(2deg)}.getmilk-pack{width:66%;justify-self:start;transform:rotate(-3deg);margin-left:6%}.inverse-link{color:#fff;background:#050505;border-color:#fff}.chapter-loop{display:block;width:100%;height:auto;object-fit:cover}.war-loop{width:46vw;margin:7vw auto 0;transform:rotate(-1deg)}.poptrash-loop{width:72vw;margin:8vw auto 2vw}.tone-bone{background:#e7ddc4;color:#111}.dry-stage{position:relative;min-height:150vh;padding:4vw;overflow:hidden}.dry-stage .image-button{position:absolute}.dry-lockup{left:5vw;top:5vw;width:43vw}.dry-merch{right:5vw;top:18vw;width:38vw;transform:rotate(3deg)}.dry-umbrella{left:8vw;top:56vw;width:34vw;transform:rotate(-5deg)}.dry-towel{right:6vw;top:64vw;width:47vw;transform:rotate(2deg)}.dry-extra{left:30vw;top:103vw;width:38vw;transform:rotate(-2deg)}.shoot-project{padding-bottom:10vw}.shoot-portal{display:block;position:relative;width:72vw;margin:3vw auto 0;text-decoration:none;color:#fff}.shoot-portal img{display:block;width:100%;height:auto}.shoot-portal span{position:absolute;right:1rem;bottom:1rem;background:#fff;color:#000;padding:.7rem .85rem;font:inherit;font-size:12px;letter-spacing:.06em}.tone-yellow{background:#f5dc31;color:#111}.tone-red{background:#e23d33;color:#fff}.holding-project{min-height:100vh;display:flex;align-items:center;justify-content:center}.holding-title{width:90vw}.holding-title>span{font-size:11px;letter-spacing:.08em}.holding-title h2{font-size:clamp(4rem,14vw,14rem);line-height:.78;margin:2vw 0}.holding-title p{font-size:13px;text-transform:uppercase}.holding-title.inverse{color:#fff}
@media (max-width: 760px){.getmilk-motion{min-height:auto;display:block;padding:4vw 0 12vw}.getmilk-motion video{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}.getmilk-poster{width:48%;margin:-8vw 0 0 48%;position:relative}.getmilk-pack{width:44%;margin:-2vw 0 0 6%;position:relative}.war-loop,.poptrash-loop{width:92vw;margin:10vw auto 0}.dry-stage{min-height:155vw;padding:0}.dry-lockup{left:4vw;top:2vw;width:66vw}.dry-merch{right:3vw;top:39vw;width:58vw}.dry-umbrella{left:4vw;top:78vw;width:46vw}.dry-towel{right:2vw;top:91vw;width:59vw}.dry-extra{left:21vw;top:125vw;width:58vw}.shoot-portal{width:92vw}.holding-title h2{font-size:23vw}}

/* V04 — film still chapters */
.film-visual{padding-bottom:0}.film-hero-frame{padding:0 16px 2vw}.film-hero-frame .image-button{width:100%;aspect-ratio:16/9}.film-hero-frame img{object-fit:cover}.film-ribbon{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 5vw;scrollbar-width:none;-webkit-overflow-scrolling:touch}.film-ribbon::-webkit-scrollbar{display:none}.film-ribbon .image-button{flex:0 0 min(56vw,860px);aspect-ratio:16/9;scroll-snap-align:start}.film-ribbon .image-button:nth-child(3n+2){flex-basis:min(36vw,560px)}.film-ribbon .image-button:nth-child(4n){transform:translateY(3vw)}.rule-ribbon{background:#e1261c;padding-top:2vw;padding-bottom:8vw}.sirene-collage{position:relative;min-height:150vw;margin:0 16px 8vw}.sirene-collage .image-button{position:absolute}.sirene-collage .s-flower{width:43%;left:0;top:0;aspect-ratio:16/9}.sirene-collage .s-wall{width:28%;right:7%;top:5vw;aspect-ratio:16/9}.sirene-collage .s-cross{width:38%;right:0;top:31vw;aspect-ratio:16/9}.sirene-collage .s-pool{width:60%;left:5%;top:52vw;aspect-ratio:16/9}.sirene-collage .s-christ{width:31%;right:4%;top:87vw;aspect-ratio:16/9}.sirene-collage .s-window{width:45%;left:12%;top:111vw;aspect-ratio:16/9}.sirene-hero{padding-bottom:5vw}
@media(max-width:800px){.film-hero-frame{padding:0 12px 12vw}.film-ribbon{padding:0 12px 16vw;gap:8px}.film-ribbon .image-button,.film-ribbon .image-button:nth-child(3n+2){flex-basis:84vw}.film-ribbon .image-button:nth-child(4n){transform:none}.sirene-collage{min-height:238vw;margin:0 12px 12vw}.sirene-collage .s-flower{width:80%;left:0}.sirene-collage .s-wall{width:55%;right:0;top:48vw}.sirene-collage .s-cross{width:66%;left:6%;right:auto;top:87vw}.sirene-collage .s-pool{width:92%;left:4%;top:125vw}.sirene-collage .s-christ{width:58%;right:0;top:181vw}.sirene-collage .s-window{width:58%;left:0;top:217vw}}


/* V05 — unexplained moving interruptions */
.mischief-burst{position:relative;min-height:112vh;background:var(--paper);overflow:clip;padding:7vw 4vw}.mischief-burst.dark{background:var(--ink)}.mischief-video{position:absolute;display:block;width:auto;height:auto;object-fit:cover;background:#000;max-width:none}.mischief-one .mv-a{width:34vw;left:7vw;top:11vh;transform:rotate(-2deg)}.mischief-one .mv-b{width:21vw;right:9vw;top:16vh;transform:rotate(3deg)}.mischief-one .mv-c{width:25vw;left:48vw;bottom:8vh;transform:rotate(-1deg)}.mischief-two{min-height:145vh}.mischief-two .mv-d{width:24vw;left:7vw;top:11vh;transform:rotate(2deg)}.mischief-two .mv-e{width:27vw;right:8vw;top:18vh;transform:rotate(-3deg)}.mischief-two .mv-f{width:22vw;left:41vw;top:54vh;transform:rotate(1deg)}.mischief-two .mv-g{width:19vw;left:12vw;bottom:9vh;transform:rotate(-4deg)}.mischief-three{min-height:125vh}.mischief-three .mv-h{width:28vw;left:8vw;top:12vh;transform:rotate(-2deg)}.mischief-three .mv-i{width:25vw;right:8vw;top:23vh;transform:rotate(2deg)}.mischief-three .mv-j{width:20vw;left:43vw;bottom:9vh;transform:rotate(-1deg)}
@media(max-width:800px){.mischief-burst,.mischief-two,.mischief-three{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18vw 7vw;padding:20vw 8vw;align-items:start}.mischief-burst.dark{padding-top:25vw;padding-bottom:25vw}.mischief-video,.mischief-one .mv-a,.mischief-one .mv-b,.mischief-one .mv-c,.mischief-two .mv-d,.mischief-two .mv-e,.mischief-two .mv-f,.mischief-two .mv-g,.mischief-three .mv-h,.mischief-three .mv-i,.mischief-three .mv-j{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:100%;transform:none}.mischief-burst video:nth-child(even){margin-top:24vw}.mischief-burst video:last-child:nth-child(odd){grid-column:1/3;width:54%;justify-self:end}}

/* V06 — Get Milk trailer / laurels + Pop Trash in motion */
.getmilk-cinema{position:relative;min-height:112vh;padding:4vw 4vw 7vw;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);grid-template-rows:auto auto;gap:2vw;align-items:start;background:#050505}.getmilk-trailer-shell{position:relative;grid-row:1/3;align-self:start}.getmilk-trailer{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#000;object-fit:cover}.video-note{position:absolute;left:10px;top:10px;z-index:2;background:#050505;color:#fff;padding:7px 8px;font-size:9px;letter-spacing:.05em;pointer-events:none}.getmilk-cinema .getmilk-poster{width:82%;justify-self:end;transform:rotate(2deg)}.getmilk-cinema .getmilk-pack{width:67%;justify-self:start;transform:rotate(-3deg);margin-left:7%}.getmilk-laurels{background:#050505;color:#fff;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5vw;align-items:center;padding:3vw 4vw 7vw;border-top:1px solid rgba(255,255,255,.22)}.getmilk-laurels img{display:block;width:100%;height:auto;max-height:10vw;object-fit:contain}.getmilk-laurels .klipist-laurel{max-height:8vw;padding:1vw}
.war-film-stage{position:relative;min-height:112vh;background:#050505;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:5vw}.war-film-stage .war-film{display:block;height:100vh;max-height:1000px;width:auto;max-width:78vw;object-fit:contain;background:#050505}.war-film-stage span{position:absolute;left:16px;bottom:14px;color:#fff;font-size:9px;letter-spacing:.06em;mix-blend-mode:difference}
.pop-motion-grid{display:grid;grid-template-columns:1.05fr .75fr;grid-template-rows:auto auto;gap:2vw;padding:8vw 4vw 2vw;align-items:start}.pop-motion-grid video{display:block;width:100%;height:auto;background:#000;object-fit:cover}.pop-motion-grid .pm-a{grid-row:1/3;align-self:center;transform:rotate(-1.5deg)}.pop-motion-grid .pm-b{width:85%;justify-self:end;transform:rotate(2deg)}.pop-motion-grid .pm-c{width:92%;justify-self:start;transform:rotate(-2deg)}.poptrash-loop{width:86vw;margin:5vw auto 3vw}
@media(max-width:800px){.getmilk-cinema{min-height:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;padding:0 0 14vw;gap:4vw 2vw}.getmilk-trailer-shell{grid-column:1/3;grid-row:auto}.getmilk-trailer{width:100%;aspect-ratio:1}.video-note{left:8px;top:8px;font-size:8px}.getmilk-cinema .getmilk-poster{grid-column:2;width:88%;margin-top:-7vw;justify-self:end;position:relative;z-index:2}.getmilk-cinema .getmilk-pack{grid-column:1;grid-row:2;width:82%;margin:5vw 0 0 8%;justify-self:start}.getmilk-laurels{grid-template-columns:1fr 1fr;gap:7vw 4vw;padding:9vw 7vw 14vw}.getmilk-laurels img{max-height:25vw}.getmilk-laurels .klipist-laurel{grid-column:1/3;width:48%;justify-self:center;max-height:18vw;padding:0}.war-film-stage{min-height:auto;margin-top:10vw;padding:0;background:#050505}.war-film-stage .war-film{width:100%;height:auto;max-width:none;max-height:none}.war-film-stage span{left:10px;bottom:10px}.pop-motion-grid{grid-template-columns:1fr 1fr;gap:12vw 5vw;padding:18vw 6vw 8vw}.pop-motion-grid .pm-a{grid-row:auto;width:100%;transform:none}.pop-motion-grid .pm-b{width:100%;margin-top:18vw;transform:none}.pop-motion-grid .pm-c{grid-column:1/3;width:72%;justify-self:end;transform:none}.poptrash-loop{width:100%;margin:10vw 0 0}}


/* V07 — live Instagram window */
.instagram-live{min-height:120vh;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:5vw;padding:92px 4vw 10vw;align-items:center;position:relative;overflow:clip;border-top:1px solid}.instagram-copy{align-self:center}.instagram-copy>span{font-size:9px;letter-spacing:.08em}.instagram-copy h2{font-size:clamp(66px,10.5vw,160px);line-height:.72;letter-spacing:-.085em;margin:18px 0 28px}.instagram-copy p{font-size:13px;line-height:1.2;margin:0;max-width:360px}.instagram-copy p a{border-bottom:1px solid}.instagram-window{position:relative;width:min(100%,760px);justify-self:end;min-height:720px;background:#fff;border:1px solid var(--ink);overflow:hidden}.instagram-window iframe{position:relative;z-index:2;display:block;width:100%;height:760px;border:0;background:#fff}.instagram-fallback{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;font-size:9px;background:#fff}.instagram-fallback a{font-size:clamp(28px,4vw,62px);line-height:.82;letter-spacing:-.055em;align-self:flex-end;text-align:right;max-width:80%}.instagram-out{position:absolute;left:4vw;bottom:4vw;font-size:10px;border-bottom:1px solid}.instagram-live::after{content:'@';position:absolute;left:-.04em;bottom:-.2em;font-size:40vw;line-height:.6;letter-spacing:-.1em;color:var(--red);z-index:0;pointer-events:none}.instagram-copy,.instagram-window,.instagram-out{z-index:1}
@media(max-width:800px){.instagram-live{min-height:auto;grid-template-columns:1fr;gap:10vw;padding:74px 12px 26vw}.instagram-copy h2{font-size:20vw;margin:12px 0 18px}.instagram-copy p{font-size:12px}.instagram-window{width:100%;min-height:640px;justify-self:stretch}.instagram-window iframe{height:680px}.instagram-out{position:relative;left:auto;bottom:auto;justify-self:end;margin-top:0}.instagram-live::after{font-size:88vw;bottom:-.06em;left:-.08em;opacity:.95}}


/* V08 — tighter mobile rhythm + attention-led motion */
.motion-target{background:#000}.motion-target.motion-active{outline:0}
@media(hover:hover) and (pointer:fine){video.motion-target:not([controls]){cursor:pointer}video.motion-target{transition:transform .22s ease}video.motion-target:hover{transform:scale(1.006)}}
@media(max-width:800px){
  .hero{min-height:88svh;padding:68px 12px 18px}
  .hero-kicker{top:62px}
  .hero h1{font-size:19vw;line-height:.75}
  .hero h1>span:nth-child(2){text-align:right;padding-right:1vw}
  .hero h1>span:nth-child(3){padding-left:22vw}
  .hero-copy{right:12px;bottom:48px;max-width:74vw;font-size:9px;line-height:1.18}
  .hero-scroll{bottom:14px}
  .ticker{height:40px;font-size:22px}

  .project{padding-bottom:8vw}
  .project-intro,.project-intro.compact,.film-card .project-intro{min-height:38svh;padding:58px 12px 16px}
  .project-meta{top:54px}
  .project-intro h2{font-size:16.5vw;line-height:.77}
  .project-info p{font-size:11px}
  .film-card,.paul-project{min-height:auto}

  .triptych{gap:7px;padding:0 12px;min-height:auto}
  .big-aside{margin:8vw 12px 0;font-size:20vw}
  .project blockquote{margin:8vw 12px 0}
  .drag-label{padding:8vw 12px 7px}
  .drag-strip{padding:0 12px 7vw;gap:7px}
  .south-pair{padding-top:2vw}

  .film-hero-frame{padding:0 12px 5vw}
  .film-ribbon{padding:0 12px 8vw}
  .rule-ribbon{padding-top:0;padding-bottom:8vw}
  .sirene-collage{min-height:202vw;margin:0 12px 7vw}
  .sirene-collage .s-wall{top:39vw}.sirene-collage .s-cross{top:72vw}.sirene-collage .s-pool{top:106vw}.sirene-collage .s-christ{top:153vw}.sirene-collage .s-window{top:184vw}

  .blackpool-stage{min-height:62svh}.blackpool-stage .image-button{width:70vw}
  .divorce-opener{min-height:auto;padding:2vw 5vw 7vw}
  .divorce-strip .spread{flex-basis:82vw}

  .getmilk-cinema{padding-bottom:6vw;gap:2vw}
  .getmilk-cinema .getmilk-poster{margin-top:-4vw}
  .getmilk-cinema .getmilk-pack{margin-top:2vw}
  .getmilk-laurels{gap:4vw;padding:7vw 7vw 8vw}
  .war-film-stage{margin-top:3vw}
  .pop-motion-grid{gap:6vw 4vw;padding:8vw 6vw 5vw}
  .pop-motion-grid .pm-b{margin-top:7vw}
  .poptrash-loop{margin-top:5vw}

  .mischief-burst,.mischief-two,.mischief-three{gap:7vw 5vw;padding:10vw 6vw}
  .mischief-burst.dark{padding-top:12vw;padding-bottom:12vw}
  .mischief-burst video:nth-child(even){margin-top:8vw}

  .holding-project{min-height:58svh}.holding-title h2{font-size:20vw}
  .more-heading{min-height:52svh;padding:58px 12px 18px}.more-heading p{font-size:17vw}
  .mini-project .project-intro{min-height:31svh}

  .instagram-live{gap:5vw;padding:62px 12px 12vw}
  .instagram-copy h2{font-size:18vw;margin:8px 0 12px}
  .instagram-window{min-height:600px}.instagram-window iframe{height:620px}

  .who{min-height:auto;padding:62px 12px 10vw;gap:5vw}
  .who-copy h2{font-size:15.5vw}.who-copy p{font-size:12px}
  .contact{min-height:82svh;padding-top:62px;padding-bottom:42px}
}

/* V09 — tighter biography + cropped live Instagram grid */
.who-history{max-width:660px}
.who-history p{font-size:15px;line-height:1.28;margin:0 0 14px;font-weight:700}
.who-history p:last-child{margin-bottom:0}
.who-history em{font-style:italic}

/* Instagram's public profile embed is kept live, but its profile chrome is
   deliberately cropped away so only the six most recent tiles are visible. */
.instagram-window{
  min-height:0;
  aspect-ratio:3/2;
  border:0;
  background:transparent;
  overflow:hidden;
}
.instagram-window iframe{
  position:absolute;
  z-index:2;
  left:0;
  top:-50%;
  width:100%;
  height:calc(100% + 460px);
  border:0;
  background:#fff;
}
.instagram-fallback{border:0}

@media(max-width:800px){
  .who{padding-top:54px;padding-bottom:8vw;gap:3vw}
  .who figure{width:60%}
  .who-copy h2{font-size:15vw;margin:8px 0 16px}
  .who-history p{font-size:12px;line-height:1.27;margin-bottom:10px}

  .instagram-live{gap:4vw;padding-top:52px;padding-bottom:12vw}
  .instagram-copy h2{margin-bottom:10px}
  .instagram-window{width:100%;min-height:0;aspect-ratio:3/2}
  .instagram-window iframe{top:-50%;height:calc(100% + 420px)}
  .instagram-out{margin-top:2px}

  .contact{min-height:72svh;padding-top:58px;padding-bottom:44px}
  .contact>span{top:54px}
  .contact p{font-size:17vw}
}


/* V10 — uncropped assets, denser rhythm, bigger playable clips */
.image-button{display:flex;align-items:center;justify-content:center;background:transparent}
.image-button img,
.hero-card img,
.project video,
.mischief-video,
.chapter-loop,
.south-hero video,
.war-film-stage .war-film,
.getmilk-trailer{
  object-fit:contain !important;
  object-position:center center;
}

/* Avoid cropping image assets anywhere practical. */
.image-button img{object-fit:contain !important}

/* Get Milk */
.getmilk-cinema{min-height:auto;align-items:stretch}
.getmilk-trailer{background:#000}
.getmilk-laurels{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:18px 16px 22px;border-top:1px solid rgba(255,255,255,.22)}
.getmilk-laurels img{width:100%;height:72px;max-height:none;object-fit:contain}
.getmilk-laurels .klipist-laurel{padding:0}
.clipist-link{display:flex;align-items:center;gap:12px;padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.25);background:#050505;color:#fff;font-size:10px;letter-spacing:.04em}
.clipist-link img{width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.clipist-link span{display:flex;flex-direction:column;gap:3px}
.clipist-link strong{font-size:12px;line-height:1.05}
.clipist-link small{font-size:9px;font-weight:700;opacity:.82}

/* Southwark density */
.south-hero{gap:12px}
.south-pair{gap:12px;padding:12px 16px 0}
.south-pair .south-jcd{grid-column:1/-1}
.south-pair .south-jcd img{width:100%;height:auto}

/* Pop Trash motion */
.pop-motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:10px 16px 10px;align-items:start}
.pop-motion-grid video{display:block;width:100%;height:auto;background:#000;transform:none !important}
.pop-motion-grid .pm-a,.pop-motion-grid .pm-b,.pop-motion-grid .pm-c,.pop-motion-grid .pm-d{grid-row:auto;width:100%;justify-self:stretch}
.poptrash-loop{width:100%;margin:10px 0 0;background:#000}

/* Play prompt wrappers added by JS */
.video-shell{position:relative;display:block}
.video-shell .play-badge{position:absolute;left:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 9px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;letter-spacing:.05em;pointer-events:none;border:1px solid rgba(255,255,255,.35)}
.video-shell .play-badge::before{content:'▶';font-size:11px;line-height:1}
.video-shell.playing .play-badge{opacity:.18}
.video-shell.full-bleed{display:block}

/* General tightening */
.project{padding-bottom:8vw}
.project-intro{min-height:52vh;padding-bottom:20px}
.project-intro.compact{min-height:34vh}
.film-card .project-intro{min-height:54vh}
.contact{min-height:58vh}
.contact p{margin:.18em 0}
.who{padding-bottom:6vw}

@media(max-width:800px){
  .project{padding-bottom:5vw}
  .project-intro,.project-intro.compact,.film-card .project-intro{min-height:28svh;padding:56px 12px 12px}
  .project-intro h2{font-size:15.2vw}
  .southwark-project .project-intro{padding-bottom:8px}
  .south-hero{grid-template-columns:1fr;gap:10px;padding:0 12px}
  .south-hero .image-button,
  .south-hero .video-shell,
  .south-hero video{width:100%;height:auto}
  .drag-label{padding:10px 12px 6px}
  .drag-strip{gap:8px;padding:0 12px 5vw}
  .south-pair{grid-template-columns:1fr;gap:10px;padding:10px 12px 0}
  .south-pair .south-jcd{grid-column:auto}

  .getmilk-cinema{display:grid;grid-template-columns:1fr;gap:10px;padding:0 12px 2vw}
  .getmilk-trailer-shell{grid-column:auto;margin-left:-12px;margin-right:-12px;width:calc(100% + 24px)}
  .getmilk-trailer{width:100%;aspect-ratio:1}
  .getmilk-cinema .getmilk-poster,
  .getmilk-cinema .getmilk-pack{width:100%;margin:0;transform:none;justify-self:stretch}
  .getmilk-cinema .getmilk-poster{grid-column:auto;order:2}
  .getmilk-cinema .getmilk-pack{grid-column:auto;grid-row:auto;order:3}
  .getmilk-laurels{grid-template-columns:1fr 1fr;gap:10px;padding:14px 12px 18px}
  .getmilk-laurels img{height:58px}
  .getmilk-laurels .klipist-laurel{grid-column:1/3}
  .clipist-link{padding:12px}
  .clipist-link img{width:30px;height:30px}

  .war-film-stage{margin-top:2vw;padding:0;background:#050505;margin-left:-12px;margin-right:-12px}
  .war-film-stage .war-film{width:100%;max-width:none;height:auto;max-height:none}

  .pop-motion-grid{grid-template-columns:1fr;gap:10px;padding:6px 12px 0}
  .poptrash-loop{margin-top:10px;margin-left:-12px;margin-right:-12px;width:calc(100% + 24px)}
  .poptrash-loop + .video-shell,
  .war-film-stage + .video-shell{margin-top:0}

  .instagram-live{padding-bottom:10vw}
  .who{padding-top:50px;padding-bottom:6vw}
  .contact{min-height:56svh;padding-top:54px;padding-bottom:28px}
  .contact p{font-size:15vw}
}

.war-film-stage .video-shell{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.south-hero .video-shell{display:block;width:100%}
.pop-motion-grid .video-shell{display:block;width:100%}
.video-shell.full-bleed{width:100%}
.video-shell > video{display:block;width:100%;height:auto}


/* V11 — final energy / clarity pass */
.hero-copy strong{font-size:1.08em;letter-spacing:.02em}

/* Five laurels as five on a die: Klipist is the centre. */
.getmilk-laurels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto auto;
  place-items:center;
  gap:10px 18px;
}
.getmilk-laurels .l1{grid-column:1;grid-row:1}
.getmilk-laurels .l2{grid-column:3;grid-row:1}
.getmilk-laurels .l3{grid-column:1;grid-row:3}
.getmilk-laurels .l4{grid-column:3;grid-row:3}
.getmilk-laurels .l5{grid-column:2;grid-row:2}
.getmilk-laurels img{width:100%;height:78px;max-width:220px;object-fit:contain}
.getmilk-laurels .klipist-laurel{width:100%;height:78px;max-height:none;padding:0}

/* Every film link shows an actual preview and a consistent play language. */
.watch-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:56vw;max-height:82vh;background:#050505;color:#fff;overflow:hidden;border-top:1px solid currentColor}
.watch-preview img{display:block;width:100%;height:100%;max-height:82vh;object-fit:contain;background:#050505}
.watch-preview .watch-play{position:absolute;left:16px;bottom:16px;z-index:3;padding:10px 12px;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.72);font-size:11px;letter-spacing:.04em}
.watch-preview small{position:absolute;right:16px;bottom:18px;z-index:3;font-size:9px}
.watch-preview:hover .watch-play{background:#fff;color:#000}
.text-preview{min-height:55vh;background:var(--blue);color:#111}
.text-preview .lost-preview{font-size:clamp(90px,22vw,330px);line-height:.68;letter-spacing:-.09em;text-align:center}
.text-preview .watch-play{color:#fff}
.baby-preview img{width:min(72vw,960px);height:auto;max-height:70vh}

.archive-wide{width:calc(100% - 32px);margin:18px auto 0;max-height:none}
.archive-wide img{width:100%;height:auto!important;object-fit:contain!important}
.batch-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px 0}
.batch-pair .image-button img{height:auto!important}

/* Desperate Dads arrives as a real chapter. */
.desperate-project{background:#d72e70;color:#111}
.desperate-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;padding:0 16px 14px;align-items:center}
.desperate-grid .image-button img{height:auto!important}
.desperate-video{display:block;width:100%;height:auto;background:#050505;object-fit:contain}

/* GIFs rule. */
.mischief-gif{display:block;object-fit:contain!important;height:auto!important;background:#000}

/* A little more life without destabilising mobile layout. */
.project-intro h2{transition:transform .65s cubic-bezier(.16,.84,.28,1),letter-spacing .65s cubic-bezier(.16,.84,.28,1)}
.project.title-live .project-intro h2{transform:translateX(0);letter-spacing:-.085em}
@media(hover:hover) and (pointer:fine){
  .project:not(.title-live) .project-intro h2{transform:translateX(-1.8vw);letter-spacing:-.1em}
  .archive-wide:hover{transform:rotate(-.35deg)}
  .watch-preview img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .watch-preview:hover img{transform:scale(1.012)}
}

@media(max-width:800px){
  /* Natural-height headers: metadata can no longer collide with headlines. */
  .project-intro,.project-intro.compact,.film-card .project-intro{
    display:block;
    min-height:0!important;
    padding:54px 12px 14px!important;
  }
  .project-meta{
    position:static!important;
    margin:0 0 24px;
    min-height:20px;
    align-items:flex-start;
  }
  .project-intro h2{
    margin:0;
    font-size:15.1vw;
    line-height:.78;
    max-width:100%;
    overflow-wrap:normal;
  }
  .project-info{margin-left:0}
  .project-intro.info-open .project-info{padding-top:12px}

  .hero{min-height:90svh;padding-top:62px}
  .hero h1{font-size:19.3vw}
  .hero-copy{bottom:48px;max-width:80vw;font-size:9px}

  .getmilk-laurels{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:6px 8px;padding:12px 10px 16px}
  .getmilk-laurels img,.getmilk-laurels .klipist-laurel{height:62px;max-width:125px;width:100%}
  .getmilk-laurels .l1{grid-column:1;grid-row:1}.getmilk-laurels .l2{grid-column:3;grid-row:1}.getmilk-laurels .l3{grid-column:1;grid-row:3}.getmilk-laurels .l4{grid-column:3;grid-row:3}.getmilk-laurels .l5{grid-column:2;grid-row:2}

  .watch-preview{min-height:auto;padding:0;background:#050505}
  .watch-preview img{width:100%;height:auto;max-height:none;object-fit:contain}
  .watch-preview .watch-play{left:10px;bottom:10px;padding:8px 10px;font-size:9px}
  .watch-preview small{right:10px;bottom:12px}
  .text-preview{min-height:58svh;padding:18vw 0}
  .text-preview .lost-preview{font-size:25vw}
  .baby-preview img{width:78%;height:auto}

  .archive-wide{width:calc(100% - 24px);margin:10px auto 0}
  .batch-pair{grid-template-columns:1fr;gap:8px;padding:8px 12px 0}
  .desperate-grid{grid-template-columns:1fr;gap:8px;padding:0 12px 8px}
  .desperate-video{width:100%}

  /* Full-width films read as events. */
  .getmilk-trailer-shell,
  .war-film-stage,
  .poptrash-loop,
  .desperate-video{margin-left:0;margin-right:0;width:100%}
  .war-film-stage{min-height:0!important}
  .war-film-stage .video-shell{min-height:0!important}
  .war-film-stage .war-film{width:100%!important;height:auto!important;max-width:none!important;max-height:none!important}

  /* Densify the page: no accidental blank acres. */
  .project{padding-bottom:3vw}
  .triptych,.med-layout,.tv-layout,.south-hero,.south-pair,.mini-three,.sussex-layout,.kerouac-layout{margin-bottom:0}
  .drag-label{padding-top:8px}
  .film-ribbon{padding-bottom:6vw}
  .more-heading{min-height:44svh}
}


/* V12 — kinetic layer inspired by the reference site's perpetual sense of play. */
:root{--scroll-lean:0deg}
.project{isolation:isolate}
.project-intro h2{
  transform:translateX(var(--section-shift,0px)) skewX(var(--scroll-lean,0deg));
  transform-origin:left center;
  will-change:transform;
}
.project .image-button:not(.drag-strip .image-button),
.project .video-shell,
.project .watch-preview,
.project .chapter-loop{
  translate:0 var(--media-drift,0px);
  rotate:var(--section-tilt,0deg);
  transition:translate .08s linear,rotate .14s linear;
  will-change:translate,rotate;
}
/* Deliberate exceptions: functional rows stay mechanically stable. */
.getmilk-laurels img,.clipist-link,.project-meta,.drag-strip .image-button{translate:none!important;rotate:none!important}

/* Hero objects never sit completely dead. Small enough not to destabilise touch scroll. */
@keyframes float-a{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -10px;rotate:1.2deg}}
@keyframes float-b{0%,100%{translate:0 0;rotate:.8deg}50%{translate:8px 7px;rotate:-1deg}}
.hero-card{animation:float-a 8.5s ease-in-out infinite alternate}
.hero-card:nth-of-type(even){animation-name:float-b;animation-duration:10.5s}
.hero-card:nth-of-type(3){animation-duration:7.5s;animation-delay:-3s}
.hero-card:nth-of-type(4){animation-delay:-5s}

/* Play affordances should themselves look alive. */
@keyframes play-pulse{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.play-badge::before,.watch-play::first-letter{animation:play-pulse 1.15s ease-in-out infinite}
.video-shell .play-badge{transition:opacity .18s ease,transform .18s ease}
.video-shell.playing .play-badge{opacity:.22;transform:translateX(3px)}

/* Images enter like physical pieces placed on the page, without masking or cropping them. */
.reveal{opacity:0;transform:translateY(20px) rotate(.45deg);transition:opacity .55s ease,transform .8s cubic-bezier(.16,.84,.28,1)}
.reveal.in-view{opacity:1;transform:translateY(0) rotate(0)}

/* Current project gets a faint typographic after-image, clipped to its own section. */
.project::after{
  content:attr(data-title);
  position:absolute;
  z-index:-1;
  right:-.04em;
  bottom:-.16em;
  font-size:clamp(90px,20vw,300px);
  line-height:.68;
  letter-spacing:-.09em;
  opacity:.045;
  white-space:nowrap;
  pointer-events:none;
  transform:translateX(calc(var(--section-shift,0px) * -1));
}

/* Faster, less static transitions between chapters. */
@media(max-width:800px){
  .project-intro h2{transform:translateX(var(--section-shift,0px));}
  .project .image-button:not(.drag-strip .image-button),
  .project .video-shell,.project .watch-preview,.project .chapter-loop{rotate:0deg}
  .hero-card{animation-duration:7.5s}
  .project::after{font-size:31vw;bottom:-.04em;opacity:.035}
  .reveal{transform:translateY(12px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-card{animation:none}
  .project-intro h2,.project .image-button,.project .video-shell,.project .watch-preview,.project .chapter-loop{transform:none!important;translate:none!important;rotate:none!important}
}


/* V14 — one monochrome canvas, work supplies all colour. */
:root{--paper:#f5f2e9;--ink:#0b0b0b}
html,body,main,
.tone-paper,.tone-white,.tone-pink,.tone-acid,.tone-blue,.tone-red,.tone-lilac,.tone-black,
.more-heading,.instagram-live,.who,.contact,.holding-project,.desperate-project,.mischief-burst,.mischief-burst.dark{
  background:var(--paper)!important;
  color:var(--ink)!important;
}
.inverse,.inverse-link,.holding-title.inverse{color:var(--ink)!important}
.project-meta,.under-link,.clipist-link,.drag-label,.drag-label.dark{border-color:var(--ink)!important}
.drag-label,.drag-label.dark{color:var(--ink)!important}
/* Films may still create deliberate black 'screens' inside the otherwise monochrome page. */
.getmilk-cinema,.war-film-stage,.video-shell,.watch-preview,.poptrash-loop,.desperate-video{background:#000}
.clipist-link{background:var(--paper);color:var(--ink);border-top:1px solid var(--ink)}
.clipist-link img{filter:none}

/* Continuous image river: motion that does not depend on autoplay permissions. */
.visual-river{width:100%;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--paper);padding:10px 0}
.visual-river-track{display:flex;align-items:center;gap:10px;width:max-content;animation:visual-river 34s linear infinite;will-change:transform}
.visual-river img{display:block;width:auto;height:clamp(110px,18vw,280px);max-width:42vw;object-fit:contain;flex:0 0 auto;background:transparent}
.visual-river img:nth-child(3n+2){height:clamp(84px,14vw,220px)}
.visual-river img:nth-child(4n){height:clamp(130px,21vw,320px)}
@keyframes visual-river{to{transform:translateX(-50%)}}
.visual-river:hover .visual-river-track{animation-play-state:paused}

/* Less section-box feeling, more continuous editorial scroll. */
.project{border-bottom:1px solid var(--ink);padding-bottom:4vw}
.project-intro{min-height:44vh;padding-top:72px;padding-bottom:16px}
.project-intro.compact{min-height:30vh}
.film-card .project-intro{min-height:44vh}
.project::after{color:var(--ink);opacity:.025}
.more-heading{border-top:0;border-bottom:1px solid var(--ink)}

/* Keep the media lively while respecting its native proportions. */
.image-button img,.project video,.visual-river img{object-fit:contain!important}
.video-shell{overflow:hidden}
.video-shell > video{width:100%;height:auto!important;max-height:92vh;object-fit:contain!important}
.video-shell .play-badge{border-radius:999px;background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.82);padding:8px 11px}
.video-shell.playing .play-badge{opacity:.12}

/* Duran / Pop Trash should read as a run of connected visual chapters. */
#we-are-rewind,#pop-trash,#medazzaland,#tv-mania{background:var(--paper)!important;color:var(--ink)!important}
#we-are-rewind + #pop-trash,#pop-trash + #medazzaland,#medazzaland + #tv-mania{border-top:0}
#pop-trash .project-intro,#medazzaland .project-intro,#tv-mania .project-intro{padding-top:58px}

/* Sociables and biography read as editorial chapters, not coloured cards. */
.instagram-copy h2{font-size:clamp(72px,14vw,215px);line-height:.76;max-width:9ch}
.who-copy h2{font-size:clamp(60px,11vw,170px);line-height:.76}

/* Mobile: reliable life, less dead air, no sideways drift. */
@media(max-width:800px){
  .site-head{mix-blend-mode:normal;color:var(--ink);height:54px;padding:10px 12px}
  .head-current{display:none}
  .hero{min-height:84svh;padding:58px 12px 18px}
  .hero-copy{position:relative;right:auto;bottom:auto;margin:9vw 0 0 auto;text-align:right;max-width:78vw;font-size:10px}
  .hero-scroll{bottom:13px}
  .hero-card{animation-duration:5.8s!important}
  .hc1{width:28vw;right:2vw;top:15vh}.hc2{width:22vw;left:0;bottom:13vh}.hc3{width:21vw;left:55vw;top:6vh}.hc4{width:25vw;right:16vw;bottom:5vh}

  .ticker{height:36px;font-size:20px}
  .visual-river{padding:7px 0}
  .visual-river-track{gap:7px;animation-duration:23s}
  .visual-river img{height:29vw;max-width:48vw}
  .visual-river img:nth-child(3n+2){height:23vw}.visual-river img:nth-child(4n){height:34vw}

  .project{padding-bottom:2vw}
  .project-intro,.project-intro.compact,.film-card .project-intro{padding:50px 12px 10px!important;min-height:0!important}
  .project-meta{margin-bottom:15px}
  .project-intro h2{font-size:14.7vw;line-height:.79}
  .project-info p{font-size:11px}
  .project::after{display:none}

  /* Black screens go edge-to-edge on mobile, with no fabricated empty height. */
  .getmilk-trailer-shell,.war-film-stage,.poptrash-loop,.desperate-video,.south-hero .video-shell{width:100%;margin:0!important;min-height:0!important}
  .getmilk-trailer,.war-film-stage video,.poptrash-loop,.desperate-video,.south-hero video{display:block;width:100%!important;height:auto!important;max-height:none!important}
  .war-film-stage .video-shell{height:auto!important;min-height:0!important}
  .video-shell{height:auto!important;min-height:0!important}

  .pop-motion-grid{grid-template-columns:1fr;gap:8px;padding:6px 12px}
  .pop-motion-grid .video-shell{width:100%}
  .pop-motion-grid video{width:100%;height:auto}

  .triptych{grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}.triptych .image-button:nth-child(3){grid-column:1/3;width:62%;justify-self:end}
  .med-layout,.tv-layout{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 10px}
  .med-layout .med-photo,.tv-main{transform:none;grid-row:auto;aspect-ratio:auto}.med-layout .image-button,.tv-layout .image-button{aspect-ratio:auto}
  .med-layout .image-button img,.tv-layout .image-button img{height:auto!important}

  .big-aside{font-size:17vw;margin:5vw 12px 3vw}
  .instagram-live{padding-top:48px;padding-bottom:8vw}
  .instagram-copy h2{font-size:21vw;line-height:.74;margin:6px 0 10px}
  .who{padding-top:48px;padding-bottom:5vw}.who-copy h2{font-size:18vw;line-height:.77}
  .contact{min-height:48svh;padding-top:50px;padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.visual-river-track{animation:none}}


/* V16 — outward routes */
.project-out,.holding-link{display:block;margin:18px 16px 0;padding:10px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;font-size:10px;letter-spacing:.03em}
.holding-link{margin:22px 0 0}
.elsewhere{background:var(--paper);color:var(--ink);padding:78px 16px 10vw;border-top:1px solid}
.elsewhere-head{font-size:9px;margin-bottom:20px}
.elsewhere-links{border-top:1px solid}
.elsewhere-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding:12px 0;border-bottom:1px solid;transition:padding-left .22s ease}
.elsewhere-links a:hover{padding-left:10px}
.elsewhere-links span{font-size:11px;line-height:1.15;max-width:520px}
.elsewhere-links strong{font-size:clamp(30px,5.6vw,86px);line-height:.78;letter-spacing:-.06em;text-align:right}
@media(max-width:800px){
  .project-out,.holding-link{margin:10px 12px 0;font-size:9px}
  .holding-link{margin:18px 0 0}
  .elsewhere{padding:54px 12px 9vw}
  .elsewhere-links a{grid-template-columns:1fr;padding:12px 0;gap:5px}
  .elsewhere-links span{font-size:9px}
  .elsewhere-links strong{font-size:11.5vw;text-align:left}
}

/* V17 — subtraction, one canvas, natural mobile flow */
.tone-bone,
.rule-ribbon,
footer{
  background:var(--paper)!important;
  color:var(--ink)!important;
}
footer{border-top:1px solid var(--ink)}

/* Fixed navigation: quiet, legible and no collisions with section metadata. */
.site-head{
  background:rgba(245,242,233,.97);
  color:var(--ink)!important;
  mix-blend-mode:normal!important;
  border-bottom:1px solid var(--ink);
  height:44px;
  padding:8px 12px;
  align-items:center;
}
.head-right{gap:12px;align-items:center}
.brand{line-height:.85}
.index-open{font-size:9px}
.menu-open{width:23px;height:18px;border:0;background:none;padding:1px 0;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.menu-open span{height:1px;width:100%;background:currentColor;display:block}

.menu-panel{position:fixed;z-index:130;inset:0;background:var(--paper);color:var(--ink);transform:translateY(-102%);transition:transform .5s cubic-bezier(.77,0,.18,1);padding:12px 16px 24px;overflow:auto}
.menu-panel.open{transform:none}
.menu-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid;padding-bottom:8px;font-size:10px;position:sticky;top:0;background:var(--paper);z-index:2}
.menu-close{border:0;background:none;font-size:34px;line-height:.7;padding:0;cursor:pointer}
.menu-links{display:flex;flex-direction:column;padding-top:16px}
.menu-links a{font-size:clamp(42px,8vw,118px);line-height:.78;letter-spacing:-.065em;border-bottom:1px solid;padding:10px 0}
.menu-links a:hover{font-style:italic}
body.menu-open{overflow:hidden}

/* Restore the calmer pre-river opening. */
.hero-card img{object-fit:contain!important}

/* One plain page. Let the work supply the colour. */
.project,.instagram-live,.who,.elsewhere,.contact,.desperate-project,.mischief-burst{background:var(--paper)!important;color:var(--ink)!important}

/* Compact chapter divider if any remains. */
.more-heading{min-height:0!important;padding:36px 16px!important}
.more-heading p{font-size:clamp(42px,7vw,96px)}

/* Lost Heart is no longer a black void. */
.watch-preview.paper-preview{background:var(--paper)!important;color:var(--ink)!important;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.watch-preview.paper-preview .lost-preview{color:var(--ink)!important;background:transparent!important;opacity:1!important}
.watch-preview.paper-preview .watch-play{background:var(--ink);color:var(--paper)}
.watch-preview.paper-preview small{color:var(--ink)}

/* Cooking / links chapter at the bottom. */
.elsewhere{padding-top:56px}
.elsewhere-head span{display:block;font-size:clamp(46px,8vw,120px);line-height:.78;letter-spacing:-.065em;max-width:12ch}

/* Anonymous motion fragments are visual punctuation: autoplay, no UI badge. */
.mischief-burst .play-badge{display:none!important}
.mischief-burst .video-shell{background:transparent!important}

@media(max-width:800px){
  .site-head{height:42px;padding:7px 10px}
  .head-right{gap:10px}
  .menu-open{width:22px;height:16px}
  .menu-panel{padding:10px 12px 20px}
  .menu-links a{font-size:13vw;padding:9px 0}

  /* Section metadata starts below the fixed nav, not underneath it. */
  .project-intro,.project-intro.compact,.film-card .project-intro{padding-top:54px!important}
  .project-meta{top:48px!important}

  /* Remove accidental height from old desktop collage mechanics. */
  .editorial-grid.rozzi-grid{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1.05fr .95fr;
    gap:8px;
    min-height:0!important;
    height:auto!important;
    margin:0 12px 8px!important;
  }
  .rozzi-grid .image-button{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;height:auto!important;transform:none!important;
  }
  .rozzi-grid .image-button img{height:auto!important}
  .rozzi-grid .r-wide{grid-column:1/3}
  .rozzi-grid .r-tall{grid-column:2;grid-row:2/4}
  .rozzi-grid .r-small{grid-column:1;grid-row:2}
  .rozzi-grid .r-small2{grid-column:1;grid-row:3}
  .rozzi-grid .r-end{grid-column:1/3;width:62%!important;justify-self:end}

  .paul-project{min-height:0!important}
  .paul-object{width:calc(100% - 24px)!important;margin:0 12px 8px!important}
  .giant-number{display:none!important}

  /* Pop Trash: dense editorial grid rather than a very tall absolute collage. */
  .pop-collage{
    position:relative!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;
    min-height:0!important;height:auto!important;margin:0 12px 8px!important;
  }
  .pop-collage .image-button{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;height:auto!important;transform:none!important;aspect-ratio:auto!important;
  }
  .pop-collage .image-button img{height:auto!important}
  .pop-collage .p1,.pop-collage .p5{grid-column:1/3}
  .pop-collage .p3,.pop-collage .p7{width:78%!important}
  .pop-collage .p4,.pop-collage .p8{align-self:end}

  /* La Sirène: same principle — collage, no fabricated vertical void. */
  .sirene-collage{
    position:relative!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;
    min-height:0!important;height:auto!important;margin:0 12px 8px!important;
  }
  .sirene-collage .image-button{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;height:auto!important;transform:none!important;aspect-ratio:auto!important;
  }
  .sirene-collage .image-button img{height:auto!important}
  .sirene-collage .s-flower,.sirene-collage .s-pool{grid-column:1/3}
  .sirene-collage .s-christ{width:72%!important;justify-self:end}

  /* Dry As A Bone: natural grid instead of an oversized absolute canvas. */
  .dry-stage{
    position:relative!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;
    min-height:0!important;height:auto!important;padding:0 12px 8px!important;
  }
  .dry-stage .image-button{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;height:auto!important;transform:none!important;
  }
  .dry-stage .image-button img{height:auto!important}
  .dry-lockup,.dry-merch{grid-column:1/3}
  .dry-extra{grid-column:1/3;width:70%!important;justify-self:end}

  /* Personal work stays legible inside the phone viewport. */
  #sussex .project-intro h2,#kerouac .project-intro h2{font-size:13vw!important;max-width:100%!important;overflow-wrap:anywhere}
  .kerouac-layout{padding-bottom:8px}

  /* Shorter transitions throughout. */
  .project{padding-bottom:0!important}
  .drag-strip{padding-bottom:18px!important}
  .film-ribbon{padding-bottom:18px!important}
  .big-aside{margin-bottom:10px!important}
  .who{padding-bottom:24px!important}
  .elsewhere{padding:50px 12px 22px!important}
  .elsewhere-head{margin-bottom:14px}
  .elsewhere-head span{font-size:14vw;max-width:9ch}
  .contact{min-height:42svh!important;padding-top:52px!important;padding-bottom:22px!important}
  footer{background:var(--paper)!important;color:var(--ink)!important;border-top:1px solid var(--ink);padding-bottom:50px}
}

/* V18 — one field, stronger opening, manual film play, Klipist celebrated */

/* One pale field throughout. The work itself supplies colour. */
html,body,main,
.project,.tone-paper,.tone-white,.tone-pink,.tone-acid,.tone-blue,.tone-red,.tone-lilac,.tone-black,.tone-bone,
.instagram-live,.who,.elsewhere,.contact,.mischief-burst,.film-card,.southwark-project{
  background:var(--paper)!important;
  color:var(--ink)!important;
}
.inverse,.inverse-link{color:var(--ink)!important}
.red-dot{color:var(--ink)!important}
.giant-number,.instagram-live::after{display:none!important}

/* Header: the name lives here, once. */
.site-head{
  background:rgba(242,239,231,.96)!important;
  color:var(--ink)!important;
  mix-blend-mode:normal!important;
  border-bottom:1px solid var(--ink);
  backdrop-filter:blur(7px);
}
.brand{
  font-size:11px!important;
  line-height:.86!important;
  letter-spacing:-.045em!important;
  font-weight:900!important;
}
.brand span{font-size:7px!important;margin-left:4px!important}
.head-current{display:none!important}

/* Opening statement: no repeated HELLO ANDREW DAY. */
.hero{background:var(--paper)!important;min-height:100svh!important;padding-top:76px!important}
.hero h1{
  font-size:clamp(52px,10.3vw,154px)!important;
  line-height:.76!important;
  letter-spacing:-.082em!important;
  max-width:98vw;
}
.hero h1 span{display:block!important;white-space:nowrap!important;padding:0!important;text-align:left!important}
.hero h1 span:nth-child(2){text-align:right!important;padding-right:2vw!important}
.hero h1 span:nth-child(3){padding-left:7vw!important}
.hero h1 span:nth-child(4){text-align:right!important}
.hero h1 .dance-line{font-size:.68em!important;letter-spacing:-.06em!important;margin-top:.16em;text-align:left!important;padding-left:17vw!important}
.hero-card img{object-fit:contain!important}

/* Every chapter starts on the same canvas, with natural height. */
.project{padding-bottom:18px!important}
.project-intro,.project-intro.compact,.film-card .project-intro{
  min-height:0!important;
  padding:66px 16px 18px!important;
  background:transparent!important;
}
.project-meta{top:56px!important;color:var(--ink)!important;border-color:var(--ink)!important}
.project-info{color:var(--ink)!important}
.project-intro h2{color:var(--ink)!important}
.drag-label,.drag-label.dark{color:var(--ink)!important}

/* Media stages sit on paper; source imagery may of course contain black. */
.getmilk-cinema,.war-film-stage,.pop-motion-grid,.video-shell,.manual-video-shell,.watch-preview,
.south-hero,.film-hero-frame,.film-ribbon,.blackpool-stage{
  background:var(--paper)!important;
}
.getmilk-cinema{min-height:0!important;padding-bottom:12px!important}
.war-film-stage{min-height:0!important;margin-top:8px!important;padding:0 16px 16px!important}
.war-film-stage .war-film{background:transparent!important}
.poptrash-loop{background:transparent!important}

/* Klipist: a proper event, not a squashed footer link. */
.klipist-feature{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-top:10px;
  padding:0 16px 24px;
  background:var(--paper);
}
.klipist-blade{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  padding:22px 0 20px;
  border-bottom:1px solid var(--ink);
}
.klipist-icon{width:58px;height:58px;object-fit:contain;display:block}
.klipist-copy{display:flex;flex-direction:column;gap:3px}
.klipist-copy span{font-size:10px;letter-spacing:.08em}
.klipist-copy strong{font-size:clamp(54px,9vw,134px);line-height:.72;letter-spacing:-.075em}
.klipist-copy em{font-style:normal;font-size:11px;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.getmilk-laurels{
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  grid-template-rows:auto auto auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:8px 18px!important;
  padding:24px 2vw 4px!important;
  background:var(--paper)!important;
  border:0!important;
}
.getmilk-laurels .l1{grid-column:1;grid-row:1}
.getmilk-laurels .l2{grid-column:3;grid-row:1}
.getmilk-laurels .l3{grid-column:1;grid-row:3}
.getmilk-laurels .l4{grid-column:3;grid-row:3}
.getmilk-laurels .l5{grid-column:2;grid-row:2}
.getmilk-laurels img,.getmilk-laurels .klipist-laurel{
  display:block!important;
  width:100%!important;
  max-width:240px!important;
  height:90px!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:0!important;
  filter:none!important;
}
.clipist-link{display:none!important}

/* Formal films: deliberate click-to-play, consistent central control. */
.manual-video-shell{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
}
.manual-video-shell video{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain!important;
  background:transparent!important;
}
.manual-play{
  position:absolute;
  z-index:5;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:78px;height:78px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:50%;
  background:rgba(0,0,0,.72);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 0 5px;
  cursor:pointer;
  font-size:0;
}
.manual-play::before{content:'▶';font-size:29px;line-height:1}
.manual-video-shell.has-played .manual-play{display:none}
.manual-video-shell video::-webkit-media-controls-start-playback-button{display:none!important}

/* Existing external film preview cards use the same central cue. */
.watch-preview{position:relative!important}
.watch-preview .watch-play{
  position:absolute!important;
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.74)!important;
  color:#fff!important;
  padding:12px 16px!important;
  white-space:nowrap!important;
  z-index:3!important;
}
.watch-preview small{right:12px!important;bottom:10px!important}
.video-shell .play-badge{left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important}
.mischief-burst .play-badge{display:none!important}

/* Dense, natural-flow media. */
.triptych{min-height:0!important;padding-bottom:10px!important}
.big-aside{margin-top:10px!important;margin-bottom:18px!important}
.south-hero{padding-top:0!important}
.south-pair{padding-bottom:10px!important}
.editorial-grid,.pop-collage,.sirene-collage{margin-bottom:10px!important}

@media(max-width:800px){
  .site-head{height:46px!important;padding:8px 12px!important}
  .brand{font-size:10px!important}
  .menu-open{width:22px!important;height:17px!important}

  .hero{min-height:94svh!important;padding:64px 12px 20px!important}
  .hero h1{font-size:13.2vw!important;line-height:.78!important;margin-top:18vw!important}
  .hero h1 .dance-line{font-size:.72em!important;padding-left:16vw!important;margin-top:.22em!important}
  .hero-scroll{left:12px!important;bottom:18px!important}
  .hc1{width:27vw!important;right:7vw!important;top:8vh!important}
  .hc2{width:22vw!important;left:1vw!important;bottom:13vh!important}
  .hc3{width:24vw!important;left:auto!important;right:32vw!important;top:5.8vh!important}
  .hc4{width:24vw!important;right:10vw!important;bottom:8vh!important}

  .project{padding-bottom:8px!important}
  .project-intro,.project-intro.compact,.film-card .project-intro{padding:56px 12px 12px!important;min-height:0!important}
  .project-meta{top:48px!important;left:12px!important;right:12px!important}
  .project-intro h2{font-size:14vw!important;line-height:.79!important;max-width:100%!important;overflow-wrap:anywhere}

  /* Klipist stays big, but compact enough not to become another void. */
  .klipist-feature{padding:0 12px 16px!important;margin-top:0!important}
  .klipist-blade{grid-template-columns:44px 1fr;gap:11px;padding:16px 0!important}
  .klipist-icon{width:44px;height:44px}
  .klipist-copy span{font-size:8px}
  .klipist-copy strong{font-size:16vw!important;line-height:.72}
  .klipist-copy em{font-size:9px;margin-top:6px}
  .getmilk-laurels{gap:5px 7px!important;padding:16px 0 2px!important}
  .getmilk-laurels img,.getmilk-laurels .klipist-laurel{height:62px!important;max-width:118px!important}

  /* No black slabs around portrait/vertical film material. */
  .war-film-stage{padding:0 12px 12px!important;background:var(--paper)!important}
  .war-film-stage .manual-video-shell{width:76%!important;margin:0 auto!important}
  .pop-motion-grid{padding:6px 12px 8px!important;gap:8px!important;background:var(--paper)!important}
  .poptrash-loop{width:calc(100% - 24px)!important;margin:8px 12px!important}
  .south-hero{padding:0 12px!important;background:var(--paper)!important}

  .manual-play{width:64px;height:64px}
  .manual-play::before{font-size:24px}
  .watch-preview .watch-play{padding:10px 13px!important;font-size:9px!important}

  /* Collapse old transition space aggressively. */
  .triptych{gap:7px!important;padding:0 12px 8px!important;min-height:0!important}
  .big-aside{font-size:18vw!important;margin:6px 12px 12px!important}
  .med-layout,.tv-layout,.south-pair,.batch-pair,.mini-three,.sussex-layout,.kerouac-layout{margin-bottom:8px!important}
  .drag-strip,.film-ribbon{padding-bottom:10px!important}
  .who,.instagram-live,.elsewhere,.contact{background:var(--paper)!important}
}

/* V19 — mobile QA: one voice, autoplay, consistent play language, balanced spacing */
.hero h1{
  font-size:clamp(58px,11.7vw,176px)!important;
  line-height:.82!important;
  letter-spacing:-.075em!important;
  max-width:96vw!important;
}
.hero h1 span{
  display:block!important;
  white-space:nowrap!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
  font-size:1em!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
}
.hero h1 span:nth-child(even){text-align:right!important}

/* More breathing room between chapters without reintroducing dead screens. */
.project{padding-bottom:24px!important}
.project-intro,.project-intro.compact,.film-card .project-intro{padding-bottom:20px!important}
.project + .project .project-intro{padding-top:72px!important}
.triptych,.med-layout,.tv-layout,.south-hero,.south-pair,.batch-pair,.editorial-grid,.film-ribbon,.divorce-opener,.sirene-collage,.pop-collage{margin-bottom:18px!important}
.big-aside{margin-top:18px!important;margin-bottom:34px!important}

/* One intentional emoji play system. */
.manual-play{
  width:auto!important;height:auto!important;
  min-width:0!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.9)!important;
  background:rgba(0,0,0,.70)!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.03em!important;
  gap:6px!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
  opacity:.92;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.manual-play::before{content:none!important}
.manual-video-shell.is-playing .manual-play{opacity:.28}
.watch-preview .watch-play,.tv-epk .watch-play{
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  padding:10px 14px!important;
  font-size:10px!important;
  white-space:nowrap!important;
  z-index:4!important;
}

/* TV Mania EPK: live moving preview, screenshot beneath as fallback. */
.tv-epk{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  margin:24px 0 30px;
  background:var(--paper);
}
.tv-epk-poster,.tv-epk iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.tv-epk-poster{object-fit:contain;background:var(--paper)}
.tv-epk iframe{z-index:2;pointer-events:none;background:transparent}
.tv-epk .epk-play{position:absolute!important;z-index:4!important;text-decoration:none}
.tv-epk .epk-vimeo{position:absolute;right:12px;bottom:10px;z-index:4;font-size:9px;color:#fff;text-shadow:0 1px 3px #000}

/* Protect the Marc Newson attribution. */
#tv-mania blockquote{
  overflow:visible!important;
  padding-bottom:28px!important;
  margin-bottom:12px!important;
}
#tv-mania blockquote small{
  display:block!important;
  position:relative!important;
  margin-top:18px!important;
  padding-bottom:2px!important;
  line-height:1.2!important;
  z-index:2!important;
}

/* La Sirène uses the pool image once: it is now also the film link. */
.sirene-collage .inline-watch{position:absolute;display:block;overflow:hidden}
.sirene-collage .inline-watch img{display:block;width:100%;height:100%;object-fit:contain}
.sirene-collage .inline-watch small{position:absolute;right:9px;bottom:7px;z-index:4;font-size:8px;color:#fff;text-shadow:0 1px 3px #000}

/* Contact: friendlier ending. */
.contact p{line-height:.82!important;letter-spacing:-.07em!important}
.contact>a{font-size:clamp(34px,7vw,92px)!important}

@media(max-width:800px){
  .hero{min-height:90svh!important;padding:60px 12px 26px!important}
  .hero h1{font-size:12.2vw!important;line-height:.82!important;margin-top:17vw!important}
  .hero h1 span{font-size:1em!important;text-align:left!important}
  .hero h1 span:nth-child(even){text-align:right!important}

  .project{padding-bottom:24px!important}
  .project-intro,.project-intro.compact,.film-card .project-intro{padding:58px 12px 18px!important}
  .project + .project .project-intro{padding-top:66px!important}
  .project-meta{top:50px!important}

  /* Pop Trash movies become one horizontal film strip rather than a cramped vertical pile. */
  .pop-motion-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    gap:12px!important;
    padding:8px 12px 20px!important;
    scrollbar-width:none!important;
    align-items:center!important;
  }
  .pop-motion-grid::-webkit-scrollbar{display:none!important}
  .pop-motion-grid .manual-video-shell{
    flex:0 0 82vw!important;
    width:82vw!important;
    scroll-snap-align:center!important;
    margin:0!important;
  }
  .pop-motion-grid video{width:100%!important;height:auto!important;object-fit:contain!important}

  #tv-mania blockquote{
    font-size:12.8vw!important;
    line-height:.82!important;
    margin:24px 12px 0!important;
    padding-bottom:34px!important;
  }
  #tv-mania blockquote small{font-size:10px!important;margin-top:16px!important}
  .tv-epk{margin:4px 0 26px!important;aspect-ratio:16/9}

  .manual-play,.watch-preview .watch-play,.tv-epk .watch-play{
    padding:9px 12px!important;
    font-size:9px!important;
  }

  .sirene-collage .inline-watch.s-pool{width:92%!important;left:4%!important;top:125vw!important}

  .contact{padding-top:58px!important;padding-bottom:32px!important;min-height:52svh!important}
  .contact p{font-size:14vw!important;margin:20px 0 34px!important}
  .contact>a{font-size:10vw!important}
}

/* V20 — calmer intro, ticker restored, autoplay that actually stays alive, cleaner La Sirène */
.hero{
  min-height:100svh!important;
  padding:74px 16px 30px!important;
  justify-content:center!important;
}
.hero h1{
  margin:0!important;
  font-size:clamp(76px,15vw,220px)!important;
  line-height:.72!important;
  letter-spacing:-.09em!important;
  max-width:96vw!important;
  z-index:4!important;
}
.hero h1 span{display:block!important;white-space:nowrap!important}
.hero h1>span:nth-child(2){text-align:right!important;padding-right:4vw!important}
.hero h1>span:nth-child(3){padding-left:18vw!important}
.hero-copy{
  position:absolute!important;
  z-index:5!important;
  right:16px!important;
  bottom:62px!important;
  width:min(500px,58vw)!important;
  margin:0!important;
  text-align:right!important;
  font-size:11px!important;
  line-height:1.18!important;
}
.hero-copy strong{font-size:inherit!important}
.ticker{
  display:flex!important;
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-top:1px solid var(--ink)!important;
  border-bottom:1px solid var(--ink)!important;
  height:48px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  font-size:27px!important;
  letter-spacing:-.045em!important;
}
.ticker div{display:inline-block!important;animation:ticker 18s linear infinite!important}

/* Autoplay films: one unapologetic emoji cue, no keyline, no black UI pill. */
.auto-film-shell{position:relative;display:block;width:100%;overflow:hidden;background:var(--paper)}
.auto-film-shell>video{display:block;width:100%;height:auto;object-fit:contain!important;background:transparent!important}
.emoji-play{
  position:absolute;
  z-index:6;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  font-size:58px!important;
  line-height:1!important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.28));
  cursor:pointer;
}
.auto-film-shell.sound-on .emoji-play{opacity:.15}

/* The local film stages inherit the paper, not black UI slabs. */
.war-film-stage,.south-hero,.pop-motion-grid,.getmilk-cinema{background:var(--paper)!important}
.war-film-stage{display:block!important;padding:0 16px 14px!important}
.war-film-stage .auto-film-shell{width:min(78vw,900px)!important;margin:0 auto!important}
.war-film-stage>span{
  position:static!important;
  display:block!important;
  color:var(--ink)!important;
  mix-blend-mode:normal!important;
  padding:8px 0 0!important;
  font-size:9px!important;
  letter-spacing:.06em!important;
}

/* External preview links use the same visual language. */
.watch-preview .watch-play,.tv-epk .watch-play{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  font-size:54px!important;
  line-height:1!important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.28));
  color:#fff!important;
}
.watch-preview .watch-play b,.tv-epk .watch-play b{display:none!important}

/* La Sirène: no absolute-position voids on mobile. */
@media(max-width:800px){
  .hero{min-height:94svh!important;padding:60px 12px 22px!important}
  .hero h1{font-size:20vw!important;line-height:.73!important;margin:9vw 0 0!important}
  .hero h1>span:nth-child(2){padding-right:0!important;text-align:right!important}
  .hero h1>span:nth-child(3){padding-left:26vw!important}
  .hero-copy{right:12px!important;bottom:54px!important;width:72vw!important;font-size:9.5px!important}
  .ticker{height:38px!important;font-size:20px!important}

  .war-film-stage{padding:0 12px 12px!important}
  .war-film-stage .auto-film-shell{width:100%!important;margin:0!important}
  .emoji-play{font-size:52px!important}

  .pop-motion-grid{
    display:flex!important;
    overflow-x:auto!important;
    gap:14px!important;
    padding:8px 12px 18px!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .pop-motion-grid .auto-film-shell{flex:0 0 82vw!important;scroll-snap-align:center!important}

  #la-sirene .sirene-collage{
    position:relative!important;
    display:flex!important;
    min-height:0!important;
    height:auto!important;
    overflow-x:auto!important;
    gap:10px!important;
    margin:0!important;
    padding:0 12px 18px!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #la-sirene .sirene-collage>*{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:80vw!important;
    flex:0 0 80vw!important;
    aspect-ratio:16/9!important;
    scroll-snap-align:center!important;
  }
  #la-sirene .sirene-collage img{width:100%!important;height:100%!important;object-fit:contain!important}

  .watch-preview .watch-play,.tv-epk .watch-play{font-size:48px!important}
}

/* Other lives: playful signposts rather than giant generic blue arrows. */
.elsewhere-head span{font-size:clamp(36px,7vw,104px)!important;line-height:.82!important;letter-spacing:-.06em!important}
.elsewhere-links strong{display:flex;align-items:flex-end;gap:.12em;flex-wrap:wrap}
.link-emoji{font-size:.72em;line-height:1;display:inline-block;transform:translateY(-.02em)}

/* Friendlier contact. */
.contact>a{display:inline-flex!important;align-items:center!important;gap:.18em!important}
.mail-emoji{font-size:.88em;line-height:1}
footer span:nth-child(2){letter-spacing:.01em}
.red-dot{color:var(--red)!important}