.template-root[data-brand="overland-park-chronicle"] {
  --brand-tokens-brand-50: #f5e8fc;
  --brand-tokens-brand-100: #ebd2f9;
  --brand-tokens-brand-200: #d6a6f2;
  --brand-tokens-brand-300: #bd74e7;
  --brand-tokens-brand-400: #a343db;
  --brand-tokens-brand-500: #8b2bc0;
  --brand-tokens-brand-600: #7824a8;
  --brand-tokens-brand-700: #661e8f;
  --brand-tokens-brand-800: #5a1b7e;
  --brand-tokens-brand-900: #46165f;
  --brand-tokens-brand-950: #260c34;
  --brand-tokens-greyscale-10: #ffffff;
  --brand-tokens-greyscale-50: #f6f6f6;
  --brand-tokens-greyscale-100: #ececec;
  --brand-tokens-greyscale-200: #d8d8d8;
  --brand-tokens-greyscale-300: #b6b6b6;
  --brand-tokens-greyscale-400: #939393;
  --brand-tokens-greyscale-500: #5c5c5c;
  --brand-tokens-greyscale-600: #4b4b4b;
  --brand-tokens-greyscale-700: #3a3a3a;
  --brand-tokens-greyscale-800: #272727;
  --brand-tokens-greyscale-900: #101010;
  --brand-tokens-greyscale-950: #0a0a0a;
  --brand-tokens-greyscale-1000: #050505;
  --brand-tokens-typography-body: "Source Serif 4";
  --brand-tokens-typography-labels: "DM Sans";
  --brand-tokens-typography-titles-a: "Host Grotesk";
  --brand-tokens-typography-titles-b: "Host Grotesk";
  --tint-light: #f2f2f2;
  --shift-violet: #661e8f;
  --shift-teal: #127f8c;
}

.template-root[data-brand="overland-park-chronicle"] .block-section-title {
  letter-spacing: 0.02em;
}

/* Keep the solid bar color as the fallback when gradients are unavailable. */
.template-root[data-brand="overland-park-chronicle"]
  .block-container--bg-default
  .block-section-title__bar {
  background-color: var(--shift-violet);
  background-image: linear-gradient(160deg, var(--shift-violet) 0%, var(--shift-teal) 100%);
}

/* Both gradient endpoints keep band text above 4.5:1. */
.template-root[data-brand="overland-park-chronicle"] .block-container--bg-brand {
  background-image: linear-gradient(104deg, var(--shift-violet) 0%, var(--shift-teal) 100%);
}

.template-root[data-brand="overland-park-chronicle"]
  .block-container--bg-default:has(.block-header) {
  background-image:
    radial-gradient(
      80% 120% at 6% -18%,
      color-mix(in srgb, var(--shift-violet) 20%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      74% 116% at 96% -14%,
      color-mix(in srgb, var(--shift-teal) 22%, transparent) 0%,
      transparent 56%
    );
}