/* The explainer alternates a scene, a close-up and a plan view. */
.blog-explainer { padding-bottom:72px; }
.explainer-prose { margin-inline:auto; }
.blog-explainer h1 { text-wrap:balance; }
.blog-explainer .explainer-prose > p { line-height:1.95; color:#c9d1dc; }
.blog-explainer .explainer-prose > .blog-kicker { color:#ffb77e; }
.blog-explainer .blog-meta { color:var(--dim); font-size:13px; }
.blog-explainer section { margin-top:52px; }
.blog-explainer h2 { font-size:clamp(23px,2.4vw,29px); line-height:1.5; margin-bottom:20px; }
.blog-explainer figure { margin-block:30px; }
.blog-explainer img { display:block; width:100%; height:auto; border-radius:8px; }
.blog-explainer .explainer-cover { margin-block:30px 38px; }
.blog-explainer figcaption { margin:13px 0 0; line-height:1.8; font-size:13px; }
.blog-explainer .explainer-diagram { max-width:880px; margin-inline:auto; }
.blog-explainer .explainer-parallax { max-width:680px; margin-inline:auto; }
.explainer-video { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:#000; scroll-margin-top:100px; }
.explainer-video iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.explainer-legend { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:8px; }
.explainer-legend > span { display:inline-flex; gap:8px; align-items:center; }
.explainer-legend i { display:inline-block; width:12px; height:12px; flex-shrink:0; }
.legend-column { background:#c67f52; border-radius:50%; }
.legend-object { background:#527368; border-radius:2px; }
.explainer-reading { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:26px; }
.explainer-sources { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.blog-explainer .explainer-sources h2 { font-size:17px; margin:0 0 12px; }
.blog-explainer .explainer-sources p { font-size:14px; color:var(--dim); }
.explainer-sources ul { padding-left:20px; font-size:14px; color:var(--dim); }
.explainer-sources li { margin:8px 0; }
.explainer-sources a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) {
  .blog-explainer { padding-top:20px; padding-bottom:48px; }
  .blog-explainer .blog-back { margin-bottom:14px; }
  .blog-explainer .blog-lead { font-size:17px; }
  .blog-explainer section { margin-top:38px; }
  .blog-explainer figure { margin-block:24px; }
  .blog-explainer .explainer-prose > p { line-height:1.9; }
}