:root{--paper:#f7f7f5;--ink:#141414;--red:#f13e4b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:6px}header{position:fixed;top:0;width:100%;z-index:20;padding:25px 3%;display:flex;align-items:center;justify-content:space-between;color:white;mix-blend-mode:difference;font-size:20px;font-weight:700;letter-spacing:-.7px}header sup{font-size:11px;vertical-align:top;margin-left:4px}.identity{position:absolute;left:50%;transform:translateX(-50%)}.accent{color:var(--red)}.hero{height:100svh;min-height:720px;max-height:1200px;position:relative;display:grid;grid-template-columns:1fr 1.2fr .65fr;align-items:center;padding:90px 7%;gap:20px;overflow:hidden}.hero-title{position:relative;z-index:3;white-space:nowrap}.hero h1{font-size:clamp(65px,6.7vw,125px);line-height:.94;letter-spacing:-.085em;margin:0;font-weight:900}.hand{display:block;color:var(--red);font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:clamp(65px,7.3vw,130px);line-height:.8;transform:rotate(-13deg) translate(24px,-15px);letter-spacing:-.09em;position:relative;width:max-content}.hand:after{content:"";position:absolute;height:5px;background:var(--red);left:-5%;right:-25%;bottom:4px;transform:rotate(-12deg)}.hero-copy{position:relative;z-index:4;font-size:17px;line-height:1.45;max-width:250px;align-self:center;margin-left:8px}.hero-copy strong{font-size:24px;letter-spacing:-1px;line-height:1.1}.text-link{display:inline-block;border-bottom:1px solid;padding:7px 0;font-size:16px}.collage{height:470px;position:relative;perspective:900px;transform:translateY(-20px)}.portrait-wrap{position:absolute;left:17%;top:18%;width:67%;aspect-ratio:4/5;transform:rotate(-7deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);border-radius:45% 45% 42% 42%;overflow:hidden;z-index:2;box-shadow:0 25px 50px #00000012}.portrait{width:100%;height:100%;object-fit:cover;display:block}.alternate{position:absolute;inset:0;opacity:0;transition:opacity .35s}.portrait-wrap:hover .alternate{opacity:1}.tile{position:absolute;overflow:hidden;border-radius:20px;box-shadow:0 10px 30px #0002;width:43%;aspect-ratio:1.4;transition:transform .15s linear;will-change:transform}.tile img{width:100%;height:100%;object-fit:cover}.tile-a{left:-4%;top:2%;rotate:-15deg}.tile-b{right:-7%;top:11%;rotate:12deg}.tile-c{right:-6%;bottom:0%;rotate:14deg;z-index:3}.orbit-label{position:absolute;left:0;bottom:10%;font-size:11px;letter-spacing:2px;rotate:-90deg}.scroll-label{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:13px;color:#666;display:flex;gap:15px;align-items:center}.scroll-label span{font-size:23px;animation:bob 2s infinite}@keyframes bob{50%{transform:translateY(6px)}}.work{position:relative;min-height:110svh;background:#111;color:#fff;isolation:isolate;overflow:clip}.work-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:-1;background:#111;pointer-events:none}.work-backdrop img,.work-backdrop video{position:absolute;inset:0;width:100%;height:100%;padding:76px 0 24px;object-fit:contain;object-position:50% 50%;opacity:1}.work-backdrop video{opacity:0;transition:opacity .22s ease;background:#111}.work-backdrop video.ready{opacity:1}.work-backdrop.has-video img{visibility:hidden}.work-content{position:relative;z-index:1}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#000a,#0002),linear-gradient(0deg,#0009,transparent 40%)}.work-content{padding:80px 7% 35px;display:flex;flex-direction:column;min-height:110svh}.section-label{font-size:12px;letter-spacing:1.5px;display:flex;justify-content:space-between;font-weight:600}.project-list{padding:70px 0;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.project{display:flex;align-items:center;gap:20px;text-align:left;background:none;border:0;color:#606060;padding:2px 0;font-size:clamp(42px,5.65vw,96px);line-height:1.07;letter-spacing:-.065em;font-weight:900;transition:color .25s,transform .35s;position:relative}.project.active,.project:hover,.project:focus-visible{color:#fff;transform:translateX(20px)}.project .number{font-weight:400;letter-spacing:0;font-size:12px;align-self:flex-start;padding-top:14px;color:#bbb;min-width:20px}.project .tag{font-size:12px;font-weight:400;letter-spacing:0;align-self:center;max-width:100px;color:#ddd;opacity:0;transition:opacity .2s}.project.active .tag,.project:hover .tag,.project:focus-visible .tag{opacity:1}.project.active:after{content:"";color:var(--red);font-size:.6em;margin-left:10px}.work-bottom{display:flex;justify-content:space-between;gap:20px;color:#ddd;font-size:13px}.about{padding:100px 7% 130px}.about h2{font-size:clamp(50px,7.5vw,130px);font-weight:900;line-height:1.03;letter-spacing:-.065em;margin:90px 0;text-align:center}.about-bottom{display:grid;grid-template-columns:230px 430px;justify-content:center;gap:75px;align-items:center}.about-bottom img{width:100%;height:280px;object-fit:cover;border-radius:100px;rotate:-6deg}.about-bottom p{font-size:19px;line-height:1.6;letter-spacing:-.3px}.word{opacity:.18;transition:opacity .25s}.word.lit{opacity:1}footer{background:#101010;color:#f7f7f5;padding:60px 7% 30px;overflow:hidden}.contact-title{display:block;font-size:clamp(60px,10.5vw,175px);font-weight:900;line-height:.97;letter-spacing:-.07em;margin:95px 0 60px}.contact-title>span:first-child{transition:color .3s}.contact-title:hover>span:first-child{color:var(--red)}.contact-details{display:flex;justify-content:space-between;font-size:clamp(16px,2vw,28px);letter-spacing:-.6px;gap:20px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff30;margin-top:100px;padding-top:30px;font-size:12px;color:#aaa}.footer-bottom img{width:180px;height:auto}dialog{border:0;background:#101010;color:#fff;width:min(1240px,96vw);max-height:95svh;padding:22px;border-radius:12px;overflow:auto}dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}.film-top,.film-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.film-top h2{font-size:23px;margin:0;letter-spacing:-.5px}.film-top button,.film-bottom button{color:#fff;background:transparent;border:1px solid #666;border-radius:30px;padding:12px 20px}.film-bottom{margin-top:15px;color:#aaa;font-size:14px}#fullFilm{display:block;width:100%;height:min(70svh,700px);background:#000;margin-top:20px;object-fit:contain}.cursor{position:fixed;z-index:50;pointer-events:none;background:var(--red);color:white;width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s}body.over-project .cursor{opacity:1}.reveal{animation:rise .9s both}@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.collage{height:560px}}@media(max-width:900px){.hero{grid-template-columns:1fr 1fr;padding:110px 6% 65px;min-height:850px;max-height:none;height:auto}.hero-title{grid-column:1;align-self:center}.hero h1{font-size:80px}.collage{height:400px;grid-column:2;grid-row:1}.hero-copy{grid-column:1/3;margin:10px 0 25px;max-width:480px}.hero-copy p{display:inline-block;width:48%;vertical-align:top}.hero-copy .text-link{display:block;width:max-content}.about-bottom{grid-template-columns:180px 1fr;gap:35px}.project .tag{display:none}}@media(max-width:600px){header{font-size:16px;padding:22px 6%}.hero{display:flex;flex-direction:column;min-height:900px;padding-top:150px;gap:0}.hero-title{align-self:flex-start}.hero h1{font-size:76px}.hand{font-size:84px}.collage{width:85%;height:330px;flex-shrink:0;align-self:center;transform:none;margin-top:20px}.portrait-wrap{width:60%;left:20%;top:6%;height:270px}.tile-a{top:0;left:-7%}.tile-b{top:15%;right:-9%}.tile-c{bottom:5%;right:-7%}.orbit-label{display:none}.hero-copy{font-size:16px;margin-top:20px;width:100%}.hero-copy strong{font-size:20px}.hero-copy p{width:100%;display:block;margin:10px 0}.hero-copy p br{display:none}.hero-copy strong br{display:block}.scroll-label{bottom:20px}.work-content{padding:65px 6% 30px;min-height:850px}.work{min-height:850px}.project-list{padding:60px 0}.project{font-size:42px;gap:10px;margin:9px 0;letter-spacing:-2.2px}.project .number{font-size:10px;padding-top:8px;min-width:14px}.project.active,.project:hover{transform:translateX(5px)}.project.active:after{margin-left:0}.work-bottom{flex-direction:column;font-size:12px}.about{padding:70px 6%}.about h2{font-size:49px;margin:65px 0}.about-bottom{grid-template-columns:1fr;gap:25px}.about-bottom img{width:160px;height:200px;justify-self:center}.about-bottom p{font-size:17px}.contact-title{font-size:65px;margin:75px 0 45px}.contact-details{flex-direction:column;gap:20px}footer{padding:50px 6% 25px}footer .section-label{font-size:10px;gap:20px}.footer-bottom{flex-wrap:wrap;gap:25px;margin-top:65px}.footer-bottom img{width:140px}.cursor{display:none}dialog{padding:14px}.film-top h2{font-size:19px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.word{opacity:1}.cursor{display:none}}

/* Keep film framing independent of the length of the project list. */
#filmVersions{display:flex;gap:8px}#filmVersions button{padding:8px 12px;font-size:13px}#filmVersions button[aria-pressed="true"]{background:#f13e4b;border-color:#f13e4b;color:white}.tile img{object-fit:contain;background:#141414}.film-bottom{flex-wrap:wrap}@media(max-width:600px){.work-backdrop img,.work-backdrop video{padding:70px 0 20px}.project{font-size:clamp(30px,8vw,42px);flex-wrap:nowrap}.project .number{flex-shrink:0}.project.active:after{font-size:.5em}.project-list{gap:8px}#filmVersions{order:3;width:100%}.work-content{padding-top:65px}}

/* Full-bleed work section aligns with the viewport on anchor navigation. */
#work{scroll-margin-top:0}#about,#contact{scroll-margin-top:80px}

/* Pixel-level inverse color over the page, as in the reference. */
header{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;background:transparent;color:#fff;mix-blend-mode:difference;min-height:74px}
header .identity{position:static;transform:none;white-space:nowrap}
header>a:first-child{justify-self:start}header>a:last-child{justify-self:end}
header>a{opacity:1}
.arrow-icon{display:inline-block;width:.85em;height:.85em;vertical-align:-.04em;flex-shrink:0;letter-spacing:0}
.contact-title .arrow-icon{width:.7em;height:.7em;margin-left:.06em;vertical-align:.02em}
.project.active:after{display:block;width:.55em;height:.55em;flex-shrink:0;font-size:inherit;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019%2019%205M5%205h14v14%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019%2019%205M5%205h14v14%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
@media(max-width:600px){header{gap:12px;min-height:64px}.project.active:after{width:.45em;height:.45em}.contact-title{font-size:clamp(44px,10.8vw,65px)}}

.scroll-label{gap:6px;color:#aaa;font-size:13px;min-height:44px;padding:8px}.scroll-label span{font-size:inherit;animation:none}.scroll-mouse{width:11px;height:17px;flex-shrink:0}.scroll-wheel{animation:mouse-wheel 1.8s ease-in-out infinite}@keyframes mouse-wheel{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(3px);opacity:.4}}

@font-face{font-family:OskinBrush;src:url('assets/hover-brush.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
header{isolation:isolate;mix-blend-mode:difference;color:#fff;background:transparent}header .accent{color:inherit}
/* A complete portrait frame on the right; low-detail moving color fills the stage. */
#filmAtmosphere{position:absolute;inset:-8%;width:116%;height:116%;filter:blur(70px) saturate(1.35);opacity:0;pointer-events:none;transition:opacity .45s}
.work-backdrop.is-portrait #filmAtmosphere{opacity:.65}
.work-backdrop img,.work-backdrop video{z-index:1}
.work-backdrop .shade{z-index:2}
.work-backdrop.is-portrait .shade{background:linear-gradient(90deg,#101010c9 0%,#10101040 55%,#10101010 100%)}
@media(min-width:1000px){
 .work-backdrop.is-portrait #workImage,.work-backdrop.is-portrait #workPreview{left:auto;right:4%;width:42%;object-position:center;background:transparent;padding:88px 0 36px}
 .work .project{font-size:clamp(42px,4.5vw,78px)}
 .work .project-list{max-width:63%}
}
@media(max-width:999px){.work-backdrop.is-portrait #filmAtmosphere{opacity:.48}.work-backdrop.is-portrait .shade{background:linear-gradient(90deg,#10101099,#10101040)}}
/* Handwritten project type follows the pointer; the CTA stays crisp at its center. */
.cursor{width:max-content;max-width:90vw;height:auto;border-radius:0;background:transparent;color:var(--hover-color,#f13e4b);display:grid;place-items:center;isolation:isolate;transform:translate(-50%,-50%);transition:opacity .14s;z-index:30}
.hover-lettering{display:block;font-family:OskinBrush,cursive;font-size:clamp(64px,10vw,156px);font-weight:400;line-height:1.12;letter-spacing:-.035em;white-space:nowrap;transform:rotate(-7deg) skewX(-4deg);padding:.15em .08em;transform-origin:center}
.long-label .hover-lettering{font-size:clamp(52px,7.8vw,126px)}
.hover-watch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#101010;color:#fff;font:500 12px/1 Arial,sans-serif;letter-spacing:.06em;white-space:nowrap;padding:11px 14px;border:1px solid #ffffff30}
@media(hover:hover) and (pointer:fine){.project{cursor:none}.project.active:after{display:none}.project .tag{display:none}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none!important}.project{cursor:pointer}}
@media(prefers-reduced-motion:reduce){#filmAtmosphere{transition:none}}

/* v7: one right edge, with rounded clipping on the actual media rectangle. */
.work-backdrop{--film-ratio:1.7777778;--frame-top:88px;--frame-bottom:36px;--frame-max:92vw}
.film-frame{position:absolute;z-index:1;right:4%;top:calc(50% + (var(--frame-top) - var(--frame-bottom))/2);transform:translateY(-50%);width:min(var(--frame-max),calc((100svh - var(--frame-top) - var(--frame-bottom))*var(--film-ratio)));aspect-ratio:var(--film-ratio);border-radius:32px;overflow:hidden;isolation:isolate;background:#111}
.work-backdrop .film-frame #workImage,.work-backdrop .film-frame #workPreview{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;background:transparent;border-radius:inherit}
#fullFilm{--full-ratio:1.7777778;width:min(100%,calc(min(70svh,700px)*var(--full-ratio)));height:auto;aspect-ratio:var(--full-ratio);margin:20px auto 0;border-radius:28px;overflow:hidden}
@media(min-width:1000px){.work-backdrop.is-portrait{--frame-max:42vw}}
@media(max-width:999px){.work-backdrop{--frame-top:76px;--frame-bottom:24px}.film-frame{border-radius:24px}}
@media(max-width:600px){.work-backdrop{--frame-top:70px;--frame-bottom:20px}.film-frame,#fullFilm{border-radius:20px}}
/* Real glyph outlines are traced first; translucent ink fills each letter afterwards. */
.hover-lettering{padding:.15em .08em;line-height:1;max-width:86vw}
.hover-lettering svg{display:block;max-width:82vw;overflow:visible}
.hover-lettering path{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;paint-order:stroke fill;animation:ink-contour 520ms ease-out var(--letter-delay) both,ink-fill 700ms ease-in-out calc(var(--letter-delay) + 140ms) both}
@keyframes ink-contour{from{stroke-dashoffset:1;stroke-opacity:0}12%{stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
@keyframes ink-fill{0%{fill-opacity:0}24%{fill-opacity:.16}52%{fill-opacity:.3}100%{fill-opacity:1}}

/* v8: dry-brush lettering, rapid ink, and an independent inverse cursor badge. */
.hover-lettering{transform:rotate(-9deg) skewX(-12deg);font-size:clamp(100px,13vw,200px)}
.long-label .hover-lettering{font-size:clamp(80px,10.8vw,170px)}
.hover-lettering path{stroke-width:2;animation:ink-contour 180ms ease-out var(--letter-delay) both,ink-fill 220ms ease-in-out calc(var(--letter-delay) + 45ms) both}
.project-pointer{position:fixed;z-index:40;pointer-events:none;background:#fff;color:#000;mix-blend-mode:difference;font:500 13px/1 Arial,sans-serif;letter-spacing:-.025em;padding:6px 8px;white-space:nowrap;opacity:0;visibility:hidden}
body.over-project .project-pointer{opacity:1;visibility:visible}
.brush-word{position:relative;display:inline-block;cursor:default}
.brush-word .about-ink{position:absolute;pointer-events:none;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) rotate(-9deg) skewX(-12deg);font-size:1.55em;line-height:1;padding:0;color:var(--hover-color);opacity:0;visibility:hidden}
.brush-word .about-ink svg{max-width:85vw}
.brush-word.ink-visible{opacity:1}
.brush-word.ink-visible .about-ink{opacity:1;visibility:visible}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.project-pointer,.about-ink{display:none!important}}

/* v9: a thinner dry-brush fill, with a soft left-to-right ink progression. */
.hover-lettering .ink-fill{stroke:none;stroke-dasharray:none;filter:var(--ink-filter);animation:ink-fill-soft 340ms cubic-bezier(.25,.1,.25,1) calc(var(--letter-delay) + 70ms) both}
.hover-lettering .ink-outline{fill:none;fill-opacity:0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:ink-outline-soft 400ms ease-in-out var(--letter-delay) both}
@keyframes ink-outline-soft{0%{stroke-dashoffset:1;stroke-opacity:0}12%{stroke-opacity:.9}55%{stroke-dashoffset:0;stroke-opacity:.9}100%{stroke-dashoffset:0;stroke-opacity:0}}
@keyframes ink-fill-soft{0%{fill-opacity:0}18%{fill-opacity:.13}45%{fill-opacity:.28}75%{fill-opacity:.72}100%{fill-opacity:1}}
.about-bottom>img{height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:24px;rotate:-3deg}
@media(max-width:600px){.about-bottom>img{width:190px;height:auto;border-radius:20px}}

.tile-a,.tile-c{aspect-ratio:16/9}
.portrait-wrap .portrait{object-position:50% 40%}


/* Independently rolling, fixed-width letter and number drums. */
.works-type,.rolling-count{display:inline-flex;align-items:baseline;vertical-align:baseline;white-space:nowrap}
.slot-cell{display:inline-block;position:relative;height:1.2em;line-height:1.2;vertical-align:baseline}
.slot-measure{visibility:hidden}
.slot-window{position:absolute;inset:0;overflow:hidden;height:1.2em}
.slot-track{display:block;width:100%;will-change:transform}
.slot-row{display:block;height:1.2em;line-height:1.2;text-align:center;font-size:inherit;letter-spacing:inherit}
.slot-serif{font-family:Georgia,serif;font-style:italic;font-weight:400}
.slot-mono{font-family:'Courier New',monospace;font-weight:400}
.slot-heavy{font-family:'Arial Black',Arial,sans-serif;font-weight:900}
.portrait-lift{width:230px;max-width:100%;transition:transform .28s ease,filter .28s ease}
.about-bottom .portrait-lift img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:24px;rotate:-3deg;will-change:transform}
.about-bottom .text-link{transform-origin:left center;transition:transform .24s ease,color .18s ease}
@media(hover:hover) and (pointer:fine){
 .portrait-lift:hover{transform:translateY(-10px);filter:drop-shadow(0 15px 13px #0003)}
 .portrait-lift:hover img{animation:portrait-tremble .19s linear infinite}
 .about-bottom .text-link:hover{transform:translateY(-3px) scale(1.035);filter:none}
}
@keyframes portrait-tremble{0%,100%{transform:translate(0,0)}25%{transform:translate(.6px,-.4px)}50%{transform:translate(-.5px,.3px)}75%{transform:translate(.4px,.5px)}}
.contact-details a{transition:none}
.contact-details a:hover,.contact-details a:focus-visible{color:var(--red)}
.contact-title>span:first-child,.contact-title:hover>span:first-child{color:inherit;transition:none}
.liquid-line{position:relative;display:inline-block}
.liquid-fill{position:absolute;inset:0;color:var(--red);pointer-events:none;white-space:nowrap}
.water-definitions{position:absolute;pointer-events:none;overflow:hidden}
@media(max-width:900px){.portrait-lift{width:180px}}
@media(max-width:600px){.portrait-lift{width:190px;justify-self:center}}
@media(prefers-reduced-motion:reduce){.portrait-lift:hover{transform:none}.portrait-lift:hover img{animation:none}.about-bottom .text-link:hover{transform:none}}

/* v12: delayed liquid fill, larger inverse navigation, clean lifted links. */
.liquid-fill{visibility:hidden}
.contact-title.has-liquid .liquid-fill{visibility:visible}
header{font-size:30px}
header sup{font-size:16.5px}
.hero-copy .text-link{transform-origin:left center;transition:transform .24s ease,color .18s ease}
@media(hover:hover) and (pointer:fine){
 .hero-copy .text-link:hover{transform:translateY(-3px) scale(1.035);color:var(--red);filter:none}
}
@media(max-width:600px){header{font-size:24px;padding:22px 4%;gap:6px}header sup{font-size:13px;margin-left:2px}}
@media(max-width:360px){header{padding-inline:3%;gap:3px;letter-spacing:-1.1px}}
@media(prefers-reduced-motion:reduce){.hero-copy .text-link:hover{transform:none}}

/* v13: paired player navigation and matching Instagram hover color. */
.film-navigation{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.film-navigation button{white-space:nowrap;min-height:44px}
@media(hover:hover) and (pointer:fine){.about-bottom .text-link:hover{color:var(--red)}}
@media(max-width:600px){.film-navigation{width:100%;justify-content:space-between;gap:8px}.film-navigation button{padding:11px 14px}}
/* Mobile scroll activates the same project lettering as desktop hover. */
@media(hover:none),(pointer:coarse){
 body.touch-project .cursor{display:grid!important;opacity:1;visibility:visible;z-index:19}
 .cursor .hover-lettering{font-size:clamp(72px,18vw,120px)}
 .cursor.long-label .hover-lettering{font-size:clamp(60px,14vw,100px)}
 .brush-word.ink-visible .about-ink{display:block!important}
 .project.active:after{display:none}
 .project:hover:not(.active){color:#606060;transform:none}
}
.tap-red,.hero-copy .text-link.tap-red,.about-bottom .text-link.tap-red,.contact-details a.tap-red{color:var(--red);transition:none}
.film-stage{position:relative}
.expand-film{position:absolute;top:12px;right:12px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff60;border-radius:50%;background:#111b;color:#fff;touch-action:manipulation}
.expand-film svg{width:22px;height:22px}
.film-stage.expanded{position:fixed;inset:0;z-index:100;background:#000;width:100%;height:100%;height:100dvh;display:grid;place-items:center;overflow:hidden}
#filmDialog.expanded-player{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0;overflow:hidden}
.film-stage.expanded #fullFilm{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;aspect-ratio:auto;object-fit:contain}
.film-stage.expanded .expand-film{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
.expand-film[aria-pressed="true"]{background:#282828d9}
.rotate-hint{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:12px;padding:22px 28px;border-radius:18px;background:#101010d9;color:white;font:500 16px/1.4 Arial,sans-serif;text-align:center;pointer-events:none}
.rotate-hint[hidden]{display:none}
.rotate-hint svg{width:64px;height:64px;animation:rotate-phone 1.5s ease-in-out infinite}
@keyframes rotate-phone{0%,15%{transform:rotate(0)}65%,90%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media(orientation:portrait){.film-stage.expanded.landscape-film #fullFilm{position:absolute;left:50%;top:50%;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){body.touch-project .cursor,.brush-word.ink-visible .about-ink{display:none!important}.rotate-hint svg{animation:none;transform:rotate(-90deg)}}

/* v15: brush greeting, uncropped counter, deliberate touch portraits. */
@font-face{font-family:OskinGreeting;src:url('assets/hey-brush.ttf') format('truetype');font-weight:400;font-display:swap}
.hand.hand-brush{font-family:OskinGreeting,OskinBrush,cursive;font-weight:400;font-style:normal;font-size:clamp(90px,10vw,170px);line-height:.68;letter-spacing:-.025em;transform:rotate(-13deg) translate(24px,-15px)}
.hand.hand-brush:after{display:none}
.brush-underline{position:absolute;width:118%;height:.14em;left:-4%;bottom:-.05em;fill:currentColor;transform:rotate(-4deg);overflow:visible}
#workCount .slot-cell{min-width:.84em;letter-spacing:0}
#workCount .slot-window{inset-inline:-.08em;padding-inline:.08em}
.portrait-wrap[role="button"]{cursor:pointer}
.portrait-wrap:focus-visible,.portrait-lift:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.portrait-lift.touch-lift{transform:translateY(-10px);filter:drop-shadow(0 15px 13px #0003)}
.portrait-lift.touch-lift img{animation:portrait-tremble .19s linear infinite}
@media(hover:none),(pointer:coarse){
 .portrait-wrap:hover .alternate{opacity:0}
 .portrait-wrap.show-alternate .alternate{opacity:1}
}
@media(max-width:600px){.hand.hand-brush{font-size:116px}}
@media(max-width:999px){
 .work-backdrop:not(.is-portrait) #filmAtmosphere{opacity:.82;filter:blur(32px) saturate(1.25)}
 .work-backdrop:not(.is-portrait) .shade{background:linear-gradient(90deg,#10101080,#10101020),linear-gradient(0deg,#10101070,transparent 35%,transparent 65%,#10101050)}
}
@media(prefers-reduced-motion:reduce){.portrait-lift.touch-lift{transform:none}.portrait-lift.touch-lift img{animation:none}}

.portrait-wrap.show-alternate .alternate{opacity:1}
/* v16: bold greeting and continuous buffered video swaps. */
.hand.hand-brush{font-size:clamp(105px,11.5vw,195px);letter-spacing:-.06em;transform:rotate(-17deg) translate(22px,-17px) skewX(-13deg);-webkit-text-stroke:.6px currentColor}
.hand-brush .brush-underline{width:132%;height:.18em;transform:rotate(-7deg)}
.film-frame video.preview-layer{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;background:transparent;border-radius:inherit;transition:none}
.work-content>.section-label{transform:translateY(30px)}
header .identity{position:relative}
.identity-ink{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg) skewX(-12deg);font-size:85px;pointer-events:none;visibility:hidden;opacity:0;color:#fff}
.identity:hover .identity-ink,.identity:focus-visible .identity-ink{visibility:visible;opacity:1}
.nav-letter{display:inline-block}
@media(max-width:600px){
 .hand.hand-brush{font-size:132px}
 .work-content>.section-label{transform:translateY(26px)}
 #contact{padding-top:185px;position:relative}
 header.nav-docked{position:absolute;top:var(--dock-top);left:auto;right:6%;width:max-content;padding:0;min-height:0;display:flex;flex-direction:column;align-items:flex-end;gap:9px;font-size:22px;mix-blend-mode:normal;color:var(--paper)}
 header.nav-docked>a{align-self:flex-end}
 header.nav-docked .identity{left:auto;transform:none}
 header.nav-docked .identity-ink{font-size:65px}
}
header .identity{left:auto}
@media(prefers-reduced-motion:reduce){.identity-ink{display:none!important}}

/* v17: level baselines and visibly lighter brush ink. */
.hover-lettering{transform:none}
.brush-word .about-ink{transform:translate(-50%,-50%)}
.identity-ink{position:fixed;z-index:45;transform:translate(-50%,-50%);color:var(--red);mix-blend-mode:normal;font-size:85px;visibility:hidden;opacity:0}
.identity-ink.visible{visibility:visible;opacity:1}
.hover-lettering .ink-outline{stroke-width:1.2}
.hand.hand-brush{transform:translate(24px,-15px);-webkit-text-stroke:0;letter-spacing:-.025em;filter:url(#greeting-thin)}
.hand-brush .brush-underline{transform:none;height:.11em;width:118%}
@media(max-width:600px){
 header.nav-docked>a:last-child{position:absolute;right:0;top:100%;opacity:0;pointer-events:none}
 .identity-ink{font-size:65px}
}
/* v18: original Great Rebellion glyphs and reference-timed ink progression. */
@font-face{font-family:GreatRebellion;src:url('assets/great-rebellion.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.hover-lettering{font-family:GreatRebellion,cursive;font-weight:400}
.hover-lettering .ink-outline{fill:none;stroke:currentColor;stroke-width:var(--brush-stroke,7);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;animation:reference-outline 380ms linear var(--letter-delay) both}
.hover-lettering .ink-fill{stroke:none;filter:none;animation:reference-fill 420ms ease-out calc(var(--letter-delay) + 110ms) both}
@keyframes reference-outline{0%{stroke-dashoffset:1;stroke-opacity:0}8%{stroke-opacity:1}100%{stroke-dashoffset:0;stroke-opacity:1}}
@keyframes reference-fill{0%{fill-opacity:0}25%{fill-opacity:.12}60%{fill-opacity:.55}100%{fill-opacity:1}}
.about-ink,.identity-ink{transition:opacity 200ms ease-out}
.ink-visible .about-ink.ink-exiting,.identity-ink.visible.ink-exiting{opacity:0}
.hand.hand-brush{font-family:GreatRebellion,cursive;font-weight:400;font-size:clamp(70px,7.5vw,132px);line-height:.8;letter-spacing:0;filter:none;-webkit-text-stroke:0;transform:rotate(-13deg) translate(24px,-15px)}
.hand-brush .brush-underline{height:.10em;bottom:-.12em;width:115%;transform:rotate(-4deg)}
@media(max-width:600px){
 .hand.hand-brush{font-size:88px}
 header.nav-docked{mix-blend-mode:difference;color:#fff}
}

/* v19: proportional header ink, larger navigation and more space between films. */
header{font-size:45px}
header sup{font-size:24.75px}
.slot-window{left:-.1em;right:-.1em;padding-inline:.1em}
.identity-ink{padding:0;max-width:86vw;height:auto}
.identity-ink svg{display:block;width:100%!important;height:auto!important;max-width:none}
.hover-lettering{font-size:clamp(75px,9.75vw,150px)}
.long-label .hover-lettering{font-size:clamp(60px,8.1vw,127.5px)}
.brush-word .about-ink{font-size:1.1625em}
.project{line-height:1.605;padding-block:3px}
@media(max-width:600px){
 header{font-size:36px;grid-template-columns:1fr 1fr;row-gap:2px;padding-block:16px}
 header sup{font-size:19.5px}
 header>a:first-child{grid-column:1;grid-row:1}
 header>a:last-child{grid-column:2;grid-row:1}
 header .identity{grid-column:1 / -1;grid-row:2;justify-self:center}
 header.nav-docked{font-size:33px}
 header.nav-docked>a:last-child{display:none}
 .project{margin-block:13.5px}
 .project-list{gap:12px}
}
@media(hover:none),(pointer:coarse){
 .cursor .hover-lettering{font-size:clamp(54px,13.5vw,90px)}
 .cursor.long-label .hover-lettering{font-size:clamp(45px,10.5vw,75px)}
}

/* v20: stable mobile preview edges and a compact, content-safe first screen. */
@media(max-width:600px){
 .work-backdrop .film-frame{width:min(92vw,calc((100svh - var(--frame-top) - var(--frame-bottom)) * .5625));right:4%}
 header:not(.nav-docked){font-size:clamp(18px,5.2vw,22px);grid-template-columns:auto 1fr auto;gap:8px;padding:14px 4%;min-height:60px;letter-spacing:-.7px}
 header:not(.nav-docked) sup{font-size:.52em;margin-left:2px}
 header:not(.nav-docked)>a:first-child{grid-column:1;grid-row:1;white-space:nowrap}
 header:not(.nav-docked) .identity{grid-column:2;grid-row:1;justify-self:center}
 header:not(.nav-docked)>a:last-child{grid-column:3;grid-row:1}
 .hero{height:auto;min-height:100svh;max-height:none;padding:94px 6% 14px;gap:0;overflow:visible}
 .hero h1{font-size:clamp(52px,16vw,68px)}
 .hero .hand.hand-brush{font-size:clamp(58px,16vw,70px)}
 .hero .collage{width:min(85%,320px);height:clamp(180px,32svh,270px);margin-top:18px}
 .hero .portrait-wrap{height:auto;aspect-ratio:4/5;width:60%;left:20%;top:6%}
 .hero-copy{max-width:none;margin:10px 0 0;font-size:16px;line-height:1.35}
 .hero-copy strong{font-size:18px;line-height:1.12;letter-spacing:-.6px}
 .hero-copy p{margin:7px 0}
 .hero-copy .text-link{font-size:16px;padding:6px 0}
 .hero .scroll-label{position:static;align-self:center;transform:none;margin-top:auto;min-height:34px;padding:6px}
}

/* v21: move the unchanged mobile hero group down into its available space. */
@media(max-width:600px){
 .hero-title{margin-top:auto}
 .hero .scroll-label{margin-top:22px;flex-shrink:0}
}

/* v22: keep inverse navigation above scroll content, and contain mobile overflow. */
header{isolation:isolate;mix-blend-mode:difference}
header>a{color:#fff}
header>a:first-child{filter:opacity(1);isolation:isolate}
header .works-type,header #workCount,header .slot-row{color:inherit}
header.nav-docked{mix-blend-mode:difference}
.contact-details{flex-wrap:wrap}
@media(max-width:600px){
 html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
 main{overflow-x:clip}
 .hero,.about{overflow-x:clip}
 .work-backdrop{overflow:clip}
 .hero,.work,.about,footer{touch-action:pan-y pinch-zoom}
}

/* v24: independent clearances beneath navigation words, preserving the video backdrop. */


/* v26: center identity on the viewport, independently of the side labels. */
header:not(.nav-docked){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
header:not(.nav-docked)>a:first-child{justify-self:start}
header:not(.nav-docked) .identity{justify-self:center}
header:not(.nav-docked)>a:last-child{justify-self:end}

/* Compact mobile navigation landing below the contact section caption. */
@media(max-width:600px){
 #contact{padding-top:50px}
 header.nav-docked{font-size:clamp(20px,5.6vw,24px);gap:5px;line-height:1.15}
 header.nav-docked sup{font-size:.52em;margin-left:2px}
 #contact .contact-title{margin-top:100px}
}

/* Edge-to-edge film still buttons with one shared 16:9 size. */
.collage .tile{width:43%;height:auto;aspect-ratio:16/9;padding:0;border:0;line-height:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.collage .tile img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent;pointer-events:none}
.collage .tile:focus-visible{outline:3px solid var(--red);outline-offset:5px}

/* Preview gestures must not also trigger the browser's double-tap zoom.
   Native panning and two-finger pinch zoom remain available. */
@media(hover:none),(pointer:coarse){
 #work,#work *,dialog,dialog *{touch-action:manipulation}
}

/* Keep the descriptive footer on one line; tuck the touch hint up the edge. */
.work-bottom.mobile-preview-hint{flex-direction:row;padding-right:24px;gap:0}
.mobile-preview-hint>span:first-child{white-space:nowrap;font-size:clamp(10px,2.8vw,13px)}
.mobile-preview-hint>span:last-child{position:absolute;right:2%;bottom:35px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:10px;letter-spacing:.06em;color:#ccc}
.scroll-label{opacity:var(--scroll-cue-opacity,1);transition:opacity .8s ease-out}
.scroll-label.is-away{pointer-events:none}
/* Blend each pixel of every navigation glyph with the actual content underneath. */
header,header.nav-docked{mix-blend-mode:difference;color:#fff;z-index:22}
header>a{opacity:1}
/* Fit the hero inside the viewport with browser controls visible. */
@media(max-width:600px){
 .hero{min-height:100svh}
 .hero-title{margin-top:0}
 .hero .scroll-label{margin-top:auto;padding-top:22px}
}
/* Overscan removes rotated-image edge seams without changing the 16:9 card. */
.collage .tile img{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}

/* Solid dark grey keeps difference-blended navigation legible over inactive titles. */