/* v3-work.css — GENERATED by tools/v3_work.py (WORK_CSS). Do not edit this file; edit the string there and rebuild.
   /work/ index (filter chips are CSS-only radios: no JS), /work/<slug>/ case pages, /studio/, /rights/. Tokens: v3.css. */

/* ------------------------------------------------------------------ /work/ head */
.wk-head{padding-bottom:calc(var(--section) * .35)}
.wk-head>.wrap>.label{display:flex;align-items:center;padding-top:var(--s-4);border-top:1px solid var(--line)}
.wk-h{margin-top:clamp(28px,4vw,56px)}
.wk-intro{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);margin-top:clamp(24px,3vw,40px)}
.wk-lede{grid-column:1/span 7;color:var(--fg-2);max-width:44ch}
@media (max-width:1023px){.wk-lede{grid-column:1/-1}}

/* filter chips: radios + labels; :has() does the filtering. Without :has() support the chips hide and every tile shows. */
.wk-filter{position:relative;border:0;margin:0 0 clamp(40px,5vw,72px);padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.wk-filter input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.wk-filter label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--line-strong);
  font:500 var(--fs-label)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);cursor:pointer;user-select:none;
  transition:color var(--t-micro) var(--ease-ui),box-shadow var(--t-micro) var(--ease-ui)}
