/* =====================================================================
   KEN PSALMS — V3 LAYER (in progress). Loads after v2.css.
   Remove this file's <link> to return to the flagship (v2) look.
   ===================================================================== */
:root{--e-cine:cubic-bezier(.77,0,.175,1);--e-settle:cubic-bezier(.16,1,.3,1)}

/* ---- Project → project: the incoming film rises over the outgoing one ---- */
.player.next-in{background:#000}
.player .next-shade{position:absolute;inset:0;z-index:20;background:#000;opacity:0;pointer-events:none}
.player .stage{will-change:translate,scale;transform-origin:50% 50%}
.player.next-in{will-change:translate}
/* outgoing chrome lifts away early, so the move reads as one clean gesture */
.player.next-out .title-block{transform:translate3d(0,-28px,0);opacity:0;transition:transform .75s var(--e-cine),opacity .5s ease}
.player.next-out .corner,.player.next-out .transport{opacity:0;transition:opacity .4s ease}
/* incoming chrome waits, then arrives like a title card */
.player.next-in .corner,.player.next-in .transport,.player.next-in .scrim{opacity:0}
.player.next-in .title-block > *{opacity:0;transform:translate3d(0,34px,0)}
.player.next-in.chrome-in .scrim{opacity:1;transition:opacity 1s ease}
.player.next-in.chrome-in .corner,.player.next-in.chrome-in .transport{opacity:1;transition:opacity .9s ease .35s}
.player.next-in.chrome-in .title-block > *{opacity:1;transform:none;transition:transform 1.15s var(--e-settle),opacity .8s ease}
.player.next-in.chrome-in .title-block > :nth-child(2){transition-delay:.06s}
.player.next-in.chrome-in .title-block > :nth-child(3){transition-delay:.12s}
.player.next-in.chrome-in .title-block > :nth-child(4){transition-delay:.18s}
.player.next-in.chrome-in .title-block > :nth-child(5){transition-delay:.24s}
.player.next-in.chrome-in .title-block > :nth-child(6){transition-delay:.3s}

/* ---- "Next Project" names the next film and previews its frame on hover ---- */
.player .next-project{position:relative;display:inline-flex;align-items:center;gap:10px}
.player .next-project .np-a{display:inline-block;transition:transform .6s var(--e-settle)}
.player .next-project:hover .np-a,.player .next-project:focus-visible .np-a{transform:translateX(6px)}
.player .np-card{position:absolute;top:calc(100% + 16px);right:0;width:clamp(200px,18vw,280px);display:block;pointer-events:none;
  opacity:0;transform:translate3d(0,-8px,0);clip-path:inset(0 0 100% 0);
  transition:opacity .45s ease,transform .7s var(--e-settle),clip-path .7s var(--e-settle)}
.player .np-img{display:block;aspect-ratio:16/9;background:#111 center/cover no-repeat;border:1px solid rgba(255,255,255,.14)}
.player .np-cap{display:block;margin-top:10px;text-align:right;font-family:var(--sans);font-weight:700;font-stretch:88%;font-size:.95rem;
  letter-spacing:-.005em;text-transform:none;color:var(--white);line-height:1.2}
.player .np-cap i{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:.85rem;color:var(--smoke);margin-bottom:2px}
.player .corner.tr:hover .np-card,.player .next-project:focus-visible .np-card{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (hover:none),(max-width:760px){.player .np-card{display:none}}

@media (prefers-reduced-motion:reduce){
  .player.next-in .title-block > *{transform:none}
  .player.next-out .title-block{transform:none}
}

/* =====================================================================
   PAGE → PAGE: same motion language as Next Project (cross-document View Transitions;
   Chrome/Edge 126+, Safari 18.2+). Other browsers get the soft .leaving fallback.
   ===================================================================== */
@view-transition{navigation:auto}
/* pages are complete at rest: the transition does the entrance, not an opacity:0 start */
.page{opacity:1;transform:none;transition:none}
::view-transition-group(root){animation-duration:1.05s}
::view-transition-old(root){animation:vtOut 1.05s var(--e-cine) both}
::view-transition-new(root){animation:vtIn 1.05s var(--e-cine) both}
@keyframes vtOut{to{transform:translate3d(0,-7%,0) scale(.975);opacity:.2}}
@keyframes vtIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the nav holds still while the page changes underneath it */
.nav{view-transition-name:site-nav}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav),::view-transition-new(site-nav){animation-duration:.35s}
/* opening a project: the clicked poster expands into the player; everything else dissolves */
::view-transition-group(hero-media){animation-duration:1.1s;animation-timing-function:var(--e-settle)}
::view-transition-old(hero-media),::view-transition-new(hero-media){animation-duration:.6s;height:100%;object-fit:cover}
html:active-view-transition-type(project)::view-transition-old(root){animation:vtFadeOut .55s ease both}
html:active-view-transition-type(project)::view-transition-new(root){animation:vtFadeIn .7s ease .2s both}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0}}
/* fallback (no View Transitions): a matching soft lift */
.leaving main,.leaving .footer{opacity:0;transform:translate3d(0,-2.5%,0);transition:opacity .42s ease,transform .5s var(--e-cine)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* project pages have no site nav: let the old one fade quickly instead of lingering over the player */
html:active-view-transition-type(project)::view-transition-old(site-nav){animation:vtFadeOut .28s ease both}

/* =====================================================================
   LISTEN MODE — the sound pill (every device) and the reel's live meter
   ===================================================================== */
.sound-toggle{left:max(20px,env(safe-area-inset-left));right:auto;width:auto;height:44px;border-radius:22px;padding:0 16px 0 14px;
  display:inline-flex;align-items:center;gap:10px;background:rgba(8,9,10,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sound-toggle .st-meter{display:inline-flex;align-items:center;gap:2px;height:16px}
.sound-toggle .st-meter i{display:block;width:2px;height:16px;background:currentColor;border-radius:1px;transform:scaleY(.18);transform-origin:50% 50%;transition:transform .12s linear}
.sound-toggle .st-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.sound-toggle.on{color:var(--white);border-color:rgba(157,182,194,.6)}
.sound-toggle.on .st-meter{color:var(--accent)}
/* the reel carries its own sound button (meter + label) while it's on screen */
.reel-sound{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer;color:#cfd1d4}
.reel-sound .st-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.reel-sound:hover{color:#fff}
.reel-sound:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.reel-meter{display:inline-flex;align-items:center;gap:2px;height:18px}
.reel-meter i{display:block;width:2px;height:18px;background:currentColor;transform:scaleY(.08);transform-origin:50% 50%;transition:transform .1s linear}
.listening .reel-sound{color:var(--accent)}
.listening .reel-sound .st-label{color:var(--white)}
.reel-lower{grid-template-columns:minmax(0,1fr) auto auto auto}
.reel-in-view .sound-dock{opacity:0;pointer-events:none;transform:translateY(8px)}
.sound-toggle{transition:opacity .4s ease,transform .5s var(--e-settle),color .25s,border-color .25s}
@media (max-width:760px){
  .reel-lower{grid-template-columns:minmax(0,1fr) auto}
  .reel-snd{grid-column:1/-1;order:4;justify-self:start}
}

/* intro: the choice to enter with sound or in silence */
.intro-choose{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px;opacity:0;animation:introChoose .8s 1s var(--e-settle) forwards}
.intro-btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);background:transparent;
  border:1px solid rgba(255,255,255,.32);padding:14px 20px;min-height:46px;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.intro-btn.on{background:var(--white);color:var(--black);border-color:var(--white)}
.intro-btn:hover{border-color:var(--white)}
.intro-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes introChoose{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sound-toggle .st-meter i,.reel-meter i{transition:none}.intro-choose{animation:none;opacity:1}}

/* =====================================================================
   END CREDITS — a real end-credits roll over the dimmed film
   ===================================================================== */
.endcredits{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;transition:opacity .7s ease,visibility 0s linear .7s;
  background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 22%,rgba(0,0,0,.72) 78%,rgba(0,0,0,.92) 100%)}
.endcredits.open{visibility:visible;opacity:1;transition:opacity .7s ease}
.credits-open .title-block,.credits-open .corner,.credits-open .scrim{opacity:0;transition:opacity .5s ease}
.ec-bar{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:2;display:flex;gap:8px}
.ec-bar button{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:rgba(8,9,10,.5);
  border:1px solid rgba(255,255,255,.24);padding:10px 14px;min-height:44px;cursor:pointer;transition:border-color .25s}
.ec-bar button:hover{border-color:#fff}
.ec-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ec-view{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
.ec-crawl{position:absolute;left:0;right:0;top:0;will-change:transform;padding:0 max(20px,env(safe-area-inset-left)) 40vh;text-align:center}
.ec-title{padding-bottom:9vh}
.ec-k{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--smoke);margin:0 0 8px}
.ec-title h2{margin:0;font-weight:800;font-stretch:78%;text-transform:uppercase;letter-spacing:-.02em;line-height:.88;font-size:clamp(2.6rem,7vw,6.5rem);text-wrap:balance}
.ec-award{margin:18px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.ec-block{padding-bottom:9vh}
.ec-h{margin:0 0 22px;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.ec-block dl{margin:0;display:grid;gap:12px}
.ec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:baseline}
.ec-row dt{text-align:right;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.ec-row dd{margin:0;text-align:left;font-family:var(--sans);font-size:clamp(1rem,1.25vw,1.15rem);color:var(--white);letter-spacing:-.003em}
.ec-sound .ec-row dd{font-weight:700;font-stretch:90%;font-size:clamp(1.15rem,1.7vw,1.5rem)}
.ec-sound .ec-row:first-child dd{color:var(--white)}
.ec-sound .ec-h{color:var(--accent)}
.ec-slate{padding-top:6vh;display:grid;justify-items:center;gap:8px}
.ec-wm{margin:0;font-weight:800;font-stretch:76%;text-transform:uppercase;letter-spacing:-.02em;line-height:.85;font-size:clamp(3rem,9vw,7.5rem)}
.ec-role{margin:6px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.ec-acc{margin:0;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--white)}
.ec-next{margin-top:26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  border:1px solid rgba(255,255,255,.32);padding:14px 20px;min-height:46px;display:inline-flex;align-items:center;gap:10px;transition:border-color .25s,background .25s}
.ec-next:hover{border-color:#fff;background:rgba(255,255,255,.06)}
/* reduced motion: a still list you scroll yourself */
.ec-view.still{overflow-y:auto;-webkit-mask:none;mask:none}
.ec-view.still .ec-crawl{position:relative;padding-top:18vh}
@media (max-width:760px){
  .ec-row{grid-template-columns:1fr;gap:2px;text-align:center}
  .ec-row dt,.ec-row dd{text-align:center}
  .ec-block dl{gap:16px}
}
.credits-open .transport{opacity:0;pointer-events:none;transition:opacity .5s ease}

/* =====================================================================
   VOLUME — sound starts at 45%; a slim slider (on while listening) takes it to 100%
   ===================================================================== */
.sound-dock{position:fixed;z-index:65;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:6px;transition:opacity .4s ease,transform .5s var(--e-settle)}
.sound-dock .sound-toggle{position:relative;left:auto;right:auto;bottom:auto}
.sound-dock .lvol{height:44px;padding:0 14px;border-radius:22px;background:rgba(8,9,10,.62);border:1px solid var(--line-d);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.reel-snd{display:inline-flex;align-items:center;gap:14px}
.lvol{display:inline-flex;align-items:center;gap:10px;opacity:0;visibility:hidden;translate:-8px 0;
  transition:opacity .35s ease,translate .5s var(--e-settle),visibility 0s .35s}
.listening .lvol{opacity:1;visibility:visible;translate:0 0;transition:opacity .35s ease,translate .5s var(--e-settle),visibility 0s}
.lvol input{-webkit-appearance:none;appearance:none;width:96px;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:none}
.lvol input::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--accent) var(--p,45%),rgba(255,255,255,.22) var(--p,45%))}
.lvol input::-moz-range-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--accent) var(--p,45%),rgba(255,255,255,.22) var(--p,45%))}
.lvol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--white);border:0;transition:transform .2s var(--e-settle)}
.lvol input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--white);border:0}
.lvol input:active::-webkit-slider-thumb{transform:scale(1.25)}
.lvol input:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.lvol-v{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#cfd1d4;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.lvol-v::after{content:"%";color:var(--smoke)}

/* =====================================================================
   WORK — REEL VIEW (desktop: stage + scrub strip)
   ===================================================================== */
.toggle .pill{width:calc(100% / 3)}
.toggle.reel .pill{transform:translateX(200%)}
#view-reel.on{display:block}
.rv-stage{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 300px);min-height:340px;overflow:hidden;
  background:var(--char);color:var(--white);isolation:isolate}
