/* Naper Today: a bold graphic front, after the "Bold Graphic" mock. Three
   surfaces only: a black bar for the chrome, the editor card and the footer;
   mustard #ecc657 for the lead band and the signup bar; warm paper #f6f2ea
   everywhere else. Anton caps is the poster face (lead, second tier, desk
   heads); DM Sans carries every small word and the reading text. Rust #a83c12
   (the masthead's own colour, 6.0:1 on paper) is the one accent on paper;
   mustard takes that job on black. Ink is the only type on mustard (11.9:1).
   Flat: no radius, no plates. */
.template-root[data-brand="naper-today"] {
  --brand-tokens-brand-50: #fdf3ee;
  --brand-tokens-brand-100: #fae1d4;
  --brand-tokens-brand-200: #f3bfa6;
  --brand-tokens-brand-300: #ea9670;
  --brand-tokens-brand-400: #dc6e40;
  --brand-tokens-brand-500: #c4531f;
  --brand-tokens-brand-600: #a83c12;
  --brand-tokens-brand-700: #8a300e;
  --brand-tokens-brand-800: #6b250b;
  --brand-tokens-brand-900: #4d1a08;
  --brand-tokens-brand-950: #2d0f04;
  /* Warm paper greys: 10 is the page, 900 is the masthead ink and the black bar. */
  --brand-tokens-greyscale-10: #f6f2ea;
  --brand-tokens-greyscale-50: #efeae0;
  --brand-tokens-greyscale-100: #e5dfd3;
  --brand-tokens-greyscale-200: #d3ccbf;
  --brand-tokens-greyscale-300: #b3ac9f;
  --brand-tokens-greyscale-400: #8d877b;
  --brand-tokens-greyscale-500: #655f55;
  --brand-tokens-greyscale-600: #4f4a42;
  --brand-tokens-greyscale-700: #3b3731;
  --brand-tokens-greyscale-800: #292622;
  --brand-tokens-greyscale-900: #131110;
  --brand-tokens-greyscale-950: #0c0b0a;
  --brand-tokens-greyscale-1000: #060505;
  --brand-tokens-typography-body: "DM Sans";
  --brand-tokens-typography-labels: "DM Sans";
  --brand-tokens-typography-titles-a: "Anton";
  --brand-tokens-typography-titles-b: "DM Sans";
  /* The mustard: this theme's tint surface. */
  --tint-light: #ecc657;
  --naper-mustard: #ecc657;

  /* 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));
  --card-grid-three-tracks: repeat(3, minmax(0, 1fr));
  --menubar-current-underline: 3px;
  --menubar-current-underline-offset: 6px;
  --menubar-current-underline-color: var(--brand-tokens-brand-600);
  --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);
}

/* ---- Surfaces --------------------------------------------------------- */

/* Paper: kickers, meta rules and links in rust. */
.template-root[data-brand="naper-today"] .block-container--bg-default {
  --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);
}
/* Mustard: rust drops to 3.4:1 there, so everything on it is ink. */
.template-root[data-brand="naper-today"] .block-container--bg-tint {
  --text-default-2: var(--brand-tokens-greyscale-900);
  --text-default-3: var(--brand-tokens-greyscale-800);
  --text-default-4: var(--brand-tokens-greyscale-900);
  --interactive-text-primary-idle: var(--brand-tokens-greyscale-900);
  --interactive-text-primary-hover: var(--brand-tokens-greyscale-900);
  --label-tone-civic: var(--brand-tokens-greyscale-900);
  --label-tone-everyday: var(--brand-tokens-greyscale-900);
  --hairline-color: rgba(19, 17, 16, 0.25);
}
/* Black: mustard is the accent (11.2:1 on the bar). */
.template-root[data-brand="naper-today"] .block-container--bg-inverted {
  --text-default-4: var(--naper-mustard);
  --menubar-current-underline-color: var(--naper-mustard);
  --interactive-text-primary-idle-inverted: var(--naper-mustard);
  --hairline-color: rgba(246, 242, 234, 0.16);
}

