/* Evanston Wire: a display-headline wire. Ink on cool newsprint, a condensed
   grotesk (Barlow Semi Condensed) for every headline, a Source Serif 4 reading
   body and DM Mono for labels, nav, meta and the dateline. The vermilion of the
   plate masthead (#fe4711) is fill only; type takes its deep end (#b8300a,
   5.5:1 on the paper). One accent, no second hue. Flat: no radius, no plates. */
.template-root[data-brand="evanston-wire"] {
  --brand-tokens-brand-50: #fff1ec;
  --brand-tokens-brand-100: #ffdccf;
  --brand-tokens-brand-200: #ffb69c;
  --brand-tokens-brand-300: #ff8d64;
  --brand-tokens-brand-400: #fe6a38;
  --brand-tokens-brand-500: #fe4711;
  --brand-tokens-brand-600: #b8300a;
  --brand-tokens-brand-700: #942608;
  --brand-tokens-brand-800: #711d06;
  --brand-tokens-brand-900: #4e1404;
  --brand-tokens-brand-950: #2e0b02;
  /* Cool newsprint greys: 10 is the page, 900 is ink and the ink band. */
  --brand-tokens-greyscale-10: #f5f4f0;
  --brand-tokens-greyscale-50: #eeede8;
  --brand-tokens-greyscale-100: #e4e3dd;
  --brand-tokens-greyscale-200: #d2d1ca;
  --brand-tokens-greyscale-300: #b1b0a9;
  --brand-tokens-greyscale-400: #8b8a84;
  --brand-tokens-greyscale-500: #62615c;
  --brand-tokens-greyscale-600: #4e4d49;
  --brand-tokens-greyscale-700: #3a3936;
  --brand-tokens-greyscale-800: #282826;
  --brand-tokens-greyscale-900: #161719;
  --brand-tokens-greyscale-950: #0f1011;
  --brand-tokens-greyscale-1000: #070708;
  --brand-tokens-typography-body: "Source Serif 4";
  --brand-tokens-typography-labels: "DM Mono";
  --brand-tokens-typography-titles-a: "Barlow Semi Condensed";
  --brand-tokens-typography-titles-b: "Barlow Semi Condensed";
  --tint-light: #eceae3;

  /* Optional roles (proposal 022). */
  --label-tone-civic: var(--brand-tokens-brand-600);
  --label-tone-everyday: var(--brand-tokens-greyscale-700);
  --numbered-list-index-color: var(--brand-tokens-brand-600);
  --card-image-radius: 0;
  --card-lead-image-radius: 0;
  --panel-radius: 0;
  --card-grid-four-tracks: repeat(4, minmax(0, 1fr));
  --menubar-current-underline: 3px;
  --menubar-current-underline-offset: 6px;
  --menubar-current-underline-color: var(--brand-tokens-brand-500);
  /* Display headlines never cut on the lead; cards take four lines. */
  --article-title-clamp: 4;

  --interactive-contained-primary-idle: var(--brand-tokens-greyscale-900);
  --interactive-contained-primary-hover: var(--brand-tokens-brand-600);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-700);
}

/* Kickers, meta and links: the deep vermilion on paper and tint, the plate
   vermilion on the ink band. */
.template-root[data-brand="evanston-wire"] .block-container--bg-default,
.template-root[data-brand="evanston-wire"] .block-container--bg-tint {
  --text-default-4: var(--brand-tokens-brand-600);
  --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="evanston-wire"] .block-container--bg-inverted {
  --text-default-4: var(--brand-tokens-brand-500);
}

