/* Mandarin Beacon: a neighbourly front after the "Neighborly" and "Live Local"
   mocks. Cream paper #f5f0e6, white cards drawn with a warm hairline and 12px
   corners, one leaf-green accent #3b6a4c (6.1:1 on the paper) for labels,
   links and the current nav link, and the soft cream tint #fbf1dc for the
   signup band. Fraunces for headlines and story text, Instrument Sans for
   every other word. The masthead lockup is Brand tab artwork.

   Grouped by component with final values. Three rule groups stand in for
   primitives the block library does not have yet (follow-up tickets): the
   one-row header, column cards, and the page order that keeps the top row
   from repeating the main story. */
.template-root[data-brand="mandarin-beacon"] {
  --brand-tokens-brand-50: #eef5ef;
  --brand-tokens-brand-100: #dcebdf;
  --brand-tokens-brand-200: #b9d6bf;
  --brand-tokens-brand-300: #8fbb9a;
  --brand-tokens-brand-400: #639b73;
  --brand-tokens-brand-500: #4a8059;
  --brand-tokens-brand-600: #3b6a4c;
  --brand-tokens-brand-700: #2f563d;
  --brand-tokens-brand-800: #24432f;
  --brand-tokens-brand-900: #1a3122;
  --brand-tokens-brand-950: #0f1d14;
  /* Warm cream greys: 10 is the page, 900 the ink. */
  --brand-tokens-greyscale-10: #f5f0e6;
  --brand-tokens-greyscale-50: #efe8da;
  --brand-tokens-greyscale-100: #e5dccb;
  --brand-tokens-greyscale-200: #d4cab6;
  --brand-tokens-greyscale-300: #b5ab97;
  --brand-tokens-greyscale-400: #8f8674;
  --brand-tokens-greyscale-500: #686051;
  --brand-tokens-greyscale-600: #524b3f;
  --brand-tokens-greyscale-700: #3d372e;
  --brand-tokens-greyscale-800: #2a2620;
  --brand-tokens-greyscale-900: #1d1f1a;
  --brand-tokens-greyscale-950: #121310;
  --brand-tokens-greyscale-1000: #080907;
  --brand-tokens-typography-body: "Instrument Sans";
  --brand-tokens-typography-labels: "Instrument Sans";
  --brand-tokens-typography-titles-a: "Fraunces";
  --brand-tokens-typography-titles-b: "Fraunces";
  --tint-light: #fbf1dc;

  /* Card roles (proposal 022, plus --card-border). */
  --card-fill: #fffdf8;
  --card-surface-radius: var(--global-rounding-xl);
  --card-border: 1px solid var(--brand-tokens-greyscale-100);
  --card-shadow: none;
  --panel-radius: var(--global-rounding-xl);
  --card-grid-three-tracks: repeat(3, minmax(0, 1fr));
  --card-grid-four-tracks: repeat(4, minmax(0, 1fr));
  --label-tone-civic: var(--brand-tokens-brand-700);
  --label-tone-everyday: var(--brand-tokens-brand-700);
  --menubar-current-underline: 2px;
  --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-700);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-800);
}

.template-root[data-brand="mandarin-beacon"] .block-container--bg-default {
  --text-default-4: var(--brand-tokens-brand-700);
  --interactive-text-primary-idle: var(--brand-tokens-brand-700);
  --interactive-text-primary-hover: var(--brand-tokens-brand-800);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-900);
  --hairline-color: var(--brand-tokens-greyscale-100);
}

/* ---- Page order (stand-in for a dedupe-priority option) --------------- */
/* The recipe puts the main story before the top row so the front page's
   repeat check never shows the main story twice; on desktop the top row is
   shown above it. Every top-level child keeps its place otherwise. */
.template-root[data-brand="mandarin-beacon"] {
  display: flex;
  flex-direction: column;
}
.template-root[data-brand="mandarin-beacon"] > * {
  order: 3;
}
.template-root[data-brand="mandarin-beacon"] > .block-container:has(.block-header) {
  order: 0;
}
.template-root[data-brand="mandarin-beacon"] > .block-container:has(.block-footer) {
  order: 9;
}
@media (min-width: 1200px) {
  .template-root[data-brand="mandarin-beacon"] > .block-container:has(.block-weather) {
    order: 1;
  }
  .template-root[data-brand="mandarin-beacon"] > .block-container:has(.block-feature-card) {
    order: 2;
  }
}

