:root{
  --pad: clamp(16px, 2vw, 30px);
  --fg: #f4f2ec;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050505}
body{margin:0;background:#050505;color:var(--fg);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.site-header{position:fixed;z-index:20;inset:0 0 auto 0;padding:20px var(--pad);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;mix-blend-mode:difference}
.site-header a{pointer-events:auto}
.brand{font-size:13px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
nav{display:flex;gap:22px;font-size:11px;letter-spacing:.02em}
.work{width:100%}
.project{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:#090909;scroll-snap-align:start;isolation:isolate}
.video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:#090909;transform:scale(1.01);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.project.is-active .video-wrap{transform:scale(1)}
.video-wrap iframe{position:absolute;left:50%;top:50%;width:100vw;height:56.25vw;min-width:177.77777778vh;min-height:100vh;transform:translate(-50%,-50%);pointer-events:none;border:0}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,.08) 78%,rgba(0,0,0,.28) 100%);pointer-events:none}
.project-title{position:absolute;z-index:4;left:var(--pad);bottom:var(--pad);margin:0;font-size:clamp(15px,1.35vw,22px);font-weight:500;line-height:1.02;letter-spacing:-.035em;max-width:min(420px,42vw);text-wrap:balance;pointer-events:none;text-shadow:0 1px 18px rgba(0,0,0,.22)}
.credits{position:absolute;z-index:4;right:var(--pad);bottom:var(--pad);display:grid;gap:4px;min-width:210px;font-size:10px;line-height:1.12;text-transform:uppercase;text-align:right;pointer-events:none;text-shadow:0 1px 18px rgba(0,0,0,.22)}
.credits div{display:grid;grid-template-columns:64px auto;gap:10px;justify-content:end}
.credits span{opacity:.58;font-weight:400}
.credits strong{font-weight:500;letter-spacing:.01em}
.project-link{position:absolute;inset:0;z-index:3;cursor:pointer}
.about{min-height:100svh;background:#eceae3;color:#090909;padding:18vh var(--pad) 10vh;display:flex;align-items:flex-start}
.about-copy{max-width:1100px;font-size:clamp(38px,6vw,92px);line-height:.93;letter-spacing:-.065em}
.about-copy p{margin:0 0 .65em}
@media (min-width:900px){html{scroll-snap-type:y proximity}}
@media (max-width:760px){
  .site-header{padding-top:16px}
  .brand{font-size:11px}
  nav{gap:14px;font-size:10px}
  .project{min-height:540px}
  .project-title{left:var(--pad);bottom:18px;font-size:17px;max-width:58vw}
  .credits{right:var(--pad);bottom:18px;min-width:170px;font-size:8px}
  .credits div{grid-template-columns:54px auto;gap:7px}
}

.award-badge{
  position:absolute;
  z-index:5;
  left:var(--pad);
  top:72px;
  border:1px solid rgba(255,255,255,.9);
  padding:9px 11px 8px;
  font-size:10px;
  line-height:.95;
  font-weight:700;
  letter-spacing:-.015em;
  text-transform:uppercase;
  pointer-events:none;
  text-shadow:0 1px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
  background:rgba(0,0,0,.08);
}
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 65% 45%,#25112e 0%,#0d0d0d 46%,#070707 80%)}
.video-placeholder span{font-size:10px;letter-spacing:.08em;opacity:.28}
@media (max-width:760px){.award-badge{top:58px;font-size:9px;padding:8px 9px}}

.hero-project .video-wrap{inset:0}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 58%,rgba(0,0,0,.24))}
.hero-cue{position:absolute;z-index:4;left:50%;bottom:var(--pad);transform:translateX(-50%);font-size:9px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero-cue span{display:inline-block;margin-left:6px}

.hero-video{position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;pointer-events:none}

.hero-name{position:absolute;z-index:6;left:var(--pad);top:20px;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap;pointer-events:none;text-shadow:0 1px 18px rgba(0,0,0,.3)}
@media(max-width:760px){.hero-name{top:16px;font-size:11px}}
body:has(#hero:hover){}

/* V12A — 80s geometric / Futura broadcast identity */
.site-header{transition:opacity .35s ease,transform .35s ease}
.site-header.header-hidden{opacity:0;transform:translateY(-8px);pointer-events:none}
.identity-sequence{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.id-frame{position:absolute;opacity:0;text-align:center;color:#eeeef2;white-space:nowrap;animation-duration:8s;animation-timing-function:steps(1,end);animation-iteration-count:1;animation-fill-mode:both;text-transform:lowercase}
.f1{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(34px,5vw,80px);font-weight:300;letter-spacing:.22em;animation-name:id1;transform:scaleX(1.35)}
.f2{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(58px,10vw,165px);font-weight:300;letter-spacing:.02em;animation-name:id2;transform:scaleX(.72)}
.f3{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(42px,7vw,115px);font-weight:500;letter-spacing:.34em;animation-name:id3;transform:translateX(.17em)}
.f4{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(82px,16vw,250px);font-weight:700;letter-spacing:-.11em;animation-name:id4;transform:scaleX(1.4)}
.f5{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(48px,8vw,130px);font-weight:300;letter-spacing:.5em;animation-name:id5;transform:translateX(.25em)}
.f6{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(45px,7.6vw,124px);line-height:.8;font-weight:500;letter-spacing:-.055em;animation-name:id6;text-transform:uppercase;transform:scaleX(1.08)}
.f7{font-family:Futura,'Century Gothic',Arial,sans-serif;font-size:clamp(42px,6.8vw,112px);font-weight:500;letter-spacing:-.045em;animation-name:id7;text-transform:uppercase;transform:scaleX(1.06)}
@keyframes id1{0%,7%{opacity:.9}7.01%,100%{opacity:0}}
@keyframes id2{0%,7%{opacity:0}7.01%,15%{opacity:.95}15.01%,100%{opacity:0}}
@keyframes id3{0%,15%{opacity:0}15.01%,23%{opacity:.95}23.01%,100%{opacity:0}}
@keyframes id4{0%,23%{opacity:0}23.01%,31%{opacity:.95}31.01%,100%{opacity:0}}
@keyframes id5{0%,31%{opacity:0}31.01%,40%{opacity:.95}40.01%,100%{opacity:0}}
@keyframes id6{0%,40%{opacity:0}40.01%,53%{opacity:.96}53.01%,100%{opacity:0}}
@keyframes id7{0%,53%{opacity:0}53.01%,86%{opacity:.98}86.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.id-frame{animation:none}.f7{opacity:1}}

/* Work/archive direction */
.work-grid{background:#eceae3;color:#0a0a0a;padding:100px var(--pad) 130px;min-height:100svh}
.grid-head{display:flex;justify-content:space-between;font-size:10px;margin-bottom:56px;letter-spacing:.04em}
.grid-list{border-top:1px solid rgba(0,0,0,.28)}
.grid-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;min-height:76px;border-bottom:1px solid rgba(0,0,0,.28);position:relative}
.grid-index{font-size:9px;opacity:.45}.grid-title{font-size:clamp(26px,4vw,64px);letter-spacing:-.055em;line-height:.9}.grid-brand{font-size:clamp(16px,2.2vw,34px);letter-spacing:-.04em;opacity:0;transform:translateX(-8px);transition:.18s ease}
.grid-item:hover .grid-brand,.grid-item:focus-visible .grid-brand{opacity:1;transform:none}.grid-item:hover .grid-title{opacity:.32}
@media(max-width:760px){.grid-item{grid-template-columns:34px 1fr;min-height:64px}.grid-brand{grid-column:2;opacity:.55;transform:none;font-size:12px;margin-top:-14px;margin-bottom:10px}.grid-title{font-size:30px}}

/* V13 — reference-led late-70s / early-80s title identity */
.identity-sequence{color:#ff5038;mix-blend-mode:normal}
.id-frame{display:none!important}
.id-card{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;text-align:center;animation:cardCycle 8.6s linear 1 both}
.id-card .word,.id-card .big,.id-card .final-name{filter:drop-shadow(0 0 1px rgba(255,80,56,.35))}
.card-1{animation-name:c1}.card-2{animation-name:c2}.card-3{animation-name:c3}.card-4{animation-name:c4}.card-5{animation-name:c5}
.word{position:absolute;text-transform:uppercase;line-height:.78}
.w1{font-family:'Arial Rounded MT Bold','Arial Black',Arial,sans-serif;font-size:clamp(62px,11vw,178px);font-weight:900;letter-spacing:-.085em;transform:scaleX(1.08) rotate(-1deg)}
.w2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(76px,14vw,220px);font-style:italic;font-weight:700;letter-spacing:-.095em;transform:scaleX(1.16) skewX(-6deg)}
.w3{font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;font-size:clamp(96px,18vw,285px);font-weight:900;letter-spacing:-.12em;transform:scaleX(.72)}
.spark{position:absolute;font-family:Georgia,serif;font-size:clamp(48px,6vw,96px);line-height:1;animation:sparkPulse 1.05s ease-in-out infinite alternate;transform-origin:center}
.s1{margin-left:-36vw;margin-top:-12vw}.s2{margin-left:37vw;margin-top:10vw}.s3{margin-left:-31vw;margin-top:14vw}.s4{margin-left:32vw;margin-top:-15vw;animation-delay:.2s}
.card-4{grid-template-rows:1fr auto auto 1fr}
.card-4 .tiny{grid-row:2;font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-size:clamp(18px,2.3vw,38px);font-weight:700;letter-spacing:.62em;margin-right:-.62em;transform:scaleX(.82)}
.card-4 .big{grid-row:3;font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;font-size:clamp(62px,10vw,164px);font-weight:900;line-height:.82;letter-spacing:-.07em;transform:scaleX(1.18)}
.orbit-star{position:absolute;font-size:clamp(42px,5vw,82px);animation:orbit 1.7s cubic-bezier(.4,0,.2,1) both}
.card-5{grid-template-columns:1fr auto 1fr;align-items:center}
.final-name{font-family:'Arial Rounded MT Bold','Arial Black',Arial,sans-serif;font-size:clamp(54px,8.5vw,142px);font-weight:800;line-height:.72;letter-spacing:-.075em;text-transform:uppercase;transform:scaleX(1.08)}
.final-name b{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;letter-spacing:-.095em}
.final-star{font-size:clamp(46px,5vw,86px);animation:finalStar 1.4s ease-in-out infinite alternate}
.final-star.left{justify-self:end;margin-right:clamp(20px,3vw,54px)}.final-star.right{justify-self:start;margin-left:clamp(20px,3vw,54px);animation-delay:.35s}
@keyframes c1{0%,2%{opacity:0;transform:scale(.96)}3%,15%{opacity:1;transform:scale(1)}16%,100%{opacity:0}}
@keyframes c2{0%,15%{opacity:0;transform:translateX(4%) scale(.92)}16%,29%{opacity:1;transform:none}30%,100%{opacity:0}}
@keyframes c3{0%,29%{opacity:0;transform:scale(1.18)}30%,43%{opacity:1;transform:scale(1)}44%,100%{opacity:0}}
@keyframes c4{0%,43%{opacity:0}44%,61%{opacity:1}62%,100%{opacity:0}}
@keyframes c5{0%,61%{opacity:0;transform:scale(.985)}62%,91%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
@keyframes sparkPulse{from{transform:scale(.72) rotate(0deg);opacity:.62}to{transform:scale(1.18) rotate(45deg);opacity:1}}
@keyframes orbit{0%{transform:translate(-30vw,18vh) scale(.3) rotate(0);opacity:0}18%{opacity:1}55%{transform:translate(27vw,-15vh) scale(1.15) rotate(95deg)}100%{transform:translate(-4vw,-22vh) scale(.65) rotate(180deg);opacity:.9}}
@keyframes finalStar{from{transform:scale(.82) rotate(-8deg)}to{transform:scale(1.14) rotate(12deg)}}
@media(max-width:760px){.final-name{font-size:clamp(40px,12vw,78px)}.final-star{font-size:34px}.s1{margin-left:-70vw}.s2{margin-left:70vw}.s3{margin-left:-60vw}.s4{margin-left:62vw}}
@media(prefers-reduced-motion:reduce){.id-card{animation:none}.card-5{opacity:1}.spark,.orbit-star,.final-star{animation:none}}
/* V14 — one continuous NEWSTAR-inspired construction. No cuts or dissolves. */
.identity-sequence.newstar-sequence{position:absolute;inset:0;z-index:5;pointer-events:none;color:#ff4b34;display:grid;place-items:center;overflow:hidden;filter:drop-shadow(0 0 8px rgba(255,70,45,.22));}
.newstar-lockup{position:relative;width:min(78vw,1100px);height:min(35vw,500px);transform:translateY(1vh);font-family:Arial Black,Arial,sans-serif;font-weight:900;letter-spacing:-.075em;line-height:.72;}
.ns-top,.ns-bottom{position:absolute;left:50%;white-space:nowrap;transform-origin:50% 50%;will-change:transform,clip-path;}
.ns-top{top:9%;font-size:clamp(46px,9.2vw,145px);animation:nsTop 4.8s cubic-bezier(.16,.84,.18,1) .15s both;}
.ns-bottom{top:47%;display:flex;align-items:baseline;font-size:clamp(54px,10.7vw,170px);animation:nsBottom 4.8s cubic-bezier(.16,.84,.18,1) .15s both;}
.ns-pan{display:inline-block;margin-left:.10em;transform-origin:left center;animation:nsPan 4.8s cubic-bezier(.16,.84,.18,1) .15s both;}
.ns-rays{position:absolute;top:49%;width:25%;height:31%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;opacity:0;animation:nsRays 4.8s cubic-bezier(.2,.8,.2,1) .15s both;}
.ns-rays-left{right:79%;align-items:flex-end}.ns-rays-right{left:79%;align-items:flex-start}
.ns-rays i{display:block;height:4px;background:currentColor;width:100%;transform:scaleX(0);}
.ns-rays-left i{transform-origin:right}.ns-rays-right i{transform-origin:left}
.ns-rays i:nth-child(1){animation:rayGrow 1s cubic-bezier(.16,.84,.18,1) 1.0s both}.ns-rays i:nth-child(2){animation:rayGrow 1s cubic-bezier(.16,.84,.18,1) 1.07s both}.ns-rays i:nth-child(3){animation:rayGrow 1s cubic-bezier(.16,.84,.18,1) 1.14s both}.ns-rays i:nth-child(4){animation:rayGrow 1s cubic-bezier(.16,.84,.18,1) 1.21s both}.ns-rays i:nth-child(5){animation:rayGrow 1s cubic-bezier(.16,.84,.18,1) 1.28s both}
.ns-star{position:absolute;width:7.5%;aspect-ratio:1;right:3%;top:-2%;overflow:visible;fill:currentColor;transform-origin:center;animation:nsStar 4.8s cubic-bezier(.16,.84,.18,1) .15s both;}
@keyframes nsTop{0%{transform:translate(-50%,70%) scaleX(.08) scaleY(1.55);clip-path:inset(0 50% 0 50%)}18%{clip-path:inset(0 0 0 0)}34%{transform:translate(-50%,18%) scaleX(1.24) scaleY(.72)}58%,100%{transform:translate(-50%,0) scaleX(1) scaleY(1)}}
@keyframes nsBottom{0%,8%{transform:translate(-50%,-35%) scaleX(.06) scaleY(1.65);clip-path:inset(0 50% 0 50%)}28%{clip-path:inset(0 0 0 0);transform:translate(-50%,-12%) scaleX(1.35) scaleY(.76)}55%,100%{transform:translate(-50%,0) scaleX(1) scaleY(1)}}
@keyframes nsPan{0%,24%{transform:translateX(-.45em) scaleX(.15);opacity:.05}48%,100%{transform:translateX(0) scaleX(1);opacity:1}}
@keyframes nsRays{0%,15%{opacity:0;transform:scaleX(.2)}28%,78%{opacity:1;transform:scaleX(1)}100%{opacity:.7;transform:scaleX(.9)}}
@keyframes rayGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nsStar{0%,18%{transform:translate(-560%,-210%) scale(.05) rotate(-110deg);opacity:0}28%{opacity:1}52%{transform:translate(-125%,55%) scale(.48) rotate(8deg)}68%{transform:translate(-30%,12%) scale(1.25) rotate(42deg)}82%,100%{transform:translate(0,0) scale(1) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.ns-top,.ns-bottom,.ns-pan,.ns-rays,.ns-rays i,.ns-star{animation:none!important}.ns-top{transform:translate(-50%,0)}.ns-bottom{transform:translate(-50%,0)}.ns-rays{opacity:.8}.ns-rays i{transform:scaleX(1)}.ns-star{transform:rotate(45deg)}}

/* V15 — sober opening + metadata always over picture */
.identity-sequence{display:none!important}
/* Slight overscan removes player/source edge mattes and keeps the frame full-bleed. */
.video-wrap iframe{width:112vw;height:63vw;min-width:199.1vh;min-height:112vh}
/* Keep typography in the picture-safe area rather than at the viewport edge. */
.project-title{bottom:clamp(56px,7.5vh,86px)}
.credits{bottom:clamp(56px,7.5vh,86px)}
.hero-project .video-wrap{transform:none}
.hero-project.is-active .video-wrap{transform:none}
@media(max-width:760px){
  .project-title{bottom:56px}
  .credits{bottom:56px}
}

/* V16 — clean reel cue + hard full-bleed player crop */
.hero-cue{display:block;position:absolute;z-index:6;left:50%;bottom:24px;transform:translateX(-50%);font-size:9px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;opacity:.82;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero-cue span{display:inline-block;margin-left:7px;animation:cueDrop 1.5s ease-in-out infinite}
@keyframes cueDrop{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}
.video-wrap{inset:-1px;background:#000}
.video-wrap iframe{width:116vw!important;height:65.25vw!important;min-width:206.222vh!important;min-height:116vh!important}
.project-title,.credits{bottom:clamp(64px,8vh,92px)}
@media(max-width:760px){.hero-cue{bottom:18px}.project-title,.credits{bottom:58px}}
@media(prefers-reduced-motion:reduce){.hero-cue span{animation:none}}


/* V18 — source-specific full-bleed crop for masters carrying wider mattes. */
.project.extra-crop .video-wrap iframe{
  width:132vw!important;
  height:74.25vw!important;
  min-width:234.667vh!important;
  min-height:132vh!important;
}

/* V24 — projects meet edge-to-edge with no overlap. The player itself overscans inside each project, so there is no gap and no bleed from the next film. */
.project{margin:0;border:0;}
.project + .project{margin-top:0;}


/* V25A — compact static archive */
.work-grid{padding:90px var(--pad) 120px;background:#eceae3;color:#0a0a0a;min-height:100svh}
.grid-head{margin-bottom:34px;font-size:9px;letter-spacing:.08em}
.grid-list{border-top:1px solid rgba(0,0,0,.22);columns:2;column-gap:56px}
.grid-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;min-height:0;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.14);break-inside:avoid;pointer-events:none}
.grid-index{font-size:8px;opacity:.34}
.grid-title{font-size:clamp(13px,1.25vw,18px);line-height:1.05;letter-spacing:-.025em;font-weight:500}
.grid-brand{font-size:9px;line-height:1;letter-spacing:.02em;opacity:.48;transform:none!important;transition:none!important;margin-left:16px;text-align:right}
.grid-item:hover .grid-brand,.grid-item:focus-visible .grid-brand{opacity:.48;transform:none}.grid-item:hover .grid-title{opacity:1}
@media(max-width:760px){.grid-list{columns:1}.grid-item{grid-template-columns:28px 1fr auto;padding:8px 0}.grid-title{font-size:14px}.grid-brand{grid-column:auto;margin:0 0 0 10px;font-size:8px}}


/* V26A — compact filmography list; title and credits are deliberately asymmetric. */
.work-grid{padding:92px var(--pad) 126px}
.grid-head{margin-bottom:38px}
.grid-list.archive-list{border-top:1px solid rgba(0,0,0,.25)}
.archive-row{display:grid;grid-template-columns:42px minmax(0,1.4fr) minmax(220px,.8fr) 20px;gap:16px;align-items:center;min-height:48px;border-bottom:1px solid rgba(0,0,0,.20);transition:opacity .18s ease}
.archive-index{font-size:8px;opacity:.38;font-variant-numeric:tabular-nums}
.archive-title{font-size:clamp(15px,1.45vw,22px);line-height:1;letter-spacing:-.025em}
.archive-meta{justify-self:end;text-align:right;font-size:9px;line-height:1.2;letter-spacing:.035em;text-transform:uppercase;opacity:.58}
.archive-arrow{font-size:11px;opacity:0;transform:translate(-3px,1px);transition:.18s ease}
.archive-row:hover .archive-title,.archive-row:focus-visible .archive-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.archive-row:hover .archive-arrow,.archive-row:focus-visible .archive-arrow{opacity:.65;transform:translate(0,1px)}
.archive-list:hover .archive-row:not(:hover){opacity:.48}
@media(max-width:760px){.archive-row{grid-template-columns:28px 1fr 14px;gap:8px;min-height:54px}.archive-meta{grid-column:2;justify-self:start;text-align:left;font-size:8px;margin-top:-9px;margin-bottom:7px}.archive-arrow{grid-column:3;grid-row:1 / span 2}.archive-title{font-size:17px}}

/* V28 — About as a compact contact card, with one playful image. */
.about-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(28px,5vw,80px);align-items:end;padding-top:10vh}
.about-portrait{width:100%;align-self:stretch;min-height:68vh;overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about-copy.about-minimal{max-width:none;font-size:clamp(20px,2.35vw,38px);line-height:1.02;letter-spacing:-.045em;padding-bottom:1vh}
.about-minimal h2{font:inherit;font-weight:700;margin:0 0 1.1em;letter-spacing:-.055em}
.about-minimal p{margin:0 0 .7em}
.about-minimal a{text-decoration:none;border-bottom:1px solid currentColor}
.about-minimal a:hover{opacity:.55}
@media(max-width:760px){.about-card{grid-template-columns:1fr;align-items:start;padding-top:12vh}.about-portrait{min-height:0;aspect-ratio:16/10}.about-copy.about-minimal{font-size:24px;padding:0 0 6vh}}
.archive-row-pending{cursor:default}
.archive-list:hover .archive-row-pending:not(:hover){opacity:.48}
.archive-row-pending:hover .archive-title{text-decoration:none}

/* V29 — archive is one continuous list. Reset the legacy two-column CSS that caused the mid-list HOW LONG row to appear clipped at the top of a second column. */
.grid-list.archive-list{columns:auto;column-count:1;column-gap:0;}
.archive-row{break-inside:auto;}

/* V30B — same text-only About + a tighter, more contained archive. */
.about.about-text-only{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:12vh var(--pad);
  text-align:center;
}
.about-text-only .about-copy.about-minimal{
  width:min(920px,88vw);
  max-width:920px;
  padding:0;
  font-size:clamp(22px,2.65vw,44px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.about-text-only .about-minimal h2{
  margin:0 0 .5em;
  font-size:clamp(29px,4vw,66px);
  line-height:.92;
}
.about-text-only .about-minimal p{margin:0 0 .52em}
.about-text-only .about-cities{opacity:.62}
.about-text-only .book-line{margin-top:1.55em!important}
.about-text-only .say-hi{margin-top:1.55em!important}

/* More compact archive columns: narrower overall measure, smaller type, tighter vertical rhythm. */
.work-grid{padding-left:max(var(--pad),7vw);padding-right:max(var(--pad),7vw)}
.grid-head,.grid-list.archive-list{max-width:1480px;margin-left:auto;margin-right:auto}
.archive-row{
  grid-template-columns:34px minmax(0,1.25fr) minmax(180px,.62fr) 16px;
  gap:12px;
  min-height:42px;
}
.archive-title{font-size:clamp(14px,1.12vw,18px)}
.archive-meta{font-size:8px;letter-spacing:.045em}
.archive-index{font-size:7px}
@media(max-width:760px){
  .about.about-text-only{padding:14vh 20px}
  .about-text-only .about-copy.about-minimal{width:100%;font-size:22px}
  .about-text-only .about-minimal h2{font-size:38px}
  .work-grid{padding-left:20px;padding-right:20px}
  .archive-row{grid-template-columns:26px 1fr 12px;min-height:50px}
  .archive-title{font-size:16px}
}

/* V32 — desktop archive returns to two balanced columns; mobile stays single-column. */
.grid-list.archive-list{
  columns:2;
  column-gap:clamp(34px,4vw,68px);
  column-rule:0;
  border-top:0;
}
.archive-row{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  border-top:1px solid rgba(0,0,0,.20);
}
@media(max-width:900px){
  .grid-list.archive-list{columns:1;column-gap:0;border-top:1px solid rgba(0,0,0,.25)}
  .archive-row{border-top:0}
}

/* V33C — ultra-minimal colophon */
.about.about-text-only{min-height:62svh;padding:7vh var(--pad);}
.about-text-only .about-copy.about-colophon{width:min(470px,84vw);font-size:clamp(16px,1.18vw,20px);line-height:1.32;letter-spacing:-.02em;}
.about-text-only .about-colophon p{margin:0 0 .36em;}
.about-text-only .about-colophon .about-cities{margin-bottom:1.55em;opacity:.62;}
.about-text-only .about-colophon a{border-bottom:0;text-decoration:none;}
.about-text-only .about-colophon a:hover{opacity:.48;}
.about-text-only .about-colophon .about-signoff{margin-top:3.25em;font-size:.66em;letter-spacing:.02em;opacity:.42;text-transform:uppercase;}
@media(max-width:760px){.about.about-text-only{min-height:58svh;padding:8vh 20px}.about-text-only .about-copy.about-colophon{font-size:18px}}

/* V34 — true page-centering: neutralize the old two-column portrait grid. */
.about.about-card.about-text-only{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  place-items:center;
  justify-items:center;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}
.about.about-card.about-text-only .about-copy{
  grid-column:1 / -1;
  justify-self:center;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* V35B — more editorial: same center, tighter name/cities, quieter links. */
.about-text-only .about-copy.about-card-v35b{width:min(860px,90vw);font-size:clamp(16px,1.12vw,19px);line-height:1.35;letter-spacing:-.018em;text-align:center}
.about-text-only .about-card-v35b h2{font-size:clamp(48px,6vw,96px);line-height:.86;letter-spacing:-.065em;margin:0 0 .12em;font-weight:700}
.about-text-only .about-card-v35b .about-cities{font-size:.62em;letter-spacing:.07em;text-transform:uppercase;opacity:.48;margin:0 0 3.3em}
.about-text-only .about-card-v35b .about-links{font-size:.94em}
.about-text-only .about-card-v35b .about-links p{margin:0 0 .22em}
.about-text-only .about-card-v35b a{color:inherit;text-decoration:none;border:0}
.about-text-only .about-card-v35b a:hover{opacity:.42}
@media(max-width:760px){.about-text-only .about-copy.about-card-v35b{font-size:17px}.about-text-only .about-card-v35b h2{font-size:clamp(40px,12vw,62px)}.about-text-only .about-card-v35b .about-cities{font-size:.6em;margin-bottom:3em}}
/* V36B: keep the signature name on one line */
.about-text-only .about-copy.about-card-v35b{width:min(1180px,94vw)}
.about-text-only .about-card-v35b h2{white-space:nowrap;font-size:clamp(42px,5.25vw,86px)}
@media(max-width:760px){
  .about-text-only .about-copy.about-card-v35b{width:96vw}
  .about-text-only .about-card-v35b h2{font-size:clamp(27px,8.5vw,48px);white-space:nowrap}
}


/* V38B — bring About directly after archive; keep it horizontally centered, not vertically floated. */
.about.about-card.about-text-only{
  min-height:0;
  padding:clamp(42px,5.5vh,72px) var(--pad) clamp(80px,11vh,140px);
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
  place-items:start center;
  align-items:start;
}
.about.about-card.about-text-only .about-copy{
  align-self:start;
}
.about-text-only .about-card-v35b h2 .name-dash{
  display:inline-block;
  margin-left:.075em;
  margin-right:.075em;
}
@media(max-width:760px){
  .about.about-card.about-text-only{padding:38px 20px 72px;}
}

/* V39B — even tighter Archive → About transition. */
.about.about-card.about-text-only{
  padding-top:clamp(18px,2.2vh,30px);
}
@media(max-width:760px){
  .about.about-card.about-text-only{padding-top:20px;}
}

/* Optional hero sound control */
.hero-sound-toggle{
  position:absolute;z-index:7;right:var(--pad);bottom:var(--pad);
  appearance:none;border:0;background:transparent;color:#fff;padding:0;
  font:inherit;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;opacity:.82;text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.hero-sound-toggle:hover,.hero-sound-toggle:focus-visible{opacity:1}
.hero-sound-toggle:focus-visible{outline:1px solid currentColor;outline-offset:5px}
@media(max-width:760px){.hero-sound-toggle{right:18px;bottom:18px}}

/* V40 / final-6 — mobile-only art direction. Desktop is intentionally untouched. */
@media (max-width:760px){
  /* Respect iPhone safe areas. */
  .site-header{
    padding:calc(env(safe-area-inset-top, 0px) + 14px) 18px 0;
  }
  .hero-name{
    left:18px;
    top:calc(env(safe-area-inset-top, 0px) + 14px);
    font-size:11px;
  }
  .hero-cue{bottom:calc(env(safe-area-inset-bottom, 0px) + 18px)}
  .hero-sound-toggle{right:18px;bottom:calc(env(safe-area-inset-bottom, 0px) + 18px)}

  /* Hero remains full-screen. Poster provides an immediate first image while Safari starts video. */
  .hero-project{height:100svh;min-height:0;overflow:hidden}
  .hero-project .video-wrap{position:absolute;inset:0}
  .hero-video{width:100%;height:100%;object-fit:cover}

  /* Selected work becomes an editorial mobile sequence instead of extreme portrait crops.
     A 4:3 viewing window preserves substantially more of the original 16:9 composition. */
  .project:not(.hero-project){
    height:auto;
    min-height:0;
    overflow:hidden;
    padding:0 0 38px;
    background:#050505;
    scroll-snap-align:none;
  }
  .project:not(.hero-project) .video-wrap{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    transform:none!important;
    background:#090909;
  }
  .project:not(.hero-project) .video-wrap iframe,
  .project:not(.hero-project).extra-crop .video-wrap iframe{
    left:50%;top:50%;
    width:133.334vw!important;
    height:75vw!important;
    min-width:0!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
  }
  .project:not(.hero-project) .shade{
    position:absolute;
    top:0;left:0;right:0;
    height:75vw;
    bottom:auto;
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0) 70%,rgba(0,0,0,.12));
  }
  .project:not(.hero-project) .project-title{
    position:relative;
    z-index:4;
    left:auto;bottom:auto;
    margin:16px 20px 0;
    max-width:calc(100% - 40px);
    font-size:20px;
    line-height:1;
    letter-spacing:-.035em;
    text-wrap:balance;
  }
  .project:not(.hero-project) .credits{
    position:relative;
    z-index:4;
    right:auto;bottom:auto;
    margin:10px 20px 0;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:5px 16px;
    text-align:left;
    font-size:8px;
    line-height:1.15;
  }
  .project:not(.hero-project) .credits div{
    display:flex;
    gap:6px;
    justify-content:flex-start;
  }
  .project:not(.hero-project) .credits span{opacity:.48}
  .project:not(.hero-project) .award-badge{
    top:14px;
    left:18px;
    font-size:8px;
    padding:7px 8px 6px;
  }

  /* The archive stays compact, but give the fixed navigation breathing room at its entrance. */
  .work-grid{
    padding:88px 18px 54px;
  }
  .grid-head{margin-bottom:24px}
  .archive-row{grid-template-columns:24px 1fr 10px;gap:8px;min-height:48px}
  .archive-title{font-size:15px;line-height:1.04}
  .archive-meta{font-size:7.5px;margin-top:-7px;margin-bottom:6px}

  /* Mobile contact becomes a compact left-aligned colophon instead of an oversized end card. */
  .about.about-card.about-text-only{
    min-height:0;
    padding:38px 22px calc(88px + env(safe-area-inset-bottom, 0px));
    place-items:start;
    justify-items:start;
    text-align:left;
  }
  .about.about-card.about-text-only .about-copy{
    width:100%;
    max-width:none;
    margin:0;
    justify-self:start;
    text-align:left;
  }
  .about-text-only .about-copy.about-card-v35b{width:100%;font-size:17px;line-height:1.3}
  .about-text-only .about-card-v35b h2{
    margin:0 0 .28em;
    white-space:nowrap;
    font-size:30px;
    line-height:.95;
    letter-spacing:-.055em;
  }
  .about-text-only .about-card-v35b .about-cities{
    margin:0 0 34px;
    font-size:9px;
    letter-spacing:.075em;
  }
  .about-text-only .about-card-v35b .about-links{
    font-size:19px;
    line-height:1.22;
  }
  .about-text-only .about-card-v35b .about-links p{margin:0 0 .26em}
}


/* FINAL-7 — mobile selected work as one continuous film strip. Desktop untouched. */
@media (max-width:760px){
  .project:not(.hero-project){
    position:relative;
    height:auto;
    min-height:0;
    padding:0;
    margin:0;
    background:#050505;
    overflow:hidden;
  }
  .project:not(.hero-project) .video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:4 / 3;
    margin:0;
    overflow:hidden;
    background:#070707;
  }
  .project:not(.hero-project) .shade{
    position:absolute;
    inset:0;
    width:auto;height:auto;
    background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.64) 100%);
    pointer-events:none;
    z-index:2;
  }
  .project:not(.hero-project) .project-title{
    position:absolute;
    left:18px;
    bottom:42px;
    z-index:4;
    margin:0;
    max-width:68%;
    color:#fff;
    font-size:18px;
    line-height:.98;
    letter-spacing:-.035em;
    text-shadow:0 1px 14px rgba(0,0,0,.45);
  }
  .project:not(.hero-project) .credits{
    position:absolute;
    right:18px;
    bottom:15px;
    left:18px;
    z-index:4;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:3px 12px;
    color:#fff;
    text-align:right;
    font-size:7px;
    line-height:1.1;
    text-shadow:0 1px 12px rgba(0,0,0,.55);
  }
  .project:not(.hero-project) .credits div{display:flex;gap:5px;justify-content:flex-end}
  .project:not(.hero-project) .credits span{opacity:.58}
  .project:not(.hero-project) .award-badge{top:14px;left:18px;z-index:5}

  /* Pull the colophon up toward the final archive row and tighten its internal rhythm. */
  .about.about-card.about-text-only{
    padding-top:12px;
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
  .about-text-only .about-card-v35b .about-cities{margin-bottom:18px}
  .about-text-only .about-card-v35b .about-links{margin-top:0}
}

/* FINAL 8 — mobile hero: reveal more of the 16:9 reel without changing desktop */
@media (max-width:760px){
  .hero-project{
    background:#000;
  }
  .hero-project .video-wrap{
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#000;
  }
  .hero-video{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    transform:translate(-50%,-50%) scale(.88);
    object-fit:cover;
    object-position:center center;
  }
}


/* FINAL 9 — mobile consistency pass. Desktop untouched. */
@media (max-width:760px){
  /* The reel now uses the same 4:3 visual module as Selected Work. */
  .hero-project{
    position:relative;
    height:auto;
    min-height:0;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#000;
  }
  .hero-project .video-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    overflow:hidden;
    background:#000;
  }
  .hero-video{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    transform:translate(-50%,-50%);
    object-fit:cover;
    object-position:center center;
  }
  .hero-cue{bottom:14px}
  .hero-sound-toggle{bottom:14px}

  /* These masters carry visible mattes; overscan only these on mobile. */
  .project.mobile-fill .video-wrap iframe{
    width:154vw!important;
    height:86.625vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }

  /* Keep all selected-work typography on the picture, at one shared inset. */
  .project:not(.hero-project) .project-title{
    left:18px;
    right:18px;
    bottom:42px;
    max-width:70%;
  }
  .project:not(.hero-project) .credits{
    left:18px;
    right:18px;
    bottom:15px;
  }
}


/* FINAL 10 — mobile finishing pass only. Desktop untouched. */
@media (max-width:760px){
  /* Kill hairline seams between consecutive mobile film-strip modules. */
  .work .project + .project{margin-top:-1px}

  /* Samsung's master carries more baked-in black than the others: crop it harder. */
  .project.mobile-fill-strong .video-wrap iframe{
    width:176vw!important;
    height:99vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }

  /* Center the mobile colophon while keeping the tighter vertical rhythm. */
  .about.about-card.about-text-only{
    justify-content:center;
    text-align:center;
  }
  .about.about-card.about-text-only .about-copy,
  .about-text-only .about-copy.about-card-v35b{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .about-text-only .about-card-v35b h2,
  .about-text-only .about-card-v35b .about-cities,
  .about-text-only .about-card-v35b .about-links{
    text-align:center;
  }
}

/* FINAL 11 — mobile image cleanup only. Desktop untouched. */
@media (max-width:760px){
  /* Make the mobile film strip physically continuous and hide Safari/Vimeo hairline seams. */
  .work .project + .project{margin-top:-3px}
  .project:not(.hero-project) .video-wrap{
    background:#000;
  }

  /* Tiny global overscan: removes source-edge mattes without changing the overall 4:3 composition. */
  .project:not(.hero-project):not(.mobile-fill):not(.mobile-fill-strong) .video-wrap iframe{
    width:138.667vw!important;
    height:78vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }

  /* Mobile-fill masters get a little more vertical overscan to keep titles/credits on picture. */
  .project.mobile-fill:not(.mobile-fill-strong) .video-wrap iframe{
    width:166vw!important;
    height:93.375vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }

  /* Samsung has unusually heavy baked-in matte: crop decisively past it. */
  .project.mobile-fill-strong .video-wrap iframe{
    width:238vw!important;
    height:133.875vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:48%!important;
    transform:translate(-50%,-50%)!important;
  }
}


/* FINAL 12 — force fresh mobile CSS + Samsung matte crop + left colophon. Desktop untouched. */
@media (max-width:760px){
  /* Samsung's source contains a much deeper baked-in matte than the other masters.
     Crop the actual Vimeo frame far enough that the visible 4:3 window is picture-only. */
  .project.mobile-fill-strong .video-wrap iframe{
    width:320vw!important;
    height:180vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:47%!important;
    transform:translate(-50%,-50%)!important;
  }

  /* Return the mobile colophon to the left-aligned version. */
  .about.about-card.about-text-only{
    justify-content:flex-start;
    text-align:left;
  }
  .about.about-card.about-text-only .about-copy,
  .about-text-only .about-copy.about-card-v35b{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }
  .about-text-only .about-card-v35b h2,
  .about-text-only .about-card-v35b .about-cities,
  .about-text-only .about-card-v35b .about-links{
    text-align:left;
  }
}


/* FINAL 14 — Samsung source matte fix + lighter mobile Vimeo loading. */
/* Vimeo decides its internal fit from the iframe's layout dimensions. For Samsung, keep
   the iframe at a normal 16:9 layout and crop the rendered player afterwards with transform.
   This removes the source/player mattes instead of asking Vimeo to re-letterbox a giant iframe. */
.project.samsung-crop .video-wrap iframe{
  width:116vw!important;
  height:65.25vw!important;
  min-width:206.222vh!important;
  min-height:116vh!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) scale(1.30)!important;
  transform-origin:center center!important;
}

@media (max-width:760px){
  .project.samsung-crop .video-wrap iframe{
    width:133.334vw!important;
    height:75vw!important;
    min-width:0!important;
    min-height:0!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) scale(1.68)!important;
    transform-origin:center center!important;
  }
}
\n\n/* FINAL 15 — mobile-only curation cleanup. Desktop remains unchanged. */
@media (max-width:760px){
  /* Samsung stays in desktop Selected Work and Archive, but is omitted from the mobile reel. */
  .project.mobile-hidden{display:none!important;}

  /* Close the Archive → About gap and return the end card to a centered composition. */
  .work-grid{padding-bottom:10px;}
  .about.about-card.about-text-only{
    padding-top:10px;
    justify-content:center;
    justify-items:center;
    place-items:start center;
    text-align:center;
  }
  .about.about-card.about-text-only .about-copy,
  .about-text-only .about-copy.about-card-v35b{
    margin-left:auto;
    margin-right:auto;
    justify-self:center;
    text-align:center;
  }
  .about-text-only .about-card-v35b h2,
  .about-text-only .about-card-v35b .about-cities,
  .about-text-only .about-card-v35b .about-links{
    text-align:center;
  }
}

/* FINAL 18 — authoritative mobile cleanup. */
@media (max-width:760px){
  /* Samsung is intentionally absent from mobile Selected Work. */
  #project-3{display:none!important;}

  /* Compact, centered mobile colophon directly after Archive. */
  .work-grid{padding-bottom:0!important; margin-bottom:0!important;}
  .about.about-card.about-text-only{
    padding-top:4px!important;
    margin-top:0!important;
    justify-content:center!important;
    justify-items:center!important;
    place-items:start center!important;
    text-align:center!important;
  }
  .about.about-card.about-text-only .about-copy,
  .about-text-only .about-copy.about-card-v35b{
    margin-left:auto!important;
    margin-right:auto!important;
    justify-self:center!important;
    text-align:center!important;
  }
  .about-text-only .about-card-v35b h2,
  .about-text-only .about-card-v35b .about-cities,
  .about-text-only .about-card-v35b .about-links{
    text-align:center!important;
  }
}

/* FINAL 19 — mobile Archive → About spacing refinement only. */
@media (max-width:760px){
  /* A little breathing room after OTELO: between the older roomy version and Final 18. */
  .about.about-card.about-text-only{
    padding-top:22px!important;
  }
}