/* Introduction page layout. Artifact internals live in art/*.css. */

/* Hero */
.hero { padding-top: 64px; }
/* Wide enough for the headline's second line to stay one line from 768px up;
   the lede keeps its own measure. */
.hero-text { max-width: 1040px; }
.hero-meta { margin: 24px 0 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--subtle); }
.hero-meta a { color: var(--subtle); }
/* One quiet line under the meta that points to the newest update. */
.hero-news { margin: 8px 0 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); }
.hero-news .k { color: var(--coral-ink); }
.hero-news .arrow { color: var(--coral); }
/* An optional second phrase from the update's data-hero-note, one step quieter. */
.hero-news .sep, .hero-news .note { color: var(--muted); }
.hero-art { margin: 48px 0 0; }
.art-hub { width: 100%; height: clamp(360px, 46vw, 470px); }
@media (max-width: 760px) {
  .hero { padding-top: 40px; }
  .hero-art { margin-top: 40px; }
  .art-hub { height: 560px; }
}

/* Principles */
.pillar {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: center;
  padding: 0 0 96px;
}
.pillar:last-child { padding-bottom: 0; }
.pillar-n { font-size: var(--fs-sm); color: var(--coral); margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.pillar-text .body-muted { margin: 0 0 24px; }
.pillar-art .art { aspect-ratio: 7 / 5; }
@media (max-width: 900px) {
  .pillar { grid-template-columns: 1fr; gap: 32px; padding-bottom: 64px; }
  .pillar-art .art { aspect-ratio: auto; height: min(118vw, 500px); }
}

/* Capabilities */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.feature { margin: 0; }
.art-tile { aspect-ratio: 4 / 3; }
.feature figcaption { padding-top: 16px; }
.feature h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 400; letter-spacing: var(--tr-h); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feature p { color: var(--muted); font-size: var(--fs-md); line-height: 1.6; margin: 8px 0 0; max-width: 340px; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; gap: 40px; } }

/* Get started */
.start-body { max-width: 720px; }
.start { padding-bottom: 96px; }
@media (max-width: 680px) { .start { padding-bottom: 64px; } }