/* Raydar v6 blog article chrome. Loaded after /shared/brand.css and
   /styles.css on every /blog/<slug> page; tokens come from those files and
   are never forked here. Reuses v6 primitives (.paper, .crumbs, .eyebrow,
   .d2, .lede, .related, .note-cards, .side-card, .link-arrow) so an article
   reads as part of the same system as roles and the journal index. Only the
   handful of classes below are new. */

.article-hero { position: relative; padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) 0 clamp(28px, 4vw, 48px); }
.article-hero__in { display: grid; gap: 18px; max-width: 46em; }

/* .crumbs defaults to the light-on-dark tokens the rest of the site uses on
   night sections (see role-hero in ../../styles.css). The article hero is a
   .cream section like the journal hero, so it needs the same ink-toned
   override .cream already gives .lede there. */
.cream .crumbs { color: var(--rd-ink-3); }
.cream .crumbs a { color: var(--rd-ink-2); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 500 13px/1.3 var(--rd-font-ui); text-transform: uppercase; color: var(--rd-ink-3); }
.article-meta__sep { opacity: .6; }
.article-title { max-width: 18em; }

.article-art { padding-bottom: clamp(28px, 4vw, 48px); }
.article-art__frame { border-radius: 28px; overflow: hidden; background: var(--card-2); }
.article-art__frame img { display: block; width: 100%; height: auto; }

.article-body { padding-bottom: clamp(56px, 6vw, 96px); }
.article-grid { align-items: start; }

.article-side { display: grid; gap: 4px; align-content: start; }
.article-side__row + .article-side__row { margin-top: 10px; }
.article-side__label { margin: 0; font: 500 13px/1.3 var(--rd-font-ui); text-transform: uppercase; color: var(--t3); }
.article-side__value { margin: 2px 0 0; color: var(--t1); }
.article-side__share { margin-top: 6px; }

/* Related notes: three per article rather than the four-up grid .note-cards
   uses elsewhere. Mirrors its responsive behavior in ../../styles.css
   (SITE-owned) at the same breakpoints, since that file is not ours to
   edit here. */
.related-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .related-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .related-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 12px; scrollbar-width: none; }
  .related-cards::-webkit-scrollbar { display: none; }
  .article-hero__in { max-width: none; }
}