/* .an-post-* — world-class article template (founder 2026-07-16). Tokens only (assets/tokens.css),
   no hardcoded hex outside inline SVG per CONVENTIONS.md §1. */

/* header chip + meta (dark hero surface) */
.an-post-chip {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(198,161,91,.55);
  border-radius: var(--an-radius-pill);
  background: rgba(198,161,91,.16);
  color: var(--an-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.an-post-chip:hover { background: var(--an-gold); color: var(--an-maroon-ink); }

.an-post-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--an-sand); font-size: 13.5px; }
.an-post-meta-dot { opacity: .6; }

/* footer chips (cream surface) — same component, override colors only */
.an-post-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.an-post-chiprow .an-post-chip { background: var(--an-cream-card); border-color: rgba(198,161,91,.5); color: var(--an-maroon); }
.an-post-chiprow .an-post-chip:hover { background: var(--an-gold); color: var(--an-maroon-ink); }

/* brand box */
.an-post-brandbox { display: flex; align-items: flex-start; gap: 14px; background: var(--an-cream-tint); border: 1px solid rgba(198,161,91,.4); border-radius: var(--an-radius-card); padding: 16px 20px; }
.an-post-brandbox-mark { flex: 0 0 28px; width: 28px; height: 28px; }
.an-post-brandbox-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--an-ink-soft); }

/* related articles */
.an-post-related { margin-top: 34px; }
.an-post-related h2 { font-family: var(--an-font-display); font-weight: 400; font-size: var(--an-h3); color: var(--an-maroon); margin: 0 0 18px; }
.an-post-related-card { display: block; text-decoration: none; }
.an-post-related-card:hover h3 { color: var(--an-maroon); }
.an-post-related-card:hover { transform: translateY(-2px); transition: transform var(--an-transition); }

/* CTA card spacing (chrome itself is reused from inner.css, unchanged) */
.an-post-cta-card { margin-top: 30px; }

@media (max-width: 640px) {
  .an-post-brandbox { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .an-post-chiprow { gap: 6px; }
  .an-post-chiprow .an-post-chip,
  .an-post-header .an-post-chip { font-size: 12px; padding: 5px 11px; }
  .an-post-meta { font-size: 13px; }
}