.template-root[data-brand="cherry-city-chronicle"] {
  --brand-tokens-brand-50: #f5f9f0;
  --brand-tokens-brand-100: #ecf4e1;
  --brand-tokens-brand-200: #d9e9c4;
  --brand-tokens-brand-300: #b7d491;
  --brand-tokens-brand-400: #94c355;
  --brand-tokens-brand-500: #78ab36;
  --brand-tokens-brand-600: #65922a;
  --brand-tokens-brand-700: #476520;
  --brand-tokens-brand-800: #364d19;
  --brand-tokens-brand-900: #293914;
  --brand-tokens-brand-950: #18220c;

  --brand-tokens-greyscale-10: #fcfdfc;
  --brand-tokens-greyscale-50: #f7f9f6;
  --brand-tokens-greyscale-100: #ecf0eb;
  --brand-tokens-greyscale-200: #dae0d7;
  --brand-tokens-greyscale-300: #b5bfb0;
  --brand-tokens-greyscale-400: #919e8a;
  --brand-tokens-greyscale-500: #5e6b57;
  --brand-tokens-greyscale-600: #4a5544;
  --brand-tokens-greyscale-700: #384234;
  --brand-tokens-greyscale-800: #272e23;
  --brand-tokens-greyscale-900: #181d16;
  --brand-tokens-greyscale-950: #0e120d;
  --brand-tokens-greyscale-1000: #070906;

  --brand-tokens-typography-body: "Host Grotesk";
  --brand-tokens-typography-labels: "Host Grotesk";
  --brand-tokens-typography-titles-a: "Merriweather";
  --brand-tokens-typography-titles-b: "Merriweather";

  --tint-light: #eef2e7;

  --cherry: #8a1734;
}

.template-root[data-brand="cherry-city-chronicle"] .block-section-title {
  letter-spacing: 0.01em;
}

.template-root[data-brand="cherry-city-chronicle"] {
  --text-default-4: var(--brand-tokens-brand-700);
}

.template-root[data-brand="cherry-city-chronicle"] {
  --interactive-contained-primary-idle: var(--brand-tokens-brand-700);
  --interactive-contained-primary-hover: var(--brand-tokens-brand-800);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-900);
}

.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-default,
.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-tint {
  --interactive-text-primary-idle: var(--brand-tokens-brand-700);
  --interactive-text-primary-hover: var(--brand-tokens-brand-800);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-700);
}

.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-default .card-section-label,
.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-tint .card-section-label,
.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-default .article-kicker,
.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-tint .article-kicker {
  color: var(--cherry);
}

.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-default
  .block-section-title--v1,
.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-tint
  .block-section-title--v1 {
  border-bottom-color: var(--cherry);
}

.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-default
  .block-menubar__link[aria-current="page"],
.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-default
  .block-menubar__link[aria-current="page"]:hover {
  color: var(--cherry);
}

.template-root[data-brand="cherry-city-chronicle"] .block-hero {
  --card-title-xl: 32px;
  --card-title-xl-lh: 40px;
}
@media (max-width: 767px) {
  .template-root[data-brand="cherry-city-chronicle"] .block-hero {
    --card-title-xl: 24px;
    --card-title-xl-lh: 31px;
  }
}

.template-root[data-brand="cherry-city-chronicle"] .block-article-hero__title {
  font-size: 36px;
  line-height: 46px;
}
@media (max-width: 767px) {
  .template-root[data-brand="cherry-city-chronicle"] .block-article-hero__title {
    font-size: 26px;
    line-height: 34px;
  }
}

.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-brand {
  background-image: radial-gradient(
    130% 74% at 50% 124%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 22%, transparent) 0%,
    transparent 72%
  );
}

.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-default:has(.block-header) {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-600) 24%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-600) 14%, transparent) 68%,
      transparent 100%
    ),
    radial-gradient(
      58% 88% at 90% 6%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 66%, transparent) 0%,
      transparent 62%
    );
}

/* Cta.css sets this fill directly, so the element needs the surface override. */
.template-root[data-brand="cherry-city-chronicle"] .block-container--bg-brand .block-cta__button {
  background: var(--brand-tokens-greyscale-10);
  border-color: var(--brand-tokens-greyscale-10);
  color: var(--brand-tokens-brand-800);
}
.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-brand
  .block-cta__button:hover {
  background: var(--brand-tokens-brand-100);
  border-color: var(--brand-tokens-brand-100);
  color: var(--brand-tokens-brand-800);
  opacity: 1;
}
.template-root[data-brand="cherry-city-chronicle"]
  .block-container--bg-brand
  .block-cta__button:active {
  background: var(--brand-tokens-brand-200);
  border-color: var(--brand-tokens-brand-200);
  color: var(--brand-tokens-brand-900);
  opacity: 1;
}