.rv-layer{position:absolute;inset:0;opacity:0;will-change:opacity}
.rv-layer img,.rv-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rv-layer video{opacity:0;transition:opacity .7s var(--e-settle)}
.rv-layer.vid video{opacity:1}
.rv-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.5) 0,rgba(8,9,10,0) 20%,rgba(8,9,10,0) 50%,rgba(8,9,10,.85) 100%)}
.rv-top{position:absolute;z-index:4;top:clamp(16px,2vw,28px);left:clamp(18px,2.4vw,36px);right:clamp(18px,2.4vw,36px);
  display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#cfd1d4}
.rv-no{font-variant-numeric:tabular-nums}
.rv-tr{display:inline-flex;align-items:center;gap:14px}
.rv-meter{display:inline-flex;align-items:center;gap:2px;height:14px;color:var(--accent);opacity:0;transition:opacity .4s}
.listening .rv-meter{opacity:1}
.rv-meter i{display:block;width:2px;height:14px;background:currentColor;transform:scaleY(.08);transition:transform .1s linear}
.rv-meta{position:absolute;z-index:4;left:clamp(18px,2.4vw,36px);right:34%;bottom:clamp(20px,2.6vw,40px)}
.rv-mi{display:flex;flex-direction:column;gap:4px}
.rv-client{font-family:var(--sans);font-weight:700;font-stretch:var(--cond);font-size:clamp(2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.02em}
.rv-title{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.6rem);color:#e4e4e1}
.rv-title:empty{display:none}
.rv-sub{margin-top:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#a9abaf}
.rv-watch{position:absolute;z-index:4;right:clamp(18px,2.4vw,36px);bottom:clamp(20px,2.6vw,40px);display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:0 20px;min-height:46px;border:1px solid rgba(255,255,255,.38);
  transition:background .35s,color .35s,border-color .35s}
.rv-stage:hover .rv-watch,.rv-stage:focus-visible .rv-watch{background:var(--white);color:var(--black);border-color:var(--white)}
.rv-stage:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.rv-rail{position:relative;display:flex;gap:2px;height:76px;margin-top:14px;align-items:flex-end;cursor:ew-resize}
.rv-tick{flex:1 1 0;min-width:0;height:100%;background:#1b1c1f center/cover no-repeat;transform:scaleY(.38);transform-origin:50% 100%;
  opacity:.4;filter:grayscale(1);transition:transform .55s var(--e-settle),opacity .4s ease,filter .4s ease}
.rv-tick[hidden]{display:none}
.rv-rail:hover .rv-tick{opacity:.55}
.rv-tick.near{transform:scaleY(.6);opacity:.7}
.rv-tick.on{transform:scaleY(1);opacity:1;filter:none}
.rv-tick:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.rv-head{position:absolute;left:0;top:-8px;bottom:0;width:1px;background:var(--accent);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.rv-rail.scrub .rv-head{opacity:1}
.rv-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px}
.rv-hint{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.rv-on .sound-dock{opacity:0;pointer-events:none;transform:translateY(8px)}

/* =====================================================================
   PHONES — the full-screen vertical reel
   ===================================================================== */
.rm-open,.rm-open body{overflow:hidden}
.rm{position:fixed;inset:0;z-index:200;background:var(--black);color:var(--white)}
.rm-scroll{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.rm-scroll::-webkit-scrollbar{display:none}
.rm-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:24px;padding:calc(64px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom))}
.rm-bg{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.15);opacity:.5}
.rm-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.55),rgba(8,9,10,.35) 40%,rgba(8,9,10,.92))}
.rm-media{position:relative;width:100%;aspect-ratio:16/9;background:#000;flex:none;cursor:pointer}
.rm-media img,.rm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rm-media video{opacity:0;transition:opacity .6s ease}
.rm-slide.vid .rm-media video{opacity:1}
.rm-meta{position:relative;display:flex;flex-direction:column;gap:4px;padding:0 20px}
.rm-cat,.rm-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#a9abaf}
.rm-sub{margin-top:8px}
.rm-client{font-family:var(--sans);font-weight:700;font-stretch:var(--cond);font-size:clamp(2rem,9vw,2.8rem);line-height:.95;letter-spacing:-.02em;margin-top:6px}
.rm-title{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:#e4e4e1}
.rm-watch{margin-top:18px;align-self:flex-start;min-height:46px;display:inline-flex;align-items:center;gap:10px;padding:0 20px;
  background:var(--white);color:var(--black);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.rm-bar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:calc(8px + env(safe-area-inset-top)) 8px 8px 20px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(8,9,10,.7),rgba(8,9,10,0))}
.rm-no{font-variant-numeric:tabular-nums;margin-right:auto}
.rm-close{min-height:44px;min-width:44px;padding:0 12px;background:none;border:0;color:var(--white);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.rm-close:focus-visible{outline:1px solid var(--accent);outline-offset:-4px}
.rm-vol{position:absolute;z-index:3;top:calc(56px + env(safe-area-inset-top));right:20px}
.rm-vol .lvol input{width:120px}
.rm-hint{position:absolute;z-index:3;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));margin:0;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);transition:opacity .5s}
.rm.moved .rm-hint{opacity:0}