/* ---- Chrome: the black bar -------------------------------------------- */
.template-root[data-brand="naper-today"] .block-header {
  padding-block: 28px 20px;
}
.template-root[data-brand="naper-today"] :where(.block-menubar:not([data-bg="inverted"])) .block-menubar__link,
.template-root[data-brand="naper-today"] .block-menubar[data-bg="inverted"] .block-menubar__link {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Small type ------------------------------------------------------- */
.template-root[data-brand="naper-today"] .card-section-label,
.template-root[data-brand="naper-today"] .article-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.template-root[data-brand="naper-today"] .card-meta {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="naper-today"] .block-container--bg-tint .card-meta {
  color: var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="naper-today"] .card__title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ---- The poster band -------------------------------------------------- */
/* Edge to edge: text on the left half in the page's grid, the photo filling
   the right half to the band's edges. */
.template-root[data-brand="naper-today"] .block-container--bg-tint:has(.block-feature-card) {
  padding-block: 0;
}
.template-root[data-brand="naper-today"] .block-feature-card__split {
  gap: 0;
  min-height: 600px;
}
.template-root[data-brand="naper-today"] .block-feature-card__text {
  flex: 0 0 50%;
  justify-content: space-between;
  gap: 32px;
  padding: 64px 56px 56px max(24px, calc((100vw - 1280px) / 2));
}
.template-root[data-brand="naper-today"] .block-feature-card__media-link {
  flex: 0 0 50%;
}
.template-root[data-brand="naper-today"] .block-feature-card__image,
.template-root[data-brand="naper-today"] .block-feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-root[data-brand="naper-today"] .block-feature-card__title {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  /* The lead never cuts; the fleet's longest headlines (19 words) run long,
     and that is the one cost of the poster. */
  --feature-card-title-clamp: none;
}
.template-root[data-brand="naper-today"] .block-feature-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-underline-offset: 8px;
}
.template-root[data-brand="naper-today"] .block-feature-card__dek {
  font-size: 21px;
  line-height: 31px;
  font-weight: 500;
  max-width: 34ch;
  -webkit-line-clamp: none;
}
/* With no photo the headline takes the band, in the page's grid. */
.template-root[data-brand="naper-today"] .block-feature-card__textonly {
  border-top: 0;
  padding: 64px max(24px, calc((100vw - 1280px) / 2)) 56px;
}
.template-root[data-brand="naper-today"] .block-feature-card__title--display {
  max-width: 24ch;
}
@media (max-width: 1199px) {
  .template-root[data-brand="naper-today"] .block-feature-card__split {
    min-height: 0;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__text,
  .template-root[data-brand="naper-today"] .block-feature-card__media-link {
    flex: 1 1 auto;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__text {
    padding: 28px 20px 36px;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__media-link {
    aspect-ratio: 16 / 10;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__title {
    font-size: 64px;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__textonly {
    padding: 32px 20px 36px;
  }
}
@media (max-width: 767px) {
  .template-root[data-brand="naper-today"] .block-feature-card__text,
  .template-root[data-brand="naper-today"] .block-feature-card__textonly {
    padding-inline: 16px;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__title {
    font-size: 40px;
    line-height: 0.97;
  }
  .template-root[data-brand="naper-today"] .block-feature-card__dek {
    font-size: 17px;
    line-height: 26px;
  }
}

/* ---- Second tier: the poster face a size down ------------------------- */
.template-root[data-brand="naper-today"]
  .block-container--bg-tint:has(.block-feature-card)
  + .block-container {
  border-bottom: 2px solid var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="naper-today"] .block-headline-list--v3 .block-headline-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.template-root[data-brand="naper-today"] .block-headline-list--v3 .card-meta {
  order: 3;
}
/* Digest lists further down stay in the sans; only the row under the poster
   takes the poster face. */
.template-root[data-brand="naper-today"] .block-headline-list__title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.template-root[data-brand="naper-today"]
  .block-container--bg-tint:has(.block-feature-card)
  + .block-container
  .block-headline-list__title {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .template-root[data-brand="naper-today"]
    .block-container--bg-tint:has(.block-feature-card)
    + .block-container
    .block-headline-list__title {
    font-size: 28px;
  }
}
/* Column labels: small rust caps over no rule. */
.template-root[data-brand="naper-today"] .block-section-title--v2 .block-section-title__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-default-4);
}
.template-root[data-brand="naper-today"] .block-section-title--v2 .block-section-title__line {
  display: none;
}

/* ---- Desk heads: Anton caps, no rule, the "THIS WEEKEND" head --------- */
.template-root[data-brand="naper-today"] .block-section-title--v8 {
  border-top: 0;
}
.template-root[data-brand="naper-today"] .block-section-title--v8 .block-section-title__heading {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .template-root[data-brand="naper-today"] .block-section-title--v8 .block-section-title__heading {
    font-size: 36px;
  }
}
.template-root[data-brand="naper-today"] .block-section-title__see-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- The editor card: a black column beside the busiest desk ---------- */
.template-root[data-brand="naper-today"] .block-container__col:has(> .block-about-editor),
.template-root[data-brand="naper-today"] .block-container__col:has(.block-about-editor) {
  background: var(--brand-tokens-greyscale-900);
  padding: 32px;
  align-self: flex-start;
  --text-default-1: var(--brand-tokens-greyscale-10);
  --text-default-3: var(--brand-tokens-greyscale-200);
  --text-default-4: var(--naper-mustard);
  --hairline-color: rgba(246, 242, 234, 0.16);
}
.template-root[data-brand="naper-today"] .block-container__col .block-about-editor__body {
  flex-direction: column;
  padding-bottom: 0;
}
.template-root[data-brand="naper-today"] .block-container__col .block-about-editor__image {
  flex: none;
  width: 96px;
  height: 96px;
  min-width: 0;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 0;
}
.template-root[data-brand="naper-today"] .block-container__col .block-about-editor__text {
  min-width: 0;
}
.template-root[data-brand="naper-today"] .block-container__col .block-about-editor__name {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.template-root[data-brand="naper-today"] .block-container__col .block-about-editor__bio {
  font-size: 16px;
  line-height: 26px;
}

/* ---- Signup on the mustard ------------------------------------------- */
.template-root[data-brand="naper-today"] .block-cta__bar-title {
  border-left: 0;
  padding-left: 0;
}
.template-root[data-brand="naper-today"] .block-cta__bar-heading,
.template-root[data-brand="naper-today"] .block-cta__bar-title {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  .template-root[data-brand="naper-today"] .block-cta__bar-heading {
    white-space: nowrap;
  }
}
.template-root[data-brand="naper-today"] .block-cta__input {
  border-color: var(--brand-tokens-greyscale-900);
  background: var(--brand-tokens-greyscale-10);
}

/* ---- Article ---------------------------------------------------------- */
/* Anton for the headline in sentence case: a long headline still reads. */
.template-root[data-brand="naper-today"] .block-article-hero__title {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.004em;
}
@media (max-width: 767px) {
  .template-root[data-brand="naper-today"] .block-article-hero__title {
    font-size: 38px;
    line-height: 1.05;
  }
}
.template-root[data-brand="naper-today"] .article-body .payload-richtext > p,
.template-root[data-brand="naper-today"] .article-body .payload-richtext li {
  font-size: 18px;
  line-height: 30px;
}
.template-root[data-brand="naper-today"] .block-article-hero__caption {
  font-size: 14px;
  line-height: 21px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="naper-today"] .article-meta {
  font-size: 13px;
}
.template-root[data-brand="naper-today"] .article-meta__byline {
  color: var(--brand-tokens-greyscale-900);
  font-weight: 700;
}

/* The section page title in the poster face. */
.template-root[data-brand="naper-today"] .block-subcategory-section-title__title,
.template-root[data-brand="naper-today"] .block-subcategory-section-title__heading {
  font-family: var(--brand-tokens-typography-titles-a), sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .template-root[data-brand="naper-today"] .block-subcategory-section-title__title,
  .template-root[data-brand="naper-today"] .block-subcategory-section-title__heading {
    font-size: 44px;
  }
}

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