/* v31 featured work */
/* ══ FEATURED WORK — a light sheet that slides over the film: an even grid of landscape cards ══ */
.work{position:relative;z-index:3;margin-top:-60vh;border-radius:28px 28px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -40px 80px -30px rgba(0,0,0,.45);padding:clamp(5.5rem,13vh,9rem) var(--pad) clamp(5rem,12vh,8.5rem)}
.work__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.4rem 3rem;margin-bottom:clamp(3.5rem,9vh,6.5rem)}
.work__top{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line);color:var(--ink2)}
.work__h{font-weight:400;font-size:clamp(3.2rem,11vw,11rem);letter-spacing:-.07em;line-height:.86;padding-top:.6rem}
.work__lede{max-width:26ch;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink2);padding-bottom:1rem}

/* grid: two even columns, generous rows, no stagger */
.work__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.2rem,3vw,3.2rem);row-gap:clamp(3.5rem,7vw,7.5rem);align-items:start}

/* card */
/* layers are promoted by JS only while a card reveals (will-change is cleared once it lands) */
.fw{--cbg:#0c0d12;--f:1;display:block;position:relative;color:inherit}
/* the stretched link carries the card; the Live chip sits above it as its own link */
.fw__a{position:absolute;inset:0;z-index:4;border-radius:20px;outline:none;-webkit-tap-highlight-color:transparent}
.fw__a:focus-visible{outline:none}
.fw__m{box-shadow:0 0 0 0 var(--bg),0 0 0 0 rgba(47,69,255,0);transition:box-shadow .5s var(--ease)}
.fw__a:focus-visible~.fw__m{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--acid)}
/* travelling focus (JS writes --f, 0…1): media scale via the individual `scale` property, a dim veil, the title ink */
.fw__m{position:relative;overflow:hidden;border-radius:20px;background:var(--cbg);aspect-ratio:16/10.5;transform:translateZ(0);scale:calc(.965 + .035 * var(--f))}
.fw__dim{position:absolute;inset:0;z-index:2;pointer-events:none;background:#0c0d12;opacity:calc(.16 * (1 - var(--f)))}
.fw__p{position:absolute;inset:-8% 0;will-change:transform}
.fw__h{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}
.fw__h>img,.fw__h>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fw__h video{opacity:0;transition:opacity .8s var(--ease)}
.fw.is-play .fw__h video{opacity:1}
.fw__m::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,16,22,.06),inset 0 0 0 2px rgba(255,255,255,.06);pointer-events:none;z-index:3}