@media (prefers-reduced-motion:reduce){
  .rv-tick,.rv-layer video,.rm-media video,.lvol{transition:none}
  .rv-meter i{transition:none}
}
.rv-foot .reel-snd{flex-direction:row-reverse}

/* =====================================================================
   THUMBNAIL FRAMING — each poster carries its own vertical focus (posterFocusY in
   content.js, editable in the admin), so wide crops keep heads, faces and product tops
   in frame instead of slicing through the middle. The widest card is now 2:1, not 2.39:1,
   which gives back headroom.
   ===================================================================== */
.poster canvas,.poster img,.poster video,.wposter canvas,.wposter img,.wposter video,
.rv-layer img,.rv-layer video,.rm-media img,.rm-media video{object-position:50% var(--fy,50%)}
@media (min-width:761px){#featured-grid.v2 .card.c12 .poster{aspect-ratio:2/1}}

/* =====================================================================
   WORK BAR — one row, two jobs. What to show (filters, left) and how to show it (view,
   right). Filters are quiet text tabs, so the view switch is the only boxed control and
   there's one white "active" state instead of two. Counts live on the filters only; the
   separate "32 Projects" line repeated them, so it now speaks to screen readers only.
   ===================================================================== */
.work-bar{align-items:center;justify-content:space-between}
.work-bar .filters{order:1;margin-left:0;gap:clamp(14px,2.2vw,30px)}
.work-bar #view-toggle{order:2}
.filters button{border:0;background:none;padding:0;min-height:44px;position:relative;color:var(--smoke)}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--white);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e-settle)}
.filters button:hover{color:var(--white);border:0}
.filters button[aria-pressed="true"]{color:var(--white);background:none}
.filters button[aria-pressed="true"]::after{transform:scaleX(1)}
.filters button[aria-pressed="true"] sup{color:var(--accent)}
.filters button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
#work-count{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .work-bar{align-items:stretch}
  .work-bar .filters{order:1;width:100%;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}
  .work-bar #view-toggle{order:2;align-self:flex-start}
}

/* 404: the grain layer needs a positioned parent, or it pokes out past the edge and the page scrolls sideways */
.nf{position:relative}
/* phones: the player's small text controls get a full 44px finger target without changing how they look */
@media (hover:none),(max-width:760px){
  .player .corner a,.player .next-project,.transport .fs{position:relative}
  .player .corner a::before,.player .next-project::before,.transport .fs::before{content:"";position:absolute;inset:-14px -10px}
  .contact-info a.mail{padding:10px 0 4px;margin-top:0}
}

/* full films: the site's own 1080p/4K stream fades up over the poster on its first frame */
.player .stage .skiv-stage video.stream{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.player .stage .skiv-stage video.stream.on{opacity:1}
.player:fullscreen .stage .skiv-stage video.stream{object-fit:contain}
/* the film: tapping it turns the sound on; the cue is a button too */
.player .stage{cursor:pointer}
.player .son-cue{cursor:pointer;pointer-events:auto}
.player .son-cue:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.sound-on .son-cue{opacity:0;pointer-events:none;transition:opacity .4s}
@media (hover:none),(max-width:760px){
  .transport .sound{position:relative}
  .transport .sound::before{content:"";position:absolute;inset:-14px -8px}
}