.wk-filter input:checked+label{color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--fg-1)}
.wk-filter input:checked+label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.wk-filter input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover){.wk-filter label:hover{color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--fg-2)}}
@supports not selector(:has(*)){.wk-filter{display:none}}
.wk:has(#wk-f-video:checked) .wk-tile:not([data-line="video"]),
.wk:has(#wk-f-web:checked) .wk-tile:not([data-line="web"]),
.wk:has(#wk-f-app:checked) .wk-tile:not([data-line="app"]),
.wk:has(#wk-f-agent:checked) .wk-tile:not([data-line="agent"]){display:none}
.wk-notes{margin-top:var(--s-6)}
.wk-note{display:none;max-width:60ch;padding-top:var(--s-4);border-top:1px solid var(--line);color:var(--fg-2)}
.wk:has(#wk-f-web:checked) .wk-note[data-for="web"],
.wk:has(#wk-f-app:checked) .wk-note[data-for="app"],
.wk:has(#wk-f-agent:checked) .wk-note[data-for="agent"]{display:block}

/* composed rows (the "All" view on desktop): 8+4 · 5+7 offset · 12 · 4+4+4 · 7+5 offset */
.wk-grid{display:flex;flex-direction:column;gap:clamp(64px,7vw,128px)}
.wk-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;container-type:inline-size}
.wk-tile{min-width:0;display:flex;flex-direction:column;gap:var(--s-4)}
.r84>.wk-tile:nth-child(1){grid-column:1/span 8}
.r84>.wk-tile:nth-child(2){grid-column:9/span 4}
.r84>.wk-tile:nth-child(2) .wk-frame{aspect-ratio:8/9;height:calc(((100cqw - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)) * .5625)}
@supports (height:1cqw){.r84>.wk-tile:nth-child(2) .wk-frame{aspect-ratio:auto}}
.r57{align-items:end}
.r57>.wk-tile:nth-child(1){grid-column:1/span 5}
.r57>.wk-tile:nth-child(2){grid-column:7/span 6}
.r12>.wk-tile{grid-column:1/-1}
.r444>.wk-tile{grid-column:span 4}
.r444>.wk-tile:nth-child(2){margin-top:clamp(40px,6vw,112px)}
.r75{align-items:end}
.r75>.wk-tile:nth-child(1){grid-column:1/span 7}
.r75>.wk-tile:nth-child(2){grid-column:8/span 5}

/* the media box: true ratio for wide films, a 4:5 box with the film contained over a blurred copy for tall ones */
.wk-media{display:block;width:100%;color:inherit;cursor:pointer}
.wk-frame{position:relative;display:block;width:100%;overflow:hidden;background:var(--hero-black);aspect-ratio:var(--ar,16/9)}
.wk-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-frame>.wk-bg{display:none;filter:blur(30px) brightness(.38) saturate(1.1);transform:scale(1.18)}
.wk-frame[data-fit="contain"]>.wk-bg{display:block}
.wk-frame[data-fit="contain"]>.wk-img{object-fit:contain}
.wk-img{transition:transform var(--t-media) var(--ease-out)}
@media (hover:hover){.wk-media:hover .wk-img{transform:scale(1.025)}}
.wk-media:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.wk-frame--vid>.vid{position:absolute;inset:0;aspect-ratio:auto}
.wk-hit{position:absolute;inset:0;z-index:2}
.wk-frame--vid .vtog{z-index:4}

/* DN Assist tile: type, not a picture */
.wk-type{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-5);padding:clamp(20px,2.4vw,36px);background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);overflow:visible}
.wk-type>.label{display:flex;align-items:center}
.wk-type-h{font:500 clamp(28px,2.6vw,44px)/1.02 var(--font-display);letter-spacing:-.025em;text-wrap:balance;max-width:14ch}
.wk-type-p{color:var(--fg-2);font-size:16px;line-height:1.5;max-width:36ch}

.wk-cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wk-lab{color:var(--fg-2)}
.wk-t{margin-top:2px}
.wk-meta{color:var(--fg-3);font-size:var(--fs-small)}
.wk-cap .tlink{margin-top:4px}

/* tablet, and every filtered view from 768 px up: a uniform two-up grid */
@media (min-width:768px) and (max-width:1023px){
  .wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--gutter)}
  .wk-row{display:contents}
  .wk-tile{grid-column:auto!important;margin:0!important;align-self:start!important}
  .wk-tile .wk-frame{aspect-ratio:16/9!important;height:auto!important}
  .wk-tile .wk-img{object-fit:contain}
  .wk-tile .wk-frame>.wk-bg{display:block}
  .wk-tile .wk-frame.wk-type{aspect-ratio:auto!important;min-height:100%}
}
@media (min-width:1024px){
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--gutter)}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-row{display:contents}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-tile{grid-column:auto!important;margin:0!important;align-self:start!important}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-tile .wk-frame{aspect-ratio:16/9!important;height:auto!important}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-tile .wk-img{object-fit:contain}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-tile .wk-frame>.wk-bg{display:block}
  .wk:has(.wk-filter input:not([value="all"]):checked) .wk-tile .wk-frame.wk-type{aspect-ratio:auto!important;min-height:100%}
}
/* phone: one column; wide films at their true ratio, tall films in a 4:5 box */
@media (max-width:767px){
  .wk-grid{gap:var(--s-8)}
  .wk-row{grid-template-columns:minmax(0,1fr);row-gap:var(--s-8)}
  .wk-tile{grid-column:1/-1!important;margin:0!important}
  .r84>.wk-tile:nth-child(2) .wk-frame{height:auto;aspect-ratio:var(--ar,4/5)}
  .wk-type{aspect-ratio:auto!important;min-height:340px}
}

