/* Shared P3 brand treatment. Keep recurring identity typography and motion here. */
:root {
  --p3-brand-font: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --p3-brand-tracking: .035em;
}

.brand-heading {
  font-family: var(--p3-brand-font);
  font-weight: 800;
  letter-spacing: var(--p3-brand-tracking);
  text-wrap: balance;
}

.brand-heading span {
  color: var(--brand-accent, var(--ai));
  font-weight: 650;
}

#entry .entry-brand {
  --brand-accent: var(--ai);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
}

.theme-core-title {
  --brand-accent: color-mix(in srgb, var(--tcol) 76%, #fff);
}

.theme-core-subtitle {
  position: relative;
  z-index: 1;
  display: block;
  margin: .45rem auto 0;
  color: #dbe8f2;
  font-size: clamp(.72rem, 2.8vw, .88rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.theme-core-kicker {
  color: #f5fbff;
  font-family: var(--p3-brand-font);
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.theme-core-subtitle strong {
  color: color-mix(in srgb, var(--tcol) 78%, #fff);
  font-weight: 780;
}

.rbrand,
.appbar .brand {
  font-family: var(--p3-brand-font);
  letter-spacing: .02em;
}

#entry .entry-stance {
  color: color-mix(in srgb, var(--sleep) 45%, var(--ink));
  font-weight: 560;
  animation: p3-statement-colour 20s ease-in-out infinite;
}

@keyframes p3-statement-colour {
  0%, 100% { color: color-mix(in srgb, var(--sleep) 45%, var(--ink)); }
  25% { color: color-mix(in srgb, var(--social) 42%, var(--ink)); }
  50% { color: color-mix(in srgb, var(--ai) 42%, var(--ink)); }
  75% { color: color-mix(in srgb, var(--focus-topic) 42%, var(--ink)); }
}

@media (prefers-reduced-motion: reduce) {
  #entry .entry-stance {
    animation: none;
  }
}