:root{--bg:#0a0a0a;--fg:#f2f1ec;--dim:#858585;--line:#2d2d2d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:#e5e5e5;color:#111}.nav{height:83px;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.03em}.brand span{font:11px 'DM Mono',monospace;vertical-align:top;margin-left:3px}.nav nav{display:flex;gap:38px}.nav nav a,.eyebrow,.meta,footer,.back,.project-label,.project-number,.tiny{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.075em}.nav nav a{transition:opacity .2s}.nav nav a:hover{opacity:.5}.container{max-width:1540px;padding:0 5vw;margin:auto}.hero{padding-top:90px;padding-bottom:82px}.eyebrow{color:var(--dim);display:flex;justify-content:space-between}.hero h1,.page-title,.about h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(76px,12.4vw,210px);line-height:.82;letter-spacing:-.055em;font-weight:600;margin:45px 0 34px}.hero h1 span{color:#777}.hero-bottom{display:flex;justify-content:space-between;gap:20px;align-items:end}.hero-bottom p{font-size:15px;line-height:1.7;max-width:390px;color:#bcbcbc;margin:0}.meta{color:var(--dim)}.section-head{border-top:1px solid var(--line);padding:20px 0 25px;display:flex;justify-content:space-between;align-items:center}.section-head h2{font:500 13px 'DM Mono',monospace;margin:0;letter-spacing:.08em}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px;padding-bottom:110px}.project-card{display:block;min-width:0}.project-image{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(140deg,#292929,#141414);border-radius:5px}.project-image img,.project-image iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .35s}.project-image iframe{pointer-events:none;opacity:0;transform:scale(1.04)}.project-card:hover .project-image img{transform:scale(1.04)}.project-card.playing .project-image iframe{opacity:1}.project-card.playing .project-image img{opacity:0}.project-overlay{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:start;padding:17px;pointer-events:none}.rec{font:11px 'DM Mono',monospace;text-shadow:0 1px 8px #000}.rec:before{content:'';display:inline-block;background:#e13c35;width:7px;height:7px;border-radius:50%;margin-right:9px}.arrow{font-size:20px}.card-info{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 0 0}.card-info h3{font:600 24px 'Barlow Condensed',sans-serif;margin:0;letter-spacing:.005em}.card-info span{font:10px 'DM Mono',monospace;color:var(--dim)}.back{display:inline-block;color:#aaa;margin-top:45px}.back:hover{color:white}.detail{padding-bottom:90px}.detail .page-title{font-size:clamp(72px,10vw,155px);margin:42px 0 18px}.detail-info{display:flex;justify-content:space-between;gap:15px;margin-bottom:38px}.detail-video{aspect-ratio:16/9;background:#191919;position:relative;overflow:hidden;border-radius:5px}.detail-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.detail-video .video-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#777}.frames-title{padding:50px 0 20px;font:11px 'DM Mono',monospace;color:#aaa;letter-spacing:.09em}.frames{display:grid;grid-template-columns:1fr 1fr;gap:16px}.frame-placeholder{aspect-ratio:4/3;background:linear-gradient(125deg,#272727,#151515);border:1px solid #303030;display:flex;align-items:center;justify-content:center;color:#666;font:11px 'DM Mono',monospace;text-align:center;padding:16px}.next{border-top:1px solid var(--line);margin-top:75px;padding:30px 0;display:flex;justify-content:space-between;align-items:center}.next strong{font:600 clamp(36px,6vw,80px) 'Barlow Condensed',sans-serif}.about{padding-top:75px;padding-bottom:100px}.about h1{margin:40px 0 65px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.about-grid img{width:100%;max-height:760px;object-fit:cover;object-position:center 35%;filter:grayscale(1)}.about-copy h2{font:600 clamp(42px,6vw,85px) 'Barlow Condensed',sans-serif;line-height:.92;margin:20px 0 35px}.about-copy p{font-size:clamp(16px,1.6vw,21px);line-height:1.7;color:#bbb;max-width:520px}.about-copy .mail{display:inline-block;border-bottom:1px solid #777;padding-bottom:8px;margin-top:30px;font:12px 'DM Mono',monospace}footer{border-top:1px solid var(--line);padding:28px 5vw 36px;display:flex;justify-content:space-between;gap:20px;color:#777}footer a{color:#ddd}.fade{animation:rise .7s ease both}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.nav{height:70px}.nav nav{gap:16px}.nav nav a{font-size:10px}.brand{font-size:22px}.hero{padding-top:75px;padding-bottom:55px}.hero h1{font-size:clamp(72px,16vw,130px);margin:38px 0}.hero-bottom{align-items:start;flex-direction:column}.projects{grid-template-columns:1fr;gap:27px;padding-bottom:70px}.project-image{aspect-ratio:16/10}.card-info h3{font-size:22px}.about-grid{grid-template-columns:1fr;gap:35px}.about h1{font-size:clamp(78px,15vw,130px)}.frames{gap:9px}.detail .page-title{font-size:clamp(70px,14vw,110px)}footer{flex-wrap:wrap;font-size:9px}}

/* V2 — restrained kinetic type and project title overlays */
.animated-title .title-line{display:block;overflow:hidden;padding:.06em 0 .07em;margin:-.06em 0 -.07em}
.animated-title .title-word{display:block;animation:titleReveal .85s cubic-bezier(.2,.75,.2,1) both;will-change:transform,opacity}
.animated-title .title-line:nth-child(2) .title-word{animation-delay:.16s}
.animated-title .title-word.muted{color:#777}
@keyframes titleReveal{from{transform:translateY(105%);opacity:.15}to{transform:translateY(0);opacity:1}}
.project-overlay{z-index:2}
.hover-brand{position:absolute;left:20px;bottom:18px;right:20px;font:600 clamp(25px,3.4vw,54px) 'Barlow Condensed',sans-serif;letter-spacing:-.02em;line-height:1;color:#fff;text-shadow:0 2px 18px #000a;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.2,1)}
.project-card:hover .hover-brand,.project-card:focus-visible .hover-brand{opacity:1;transform:translateY(0)}
.project-card:hover .project-image:after,.project-card:focus-visible .project-image:after{opacity:1}
.project-image:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}
@media(hover:none){.hover-brand{opacity:1;transform:none;font-size:27px}.project-image:after{opacity:1}}
@media(prefers-reduced-motion:reduce){.animated-title .title-word{animation:none;will-change:auto}.hover-brand,.project-image img,.project-image iframe{transition:none}.fade{animation:none}}

/* V3 — still-image hover, no video preview playback */
.animated-title .title-word:not(.muted){color:#fff}
.animated-title .title-word.muted{color:#a3a3a3}
.project-image img{transform:scale(1);transition:transform .75s cubic-bezier(.2,.75,.2,1)}
.project-card:hover .project-image img,.project-card:focus-visible .project-image img{transform:scale(1.04)}
.project-image:after{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.48));opacity:0}
.project-card:hover .project-image:after,.project-card:focus-visible .project-image:after{opacity:1}
.card-index{font:11px 'DM Mono',monospace;color:#fff;text-shadow:0 1px 8px #0008}
@media(hover:none){.project-image:after{opacity:1}.hover-brand{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.project-image img{transition:none}}

/* V4: editorial stills on Valencia Basket project */
.frames-editorial{gap:18px;align-items:start}
.frame-shot{margin:0;overflow:hidden;background:#151515;border-radius:3px;aspect-ratio:16/10}
.frame-shot.frame-wide{grid-column:1/-1;aspect-ratio:16/9}
.frame-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.frames-editorial{gap:10px}.frame-shot{grid-column:1/-1;aspect-ratio:16/10}}

/* V5 — Koala Bay portrait editorial gallery */
.frames-portrait .frame-shot{aspect-ratio:2/3}
.frames-portrait .frame-shot img{object-fit:cover}
@media(max-width:700px){.frames-portrait .frame-shot{grid-column:auto;aspect-ratio:2/3}.frames-portrait{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* V6 — Koala Bay: four portrait films interleaved with six stills */
.koala-story{max-width:1100px;margin:0 auto}.koala-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.koala-video,.koala-still{margin:0;position:relative;aspect-ratio:9/16;overflow:hidden;background:#161616;border-radius:3px}.koala-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.koala-still img{display:block;width:100%;height:100%;object-fit:cover}.koala-last{margin-top:24px}@media(max-width:700px){.koala-pair{gap:9px;margin-bottom:9px}}

/* V7 — films lead, stills support, concise project notes */
.project-intro{display:grid;grid-template-columns:minmax(190px,1fr) 2fr;gap:40px;align-items:start;border-top:1px solid var(--line);padding:34px 0 52px;margin-top:42px}.project-intro .meta{padding-top:8px}.project-intro p{font-size:clamp(17px,2vw,27px);line-height:1.5;color:#d2d2d2;margin:0;max-width:850px}.project-intro em{font-style:italic;color:#fff}.koala-feature{max-width:920px;margin:0 auto}.koala-feature .frames-title{padding:4px 0 20px}.film-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}.portrait-film{aspect-ratio:9/16;position:relative;overflow:hidden;background:#181818;border-radius:4px}.portrait-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.support-gallery{margin:58px auto 0;max-width:1100px;border-top:1px solid var(--line)}.support-gallery .frames-title{padding:24px 0}.compact-gallery{display:grid;gap:14px}.portrait-gallery{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:auto}.landscape-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-still{margin:0;overflow:hidden;background:#181818;border-radius:3px;aspect-ratio:2/3}.landscape-gallery .compact-still{aspect-ratio:16/10}.compact-still img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease}.compact-still:hover img{transform:scale(1.025)}@media(max-width:700px){.project-intro{grid-template-columns:1fr;gap:14px;padding:25px 0 36px;margin-top:26px}.project-intro p{font-size:17px}.film-duo{gap:9px;margin-bottom:9px}.support-gallery{margin-top:36px}.compact-gallery{gap:8px}.portrait-gallery,.landscape-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V8 refinements */
.rec-hover{position:absolute;left:17px;top:17px;display:flex;align-items:center;gap:7px;font:500 11px 'DM Mono',monospace;color:#fff;letter-spacing:.1em;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}.rec-hover i{width:8px;height:8px;background:#e33132;border-radius:50%;display:inline-block}.project-card:hover .rec-hover,.project-card:focus-visible .rec-hover{opacity:1;transform:translateY(0)}.project-credit{display:flex;gap:35px;align-items:baseline;border-top:1px solid var(--line);padding:24px 0 42px}.project-credit strong{font:500 13px 'DM Mono',monospace;letter-spacing:.05em}.extra-films{margin-top:10px;border-top:1px solid var(--line)}.extra-film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.extra-film{aspect-ratio:16/9;position:relative;background:#191919}.extra-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.landscape-gallery .compact-still{aspect-ratio:16/10}@media(max-width:700px){.extra-film-grid{grid-template-columns:1fr}.project-credit{flex-direction:column;gap:12px}.rec-hover{opacity:1;transform:none}}

/* V9 — separated recording indicator and balanced editorial stills */
.project-overlay .rec-hover{left:50%;top:17px;transform:translate(-50%,5px);white-space:nowrap;pointer-events:none}
.project-card:hover .project-overlay .rec-hover,.project-card:focus-visible .project-overlay .rec-hover{transform:translate(-50%,0)}
.project-overlay .card-index{position:relative;z-index:2}
.editorial-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(170px,20vw,265px);gap:14px}
.editorial-gallery .compact-still{aspect-ratio:auto!important;grid-column:span 4;height:100%;min-width:0}
.editorial-gallery .compact-still:nth-child(6n + 1){grid-column:span 8}
.editorial-gallery .compact-still:nth-child(6n + 4){grid-column:span 8}
.editorial-gallery .compact-still:last-child:nth-child(5){grid-column:1/-1;max-height:330px}
@media(max-width:700px){
 .project-overlay .rec-hover{top:17px;left:50%;opacity:1;transform:translateX(-50%)}
 .editorial-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(135px,32vw,230px);gap:8px}
 .editorial-gallery .compact-still,.editorial-gallery .compact-still:nth-child(n){grid-column:span 1}
 .editorial-gallery .compact-still:first-child,.editorial-gallery .compact-still:last-child:nth-child(odd){grid-column:1/-1}
}

/* V10 — contact, social and responsive refinements */
.site-footer{display:block;padding:0 5vw 30px;color:var(--fg)}
.footer-cta{padding:90px 0 75px;border-bottom:1px solid var(--line)}
.footer-cta>.meta{display:block;margin-bottom:15px}
.footer-cta>a{display:inline-block;font:600 clamp(76px,12vw,180px)/.92 'Barlow Condensed',sans-serif;letter-spacing:-.04em;transition:opacity .25s}
.footer-cta>a:hover{opacity:.6}
.footer-links{display:flex;flex-wrap:wrap;gap:20px 45px;margin-top:42px;font:12px 'DM Mono',monospace}
.footer-links a:hover,.footer-bottom a:hover,.about-social a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:26px;color:var(--dim)}
.about-social{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:20px}
.about-copy .about-social .mail{margin-top:15px;overflow-wrap:anywhere}
.contact-page{padding-top:90px;padding-bottom:140px;min-height:65vh}
.contact-page h1{font:600 clamp(80px,12vw,190px)/.83 'Barlow Condensed',sans-serif;letter-spacing:-.05em;margin:65px 0 38px}
.contact-page h1 span{color:#777}
.contact-page>p{font-size:clamp(16px,1.7vw,22px);line-height:1.6;color:#bbb;max-width:560px}
.contact-methods{margin-top:85px;border-top:1px solid var(--line)}
.contact-methods>a{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 30px;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:28px 0;transition:opacity .2s}
.contact-methods>a:hover{opacity:.65}
.contact-methods strong{font:500 clamp(19px,3vw,37px) 'Barlow Condensed',sans-serif;overflow-wrap:anywhere}
.contact-methods>a>span:last-child{font-size:25px}
@media(max-width:700px){.nav{padding:0 4vw}.nav nav{gap:13px}.brand{font-size:20px}.nav nav a{font-size:9px}.eyebrow{gap:15px;flex-wrap:wrap}.hero h1{font-size:clamp(70px,15.4vw,120px)}.footer-cta{padding:70px 0 55px}.footer-cta>a{font-size:clamp(65px,15vw,110px)}.footer-bottom{flex-wrap:wrap;font-size:9px}.contact-page{padding-top:65px;padding-bottom:90px}.contact-page h1{font-size:clamp(72px,15vw,110px)}.contact-methods{margin-top:50px}.contact-methods>a{grid-template-columns:1fr 25px;gap:10px}.contact-methods>a .meta{grid-column:1/-1}.contact-methods strong{font-size:25px}}
@media(max-width:380px){.nav nav{gap:9px}.brand{font-size:18px}.nav nav a{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* V11 — intentional mobile layout, not a simulated desktop hover */
@media (hover:none), (pointer:coarse){
  .project-card .hover-brand,.project-card:hover .hover-brand,.project-card:focus-visible .hover-brand{display:none!important;opacity:0!important}
  .project-card .project-image:after,.project-card:hover .project-image:after{opacity:0!important}
  .project-card:hover .project-image img,.project-card:focus-visible .project-image img{transform:none!important}
  .project-overlay .rec-hover,.project-card:hover .project-overlay .rec-hover,.project-card:focus-visible .project-overlay .rec-hover{display:none!important}
}
@media(max-width:700px){
  .container{padding-left:5vw;padding-right:5vw}
  .hero{padding-top:55px;padding-bottom:55px}
  .hero h1{font-size:clamp(66px,15vw,110px);line-height:.87;margin:35px 0 38px;letter-spacing:-.045em}
  .hero-bottom p{font-size:15px;line-height:1.55;max-width:34ch}
  .hero-bottom .meta{margin-top:22px;font-size:10px}
  .section-head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:14px;padding:18px 0 20px}
  .section-head h2{font-size:11px;line-height:1.55;white-space:nowrap}
  .section-head .meta{font-size:9px;line-height:1.5;text-align:right;max-width:110px}
  .projects{gap:32px}
  .project-overlay{padding:14px}
  .project-overlay .card-index{font-size:10px}
  .project-overlay .arrow{font-family:Arial,sans-serif;font-size:20px;line-height:1;background:none!important}
  .card-info{display:flex;align-items:center;gap:12px;padding-top:12px}
  .card-info h3{font-size:25px;line-height:1.05;min-width:0}
  .card-info span{font-size:9px;text-align:right;line-height:1.35;max-width:44%;white-space:normal}
  .detail .page-title,.contact-page h1,.about h1{overflow-wrap:normal;word-break:normal}
  .footer-links{gap:14px 22px}
}
@media(max-width:390px){
  .section-head{grid-template-columns:1fr;gap:4px}
  .section-head .meta{text-align:left;max-width:none}
  .card-info span{max-width:40%}
}

/* V12 — remove mobile-only emoji-rendered card arrows; preserve desktop design. */
@media (hover:none), (pointer:coarse){
  .project-card .project-overlay .arrow{display:none!important}
}
@media(max-width:700px){
  .project-card .project-overlay .arrow{display:none!important}
}