/*
 * /about only.
 *
 * Everything shared -- the showcase embed, .crumb, .zones, the colour scheme --
 * lives in landing.css now, because the front page and /install use the same
 * pieces and two copies drifted the moment one page changed.
 *
 * What is left is the one genuine difference: this page is a walkthrough of a
 * wide layout, so its prose column is a little wider than the other two.
 */
.about header,
.about main,
.about footer { max-width: 860px; }

/* --- the Twitch panel preview ------------------------------------------- */
/* Shown at Twitch's real 318x496 so the scale is honest -- a scaled-down or
   stretched preview would misrepresent how much actually fits. */
.ext-preview { margin-top: 2.6em; }
.ext-frames {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 1.2em 0 .6em;
}
.ext-frames figure { margin: 0; }
.ext-frames iframe {
  display: block; width: 318px; height: 496px;
  border: 1px solid var(--edge); border-radius: 8px;
  background: #0e0e10; color-scheme: dark;
}
.ext-frames figcaption {
  color: var(--dim); font-size: .8rem; margin-top: .5em; max-width: 318px;
}