/* 🎨 CSS variables (custom properties) keep our sizing consistent. */
:root {
  color-scheme: light dark;
  --page-max: 60rem;
}

/* 🧱 Basic typography + spacing for the page. */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
}

/* 📐 Centers the lesson content and limits line length for readability. */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* 📝 “Hint” text is still readable, just a little quieter than headings. */
.hint {
  margin-top: 0.25rem;
  opacity: 0.85;
}

.demo-title {
  margin: 2.25rem 0 0.25rem;
}

.photo {
  margin: 1.5rem 0 0;
  border-radius: 0.75rem;
  overflow: clip;
}

/* 🖼 Responsive image rule:
   - display:block removes the little “inline image” gap
   - width:100% makes the image fill the container
   - height:auto keeps the aspect ratio correct (no stretching) */
.photo picture,
.photo img {
  display: block;
  width: 100%;
}

.photo img {
  height: auto;
}

.photo figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  opacity: 0.9;
}