/* ═══════════════════════════════════════════════════════════════
   demo.css  –  Demo / Showcase-only Styles
   Page-level layout overrides specific to the design system demo.
   Not part of the reusable component library.
   ═══════════════════════════════════════════════════════════════ */

/* Showcase typography block sizing */
.showcase-block .type-display {
  font-size: var(--text-4xl);
}

/* Make sure the section--cream wrapper padding is handled correctly */
.section--cream .section-header,
.section--cream .showcase-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
}

.section--cream .section-header {
  padding-top: var(--section-py);
}

.section--cream .showcase-grid {
  padding-bottom: var(--section-py);
}

/* Smooth page entry */
body {
  animation: pageFadeIn 0.4s ease both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}