/* SkySutra course pages: a few touches on top of site.css and course.css.
   SkySutra's own colours: night blue, and astronomy blue for its notes and review questions. */
body.skysutra { --apex: #0B1026; --astro: #2457B8; }
@media (prefers-color-scheme: dark) { body.skysutra:not([data-theme="light"]) { --astro: #7FB2FF; } }
.skysutra .prose blockquote { border-left-color: var(--astro); }
.skysutra .prose details.check summary span { color: var(--astro); }

/* Screenshots of the finished app: the home page gallery and one per part page */
.skysutra #screens { max-width: 1120px; }
.skysutra .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
.skysutra .shots .lead { grid-column: 1 / -1; }
.skysutra figure.shot { margin: 0; }
.skysutra figure.shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule);
  background: #0B1026; box-shadow: 0 10px 30px rgb(11 16 38 / 0.18); }
.skysutra figure.shot figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 12px; text-align: left; }
.skysutra figure.shot figcaption b { color: var(--text); margin-right: 4px; }
.skysutra figure.shot figcaption .part { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--astro); border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; margin-right: 6px; text-decoration: none; }
.skysutra .phone-row { max-width: 760px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; margin-top: 40px; text-align: left; }
.skysutra .phone-row img { width: 220px; height: auto; border-radius: 28px; border: 1px solid var(--rule); background: #0B1026; }
.skysutra .phone-row h3 { margin: 0 0 8px; }
.skysutra .phone-row p { color: var(--muted); margin: 0 0 12px; }
.skysutra figure.part-shot { max-width: 1024px; margin: 0 auto 36px; padding: 0 22px; }
@media (max-width: 720px) {
  .skysutra .shots { grid-template-columns: 1fr; gap: 24px; }
  .skysutra .phone-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .skysutra .phone-row img { width: 220px; }
}