/* La Jolla Ledger: a flat village broadsheet. Warm sand paper, ink text, and
   one deep bougainvillea accent that carries kickers, meta, the nav underline,
   the Most Read numerals and the last word of the wordmark. No second hue: a
   teal signal on the numerals lost to the single accent in the design review
   (critic panel and judge, 2026-09-28). Lora for titles and the reading body,
   Inter Tight for labels, nav and meta. No plates, no radius: rules and space
   do the structure. */
.template-root[data-brand="la-jolla-ledger"] {
  /* Bougainvillea, taken to its deep end so 600 can carry 11px type on the
     sand paper (about 8:1). The vivid stops are fill only. */
  --brand-tokens-brand-50: #fbeef4;
  --brand-tokens-brand-100: #f5d6e5;
  --brand-tokens-brand-200: #ebaecb;
  --brand-tokens-brand-300: #dd7fac;
  --brand-tokens-brand-400: #c9508b;
  --brand-tokens-brand-500: #a82c6c;
  --brand-tokens-brand-600: #8a1656;
  --brand-tokens-brand-700: #711146;
  --brand-tokens-brand-800: #590d37;
  --brand-tokens-brand-900: #420a29;
  --brand-tokens-brand-950: #2a061a;
  /* Sand greys: 10 is the page, 900 is ink and the inverted footer. */
  --brand-tokens-greyscale-10: #fbf8f3;
  --brand-tokens-greyscale-50: #f5f1ea;
  --brand-tokens-greyscale-100: #ece7df;
  --brand-tokens-greyscale-200: #dcd6cc;
  --brand-tokens-greyscale-300: #bdb6ab;
  --brand-tokens-greyscale-400: #958e84;
  --brand-tokens-greyscale-500: #69635b;
  --brand-tokens-greyscale-600: #57524b;
  --brand-tokens-greyscale-700: #413d38;
  --brand-tokens-greyscale-800: #2e2b27;
  --brand-tokens-greyscale-900: #1f1d1a;
  --brand-tokens-greyscale-950: #151412;
  --brand-tokens-greyscale-1000: #0b0a09;
  --brand-tokens-typography-body: "Lora";
  --brand-tokens-typography-labels: "Inter Tight";
  --brand-tokens-typography-titles-a: "Lora";
  --brand-tokens-typography-titles-b: "Lora";
  /* One step off the paper, for the digest band and the signup. */
  --tint-light: #f3eee5;

  /* 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;
  /* Four-story desks run one row of four on desktop, never three and an orphan. */
  --card-grid-four-tracks: repeat(4, minmax(0, 1fr));
  --menubar-current-underline: 2px;
  --menubar-current-underline-offset: 6px;
  --menubar-current-underline-color: var(--brand-tokens-brand-600);

  /* Buttons are ink and turn bougainvillea on hover. */
  --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 take the accent on paper and tint. */
.template-root[data-brand="la-jolla-ledger"] .block-container--bg-default,
.template-root[data-brand="la-jolla-ledger"] .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);
}

