/* Eye-level cut-ins: wide panels with straight artwork inside angled edges. */
.opening-ensemble .opening-artwork{
  inset:50% 28px auto 44%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px 5px;transform:translateY(-50%);overflow:visible;opacity:1;
}
.opening-ensemble .opening-rival{
  --cutin-edge:polygon(8% 0,100% 0,92% 100%,0 100%);
  position:relative;aspect-ratio:3.2;min-width:0;margin:0;border:0;clip-path:var(--cutin-edge);
  background:linear-gradient(120deg,#dbc59799,color-mix(in srgb,var(--rival-color) 65%,#738092) 55%,#253045);
}
.opening-ensemble .opening-rival:nth-child(8n+5),
.opening-ensemble .opening-rival:nth-child(8n+6),
.opening-ensemble .opening-rival:nth-child(8n+7),
.opening-ensemble .opening-rival:nth-child(8n+8){left:-9px}
.opening-ensemble .opening-crop{inset:1px;transform:none;clip-path:var(--cutin-edge)}
.opening-ensemble .opening-cropped-face{filter:saturate(.94) contrast(1.05)}
.opening-ensemble .opening-rival-shade{
  inset:1px;clip-path:var(--cutin-edge);
  background:linear-gradient(90deg,#080d1660,transparent 19%,transparent 82%,#080d1645),linear-gradient(0deg,#080d1640,transparent 32%,transparent 78%,#080d1620);
}
.opening-ensemble .opening-art-veil{inset:0 -12px;background:none}
.opening-ensemble.opening-enter .opening-rival{
  animation:opening-eye-in .5s cubic-bezier(.16,.74,.17,1) both;
  animation-delay:calc(var(--rival-order)*.026s);
}
@keyframes opening-eye-in{from{opacity:0;translate:24px 0;filter:brightness(1.5)}to{opacity:1;translate:0 0;filter:brightness(1)}}
@media(max-width:1100px){
  .opening-ensemble .opening-artwork{left:49%;right:16px;gap:7px 4px}
}
@media(max-width:900px) and (orientation:portrait){
  .opening-ensemble .opening{display:flex;flex-direction:column;min-height:0;height:auto;max-height:none;padding:8px 22px 18px;gap:24px}
  .opening-ensemble .opening-artwork{position:relative;inset:auto;flex:none;width:100%;max-width:650px;height:auto;gap:6px 3px;z-index:0;transform:none}
  /* Retain nearly the same eye height as the former three-column layout. */
  .opening-ensemble .opening-rival{aspect-ratio:2.55}
  .opening-ensemble .opening-rival:nth-child(8n+5),
  .opening-ensemble .opening-rival:nth-child(8n+6),
  .opening-ensemble .opening-rival:nth-child(8n+7),
  .opening-ensemble .opening-rival:nth-child(8n+8){left:-5px}
  .opening-ensemble .opening-content{padding:0;width:100%;max-width:400px;margin:0 auto}
  .opening-ensemble .opening-logo-block{margin-bottom:20px}
  .opening-ensemble .opening-overline{font-size:13px;margin-bottom:2px}
  .opening-ensemble .opening-logo>span{font-size:clamp(3.6rem,16vw,5.3rem)}
  .opening-ensemble .opening-logo>strong{font-size:clamp(4.5rem,21vw,6.8rem)}
  .opening-ensemble .opening-logo-rule{margin-top:4px}
  .opening-ensemble .opening-mode{min-height:83px;padding:11px 17px}
}
.compact-landscape .opening-ensemble .opening-artwork{
  inset:4px 12px 8px 49%;height:auto;gap:5px 3px;transform:none;
  grid-template-rows:repeat(var(--roster-rows),minmax(0,1fr));
}
.compact-landscape .opening-ensemble .opening-rival{aspect-ratio:auto}
.compact-landscape .opening-ensemble .opening-rival:nth-child(8n+5),
.compact-landscape .opening-ensemble .opening-rival:nth-child(8n+6),
.compact-landscape .opening-ensemble .opening-rival:nth-child(8n+7),
.compact-landscape .opening-ensemble .opening-rival:nth-child(8n+8){left:-4px}
.compact-landscape .opening-ensemble .opening-crop{inset:1px}
@media(prefers-reduced-motion:reduce){.opening-ensemble.opening-enter .opening-rival{animation:none}}