/* Git Quest case study: the play button and the screenshot. Tokens only; colour from CSS. */
.gq-play { margin: var(--space-6) 0; }
.gq-play a {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-5);
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font: 600 1rem/1 var(--font-draft); text-decoration: none; box-shadow: none;
}
.gq-play a:hover { background: var(--paper); color: var(--ink); }
.gq-play a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gq-play .icon.arrow { width: 18px; height: 18px; }
[dir="rtl"] .gq-play .icon.arrow { transform: scaleX(-1); }
.gq-play small { display: block; margin-top: var(--space-2); font-size: var(--text-small); color: var(--muted); }
/* 820px wide keeps the 16:9 shot plus caption under one laptop screen (1272x634 under the header). */
.gq-shot { margin: var(--space-6) 0; max-width: 820px; }
.gq-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.gq-shot figcaption { margin-top: var(--space-2); font-size: var(--text-small); color: var(--muted); }