/* legend: the page's one paper band */
.wk-legend{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6)}
.wk-legend .st-label{grid-column:1/-1;display:flex;align-items:center;padding-top:var(--s-4);border-top:1px solid var(--paper-line)}
.wk-legend-h{grid-column:1/span 5}
.wk-legend-list{grid-column:7/-1;display:grid;gap:0}
.wk-legend-list>div{display:grid;grid-template-columns:minmax(0,12ch) minmax(0,1fr);gap:8px var(--gutter);padding:18px 0;border-top:1px solid var(--paper-line)}
.wk-legend-list>div:last-child{border-bottom:1px solid var(--paper-line)}
.wk-legend-list dt{font-size:clamp(20px,1.6vw,24px)}
.wk-legend-list dd{color:var(--paper-2);max-width:48ch}
@media (max-width:1023px){.wk-legend-h,.wk-legend-list{grid-column:1/-1}}
@media (max-width:599px){.wk-legend-list>div{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ case pages */
.cs-hero{position:relative;background:var(--hero-black)}
.cs-hero-in>.vid{width:100%;max-height:100svh}
html[data-hd="over"] .cs-hero .vtog{bottom:var(--s-5);right:var(--margin)}
/* phones: a taller dark stage with the film contained, so the header and the toggle sit on black, not on the picture */
@media (max-width:767px){
  .cs-hero-in>.vid{aspect-ratio:auto;height:clamp(300px,62svh,540px)}
  .cs-hero-in>.vid>img,.cs-hero-in>.vid>picture>img,.cs-hero-in>.vid>video{object-fit:contain}
}
.cs-hero--img{padding-top:var(--s-5);background:var(--ink)}
.cs-shot{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.cs-shot img{width:100%;height:auto;aspect-ratio:var(--ar);box-shadow:0 0 0 1px var(--line)}
.cs-head{padding-top:clamp(40px,5vw,80px);padding-bottom:calc(var(--section) * .5)}
.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:var(--s-4);border-top:1px solid var(--line)}
.cs-crumb a{color:var(--fg-2);min-height:24px;display:inline-flex;align-items:center}
@media (hover:hover){.cs-crumb a:hover{color:var(--fg-1)}}
.cs-title{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);align-items:end;margin-top:clamp(28px,4vw,56px)}
.cs-title .d1{grid-column:1/span 6}
.cs-sum{grid-column:8/-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.cs-sum .lede{max-width:34ch}
.cs-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
@media (max-width:1023px){.cs-title .d1,.cs-sum{grid-column:1/-1}}
.cs-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gutter);margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--line)}
.cs-meta>div{display:flex;flex-direction:column;gap:8px;padding-top:var(--s-4);min-width:0}
.cs-meta dd{font-size:16px;line-height:1.45;color:var(--fg-1);overflow-wrap:anywhere}
@media (max-width:1023px){.cs-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)}}
@media (max-width:599px){.cs-meta{grid-template-columns:minmax(0,1fr)}}
.cs-block{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-4)}
.cs-k{grid-column:1/span 3;padding-top:var(--s-4);border-top:1px solid var(--line);align-self:start}
.cs-body{grid-column:5/-1;padding-top:var(--s-4);border-top:1px solid var(--line);max-width:60ch;min-width:0}
.cs-body p{font-size:var(--fs-lede);line-height:1.35;letter-spacing:-.01em;color:var(--fg-1);text-wrap:pretty}
.cs-body p+p{margin-top:.9em}
.cs-body p.h3{font-size:var(--fs-h3)}
@media (max-width:1023px){.cs-k{grid-column:1/-1}.cs-body{grid-column:1/-1;border-top:0;padding-top:0}}
.cs-cmp,.cs-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--gutter);margin-top:clamp(32px,4vw,56px)}
.cs-frames[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.cs-frames[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-cmp-f,.cs-fr{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.cs-cmp-f figcaption{display:flex;flex-direction:column;gap:6px;color:var(--fg-2);font-size:15px}
.cs-cmp-m,.cs-fr-m{position:relative;aspect-ratio:var(--ar,16/9);background:var(--hero-black);overflow:hidden}
.cs-cmp-m img,.cs-fr-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-cmp-m{display:grid;place-items:center}
.cs-mark{width:58%;height:auto;overflow:visible}
.cs-mark .w{fill:#fff}.cs-mark .k{fill:var(--hero-black)}.cs-mark .r{fill:var(--red)}
.cs-frames[data-mix]{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
.cs-frames[data-mix] .cs-fr[data-tall]{grid-row:span 2}
@media (min-width:768px) and (max-width:1023px){.cs-frames[data-n="3"]:not([data-mix]){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .cs-cmp,.cs-frames,.cs-frames[data-n="3"],.cs-frames[data-mix]{grid-template-columns:minmax(0,1fr)}
  .cs-frames[data-mix] .cs-fr[data-tall]{grid-row:auto}
  .cs-fr[data-tall] .cs-fr-m{width:min(100%,calc(76svh * var(--arn,.5)));margin-inline:auto}
}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--gutter)}
.cs-stat{display:flex;flex-direction:column-reverse;gap:8px}
.cs-stat dd{font:500 var(--fs-h2)/1 var(--font-display);letter-spacing:-.025em}
.cs-note{margin-top:var(--s-5)}
@media (max-width:599px){.cs-stats{grid-template-columns:minmax(0,1fr)}}
.cs-credits>div{display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr);gap:8px var(--gutter);padding:12px 0;border-bottom:1px solid var(--line)}
.cs-credits dd{font-size:var(--fs-body)}
/* next case: a click target whose line fills as it scrolls into view (CSS scroll-driven where supported; never navigates itself) */
.cs-next{display:flex;flex-direction:column;gap:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--line)}
.cs-next-t{display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap}
.cs-next-t .go{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){.cs-next:hover .cs-next-t .go{transform:translateX(8px)}}
.cs-bar{display:block;height:2px;background:var(--line);overflow:hidden;margin-top:var(--s-4)}
.cs-bar i{display:block;height:100%;background:var(--fg-1);transform-origin:0 50%;transform:scaleX(.24)}
@supports (animation-timeline:view()){.cs-bar i{animation:cs-fill linear both;animation-timeline:view();animation-range:entry 10% cover 55%}}
@keyframes cs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.cs-bar i{animation:none!important;transform:scaleX(1)}}

/* ------------------------------------------------------------------ /studio/ */
.st-head>.wrap>.label,.rt-head>.wrap>.label{display:flex;align-items:center;padding-top:var(--s-4);border-top:1px solid var(--line)}
.st-h1{margin-top:clamp(28px,4vw,56px);max-width:16ch}
.st-lede{margin-top:clamp(24px,3vw,40px);max-width:40ch;color:var(--fg-2)}
.st-track{margin:clamp(40px,5vw,72px) 0 var(--s-5);color:var(--fg-2)}
.sh+.st-track{margin-top:0}
.st-pipe{border-top:1px solid var(--line)}
.st-pipe li{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,5fr);gap:var(--s-4) var(--gutter);align-items:baseline;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--line)}
.st-pipe li>span:last-child{color:var(--fg-2);max-width:44ch}
.st-pipe-more{margin-top:var(--s-6)}
@media (max-width:767px){.st-pipe li{grid-template-columns:32px minmax(0,1fr)}.st-pipe li>span:last-child{grid-column:2}}
.st-crafts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);border-top:1px solid var(--line)}
.st-crafts li{display:flex;flex-direction:column;gap:10px;padding:var(--s-5) var(--s-4) var(--s-6) 0;border-bottom:1px solid var(--line);min-width:0}
.st-crafts b{font-weight:500;overflow-wrap:break-word}
.st-crafts li>span:last-child{color:var(--fg-2);font-size:15px;line-height:1.45}
@media (max-width:1023px){.st-crafts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.st-crafts{grid-template-columns:minmax(0,1fr)}}
.st-rights{display:flex;flex-direction:column;gap:var(--s-5);max-width:62ch}
.st-rights>.label{padding-top:var(--s-4);border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ /rights/ */
.rt-head h1{margin-top:clamp(28px,4vw,56px)}
.rt-lede{margin-top:clamp(24px,3vw,40px);max-width:46ch}
.rt-list{border-top:1px solid var(--line)}
.rt-item{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-4);padding:clamp(28px,3.5vw,48px) 0;border-bottom:1px solid var(--line)}
.rt-item>.label{grid-column:1/span 1;padding-top:.6em}
.rt-t{grid-column:2/span 4}
.rt-p{grid-column:7/-1;color:var(--fg-2);max-width:62ch}
.rt-p p+p{margin-top:1em}
.rt-p .tlink{margin-top:.4em}
.rt-foot{margin-top:var(--s-6);max-width:70ch}
@media (max-width:1023px){.rt-item>.label{grid-column:1/-1;padding-top:0}.rt-t,.rt-p{grid-column:1/-1}}