/* MUUS 2027 case page. The standard (Entities/MUUS/case-studies-2027): client line, the film first, one line,
   slate, frames, one band of sourced numbers or one checkable fact, quote, credits, next step. About 150 words. */

/* the film first: full bleed on wide screens, the words on a deep fade in the lower left */
.case-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--off)}
.case-film{position:absolute;inset:0;z-index:-1}
.case-film .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-film .shade{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(0deg,rgb(12 14 15 / .95) 0%,rgb(12 14 15 / .62) 45%,rgb(12 14 15 / 0) 100%)}
.case-hero .band{max-width:calc(1040px + 2 * var(--pad))}
.case-hero .row{gap:16px}
.drift{animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08)}}

/* vertical films: the film stands in its own frame, never stretched to fill a wide screen */
.case-film--vertical .case-film{left:auto;right:var(--pad);top:calc(var(--hdr) + 3vh);bottom:6vh;width:auto;aspect-ratio:var(--ar,9/16);max-width:44vw}
.case-film--vertical .case-film .bg{object-fit:cover}
.case-film--vertical .case-film .shade{display:none}
.case-film--vertical .band{max-width:min(56vw,calc(900px + 2 * var(--pad)))}

/* phones: the film on top, the words below it on off black, so no line ever sits on a face or a product */
@media (max-width:760px){
  .case-hero{min-height:0;flex-direction:column;align-items:stretch;padding-top:var(--hdr)}
  .case-film,.case-film--vertical .case-film{position:relative;inset:auto;width:100%;max-width:none;aspect-ratio:4/5;right:auto;top:auto;bottom:auto}
  .case-film--vertical .case-film{aspect-ratio:var(--ar,9/14)}
  .case-film .shade{height:24%}
  .case-hero .band,.case-film--vertical .band{max-width:none;padding-top:22px;padding-bottom:36px}
}

.case-intro{padding-bottom:clamp(56px,7vw,112px)}
.case-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 32px;max-width:1480px;margin-inline:auto}
.case-line{grid-column:1 / span 8;max-width:24ch}
.case-slate{grid-column:9 / span 4;display:grid;gap:0;align-content:start}
.case-slate div{display:grid;grid-template-columns:96px 1fr;gap:16px;border-top:1px solid var(--b16);padding:16px 0}
.case-slate dt{font:500 11px/1.6 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58)}
.case-slate dd{color:var(--b88);font-size:16px;line-height:1.5}
.case-body{grid-column:1 / span 7;font-size:clamp(16px,1.2vw,20px)}
@media (max-width:960px){.case-line,.case-slate,.case-body{grid-column:1 / -1}}

/* frames: a long run of big pictures with almost no words */
.frames{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,1vw,16px);padding:0 var(--pad) clamp(56px,7vw,112px);max-width:calc(1720px + 2 * var(--pad));margin-inline:auto}
.fr{grid-column:span 6;background:var(--lift);overflow:hidden}
.fr img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.fr--wide{grid-column:1 / -1}
.fr--wide img{aspect-ratio:21/9}
.fr--tall{grid-column:span 4}
.fr--tall img{aspect-ratio:9/16;max-height:88vh}
@media (max-width:760px){.fr,.fr--tall{grid-column:1 / -1}.fr--wide img{aspect-ratio:16/10}.fr--tall img{aspect-ratio:4/5}}

.case-result{display:grid;gap:24px;border-top:1px solid var(--b08)}
.case-result .nums{max-width:1100px;margin-top:8px}
.case-result .src{margin-top:20px}
.fact{max-width:28ch}
.case-quote{background:var(--lift)}
.case-quote figure{display:grid;gap:24px;max-width:1100px}
.case-quote blockquote{max-width:22ch}
.case-credits{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px);border-top:1px solid var(--b08)}
.case-slate--row{grid-column:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1480px;margin-inline:auto}
.case-slate--row div{grid-template-columns:1fr;gap:8px}
.case-slate--row .rx{display:flex}
@media (max-width:760px){.case-slate--row{grid-template-columns:1fr 1fr}}

.case-next{color:var(--bone)}
.case-next .bg{transition:transform .9s var(--ez)}
.case-next:hover .bg{transform:scale(1.03)}
.case-next .d2{max-width:16ch}

/* phones held sideways (sitemobile, 23 Oct): the film on top and the words below it, as on a phone held upright, so no line
   sits on a face or a product */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .case-hero{min-height:0;flex-direction:column;align-items:stretch;padding-top:var(--hdr)}
  .case-film,.case-film--vertical .case-film{position:relative;inset:auto;width:100%;max-width:none;aspect-ratio:16/9;right:auto;top:auto;bottom:auto}
  .case-film--vertical .case-film{width:auto;height:calc(100svh - var(--hdr) - 24px);aspect-ratio:var(--ar,9/16);margin:0 auto}
  .case-film .shade{display:none}
  .case-hero .band,.case-film--vertical .band{max-width:none;padding-top:22px;padding-bottom:36px}
}

/* System frames (24 Oct): the film full bleed at every size, the title block laid in its calm lower corner. Vertical films keep
   their own upright frame on wide screens (never stretched) and fill the phone, which is their shape */
.case-hero.sf .case-film .shade{display:none}
@media (max-width:760px){
  .case-hero.sf{min-height:100svh;flex-direction:row;align-items:flex-end;padding-top:0}
  .case-hero.sf .case-film,.case-hero.sf.case-film--vertical .case-film{position:absolute;inset:0;width:100%;max-width:none;aspect-ratio:auto;top:0;bottom:0;right:0}
}
@media (min-width:761px){.case-film--vertical.sf .tb{--tbw:min(520px,44vw)}}
/* phones held sideways (sitefix, 24 Oct): the film full bleed as on a wide screen, the copy on it; a vertical film stands in its
   own upright frame on the right and the copy sits beside it */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .case-hero.sf{min-height:100svh;flex-direction:row;align-items:flex-end;padding-top:0}
  .case-hero.sf .case-film{position:absolute;inset:0;width:100%;height:auto;max-width:none;aspect-ratio:auto;margin:0}
  .case-hero.sf.case-film--vertical .case-film{inset:calc(var(--hdr) + 8px) calc(var(--fi) * 2 + 8px) calc(var(--fi) * 2) auto;width:auto;aspect-ratio:var(--ar,9/16)}
  .case-hero.sf.case-film--vertical .tb{--tbw:min(440px,52vw)}
}
/* short phones: a close up film (the face fills it) rides up under the header, so the copy below clears the face */
@media (max-width:760px) and (max-height:720px){
  .case-hero.sf:is(.hold-ph,.case-hero--hold) .case-film,.case-hero.sf.case-film--vertical:is(.hold-ph,.case-hero--hold) .case-film{top:-18svh;bottom:18svh}
}
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){.case-hero.sf.case-film--vertical .tb{--tbw:min(400px,46vw)}}