.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: 44px;
  --card-title-xl-lh: 52px;
}

/* Overlay labels sit on photography, where the cherry accent cannot guarantee
   contrast. Keep the civic accent for labels on paper and use newsprint white
   on the hero scrim. */
.template-root[data-brand="cherry-city-chronicle"]
  .block-container
  .block-hero__overlay-kicker.card-section-label,
.template-root[data-brand="cherry-city-chronicle"]
  .block-container
  .block-hero__cover-kicker.card-section-label {
  color: var(--brand-tokens-greyscale-10);
}

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

  /* The front-page lead is editorially complete, not a card teaser. */
  .template-root[data-brand="cherry-city-chronicle"]
    .block-hero--cover
    .block-hero__lead-title--cover {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .template-root[data-brand="cherry-city-chronicle"] .article-share-icons {
    gap: var(--global-gap-xs, 4px);
  }

  .template-root[data-brand="cherry-city-chronicle"] .article-share-icons__button {
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .template-root[data-brand="cherry-city-chronicle"] .article-info-bar .article-meta {
    color: var(--text-default-2);
    font-size: 13px;
  }

  .template-root[data-brand="cherry-city-chronicle"] .block-article-hero__caption {
    color: var(--text-default-2);
    font-size: 15px;
  }
}

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

  .template-root[data-brand="cherry-city-chronicle"] .article-body {
    font-size: 17px;
    line-height: 28px;
  }
}

.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: var(--brand-tokens-brand-50);
  border-bottom: 1px solid var(--brand-tokens-brand-200);
}

/* The outlined lockup carries the stature; a tighter identity band keeps the
   chrome from reading as an oversized institutional panel. */
@media (min-width: 1200px) {
  .template-root[data-brand="cherry-city-chronicle"] .block-header {
    padding-block: var(--global-height-xl, 16px);
  }

  .template-root[data-brand="cherry-city-chronicle"] .block-header__masthead-art {
    height: 56px;
  }
}

/* The recipe carries an in-flow signup after the story; do not cover the journalism. */
.template-root[data-brand="cherry-city-chronicle"] .newsletter-overlay {
  display: none;
}

/* 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;
}