/* EA Creative: readable section labels across the public website. */
:root { --ea-label-accent: #bc341e; }
html[data-theme="dark"] { --ea-label-accent: #ff6e54; }

html :is(.eyebrow, .reels-kicker, .studio-kicker, .xpl-label, .kicker, .s-label, .label) {
  font-size: clamp(14px, .82rem + .3vw, 16px);
  line-height: 1.6;
  letter-spacing: .075em;
  overflow-wrap: anywhere;
}
html :is(.eyebrow, .kicker) {
  color: var(--ea-label-accent);
  max-width: 100%;
}
html :is(.eyebrow, .kicker)::before {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #ff4626);
}
html .eyebrow i { opacity: 1; }
html .s-label { color: var(--ink-2, #55524c); }

/* These panels stay dark even when the rest of the page is light. */
html .reels-kicker,
html :is(.proof, .contact) .eyebrow { color: #ff6e54; }
html :is(.studio-kicker, .xpl-label) { color: #e1ded8; }
html .studio-kicker b { color: #f4f2ee; }
html :is(.products-head, .products) .label { color: #c7c2b9; }

/* About has older, more specific 9–10px mobile rules. */
html :is(.hero-meta, .person) > .label,
html .person .label {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .04em;
}
html .hero-meta { flex-wrap: wrap; }

@media (max-width: 640px) {
  html :is(.eyebrow, .reels-kicker, .studio-kicker, .xpl-label, .kicker, .s-label, .label) {
    font-size: 14px;
    letter-spacing: .055em;
  }
  html .xpl-label { max-width: calc(100% - 60px); }
}