/* Articles — gallery cards (reuse .story-card) + article-detail extras.
   Reuses assets.css tokens and stories.css story-card/prose/cta primitives. */

/* --- Gallery cards: the same framed blueprint window + sticker tilt as the
   story cards. Articles have no stat numbers, so the framed window holds the
   article headline as its bold hook (where stats sit on story cards). --- */
.article-grid { align-items: start; }

.ac-hook { padding: 30px 26px 36px; }
.ac-hook h3 {
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.7vw, 31px);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  transition: color .26s ease;
}
.story-card:hover .ac-hook h3 { color: var(--sky); }

/* --- Empty gallery state --- */
.gallery-empty {
  text-align: center;
  padding: 48px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gallery-empty p { max-width: 42ch; color: var(--soft); margin: 0; }

/* --- Article detail: wider reading column + smaller hero headline --- */
.article-body .prose { max-width: 860px; }
/* Breathing room between the hero and the dashed section divider that sits
   at the top of the body section. */
.article-hero { padding-bottom: 48px; }
.article-hero h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  max-width: 840px;
}
/* Subheadings clearly smaller than the H1 (was ~38px, close to the H1). */
.article-body .prose h2 { font-size: clamp(20px, 2.4vw, 27px); }
.article-body .prose > :first-child { margin-top: 0; }
.article-fig { margin: 28px 0; }
.article-fig img { width: 100%; height: auto; border-radius: 12px; display: block; }
.article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sky);
  font-family: 'Saira', sans-serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #fff;
}

@media (max-width: 600px) {
  .ac-hook { padding: 24px 20px 28px; }
}