/* media: the words step aside, the reel is the hero */
.mhead{padding-top:calc(var(--header-h) + clamp(56px,8vw,128px));padding-bottom:clamp(36px,4.4vw,72px)}
.mhead__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(24px,5vw,96px);align-items:end}
.mhead .display span{display:block}
.mhead .display{font-size:calc(clamp(3rem,8.4vw,7.8rem) * var(--k))}
.mhead .lede{padding-bottom:.9em}
.mreel{padding-bottom:clamp(24px,3vw,48px)}

/* video tile */
.tile{display:grid;gap:14px;text-align:left;align-content:start;color:inherit;min-width:0;transition:transform .16s var(--ease-out)}
.tile:active{transform:scale(.985)}
.tile__img{position:relative;display:block;overflow:hidden;background:var(--carbon);aspect-ratio:16/9}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.tile__play{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(12,11,9,.72);color:var(--cream);transition:background-color .2s ease,color .2s ease,transform .3s var(--ease-out)}
.tile__play svg{width:11px;height:11px;fill:currentColor;margin-left:2px}
.tile__cap{display:grid;gap:4px}
.tile__title{font-weight:500;font-size:1.0625rem;line-height:1.3;color:var(--cream)}
.on-ivory .tile__title{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .tile:hover .tile__img img{transform:scale(1.035)}
  .tile:hover .tile__play{background:var(--gold);color:#14110B;transform:scale(1.06)}
}

/* the airtime: a mosaic with one lead */
.airtime{padding-top:clamp(56px,7vw,120px)}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(14px,1.6vw,24px);margin-top:clamp(32px,4vw,64px)}
.mosaic .tile{grid-column:span 4}
.mosaic .tile--lead{grid-column:span 8;grid-row:span 2}
.mosaic .tile--lead .tile__img{aspect-ratio:auto;height:100%;min-height:clamp(280px,40vw,620px)}
.mosaic .tile--lead{grid-template-rows:minmax(0,1fr) auto}
.mosaic .tile--lead .tile__title{font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(clamp(1.3rem,2vw,1.8rem) * var(--k));letter-spacing:var(--h-track)}
.mosaic .tile--lead .tile__play{width:64px;height:64px;right:22px;bottom:22px}
.mosaic .tile:nth-child(n+4){grid-column:span 6}

/* the work in the room */
.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(32px,4vw,64px)}
.inroom__note{margin-top:clamp(56px,6vw,96px);padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--hair-l);display:grid;gap:8px}
.inroom__note + .rail{margin-top:clamp(22px,2.6vw,36px)}

/* the shots */
.shots__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(28px,3.4vw,56px)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,18vw,260px);grid-auto-flow:dense;gap:10px}
.g{overflow:hidden;background:var(--carbon)}
.g img{width:100%;height:100%;object-fit:cover}
.g--wide{grid-column:span 2}
.g--tall{grid-row:span 2}

/* also on screen: one strip of three loops; the one under the cursor opens up */
.screen{border-top:1px solid var(--hair-d)}
.screen__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,6vw,120px);align-items:end}
.screen__grid .body{max-width:44ch}
.credits{display:flex;gap:6px;height:clamp(260px,26vw,440px);margin-top:clamp(32px,4vw,64px)}
.credit{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--carbon);transition:flex .65s var(--ease-out)}
.credit__media{position:absolute;inset:0;display:block}
.credit__loop{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease-out)}
.credit__cap{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:56px clamp(16px,1.6vw,24px) clamp(16px,1.6vw,22px);background:linear-gradient(0deg,rgba(12,11,9,.88),rgba(12,11,9,0));opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.credit__cap b{font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(clamp(1.05rem,1.4vw,1.3rem) * var(--k));letter-spacing:-.012em;line-height:1.2;color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .credits:hover .credit{flex-grow:.75}
  .credits:hover .credit:hover{flex-grow:2.6}
  .credits:hover .credit:not(:hover) .credit__loop{opacity:.55}
  .credit:hover .credit__cap{opacity:1;transform:none}
}
/* touch screens have no hover: titles always show */
@media (hover:none),(pointer:coarse){.credit__cap{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.credit,.credit__cap,.credit__loop{transition:none}}

.mclose{padding-block:clamp(110px,14vw,220px)}

@media (max-width:900px){
  .mhead__grid,.screen__grid{grid-template-columns:1fr}
  .credits{display:grid;height:auto;gap:10px}
  .credit{aspect-ratio:16/9;max-width:100%}
  .credit__cap{opacity:1;transform:none}
  .mhead .lede{padding-bottom:0}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic .tile,.mosaic .tile:nth-child(n+4){grid-column:span 1}
  .mosaic .tile--lead{grid-column:1 / -1;grid-row:auto}
  .mosaic .tile--lead .tile__img{min-height:0;aspect-ratio:16/10;height:auto}
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .rail::-webkit-scrollbar{display:none}
  .rail .tile{flex:0 0 78%;scroll-snap-align:start}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,38vw,240px);gap:8px}
}
@media (max-width:520px){
  .mosaic{grid-template-columns:1fr}
}