/* frame mode: portrait work stands upright on a blurred plate of itself */
.fw__h--frame{overflow:hidden}
/* the plate is a neutral grey blur of the work, lit blue (palette lock) — the framed work itself keeps its natural colour */
.fw__bd{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(34px) grayscale(1) brightness(.42);transform:scale(1.1)}
.fw__glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 58%,rgba(255,255,255,.16),transparent 70%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28))}
.fw__glow::before{content:'';position:absolute;inset:0;background:rgba(47,69,255,.35);mix-blend-mode:screen}
/* a colour-blend pass gives the grey plate a true electric-blue hue (never a lilac cast) */
.fw__h--frame .fw__glow::after{content:'';position:absolute;inset:0;background:#2438f5;mix-blend-mode:color;opacity:.5}
.fw__fr{position:absolute;left:50%;top:50%;height:64%;aspect-ratio:var(--far,9/16);transform:translate(-50%,-50%);border-radius:14px;overflow:hidden;box-shadow:0 40px 70px -22px rgba(0,0,0,.6),0 10px 24px -8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.1)}
.fw__fr img,.fw__fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* screen mode: a 16:9 film shown whole (never cropped) on a softly lit dark plate */
.fw__glow--screen{background:radial-gradient(70% 60% at 50% 46%,rgba(125,139,255,.2),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.22))}
.fw__glow--screen::before{background:rgba(47,69,255,.2)}
.fw__fr--screen{height:auto;width:86%;aspect-ratio:16/9;border-radius:12px;background:#07080a}
.fw__fr--screen img,.fw__fr--screen video{object-fit:contain}

/* a soft sheen that follows the cursor over the media (JS writes --sx/--sy) */
.fw__m::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(38% 55% at var(--sx,50%) var(--sy,30%),rgba(214,219,255,.2),rgba(199,205,255,.06) 40%,rgba(199,205,255,0) 70%);mix-blend-mode:screen}
@media(hover:hover){.fw:hover .fw__m::before{opacity:1}}
/* chrome on the media */
.fw__live{position:absolute;left:1rem;bottom:1rem;z-index:3;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;border-radius:99px;color:#fff;background:rgba(10,11,16,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase}
.fw__live i{width:6px;height:6px;border-radius:50%;background:var(--acid2)}
.fw.is-play .fw__live i{background:#6b80ff;box-shadow:0 0 0 3px rgba(107,128,255,.25);animation:fwPulse 1.8s var(--ease) infinite}
@keyframes fwPulse{0%{box-shadow:0 0 0 0 rgba(107,128,255,.55)}70%,100%{box-shadow:0 0 0 7px rgba(107,128,255,0)}}
.fw__go{position:absolute;right:1rem;top:1rem;width:3.2rem;height:3.2rem;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:1.05rem;z-index:3;overflow:hidden;transform:scale(0);transition:transform .7s var(--ease)}
.fw__go i{font-style:normal;transform:translate(-120%,120%);transition:transform .7s var(--ease) .06s}
.fw:hover .fw__go,.fw__a:focus-visible~.fw__m .fw__go,.fw.is-peek .fw__go{transform:none}
.fw:hover .fw__go i,.fw__a:focus-visible~.fw__m .fw__go i,.fw.is-peek .fw__go i{transform:none}

/* meta: index + disciplines + status, then the name large with its year, then the one-line story */
.fw__meta{padding-top:clamp(1.1rem,1.6vw,1.6rem)}
.fw__wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.fw__w{display:inline-block}
.fw__disc{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .55em;font-weight:500;font-size:clamp(.72rem,.85vw,.85rem);letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--ink2)}
.fw__disc b{font-weight:500;color:var(--acid);padding-left:.55em}
.fw__ix{font-size:.72rem;letter-spacing:.04em;color:var(--ink2);margin-right:.15em}
/* status chips: blue-lit Live (a real link), quiet Shipped, outlined Concept */
.fw__st{position:relative;z-index:5;display:inline-flex;align-items:center;gap:.4rem;margin-left:.35em;padding:.34rem .62rem .3rem;border-radius:99px;font-size:.6rem;font-weight:400;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--ink2);background:rgba(15,16,22,.055);white-space:nowrap}
.fw__st--live{color:#2438f5;background:rgba(79,102,255,.1);box-shadow:inset 0 0 0 1px rgba(79,102,255,.22);transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.fw__st--live i{width:6px;height:6px;border-radius:50%;background:#4f66ff;box-shadow:0 0 0 3px rgba(199,205,255,.55)}
.fw__st--live span{display:inline-block;transition:transform .5s var(--ease)}
.fw__st--live:hover,.fw__st--live:focus-visible{background:#2f45ff;color:#fff;box-shadow:none}
.fw__st--live:hover i,.fw__st--live:focus-visible i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.fw__st--live:hover span,.fw__st--live:focus-visible span{transform:translate(.12em,-.12em)}
.fw__st--live:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.fw__st--concept{background:transparent;box-shadow:inset 0 0 0 1px rgba(74,77,90,.45)}
.fw__t{margin-top:clamp(.45rem,.7vw,.75rem);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-weight:400;font-size:clamp(1.6rem,3vw,3.4rem);letter-spacing:-.045em;line-height:1.02;color:var(--ink)}
@supports (color:color-mix(in srgb,red 50%,blue)){.fw__t{color:color-mix(in srgb,var(--ink) calc(var(--f) * 100%),var(--ink2))}}
.fw__tt{position:relative;display:inline-block;padding-bottom:.08em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .8s var(--ease),transform .8s var(--ease)}
.fw:hover .fw__tt,.fw__a:focus-visible~.fw__meta .fw__tt{background-size:100% 1.5px;transform:translateX(.18em)}
/* the year's mask is sized to the year itself (not the title line), so it is fully hidden until the meta rises */
.fw__yrm{flex:none;align-self:center;font-size:.72rem;line-height:1.2;letter-spacing:.04em;color:var(--ink2)}
.fw__tag{margin-top:clamp(.5rem,.8vw,.8rem);max-width:46ch;font-size:1rem;line-height:1.4;letter-spacing:-.005em;color:var(--ink2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.fw__tag .fw__wm{padding-bottom:.14em;margin-bottom:-.14em}

/* the card media that grows into the project panel */
.fw-ghost{position:fixed;z-index:1150;overflow:hidden;border-radius:20px;pointer-events:none;will-change:left,top,width,height}
.fw-ghost .fw__p{position:absolute;inset:-8% 0}
.fw-ghost img,.fw-ghost .fw-ghost__cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fw-ghost .fw__bd{inset:-12%;width:124%;height:124%}
.fw-ghost .fw__fr img,.fw-ghost .fw__fr .fw-ghost__cv{inset:0;width:100%;height:100%}
.fw-ghost .fw__fr--screen img,.fw-ghost .fw__fr--screen .fw-ghost__cv{object-fit:contain}

@media(max-width:760px){
  .work{margin-top:-40vh;border-radius:22px 22px 0 0}
  .work__head{grid-template-columns:1fr}
  .work__top>span:last-child{display:none}
  .work__lede{padding-bottom:0}
  .work__grid{grid-template-columns:1fr;row-gap:3rem}
  .fw__m{border-radius:16px}
  .fw__a{border-radius:16px}
  .fw__go{width:2.6rem;height:2.6rem;right:.8rem;top:.8rem;font-size:.95rem}
  .fw__t{font-size:clamp(1.7rem,7.6vw,2.3rem)}
  .fw__tag{font-size:.95rem}
  .fw__live{left:.8rem;bottom:.8rem}
  .fw__fr--screen{width:78%;border-radius:9px}
}
@media(prefers-reduced-motion:reduce){.fw__m{clip-path:none!important;scale:none;transition:none}.fw__dim{display:none}.fw.is-play .fw__live i{animation:none}.fw__tt,.fw__go,.fw__go i,.fw__st--live,.fw__st--live span{transition:none}.reel__ring,.reel__disc::after{animation:none}}