/* Mono voice for everything small. */
.template-root[data-brand="evanston-wire"] .card-section-label,
.template-root[data-brand="evanston-wire"] .article-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.template-root[data-brand="evanston-wire"] .card-meta {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.template-root[data-brand="evanston-wire"] .block-menubar__link {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* The inverted bar sets its own link weight. */
.template-root[data-brand="evanston-wire"] :where(.block-menubar:not([data-bg="inverted"])) .block-menubar__link {
  font-weight: 500;
}

/* The display move: one lead set big and condensed, the rest a step down. */
.template-root[data-brand="evanston-wire"] .block-hero__lead-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.template-root[data-brand="evanston-wire"] .block-article-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.template-root[data-brand="evanston-wire"] .card__title {
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 767px) {
  .template-root[data-brand="evanston-wire"] .block-hero__lead-title {
    font-size: 38px;
  }
  .template-root[data-brand="evanston-wire"] .block-article-hero__title {
    font-size: 34px;
  }
}

/* Desk titles: condensed caps under the accent top rule of SectionTitle v8. */
.template-root[data-brand="evanston-wire"] .block-section-title--v8 .block-section-title__heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.template-root[data-brand="evanston-wire"] .block-section-title__see-all {
  font-family: var(--brand-tokens-typography-labels), monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Reading body 18/28; captions and the byline line in the mono label face. */
.template-root[data-brand="evanston-wire"] .article-body .payload-richtext > p,
.template-root[data-brand="evanston-wire"] .article-body .payload-richtext li {
  font-size: 18px;
  line-height: 28px;
}
/* Captions are sentences: the reading serif at 15px, not the mono. */
.template-root[data-brand="evanston-wire"] .block-article-hero__caption {
  font-family: var(--brand-tokens-typography-body), serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="evanston-wire"] .article-meta {
  font-size: 12px;
}
.template-root[data-brand="evanston-wire"] .article-meta__byline {
  color: var(--brand-tokens-greyscale-900);
  font-weight: 500;
}

/* Footer, signup and brand tag keep the label face. */
.template-root[data-brand="evanston-wire"] .block-footer,
.template-root[data-brand="evanston-wire"] .block-cta,
.template-root[data-brand="evanston-wire"] .block-brand-tag {
  font-family: var(--brand-tokens-typography-labels), monospace;
}

/* Fleet fixes, brand-scoped until the shared fixes land (design-director
   gaps, La Jolla record): empty image frames, 44px targets. */
.template-root[data-brand="evanston-wire"] .card__image-link:not(:has(img)) {
  display: none;
}
.template-root[data-brand="evanston-wire"] .block-header__icon-btn,
.template-root[data-brand="evanston-wire"] .article-share-icons__button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.template-root[data-brand="evanston-wire"] .article-share-icons__button svg {
  width: 20px;
  height: 20px;
}

/* The display lead never cuts: 19 words at 38px take six lines on a phone. */
.template-root[data-brand="evanston-wire"] .block-hero {
  --article-title-clamp: 7;
}

/* Critic panel fixes (2026-09-28). */

/* The lead photo starts on the kicker line instead of floating mid-column. */
.template-root[data-brand="evanston-wire"] .block-hero__wide-row {
  align-items: flex-start;
}

/* Desk heads sit under a 3px ink rule; the vermilion stays on the masthead
   plate, the dateline and the nav underline, so it keeps meaning something. */
.template-root[data-brand="evanston-wire"] .block-section-title--v8 {
  border-top: 3px solid var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="evanston-wire"] .block-container--bg-inverted .block-section-title--v8 {
  border-top-color: var(--brand-tokens-greyscale-10);
}

/* The section page title in the display face, the loudest head on its page. */
.template-root[data-brand="evanston-wire"] .block-subcategory-section-title__title,
.template-root[data-brand="evanston-wire"] .block-subcategory-section-title__heading {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .template-root[data-brand="evanston-wire"] .block-subcategory-section-title__title,
  .template-root[data-brand="evanston-wire"] .block-subcategory-section-title__heading {
    font-size: 34px;
  }
}

/* A darker, fixed scrim under the cover headline so white type holds on a
   bright photo, not only on this one. */
.template-root[data-brand="evanston-wire"] .block-hero__cover-media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* One weight for the signup heading everywhere. */
.template-root[data-brand="evanston-wire"] .block-cta__bar-heading,
.template-root[data-brand="evanston-wire"] .block-cta__bar-title {
  font-weight: 700;
}