/* Four treatments of the same project row, using the existing hero palette. */
.work-variants{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 48px;padding:0;border:0}
.work-variants legend{font-size:14px;opacity:.7;margin-bottom:12px}
.work-variants button{font:inherit;font-size:16px;line-height:1.3;color:var(--white);border:1px solid #ffffff50;padding:12px 18px;background:transparent;cursor:pointer;transition:background .3s,border-color .3s}
.work-variants button span{font-size:12px;margin-right:10px;opacity:.65}
.work-variants button:hover{border-color:var(--red)}.work-variants button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.work-design .project-list{counter-reset:project;display:block}
.work-design .project-row{counter-increment:project;position:relative;isolation:isolate;margin-bottom:80px;border:0;overflow:visible;min-width:0}
.work-design .project-row::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.work-design .project-still{z-index:1;box-shadow:0 24px 70px #0d0a2640}
.work-design .project-copy{position:relative;z-index:2;min-width:0}
.work-design .project-copy h3{font-weight:800;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.work-design .project-copy h3::before{content:counter(project,decimal-leading-zero) " / 08";display:block;font-size:14px;font-weight:400;letter-spacing:.12em;margin-bottom:20px;line-height:1.5;color:var(--white)}
.work-design .project-copy p{font-size:18px;line-height:1.6;max-width:56ch}
.work-design .project-button{border-color:#ffffff75;font-weight:400}
.work-design .project-button span{display:none}
/* 01 — a wide strip of light and an oversized title crossing the image edge. */
.work-design[data-work-design=glow] .project-row{grid-template-columns:1.16fr 1fr;gap:0;padding:clamp(32px,5vw,80px) 0}
.work-design[data-work-design=glow] .project-row::before{inset:0 -3vw;background:radial-gradient(ellipse at 15% 45%,#E7324138,transparent 52%),radial-gradient(ellipse at 84% 10%,#4a2a6e99,transparent 58%),linear-gradient(115deg,#120f3370,transparent 70%)}
.work-design[data-work-design=glow] .project-copy{padding:0 0 0 clamp(24px,4vw,64px)}
.work-design[data-work-design=glow] .project-copy h3{font-size:clamp(36px,4.5vw,70px);position:relative;margin-left:clamp(-130px,-8vw,-40px);padding:18px 0 18px 24px;text-shadow:0 3px 24px #120f33;background:linear-gradient(90deg,#241E4Fdd,transparent 95%)}
.work-design[data-work-design=glow] .project-copy h3::before{color:var(--red);text-shadow:none}
.work-design[data-work-design=glow] .project-still{transform:rotate(-2deg);border-bottom:4px solid var(--red)}
.work-design[data-work-design=glow] .project-still:hover{transform:rotate(0deg)}

.animation-caption{font-size:16px;line-height:1.5;max-width:60ch;margin:-24px 0 48px;opacity:.75;min-height:3em}
.work-design .title-word{display:inline-block}
.work-design .project-row{perspective:1200px}
.work-design .project-row::before{transform-origin:center;opacity:.8}
.work-design .project-row.motion-active::before{animation:light-breathe 8s ease-in-out infinite alternate}
@keyframes light-breathe{from{opacity:.55;transform:translate3d(-1%,0,0) scale(.98)}to{opacity:1;transform:translate3d(1%,1%,0) scale(1.025)}}
.work-design .light-trace{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:linear-gradient(100deg,transparent 30%,#ffffff24 48%,#E7324138 50%,transparent 68%);transform:translateX(-100%)}
.work-design[data-animation=aperture] .motion-active .light-trace{animation:light-sweep 1.5s cubic-bezier(.2,.7,.2,1) .15s both}
.work-design[data-animation=rhythm] .motion-active .light-trace{animation:light-sweep .8s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes light-sweep{0%{opacity:0;transform:translateX(-100%)}25%{opacity:.8}75%{opacity:.8}100%{opacity:0;transform:translateX(100%)}}
.work-design[data-animation=depth] .project-row::before{background:radial-gradient(ellipse at var(--light-x,15%) var(--light-y,45%),#E7324144,transparent 52%),radial-gradient(ellipse at 84% 10%,#4a2a6e99,transparent 58%),linear-gradient(115deg,#120f3370,transparent 70%)}
.work-design[data-animation=rhythm] .project-copy h3::before{border-left:3px solid var(--red);padding-left:12px}
.work-design .project-button{transition:transform .3s,border-color .3s,box-shadow .3s}
.work-design .project-button:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 10px 30px #E7324120}
.work-design .project-still{transition:transform .7s,rotate .7s;overflow:hidden}
@media(max-width:900px){.work-design .project-copy p{font-size:16px}.work-design .project-meta{font-size:15px}}
@media(max-width:760px){
 .work-variants{margin-bottom:40px;gap:6px}.work-variants button{font-size:14px;padding:12px}.work-variants button span{margin-right:6px}
 .work-design .project-row{margin-bottom:56px}
 .work-design[data-work-design=glow] .project-row{grid-template-columns:1fr;gap:0;padding:24px 0}
 .work-design[data-work-design=glow] .project-row .project-copy{padding:24px 8px 0;margin:0;display:block}
 .work-design[data-work-design=glow] .project-row .project-still{margin:0;transform:none;aspect-ratio:16/9}
 .work-design[data-work-design=glow] .project-copy h3{font-size:36px;margin:0 0 24px;padding:0;background:none;max-width:none}
 .work-design[data-work-design=glow] .project-copy h3::before{font-size:12px;margin-bottom:14px}
 .animation-caption{font-size:14px;margin-top:-20px}
}
@media(prefers-reduced-motion:reduce){.work-design .project-row::before,.work-design .light-trace{animation:none!important;transform:none!important}.work-design .light-trace{display:none}.work-design .project-still,.work-design .project-button{transition:none!important;transform:none!important;translate:none!important;rotate:none!important}.work-design .project-copy>*{opacity:1!important;transform:none!important}}