:root{--bg:#121510;--ink:#eeeae1;--muted:#999d96;--line:#353a34;--accent:#e9e6dc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:20;background:var(--bg);padding:15px}header{display:flex;justify-content:space-between;align-items:center;padding:34px 5%;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:700;letter-spacing:-1.3px}.brand span{font-size:11px;vertical-align:top;margin-left:5px}nav{display:flex;gap:38px;font-size:14px}nav sup{font-size:9px;color:var(--muted);margin-left:8px}nav a[aria-current]{color:var(--accent)}.intro{padding:65px 5% 46px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.8px;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:9px}h1{font-size:clamp(55px,8.9vw,145px);line-height:.98;letter-spacing:-.065em;font-weight:500;margin:35px 0}em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro-bottom{display:flex;align-items:end;justify-content:space-between}.intro-bottom p{font-size:15px;line-height:1.65;color:#bfc2ba;margin:0}.text-link{font-size:13px;border-bottom:1px solid var(--muted);padding:15px 0}.text-link span{margin-left:60px}.feature{width:90%;margin:0 5%;aspect-ratio:2.05;border:0;padding:0;position:relative;background:#232723;overflow:hidden;text-align:left}.feature img,.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.feature:hover img,.thumb:hover img{transform:scale(1.04)}.feature-shade{position:absolute;inset:0;background:linear-gradient(transparent,#000a)}.feature-label{position:absolute;top:30px;left:30px;font-size:10px;letter-spacing:2px}.feature-title{position:absolute;left:35px;bottom:75px;font-size:clamp(28px,4vw,68px);letter-spacing:-2px;line-height:1.05}.feature-title em{color:white}.play{position:absolute;top:43%;left:47%;border:1px solid #fff9;background:#ffffff12;backdrop-filter:blur(8px);border-radius:50%;width:70px;height:70px;display:grid;place-items:center;font-size:18px}.feature-bottom{position:absolute;bottom:27px;left:35px;right:35px;display:flex;justify-content:space-between;font-size:12px}.projects{padding:80px 5%}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}h2{font-size:26px;font-weight:400;letter-spacing:-1px;margin:0}.section-head h2 span{font-size:12px;color:var(--muted);letter-spacing:0}.section-head p{font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 24px}.thumb{padding:0;border:0;width:100%;aspect-ratio:16/9;display:block;overflow:hidden;background:#242824;position:relative}.small-play{position:absolute;right:18px;bottom:18px;background:#101211b0;border:1px solid #ffffff66;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:11px}.caption{display:flex;align-items:start;gap:15px;padding-top:16px}.caption>span{font-size:10px;color:var(--muted);padding-top:3px}.caption>span:last-child{margin-left:auto;color:var(--ink);font-size:17px}.caption h3{font-size:15px;line-height:1.5;font-weight:400;margin:0;max-width:88%}.outline{display:table;border:1px solid var(--line);padding:18px 24px;margin:55px auto 0;font-size:12px}.outline:hover{border-color:var(--accent)}.cta{padding:55px 5% 65px;background:var(--accent);color:var(--bg)}.cta p{font-size:14px}.cta a{display:flex;justify-content:space-between;font-size:clamp(50px,9vw,135px);letter-spacing:-5px}footer{display:flex;gap:25px;align-items:center;padding:35px 5%;font-size:11px;color:var(--muted);flex-wrap:wrap}footer .brand{color:var(--ink);margin-right:15px}footer span:last-child{margin-left:auto}dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:20px;width:min(1100px,95vw);max-width:95vw}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-head h2{font-size:17px;letter-spacing:0}.close{background:transparent;border:1px solid var(--line);padding:10px;white-space:nowrap}.player{aspect-ratio:16/9;background:black}.player iframe{width:100%;height:100%;border:0}.external{display:inline-block;margin-top:15px;font-size:12px}.contact-intro{padding:70px 5% 85px}.lead{font-size:17px;line-height:1.8;color:#bfc2ba;margin:40px 0}.email{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(20px,4vw,62px);letter-spacing:-.04em}.email span{color:var(--accent)}.contact-details{display:flex;gap:15%;margin-top:50px}.contact-details p{font-size:14px;line-height:1.9}.services{background:#e9e6dc;color:#161a15;padding:65px 5%;display:grid;grid-template-columns:1fr 2fr;gap:40px}.services h2{font-size:40px}.services p{font-size:16px;line-height:1.7;max-width:600px;margin:25px 0 40px;color:#565b52}.service-row{border-top:1px solid #b9bcb1;display:flex;align-items:center;gap:25px;padding:20px 0}.service-row h3{margin:0;font-size:23px;font-weight:400}.service-row span{font-size:11px}.service-row span:last-child{margin-left:auto;font-size:24px}@media(max-width:650px){header{padding:25px 5%}.brand{font-size:21px}nav{gap:20px}nav sup{display:none}.intro{padding-top:45px}h1{margin:30px 0}.intro-bottom{display:block}.text-link{display:table;margin-top:20px}.feature{aspect-ratio:1.2}.feature-label{top:20px;left:20px}.feature-title{left:20px;bottom:65px;letter-spacing:-1px}.feature-bottom{left:20px;right:20px}.play{width:50px;height:50px;top:30%;left:auto;right:20px}.projects{padding:55px 5%}.section-head{align-items:start}.section-head p{display:none}.grid{grid-template-columns:1fr;gap:30px}.cta a{letter-spacing:-2px}footer{gap:20px}footer .brand{width:100%}footer span:last-child{margin-left:0}.contact-intro{padding-top:45px}.contact-details{gap:50px}.services{grid-template-columns:1fr;padding:45px 5%}.services h2{font-size:32px}.dialog-head h2{font-size:13px}.lead{font-size:15px}}
/* Quiet movement, with the same rhythm across both pages. */
.intro .eyebrow,.intro h1,.intro-bottom,.feature,.section-head,.grid article,.cta,.contact-intro>*,.services>*,footer{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1)}
.reveal-pending{opacity:0;transform:translateY(22px)}
nav a,.brand,footer a,.external{transition:color .22s ease}
.text-link span,.feature-bottom span,.caption>span:last-child,.email span,.cta a span{display:inline-block;transition:transform .3s cubic-bezier(.2,.65,.25,1)}
.play,.small-play{transition:transform .3s ease,background-color .3s ease,border-color .3s ease}
.outline,.close{transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.text-link{transition:color .25s ease,border-color .25s ease}
@media(hover:hover) and (pointer:fine){
 nav a:hover,.brand:hover,footer a:hover,.external:hover{color:var(--accent)}
 .text-link:hover{color:var(--accent);border-color:var(--accent)}
 .text-link:hover span{transform:translateY(4px)}
 .video:hover .play,.video:hover .small-play{transform:scale(1.08);background-color:#101211b0;border-color:var(--accent)}
 .feature:hover .feature-bottom span,.grid article:hover .caption>span:last-child,.email:hover span{transform:translate(3px,-3px)}
 .cta a:hover span{transform:translate(5px,-5px)}
 .outline:hover,.close:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);transform:translateY(-2px)}
}
@media(hover:none){.feature:hover img,.thumb:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal-pending{opacity:1;transform:none}
 .feature:hover img,.thumb:hover img,.text-link:hover span,.video:hover .play,.video:hover .small-play,.feature:hover .feature-bottom span,.grid article:hover .caption>span:last-child,.email:hover span,.cta a:hover span,.outline:hover,.close:hover{transform:none}
}
/* Portfolio categories and client marks. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.portfolio-filters button{background:transparent;border:1px solid var(--line);border-radius:30px;padding:13px 19px;font-size:12px;transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.portfolio-filters button span{font-size:10px;margin-left:12px;opacity:.6}
.portfolio-filters button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
/* Compact single-line client ribbon; original logo proportions are preserved. */
.clients{padding:22px 5% 25px;background:var(--bg);border-top:1px solid var(--line);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1)}
.clients .section-head{margin:0 0 15px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.clients h2{font-size:26px;font-weight:400;letter-spacing:-1px}



.client-strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
.client-strip::-webkit-scrollbar{display:none}
.client-strip:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.client-track{display:flex;width:max-content}
.client-grid{list-style:none;padding:0 30px 0 0;margin:0;display:flex;align-items:center;gap:30px;flex-shrink:0}
.client-logo,.client-logo.on-light{height:55px;width:115px;flex:0 0 115px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent}
.client-logo img{display:block;width:auto;height:auto;max-width:105px;max-height:36px;object-fit:contain;filter:url(#logo-dark-ink);opacity:.9;transition:opacity .3s ease,transform .3s ease}
.client-logo.on-light img{filter:url(#logo-light-ink)}
.client-track.is-looping{animation:client-drift 85s linear infinite}


@keyframes client-drift{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){.portfolio-filters button:hover{border-color:var(--accent)}.client-logo:hover img{opacity:1;transform:scale(1.035)}}
@media(max-width:650px){
 .clients{padding:17px 5% 19px}.clients .section-head{margin-bottom:10px}
 .client-logo,.client-logo.on-light{height:45px;width:95px;flex-basis:95px}.client-logo img{max-width:88px;max-height:29px}.client-grid{gap:22px;padding-right:22px}
 .portfolio-filters{gap:8px}.portfolio-filters button{padding:12px 14px;font-size:11px}.portfolio-filters button span{margin-left:8px}
}
@media(prefers-reduced-motion:reduce){
 .clients,.client-logo img,.portfolio-filters button{transition:none}.client-logo:hover img{transform:none}
 .client-track.is-looping{animation:none;transform:none}.client-copy{display:none!important}
}

/* Balanced portfolio introduction. */
.intro h1{font-size:clamp(38px,5.1vw,82px);margin-top:10px;margin-bottom:38px}
.intro-bottom{gap:32px}
.intro-bottom p{font-size:20px;line-height:1.65;color:var(--ink);max-width:680px}
@media(max-width:650px){.intro h1{margin-top:0;margin-bottom:30px}.intro-bottom p{font-size:17px;line-height:1.65}}

/* Editorial monochrome accent: the title keeps its existing type scale. */
.intro h1 em{display:inline-block;background:var(--accent);color:var(--bg);line-height:.95;padding:.01em .13em .11em .06em}
nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* Reuse the contact services' off-white for all highlights. */
.intro h1{margin-bottom:18px}
.intro-bottom p{font-family:Arial,Helvetica,sans-serif}
.brand{padding:.1em .2em;margin:-.1em -.2em;transition:background-color .22s ease,color .22s ease}
.brand:hover,.brand:focus-visible{background:var(--accent);color:var(--bg)}
nav a,footer a:not(.brand),.external{padding:.15em .25em;margin:-.15em -.25em;transition:background-color .22s ease,color .22s ease}
nav a:hover,nav a:focus-visible,footer a:not(.brand):hover,footer a:not(.brand):focus-visible,.external:hover,.external:focus-visible{background:var(--accent);color:var(--bg)}
@media(max-width:650px){.intro h1{margin-bottom:16px}}

/* Contact details stay modest; portrait layout activates only once a real photo is supplied. */
.email{font-size:clamp(18px,2vw,26px);letter-spacing:-.025em;padding:18px 0;line-height:1.45}
.contact-portrait{margin:0;align-self:start}
.contact-portrait img{display:block;width:100%;height:auto;object-fit:cover}
@media(min-width:900px){.contact-intro.has-portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,32%);column-gap:6%}.contact-intro.has-portrait>:not(.contact-portrait){grid-column:1}.contact-intro.has-portrait>.contact-portrait{grid-column:2;grid-row:1 / span 5}}
/* Close-fitting editorial highlight and a single flowing tagline. */
.intro h1{margin-bottom:8px}
.intro h1 em{line-height:inherit;padding:0 .1em 0 .04em;background:linear-gradient(var(--accent),var(--accent)) left 60%/100% .72em no-repeat}
.intro-bottom p{max-width:none;font-size:clamp(17px,1.45vw,22px);line-height:1.5}
.cta{padding:25px 5% 28px}
.cta p{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.2;margin:0 0 6px}
.cta a{font-family:Arial,Helvetica,sans-serif;font-size:clamp(42px,6vw,88px);line-height:1.05;letter-spacing:-.045em}
footer a.social-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;margin:0;color:var(--ink)}
.social-icon svg{width:19px;height:19px;display:block;fill:currentColor}
footer a.social-icon:hover,footer a.social-icon:focus-visible{color:var(--bg)}
@media(max-width:650px){.intro h1{margin-bottom:8px}.intro-bottom p{font-size:17px}.cta{padding:22px 5% 25px}.cta p{font-size:12px;margin-bottom:5px}.email{font-size:19px;padding:16px 0}}

/* Latest typography refinements: italic sans-serif taglines, closely set. */
.intro h1{margin-bottom:2px}
.intro-bottom p{font-family:Arial,Helvetica,sans-serif;font-style:italic;line-height:1.14}
.cta p{font-family:Arial,Helvetica,sans-serif;font-style:italic;line-height:1;margin:0 0 1px}
.cta a{line-height:1}
@media(max-width:650px){.intro h1{margin-bottom:2px}.intro-bottom p{line-height:1.18}.cta p{line-height:1;margin-bottom:1px}}

/* About one third shorter than the published 325px / 234px CTA. */
.cta{padding:40px 5% 42px}
.cta a{font-size:clamp(50px,9vw,135px);line-height:1}
@media(max-width:650px){.cta{padding:45px 5% 47px}}

/* Shared tagline style, while preserving the approved CTA height. */
.intro{padding-bottom:62px}
.intro-bottom p,.cta p{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(17px,1.45vw,22px);line-height:1.14}
.cta{padding-top:38px;padding-bottom:39px}
.video-description{font-size:15px;line-height:1.55;color:var(--ink);margin:18px 0 5px;max-width:78ch;white-space:pre-line}
@media(max-width:650px){.intro{padding-bottom:60px}.intro-bottom p,.cta p{font-size:17px;line-height:1.18}.cta{padding-top:42px;padding-bottom:44px}.video-description{font-size:14px}}

/* Separate image-to-dialog and play-in-place controls, without nested buttons. */
.video-tile{position:relative}
.video-tile .small-play{z-index:2;padding:0}
.inline-player{position:absolute;inset:0;z-index:1;background:#000}
.inline-player iframe{display:block;width:100%;height:100%;border:0}
.inline-actions{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:6px}
.inline-actions button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #ffffff66;background:#121510d9;color:var(--ink);font-size:20px}
.inline-actions button:hover,.inline-actions button:focus-visible{background:var(--accent);color:var(--bg)}
.cta p{font-weight:600;margin-left:0;margin-bottom:-.12em;text-align:left}
.cta a{margin-left:-.04em}
@media(max-width:650px){.cta p{font-weight:600;margin-bottom:-.12em}}

/* Instagram covers share the portfolio thumbnail layout. */
.instagram-thumb{position:relative;display:block;text-decoration:none;color:var(--ink);overflow:hidden}
.instagram-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.instagram-badge{position:absolute;top:14px;left:14px;background:rgba(18,21,16,.8);color:#eeeae1;padding:7px 10px;font-size:12px;line-height:1;letter-spacing:.02em}
.instagram-play{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(18,21,16,.65);color:#eeeae1;font-size:16px}
.instagram-thumb:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.instagram-project .caption a{color:inherit;text-decoration:none;padding:4px}

/* Portrait gallery and player for vertical projects. */
.grid[data-layout="vertical"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
article[data-category="vertical"] .thumb{aspect-ratio:9/16}
article[data-category="vertical"] .thumb img{object-fit:cover;object-position:center}
.portrait-dialog{width:min(480px,95vw)}
.portrait-dialog .player{aspect-ratio:9/16;max-height:68dvh;margin-inline:auto;width:auto;height:68dvh;max-width:100%}
@media(max-width:850px){.grid[data-layout="vertical"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media(max-width:430px){.grid[data-layout="vertical"]{gap:28px 14px}.grid[data-layout="vertical"] .caption{gap:8px}.grid[data-layout="vertical"] .caption h3{font-size:13px}.grid[data-layout="vertical"] .instagram-badge{top:8px;left:8px;font-size:10px;padding:6px}.grid[data-layout="vertical"] .small-play,.grid[data-layout="vertical"] .instagram-play{width:34px;height:34px;right:10px;bottom:10px}}

/* Contact follows the homepage title and highlight, then a single light introduction. */
.contact-hero h1{margin-bottom:0}
.contact-about{background:var(--accent);color:var(--bg);padding:54px 5% 64px}
.contact-about>h2{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.045em;margin:0 0 38px}
.contact-about-grid{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.55fr);gap:clamp(32px,5vw,80px);align-items:start;max-width:1350px}
.about-portrait{margin:0}.about-portrait img{display:block;width:100%;height:auto}
.about-name{font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.035em;margin:0 0 20px}.about-name em{color:inherit;font-weight:700}
.about-lead{font-size:clamp(18px,1.6vw,23px);line-height:1.35;letter-spacing:-.025em;margin:0 0 24px}.about-lead strong{font-weight:600}
.about-text{font-size:16px;line-height:1.65;color:#42463e;max-width:780px}.about-text p{margin:0 0 18px}
.about-email{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #b4b6ac;border-bottom:1px solid #b4b6ac;padding:19px 0;margin-top:30px;font-size:clamp(18px,2vw,26px);letter-spacing:-.035em}.about-email span{font-size:28px}.contact-about a:focus-visible{outline-color:var(--bg)}
@media(max-width:700px){.contact-about{padding-top:36px;padding-bottom:44px}.contact-about>h2{margin-bottom:28px}.contact-about-grid{grid-template-columns:1fr;gap:28px}.about-portrait{max-width:360px}.about-name{margin-bottom:16px}.about-lead{font-size:20px}.about-text{font-size:15px}.about-email{margin-top:24px;font-size:20px;overflow-wrap:anywhere}}

/* Contact typography follows the homepage: sans-serif headings and italic tagline. */
.about-name{font-family:Arial,Helvetica,sans-serif;font-weight:500;font-style:normal;font-size:clamp(26px,2.6vw,38px);line-height:1.12}
.about-name span{color:var(--accent);padding:0 .1em 0 .04em;background:linear-gradient(var(--bg),var(--bg)) left 60%/100% .82em no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.about-lead{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(17px,1.45vw,22px);line-height:1.3}

/* A smaller portrait leaves more room for the introduction. */
.contact-about-grid{grid-template-columns:minmax(180px,250px) minmax(0,1fr)}
@media(max-width:700px){.contact-about-grid{grid-template-columns:1fr}.about-portrait{max-width:220px}}
/* Email action without displaying the address in the page. */
.contact-email-button{display:inline-flex;align-items:center;justify-content:space-between;gap:64px;background:var(--bg);color:var(--accent);padding:16px 22px;margin-top:26px;font-size:20px;line-height:1.1;letter-spacing:-.025em;border:1px solid var(--bg)}
.contact-email-button span{font-size:24px}.contact-email-button:hover{background:transparent;color:var(--bg)}.contact-email-button:focus-visible{outline:2px solid var(--bg);outline-offset:5px}@media(max-width:700px){.contact-email-button{font-size:18px;margin-top:20px}}

/* Right-aligned email action and fuller name highlight. */
.contact-email-button{display:flex;width:max-content;max-width:100%;margin-left:auto}
.about-name span{background-size:100% 1.08em;background-position:left 55%;padding:.06em .14em}


/* Continuous specialties strip at the foot of the contact hero. */
.contact-hero{padding-bottom:0}
.skills-ticker{margin:38px -5.55556% 0;overflow:hidden;border-top:1px solid var(--line);padding:18px 0 20px;color:var(--ink)}
.skills-ticker-track{display:flex;width:max-content;animation:skills-scroll 38s linear infinite;will-change:transform}
.skills-ticker-list{display:flex;flex-shrink:0;align-items:center;list-style:none;padding:0;margin:0;white-space:nowrap;font-size:clamp(16px,1.5vw,22px);font-family:Arial,Helvetica,sans-serif;font-style:italic;line-height:1.2}
.skills-ticker-list li{display:flex;align-items:center}.skills-ticker-list li span{margin:0 24px;color:var(--muted)}
.skills-ticker:hover .skills-ticker-track,.skills-ticker:focus .skills-ticker-track{animation-play-state:paused}
.skills-ticker:focus-visible{outline:1px solid var(--accent);outline-offset:-5px}
@keyframes skills-scroll{to{transform:translateX(-50%)}}
@media(max-width:650px){.skills-ticker{margin-top:30px;padding:16px 0 18px}.skills-ticker-list li span{margin:0 18px}}
@media(prefers-reduced-motion:reduce){.skills-ticker-track{animation:none;width:auto}.skills-ticker-copy{display:none}.skills-ticker-list{flex-wrap:wrap;white-space:normal;gap:10px 0;padding:0 5%}.skills-ticker-list li span{margin:0 12px}}

/* A gently floating note for existing project descriptions. */
.video-description{position:relative;z-index:1;width:fit-content;max-width:min(440px,calc(100% - 16px));margin:22px 8px 10px auto;padding:17px 22px;background:#fff;color:#121510;border:1px solid #ecece7;border-radius:3px;box-shadow:0 10px 30px #0004;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.45;white-space:pre-line;transform-origin:80% 50%;overflow-wrap:anywhere}
dialog[open] .video-description:not([hidden]){animation:description-drift 5s ease-in-out infinite}
.video-description:hover{animation-play-state:paused!important}
@keyframes description-drift{0%,100%{transform:translateY(0) rotate(-.45deg)}50%{transform:translateY(-5px) rotate(.45deg)}}
@media(max-width:650px){.video-description{max-width:calc(100% - 8px);margin:18px 4px 8px auto;padding:14px 17px;font-size:14px}}
@media(prefers-reduced-motion:reduce){dialog[open] .video-description:not([hidden]){animation:none;transform:none}}

/* Keep the note visible beneath the film without a nested scrollbar. */
dialog:not(.portrait-dialog):has(.video-description:not([hidden])) .player{width:min(100%,97.7778dvh);max-height:55dvh;margin-inline:auto}

/* Homepage-inspired italic type and dark highlight inside the floating note. */
.video-description{font-style:italic;line-height:1.85}
.video-description-text{background:var(--bg);color:var(--ink);padding:.13em .28em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Highlight the project title only; keep the description compact and black. */
.video-description{font-style:normal;line-height:1.25}
.video-description-title{display:block;font-size:18px;line-height:1.18;font-style:italic;font-weight:500;margin-bottom:8px;letter-spacing:-.025em}
.video-description-title>span{background:var(--bg);color:var(--ink);padding:.05em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.video-description-text{display:block;background:transparent;color:#121510;padding:0;font-size:15px;line-height:1.25;font-style:normal}
@media(max-width:650px){.video-description-title{font-size:17px;margin-bottom:7px}.video-description-text{font-size:14px}}

/* Editorial video titles are uppercase throughout the portfolio. */
.caption h3,.dialog-head h2,.video-description-title,.feature-title{text-transform:uppercase}
dialog.long-description:not(.portrait-dialog):has(.video-description:not([hidden])) .player{width:min(100%,80dvh);max-height:45dvh}

/* Shared vector controls: consistent rendering on mobile and desktop. */
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;pointer-events:none}.play .ui-icon,.small-play .ui-icon{width:18px;height:18px;vertical-align:0;margin-left:2px}.inline-actions .ui-icon{width:17px;height:17px}.caption>span:last-child .ui-icon{width:18px;height:18px}.contact-email-button .ui-icon{width:22px;height:22px}@media(hover:none){.small-play{background:#121510d9;backdrop-filter:none}.inline-play{min-width:40px;min-height:40px}}