/* ---- Header: one row on desktop (stand-in for a Header variant) ------- */
/* Header v2 and NavBar v4 render as two blocks; from the system desktop
   breakpoint their wrappers step aside (display: contents) so the masthead,
   the section links, the search field and Subscribe share one row. */
@media (min-width: 1200px) {
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    > .block-container__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding-block: var(--spacing-4);
    border-bottom: 1px solid var(--brand-tokens-greyscale-100);
  }
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    :where(div):has(> .block-header),
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    :where(div):has(> .block-menubar),
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    .block-header--v2,
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    .block-menubar--v4 {
    display: contents;
  }
  .template-root[data-brand="mandarin-beacon"] .block-header__home-link {
    order: 0;
    flex: none;
  }
  .template-root[data-brand="mandarin-beacon"] .block-header--v2 .block-header__masthead-art {
    height: 48px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-menubar__items {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: var(--spacing-3);
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  .template-root[data-brand="mandarin-beacon"] .block-menubar__search-bar {
    order: 2;
    flex: 0 0 170px;
    width: 170px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-header__v2-aside {
    order: 3;
    flex: none;
  }
}
/* Narrow desktops: tighter links and a shorter search field keep all eight
   sections on the row. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .template-root[data-brand="mandarin-beacon"]
    .block-container:has(.block-header)
    > .block-container__inner {
    gap: var(--spacing-2);
  }
  .template-root[data-brand="mandarin-beacon"] .block-menubar__items {
    gap: var(--spacing-2);
  }
  .template-root[data-brand="mandarin-beacon"] .block-menubar__link {
    font-size: 13px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-menubar__search-bar {
    flex-basis: 140px;
    width: 140px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-header--v2 .block-header__masthead-art {
    height: 44px;
  }
}
.template-root[data-brand="mandarin-beacon"] .block-menubar__link {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
/* The inverted bar sets its own link weight. */
.template-root[data-brand="mandarin-beacon"] :where(.block-menubar:not([data-bg="inverted"])) .block-menubar__link {
  font-weight: 500;
}
/* Dark and brand bars set their own link colour. */
.template-root[data-brand="mandarin-beacon"] :where(.block-menubar:not([data-bg="inverted"], [data-bg="brand"])) .block-menubar__link {
  color: var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="mandarin-beacon"] :where(.block-menubar:not([data-bg="inverted"], [data-bg="brand"])) .block-menubar__link[aria-current="page"] {
  color: var(--brand-tokens-brand-700);
  font-weight: 600;
}
.template-root[data-brand="mandarin-beacon"] .block-menubar__search-bar {
  min-height: 44px;
  padding-inline: var(--spacing-3);
  border: 1px solid var(--brand-tokens-greyscale-200);
  border-radius: var(--global-rounding-l);
  background: var(--card-fill);
}
.template-root[data-brand="mandarin-beacon"] .block-menubar__search-input::placeholder {
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .block-header__subscribe-btn {
  min-height: 44px;
  padding-inline: var(--spacing-5);
  border-radius: var(--global-rounding-l);
}

/* ---- Labels and meta -------------------------------------------------- */
/* One label voice: tracked green caps for kickers and card labels. */
.template-root[data-brand="mandarin-beacon"] .card-section-label,
.template-root[data-brand="mandarin-beacon"] .article-kicker,
.template-root[data-brand="mandarin-beacon"]
  .block-section-title--v2
  .block-section-title__heading {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-tokens-brand-700);
}
.template-root[data-brand="mandarin-beacon"] .block-section-title--v2 {
  margin-bottom: var(--spacing-2);
}
.template-root[data-brand="mandarin-beacon"] .block-section-title--v2 .block-section-title__line {
  display: none;
}
.template-root[data-brand="mandarin-beacon"] .card-meta {
  font-size: 13px;
  color: var(--brand-tokens-greyscale-600);
}

/* ---- Desk heads ------------------------------------------------------- */
.template-root[data-brand="mandarin-beacon"]
  .block-section-title--v1
  .block-section-title__heading {
  flex: 0 1 auto;
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
}
.template-root[data-brand="mandarin-beacon"] .block-section-title__see-all {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Cards ------------------------------------------------------------ */
/* The card surface comes from the roles above; the text gets its inset and
   the photo keeps square bottom corners against it. */
.template-root[data-brand="mandarin-beacon"] .card {
  --card-image-radius: var(--global-rounding-xl) var(--global-rounding-xl) 0 0;
  height: 100%;
}
.template-root[data-brand="mandarin-beacon"] .card .card__text {
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
}
.template-root[data-brand="mandarin-beacon"] .card__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Column cards (stand-in for a Container column surface option) ---- */
/* A column that holds a desk list or the weather is one white card. */
.template-root[data-brand="mandarin-beacon"] .block-container__col:has(> .block-headline-list),
.template-root[data-brand="mandarin-beacon"] .block-container__col:has(.block-weather) {
  padding: var(--spacing-6);
  background: var(--card-fill);
  border: var(--card-border);
  border-radius: var(--card-surface-radius);
}
@media (min-width: 1200px) {
  .template-root[data-brand="mandarin-beacon"] .block-container__inner--columns {
    align-items: stretch;
    gap: var(--spacing-6);
  }
}

/* ---- Headline lists --------------------------------------------------- */
.template-root[data-brand="mandarin-beacon"] .block-headline-list--v3 .block-headline-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1, 4px);
}
.template-root[data-brand="mandarin-beacon"] .block-headline-list--v3 .card-meta {
  order: 3;
  font-size: 12px;
}
.template-root[data-brand="mandarin-beacon"] .block-headline-list__title {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
}
.template-root[data-brand="mandarin-beacon"] .block-headline-list__dek {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-tokens-greyscale-600);
}
/* Around Mandarin: the date first, in green, like the mock's live updates. */
.template-root[data-brand="mandarin-beacon"]
  .block-container__col--fixed
  .block-headline-list__item {
  padding-block: 10px;
  border-top: 1px solid var(--brand-tokens-greyscale-100);
}
.template-root[data-brand="mandarin-beacon"]
  .block-container__col--fixed
  .block-headline-list__item:first-child {
  border-top: 0;
}
.template-root[data-brand="mandarin-beacon"]
  .block-container__col--fixed
  .block-headline-list--v3
  .card-meta {
  order: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-tokens-brand-700);
}

