.template-root[data-brand="monterey-peninsula-post"] {
  /* Deep sea teal. 600 carries links and title bars on the page; 700 is the
     masthead plate; 800/900 hold the depth under it. */
  --brand-tokens-brand-50: #eef6f7;
  --brand-tokens-brand-100: #d5e8ea;
  --brand-tokens-brand-200: #aed1d6;
  --brand-tokens-brand-300: #7fb4bc;
  --brand-tokens-brand-400: #52949e;
  --brand-tokens-brand-500: #2f7681;
  --brand-tokens-brand-600: #1c5f6a;
  --brand-tokens-brand-700: #154a53;
  --brand-tokens-brand-800: #103a41;
  --brand-tokens-brand-900: #0b2a30;
  --brand-tokens-brand-950: #061a1e;
  /* Cool, fog-cast neutrals: the paper is near white, the ink is teal-black. */
  --brand-tokens-greyscale-10: #fbfdfd;
  --brand-tokens-greyscale-50: #f2f6f7;
  --brand-tokens-greyscale-100: #e4ebec;
  --brand-tokens-greyscale-200: #cbd6d8;
  --brand-tokens-greyscale-300: #a3b3b6;
  --brand-tokens-greyscale-400: #7a8c90;
  --brand-tokens-greyscale-500: #56686c;
  --brand-tokens-greyscale-600: #445357;
  --brand-tokens-greyscale-700: #333f42;
  --brand-tokens-greyscale-800: #222c2f;
  --brand-tokens-greyscale-900: #141c1e;
  --brand-tokens-greyscale-950: #0c1214;
  --brand-tokens-greyscale-1000: #060a0b;
  --brand-tokens-typography-body: "Host Grotesk";
  --brand-tokens-typography-labels: "Space Grotesk";
  --brand-tokens-typography-titles-a: "Instrument Serif";
  --brand-tokens-typography-titles-b: "Instrument Serif";
  --tint-light: #eef3f4; /* morning fog, one step off the paper */
  --accent-kelp: #7d5e0a; /* kelp gold for kickers and meta, 6.0:1 on the paper */
  --accent-kelp-rule: #b8902a; /* the same gold for rules, where 3:1 is the bar */
}

/* Link colour per painted surface: Container.css remaps the text tokens on a
   painted band but not the interactive ones. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-tint {
  --interactive-text-primary-idle: var(--brand-tokens-brand-600);
  --interactive-text-primary-hover: var(--brand-tokens-brand-700);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-800);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand {
  --interactive-text-primary-idle: var(--brand-tokens-brand-100);
  --interactive-text-primary-hover: var(--brand-tokens-greyscale-10);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-200);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-inverted {
  --interactive-text-primary-idle: var(--brand-tokens-brand-300);
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-100);
  --text-default-4: var(--brand-tokens-brand-300);
}

/* Buttons. The fleet hover fill (brand-400) is too light under a white label
   on the page; on the plate and the footer the button flips to paper. */
.template-root[data-brand="monterey-peninsula-post"] {
  --interactive-contained-primary-hover: var(--brand-tokens-brand-700);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-800);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-inverted {
  --interactive-contained-primary-idle: var(--brand-tokens-greyscale-10);
  --interactive-contained-primary-hover: var(--brand-tokens-brand-100);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-200);
  --interactive-contained-primary-on-idle: var(--brand-tokens-brand-900);
}
/* Typed input text on a painted band lands on the field's light fill. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__input,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-inverted .block-cta__input,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand input {
  color: var(--brand-tokens-greyscale-900);
}

/* Depth on the plate: light type on a dark ground, so the surface darkens
   from below and the masthead sits on the lighter top edge. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-500) 18%, transparent) 0%,
    transparent 45%,
    color-mix(in srgb, var(--brand-tokens-brand-950) 40%, transparent) 100%
  );
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-inverted {
  background-image: radial-gradient(
    130% 80% at 50% 120%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 55%, transparent) 0%,
    transparent 72%
  );
}

/* The repeated mark: kelp-gold kickers and meta on the paper and the fog,
   and a gold hairline under the newsletter bar's heading rule. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default .card-section-label,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-tint .card-section-label,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default .article-kicker,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-tint .article-kicker {
  color: var(--accent-kelp);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default .block-section-title__line,
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-tint .block-section-title__line {
  border-top-color: var(--accent-kelp-rule);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-tint .block-cta__bar-title {
  border-left-color: var(--accent-kelp-rule);
}

/* Overlay forms set type on a photo; keep the fleet's light overlay ramp
   there instead of the recoloured kicker above. */
.template-root[data-brand="monterey-peninsula-post"] .block-container .block-hero__overlay-kicker.card-section-label,
.template-root[data-brand="monterey-peninsula-post"] .block-container .block-hero__cover-kicker.card-section-label,
.template-root[data-brand="monterey-peninsula-post"] .block-container .block-feature-card__overlay-kicker.card-section-label,
.template-root[data-brand="monterey-peninsula-post"] .block-container .block-article-hero__overlay-kicker.article-kicker {
  color: var(--brand-tokens-greyscale-10);
}

/* Display type: Instrument Serif is light at text sizes, so headlines get a
   touch more size and a tighter leading than the fleet default. */
.template-root[data-brand="monterey-peninsula-post"] .block-hero__lead-title,
.template-root[data-brand="monterey-peninsula-post"] .block-feature-card__title,
.template-root[data-brand="monterey-peninsula-post"] .block-article-hero__title {
  letter-spacing: -0.01em;
  line-height: 1.05;
}

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

/* The newsletter bar closes the masthead plate: a faint rule separates it from
   the nav, the gold left bar stays, and the form's field keeps dark type. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__bar {
  border-top: 1px solid color-mix(in srgb, var(--brand-tokens-greyscale-10) 16%, transparent);
  padding-block: var(--global-height-l, 14px);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__bar-title {
  border-left-color: var(--accent-kelp-rule);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__bar-heading {
  font-size: 26px;
  line-height: 32px;
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__bar-desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-tokens-brand-100);
}
/* Cta.css paints the brand-band button with the inverted fill, which is a
   near-black teal here and vanishes on the plate. Use the paper button. */
.template-root[data-brand="monterey-peninsula-post"] .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-900);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-brand .block-cta__button:hover {
  background: var(--brand-tokens-brand-100);
  border-color: var(--brand-tokens-brand-100);
  opacity: 1;
}
/* The signup bar under the lead: a hairline separates it from the story. */
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default .block-cta__bar {
  border-top: 1px solid var(--elevation-outline-default-1);
  padding-top: var(--global-height-xxl, 24px);
}
.template-root[data-brand="monterey-peninsula-post"] .block-container--bg-default .block-cta__bar-title {
  border-left-color: var(--accent-kelp-rule);
}