/* ---------- Building this site (design system case study) ----------
   Four sections in the 1196px column, 96px apart: planning, foundations,
   components, pages. Each opens with a numbered eyebrow + Display/M header
   (divider to the page edge) and a Body/M brief, then image blocks 48px
   below, 24px apart. Every image has an eyebrow label 8px above it. */

.cs-section.bd-section { margin-top: var(--space-2xl); }
.cs-intro + .cs-section.bd-section { margin-top: var(--space-2xl); }

.bd-head { margin-right: calc(50% - 50vw); } /* divider runs to the page edge */
.bd-head::after { content: ""; display: block; height: 1px; margin-top: 4px; background: var(--signal-orange); }
.bd-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
  color: var(--neutral-surface);
}
.bd-label {
  margin: 0 0 var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--neutral-hairline);
}
.bd-head .bd-label { margin-bottom: var(--space-xs); color: var(--signal-orange); }
.bd-brief { max-width: 954px; margin: 36px 0 0; font-size: 16px; line-height: 26px; color: var(--neutral-surface); }
.bd-note { margin: var(--space-xs) 0 0; font-size: 14px; line-height: 22px; color: var(--neutral-hairline); }

.bd-blocks { display: flex; flex-direction: column; gap: var(--space-md); margin-top: 48px; }
.bd-blocks figure { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; margin: 0; }

/* Justified row: images grow by their shape (--ar = w/h) and share a height */
.bd-row { display: flex; gap: var(--space-md); }
.bd-row > figure { flex: var(--ar) 1 0; }
.cs-section .bd-row img { aspect-ratio: var(--ar); object-fit: cover; }
.cs-section .bd-thumb { object-position: 50% 0; } /* thumbnails show the top of the design */

/* Notes and Claude snippets: two columns, each image at its own height */
.bd-notes { columns: 2; column-gap: var(--space-md); }
.bd-notes figure { break-inside: avoid; margin-bottom: var(--space-md); }

/* Small component states at their real size, side by side */
.bd-states { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--space-xl); } /* centered under the nav bar */
.bd-states figure { align-items: center; text-align: center; } /* each board centered under its label */
.cs-section .bd-states img { width: auto; max-width: 100%; height: auto; }

/* Pages gallery: three across, 4:3 tops of each page design */
.bd-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.cs-section .bd-pages img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
.bd-page-name { margin: var(--space-xs) 0 0; font-size: 16px; line-height: 26px; color: var(--neutral-surface); }
.bd-live { font-size: 14px; line-height: 22px; color: var(--neutral-hairline); text-decoration: underline; text-underline-position: from-font; }
.bd-live:hover, .bd-live:focus-visible { color: var(--signal-orange); }

.cs-motion.bd-motion { aspect-ratio: 16 / 9; }

@media (max-width: 960px) {
  .bd-title { font-size: 36px; line-height: 40px; }
  .bd-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .cs-section.bd-section, .cs-intro + .cs-section.bd-section { margin-top: var(--space-xl); }
  .bd-title { font-size: 32px; line-height: 36px; }
  .bd-brief { margin-top: var(--space-md); }
  .bd-blocks { gap: var(--space-sm); margin-top: var(--space-lg); }
  .bd-row { flex-direction: column; gap: var(--space-sm); }
  .bd-row > figure { flex: none; }
  .bd-notes { columns: 1; }
  .bd-notes figure { margin-bottom: var(--space-sm); }
  .bd-states { gap: var(--space-md); }
  .bd-pages { gap: var(--space-md) var(--space-sm); }
  .bd-page-name { font-size: 14px; line-height: 22px; }
}

/* A short credit under an image. Rows with credits line up at the top
   (one-line labels) so the images stay level whatever the note length. */
.bd-blocks figure:has(> .bd-fig-note) { justify-content: flex-start; }
.bd-note.bd-fig-note { margin: var(--space-xs) 0 0; }
/* Heading + note introducing a group of images */
.bd-aside { margin-top: var(--space-md); max-width: 954px; }
.bd-aside .bd-label { margin: 0; }