:root{--bg:#eeede9;--surface:#e5e4de;--ink:#171715;--muted:#686762;--line:#c6c4be;--white:#fff;--accent:#a99b88;--easing:cubic-bezier(.25,.75,.3,1)}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img,video{max-width:100%}::selection{background:#b7afa2;color:#101010}
.skip{position:absolute;left:-5000px;top:0;background:#fff;padding:12px;z-index:12}.skip:focus{left:12px}
.header{height:125px;padding:24px clamp(22px,5.5vw,105px);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}
.signature{display:flex;gap:17px;align-items:center;min-width:0}.identity-logo{width:74px;height:74px;object-fit:cover;border-radius:50%;flex-shrink:0;filter:grayscale(100%)}.signature-name{font-weight:700;letter-spacing:.028em;font-size:16px;line-height:1.25;white-space:nowrap}.signature-role{display:block;font-size:9px;line-height:2.1;font-weight:400;letter-spacing:.14em;color:var(--muted)}.nav{display:flex;align-items:center;gap:clamp(18px,2.9vw,51px)}.nav a{font-size:11px;font-weight:700;letter-spacing:.12em;padding:10px 0;border-bottom:1px solid transparent;transition:border-color .2s}.nav a:hover,.nav a.active{border-color:var(--ink)}.menu-button,.mobile-nav{display:none}
main{min-height:65vh}.container{width:min(100% - 2*clamp(22px,5.5vw,105px),1630px);margin:auto}.hero{padding-top:clamp(54px,7vw,130px);padding-bottom:clamp(70px,9vw,160px)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;line-height:1.6;color:var(--muted)}.hero .eyebrow{margin-bottom:25px}.hero-title{font-size:clamp(64px,10.5vw,180px);font-weight:500;letter-spacing:-.075em;line-height:.92;margin:0 0 24px}.hero-role{font-size:clamp(17px,2.0vw,28px);font-weight:400;letter-spacing:-.025em;margin:0 0 22px}.hero-subtitle{font-size:clamp(13px,1.1vw,17px);color:var(--muted);margin:0;line-height:1.6}.hero-meta{display:flex;justify-content:space-between;margin-top:clamp(80px,12vw,180px);align-items:flex-end}.tiny{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted)}.hero-meta .tiny:last-child{text-align:right}
.section-rule{padding:22px 0 27px;display:flex;justify-content:space-between;border-top:1px solid var(--ink);gap:20px}.section-rule .small-label{font-size:11px;letter-spacing:.12em;font-weight:700}.section-rule .count{font-size:11px;color:var(--muted)}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 20px;padding-bottom:130px}.project-card{display:block;min-width:0}.cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:#272727;color:#f3f2ed;isolation:isolate}.cover:before{content:"";position:absolute;inset:-20%;z-index:0;transition:transform .85s var(--easing);background:radial-gradient(ellipse at 70% 60%,#505058 0%,transparent 48%),linear-gradient(145deg,#31313c 0%,#08090d 100%)}.cover[data-color="1"]:before{background:radial-gradient(ellipse at 20% 70%,#4b4654,transparent 51%),linear-gradient(125deg,#11141e,#28292c)}.cover[data-color="2"]:before{background:radial-gradient(ellipse at 72% 25%,#675e5f,transparent 52%),linear-gradient(145deg,#24211f,#0c0b0d)}.cover[data-color="3"]:before{background:radial-gradient(ellipse at 50% 90%,#3d4d51,transparent 55%),linear-gradient(130deg,#0d181c,#23292b)}.cover[data-color="4"]:before{background:radial-gradient(ellipse at 65% 35%,#5c4d46,transparent 58%),linear-gradient(115deg,#1c1b19,#17191d)}.cover[data-color="5"]:before{background:radial-gradient(ellipse at 18% 30%,#3b4a48,transparent 58%),linear-gradient(125deg,#151d22,#2f3234)}.cover[data-color="6"]:before{background:radial-gradient(ellipse at 80% 70%,#594f65,transparent 58%),linear-gradient(125deg,#202126,#111013)}.project-card:hover .cover:before{transform:scale(1.075)}.cover-img{width:100%;height:100%;position:absolute;inset:0;z-index:1;object-fit:cover;transition:transform .85s var(--easing)}.project-card:hover .cover-img{transform:scale(1.035)}.cover-img[hidden]{display:none}.cover-shape{position:absolute;left:25%;top:6%;width:48%;aspect-ratio:1;border:1px solid rgba(255,255,255,.11);border-radius:50%;z-index:0;transform:rotate(-22deg) scale(1.28);box-shadow:25px 0 90px rgba(255,255,255,.06) inset;pointer-events:none}.cover-word{position:absolute;left:7%;right:7%;top:46%;transform:translateY(-50%);z-index:0;font-size:clamp(19px,2.8vw,50px);line-height:1.08;font-weight:500;letter-spacing:-.055em;overflow-wrap:anywhere;max-width:85%;text-wrap:balance}.cover-bottom{position:absolute;left:7%;bottom:7%;z-index:2;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.55)}.cover-arrow{position:absolute;right:7%;bottom:7%;z-index:2;font-size:22px;line-height:1}.cover-img~.cover-word{opacity:0}.project-data{display:flex;justify-content:space-between;gap:15px;padding-top:14px}.project-name{font-size:clamp(15px,1.5vw,22px);line-height:1.3;margin:0;font-weight:500;letter-spacing:-.02em}.project-role{margin:8px 0 0;color:var(--muted);font-size:11px;letter-spacing:.015em}.project-number{font-size:10px;color:var(--muted);white-space:nowrap;padding-top:6px}
.interior{padding-top:clamp(60px,8vw,122px);padding-bottom:100px}.page-title{font-size:clamp(70px,13vw,200px);letter-spacing:-.08em;font-weight:500;line-height:1;margin:22px 0 70px}.page-intro{font-size:clamp(18px,2vw,28px);line-height:1.35;max-width:710px;margin-top:-30px;margin-bottom:90px;color:var(--muted);letter-spacing:-.02em}.about-layout{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,6vw,130px);padding-bottom:80px}.portrait-frame{aspect-ratio:4/5;background:#dbd9d2;position:relative;overflow:hidden;min-height:330px;display:flex;align-items:center;justify-content:center}.portrait-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.photo-missing{text-align:center;font-size:10px;letter-spacing:.17em;color:#77746d;line-height:2.3;padding:20px}.about-copy{padding-top:10px}.about-copy h2{font-size:clamp(32px,4.3vw,67px);font-weight:500;letter-spacing:-.052em;line-height:1.07;margin:0 0 38px}.about-copy p{font-size:clamp(15px,1.3vw,20px);line-height:1.75;color:#4e4c48;margin:0 0 26px}.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid var(--line);padding-top:32px;margin-bottom:40px}.fact-title{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);margin-bottom:15px}.fact-value{font-size:14px;line-height:1.9}.about-bottom{padding-top:25px;border-top:1px solid var(--line)}
.empty-play{border-top:1px solid var(--line);padding:45px 0 100px;min-height:300px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.empty-play strong{font-size:26px;font-weight:500;letter-spacing:-.04em}.empty-play p{max-width:480px;font-size:15px;color:var(--muted);line-height:1.65;margin:0}.play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 22px}.video-thumb{position:relative;background:#171719;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.play-arrow{position:relative;z-index:1;border:1px solid #eee;border-radius:50%;background:rgba(0,0,0,.3);width:62px;height:62px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;transition:transform .2s}.play-item:hover .play-arrow{transform:scale(1.1)}.play-title{font-size:22px;margin:13px 0 0;font-weight:500}.play-description{font-size:12px;color:var(--muted);line-height:1.5}.play-player{margin-top:32px;aspect-ratio:16/9;background:#111}.play-player iframe,.play-player video{display:block;width:100%;height:100%;border:0}
.contact-main{padding-top:12px}.contact-lead{font-weight:500;font-size:clamp(35px,5vw,78px);line-height:1.03;letter-spacing:-.065em;max-width:960px;margin:0 0 100px}.contact-list{border-top:1px solid var(--ink)}.contact-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:25px 0;border-bottom:1px solid var(--line)}.contact-row .c-label{font-size:11px;font-weight:700;letter-spacing:.11em}.contact-row .c-value{font-size:clamp(13px,1.7vw,22px);word-break:break-word}.contact-row a:hover{text-decoration:underline;text-underline-offset:4px}
.project-detail{padding-top:65px;padding-bottom:120px}.back-link{font-size:10px;font-weight:700;letter-spacing:.13em}.detail-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;padding:70px 0 30px}.detail-title{font-size:clamp(50px,7.7vw,120px);letter-spacing:-.07em;font-weight:500;line-height:.98;margin:0;max-width:1020px}.detail-class{color:var(--muted);font-size:10px;letter-spacing:.12em;text-align:right;line-height:1.8}.detail-cover{margin:0}.detail-cover .cover{aspect-ratio:16/8.8}.detail-cover .cover-word{font-size:clamp(28px,5vw,90px)}.detail-info{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:60px 0 70px;border-bottom:1px solid var(--line)}.detail-description{font-size:clamp(21px,2.6vw,35px);line-height:1.4;letter-spacing:-.025em;margin:0}.detail-note{font-size:17px;color:var(--muted);line-height:1.6;max-width:520px}.detail-metadata{display:grid;grid-template-columns:140px 1fr;gap:18px 8px;margin:0}.detail-metadata dt{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700}.detail-metadata dd{font-size:13px;margin:0;line-height:1.5}.detail-media{margin-top:45px}.detail-media img{width:100%;height:auto;display:block;margin-bottom:17px}.studio-link{display:inline-block;text-decoration:underline;text-underline-offset:5px;margin-top:24px;font-size:12px;letter-spacing:.07em}.detail-end{display:flex;justify-content:space-between;border-top:1px solid var(--ink);margin-top:100px;padding-top:20px;font-size:11px;font-weight:700;letter-spacing:.1em}
.footer{min-height:130px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin:0 clamp(22px,5.5vw,105px);gap:20px;color:var(--muted);font-size:10px;letter-spacing:.09em;line-height:1.8}.footer a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:950px){.header{height:95px}.identity-logo{width:55px;height:55px}.signature-name{font-size:14px}.nav{gap:18px}.nav a{font-size:10px}.hero-title{font-size:clamp(59px,11.5vw,100px)}.about-layout{column-gap:30px}}
@media(max-width:700px){.header{height:90px}.nav{display:none}.menu-button{display:block;border:0;background:transparent;color:var(--ink);font-size:11px;letter-spacing:.1em;font-weight:700;cursor:pointer}.menu-button span{font-size:19px;vertical-align:middle;margin-left:7px}.mobile-nav:not([hidden]){display:flex;position:absolute;z-index:10;left:0;right:0;background:var(--bg);padding:18px 22px 28px;flex-direction:column;box-shadow:0 10px 16px rgba(0,0,0,.08)}.mobile-nav a{font-size:18px;padding:13px 0;border-bottom:1px solid var(--line)}.signature-role{font-size:8px}.hero{padding-top:70px;padding-bottom:70px}.hero-title{font-size:clamp(56px,12vw,85px)}.hero-meta{margin-top:90px}.projects-grid{grid-template-columns:1fr;gap:46px;padding-bottom:80px}.cover-word{font-size:clamp(28px,7.5vw,48px)}.page-title{font-size:clamp(65px,15vw,110px);margin-bottom:65px}.interior{padding-top:65px}.about-layout{grid-template-columns:1fr;gap:42px}.portrait-frame{max-width:600px}.empty-play,.play-grid,.detail-info{grid-template-columns:1fr}.contact-row{align-items:flex-start;flex-direction:column;gap:8px}.detail-head{grid-template-columns:1fr}.detail-class{text-align:left}.detail-info{gap:26px}.detail-cover .cover{aspect-ratio:16/10}.detail-metadata{grid-template-columns:120px 1fr}.footer{flex-direction:column;align-items:flex-start;padding:35px 0;gap:7px}.facts-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Olivier Carru — V3 / Editorial refinement
   Direction: understated 3D artist portfolio, neutral gray, measured typography.
   Uses system fonts, no font subscription, no tracking. */
:root{
  --bg:#f5f5f3;
  --surface:#ededeb;
  --ink:#515458;
  --muted:#85888a;
  --line:#dadbd9;
  --white:#fff;
  --accent:#9b9da0;
  --easing:cubic-bezier(.22,.68,.2,1);
}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:.002em}
::selection{background:#ced1d0;color:#515458}
:focus-visible{outline:2px solid #767b7c;outline-offset:4px}
.header{
  height:77px;padding:0 clamp(20px,4.6vw,78px);
  display:grid;grid-template-columns:minmax(215px,1fr) auto minmax(92px,1fr);
  gap:24px;border-bottom:1px solid var(--line);
}
.signature{gap:11px;width:max-content}
.identity-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:grayscale(1);display:block}
.signature-name{font-size:11px;letter-spacing:.085em;line-height:1.2;font-weight:600}
.signature-role{font-size:9px;letter-spacing:.036em;line-height:1.8;font-weight:400;color:var(--muted)}
.nav{gap:clamp(24px,2.8vw,45px)}
.nav a{font-size:10px;font-weight:500;letter-spacing:.105em;padding:7px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.active{border-bottom-color:#8f9495}
.header-socials{display:flex;justify-content:flex-end;align-items:center;gap:15px;min-width:0}
.header-socials a{display:inline-flex;color:#8e9294;transition:color .2s ease,transform .2s ease}
.header-socials a:hover{color:var(--ink);transform:translateY(-1px)}
.mobile-socials{display:none}
.container{width:min(100% - 2*clamp(20px,4.6vw,78px),1510px)}
.hero{padding:68px 0 64px}
.eyebrow{font-size:10px;font-weight:400;letter-spacing:.085em;line-height:1.5;color:var(--muted)}
.hero .eyebrow{margin-bottom:23px}
.hero-title{font-size:clamp(33px,3.8vw,47px);font-weight:400;letter-spacing:-.042em;line-height:1.12;margin:0 0 10px}
.hero-role{font-size:clamp(13px,1.22vw,16px);font-weight:400;letter-spacing:0;margin:0 0 9px}
.hero-subtitle{font-size:12px;line-height:1.65;letter-spacing:.005em;color:var(--muted);max-width:650px}
.hero-meta{margin-top:52px}
.tiny{font-size:9px;font-weight:400;letter-spacing:.08em;color:var(--muted)}
.section-rule{padding:18px 0 19px;border-top:1px solid var(--line)}
.section-rule .small-label,.section-rule .count{font-size:10px;font-weight:400;letter-spacing:.08em}
.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 21px;padding-bottom:94px}
.cover{aspect-ratio:16/10;background:#2e3136;color:#efefef}
.cover:before{background:linear-gradient(140deg,#464b51,#272b30 55%,#1b1e22)}
.cover[data-color="1"]:before{background:linear-gradient(125deg,#3d454e,#1c2735)}
.cover[data-color="2"]:before{background:linear-gradient(135deg,#4d4147,#25252e)}
.cover[data-color="3"]:before{background:linear-gradient(145deg,#334452,#1c242a)}
.cover[data-color="4"]:before{background:linear-gradient(145deg,#41454a,#252831)}
.cover[data-color="5"]:before{background:linear-gradient(145deg,#4b484d,#24252b)}
.cover[data-color="6"]:before{background:linear-gradient(145deg,#343d4b,#1e2630)}
.cover-shape{display:none}
.cover-word{left:5.2%;top:auto;bottom:8.3%;transform:none;font-size:clamp(17px,2.1vw,29px);line-height:1.15;font-weight:400;letter-spacing:-.025em;max-width:90%;opacity:.83}
.cover-bottom{left:5.2%;bottom:4.2%;font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.cover-arrow{right:4.7%;top:5%;bottom:auto;font-size:16px;font-weight:400;color:#e5e5e5}
.project-data{padding-top:12px}
.project-name{font-size:clamp(14px,1.3vw,17px);line-height:1.35;letter-spacing:-.01em;font-weight:400}
.project-role{font-size:11px;line-height:1.35;margin:5px 0 0;letter-spacing:0;color:var(--muted)}
.project-number{font-size:9px;letter-spacing:.04em;padding-top:3px}
.interior{padding-top:65px;padding-bottom:86px}
.page-title{font-size:clamp(35px,3.8vw,48px);font-weight:400;letter-spacing:-.04em;line-height:1.17;margin:18px 0 43px}
.page-intro{font-size:clamp(13px,1.3vw,16px);line-height:1.7;letter-spacing:0;max-width:610px;margin:0 0 53px;color:var(--muted)}
.about-layout{grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);column-gap:clamp(36px,7vw,110px);padding-bottom:55px}
.portrait-frame{background:#e6e7e5;min-height:280px}
.photo-missing{color:#989a9a;font-size:10px;letter-spacing:.09em}
.about-copy h2{font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-.026em;line-height:1.2;margin:0 0 24px}
.about-copy p{font-size:clamp(13px,1.1vw,15px);line-height:1.85;color:var(--ink);margin:0 0 17px;max-width:650px}
.facts-grid{padding-top:26px;margin-top:36px;margin-bottom:24px}
.fact-title{font-size:10px;font-weight:400;letter-spacing:.09em}
.fact-value{font-size:12px;line-height:1.8;color:var(--ink)}
.empty-play{min-height:205px;padding-top:28px}
.empty-play strong{font-size:17px;font-weight:400;letter-spacing:0}
.empty-play p{font-size:13px;line-height:1.7}
.play-grid{gap:44px 21px}
.play-title{font-size:16px;font-weight:400;letter-spacing:0;margin:12px 0 4px}
.play-description{font-size:11px;color:var(--muted)}
.play-arrow{border:0;border-radius:0;background:transparent;width:24px;height:24px;font-size:16px;color:#ededed;position:absolute;top:13px;right:17px;align-items:flex-start;justify-content:flex-end}
.video-thumb{background:#262c32}
.play-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.play-item:hover .play-preview,.play-item:focus-within .play-preview{opacity:1}
.play-player{margin-top:20px}
.contact-lead{font-size:clamp(28px,3.4vw,47px);line-height:1.15;font-weight:400;letter-spacing:-.035em;margin:0 0 57px}
.contact-list{border-top-color:var(--line)}
.contact-row{padding:20px 0}
.contact-row .c-label{font-size:10px;font-weight:400;letter-spacing:.09em}
.contact-row .c-value{font-size:clamp(14px,1.45vw,18px)}
.project-detail{padding-top:43px;padding-bottom:95px}
.back-link{font-size:10px;font-weight:400;letter-spacing:.09em}
.detail-head{padding:47px 0 25px}
.detail-title{font-size:clamp(30px,3.6vw,49px);font-weight:400;letter-spacing:-.037em;line-height:1.15;max-width:890px}
.detail-class{font-size:9px;letter-spacing:.075em;line-height:1.75}
.detail-cover .cover{aspect-ratio:16/9}
.detail-cover .cover-word{font-size:clamp(23px,3.2vw,42px)}
.detail-info{padding:37px 0 45px;gap:46px}
.detail-description{font-size:clamp(17px,1.8vw,24px);letter-spacing:-.01em}
.detail-note{font-size:12px;line-height:1.8}
.detail-metadata{grid-template-columns:110px 1fr;gap:13px 8px}
.detail-metadata dt{font-size:10px;letter-spacing:.06em;font-weight:400}
.detail-metadata dd{font-size:12px}
.studio-link{font-size:11px;letter-spacing:.04em}
.detail-end{margin-top:65px;border-top-color:var(--line);font-size:10px;font-weight:400}
.footer{margin:0 clamp(20px,4.6vw,78px);min-height:90px;gap:12px;font-size:9px;letter-spacing:.08em}
.footer a{color:var(--ink);text-decoration:none}
.footer a:hover{text-decoration:underline}
@media(max-width:1020px){
 .header{grid-template-columns:minmax(195px,1fr) auto auto;gap:16px}
 .nav{gap:18px}
 .nav a{font-size:10px}
 .header-socials{gap:10px}
}
@media(max-width:760px){
 .header{height:68px;padding:0 22px;grid-template-columns:1fr auto;gap:14px}
 .signature{gap:9px}
 .identity-logo{width:34px;height:34px}
 .signature-name{font-size:10px}
 .signature-role{font-size:8px;line-height:1.6}
 .nav,.header-socials{display:none}
 .menu-button{display:block;font-size:10px;font-weight:400;letter-spacing:.09em;border:0;background:transparent;color:var(--ink);padding:9px 0}
 .menu-button span{font-size:15px}
 .mobile-nav:not([hidden]){display:flex;left:0;right:0;padding:17px 22px 23px;gap:0;box-shadow:0 11px 20px rgba(65,65,65,.06);border-bottom:1px solid var(--line)}
 .mobile-nav a{font-size:13px;padding:11px 0}
 .mobile-socials{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
 .mobile-socials a{font-size:9px;letter-spacing:.08em;border:0;padding:0;color:var(--muted)}
 .hero{padding:49px 0 49px}
 .hero .eyebrow{margin-bottom:20px}
 .hero-title{font-size:clamp(32px,7.6vw,43px)}
 .hero-role{font-size:13px}
 .hero-subtitle{font-size:12px}
 .hero-meta{margin-top:37px}
 .projects-grid{grid-template-columns:1fr;gap:33px;padding-bottom:70px}
 .cover-word{font-size:clamp(19px,5vw,28px)}
 .interior{padding-top:44px}
 .page-title{font-size:clamp(32px,7.6vw,43px);margin:18px 0 33px}
 .page-intro{margin-bottom:38px}
 .about-layout{grid-template-columns:1fr;gap:31px}
 .portrait-frame{max-width:520px;min-height:270px}
 .about-copy h2{font-size:25px}
 .empty-play,.play-grid,.detail-info{grid-template-columns:1fr}
 .play-grid{gap:35px}
 .contact-lead{font-size:clamp(30px,7vw,44px)}
 .detail-head{grid-template-columns:1fr;gap:8px;padding:34px 0 19px}
 .detail-title{font-size:clamp(30px,7vw,44px)}
 .detail-class{text-align:left}
 .detail-info{gap:24px}
 .footer{flex-direction:column;align-items:flex-start;padding:24px 0;gap:5px;min-height:0}
}
@media(prefers-reduced-motion:reduce){.play-preview{transition:none}}


/* V4 — Header simplification: emblem / navigation grouped on left, networks right. */
.header{
  display:flex;
  justify-content:flex-start;
  gap:clamp(28px,3.4vw,52px);
}
.signature{display:inline-flex;align-items:center;gap:0;flex:0 0 auto;}
.identity-logo{width:36px;height:36px;}
.nav{gap:clamp(21px,2.4vw,37px);}
.header-socials{margin-left:auto;}
@media(max-width:1020px){
  .header{gap:clamp(22px,3vw,38px);}
  .nav{gap:clamp(14px,2.2vw,25px);}
}
@media(max-width:760px){
  .header{justify-content:space-between;gap:14px;}
  .identity-logo{width:34px;height:34px;}
  .menu-button{margin-left:auto;}
}


/* V5 — Precisely aligned page gutters, restrained project detail, media-first layout. */
:root{--portfolio-gutter:max(clamp(20px,4.6vw,78px),calc((100vw - 1510px)/2));}
.header{padding-inline:var(--portfolio-gutter);align-items:center;}
.container{width:calc(100% - 2 * var(--portfolio-gutter));max-width:none;margin-inline:auto;}
.footer{margin-inline:var(--portfolio-gutter);}
.signature{line-height:0;}
.nav{height:36px;display:flex;align-items:center;gap:clamp(21px,2.4vw,37px);}
.nav a{display:inline-flex;align-items:center;height:36px;line-height:1;padding:0;border-bottom:0;position:relative;}
.nav a:hover,.nav a.active{border-bottom:0;}
.nav a:hover:after,.nav a.active:after{content:'';position:absolute;bottom:3px;left:0;right:0;height:1px;background:#969a9c;}
.header-socials{height:36px;align-items:center;}
.header-socials a{width:19px;height:30px;justify-content:center;align-items:center;}
.project-detail{padding-top:35px;padding-bottom:90px;}
.detail-topbar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.075em;line-height:1.3;}
.detail-topbar a{color:var(--ink);}
.detail-head{display:flex;justify-content:space-between;align-items:baseline;gap:35px;padding:47px 0 26px;}
.detail-title{font-size:clamp(27px,3.15vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1.22;max-width:none;overflow-wrap:anywhere;}
.detail-class{font-size:10px;line-height:1.4;letter-spacing:.055em;text-align:right;white-space:nowrap;}
.detail-overview{margin:0 0 24px;border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:20px;}
.detail-field{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.detail-field dt{font-size:9px;letter-spacing:.1em;color:var(--muted);font-weight:400;}
.detail-field dd{font-size:12px;line-height:1.45;letter-spacing:0;color:var(--ink);margin:0;overflow-wrap:anywhere;}
.detail-gallery{margin:0;padding:0;}
.detail-video{width:100%;background:#282d32;aspect-ratio:16/9;}
.detail-video .play-player{margin:0;width:100%;height:100%;}
.detail-video .play-player video,.detail-video .play-player iframe{display:block;width:100%;height:100%;}
.detail-video-placeholder{height:100%;width:100%;min-height:180px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;background:linear-gradient(135deg,#383e44 0%,#252b30 100%);color:#d9dfe0;font-size:10px;letter-spacing:.11em;}
.detail-video-placeholder span:last-child{font-size:10px;color:#aeb6b9;letter-spacing:.06em;}
.detail-stills{display:flex;flex-direction:column;gap:19px;margin-top:19px;}
.detail-still{margin:0;width:100%;background:var(--surface);line-height:0;}
.detail-still img{display:block;width:100%;height:auto;}
.detail-stills-placeholder{min-height:210px;margin-top:19px;background:#e8e9e7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#85898b;font-size:10px;letter-spacing:.11em;}
.detail-stills-placeholder span:last-child{font-size:9px;letter-spacing:.065em;}
.detail-note-new{max-width:660px;margin:25px 0 0;font-size:13px;line-height:1.75;color:var(--ink);}
.project-detail .studio-link{margin-top:25px;}
.detail-end{margin-top:80px;}
@media(max-width:760px){
  .header{padding-inline:var(--portfolio-gutter);}
  .nav{display:none;}
  .project-detail{padding-top:27px;padding-bottom:75px;}
  .detail-head{align-items:flex-start;flex-direction:column;gap:10px;padding:35px 0 22px;}
  .detail-title{font-size:clamp(25px,6.3vw,39px);line-height:1.24;}
  .detail-class{text-align:left;white-space:normal;}
  .detail-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding-top:17px;margin-bottom:20px;}
  .detail-field dd{font-size:11px;}
  .detail-video-placeholder{min-height:0;}
  .detail-stills{gap:12px;margin-top:12px;}
  .detail-stills-placeholder{min-height:150px;margin-top:12px;}
  .detail-end{margin-top:60px;}
}


/* V6 — WORK gallery: project titles directly over the images, no redundant captions. */
.projects-grid{row-gap:22px;}
.project-card{position:relative;overflow:hidden;}
.project-card .cover{aspect-ratio:16/10;}
.project-card .cover::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 53%,rgba(0,0,0,.48) 100%);pointer-events:none;}
.project-card .cover-img{z-index:0;}
.project-card .cover-word,
.project-card .cover-img~.cover-word{
  z-index:2;position:absolute;display:block;left:4%;right:4%;bottom:4.3%;top:auto;
  max-width:89%;transform:none;opacity:1;color:#f4f4f2;font-size:clamp(13px,1.32vw,18px);
  font-weight:400;line-height:1.32;letter-spacing:-.012em;text-wrap:balance;
  text-shadow:0 1px 12px rgba(0,0,0,.22);overflow-wrap:normal;
}
.project-card:hover .cover-img{transform:scale(1.025);}
.project-card:focus-visible .cover{outline:2px solid #85898b;outline-offset:-4px;}
/* ABOUT — three balanced columns under the biography, aligned with the page gutter. */
.about-layout{padding-bottom:0;}
.about-copy{padding-bottom:0;}
.credentials{margin:clamp(42px,5vw,78px) 0 0;border-top:1px solid var(--line);padding:clamp(25px,3vw,42px) 0 clamp(38px,4vw,65px);}
.credentials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(25px,5vw,94px);row-gap:35px;align-items:start;}
.credential-group{min-width:0;}
.credential-heading{font-size:clamp(16px,1.5vw,21px);font-weight:400;letter-spacing:-.025em;line-height:1.3;color:var(--ink);margin:0 0 19px;}
.credential-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.credential-list li{font-size:clamp(12px,1.05vw,15px);font-weight:400;line-height:1.5;color:var(--muted);}
.about-bottom{border-top:1px solid var(--line);padding-top:20px;}
@media(max-width:760px){
 .projects-grid{row-gap:12px;}
 .project-card .cover-word,.project-card .cover-img~.cover-word{font-size:clamp(13px,3.65vw,17px);left:4.3%;bottom:5%;}
 .credentials{margin-top:38px;padding-top:25px;}
 .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;row-gap:34px;}
 .credential-heading{font-size:17px;}
 .credential-list li{font-size:13px;}
}
@media(max-width:420px){
 .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
 .credential-heading{font-size:15px;}
 .credential-list li{font-size:12px;overflow-wrap:anywhere;}
}


/* V7: about composition from original portfolio, restrained typography and exact alignments */
.about-page{padding-top:clamp(45px,6vw,76px)}
.about-page .page-title{font-size:clamp(31px,3.1vw,42px);margin:0 0 clamp(40px,4.5vw,62px);font-weight:400}
.about-page .about-layout{
 display:grid;grid-template-columns:minmax(0,1.75fr) minmax(240px,.82fr);
 align-items:start;column-gap:clamp(36px,7vw,120px);
 padding-bottom:0;
}
.about-page .about-copy{order:0;padding:0}
.about-page .about-copy h2{font-size:clamp(21px,1.9vw,27px);letter-spacing:-.025em;line-height:1.35;margin:0 0 22px}
.about-page .about-copy p{font-size:clamp(13px,1.02vw,15px);color:var(--muted);line-height:1.78;margin:0 0 15px;max-width:720px}
.about-page .portrait-frame{order:1;min-height:0;aspect-ratio:4/5;width:100%;max-width:400px;justify-self:end;background:#e5e6e5}
.about-page .credentials{border:0;margin:clamp(56px,6.5vw,105px) 0 0;padding:0 0 clamp(42px,4.5vw,68px)}
.about-page .credentials-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4.2vw,78px)}
.about-page .credential-heading{font-size:clamp(14px,1.32vw,18px);font-weight:400;letter-spacing:-.015em;margin:0 0 21px;color:var(--ink)}
.about-page .credential-list{gap:5px}
.about-page .credential-list li{font-size:clamp(12px,.98vw,14px);line-height:1.53;color:var(--muted);letter-spacing:0}
.about-page .about-bottom{padding-top:21px}

/* V7: project header — baseline and four evenly aligned metadata columns */
.project-detail .detail-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:30px;padding:43px 0 30px}
.project-detail .detail-title{font-size:clamp(36px,3.55vw,54px);letter-spacing:-.04em;line-height:1.16;margin:0}
.project-detail .detail-class{align-self:baseline;line-height:1.3;text-align:right;font-size:11px;color:var(--muted);letter-spacing:.055em}
.project-detail .detail-overview{width:100%;margin:0 0 31px;padding:21px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3.8vw,70px);border-top:1px solid var(--line);align-items:start}
.project-detail .detail-field{display:flex;flex-direction:column;min-width:0;gap:10px;align-items:flex-start}
.project-detail .detail-field dt{font-size:clamp(10px,.9vw,12px);letter-spacing:.065em;line-height:1.15;color:var(--muted);font-weight:400}
.project-detail .detail-field dd{font-size:clamp(14px,1.08vw,17px);line-height:1.42;letter-spacing:-.008em;color:var(--ink);margin:0;overflow-wrap:normal}
.detail-film-secondary{margin-top:30px}
.detail-film-label{font-size:12px;color:var(--muted);letter-spacing:.02em;margin:0 0 12px}
.detail-video{width:100%;aspect-ratio:16/9;background:#25282c}
.detail-video .play-player{margin:0;width:100%;height:100%}

@media(max-width:900px){
 .about-page .about-layout{grid-template-columns:minmax(0,1.35fr) minmax(210px,.85fr);column-gap:36px}
 .about-page .credential-heading{font-size:16px}
}
@media(max-width:760px){
 .about-page{padding-top:43px}
 .about-page .page-title{font-size:35px;margin-bottom:30px}
 .about-page .about-layout{grid-template-columns:1fr;gap:32px}
 .about-page .portrait-frame{max-width:330px;justify-self:start}
 .about-page .credentials{margin-top:45px}
 .about-page .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:35px}
 .project-detail .detail-head{grid-template-columns:1fr;gap:9px;padding:35px 0 25px}
 .project-detail .detail-title{font-size:clamp(30px,6.9vw,42px)}
 .project-detail .detail-class{text-align:left;font-size:10px}
 .project-detail .detail-overview{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:25px;margin-bottom:24px}
 .project-detail .detail-field dt{font-size:11px}
 .project-detail .detail-field dd{font-size:15px;line-height:1.4}
 .detail-film-secondary{margin-top:24px}
}
@media(max-width:430px){
 .about-page .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:19px}
 .about-page .credential-list li{font-size:12px}
 .project-detail .detail-field dd{font-size:14px}
}


/* V8 — ABOUT matches the approved reference: portrait left, copy right,
   three restrained columns directly beneath the biography, same text column. */
.about-page{padding-top:clamp(30px,3.8vw,56px)}
.about-page .about-eyebrow{font-size:10px;font-weight:400;letter-spacing:.085em;color:var(--muted);margin:0 0 20px}
.about-page .page-title{font-size:clamp(38px,3.6vw,58px);font-weight:400;letter-spacing:-.052em;line-height:1.1;margin:0 0 clamp(32px,4vw,58px)}
.about-page .about-layout{display:grid;grid-template-columns:minmax(260px,.87fr) minmax(0,1.13fr);column-gap:clamp(36px,6.9vw,116px);align-items:start;padding-bottom:65px}
.about-page .portrait-frame{order:0;aspect-ratio:0.85;max-width:none;width:100%;min-height:0;justify-self:stretch;background:#e6e7e6}
.about-page .about-copy{order:1;padding:8px 0 0;min-width:0}
.about-page .about-copy h2{font-size:clamp(22px,2.15vw,30px);font-weight:400;letter-spacing:-.025em;line-height:1.3;margin:0 0 22px;color:var(--ink)}
.about-page .about-copy p{font-size:clamp(13px,1.02vw,15px);line-height:1.7;margin:0 0 17px;color:var(--muted);max-width:740px}
.about-page .credentials{border-top:1px solid var(--line);margin:clamp(23px,2.7vw,39px) 0 0;padding:22px 0 27px;border-bottom:1px solid var(--line)}
.about-page .credentials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(12px,2.2vw,31px);row-gap:25px;align-items:start}
.about-page .credential-heading{font-size:10px;font-weight:400;letter-spacing:.09em;line-height:1.5;color:var(--muted);margin:0 0 14px}
.about-page .credential-list{display:flex;flex-direction:column;gap:6px;list-style:none;padding:0;margin:0}
.about-page .credential-list li{font-size:clamp(11px,.91vw,13px);line-height:1.45;font-weight:400;color:var(--ink);letter-spacing:0;overflow-wrap:normal}
.about-page .about-bottom{border-top:0;padding:22px 0 0}
.about-page .about-bottom .studio-link{font-size:11px;font-weight:400;letter-spacing:.015em}
@media(max-width:1040px){
 .about-page .about-layout{grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr);column-gap:clamp(25px,4vw,55px)}
 .about-page .credentials-grid{column-gap:16px}
 .about-page .credential-list li{font-size:11px}
}
@media(max-width:760px){
 .about-page{padding-top:37px}
 .about-page .about-eyebrow{margin-bottom:17px}
 .about-page .page-title{font-size:40px;margin-bottom:31px}
 .about-page .about-layout{grid-template-columns:minmax(0,1fr);gap:29px;padding-bottom:56px}
 .about-page .portrait-frame{width:min(100%,460px);aspect-ratio:4/5;justify-self:start}
 .about-page .about-copy{padding-top:0}
 .about-page .about-copy h2{font-size:25px;margin-bottom:18px}
 .about-page .about-copy p{font-size:14px;line-height:1.78;margin-bottom:17px}
 .about-page .credentials{margin-top:30px;padding:21px 0 25px}
 .about-page .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 22px}
 .about-page .credential-heading{font-size:10px;margin-bottom:10px}
 .about-page .credential-list li{font-size:12px;line-height:1.5}
}
@media(max-width:390px){
 .about-page .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
 .about-page .credential-list li{font-size:11px}
}


/* V9 — PLAY follows the original 4-column Wix gallery, with video previews
   only on hover; mobile users tap the cover to open the full video. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.play-page{padding-top:clamp(30px,3.8vw,56px);padding-bottom:90px}
.play-page .eyebrow{font-size:10px;letter-spacing:.085em;font-weight:400}
.play-page .page-title{font-size:clamp(38px,3.6vw,58px);font-weight:400;letter-spacing:-.052em;line-height:1.1;margin:20px 0 clamp(32px,4vw,58px)}
.play-page .play-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.9vw,26px);align-items:start}
.play-page .play-item{display:block;min-width:0;outline-offset:4px}
.play-page .video-thumb{aspect-ratio:1;background:#303030;display:block;overflow:hidden;position:relative}
.play-page .video-thumb img,.play-page .video-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play-page .video-thumb img{z-index:0}
.play-page .play-preview{z-index:1;opacity:0;transition:opacity .22s ease;background:#303030}
.play-page .play-item:hover .play-preview,.play-page .play-item:focus-visible .play-preview{opacity:1}
.play-page .play-arrow{position:absolute;z-index:2;inset:0;display:grid;place-items:center;width:100%;height:100%;border:0;border-radius:0;color:white;background:transparent;opacity:.9;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.play-page .play-arrow svg{width:23px;height:23px;filter:drop-shadow(0px 2px 5px rgba(0,0,0,.25))}
.play-page .play-item:hover .play-arrow{opacity:0}
.play-page .play-item:focus-visible .video-thumb{outline:2px solid #777d7e;outline-offset:-2px}
.play-detail .play-player{aspect-ratio:auto;max-width:100%;margin:0}
.play-detail .play-player video{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#303030}
.play-detail .detail-info{padding-top:25px}
@media(max-width:950px){.play-page .play-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}}
@media(max-width:650px){
 .play-page{padding-top:37px}
 .play-page .page-title{font-size:40px;margin:18px 0 30px}
 .play-page .play-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .play-page .play-arrow svg{width:18px;height:18px}
 .play-page .play-item:hover .play-arrow{opacity:.9}
}
@media(prefers-reduced-motion:reduce){.play-page .play-preview,.play-page .play-arrow{transition:none}}


/* V10 — final editorial fixes, 04 November 2026 */
/* Constrain portrait to the original framed format rather than enlarging it with the column. */
.about-page .portrait-frame{
  width:min(100%,420px);
  aspect-ratio:4/5;
  max-width:420px;
  min-height:0;
  justify-self:start;
  overflow:hidden;
}
.about-page .portrait-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 36%;
}
/* Use faithful brand vector shapes, slightly larger and darker than before. */
.header-socials{gap:13px;min-height:36px}
.header-socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-width:36px;min-height:36px;
  color:#575a5c;
  transition:color .2s ease,opacity .2s ease;
}
.header-socials a:hover{color:#3d4245;transform:none}
.header-socials .brand-svg{display:block;width:22px;height:22px;flex-shrink:0;fill:currentColor}
.header-socials a:first-child .brand-svg{width:25px;height:24px}
.header-socials a:nth-child(2) .brand-svg{width:22px;height:22px}
.header-socials a:nth-child(3) .brand-svg{width:22px;height:22px}
/* Independent centering: old top/right play-arrow rule must never affect PLAY cards. */
.play-page .video-thumb .play-arrow{
  position:absolute;inset:auto;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);width:42px;height:42px;
  padding:0;margin:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.12);color:#fff;z-index:3;
  display:grid;place-items:center;pointer-events:none;
}
.play-page .video-thumb .play-arrow svg{display:block;width:22px;height:22px;transform:translateX(1px)}
.play-page .play-item:hover .play-arrow{transform:translate(-50%,-50%);opacity:0}
@media(max-width:760px){
  .about-page .portrait-frame{width:min(100%,340px);max-width:340px}
  .play-page .video-thumb .play-arrow{width:38px;height:38px}
  .play-page .play-item:hover .play-arrow{opacity:.9}
}
@media(max-width:950px) and (min-width:761px){
  .header-socials{gap:5px}
  .header-socials a{width:33px;min-width:33px}
}


/* V11 — About editorial proportions and pixel-centered PLAY icon */
/* Restore photo's smaller framing, while keeping photo left and biography right. */
.about-page .about-layout{
  display:grid;
  grid-template-columns:minmax(250px, 0.45fr) minmax(0, 1fr);
  gap:clamp(38px,6vw,94px);
  padding:0;
  align-items:start;
}
.about-page .portrait-frame{
  order:0;
  width:min(100%,310px);
  max-width:310px;
  aspect-ratio:3/4;
  min-height:0;
  justify-self:start;
  overflow:hidden;
  background:#e6e7e6;
}
.about-page .portrait-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
}
.about-page .about-copy{order:1;padding:3px 0 0}
/* Full-width four-column informational band directly below portrait + bio. */
.about-page .about-details{
  padding:clamp(48px,5vw,70px) 0 45px;
}
.about-page .about-details-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3.1vw,54px);
  align-items:start;
}
.about-page .about-details .credential-heading{
  font-size:clamp(15px,1.23vw,18px);
  font-weight:500;
  letter-spacing:-.012em;
  text-transform:none;
  color:var(--ink);
  margin:0 0 24px;
  line-height:1.3;
}
.about-page .about-details .credential-list{
  display:flex;flex-direction:column;gap:7px;
  padding:0;margin:0;list-style:none;
}
.about-page .about-details .credential-list li,
.about-page .about-details .about-contact p,
.about-page .about-details .about-contact a{
  color:var(--muted);
  font-size:clamp(12px,.96vw,14px);
  line-height:1.58;
  font-weight:400;
  letter-spacing:0;
}
.about-page .about-details .about-contact p{margin:0 0 10px;max-width:250px}
.about-page .about-details .about-contact a{
  display:inline-block;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
  color:#575a5c;
}
.about-page .about-details .about-contact a:hover{color:#33383a}
/* Parent play badge and glyph both use explicit 50% centering; no SVG baseline offset. */
.play-page .video-thumb .play-arrow{
  position:absolute;
  inset:auto;
  top:50%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  background:rgba(0,0,0,.17);
  border-radius:50%;
  display:block;
  z-index:4;
  opacity:1;
  padding:0;margin:0;
  pointer-events:none;
  filter:none;
}
.play-page .video-thumb .play-arrow::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:16px;height:21px;
  background:#fff;
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:translate(-44%,-50%);
  display:block;
}
.play-page .play-item:hover .play-arrow{
  transform:translate(-50%,-50%);
  opacity:0;
}
@media(max-width:1000px){
  .about-page .about-layout{grid-template-columns:minmax(220px,.48fr) minmax(0,1fr);gap:35px}
  .about-page .portrait-frame{width:min(100%,280px);max-width:280px}
  .about-page .about-details-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
}
@media(max-width:700px){
  .about-page .about-layout{grid-template-columns:1fr;gap:26px}
  .about-page .portrait-frame{width:min(100%,260px);max-width:260px}
  .about-page .about-details{padding:43px 0 25px}
  .about-page .about-details-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 18px}
  .about-page .about-details .credential-heading{font-size:15px;margin-bottom:16px}
  .about-page .about-details .credential-list li,
  .about-page .about-details .about-contact p,
  .about-page .about-details .about-contact a{font-size:12px}
  .play-page .video-thumb .play-arrow{width:56px;height:56px}
  .play-page .video-thumb .play-arrow::after{width:13px;height:17px}
  .play-page .play-item:hover .play-arrow{opacity:1}
}
@media(max-width:365px){
  .about-page .about-details-grid{grid-template-columns:1fr;gap:26px}
}


/* V12: return to ABOUT V10 composition, retaining the smaller V11 photo.
   The three small informational columns live under the biography (right-hand
   column). There is no separate CONTACT panel on the ABOUT page. */
.about-page .about-layout{
  display:grid;
  grid-template-columns:minmax(260px,.87fr) minmax(0,1.13fr);
  column-gap:clamp(36px,6.9vw,116px);
  align-items:start;
  padding-bottom:65px;
}
.about-page .portrait-frame{
  width:min(100%,310px);
  max-width:310px;
  aspect-ratio:3/4;
  min-height:0;
  justify-self:start;
}
.about-page .about-copy{order:1;padding:8px 0 0}
@media(max-width:1040px){
  .about-page .about-layout{
    grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr);
    column-gap:clamp(25px,4vw,55px);
  }
  .about-page .portrait-frame{width:min(100%,280px);max-width:280px}
}
@media(max-width:760px){
  .about-page .about-layout{grid-template-columns:minmax(0,1fr);gap:29px;padding-bottom:56px}
  .about-page .portrait-frame{width:min(100%,260px);max-width:260px}
  .about-page .about-copy{padding:0}
}


/* V14 — Smaller two-column still gallery, aligned exactly with the video.
   The 4th credit (STUDIO) reaches the right gutter shared with the film. */
.project-detail .detail-stills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,0.9vw,16px);
  width:100%;
  margin-top:clamp(10px,0.9vw,16px);
  align-items:start;
}
.project-detail .detail-still{
  width:100%;
  min-width:0;
  margin:0;
  overflow:hidden;
}
.project-detail .detail-still img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.project-detail .detail-overview{
  width:100%;
  box-sizing:border-box;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.project-detail .detail-overview .detail-field:last-child{
  align-items:flex-end;
  text-align:right;
}
.project-detail .detail-overview .detail-field:last-child dt,
.project-detail .detail-overview .detail-field:last-child dd{
  text-align:right;
}
@media (max-width:760px){
  .project-detail .detail-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
  .project-detail .detail-stills{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;}
}


/* V15 — répartir les quatre blocs de crédits sur TOUTE la ligne.
   Chaque bloc conserve sa largeur naturelle ; les espaces libres sont
   répartis uniformément ENTRE les quatre blocs. Le dernier bloc est
   aligné sur le bord droit de la ligne supérieure et de la vidéo. */
@media (min-width:761px) {
  .project-detail .detail-overview {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:clamp(18px,2.1vw,38px);
  }
  .project-detail .detail-overview .detail-field {
    flex:0 1 auto;
    width:max-content;
    max-width:29%;
    min-width:0;
    align-items:flex-start;
    text-align:left;
  }
  .project-detail .detail-overview .detail-field:last-child {
    align-items:flex-end;
    text-align:right;
  }
  .project-detail .detail-overview .detail-field:last-child dt,
  .project-detail .detail-overview .detail-field:last-child dd {
    text-align:right;
  }
}
/* Tablettes et mobiles : deux colonnes proportionnelles, sans débordement. */
@media (max-width:760px) {
  .project-detail .detail-overview {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* V16 — 'STUDIO' starts at the same x-position as the studio name,
   while the entire studio block retains the right edge of the full-width
   credits row / video. Other three credits are left untouched. */
@media (min-width:761px) {
  .project-detail .detail-overview .detail-field:last-child {
    margin-left:auto;
    align-items:flex-start;
    text-align:left;
  }
  .project-detail .detail-overview .detail-field:last-child dt,
  .project-detail .detail-overview .detail-field:last-child dd {
    text-align:left;
  }
}

/* Même alignement sur les écrans étroits : le libellé et la valeur commencent
   ensemble, tout en gardant le bord droit du bloc sur celui du contenu. */
@media (max-width:760px) {
  .project-detail .detail-overview .detail-field:last-child {
    width:max-content;
    max-width:100%;
    justify-self:end;
    align-items:flex-start;
    text-align:left;
  }
  .project-detail .detail-overview .detail-field:last-child dt,
  .project-detail .detail-overview .detail-field:last-child dd {
    text-align:left;
  }
}


/* V17: revert accidental auto margin. space-between distributes the three
   inter-column gaps equally, while STUDIO remains left-aligned above its
   studio name. The last studio text ends at the right border of the video. */
@media (min-width:761px) {
  .project-detail .detail-overview {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .project-detail .detail-overview .detail-field:last-child {
    margin-left:0;
    align-items:flex-start;
    text-align:left;
  }
  .project-detail .detail-overview .detail-field:last-child dt,
  .project-detail .detail-overview .detail-field:last-child dd {
    text-align:left;
  }
}


/* V18 — Typography direction: calm, crisp, editorial; inspired by Zachary Corzine.
   DM Sans is a free/open-licensed Google Font. No fonts are packaged or distributed.
   Typography only: retains the V17 layout, credit spacing, and media presentation. */
:root{--oc-font:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
html,body,button,input,textarea,select{font-family:var(--oc-font)}
body{font-weight:400;letter-spacing:-.006em}
.nav a{font-family:var(--oc-font);font-weight:500;letter-spacing:.085em}
.mobile-nav a{font-family:var(--oc-font)}
.hero-title,.page-title,.detail-title,.about-copy h2,
.contact-lead,.project-name,.cover-word{font-family:var(--oc-font);font-weight:400}
.hero-title{letter-spacing:-.039em;line-height:1.15}
.page-title{letter-spacing:-.035em;line-height:1.16}
.detail-title{letter-spacing:-.039em;line-height:1.16}
.about-copy h2{letter-spacing:-.028em}
.contact-lead{letter-spacing:-.034em}
.hero-role{letter-spacing:-.006em}
.hero-subtitle,.about-copy p,.fact-value,
.credential-list,.detail-overview,.contact-row,.detail-note-new{
  font-family:var(--oc-font);
}
.eyebrow,.tiny,.section-rule .small-label,.section-rule .count,
.detail-field dt,.detail-class,.credential-heading,.fact-title{
  font-family:var(--oc-font);font-weight:500;letter-spacing:.065em
}
.cover-word{letter-spacing:-.018em}
.project-card .cover-word{font-weight:400}
@media(max-width:760px){
  .hero-title{letter-spacing:-.033em}
  .detail-title{letter-spacing:-.028em}
}


/* V19 — WORK hover treatment inspired by Zachary Corzine:
   a soft fade over the image and a title/subtitle reveal.
   Neverwinter uses a custom subtitle. On touch devices, text remains visible. */
.project-card .cover{
  aspect-ratio:16/10;
  isolation:isolate;
}
.project-card .cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(231,233,223,.20);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.project-card .cover-overlay{
  position:absolute;
  z-index:2;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  max-width:62%;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.project-card .cover-word,
.project-card .cover-img ~ .cover-word{
  position:static;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  transform:none;
  opacity:1;
  max-width:none;
  color:#f3f4ef;
  font-size:clamp(26px,3vw,42px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.032em;
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.project-card .cover-subtitle{
  color:rgba(243,244,239,.92);
  font-size:clamp(10px,1vw,13px);
  line-height:1.2;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.20);
}
@media (hover:hover){
  .project-card:hover .cover::after,
  .project-card:focus-visible .cover::after{opacity:1;}
  .project-card:hover .cover-overlay,
  .project-card:focus-visible .cover-overlay{opacity:1;transform:translateY(-50%);}
  .project-card .cover-overlay{transform:translateY(calc(-50% + 8px));}
}
@media (hover:none){
  .project-card .cover::after{opacity:1;background:linear-gradient(180deg,rgba(233,234,225,.07) 0%, rgba(17,18,18,.18) 100%);} 
  .project-card .cover-overlay{opacity:1;left:6%;top:auto;bottom:6%;transform:none;max-width:76%;gap:5px;}
  .project-card .cover-word,
  .project-card .cover-img ~ .cover-word{font-size:clamp(18px,5.2vw,28px);}
  .project-card .cover-subtitle{font-size:clamp(10px,2.6vw,12px);}
}

/* V20 — More breathable typography across the portfolio.
   Keep DM Sans and the V17 credit layout, but remove optical compression.
   Set tracking per usage rather than globally scaling the interface. */
body {
  letter-spacing: .012em;
  font-kerning: normal;
}

/* Display titles: neutral spacing rather than the negative tracking
   that was causing adjacent letterforms to feel crowded. */
.hero-title,
.page-title,
.about-page .page-title,
.play-page .page-title,
.detail-title,
.project-detail .detail-title,
.about-copy h2,
.about-page .about-copy h2,
.contact-lead {
  letter-spacing: .002em;
}
.hero-role,
.hero-subtitle,
.about-copy p,
.about-page .about-copy p,
.credential-list li,
.about-page .credential-list li,
.contact-row .c-value,
.detail-overview .detail-field dd,
.project-detail .detail-overview .detail-field dd,
.detail-note-new,
.detail-film-label {
  letter-spacing: .012em;
}

/* Navigation and micro typography remain understated but readable. */
.nav a { letter-spacing: .11em; }
.mobile-nav a { letter-spacing: .06em; }
.eyebrow,
.tiny,
.section-rule .small-label,
.section-rule .count,
.detail-field dt,
.detail-class,
.credential-heading,
.about-page .credential-heading,
.fact-title,
.contact-row .c-label {
  letter-spacing: .085em;
}

/* Project title reveal: smaller than V19, with comfortable tracking.
   Same left-of-centre placement and soft overlay. */
.project-card .cover-overlay {
  gap: 7px;
  max-width: 75%;
}
.project-card .cover-word,
.project-card .cover-img ~ .cover-word {
  font-size: clamp(19px, 2.05vw, 28px);
  line-height: 1.17;
  letter-spacing: .008em;
  font-weight: 500;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.project-card .cover-subtitle {
  font-size: clamp(10px, .89vw, 12px);
  letter-spacing: .115em;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .hero-title,
  .detail-title,
  .project-detail .detail-title {letter-spacing: .003em;}
  .project-card .cover-word,
  .project-card .cover-img ~ .cover-word {
    font-size: clamp(17px, 4.3vw, 22px);
    letter-spacing: .008em;
  }
  .project-card .cover-subtitle {
    font-size: 10px;
    letter-spacing: .105em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-card .cover::after,
  .project-card .cover-overlay {transition: none;}
}


/* V21 — Rounder, softly weighted Open Sans inspired by the typography
   visible on Zachary Corzine’s project thumbnails.
   Keep V20 typography sizes and generous tracking, without making headings oversized. */
:root { --oc-font: "Open Sans", "Trebuchet MS", Arial, sans-serif; }
html, body, button, input, textarea, select { font-family: var(--oc-font); }
.hero-title, .page-title, .detail-title, .about-copy h2, .contact-lead {
  font-family: var(--oc-font);
  font-weight: 500;
}
/* A semibold 600 title gives the softly rounded, fuller letterforms in the reference. */
.project-card .cover-word,
.project-card .cover-img ~ .cover-word {
  font-family: var(--oc-font);
  font-weight: 600;
  letter-spacing: .006em;
  font-size: clamp(19px, 2.05vw, 28px);
  line-height: 1.24;
}
.project-card .cover-subtitle {
  font-family: var(--oc-font);
  font-weight: 600;
  letter-spacing: .095em;
  line-height: 1.4;
}
/* Keep the site sober: small and medium text uses regular weight. */
.hero-role, .hero-subtitle, .about-copy p, .credential-list li,
.detail-field dd, .contact-row, .detail-note-new {
  font-weight: 400;
}
@media (max-width: 760px) {
  .project-card .cover-word,
  .project-card .cover-img ~ .cover-word {
    font-size: clamp(17px, 4.3vw, 22px);
  }
}


/* V22 — alternative to Open Sans: modern, rounded geometric sans.
   Rounded but restrained: medium headings and generous, never negative, tracking.
   Visual comparison requested against Zachary Corzine; this is a similar
   direction, not a claim to use the same exact font. */
:root { --oc-font: "Plus Jakarta Sans", "Lato", Arial, sans-serif; }
html,body,button,input,textarea,select { font-family:var(--oc-font); }
.hero-title,.page-title,.detail-title,.about-copy h2,.contact-lead {
  font-family:var(--oc-font);font-weight:500;letter-spacing:.002em;
}
/* Work card titles: V20 size, soft medium weight rather than V21 semibold. */
.project-card .cover-word,
.project-card .cover-img ~ .cover-word {
  font-family:var(--oc-font);
  font-weight:500;
  font-size:clamp(19px,2.05vw,28px);
  letter-spacing:.012em;
  line-height:1.22;
}
.project-card .cover-subtitle {
  font-family:var(--oc-font);font-weight:500;
  letter-spacing:.105em;line-height:1.4;
}
.nav a{font-weight:500;letter-spacing:.11em;}
.about-copy p,.hero-role,.hero-subtitle,.credential-list li,
.detail-overview .detail-field dd,.detail-note-new {letter-spacing:.012em;}
@media(max-width:760px) {
  .project-card .cover-word,.project-card .cover-img ~ .cover-word {
    font-size:clamp(17px,4.3vw,22px);letter-spacing:.012em;
  }
}


/* V27 — Project pages: quiet subtitle and more restrained metadata.
   Keep the balanced V17 distribution, with STUDIO aligned internally to its value. */
.project-detail .detail-head{
  display:block;
  padding-top:clamp(30px,3.3vw,43px);
  padding-bottom:clamp(22px,2.5vw,30px);
}
.project-detail .detail-heading{display:block;min-width:0;width:100%;}
.project-detail .detail-title{max-width:100%;line-height:1.19;}
.project-detail .detail-subtitle{
  margin:11px 0 0;
  font-family:var(--oc-font);
  color:var(--muted);
  font-size:clamp(12px,0.93vw,14px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.025em;
}
.project-detail .detail-overview .detail-field{gap:8px;}
.project-detail .detail-overview .detail-field dt{
  font-size:clamp(9px,.76vw,11px);
  line-height:1.35;
  font-weight:400;
  letter-spacing:.08em;
}
.project-detail .detail-overview .detail-field dd{
  font-size:clamp(11px,.96vw,14px);
  line-height:1.55;
  font-weight:400;
  letter-spacing:.008em;
  overflow-wrap:normal;
}
@media (min-width:761px){
  .project-detail .detail-overview{gap:clamp(14px,1.5vw,30px);}
  .project-detail .detail-overview .detail-field{flex:0 1 auto;max-width:32%;}
  .project-detail .detail-overview .detail-field:last-child{flex-shrink:0;max-width:25%;}
}
@media (max-width:760px){
  .project-detail .detail-head{padding:32px 0 22px;}
  .project-detail .detail-overview .detail-field dd{font-size:12px;line-height:1.5;}
  .project-detail .detail-overview .detail-field dt{font-size:10px;}
}

/* Cinematic stills for Neverwinter: alternating 3-image and 2-image rows.
   All 28 stills have the same source aspect ratio (1920 x 816), and are shown
   without distortion or cropping. Future images inherit the same layout. */
@media (min-width:1051px){
  .project-detail .detail-stills--rhythm{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(10px,.9vw,16px);
  }
  .project-detail .detail-stills--rhythm > .detail-still:nth-child(5n+1),
  .project-detail .detail-stills--rhythm > .detail-still:nth-child(5n+2),
  .project-detail .detail-stills--rhythm > .detail-still:nth-child(5n+3){grid-column:span 2;}
  .project-detail .detail-stills--rhythm > .detail-still:nth-child(5n+4),
  .project-detail .detail-stills--rhythm > .detail-still:nth-child(5n+5){grid-column:span 3;}
}
.project-detail .detail-stills--rhythm .detail-still img{
  aspect-ratio:40/17;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media (min-width:681px) and (max-width:1050px){
  .project-detail .detail-stills--rhythm{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
  .project-detail .detail-stills--rhythm{grid-template-columns:minmax(0,1fr);}
}


/* V28 — Refined project-heading hierarchy (Neverwinter and future subheadings).
   Keep Plus Jakarta Sans and remove the top-right project counter. */
.project-detail .detail-heading .detail-subtitle {
  margin: 6px 0 0;
  font-family: var(--oc-font);
  font-size: clamp(19px, 1.85vw, 27px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .project-detail .detail-heading .detail-subtitle {
    font-size: clamp(14px, 3.7vw, 19px);
    margin-top: 6px;
    letter-spacing: .015em;
  }
}


/* V29 — ABOUT redesign: restrained editorial composition inspired by references.
   About heading remains consistent; photo and bio sit side by side, credentials
   occupy the full content width, and the selected-work rail links to WORK. */
.about-page-v29 { padding-top:clamp(30px,3.8vw,56px); padding-bottom:clamp(65px,6vw,110px); }
.about-page-v29 .about-eyebrow { margin:0 0 20px; }
.about-page-v29 .page-title { margin:0 0 clamp(44px,4.4vw,68px); font-size:clamp(38px,3.6vw,58px); font-weight:500; letter-spacing:.002em; line-height:1.12; }
.about-page-v29 .about-intro { display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px); gap:clamp(48px,7vw,135px); align-items:start; }
.about-page-v29 .about-intro-copy { max-width:750px; min-width:0; }
.about-page-v29 .about-intro-copy h2 { margin:0 0 24px; font-family:var(--oc-font); font-size:clamp(22px,1.85vw,27px); font-weight:500; letter-spacing:.005em; line-height:1.35; color:var(--ink); }
.about-page-v29 .about-intro-copy p { max-width:725px; margin:0 0 17px; color:var(--muted); font-size:clamp(12px,.99vw,14px); line-height:1.81; font-weight:400; letter-spacing:.012em; }
.about-page-v29 .about-intro-contact { display:inline-flex; gap:12px; margin-top:15px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:11px; letter-spacing:.04em; font-weight:500; color:var(--ink); text-decoration:none; }
.about-page-v29 .about-intro-contact:hover { color:#6e7375; }
.about-page-v29 .about-intro-portrait { width:100%; max-width:290px; justify-self:end; aspect-ratio:4/5; overflow:hidden; background:#e6e7e6; }
.about-page-v29 .about-intro-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 36%; }
.about-page-v29 .about-expertise { margin-top:clamp(52px,5.6vw,80px); padding:clamp(26px,3vw,42px) 0 clamp(42px,5vw,68px); border-top:1px solid var(--line); }
.about-page-v29 .about-expertise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,6vw,120px); }
.about-page-v29 .about-expertise .credential-heading { margin:0 0 18px; font-size:clamp(15px,1.1vw,17px); font-weight:500; line-height:1.4; color:var(--ink); text-transform:none; letter-spacing:.004em; }
.about-page-v29 .about-expertise .credential-list { display:flex; flex-direction:column; gap:7px; list-style:none; margin:0; padding:0; }
.about-page-v29 .about-expertise .credential-list li { margin:0; color:var(--muted); font-size:clamp(12px,.94vw,14px); line-height:1.52; font-weight:400; letter-spacing:.01em; }
.about-page-v29 .about-selected { padding:23px 0 0; border-top:1px solid var(--line); }
.about-page-v29 .about-selected-head { display:flex; gap:24px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.about-page-v29 .about-selected-head > div:first-child { display:flex; align-items:baseline; flex-wrap:wrap; gap:18px; }
.about-page-v29 .about-selected-label { font-size:11px; font-weight:500; letter-spacing:.09em; color:var(--ink); }
.about-page-v29 .about-selected-caption { font-size:11px; color:var(--muted); letter-spacing:.015em; }
.about-page-v29 .about-rail-controls { display:flex; gap:5px; }
.about-page-v29 .about-rail-controls button { border:1px solid var(--line); width:34px; height:31px; padding:0; background:transparent; color:var(--ink); font-family:var(--oc-font); font-size:18px; font-weight:400; cursor:pointer; }
.about-page-v29 .about-rail-controls button:hover { border-color:#9da1a1; background:rgba(0,0,0,.025); }
.about-page-v29 .about-rail-controls button:focus-visible, .about-page-v29 .about-work-card:focus-visible { outline:2px solid #777; outline-offset:3px; }
.about-page-v29 .about-work-rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4 * clamp(12px,1.1vw,20px)) / 5); column-gap:clamp(12px,1.1vw,20px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#c6c9c9 transparent; padding-bottom:12px; }
.about-page-v29 .about-work-card { display:block; min-width:0; overflow:hidden; color:inherit; text-decoration:none; scroll-snap-align:start; }
.about-page-v29 .about-work-media { position:relative; display:block; width:100%; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(145deg,#353c42,#58616a); isolation:isolate; }
.about-page-v29 .about-work-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .5s ease; }
.about-page-v29 .about-work-fallback { position:absolute; inset:0; background:linear-gradient(150deg,#333c44,#70797d); z-index:0; }
.about-page-v29 .about-work-name { position:absolute; z-index:3; left:11px; right:11px; bottom:12px; font-size:clamp(11px,.9vw,13px); line-height:1.4; color:white; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.4); opacity:0; transform:translateY(5px); transition:opacity .25s ease,transform .25s ease; }
.about-page-v29 .about-work-media::after { content:''; position:absolute; z-index:2; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%); opacity:0; transition:opacity .25s ease; }
@media (hover:hover) {
 .about-page-v29 .about-work-card:hover img { transform:scale(1.04); }
 .about-page-v29 .about-work-card:hover .about-work-name, .about-page-v29 .about-work-card:focus-visible .about-work-name { opacity:1;transform:translateY(0); }
 .about-page-v29 .about-work-card:hover .about-work-media::after, .about-page-v29 .about-work-card:focus-visible .about-work-media::after { opacity:1; }
}
@media (hover:none){ .about-page-v29 .about-work-name{opacity:1;transform:none} .about-page-v29 .about-work-media::after{opacity:1;} }
@media (max-width:1050px) {
 .about-page-v29 .about-intro { grid-template-columns:minmax(0,1fr) minmax(190px,250px);gap:clamp(28px,4vw,60px); }
 .about-page-v29 .about-intro-portrait{max-width:250px;}
 .about-page-v29 .about-work-rail { grid-auto-columns:calc((100% - 2 * 14px) / 3); column-gap:14px; }
}
@media (max-width:700px){
 .about-page-v29 .page-title { font-size:40px; margin-bottom:30px; }
 .about-page-v29 .about-intro { display:flex;flex-direction:column-reverse;gap:26px; }
 .about-page-v29 .about-intro-portrait { align-self:flex-start; width:190px; max-width:190px; aspect-ratio:4/5; }
 .about-page-v29 .about-intro-copy h2 { font-size:22px;margin-bottom:18px; }
 .about-page-v29 .about-intro-copy p { font-size:13px; line-height:1.77; }
 .about-page-v29 .about-expertise { margin-top:42px; padding-top:27px; padding-bottom:40px; }
 .about-page-v29 .about-expertise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px;row-gap:35px; }
 .about-page-v29 .about-expertise .credential-heading { font-size:15px; margin-bottom:13px; }
 .about-page-v29 .about-expertise .credential-list li { font-size:12px; }
 .about-page-v29 .about-work-rail { grid-auto-columns:63%; column-gap:12px; }
 .about-page-v29 .about-selected-head { align-items:flex-start; }
 .about-page-v29 .about-selected-head > div:first-child { display:block; }
 .about-page-v29 .about-selected-caption { display:block; margin-top:5px; }
}
@media (prefers-reduced-motion:reduce){
 .about-page-v29 .about-work-rail {scroll-behavior:auto;}
 .about-page-v29 .about-work-media img,.about-page-v29 .about-work-name,.about-page-v29 .about-work-media::after{transition:none;}
}

.about-page-v29 .about-work-media.is-missing .about-work-name{opacity:1;transform:none;text-shadow:none}.about-page-v29 .about-work-media.is-missing::after{opacity:1}
/* Keep links legible even if a third-party thumbnail is slow to load. */
.about-page-v29 .about-work-name { opacity:.88; transform:none; }
.about-page-v29 .about-work-media::after { opacity:.58; }
@media (hover:hover){
 .about-page-v29 .about-work-card:hover .about-work-name { opacity:1; }
 .about-page-v29 .about-work-card:hover .about-work-media::after { opacity:1; }
}


/* V30 — ABOUT: compact professional columns match the bio's measure.
   The main portrait remains on the right, with balanced equal-width columns
   under the left-side text instead of across the entire page. */
.about-page-v29 .about-expertise-grid {
  width: min(100%, 750px);
  max-width: 750px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.3vw, 35px);
}
.about-page-v29 .about-expertise {
  padding-bottom: clamp(42px, 4.5vw, 62px);
}
/* Gallery: no heading, no arrows, clean covers until hover, same soft fade as WORK.
   The text is deliberately restrained for narrow portrait thumbnails. */
.about-page-v29 .about-selected { padding-top: 24px; }
.about-page-v29 .about-work-rail {
  grid-auto-columns: calc((100% - 4 * clamp(12px, 1.1vw, 20px)) / 5);
}
.about-page-v29 .about-work-media::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(227,230,222,.21);
  opacity:0;
  transition:opacity .33s ease;
  pointer-events:none;
}
.about-page-v29 .about-work-overlay {
  position:absolute;
  z-index:3;
  left:8%; right:8%; top:50%;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px;
  transform:translateY(calc(-50% + 7px));
  opacity:0;
  color:#f4f4f1;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.34);
}
.about-page-v29 .about-work-name {
  position:static;
  display:block;
  left:auto;right:auto;bottom:auto;
  margin:0;
  opacity:1;
  transform:none;
  font-family:var(--oc-font);
  font-weight:500;
  letter-spacing:.008em;
  font-size:clamp(13px,1.15vw,17px);
  line-height:1.28;
  overflow-wrap:anywhere;
  transition:none;
}
.about-page-v29 .about-work-subtitle {
  display:block;
  font-size:clamp(9px,.68vw,11px);
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.4;
}
@media (hover:hover) {
  .about-page-v29 .about-work-card:hover .about-work-media::after,
  .about-page-v29 .about-work-card:focus-visible .about-work-media::after {opacity:1;}
  .about-page-v29 .about-work-card:hover .about-work-overlay,
  .about-page-v29 .about-work-card:focus-visible .about-work-overlay {
    opacity:1; transform:translateY(-50%);
  }
  .about-page-v29 .about-work-card:hover img {transform:scale(1.025);}
}
/* Fallback on failed external cover images keeps the link discoverable. */
.about-page-v29 .about-work-media.is-missing .about-work-overlay {
  opacity:1;transform:translateY(-50%);
}
.about-page-v29 .about-work-media.is-missing::after {
  opacity:1;background:rgba(0,0,0,.16);
}
@media (hover:none) {
  .about-page-v29 .about-work-overlay {
    left:7%; right:7%; top:auto; bottom:7%;
    transform:none;opacity:1;
  }
  .about-page-v29 .about-work-media::after {
    background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.32));
    opacity:1;
  }
  .about-page-v29 .about-work-name {font-size:clamp(12px,3vw,15px);}
}
@media(max-width:1050px){
  .about-page-v29 .about-work-rail {
    grid-auto-columns:calc((100% - 2 * 14px) / 3);
    column-gap:14px;
  }
}
@media(max-width:700px){
  .about-page-v29 .about-expertise-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;column-gap:24px;row-gap:35px;
  }
  .about-page-v29 .about-work-rail {grid-auto-columns:63%;column-gap:12px;}
  .about-page-v29 .about-selected {padding-top:16px;}
}
@media(prefers-reduced-motion:reduce){
  .about-page-v29 .about-work-overlay,
  .about-page-v29 .about-work-media::after {transition:none;}
}

/* V30 — WORK: test a denser three-across gallery on wide screens.
   Keep the same cover proportions, and step down to 2 and 1 columns. */
@media(min-width:1101px){
  .projects-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(15px,1.6vw,24px);
    row-gap:clamp(16px,1.7vw,26px);
  }
  .project-card .cover-word,
  .project-card .cover-img ~ .cover-word {
    font-size:clamp(16px,1.5vw,22px);
    line-height:1.26;
  }
  .project-card .cover-subtitle {
    font-size:clamp(9px,.72vw,11px);
  }
}
@media(min-width:701px) and (max-width:1100px){
  .projects-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  .projects-grid {grid-template-columns:1fr;}
}
/* Keep the column group within the biography's actual width on tablets too. */
@media (min-width:701px) and (max-width:1050px) {
  .about-page-v29 .about-expertise-grid {
    max-width:calc(100% - 250px - clamp(28px,4vw,60px));
  }
}


/* V31 — Click-to-enlarge stills on every WORK detail page. */
.project-detail .detail-still-open {
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  font:inherit;
}
.project-detail .detail-still-open img {
  width:100%;
  display:block;
}
.project-detail .detail-still-open:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
.image-lightbox {
  position:fixed;
  inset:0;
  box-sizing:border-box;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:#f5f5f3;
  overflow:hidden;
}
.image-lightbox::backdrop { background:rgba(12,14,16,.93); }
.image-lightbox[open] { display:flex;align-items:center;justify-content:center; }
.lightbox-shell {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:60px 66px;
  box-sizing:border-box;
}
.lightbox-picture {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 120px);
  object-fit:contain;
  box-shadow:0 6px 28px rgba(0,0,0,.2);
}
.lightbox-close,.lightbox-prev,.lightbox-next {
  position:absolute;
  appearance:none;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(30,33,36,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius:2px;
  font:400 22px/1 var(--oc-font,Arial,sans-serif);
}
.lightbox-close{right:20px;top:18px;font-size:26px;}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%);}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.16);}
.lightbox-close:focus-visible,.lightbox-prev:focus-visible,.lightbox-next:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.lightbox-count {
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  font:500 11px/1.4 var(--oc-font,Arial,sans-serif);
  letter-spacing:.12em;
  color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums;
}
@media(max-width:700px){
  .lightbox-shell{padding:56px 14px 62px;}
  .lightbox-picture{max-height:calc(100dvh - 135px);}
  .lightbox-prev,.lightbox-next{top:auto;bottom:12px;transform:none;width:36px;height:36px;}
  .lightbox-prev{left:18px;}.lightbox-next{right:18px;}
  .lightbox-close{top:12px;right:14px;}
  .lightbox-count{bottom:22px;}
}


/* V32 — Editorial alignment and typography.
   Keep every top-level page on the same shared horizontal measure and
   match header title weights (including PLAY) without making text heavier. */
.hero--minimal,
.interior.play-page,
.interior.about-page-v29,
.interior:not(.play-page):not(.about-page-v29) {
  padding-top:clamp(52px,5.8vw,94px);
}
.interior.play-page > .eyebrow,
.interior.about-page-v29 > .about-eyebrow,
.interior:not(.play-page):not(.about-page-v29) > .eyebrow,
.hero--minimal > .eyebrow {
  margin:0 0 18px;
}
/* All top-level interior page titles share one scale, leading and weight.
   The deliberate compact heading size on ABOUT is retained across pages. */
.interior.play-page > .page-title,
.interior.about-page-v29 > .page-title,
.interior:not(.play-page):not(.about-page-v29) > .page-title {
  font-family:var(--oc-font);
  font-size:clamp(38px,3.6vw,58px);
  font-weight:500;
  letter-spacing:.002em;
  line-height:1.12;
  margin:0 0 clamp(44px,4.4vw,68px);
}
/* Clear the redundant WORK taglines, while retaining an editorial rule
   above the grid and the original cover/card layout. */
.hero--minimal {padding-bottom:clamp(55px,7vw,110px);}
.hero--minimal .hero-role {margin-bottom:0;}
.work-gallery-divider {
  border-top:1px solid var(--line);
  margin-bottom:clamp(20px,2.1vw,32px);
}
@media (max-width:700px) {
  .hero--minimal,
  .interior.play-page,
  .interior.about-page-v29,
  .interior:not(.play-page):not(.about-page-v29) {
    padding-top:clamp(36px,7vw,55px);
  }
  .interior.play-page > .page-title,
  .interior.about-page-v29 > .page-title,
  .interior:not(.play-page):not(.about-page-v29) > .page-title {
    font-size:clamp(36px,8vw,42px);
    margin-bottom:32px;
  }
  .hero--minimal {padding-bottom:48px;}
}


/* V33 — aligned editorial headers, quieter image interaction and ABOUT polish.
   The BACK TO WORK link remains in its original position. */
@media (min-width:701px) {
  /* On WORK, the name follows the eyebrow. On project pages, the title's
     top is matched to that same line without moving the return link. */
  .project-detail .detail-head {
    padding-top:calc(clamp(52px, 5.8vw, 94px) - 15px);
  }
}
@media (max-width:700px) {
  .project-detail .detail-head {
    padding-top:calc(clamp(36px, 7vw, 55px) - 7px);
  }
}
/* The secondary film heading uses the same scale as the introductory
   'Neon Dynasty | Cinematic Trailer' line rather than a small caption. */
.project-detail .detail-film-secondary .detail-film-label {
  font-family:var(--oc-font);
  font-size:clamp(19px, 1.85vw, 27px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 18px;
}
@media(max-width:760px) {
  .project-detail .detail-film-secondary .detail-film-label {
    font-size:clamp(14px,3.7vw,19px);
    letter-spacing:.015em;
    margin-bottom:12px;
  }
}
/* Detail stills remain clickable to open the large lightbox; the zoom-in
   cursor is replaced by a light fade and very restrained image scale. */
.project-detail .detail-still-open {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
}
.project-detail .detail-still-open img {
  transition:transform .42s ease;
  transform:scale(1);
}
.project-detail .detail-still-open::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  pointer-events:none;
  background:rgba(234,236,232,.16);
  transition:opacity .35s ease;
}
@media (hover:hover) {
  .project-detail .detail-still-open:hover img,
  .project-detail .detail-still-open:focus-visible img {transform:scale(1.028);}
  .project-detail .detail-still-open:hover::after,
  .project-detail .detail-still-open:focus-visible::after {opacity:1;}
}
@media (prefers-reduced-motion:reduce) {
  .project-detail .detail-still-open img,
  .project-detail .detail-still-open::after {transition:none;}
  .project-detail .detail-still-open:hover img {transform:none;}
}
/* ABOUT carousel: no visible scrollbar / track; preserve touch, wheel and
   keyboard horizontal scrolling and the same click-to-project behavior. */
.about-page-v29 .about-work-rail {
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:0;
}
.about-page-v29 .about-work-rail::-webkit-scrollbar {
  width:0;
  height:0;
  display:none;
}


/* V34 — Minimal, borderless image viewer controls. The same accessible
   buttons retain keyboard navigation and generously sized touch targets. */
.image-lightbox .lightbox-close,
.image-lightbox .lightbox-prev,
.image-lightbox .lightbox-next {
  width:48px;
  height:48px;
  padding:10px;
  border:0;
  border-radius:0;
  outline-offset:3px;
  background:transparent;
  color:#f7f7f7;
  box-shadow:none;
  opacity:.8;
  transition:opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.image-lightbox .lightbox-close:hover,
.image-lightbox .lightbox-prev:hover,
.image-lightbox .lightbox-next:hover {
  background:transparent;
  opacity:1;
}
.image-lightbox .lightbox-close svg,
.image-lightbox .lightbox-prev svg,
.image-lightbox .lightbox-next svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.image-lightbox .lightbox-close {right:22px;top:20px;}
.image-lightbox .lightbox-prev {left:16px;top:50%;transform:translateY(-50%);}
.image-lightbox .lightbox-next {right:16px;top:50%;transform:translateY(-50%);}
@media(max-width:700px) {
  .image-lightbox .lightbox-close{top:9px;right:11px;}
  .image-lightbox .lightbox-prev {left:12px;top:auto;bottom:7px;transform:none;}
  .image-lightbox .lightbox-next{right:12px;top:auto;bottom:7px;transform:none;}
  .image-lightbox .lightbox-count{bottom:22px;}
}
@media(prefers-reduced-motion:reduce){
  .image-lightbox .lightbox-close,
  .image-lightbox .lightbox-prev,
  .image-lightbox .lightbox-next{transition:none;}
}


/* V35 — Smaller close icon than navigation arrows, and fill the final two-image row in cinematic galleries. */
@media (min-width:1051px){
  .project-detail .detail-stills--rhythm > .detail-still:nth-last-child(2):nth-child(5n+1),
  .project-detail .detail-stills--rhythm > .detail-still:last-child:nth-child(5n+2){grid-column:span 3;}
}
.image-lightbox .lightbox-close{width:38px;height:38px;padding:7px;}
@media(max-width:700px){.image-lightbox .lightbox-close{width:32px;height:32px;padding:6px;}}


/* V39 — Precisely packed cinematic image rows. 3 / 2 rhythm with no empty
   grid tracks in the final row, including galleries with 8 or 17 stills. */
@media(min-width:901px){
 .project-detail .detail-stills--adaptive {
   display:grid;
   grid-template-columns:repeat(6,minmax(0,1fr));
   gap:clamp(10px,.9vw,16px);
 }
 .project-detail .detail-stills--adaptive > .detail-still--third{grid-column:span 2;}
 .project-detail .detail-stills--adaptive > .detail-still--half{grid-column:span 3;}
 .project-detail .detail-stills--adaptive > .detail-still--full{grid-column:span 6;}
}
@media (min-width:681px) and (max-width:900px){
 .project-detail .detail-stills--adaptive {
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:12px;
 }
 .project-detail .detail-stills--adaptive > .detail-still:last-child:nth-child(odd){grid-column:span 2;}
}
@media(max-width:680px){
 .project-detail .detail-stills--adaptive{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
}
/* Destiny stills are native 16:9. Display at their true aspect ratio,
   filling each cell edge-to-edge, just like the Kamigawa gallery.
   The 40:17 rule belongs only to ultrawide projects such as Neverwinter. */
.project-detail .detail-stills--adaptive .detail-still img {
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  object-fit:cover;
}
/* A quiet STASH credit integrated with the project, not a separate page. */
.project-detail .detail-feature {
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;margin:22px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.project-detail .detail-feature-label {
  font:600 10px/1.5 var(--oc-font,Arial,sans-serif);
  letter-spacing:.135em;color:var(--muted);
}
.project-detail .detail-feature-link {
  font:500 12px/1.5 var(--oc-font,Arial,sans-serif);
  color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.project-detail .detail-feature-link:hover,.project-detail .detail-feature-link:focus-visible{border-color:currentColor;}
@media(max-width:700px){
 .project-detail .detail-feature{padding:13px 0;margin:18px 0 22px;}
 .project-detail .detail-feature-label{font-size:9px;}
 .project-detail .detail-feature-link{font-size:11px;}
}

/* V44 — VALORANT stills are 1920 × 815 ultra-wides. Preserve their original
   ratio and fill the 2/3-column grid edge to edge without frames or letterboxing. */
.project-detail .detail-stills--adaptive.detail-stills--wide .detail-still img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1920 / 815;
  object-fit:cover;
}


/* V45 — Consistent top-level title system. Headline first, descriptor below.
   The headings all use the same Plus Jakarta Sans size, weight and baseline.
   Retain the historical vertical anchor of the title and each page's content spacing. */
.hero--minimal,
.interior.play-page,
.interior.about-page-v29,
.interior:not(.play-page):not(.about-page-v29) {
  padding-top:calc(clamp(52px, 5.8vw, 94px) + 34px);
}
.hero--minimal > .hero-title,
.interior.play-page > .page-title,
.interior.about-page-v29 > .page-title,
.interior:not(.play-page):not(.about-page-v29) > .page-title {
  font-family:var(--oc-font);
  font-size:clamp(38px, 3.6vw, 58px);
  font-weight:500;
  letter-spacing:.002em;
  line-height:1.12;
  margin:0 0 12px;
}
/* Same discreet microtype on all pages, now under the primary heading. */
.hero--minimal > .eyebrow,
.interior.play-page > .eyebrow,
.interior.about-page-v29 > .about-eyebrow,
.interior:not(.play-page):not(.about-page-v29) > .eyebrow {
  font-family:var(--oc-font);
  font-size:10px;
  font-weight:500;
  letter-spacing:.085em;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 clamp(44px, 4.4vw, 68px);
}
/* On WORK, the surrounding hero already creates the gallery separation. */
.hero--minimal > .eyebrow { margin-bottom:0; }
@media(max-width:700px) {
  .hero--minimal,
  .interior.play-page,
  .interior.about-page-v29,
  .interior:not(.play-page):not(.about-page-v29) {
    padding-top:calc(clamp(36px, 7vw, 55px) + 34px);
  }
  .hero--minimal > .hero-title,
  .interior.play-page > .page-title,
  .interior.about-page-v29 > .page-title,
  .interior:not(.play-page):not(.about-page-v29) > .page-title {
    font-size:clamp(36px, 8vw, 42px);
    margin-bottom:10px;
  }
  .hero--minimal > .eyebrow,
  .interior.play-page > .eyebrow,
  .interior.about-page-v29 > .about-eyebrow,
  .interior:not(.play-page):not(.about-page-v29) > .eyebrow {
    margin-bottom:32px;
  }
  .hero--minimal > .eyebrow {margin-bottom:0;}
}

/* V47 — Destiny 2: Renegades, two editorial film captions before their respective players. */
.project-detail .detail-film--compact .detail-film-label {
  font-family:var(--oc-font,Arial,sans-serif);
  font-size:clamp(14px,1.25vw,17px);
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  letter-spacing:.012em;
  margin:0 0 14px;
}
@media(max-width:760px){
  .project-detail .detail-film--compact .detail-film-label {font-size:14px;margin-bottom:10px;}
}

/* V49 — Multiple studios in the same credited column, without changing spacing around the film. */
.project-detail .detail-overview .detail-field:last-child dd{white-space:pre-line;}

/* V52 — Restrained identity in the header and a single editorial rhythm
   shared by the four top-level pages. Keep navigation left of center. */
.header {gap:clamp(26px,3.1vw,46px);}
.header .signature {
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  min-width:0;
  line-height:1;
}
.header .signature-name {
  display:block;
  font-family:var(--oc-font,Arial,sans-serif);
  font-weight:500;
  font-size:11px;
  letter-spacing:.095em;
  line-height:1.2;
  color:var(--ink);
  white-space:nowrap;
}
.header .nav {margin-left:0;}
.header .header-socials {margin-left:auto;}

/* Same top offset, heading scale, eyebrow spacing and section rule everywhere. */
.hero--minimal,
.interior.play-page,
.interior.about-page-v29,
.interior.contact-page {
  padding-top:calc(clamp(52px,5.8vw,94px) + 34px);
}
.hero--minimal {padding-bottom:0;}
.hero--minimal > .eyebrow,
.interior.play-page > .eyebrow,
.interior.about-page-v29 > .about-eyebrow,
.interior.contact-page > .eyebrow {
  margin-bottom:0;
}
.work-gallery-divider,
.top-level-divider {
  display:block;
  height:0;
  border:0;
  border-top:1px solid var(--line);
  padding:0;
  margin:clamp(70px,6vw,90px) 0 clamp(20px,2.1vw,32px);
}
/* Contact starts on the same rhythm line as the media and biography. */
.contact-page .contact-main {padding-top:0;}

@media(max-width:1020px) and (min-width:761px) {
  .header {gap:clamp(16px,2.3vw,27px);}
  .header .signature {gap:8px;}
  .header .signature-name {font-size:10px;letter-spacing:.075em;}
  .header .nav {gap:clamp(13px,1.7vw,19px);}
}
@media(max-width:760px) {
  .header {justify-content:space-between;gap:12px;}
  .header .signature {gap:9px;}
  .header .signature-name {font-size:10px;letter-spacing:.075em;}
  .hero--minimal,
  .interior.play-page,
  .interior.about-page-v29,
  .interior.contact-page {
    padding-top:calc(clamp(36px,7vw,55px) + 34px);
  }
  .hero--minimal {padding-bottom:0;}
  .work-gallery-divider,
  .top-level-divider {
    margin:clamp(45px,9vw,62px) 0 21px;
  }
}

/* V53 — 17 Mars: link to the original studio presentation until a standalone video URL is provided. */
.project-detail .detail-video-external { display:block;position:relative;overflow:hidden;text-decoration:none;isolation:isolate; }
.project-detail .detail-video-external img { width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.72;transition:transform .4s ease,opacity .3s ease; }
.project-detail .detail-video-external::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65));pointer-events:none;}
.project-detail .detail-video-external span { position:absolute;z-index:1;bottom:24px;left:26px;color:white;font-size:12px;letter-spacing:.11em;font-weight:600;}
.project-detail .detail-video-external:hover img {transform:scale(1.025);opacity:1;}


/* V54 — Recent work first, balanced last rows, and consistent editorial spacing. */
/* Brand stays recognizable via its original logo; navigation is offset a little,
   but deliberately remains on the left side rather than dead-centred. */
@media(min-width:761px){
  .header .signature{gap:0;}
  .header .nav{margin-left:clamp(35px,5.5vw,94px);}
}
@media(max-width:1020px) and (min-width:761px){
  .header .nav{margin-left:clamp(18px,2.4vw,38px);}
}
/* Match the white space above the headline block to the white space below
   its subtitle, so the title + subtitle is vertically centred between rules. */
:root{--section-heading-space:clamp(62px,7vw,110px);}
.hero--minimal,
.interior.play-page,
.interior.about-page-v29,
.interior.contact-page{padding-top:var(--section-heading-space);}
.work-gallery-divider,
.top-level-divider{margin-top:var(--section-heading-space);}
@media(max-width:760px){
  :root{--section-heading-space:clamp(46px,8vw,66px);}
  .hero--minimal,
  .interior.play-page,
  .interior.about-page-v29,
  .interior.contact-page{padding-top:var(--section-heading-space);}
  .work-gallery-divider,
  .top-level-divider{margin-top:var(--section-heading-space);}
}
/* Desktop rows are an explicit 6-track grid to permit either 3 equal cards
   or 2 equal cards per row with no blank cells. */
@media(min-width:1101px){
  .projects-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .projects-grid>.project-card{grid-column:span 2;}
  .projects-grid>.project-card--pair{grid-column:span 3;}
}
/* 2-column breakpoint: an odd final item fills the whole width. */
@media(min-width:701px) and (max-width:1100px){
  .projects-grid>.project-card:last-child:nth-child(odd){grid-column:span 2;}
}
@media(max-width:700px){
  .projects-grid>.project-card{grid-column:auto;}
}


/* V55 — Restore a discreet signature beside the emblem.
   Desktop uses three balanced tracks: name to the left, main navigation
   centred between brand and social links (rather than beside the logo).
   Mobile retains the existing collapsible menu. */
@media(min-width:761px){
  .header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:clamp(16px,2.7vw,40px);
  }
  .header .signature{justify-self:start;gap:12px;}
  .header .nav{justify-self:center;margin-left:0;}
  .header .header-socials{justify-self:end;margin-left:0;}
}
@media(max-width:1020px) and (min-width:761px){
  .header{column-gap:clamp(10px,1.5vw,18px);}
  .header .signature{gap:9px;}
  .header .nav{margin-left:0;gap:clamp(12px,1.6vw,20px);}
  .header .header-socials{gap:4px;}
}
@media(max-width:760px){
  .header{display:flex;}
  .header .signature{gap:9px;}
  .header .signature-name{font-size:10px;letter-spacing:.075em;}
}

/* V55 — CONTACT correction.
   The generic V45 selector with :not() was more specific than the V52/V54
   contact rules and silently added an extra 34px above and 44-68px below
   its heading block. Use an equally specific contact selector to match
   the other three pages in vertical position and section-divider rhythm. */
.interior.contact-page:not(.play-page):not(.about-page-v29){
  padding-top:var(--section-heading-space);
}
.interior.contact-page:not(.play-page):not(.about-page-v29) > .page-title{
  font-size:clamp(38px,3.6vw,58px);
  font-weight:500;
  letter-spacing:.002em;
  line-height:1.12;
  margin:0 0 12px;
}
.interior.contact-page:not(.play-page):not(.about-page-v29) > .eyebrow{
  margin:0;
}
@media(max-width:760px){
  .interior.contact-page:not(.play-page):not(.about-page-v29) > .page-title{
    font-size:clamp(36px,8vw,42px);
    margin-bottom:10px;
  }
}


/* V56 — Portfolio WORK: alternating two- and three-up rows, oldest to newest. */
@media(min-width:1101px){
  .projects-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
  .projects-grid>.project-card--half{grid-column:span 3;}
  .projects-grid>.project-card--third{grid-column:span 2;}
}
@media(min-width:701px) and (max-width:1100px){
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .projects-grid>.project-card{grid-column:auto;}
  .projects-grid>.project-card:last-child:nth-child(odd){grid-column:span 2;}
}
@media(max-width:700px){
  .projects-grid{grid-template-columns:1fr;}
  .projects-grid>.project-card{grid-column:auto;}
}

/* V57 — Stable horizontal alignment across WORK, PLAY, ABOUT and CONTACT.
   CONTACT can be shorter than the viewport; reserve the scrollbar gutter
   even when it doesn't need scrolling, so the header and grid don't shift. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}


/* V59 TEST — Panoramic work covers in alternating 2 / 3 / 2 / 3 / 3 rows.
   13 projects: every desktop row is complete, with no placeholder cell.
   Keep the existing order, content, and mobile behavior of V58. */
@media (min-width:1101px){
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:clamp(14px,1.55vw,22px);
    row-gap:clamp(14px,1.55vw,22px);
  }
  .projects-grid > .project-card,
  .projects-grid > .project-card--half,
  .projects-grid > .project-card--third{
    grid-column:span 2;
  }
  .projects-grid > .project-card--half{grid-column:span 3;}
  .projects-grid > .project-card--third{grid-column:span 2;}
  .projects-grid > .project-card .cover{aspect-ratio:1.9 / 1;}
}
@media (min-width:701px) and (max-width:1100px){
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(14px,1.55vw,22px);
    row-gap:clamp(14px,1.55vw,22px);
  }
  .projects-grid > .project-card,
  .projects-grid > .project-card--half,
  .projects-grid > .project-card--third{
    grid-column:span 1;
  }
  .projects-grid > .project-card:last-child:nth-child(odd){grid-column:1 / -1;}
  .projects-grid > .project-card .cover{aspect-ratio:1.9 / 1;}
  .projects-grid > .project-card:last-child:nth-child(odd) .cover{aspect-ratio:3.9 / 1;}
}
@media (max-width:700px){
  .projects-grid{grid-template-columns:1fr;}
  .projects-grid > .project-card,
  .projects-grid > .project-card--half,
  .projects-grid > .project-card--third{grid-column:auto;}
  .projects-grid > .project-card .cover{aspect-ratio:16 / 9;}
}


/* V60 TEST — remove top-level page titles and tighten the space below the header.
   Keep only the discreet small descriptors, and remove the extra divider on these pages. */
.hero--minimal.hero--notitle,
.interior.play-page.page-no-title,
.interior.about-page-v29.page-no-title,
.interior.contact-page.page-no-title,
.interior.contact-page.page-no-title:not(.play-page):not(.about-page-v29){
  padding-top:clamp(24px,2.7vw,36px);
}
.hero--minimal.hero--notitle{padding-bottom:0;}
.hero--minimal.hero--notitle > .eyebrow,
.interior.play-page.page-no-title > .eyebrow,
.interior.about-page-v29.page-no-title > .about-eyebrow,
.interior.contact-page.page-no-title > .eyebrow,
.interior.contact-page.page-no-title:not(.play-page):not(.about-page-v29) > .eyebrow{
  margin:0 0 clamp(14px,1.8vw,22px);
}
.hero--minimal.hero--notitle .work-gallery-divider,
.page-no-title .top-level-divider{display:none !important;}
.page-no-title .contact-main{padding-top:0;}
.page-no-title .about-intro{margin-top:0;}
@media(max-width:760px){
  .hero--minimal.hero--notitle,
  .interior.play-page.page-no-title,
  .interior.about-page-v29.page-no-title,
  .interior.contact-page.page-no-title,
  .interior.contact-page.page-no-title:not(.play-page):not(.about-page-v29){
    padding-top:20px;
  }
  .hero--minimal.hero--notitle > .eyebrow,
  .interior.play-page.page-no-title > .eyebrow,
  .interior.about-page-v29.page-no-title > .about-eyebrow,
  .interior.contact-page.page-no-title > .eyebrow,
  .interior.contact-page.page-no-title:not(.play-page):not(.about-page-v29) > .eyebrow{
    margin-bottom:14px;
  }
}