:root {
 --blue:#899AAB;
 --blue-ink:#516985;
 --blue-soft:#adbcc3;
 --blue-mist:#cbcfd9;
 --paper:#f8f3ec;
 --paper-mid:#e0d7bb;
 --neutral:#d4d6d1;
 --brown:#4D3329;
 --ink:#2c2521;
 --display:"Barlow Condensed","Roboto Condensed",Impact,"Arial Narrow",sans-serif;
 --sans:"DM Sans",Arial,sans-serif;
 --serif:Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
.hero{position:relative;min-height:0;height:calc(100vw / 2.075);max-height:none;overflow:hidden;background:#6e736c;color:var(--paper);isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-4;background-image:url('assets/sea-sunset.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;transform:scale(1.015);transition:transform 1.1s cubic-bezier(.16,.7,.25,1);filter:saturate(.77) sepia(.08) contrast(.96)}
.hero:hover .hero-photo{transform:scale(1.035)}
.hero-filter{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(48,68,88,.19) 0%,rgba(60,83,102,.09) 33%,rgba(72,92,108,.07) 61%,rgba(48,61,80,.14) 100%),rgba(48,64,80,.07);mix-blend-mode:normal}
.vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(26,31,35,.16),transparent 25%,transparent 70%,rgba(33,37,40,.1))}
.site-header{position:absolute;top:4.1%;left:2.6%;right:2.7%;display:flex;justify-content:space-between;align-items:flex-start;z-index:6;gap:3vw}
.wordmark{display:block;width:24%;min-width:210px;color:var(--blue-mist);text-align:left;transition:color .3s ease,transform .4s ease;line-height:.69}
.wordmark:hover{color:var(--paper);transform:translateY(-2px)}
.wordmark-name{display:block;font-size:clamp(60px,7.4vw,150px);line-height:.69;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.055em;transform:scaleX(1.3) skewX(-7deg);transform-origin:left center;color:transparent;-webkit-text-stroke:1.25px var(--blue-mist);paint-order:stroke fill;text-shadow:none}
.wordmark-bottom{font:700 11px/1.2 var(--sans);letter-spacing:1.75em;display:block;margin-top:14px;padding-left:4px;white-space:nowrap;color:var(--blue-mist)}
.nav{display:flex;gap:clamp(1rem,3.5vw,4.3rem);justify-content:flex-end;align-items:center;padding-top:clamp(7px,1.6vw,23px);font-family:var(--display);font-size:clamp(19px,1.8vw,30px);font-weight:800;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--blue-mist)}
.nav a{position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:.09em;padding:.08em 0;transition:transform .2s,color .2s,text-shadow .2s}
.nav a:hover,.nav a:focus-visible{color:var(--paper);transform:translateY(-4px) scale(1.05);text-shadow:0 0 12px rgba(210,220,223,.8)}
.nav-bracket{font-weight:700}
.decor{position:absolute;z-index:2;pointer-events:none;bottom:4.3%;height:min(54vh,560px);width:28%;transform-origin:bottom center;opacity:.92;filter:drop-shadow(0 0 2px rgba(188,210,226,.55)) drop-shadow(0 0 12px rgba(154,184,203,.25));transition:transform .7s cubic-bezier(.25,.6,.2,1)}
.decor img{width:100%;height:100%;object-fit:contain}
.decor-left{left:1.8%}
.decor-right{right:.7%;height:min(60vh,640px);bottom:4.1%;width:29%}
.hero:hover .decor-left{transform:translateX(-6px)}
.hero:hover .decor-right{transform:translateX(6px)}
.headline-wrap{position:absolute;top:72.5%;left:50%;width:min(92%,1050px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:4;text-align:center}
.headline{font-family:var(--display);font-size:clamp(38px,3.55vw,66px);font-weight:900;line-height:.96;margin:0 0 28px;letter-spacing:.005em;white-space:nowrap;text-shadow:0 2px 20px rgba(25,29,29,.3)}
.learn-more{display:block;font-family:var(--display);font-size:clamp(18px,1.7vw,29px);font-weight:800;letter-spacing:.005em;transition:transform .25s ease,color .25s ease,text-shadow .3s ease}
.learn-more span{display:inline-block;transition:transform .25s ease}
.learn-more:hover{color:var(--blue-mist);transform:scale(1.05);text-shadow:0 0 13px rgba(237,239,240,.6)}
.learn-more:hover span{transform:translateX(2px)}
.sound-toggle{position:absolute;top:27%;right:3.5%;width:clamp(95px,10vw,167px);height:clamp(95px,10vw,167px);border:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#edf0ef,#c9d3d8 66%,#acbdcb);color:var(--brown);display:grid;place-items:center;z-index:7;box-shadow:0 0 0 13px rgba(207,216,219,.11),0 0 36px rgba(192,212,231,.26);transition:transform .4s cubic-bezier(.18,.7,.15,1),box-shadow .4s,background .4s}
.sound-toggle:hover{transform:scale(1.08) rotate(9deg);box-shadow:0 0 0 18px rgba(207,216,219,.11),0 0 42px rgba(192,212,231,.45)}
.sound-toggle-label{font:700 clamp(15px,1.3vw,21px)/.95 var(--display);letter-spacing:.1em;display:flex;align-items:center;gap:4px;flex-direction:column;transform:rotate(16deg)}
.music-icon{font:42px/1 Georgia,serif}
.credit{position:absolute;bottom:12px;left:25px;font-size:9px;letter-spacing:.08em;opacity:.47;color:var(--paper)}
.replay{position:absolute;right:24px;bottom:14px;border:1px solid rgba(233,241,245,.55);border-radius:1px;background:rgba(30,50,66,.28);color:var(--paper);font:600 10px/1.1 var(--sans);letter-spacing:.13em;padding:10px 12px;z-index:7;transition:background .2s}
.replay:hover{background:var(--blue-ink)}.replay span{font-size:16px;vertical-align:middle;margin-right:5px}
.intro-curtain{position:fixed;inset:0;z-index:30;pointer-events:none;background:var(--blue);will-change:mask-image,-webkit-mask-image;transition:opacity .05s}
.intro-curtain.is-done{display:none}
.content,.services,.ending{position:relative;min-height:720px;padding:105px 7vw;background:var(--paper)}
.section-side{font:700 13px/1.2 var(--sans);letter-spacing:.15em;display:flex;gap:15px;color:var(--blue-ink);align-items:center}
.side-star{font-size:22px}
.content{display:flex;gap:12vw;align-items:flex-start;overflow:hidden}
.content .section-side{min-width:20%}
.content-main{max-width:920px}
.text-eyebrow,.service-intro{font:700 14px/1.4 var(--sans);letter-spacing:.15em;color:var(--blue-ink)}
.content-main h1,.ending h2{font:600 clamp(62px,8vw,140px)/.92 var(--serif);margin:38px 0;color:var(--brown);letter-spacing:-.065em}
.content-main h1 em,.ending h2 em{font-weight:400;color:var(--blue-ink)}
.content-main p{max-width:620px;font-size:clamp(17px,1.55vw,25px);line-height:1.6}
.small-link{display:inline-block;margin-top:26px;font-family:var(--display);font-size:22px;font-weight:800;color:var(--blue-ink);transition:letter-spacing .2s}
.small-link:hover{letter-spacing:.08em}
.content-star{position:absolute;bottom:12%;right:-5%;font-size:260px;color:rgba(137,154,171,.15)}
.services{background:var(--blue-mist);display:grid;grid-template-columns:30% 70%;align-content:start;min-height:800px}
.service-intro{grid-column:2;margin:0 0 70px}
.service-list{grid-column:2}
.service-list>div{display:grid;grid-template-columns:65px 1fr 35px;align-items:center;gap:28px;border-bottom:1px solid rgba(77,51,41,.4);padding:22px 8px;transition:background .25s,color .25s,padding-left .25s}
.service-list>div:hover{background:var(--blue-ink);color:var(--paper);padding-left:24px}
.service-list strong{font:800 clamp(36px,5vw,80px)/1.08 var(--display)}
.ending{background:var(--brown);color:var(--paper);text-align:center;min-height:660px}
.ending-line{font:700 13px var(--sans);letter-spacing:.5em}
.ending-line span{letter-spacing:0;margin:0 15px}
.ending h2{color:var(--paper);margin:60px 0}
.ending h2 em{color:var(--blue-mist)}
.ending-contact{font:800 24px var(--display);border-bottom:1px solid var(--paper)}
.ending>p{font-size:12px;max-width:530px;margin:85px auto 0;line-height:1.6;opacity:.55}
@media(min-width:1700px){.headline-wrap{top:75%}}
@media(max-width:900px){
 .hero{height:100svh;max-height:none;min-height:700px}
 .site-header{top:26px;left:24px;right:24px;flex-direction:column;gap:36px}
 .wordmark{min-width:0;width:260px}.wordmark-name{font-size:80px}.wordmark-bottom{letter-spacing:1.15em;font-size:8px}
 .nav{justify-content:space-between;gap:10px;width:100%;font-size:clamp(17px,3.2vw,25px);padding:0}
 .sound-toggle{top:34%;right:5%;width:100px;height:100px}
 .decor{bottom:13%;height:33vh;width:40%}.decor-right{bottom:11%;height:35vh;width:42%}
 .headline-wrap{top:76%}.headline{font-size:clamp(30px,5vw,48px)}
 .content{display:block}.content-main{padding-top:60px}.services{display:block}.service-intro{margin:60px 0}.service-list>div{grid-template-columns:50px 1fr 25px}.service-list strong{font-size:clamp(30px,7vw,70px)}
}
@media(max-width:550px){
 .hero{min-height:620px}.hero-photo{background-position:47% center;filter:saturate(.68) contrast(.95)}
 .site-header{top:24px;left:18px;right:18px;gap:36px}.wordmark{width:200px}.wordmark-name{font-size:62px}.wordmark-bottom{font-size:7px;letter-spacing:1em;margin-top:8px}
 .nav{gap:7px;font-size:13px;line-height:1.2;flex-wrap:wrap;justify-content:space-between}
 .sound-toggle{top:28%;right:7%;width:84px;height:84px}.sound-toggle-label{font-size:13px}.music-icon{font-size:30px}
 .decor-left{width:57%;height:36vh;bottom:10%;left:-11%}.decor-right{width:57%;height:40vh;bottom:11%;right:-14%}
 .headline-wrap{top:73%;width:96%}.headline{white-space:normal;max-width:340px;font-size:clamp(37px,9vw,52px);line-height:.9;margin-bottom:15px}.learn-more{font-size:22px}
 .replay{font-size:8px;bottom:10px;right:10px;padding:8px}.credit{font-size:7px;bottom:11px;left:12px;max-width:200px}
 .content,.services,.ending{padding:80px 24px;min-height:530px}.content-main h1,.ending h2{font-size:clamp(54px,13vw,88px)}.service-list>div{gap:8px;padding:14px 0}.service-list strong{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* The subsequent sections follow Anima's actual homepage composition, rather than the earlier editorial prototype. */
.anima-about{background:#fff;min-height:740px;display:grid;grid-template-columns:1fr 1fr;gap:12vw;padding:75px 9vw 100px;align-items:center;color:var(--brown)}
.about-tv{height:min(43vw,570px);max-height:570px;aspect-ratio:1/1;overflow:hidden;align-self:center}
.about-tv img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .6s ease}
.about-tv:hover img{transform:scale(1.035)}
.about-copy{position:relative;min-height:580px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:2rem}
.about-copy .huge-a{position:absolute;top:-175px;left:-20px;color:var(--brown);font:900 400px/1 var(--display);letter-spacing:-.08em;z-index:0;opacity:.94}
.about-copy p{max-width:550px;font:clamp(22px,2.08vw,34px)/1.5 var(--serif);margin:0 0 32px;z-index:1;position:relative}
.learn-inline{font:900 28px/1 var(--display);letter-spacing:.015em;transition:transform .25s;color:var(--brown);z-index:1}
.learn-inline:hover{transform:translateX(8px)}
.anima-roster{background:var(--blue-mist);padding:100px 2.5vw 90px;min-height:950px;color:var(--brown)}
.roster-kicker{text-align:center;font:26px/1 var(--serif);text-transform:uppercase}
.roster-flourish{display:block;width:270px;max-width:70vw;height:65px;margin:12px auto 70px;fill:none;stroke:var(--brown);stroke-width:1.1;stroke-linecap:round}
.anima-roster h2{font:clamp(35px,4.7vw,75px)/1.2 var(--serif);letter-spacing:-.02em;font-weight:400;margin:0 0 75px}
.anima-roster h2 strong{font:900 .95em/1.1 var(--display);letter-spacing:-.025em}
.artists{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2vw}
.artist{min-width:0;display:flex;flex-direction:column;gap:6px;color:var(--brown);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.artist:hover{transform:translateY(-13px)}
.artist img{width:100%;height:clamp(260px,27vw,450px);object-fit:cover;filter:saturate(.8)}
.artist span{font:clamp(25px,2vw,34px)/1 var(--serif);margin-top:26px}
.artist small{font:500 clamp(11px,1.25vw,17px)/1.2 var(--sans);letter-spacing:.075em}
.press{padding:100px 4vw 110px;text-align:center;background:#fff;color:var(--brown)}
.press>p{font:clamp(26px,3.2vw,54px)/1.3 var(--serif);margin:0 auto 100px}
.press>p span{font:900 clamp(16px,1.7vw,25px)/1 var(--display);vertical-align:middle}
.press-logos{display:flex;justify-content:space-between;align-items:center;gap:3vw;max-width:1450px;margin:auto}
.press-logos strong{font:900 clamp(15px,2vw,36px)/1 var(--display)}
.press-logos i{font:italic clamp(18px,2.3vw,39px)/1 var(--serif)}
.anima-footer{position:relative;padding:110px 5vw 50px;min-height:740px;text-align:center;background:linear-gradient(rgba(52,40,32,.75),rgba(42,35,28,.91)),url('assets/sea-sunset.jpg') center 75% /cover;color:var(--paper)}
.footer-mark{display:block;font:900 230px/.8 var(--display);letter-spacing:-.08em;color:var(--paper)}
.footer-detail{font:19px/1.5 var(--serif);margin:25px auto}
.footer-detail h2{font:600 24px/1.4 var(--serif);text-decoration:underline;font-weight:normal;margin-top:42px}
.footer-detail p{margin:6px auto}
.footer-detail a{border-bottom:1px dotted var(--paper)}
.footer-study{font-size:10px;letter-spacing:.1em;opacity:.5;position:absolute;bottom:22px;left:30px}
@media(max-width:900px){
 .anima-about{min-height:650px;gap:5vw;padding:75px 5vw}.about-copy{min-height:500px}.about-copy .huge-a{font-size:280px;top:-90px}.about-copy p{font-size:clamp(21px,2.3vw,27px)}
 .anima-roster h2{font-size:clamp(33px,4vw,48px)}.artist img{height:29vw}.artist span{font-size:20px}
}
@media(max-width:550px){
 .anima-about{display:block;padding:45px 6vw 80px;min-height:auto}.about-tv{width:100%;height:auto;max-height:none;aspect-ratio:1/1}.about-copy{min-height:390px;padding-top:115px}.about-copy .huge-a{font-size:220px;left:0;top:4px}.about-copy p{font-size:22px;line-height:1.45;margin-top:30px}
 .anima-roster{padding:76px 6vw 85px}.roster-flourish{margin-bottom:40px}.anima-roster h2{font-size:clamp(34px,9vw,50px);margin-bottom:35px}.artists{grid-template-columns:repeat(2, minmax(0,1fr));gap:25px 16px}.artist img{height:230px}.artist span{font-size:19px;margin-top:8px}.artist small{font-size:10px}
 .press{padding:70px 6vw}.press>p{margin-bottom:45px}.press-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 15px}.press-logos strong{font-size:22px}
 .anima-footer{padding:85px 5vw 80px;min-height:690px}.footer-mark{font-size:160px}.footer-study{max-width:280px;left:12px;font-size:8px}
}


/* Yan Lin portfolio content in the retained Anima-inspired visual layout. */
.hero-photo{background-position:center 31%;filter:saturate(.82) contrast(.96) brightness(.86);}
.hero-filter{background:linear-gradient(180deg,rgba(38,40,44,.32),transparent 28%,rgba(41,49,54,.04) 46%,rgba(21,30,39,.28) 100%)}
.wordmark{width:35%;min-width:300px}
.wordmark-name{font-style:normal;letter-spacing:-.08em;transform:scaleX(1.06) skewX(-5deg);font-size:clamp(57px,7.3vw,145px);white-space:nowrap}
.wordmark-bottom{font:700 10px/1.4 var(--sans);letter-spacing:.4em;margin-top:15px;padding-left:2px}
.nav{gap:clamp(12px,2.8vw,54px)}
.headline{font-size:clamp(40px,4.5vw,78px)}
.portfolio-seal{overflow:hidden}
.portfolio-seal .sound-toggle-label{transform:rotate(-14deg);letter-spacing:.04em}
.seal-arrow{font:50px/1 var(--serif);margin-top:-12px}
.credit{color:#f8f3ec;opacity:.75}
.about-work-image{background:var(--ink);position:relative}
.about-work-image img{object-fit:cover}
.about-image-note{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:rgba(20,22,25,.65);color:#f8f3ec;font:600 10px/1.2 var(--sans);letter-spacing:.18em}
.about-copy .huge-a{font-size:360px;top:-142px;left:-10px}
.about-copy p:not(.about-label){z-index:1}
.about-copy p em{font-style:italic;color:var(--blue-ink)}
.about-copy .about-label{font:800 11px/1.4 var(--sans);letter-spacing:.22em;margin:0 0 16px;z-index:2;color:var(--blue-ink)}
.about-meta{font:600 11px/1.4 var(--sans);letter-spacing:.12em;z-index:2;margin-bottom:27px}
.about-meta span{padding:0 7px;color:var(--blue-ink)}
.film-feature{background:var(--paper);padding:90px 5vw 120px;color:var(--brown)}
.film-overline{display:flex;justify-content:space-between;align-items:center;font:700 13px/1.5 var(--sans);letter-spacing:.18em;padding-bottom:20px;border-bottom:1px solid rgba(77,51,41,.38)}
.film-overline span{color:var(--blue-ink)}
.film-grid{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(0,1.3fr);gap:4vw;align-items:center;margin-top:65px}
.film-copy{padding:16px 0;max-width:580px}
.film-kicker{font:700 12px/1.2 var(--sans);letter-spacing:.2em;color:var(--blue-ink);margin-bottom:28px}
.film-copy h2{font:900 clamp(57px,6.1vw,111px)/.83 var(--display);letter-spacing:-.02em;margin:0 0 42px}
.film-copy h2 em{font:italic .7em var(--serif);font-weight:normal;letter-spacing:-.08em}
.film-description{font:clamp(17px,1.5vw,24px)/1.5 var(--serif);max-width:480px;margin:0 0 32px}
.film-role{font:500 14px/1.65 var(--sans);max-width:450px}
.film-role strong{font:900 15px/1.4 var(--display);letter-spacing:.08em;display:block;margin-bottom:5px}
.film-disclaimer{font:11px/1.45 var(--sans);opacity:.66;margin-top:18px}
.film-media{position:relative;aspect-ratio:16/10;background:#899AAB;overflow:hidden;box-shadow:0 8px 30px rgba(44,37,33,.13)}
.film-media video{width:100%;height:100%;object-fit:contain;background:#111;display:block}
.film-media video[hidden]{display:none}
.video-placeholder{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;color:var(--paper);background:radial-gradient(ellipse at 65% 42%,rgba(230,234,229,.5),transparent 43%),linear-gradient(143deg,#475e72 0%,#899aab 44%,#c9cdca 73%,#5d7180 100%)}
.video-placeholder::after{content:"";position:absolute;inset:16px;border:1px solid rgba(248,243,236,.5);pointer-events:none}
.video-rings{position:absolute;inset:-25%;border-radius:50%;border:1px solid rgba(248,243,236,.23);box-shadow:0 0 0 70px rgba(255,255,255,.032),0 0 0 145px rgba(255,255,255,.03),0 0 0 220px rgba(255,255,255,.026);transform:rotate(-12deg) scaleX(1.5)}
.video-super{position:absolute;top:35px;left:38px;z-index:1;font:700 11px/1.4 var(--sans);letter-spacing:.16em}
.video-play{font:80px/1 var(--serif);z-index:1;margin-bottom:3px}
.video-placeholder strong{font:900 clamp(27px,3vw,58px)/.95 var(--display);z-index:1;text-align:center;letter-spacing:.02em}
.video-placeholder small{font:600 12px/1.4 var(--sans);letter-spacing:.2em;z-index:1;margin-top:8px}
.video-bottom{position:absolute;bottom:35px;right:38px;font:700 9px/1 var(--sans);letter-spacing:.16em;z-index:1}
.video-bottom span{padding:0 8px}
.anima-roster{background:var(--blue-mist)}
.anima-roster h2{max-width:1420px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:65px 2.7vw}
.work-card{cursor:default}
.work-card .work-image{position:relative;overflow:hidden;background:var(--paper);aspect-ratio:1.25;display:flex;align-items:center;justify-content:center}
.work-card .work-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .6s ease,filter .5s ease}
.work-card:hover .work-image img{transform:scale(1.055);filter:saturate(1)}
.work-index{position:absolute;top:12px;left:12px;background:var(--paper);color:var(--brown);padding:8px 11px;font:900 20px/1 var(--display)}
.work-card>span{font-size:clamp(23px,2.1vw,36px);font-weight:400;margin-top:21px;line-height:1.05}
.work-card>small{font-size:11px;line-height:1.4;letter-spacing:.13em;font-weight:700;margin-top:4px}
.work-card>p{font:14px/1.55 var(--sans);margin:8px 0 0;max-width:390px}
.work-card>p b{font-weight:700}
.work-note{margin:80px 0 0;max-width:720px;font:12px/1.6 var(--sans);opacity:.76}
.specialisms .press-logos{flex-wrap:wrap;justify-content:center;gap:35px 5vw}
.specialisms .press-logos i{font:italic clamp(21px,2.3vw,38px)/1 var(--serif)}
.anima-footer{background:linear-gradient(rgba(36,36,38,.73),rgba(31,33,35,.91)),url('assets/sea-sunset.jpg') center 38% /cover}
.footer-mark{font-size:clamp(140px,17vw,260px);letter-spacing:-.06em}
.footer-detail{font-size:22px}
.footer-study{letter-spacing:.13em}
@media(max-width:1100px){
 .wordmark{min-width:250px}.wordmark-name{font-size:clamp(56px,6.5vw,90px)}
 .nav{font-size:clamp(17px,1.9vw,24px);gap:17px}
 .film-grid{grid-template-columns:1fr 1.05fr}
 .film-copy h2{font-size:clamp(52px,5.6vw,82px)}
}
@media(max-width:900px){
 .hero-photo{background-position:center 31%}
 .site-header{flex-direction:column}.wordmark{width:auto}.wordmark-name{font-size:84px}
 .film-feature{padding:70px 5vw}.film-grid{grid-template-columns:1fr;gap:35px}.film-copy{max-width:800px}.film-copy h2{font-size:70px}.film-media{aspect-ratio:16/9}
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 23px}
 .about-copy .huge-a{font-size:250px;top:-85px}
 .about-copy{padding-top:65px}
}
@media(max-width:550px){
 .hero-photo{background-position:center 32%}
 .wordmark{min-width:0}.wordmark-name{font-size:66px}.wordmark-bottom{font-size:8px;letter-spacing:.32em;margin-top:10px}
 .nav{gap:11px;font-size:14px}
 .headline{font-size:clamp(40px,11.2vw,57px);line-height:.95;white-space:normal;max-width:360px}
 .portfolio-seal{top:31%;right:6%}.seal-arrow{font-size:38px}
 .about-copy{min-height:auto;padding-top:140px;padding-bottom:15px}
 .about-copy .huge-a{font-size:210px;top:7px}
 .about-copy p:not(.about-label){font-size:23px;line-height:1.4;margin-bottom:22px}
 .film-feature{padding:60px 6vw 85px}.film-overline{font-size:10px;letter-spacing:.1em}
 .film-grid{margin-top:42px}.film-copy h2{font-size:clamp(57px,16vw,83px);margin-bottom:28px}
 .film-description{font-size:19px}.film-media{aspect-ratio:4/3}
 .video-super{top:24px;left:24px;font-size:8px}.video-play{font-size:55px}.video-placeholder strong{font-size:34px}.video-placeholder small{font-size:9px}.video-bottom{bottom:25px;right:25px;font-size:7px}
 .work-grid{grid-template-columns:1fr;gap:48px}.work-card .work-image{aspect-ratio:1.5}
 .work-card>span{font-size:30px}.work-card>p{font-size:14px}.work-note{margin-top:50px}
 .specialisms .press-logos{grid-template-columns:repeat(2,1fr)}
 .footer-mark{font-size:130px}.footer-detail{font-size:17px}
}

/* Keep the brand name in one typographic unit on larger screens. */
@media(min-width:901px){.film-copy h2{font-size:clamp(56px,5.0vw,78px);line-height:.92}}

.brand-line{white-space:nowrap;font-size:.83em;letter-spacing:-.045em}


/* V8 - Responsive, accessible, interactive six-discipline wordmarks */
.specialisms{padding:100px 3.4vw 76px;overflow:hidden}
.specialisms>p:first-child{margin:0 auto 66px;text-align:center;max-width:1480px;font-size:clamp(29px,3.05vw,53px);line-height:1.2}
.specialisms>p:first-child span{font-size:clamp(14px,1.4vw,22px);margin-left:8px;white-space:nowrap}
.practice-grid{
  width:100%;max-width:1570px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr 1.29fr 1.22fr 1.48fr 1.43fr;
  gap:clamp(5px,.9vw,18px);align-items:stretch;
}
.practice-item{
  appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;
  border:0;background:none;color:var(--brown);min-width:0;min-height:160px;
  padding:25px 4px 37px;text-align:center;display:flex;
  justify-content:center;align-items:center;flex-direction:column;
  --spot-x:50%;--spot-y:50%;--spot-scale:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.practice-item:focus-visible{outline:2px solid var(--blue-ink);outline-offset:1px;border-radius:4px}
.practice-spot{
  position:absolute;top:var(--spot-y,50%);left:var(--spot-x,50%);width:min(11.2vw,145px);height:min(11.2vw,145px);
  min-width:90px;min-height:90px;border-radius:50%;z-index:-1;pointer-events:none;
  background:var(--hover-color);opacity:0;transform:translate(-50%,-50%) scale(.18);
  transition:transform .55s cubic-bezier(.17,.8,.16,1),opacity .35s ease,top .18s ease-out,left .18s ease-out;
  box-shadow:inset 7px 7px 28px rgba(255,255,255,.28),0 13px 30px rgba(77,51,41,.035);
}
.practice-title{display:block;position:relative;white-space:nowrap;font:900 clamp(16px,1.63vw,29px)/1 var(--display);letter-spacing:-.012em;z-index:1;transition:transform .48s cubic-bezier(.17,.8,.16,1)}
.practice-original{display:block;opacity:1;transition:opacity .32s ease;white-space:nowrap}
.practice-reveal{position:absolute;inset:0;white-space:nowrap;display:block;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .32s,transform .42s cubic-bezier(.17,.8,.16,1)}
.practice-detail{position:absolute;top:calc(50% + 37px);left:50%;width:115%;max-width:260px;transform:translate(-50%,13px);opacity:0;pointer-events:none;
  color:var(--brown);font:700 clamp(8px,.72vw,11px)/1.4 var(--sans);letter-spacing:.07em;
  transition:transform .45s cubic-bezier(.17,.8,.16,1),opacity .28s ease;
}
.practice-item:hover .practice-spot,.practice-item:focus-visible .practice-spot,.practice-item.is-active .practice-spot{opacity:1;transform:translate(-50%,-50%) scale(1)}
.practice-item:hover .practice-title,.practice-item:focus-visible .practice-title,.practice-item.is-active .practice-title{transform:translateY(-5px) rotate(-2deg)}
.practice-item:hover .practice-original,.practice-item:focus-visible .practice-original,.practice-item.is-active .practice-original{opacity:0}
.practice-item:hover .practice-reveal,.practice-item:focus-visible .practice-reveal,.practice-item.is-active .practice-reveal{opacity:1;transform:translateY(0)}
.practice-item:hover .practice-detail,.practice-item:focus-visible .practice-detail,.practice-item.is-active .practice-detail{opacity:1;transform:translate(-50%,0)}
.specialisms .practice-hint{font:700 10px/1.5 var(--sans);color:var(--blue-ink);letter-spacing:.17em;text-align:center;margin:24px auto 0;opacity:.7}
.specialisms .practice-hint span{font-size:13px;margin:0 8px}
@media(max-width:1100px){
 .practice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;max-width:960px}
 .practice-item{min-height:140px}
 .practice-title{font-size:clamp(19px,2.7vw,30px)}
 .practice-spot{width:116px;height:116px}
 .practice-detail{top:calc(50% + 36px);font-size:10px}
}
@media(max-width:550px){
 .specialisms{padding:76px 6vw 70px}
 .specialisms>p:first-child{font-size:clamp(32px,8.2vw,44px);margin-bottom:26px;line-height:1.18}
 .specialisms>p:first-child span{display:block;margin:12px 0 0;font-size:14px}
 .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 9px}
 .practice-item{min-height:140px;padding:28px 0 42px}
 .practice-title{font-size:clamp(17px,5.2vw,24px)}
 .practice-spot{width:116px;height:116px}
 .practice-detail{top:calc(50% + 39px);font-size:9px;letter-spacing:.025em;width:130%}
 .specialisms .practice-hint{font-size:9px;letter-spacing:.11em;margin-top:20px}
}
@media(prefers-reduced-motion:reduce){.practice-spot,.practice-title,.practice-original,.practice-reveal,.practice-detail{transition:none!important}}

/* V9: requested focused revisions, preserve V8 visual language. */
.hero {
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  max-height:none;
}
/* Rebalance the about text when the oversized Y is removed. */
.anima-about { min-height:610px; }
.about-copy { min-height:0; justify-content:center; padding-top:0; }
/* Vitamin Well lives as the FIRST work card, not as an independent section. */
.work-card--video .film-media {box-shadow:none;aspect-ratio:1.25;}
.work-card--video .video-placeholder {min-height:100%;padding:28px 14px;}
.work-card--video .video-super {top:22px;left:22px;font-size:9px;max-width:calc(100% - 70px);}
.work-card--video .video-play {font-size:clamp(54px,5vw,76px);}
.work-card--video .video-placeholder strong {font-size:clamp(26px,2.4vw,38px);}
.work-card--video .video-placeholder small {font-size:10px;}
.work-card--video .video-bottom {right:18px;bottom:20px;font-size:8px;}
.work-card--video .work-disclaimer {font-size:12px;opacity:.72;margin-top:2px;}
/* Preserve consistent spacing after removing the footer monogram. */
.anima-footer {min-height:540px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:86px 5vw 90px;}
.footer-detail {margin:0 auto;}
@media(max-width:900px) {
 .hero {height:100vh;height:100svh;min-height:100vh;min-height:100svh;}
 .about-copy {min-height:0;padding-top:0;}
}
@media(max-width:550px) {
 .hero {height:100vh;height:100svh;min-height:100vh;min-height:100svh;}
 .anima-about {min-height:0;}
 .about-copy {min-height:0;padding:42px 0 12px;}
 .about-copy p:not(.about-label) {margin-top:0;}
 .work-card--video .work-image {aspect-ratio:1.5;}
 .work-card--video .video-placeholder strong {font-size:clamp(28px,8vw,39px);}
 .anima-footer {min-height:420px;padding:70px 5vw 94px;}
}

/* Footer: single accessible link to the English CV. */
.footer-cv-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  margin: 42px auto 0;
  padding: 19px 27px;
  border: 1px solid rgba(248,243,236,.65);
  color: #f8f3ec;
  text-decoration: none;
  font: 700 clamp(18px,2.4vw,30px)/1.2 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .09em;
  transition: background-color .25s, color .25s, transform .25s;
}
.footer-detail .footer-cv-link {border-bottom: 1px solid rgba(248,243,236,.65);}
.footer-cv-link:hover,.footer-cv-link:focus-visible {
  background: #f8f3ec;
  color: #4d3329;
  transform: translateY(-3px);
}
.footer-cv-link span:last-child {font: 400 1.1em/1 Arial,sans-serif;}


/* Original supplied ornamental frame, only mirrored horizontally.
   The original outlines and asymmetry are preserved; the white paper was
   made transparent. No generated ornaments or synthetic symmetry.
   The frame sits entirely inside the hero rather than being cropped. */
.ornate-frame {
  position: absolute;
  z-index: 2;
  inset: 12px;
  pointer-events: none;
  opacity: .95;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.ornate-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}
/* Lower top-of-page text to sit inside the clear centre of the actual frame. */
.site-header {
  top: clamp(148px,19vh,218px);
  left: clamp(172px,14.2vw,244px);
  right: clamp(157px,12.8vw,225px);
}
/* Compact two-language CV selector; restrained typography and fine border. */
.cv-link-mini {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 205px;
  max-width: calc(100vw - 48px);
  gap: 9px;
  margin: 27px auto 0;
  padding: 14px 20px 16px;
  border: 1px solid rgba(248,243,236,.6);
  background: rgba(44,37,33,.12);
  color: #f8f3ec;
}
.cv-link-label {
  color: #f8f3ec;
  font: 700 13px/1.2 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .16em;
}
.cv-link-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font: 700 21px/1 "Barlow Condensed", Impact, sans-serif;
}
.cv-link-options a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 3px 5px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.cv-link-options a:hover,
.cv-link-options a:focus-visible {
  color: #cbcfd9;
  border-color: currentColor;
  transform: translateY(-2px);
}
.cv-link-options a span {font: 400 .7em/1 Arial,sans-serif}
.cv-separator {font: 400 17px/1 Georgia,serif;opacity:.52}
@media (max-width: 900px) {
  .ornate-frame {inset:9px;opacity:.88}
  .site-header {
    top: clamp(138px,18svh,195px);
    left: 15%;
    right: 13%;
  }
}
@media (max-width: 550px) {
 .ornate-frame {inset:6px;opacity:.8}
 .site-header {
   top: clamp(132px,16svh,180px);
   left: 15.5%;
   right: 15%;
   gap: 17px;
 }
 .cv-link-mini {width:190px;gap:8px;padding:12px 17px 14px}
 .cv-link-label {font-size:12px}
 .cv-link-options {font-size:20px}
}

/* 2026-10-24: Restore the actual reference frame, improve its contrast,
   and put the brand and links INSIDE its clear space rather than low in
   the hero. Artwork and horizontal flip are intentionally unchanged. */
.ornate-frame {
  inset: 10px;
  opacity: 1;
  overflow: hidden;
}
.ornate-frame img {
  filter: drop-shadow(0 0 .65px rgba(41,60,78,.55));
}
.site-header {
  top: clamp(67px,9vh,105px);
  left: clamp(88px,9.2vw,165px);
  right: clamp(88px,9.2vw,165px);
  align-items: flex-start;
}
.site-header .nav {
  margin-top: clamp(51px,5.15vw,82px);
}
@media (max-width: 900px) {
  .ornate-frame {inset: 8px;opacity:1}
  .site-header {
    top: clamp(58px,9svh,92px);
    left: 12%;
    right: 11%;
    gap: 22px;
  }
  .site-header .nav {margin-top:0}
}
@media (max-width: 550px) {
  .ornate-frame {inset: 6px;opacity:1}
  .site-header {
    top: clamp(46px,8svh,72px);
    left: 12%;
    right: 10%;
    gap: 20px;
  }
  .site-header .nav {margin-top:0}
}

/* 2026-10-24: Final homepage layout based on actual browser preview. */
/* Original artwork traced from the user's reference: its contours and
   asymmetric composition are preserved; no replacement motif or upscaled image. */
.hero .ornate-frame {
  inset: clamp(6px, .7vw, 12px);
  z-index: 2;
  opacity: .82;
  overflow: hidden;
  pointer-events: none;
  border: 0;
  box-shadow: none;
}
.hero .ornate-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: none;
}
/* Brand occupies the blank upper-left pocket of the flipped ornament.
   Navigation is below its upper scroll, to the left of the right-hand flowers. */
.hero .site-header {
  top: clamp(32px, 5vh, 72px);
  left: clamp(130px, 10vw, 220px);
  right: clamp(290px, 20vw, 430px);
  z-index: 6;
  align-items: flex-start;
  gap: 20px;
}
.hero .site-header .nav {
  margin-top: clamp(58px, 7.4vh, 87px);
  padding-top: 0;
  gap: clamp(12px, 2vw, 32px);
  font-size: clamp(17px, 1.45vw, 25px);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .hero .site-header {
    top: clamp(30px, 4.5vh, 54px);
    left: clamp(90px, 9vw, 125px);
    right: clamp(120px, 12vw, 175px);
  }
  .hero .site-header .nav {
    margin-top: clamp(48px, 7vh, 68px);
    font-size: clamp(15px, 1.5vw, 19px);
    gap: clamp(10px, 1.5vw, 20px);
  }
}
@media (max-width: 900px) {
  .hero .ornate-frame { inset: 8px; opacity: .62; }
  .hero .ornate-frame img {
    object-fit: contain;
    object-position: center top;
  }
  .hero .site-header {
    top: 26px;
    left: 24px;
    right: 24px;
    flex-direction: column;
    gap: 24px;
  }
  .hero .site-header .nav {
    margin-top: 0;
    padding-top: 0;
    font-size: clamp(16px, 2.5vw, 21px);
    gap: clamp(10px, 2vw, 18px);
    flex-wrap: wrap;
    white-space: normal;
  }
}
@media (max-width: 550px) {
  .hero .ornate-frame { inset: 6px; opacity: .35; }
  .hero .site-header {
    top: 24px;
    left: 18px;
    right: 18px;
    gap: 22px;
  }
  .hero .site-header .nav {
    font-size: 13px;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
  }
}

/* Align published homepage geometry with the 1600×900 design mockup.
   The previous fixed width/height ratio compressed the frame on desktop. */
@media (min-width: 901px) {
  .hero {
    height: 100svh;
    min-height: 620px;
    max-height: none;
  }
  .hero .headline-wrap {top: 70%;}
  .hero .site-header {right: clamp(160px, 18vw, 330px);}
  .hero .site-header .nav {margin-top: clamp(66px, 8.3vh, 88px);}
}

/* 2026-10-24 content edit: retain the selected-work section heading and flourish
   without the removed multi-line editorial headline or the former empty gap. */
.anima-roster h2.roster-kicker {
  font: 400 clamp(22px,2vw,28px)/1.1 var(--serif);
  text-transform: uppercase;
  letter-spacing: .045em;
  margin: 0;
  text-align: center;
  max-width: none;
}
.anima-roster .roster-flourish { margin: 12px auto 38px; }
@media (max-width: 550px) {
  .anima-roster .roster-flourish { margin-bottom: 25px; }
}

/* 2026-10-24 · Vintage Editorial colour study (palette A)
   Restrained editorial colour hierarchy, without changing the layout,
   the sunset photograph, the user's original ornamental frame or animation. */
:root {
  --editorial-ivory: #F7EBDD;
  --editorial-plum: #493640;
  --editorial-terracotta: #A76D63;
  --editorial-navy: #344F63;
  --editorial-copy: #3C332F;
}
.hero .wordmark-name {
  -webkit-text-stroke-color: var(--editorial-ivory);
}
.hero .wordmark-bottom {
  color: var(--editorial-ivory);
}
.hero .site-header .nav {
  color: var(--editorial-plum);
}
.hero .site-header .nav a {
  color: var(--editorial-plum);
  /* The sky behind the nav is busy; a soft pale rim holds dark type apart
     from the gold reflections without putting it in a rectangular box. */
  text-shadow: 0 1px 2px rgba(247,235,221,.72), 0 0 13px rgba(247,235,221,.36);
  transition: color .26s ease, transform .26s ease, text-shadow .26s ease;
}
.hero .site-header .nav a:hover,
.hero .site-header .nav a:focus-visible {
  color: var(--editorial-terracotta);
  text-shadow: 0 1px 2px rgba(247,235,221,.85), 0 0 14px rgba(247,235,221,.44);
}
.anima-roster .roster-kicker {
  color: var(--editorial-plum);
}
.anima-roster .roster-flourish {
  stroke: #916C64;
}
.anima-roster .work-card > span {
  color: var(--editorial-plum);
}
.anima-roster .work-card > small {
  color: #516985;
}
.anima-roster .work-card > p {
  color: var(--editorial-copy);
}
.anima-roster .work-card > p b {
  color: #985E55;
}
.specialisms > p:first-child {
  color: var(--editorial-plum);
}
.specialisms .practice-item .practice-original,
.specialisms .practice-item .practice-reveal {
  color: var(--word-ink, var(--editorial-plum));
}
.specialisms .practice-item .practice-detail {
  color: var(--word-ink, var(--editorial-plum));
}
.specialisms .practice-item:focus-visible {
  outline-color: var(--word-ink, var(--editorial-plum));
}

/* Portfolio editorial gallery · 2026-10-24
   Seven selected artworks serve as visual covers; actual deliverables
   remain described below. Four columns make the gallery two rows. */
.anima-roster {
  min-height: 0;
  padding: clamp(55px,5vw,80px) clamp(20px,3vw,55px) 72px;
}
.anima-roster .artists.work-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 31px clamp(15px,1.8vw,30px);
  max-width: 1560px;
  margin: 0 auto;
}
.anima-roster .work-card { min-width:0; }
.anima-roster .work-card .work-image,
.anima-roster .work-card--video .film-media {
  aspect-ratio: 1.54;
  overflow: hidden;
}
.anima-roster .work-card .work-image > img,
.anima-roster .work-card--video .video-placeholder img {
  display:block;
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:saturate(.9);
  transition:transform .65s ease,filter .55s ease;
}
.anima-roster .work-card:nth-child(1) .work-image img {object-position:center 54%}
.anima-roster .work-card:nth-child(3) .work-image img {object-position:center 23%}
.anima-roster .work-card:nth-child(4) .work-image img {object-position:center 42%}
.anima-roster .work-card:nth-child(5) .work-image img {object-position:center 50%}
.anima-roster .work-card:nth-child(6) .work-image img {object-position:center 47%}
.anima-roster .work-card:nth-child(7) .work-image img {object-position:center 54%}
.anima-roster .work-card:hover .work-image img {
  transform:scale(1.035);
  filter:saturate(1);
}
.anima-roster .work-card--video .video-placeholder {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  padding:0;
  background:none;
  overflow:hidden;
}
.anima-roster .work-card--video .film-media > video:not([hidden]) {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.anima-roster .work-card .work-index {
  z-index:2;
  font-size:10px;
  top:12px;
  right:12px;
}
.anima-roster .work-card > span {
  display:block;
  margin-top:12px;
  font:400 clamp(19px,1.52vw,26px)/1.12 var(--serif);
}
.anima-roster .work-card > small {
  display:block;
  margin-top:7px;
  font:700 9.5px/1.45 var(--sans);
  letter-spacing:.075em;
}
.anima-roster .work-card > p {
  margin:7px 0 0;
  max-width:none;
  font:400 12px/1.5 var(--sans);
}
.anima-roster .roster-flourish {margin:10px auto 31px;}
.anima-about {
  min-height: 0;
  gap: clamp(35px,6vw,100px);
  padding: clamp(48px,5vw,78px) 9vw;
}
.anima-about .about-tv {
  height:min(33vw,460px);
  max-height:460px;
  aspect-ratio:1/1;
}
.anima-about .about-tv img {
  object-position:center 34%;
  filter:grayscale(1);
}
.anima-about .about-copy {
  min-height:0;
  padding:0;
  justify-content:center;
}
.anima-about .about-copy p:not(.about-label) {
  font:400 clamp(21px,1.75vw,29px)/1.35 var(--serif);
  margin:0 0 16px;
}
.anima-about .about-copy p.about-interests {
  font:400 clamp(13px,1.04vw,15.5px)/1.56 var(--sans);
  color:#5b4e4b;
  max-width:570px;
  margin:6px 0 22px;
}
.anima-about .about-meta {margin-bottom:0;}
@media (max-width:1150px) {
 .anima-roster .artists.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:29px 19px}
 .anima-roster .work-card>span{font-size:clamp(19px,2.1vw,25px)}
 .anima-about .about-tv{height:min(40vw,460px)}
}
@media (max-width:800px) {
 .anima-roster .artists.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
 .anima-roster .work-card>span{font-size:clamp(19px,2.8vw,24px)}
 .anima-about{display:grid;grid-template-columns:.95fr 1.05fr;padding:55px 5vw;gap:25px}
 .anima-about .about-tv{height:auto;aspect-ratio:4/5;width:100%}
 .anima-about .about-copy{padding:0}
 .anima-about .about-copy p:not(.about-label){font-size:clamp(19px,2.5vw,24px)}
 .anima-about .about-copy p.about-interests{font:400 13px/1.5 var(--sans)}
}
@media (max-width:550px) {
 .anima-roster{padding:55px 5vw 62px}
 .anima-roster .artists.work-grid{grid-template-columns:1fr;gap:29px}
 .anima-roster .work-card .work-image,.anima-roster .work-card--video .film-media{aspect-ratio:1.75}
 .anima-roster .work-card>span{font-size:24px;margin-top:9px}
 .anima-roster .work-card>small{font-size:9px}
 .anima-roster .work-card>p{font-size:12px}
 .anima-about{display:block;padding:35px 6vw 58px}
 .anima-about .about-tv{width:100%;max-height:none;aspect-ratio:1/1;max-width:none}
 .anima-about .about-copy{padding:31px 0 0;min-height:0}
 .anima-about .about-copy p:not(.about-label){font-size:22px;line-height:1.4}
 .anima-about .about-copy p.about-interests{font:400 14px/1.5 var(--sans);margin:4px 0 19px}
}

/* 2026-10-24 card polish: identical treatment for all seven art covers. */
.anima-roster .work-card--video .video-placeholder::after {
  content: none !important;
  display: none !important;
}
/* Existing .work-index had both left and right set, stretching the first
   index across the artwork. Keep all seven as small translucent labels. */
.anima-roster .work-card .work-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 38px;
  max-width: max-content;
  box-sizing: border-box;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
  padding: 6px 11px;
  color: #493640;
  background: rgba(248,243,236,.66);
  font: 700 16px/1 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .04em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* 2026-10-24 · Romantic editorial cover.
   Only the hero composition changes; work cards, original decorative frame
   and other sections retain their existing styling and interactions. */
.hero .hero-photo {
  background-image: url('assets/hero-sunset-original-20261024.svg');
  background-position: center 38%;
  background-size: cover;
  filter: saturate(1.02) contrast(1.045);
  transform: none;
  transition: transform 1.5s cubic-bezier(.16,.7,.25,1);
}
.hero:hover .hero-photo { transform: scale(1.012); }
.hero .hero-filter {
  background: linear-gradient(
    180deg,
    rgba(43,40,46,.10) 0%,
    rgba(45,40,46,.04) 38%,
    rgba(32,34,38,.12) 72%,
    rgba(30,32,36,.20) 100%
  );
  mix-blend-mode: normal;
}
.hero .vignette {
  background: radial-gradient(ellipse at 50% 51%, rgba(30,28,34,.08) 0%, transparent 61%);
}
.hero .site-header {
  top: clamp(59px,8.2vh,100px);
  left: auto;
  right: clamp(74px,9vw,162px);
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0;
  z-index: 6;
}
.hero .site-header .nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(13px,2.15vw,34px);
  margin-top: 0;
  padding: 0;
  font: 600 clamp(12px,1.06vw,16px)/1.2 var(--sans);
  letter-spacing: .125em;
  white-space: nowrap;
}
.hero .site-header .nav a {
  color: #493640;
  text-shadow: 0 1px 3px rgba(247,235,221,.85), 0 0 13px rgba(247,235,221,.45);
  transform-origin: center;
}
.hero .site-header .nav a:hover,
.hero .site-header .nav a:focus-visible {
  color: #9D635D;
  transform: translateY(-2px);
}
.hero .headline-wrap {
  top: 52%;
  left: 50%;
  width: min(92vw,1020px);
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.hero .headline.hero-signature {
  margin: 0;
  padding: .06em .17em .01em;
  max-width: 100%;
  color: #FBF0DE;
  font: 400 clamp(124px,15.5vw,260px)/1.12 "Ballet","Snell Roundhand","Brush Script MT",cursive;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 3px 2px rgba(39,32,40,.12),0 10px 22px rgba(25,28,33,.26);
  -webkit-text-stroke: .25px rgba(253,242,222,.62);
}
.hero .hero-signature-caption {
  margin: clamp(-5px,-.28vw,0px) 0 0;
  font: 500 clamp(10px,1.05vw,14px)/1.4 var(--sans);
  color: #F7EBDD;
  letter-spacing: .34em;
  text-indent: .34em;
  text-shadow: 0 2px 8px rgba(27,29,33,.56);
}
@media (max-width: 900px) {
  .hero .site-header {
    top: clamp(35px,5.6svh,66px);
    left: auto;
    right: clamp(28px,6.5vw,66px);
    width: auto;
    flex-direction: row;
    gap: 0;
  }
  .hero .site-header .nav {
    margin: 0;
    padding: 0;
    width: auto;
    gap: clamp(10px,1.8vw,18px);
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-end;
    font-size: clamp(11px,1.6vw,14px);
  }
  .hero .headline-wrap {top: 52%;width: 94vw;}
  .hero .headline.hero-signature {font-size: clamp(112px,18vw,200px);}
  .hero .hero-signature-caption {font-size: 11px;letter-spacing:.24em;}
}
@media (max-width: 550px) {
  .hero {height:100svh;min-height:560px;}
  .hero .hero-photo {background-position:center 37%;}
  .hero .site-header {
    top: 30px;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center;
    padding: 0 11px;
  }
  .hero .site-header .nav {
    width: 100%;
    gap: clamp(6px,2.3vw,12px);
    justify-content: center;
    font-size: clamp(10px,2.4vw,12px);
    letter-spacing: .04em;
  }
  .hero .headline-wrap {top:50%;width:98vw;}
  .hero .headline.hero-signature {
    font-size:clamp(104px,23vw,148px);
    line-height:1.2;
    letter-spacing:-.04em;
    padding:.08em .12em;
  }
  .hero .hero-signature-caption {font-size:10px;letter-spacing:.2em;text-indent:.2em;}
}

/* 2026-10-24 · Allura and illustrated swallow refinement
   Scale and spacing carefully tuned after the gallery and About feedback. */
.hero .headline.hero-signature {
  font-family: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(116px, 12.8vw, 209px);
  line-height: 1.18;
  letter-spacing: 0;
  padding: .1em .15em .02em;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 15px rgba(41,37,42,.23);
}
.hero .headline-wrap {
  top: 48%;
  width: min(94vw, 950px);
}
.hero .hero-signature-caption {
  margin-top: 0;
  font-size: clamp(10px,.87vw,12px);
  letter-spacing: .32em;
}
.hero .site-header .nav {
  font-size: clamp(12px,.93vw,14px);
  letter-spacing: .095em;
  gap: clamp(12px,1.8vw,29px);
}

/* About: distinct typographic levels, more breathing room. */
.anima-about {position:relative;isolation:isolate;}
.anima-about .about-tv,
.anima-about .about-copy {position:relative;z-index:1;}
.anima-about .about-copy p:not(.about-label) {
  font: 400 clamp(17px,1.12vw,19px)/1.58 var(--serif);
  margin: 0 0 19px;
  max-width: 640px;
}
.anima-about .about-copy p.about-interests {
  font: 400 clamp(12.5px,.92vw,14px)/1.68 var(--sans);
  max-width: 560px;
  margin: 3px 0 22px;
}
.anima-about .about-label {font-size:clamp(10px,.87vw,12px);}
.anima-about .about-meta {font-size:clamp(11px,.89vw,13px);}

/* Three birds traced from the two-swallow reference, not generic icons.
   Position in the unoccupied corners of About, below the content z-layer. */
.about-swallows {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.about-swallow {
  position:absolute;
  display:block;
  background:var(--swallow-color,#71879E);
  -webkit-mask:url('assets/swallow-illustration.svg') center / contain no-repeat;
  mask:url('assets/swallow-illustration.svg') center / contain no-repeat;
  opacity:.93;
}
.about-swallow--upper-large {
  width:116px;
  height:120px;
  top:2%;
  right:3.3%;
  --swallow-color:#7189A4;
  transform:rotate(13deg) scaleX(-1);
}
.about-swallow--upper-small {
  width:64px;
  height:68px;
  top:14%;
  right:11%;
  --swallow-color:#A18A9E;
  transform:rotate(-12deg) scaleX(-1);
  opacity:.88;
}
.about-swallow--lower {
  width:103px;
  height:107px;
  bottom:3.2%;
  left:2.6%;
  --swallow-color:#9C7B73;
  transform:rotate(-8deg);
  opacity:.87;
}

/* Work: slimmer titles, compact credits, no unnecessary wrapping. */
.anima-roster .work-card > span {
  margin-top:10px;
  font:400 clamp(18px,1.22vw,21px)/1.18 var(--serif);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.anima-roster .work-card > small {
  font:650 clamp(9px,.68vw,10px)/1.5 var(--sans);
  letter-spacing:.065em;
  margin-top:6px;
}
.anima-roster .work-card > p {
  font:400 clamp(11.5px,.76vw,12px)/1.65 var(--sans);
  margin:7px 0 0;
  max-width:none;
}
.anima-roster .artists.work-grid {row-gap:34px;}

/* Responsive: birds should never obscure portrait or copy. */
@media(max-width:900px) {
  .hero .headline.hero-signature {font-size:clamp(102px,16.5vw,161px)}
  .hero .headline-wrap {top:48%}
  .anima-about .about-copy p:not(.about-label) {font-size:clamp(16px,1.9vw,18px);line-height:1.55}
  .anima-about .about-copy p.about-interests {font-size:12.5px;line-height:1.62}
  .about-swallow--upper-large {width:79px;height:83px;right:1.7%;top:1.5%}
  .about-swallow--upper-small {width:45px;height:49px;right:8%;top:12%}
  .about-swallow--lower {width:75px;height:78px;left:1%;bottom:2%}
}
@media(max-width:550px) {
  .hero .headline.hero-signature {
    font-size:clamp(83px,23vw,122px);
    letter-spacing:0;
    line-height:1.2;
    padding:.08em .09em;
  }
  .hero .headline-wrap {top:48%}
  .hero .site-header .nav {font-size:clamp(10px,2.4vw,12px);letter-spacing:.02em}
  .anima-about .about-copy p:not(.about-label) {
    font-size:17px;
    line-height:1.58;
  }
  .anima-about .about-copy p.about-interests {font-size:13px;line-height:1.6}
  .about-swallow--upper-large,
  .about-swallow--upper-small {display:none}
  .about-swallow--lower {width:56px;height:60px;bottom:auto;top:12px;left:auto;right:12px;opacity:.56}
  .anima-roster .work-card > span {font-size:19px;white-space:normal}
  .anima-roster .work-card > small {font-size:9px}
  .anima-roster .work-card > p {font-size:12px}
}