.template-root[data-brand="capital-city-post"] {
  --brand-tokens-brand-50: #faeff0;
  --brand-tokens-brand-100: #f5e0e1;
  --brand-tokens-brand-200: #eac3c5;
  --brand-tokens-brand-300: #d5868a;
  --brand-tokens-brand-400: #c23d44;
  --brand-tokens-brand-500: #a53137;
  --brand-tokens-brand-600: #8e292e;
  --brand-tokens-brand-700: #701f23;
  --brand-tokens-brand-800: #59171a;
  --brand-tokens-brand-900: #421012;
  --brand-tokens-brand-950: #2a090b;

  --brand-tokens-greyscale-10: #ffffff;
  --brand-tokens-greyscale-50: #f7f7f7;
  --brand-tokens-greyscale-100: #ededed;
  --brand-tokens-greyscale-200: #dbdbdb;
  --brand-tokens-greyscale-300: #b8b8b8;
  --brand-tokens-greyscale-400: #949494;
  --brand-tokens-greyscale-500: #636363;
  --brand-tokens-greyscale-600: #4f4f4f;
  --brand-tokens-greyscale-700: #3d3d3d;
  --brand-tokens-greyscale-800: #2b2b2b;
  --brand-tokens-greyscale-900: #1c1c1c;
  --brand-tokens-greyscale-950: #121212;
  --brand-tokens-greyscale-1000: #0a0a0a;
  --brand-tokens-typography-body: "Instrument Sans";
  --brand-tokens-typography-labels: "Instrument Sans";
  --brand-tokens-typography-titles-a: "Playfair Display";
  --brand-tokens-typography-titles-b: "Playfair Display";

  --tint-light: #f4eeee;
}

.template-root[data-brand="capital-city-post"] .block-section-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.template-root[data-brand="capital-city-post"]
  .block-container--bg-default
  .block-section-title--v3 {
  border-bottom-width: 3px;
  border-bottom-style: double;
  border-bottom-color: var(--brand-tokens-brand-600);
}

.template-root[data-brand="capital-city-post"]
  .block-container--bg-inverted
  .block-section-title--v3 {
  border-bottom-width: 3px;
  border-bottom-style: double;
  border-bottom-color: var(--brand-tokens-brand-300);
}

.template-root[data-brand="capital-city-post"] .block-container--bg-default .card-section-label {
  color: var(--brand-tokens-brand-600);
}

.template-root[data-brand="capital-city-post"] .block-container--bg-inverted {
  --text-inverted-4: var(--brand-tokens-brand-300);
  --interactive-text-primary-idle: var(--brand-tokens-brand-300);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-300);
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
}

.template-root[data-brand="capital-city-post"] .block-container--bg-brand {
  --text-inverted-4: var(--brand-tokens-brand-200);
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-200);
  --interactive-text-primary-hover: var(--brand-tokens-brand-100);
}

.template-root[data-brand="capital-city-post"] .block-container--bg-default:has(.block-header) {
  background-image:
    radial-gradient(
      70% 120% at 86% -10%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 20%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-400) 18%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-400) 10%, transparent) 72%,
      transparent 100%
    );
}

.template-root[data-brand="capital-city-post"] .block-container--bg-inverted:has(.block-menubar) {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-600) 45%, transparent) 0%,
    color-mix(in srgb, var(--brand-tokens-brand-600) 16%, transparent) 100%
  );
}

.template-root[data-brand="capital-city-post"] .block-container--bg-brand {
  background-image: radial-gradient(
    120% 90% at 50% 118%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 22%, transparent) 0%,
    transparent 64%
  );
}

/* Instrument Serif ships at 400; this prevents synthesized bold in the hero. */
.template-root[data-brand="capital-city-post"] .block-hero__lead-title {
  font-size: 48px;
  line-height: 54px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  /* The fixed desktop size bypasses the shared mobile title token. */
  .template-root[data-brand="capital-city-post"] .block-hero__lead-title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* SUR-691: the desktop split leads are cards; they keep this setting. */
@media (min-width: 1200px) {
  .template-root[data-brand="capital-city-post"] .block-hero__split.card .card__title {
    font-size: 48px;
    line-height: 54px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
}