/* Research match recordings share the article's figure layout. */
.article .match-demo {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--site-nav-height, 90px) + 28px);
}
.match-demo .figure-top { margin-bottom: 18px; }
.match-demo .figure-top h3 { margin: 0; }
.article .match-demo .match-context { font-size: 15px; line-height: 1.65; margin: 0 0 24px; }
.match-demo .watch-matches { display: flex; gap: 8px; }
.match-demo .watch-matches button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  font: 500 13px/1.4 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.match-demo .watch-matches button:hover { background: #eae3d6; }
.match-demo .watch-matches button[aria-pressed="true"] {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
  background: #f0e6d8;
}
.match-demo :is(button, a):focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.match-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 642 / 528;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #091923;
  color-scheme: dark;
}
.article .match-demo figcaption { margin-top: 16px; font-size: 12px; line-height: 1.6; }
.match-demo #match-caption { display: block; color: var(--ink); font-weight: 500; }
.match-demo #match-player-note { display: block; margin-top: 4px; }
.match-demo .watch-open { display: inline-block; margin-top: 10px; color: var(--ink); text-underline-offset: 4px; }
.article .match-demo .match-error { font-size: 14px; }
@media (max-width: 600px) {
  .match-demo .figure-top { flex-direction: column; align-items: stretch; gap: 16px; }
  .match-demo .watch-matches button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .match-demo .watch-matches button { transition: none; }
}