/* VIDEOS — a screening room. Frames run edge to edge with the
   title burned into the bottom of the picture, never in a card. */

/* ---------- the featured frame ---------- */

.vhero{
  position:relative;
  min-height:clamp(520px,86svh,920px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.vhero__img{ position:absolute; inset:0; }
.vhero__img img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 42%;
  animation:vSettle 2.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vSettle{ from{ transform:scale(1.08); } to{ transform:none; } }
.vhero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,10,10,.96) 4%,rgba(11,10,10,.28) 52%,rgba(11,10,10,.72));
}
.vhero__copy{
  position:relative; z-index:2;
  width:100%;
  padding-block:clamp(28px,5vw,72px) clamp(30px,5vw,64px);
}
.vhero__title{
  font-variation-settings:"wdth" 62,"wght" 880;
  text-transform:uppercase;
  font-size:clamp(2.9rem,11.5vw,9.4rem);
  line-height:.82;
  letter-spacing:-.02em;
  margin:.16em 0 0;
}
.vhero__line{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(16px,3vw,34px);
  margin-top:clamp(18px,3vw,30px);
}
.vhero__dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--blood);
}

/* the play control — a red disc, the only round thing on the site */
.vplay{
  width:clamp(58px,7vw,88px);
  height:clamp(58px,7vw,88px);
  border-radius:50%;
  background:var(--blood);
  display:grid; place-items:center;
  flex:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.vplay::after{
  content:"";
  width:0;height:0;
  margin-left:.22em;
  border-left:clamp(15px,1.8vw,22px) solid #fff;
  border-block:clamp(9px,1.1vw,13px) solid transparent;
}
a:hover > .vplay,a:hover .vplay{ transform:scale(1.08); background:#F32C33; }

/* ---------- section heads ---------- */

.vhead{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px 40px;
  padding-block:clamp(38px,6vw,84px) clamp(16px,2.4vw,28px);
}
.vhead h2{
  font-variation-settings:"wdth" 70,"wght" 820;
  text-transform:uppercase;
  font-size:clamp(1.9rem,6vw,4.4rem);
  line-height:.9;
  margin:.2em 0 0;
}
.vhead__count{
  font-variant-numeric:tabular-nums;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);
}

/* ---------- the wall of frames ---------- */

.vwall{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(3px,.5vw,7px);
  padding-inline:clamp(3px,.5vw,7px);
}
.vtile{
  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
  color:var(--bone);
  grid-column:span 3;
  background:var(--ink-2);
}
.vtile--wide{ grid-column:span 4; }
.vtile--slim{ grid-column:span 2; }
.vtile--full{ grid-column:span 6; }
.vtile img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:grayscale(.32) contrast(1.04) brightness(.86);
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.vtile:hover img,.vtile:focus-visible img{
  transform:scale(1.045);
  filter:none;
}
.vtile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,10,10,.92) 0,rgba(11,10,10,.1) 46%,transparent 70%);
  pointer-events:none;
}
.vtile__cap > span{ display:block; }
.vtile__cap{
  position:absolute; z-index:2;
  left:clamp(12px,1.6vw,26px); right:clamp(12px,1.6vw,26px);
  bottom:clamp(10px,1.4vw,22px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.vtile__title{
  display:block;
  font-variation-settings:"wdth" 82,"wght" 760;
  text-transform:uppercase;
  font-size:clamp(.95rem,1.9vw,1.75rem);
  line-height:1.02;
  margin:0;
  text-wrap:balance;
  transition:color .3s ease;
}
.vtile--full .vtile__title,.vtile--wide .vtile__title{ font-size:clamp(1.05rem,2.4vw,2.35rem); }
.vtile:hover .vtile__title{ color:#fff; }
.vtile__sub{
  display:block;
  margin-top:7px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);
  font-variation-settings:"wdth" 100,"wght" 600;
}
.vtile__go{
  flex:none;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(239,233,227,.0);
  transform:translateY(6px);
  transition:color .3s ease, transform .3s ease;
  white-space:nowrap;
}
.vtile:hover .vtile__go,.vtile:focus-visible .vtile__go{
  color:var(--blood);
  transform:none;
}
/* a small red index in the corner of each frame, like a contact sheet */
.vtile__no{
  position:absolute; z-index:2;
  top:clamp(10px,1.3vw,18px); left:clamp(12px,1.6vw,26px);
  font-size:.66rem; letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:rgba(239,233,227,.6);
  mix-blend-mode:difference;
}

/* ---------- full-bleed still between reels ---------- */

.vstill{ position:relative; overflow:hidden; margin-top:clamp(40px,7vw,110px); }
.vstill img{ width:100%; height:clamp(300px,64vh,720px); object-fit:cover; }
.vstill figcaption{
  position:absolute; left:var(--gutter); bottom:18px; right:var(--gutter);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(239,233,227,.8);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
}

/* ---------- closing subscribe strip ---------- */

.vsub{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,72px);
  align-items:center;
  padding-block:clamp(52px,8vw,120px);
}
.vsub h2{
  font-variation-settings:"wdth" 62,"wght" 860;
  text-transform:uppercase;
  font-size:clamp(2.2rem,8vw,6.4rem);
  line-height:.86;
  margin:.18em 0 0;
}
.vsub h2 em{ font-style:normal; color:var(--blood); }
.vsub__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,3vw,32px); }

@media (max-width:1000px){
  .vtile--slim{ grid-column:span 3; }
  .vtile--wide{ grid-column:span 6; }
  .vsub{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .vwall{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .vtile,.vtile--wide,.vtile--slim,.vtile--full{ grid-column:span 2; }
  .vtile__no{ display:none; }
  .vtile__go{ display:none; }
  /* the wall runs edge to edge on purpose; the captions still need a
     real gutter, so they are inset from the frame rather than the page. */
  .vtile__cap{ left:16px; right:16px; bottom:14px; }
}