/* Small caps voice: kickers 11px tracked, nav 12px, meta 12px. */
.template-root[data-brand="la-jolla-ledger"] .card-section-label,
.template-root[data-brand="la-jolla-ledger"] .article-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.template-root[data-brand="la-jolla-ledger"] .card-meta {
  font-size: 12px;
  letter-spacing: 0.02em;
}
.template-root[data-brand="la-jolla-ledger"] .block-menubar__link {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The inverted bar sets its own link weight. */
.template-root[data-brand="la-jolla-ledger"] :where(.block-menubar:not([data-bg="inverted"])) .block-menubar__link {
  font-weight: 500;
}

/* Wordmark: tight Lora, the last word in bougainvillea. */
.template-root[data-brand="la-jolla-ledger"] .block-header__masthead {
  letter-spacing: -0.03em;
}
/* A painted header sets its own masthead weight. */
.template-root[data-brand="la-jolla-ledger"] :where(.block-header:not([data-bg="inverted"], [data-bg="brand"], [data-bg="image"])) .block-header__masthead {
  font-weight: 600;
}
.template-root[data-brand="la-jolla-ledger"] .block-hero__lead-title,
.template-root[data-brand="la-jolla-ledger"] .block-article-hero__title {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* Section titles: small caps label on a hairline, the Times of San Diego way,
   so the desks read as a ledger rather than a stack of banners. */
.template-root[data-brand="la-jolla-ledger"]
  .block-section-title--v2
  .block-section-title__heading {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-tokens-greyscale-900);
}

/* Lead paragraph set a step up, the one editorial flourish on the article. */
.template-root[data-brand="la-jolla-ledger"] .article-body .payload-richtext > p:first-of-type {
  font-size: 21px;
  line-height: 32px;
  color: var(--brand-tokens-greyscale-800);
}

/* Captions in the label face, quiet grey, never the link colour. */
.template-root[data-brand="la-jolla-ledger"] .block-article-hero__caption {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 13px;
  color: var(--brand-tokens-greyscale-600);
}

/* Footer and signup keep the label face; only editorial text is serif. */
.template-root[data-brand="la-jolla-ledger"] .block-footer,
.template-root[data-brand="la-jolla-ledger"] .block-cta,
.template-root[data-brand="la-jolla-ledger"] .block-brand-tag {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
}

/* Lead headlines run to four lines: a 19-word headline (the fleet's longest,
   2026-09) lost its last words at three. Raises the cap, never lowers it. */
.template-root[data-brand="la-jolla-ledger"] {
  --article-title-clamp: 4;
}
/* The lead takes five on a phone, where 19 words need them. */
.template-root[data-brand="la-jolla-ledger"] .block-hero {
  --article-title-clamp: 5;
}

/* A card with no photo keeps an empty sand frame in the hero and the card
   grid; only the row layouts hide theirs. Brand-scoped until the shared fix
   lands (design-director gap: hide .card__image-link:not(:has(img)) for
   every card, as ArticleGrid.css already does for rows). */
.template-root[data-brand="la-jolla-ledger"] .card__image-link:not(:has(img)) {
  display: none;
}

/* Body at 18/30 on every width: the fleet default measured 16px on a phone,
   under the 17px floor for a reading paper. */
.template-root[data-brand="la-jolla-ledger"] .article-body .payload-richtext > p,
.template-root[data-brand="la-jolla-ledger"] .article-body .payload-richtext li {
  font-size: 18px;
  line-height: 28px;
}

/* Thumb-sized targets for the menu button and the share icons (44px). They
   measured 24px and 20px. Brand-scoped until the shared fix lands
   (design-director gap: size .block-header__icon-btn and
   .article-share-icons__button for every outlet). */
.template-root[data-brand="la-jolla-ledger"] .block-header__icon-btn,
.template-root[data-brand="la-jolla-ledger"] .article-share-icons__button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.template-root[data-brand="la-jolla-ledger"] .article-share-icons__button svg {
  width: 20px;
  height: 20px;
}

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

/* One heavy rule heads the fold. The Most Read rail drew its own 5px rule
   10px under the page rule, which read as a doubled border. */
.template-root[data-brand="la-jolla-ledger"] .block-hero__mostread-title {
  border-top: none;
  padding-top: 0;
}

/* Rank numerals on one fixed column so every headline hangs on one edge. */
.template-root[data-brand="la-jolla-ledger"] .block-numbered-list__index {
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2ch;
}

/* The section link stays one step under the section label on phones. */
.template-root[data-brand="la-jolla-ledger"] .block-section-title__see-all {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The byline line is the trust line: 13px, the name in ink. */
.template-root[data-brand="la-jolla-ledger"] .article-meta {
  font-size: 13px;
}
.template-root[data-brand="la-jolla-ledger"] .article-meta__byline {
  color: var(--brand-tokens-greyscale-900);
  font-weight: 600;
}