/* ---- Weather card ----------------------------------------------------- */
.template-root[data-brand="mandarin-beacon"] .block-container__col .block-weather,
.template-root[data-brand="mandarin-beacon"] .block-container__col .block-weather__header {
  padding: 0;
  background: none;
  text-align: left;
  align-items: flex-start;
}
.template-root[data-brand="mandarin-beacon"] .block-weather__location {
  font-family: var(--brand-tokens-typography-labels), sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="mandarin-beacon"] .block-weather__reading {
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-size: 48px;
  line-height: 1;
  color: var(--brand-tokens-greyscale-900);
}
.template-root[data-brand="mandarin-beacon"] .block-weather__condition {
  font-size: 15px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .block-weather__time,
.template-root[data-brand="mandarin-beacon"] .block-weather__feels {
  display: none;
}

/* ---- Main story: one split card, photo left --------------------------- */
.template-root[data-brand="mandarin-beacon"] .block-feature-card {
  height: 100%;
  overflow: hidden;
  background: var(--card-fill);
  border: var(--card-border);
  border-radius: var(--card-surface-radius);
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__split {
  gap: 0;
  height: 100%;
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__media-link {
  flex: 0 0 46%;
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__image,
.template-root[data-brand="mandarin-beacon"] .block-feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  --card-image-radius: 0;
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__text {
  flex: 1 1 54%;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-10, 40px) var(--spacing-10, 40px) var(--spacing-10, 40px)
    var(--spacing-12, 48px);
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__title {
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-size: 44px;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: -0.02em;
  --feature-card-title-clamp: none;
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__dek {
  -webkit-line-clamp: 4;
  font-size: 18px;
  line-height: 28px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .block-feature-card__textonly {
  padding: var(--spacing-10, 40px);
  border-top: 0;
}
.template-root[data-brand="mandarin-beacon"]
  .block-feature-card__textonly
  .block-feature-card__title {
  max-width: none;
  font-size: 36px;
  line-height: 42px;
}

/* ---- Signup and editor ------------------------------------------------ */
.template-root[data-brand="mandarin-beacon"] .block-cta__bar {
  padding: var(--spacing-6) var(--spacing-8, 32px);
  background: var(--tint-light);
  border-radius: var(--card-surface-radius);
}
.template-root[data-brand="mandarin-beacon"] .block-cta__bar-title {
  border-left: 0;
  padding-left: 0;
}
.template-root[data-brand="mandarin-beacon"] .block-cta__bar-heading {
  font-size: 28px;
  font-weight: 600;
}
.template-root[data-brand="mandarin-beacon"] .block-cta__bar-desc {
  margin: var(--spacing-1, 4px) 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .block-cta__input {
  min-height: 44px;
  border-color: var(--brand-tokens-greyscale-400);
  border-radius: var(--global-rounding-l);
  background: var(--card-fill);
}
.template-root[data-brand="mandarin-beacon"] .block-cta__input::placeholder {
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .block-cta__form button {
  min-height: 44px;
  border-radius: var(--global-rounding-l);
}
.template-root[data-brand="mandarin-beacon"] .block-about-editor {
  padding: var(--spacing-8, 32px);
  background: var(--card-fill);
  border: var(--card-border);
  border-radius: var(--card-surface-radius);
}
.template-root[data-brand="mandarin-beacon"] .block-about-editor__body {
  padding-bottom: 0;
}
.template-root[data-brand="mandarin-beacon"] .block-about-editor__image {
  flex: none;
  width: 120px;
  min-width: 0;
  max-width: 120px;
  max-height: 120px;
  aspect-ratio: 1;
  border-radius: 999px;
}

/* ---- Article ---------------------------------------------------------- */
.template-root[data-brand="mandarin-beacon"] .block-article-hero__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.template-root[data-brand="mandarin-beacon"] .block-article-hero {
  --card-image-radius: var(--global-rounding-m);
}
.template-root[data-brand="mandarin-beacon"] .block-article-hero__caption {
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-tokens-greyscale-600);
}
.template-root[data-brand="mandarin-beacon"] .article-meta {
  font-size: 14px;
}
.template-root[data-brand="mandarin-beacon"] .article-meta__byline {
  font-weight: 600;
  color: var(--brand-tokens-greyscale-900);
}
/* One reading size for every story body and standard page: Fraunces 19/32. */
.template-root[data-brand="mandarin-beacon"] .payload-richtext > p,
.template-root[data-brand="mandarin-beacon"] .payload-richtext li,
.template-root[data-brand="mandarin-beacon"] .payload-richtext blockquote {
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-size: 19px;
  line-height: 32px;
  font-weight: 400;
}
.template-root[data-brand="mandarin-beacon"] .payload-richtext h2,
.template-root[data-brand="mandarin-beacon"] .payload-richtext h3 {
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-weight: 600;
}

/* ---- Below desktop ---------------------------------------------------- */
@media (max-width: 1199px) {
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__media-link {
    flex: 1 1 auto;
    aspect-ratio: 16 / 10;
  }
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__text,
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__textonly {
    padding: var(--spacing-5);
  }
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__title {
    font-size: 30px;
    line-height: 36px;
  }
}
@media (max-width: 767px) {
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__title,
  .template-root[data-brand="mandarin-beacon"]
    .block-feature-card__textonly
    .block-feature-card__title {
    font-size: 25px;
    line-height: 31px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-feature-card__dek {
    font-size: 16px;
    line-height: 24px;
  }
  /* Hero text cards keep the block's smaller title. */
  .template-root[data-brand="mandarin-beacon"] .card__title:where(:not(.block-hero .card--text .card__title)) {
    font-size: 20px;
    line-height: 26px;
  }
  .template-root[data-brand="mandarin-beacon"] .block-container__col:has(> .block-headline-list),
  .template-root[data-brand="mandarin-beacon"] .block-container__col:has(.block-weather) {
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-5);
  }
  .template-root[data-brand="mandarin-beacon"] .block-headline-list--v3 .card-meta {
    font-size: 13px;
  }
}

/* ---- Fleet fixes (brand-scoped until the shared fix lands) ------------ */
/* 44px icon targets; one shared fix replaces this block in all four PoC
   themes (follow-up). */
.template-root[data-brand="mandarin-beacon"] .block-header__icon-btn,
.template-root[data-brand="mandarin-beacon"] .article-share-icons__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.template-root[data-brand="mandarin-beacon"] .article-share-icons__button svg {
  width: 20px;
  height: 20px;
}