/* FILMS / YOUTUBE / PERSONAL — the category pages. They sit on the case-page system
   (work/case.css: bar, hero, close, next, footer) and add the home page's media frames. */
.media{padding-block:clamp(48px,7vw,110px)}
.media .lede{font-size:clamp(18px,1.6vw,24px);max-width:56ch;color:var(--quiet);margin-bottom:clamp(30px,4vw,56px)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(34px,4vw,64px) clamp(14px,1.8vw,26px);align-items:start}
.clip{margin:0;scroll-margin-top:90px}
.clip .v{position:relative;overflow:clip;background:rgba(42,64,113,.08)}
.clip video{display:block;width:100%;height:100%;object-fit:cover}
.clip .sound{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}
.clip .sound span.btn{position:absolute;right:16px;bottom:16px;height:32px;padding:0 12px 0 10px;gap:6px;background:var(--navy);
  color:var(--yel);border-color:var(--navy);font-size:11px}
.clip .sound[aria-pressed=true] span.btn{background:var(--red);border-color:var(--red)}
.spk{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.spk .cone{fill:currentColor;stroke:none}
.sound[aria-pressed=false] .spk .w,.sound[aria-pressed=true] .spk .x{display:none}
.clip .sound:focus-visible{outline:none}
.clip .sound:focus-visible span.btn{outline:2px solid var(--yel);outline-offset:3px}
@media (hover:hover){.clip:hover .sound span.btn{background:var(--red);border-color:var(--red)}}
.clip .tag{position:absolute;right:16px;bottom:16px;padding:8px 11px;border-radius:999px;background:var(--navy);color:var(--yel);font-size:11px}
.clip figcaption{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.clip figcaption .lab{color:var(--quiet)}
.clip figcaption .g{font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;line-height:1}
.clip figcaption .s{font-size:clamp(15px,1.15vw,18px);color:var(--quiet)}
.clip figcaption a{color:inherit}
.c-wide{grid-column:1/-1}.c-wide .v{aspect-ratio:16/9}
.c-sq{grid-column:span 6}.c-sq .v{aspect-ratio:1/1}
.c-v{grid-column:span 3}.c-v .v{aspect-ratio:9/16}
.frow{grid-column:1/-1;display:grid;grid-template-columns:16fr 9fr 9fr;gap:inherit;align-items:start}
.frow>.clip{grid-column:auto}
.clip .v,.tlist .frame{border-radius:22px;border:2px solid var(--navy)}
.navy .clip .v,.navy .tlist .frame{border-color:rgba(255,238,167,.3)}
@supports (corner-shape:squircle){.clip .v,.tlist .frame{corner-shape:squircle;border-radius:34px}}
/* YouTube: each thumbnail at the size it is judged at in the feed, beside its video's title */
.tlist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,60px) clamp(14px,1.8vw,26px)}
.tlist .tplay{display:block}
.tlist .frame{position:relative;display:block;margin:0;overflow:clip;aspect-ratio:16/9}
.tlist img{width:100%;height:100%;object-fit:cover}
.tlist .lab{display:block;margin-top:14px;color:var(--quiet)}
.tlist .tt{display:block;margin-top:6px;font-size:clamp(16px,1.25vw,19px);font-weight:600;line-height:1.3}
.craft{margin-top:clamp(48px,6vw,90px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:4fr 8fr;gap:clamp(18px,3vw,48px)}
.craft p{font-size:clamp(18px,1.5vw,22px);max-width:56ch}
@media (max-width:760px){
  .c-sq{grid-column:1/-1}.c-v{grid-column:span 6}
  .frow{grid-template-columns:1fr 1fr}.frow>.c-sq{grid-column:1/-1}
  .tlist{grid-template-columns:1fr}
  .craft{grid-template-columns:1fr}}
.next2{display:grid;gap:clamp(26px,3.4vw,48px)}
.next2 a + a .g{font-size:clamp(34px,6vw,100px)}
.tlist li{scroll-margin-top:100px}
.tlist li:target figure{outline:2px solid var(--red);outline-offset:4px}