/* ============================================================
   棕色系聖誕主題（牛皮紙 × 鐵鏽紅 × 橄欖金）
   ------------------------------------------------------------
   色票取自 D:\AI coding\website\DM 那份聖誕電子 DM，
   同一組變數名，方便日後對照：

     --kraft      #D8CABC  牛皮紙（面板底色，不能當文字底）
     --cream      #F7F1E4  奶油紙（頁面底色）
     --ink        #4A3F36  深棕墨（導覽、頁尾、內文）
     --ink-soft   #6F6252  次要文字
     --rust       #A4502C  鐵鏽紅（主色）
     --rust-deep  #8F4223  深鐵鏽（標籤底、hover）
     --khaki      #665A40  卡其
     --olive      #8A8148  橄欖（對比 3.51，只能裝飾）
     --gold       #C9A349  金（對比 2.12，只能裝飾）

   對比驗算：
     白字 on rust 5.58 ✅ / rust-deep 7.07 ✅ / ink 10.22 ✅ / khaki 6.77 ✅
     rust on cream 4.96 ✅ / ink on cream 9.08 ✅ / ink-soft on cream 5.26 ✅
     白字 on olive 3.95 ❌、on gold 2.38 ❌ → 這兩色只做裝飾線
   ============================================================ */

html[data-theme="brown"] {
  --kraft: #D8CABC;
  --kraft-deep: #C6B6A5;
  --cream: #F7F1E4;
  --ink: #4A3F36;
  --ink-soft: #6F6252;
  --rust: #A4502C;
  --rust-deep: #8F4223;
  --khaki: #665A40;
  --olive: #8A8148;
  --gold: #C9A349;
}

/* 頁面底色：奶油紙，比純白暖、比牛皮紙亮，長時間閱讀不刺眼 */
html[data-theme="brown"] body,
html[data-theme="brown"] .site,
html[data-theme="brown"] .site-main {
  background-color: var(--cream);
}
html[data-theme="brown"] body { color: var(--ink); }

/* 頂部「重要消息」橫條 */
html[data-theme="brown"] .newsx-top-section-wrap {
  background-color: var(--rust) !important;
}

/* 區塊標題（我們的事工 / 最新消息 …） */
html[data-theme="brown"] .newsx-widget-title,
html[data-theme="brown"] .newsx-widget-title-text {
  background-color: var(--rust) !important;
}

/* 分類晶片：鐵鏽紅底白字（5.58 ✅） */
html[data-theme="brown"] a[class*="newsx-cat-"],
html[data-theme="brown"] .newsx-post-categories a {
  background-color: var(--rust) !important;
  color: #fff !important;
}
html[data-theme="brown"] .newsx-post-categories a::before,
html[data-theme="brown"] [class*="newsx-cat-"]::before {
  background-color: var(--gold) !important;
}

/* 連結：鐵鏽紅（cream 上 4.96 ✅） */
html[data-theme="brown"] a,
html[data-theme="brown"] .newsx-entry-title a {
  color: var(--rust);
}
html[data-theme="brown"] a:hover {
  color: var(--rust-deep);
}

/* 引言：換成金色豎線（寬度不動，維持原站 1px） */
html[data-theme="brown"] .wp-block-quote {
  border-left-color: var(--gold) !important;
}

/* 首頁標籤：深鐵鏽紅底白字（7.07 ✅） */
html[data-theme="brown"] h2.wp-block-heading mark,
html[data-theme="brown"] .wp-block-group h3 mark {
  background-color: var(--rust-deep) !important;
  color: #fff !important;
}

/* 區塊標題下方那條細線：金色裝飾 */
html[data-theme="brown"] .newsx-widget-title-wrap {
  border-bottom-color: var(--gold) !important;
}

/* 導覽列與頁尾：深棕墨（奶油字 9.08 ✅） */
html[data-theme="brown"] .newsx-bottom-section-wrap {
  background-color: var(--ink) !important;
}
html[data-theme="brown"] .newsx-site-footer {
  background-color: var(--khaki) !important;
}
html[data-theme="brown"] .newsx-bottom-section-wrap a,
html[data-theme="brown"] .newsx-bottom-section-wrap span,
html[data-theme="brown"] .newsx-bottom-section-wrap div,
html[data-theme="brown"] .newsx-site-footer a,
html[data-theme="brown"] .newsx-site-footer p,
html[data-theme="brown"] .newsx-top-section-wrap a {
  color: var(--cream) !important;
}
html[data-theme="brown"] .newsx-bottom-section-wrap a:hover,
html[data-theme="brown"] .newsx-nav-menu a:hover,
html[data-theme="brown"] .newsx-site-footer a:hover {
  color: #E8C877 !important;
}
html[data-theme="brown"] .newsx-bottom-section-wrap svg,
html[data-theme="brown"] .newsx-bottom-section-wrap path,
html[data-theme="brown"] .newsx-site-footer svg,
html[data-theme="brown"] .newsx-site-footer path {
  fill: currentColor;
  color: var(--cream);
}

/* 導覽列的 HOME 圖示 */
html[data-theme="brown"] .newsx-svg-icon { color: var(--cream) !important; }

/* 行動按鈕、回到頂端 */
html[data-theme="brown"] body > .btg-button {
  background-color: var(--rust) !important;
  color: #fff !important;
}
html[data-theme="brown"] #newsx-back-to-top {
  background-color: var(--rust) !important;
}

/* 深色模式圓點 */
html[data-theme="brown"] .newsx-switch-to-light {
  background-color: var(--rust) !important;
}

/* 頁尾圓形圖示 */
html[data-theme="brown"] .newsx-site-footer div[style],
html[data-theme="brown"] .newsx-site-footer > div > div:empty {
  background-color: var(--rust) !important;
}

/* 原生介面 */
html[data-theme="brown"] ::selection {
  background: rgba(164, 80, 44, .2);
  color: #2b241d;
}
html[data-theme="brown"] a:focus-visible,
html[data-theme="brown"] button:focus-visible {
  outline-color: var(--rust);
}

/* ---- 頁首底圖：亮色模式（照片更清楚） ---- */
html[data-theme="brown"] .newsx-middle-section-wrap {
  background-image:
    linear-gradient(100deg,
      rgba(247,241,228,.95) 0%,
      rgba(247,241,228,.88) 40%,
      rgba(247,241,228,.55) 72%,
      rgba(247,241,228,.22) 100%),
    url("header-bg.jpg");
  background-size: cover, cover;
  background-position: center, right 38%;
  background-repeat: no-repeat, no-repeat;
  min-height: 186px;
  display: flex;
  align-items: center;
}
html[data-theme="brown"] .newsx-middle-section-wrap > .newsx-builder-grid-row { width: 100%; }

/* ---- 頁首底圖：dark 模式 ----
   網站自己的 dark 模式會把站名與選單文字變成白色，
   亮色遮罩上白字等於消失。dark 模式下遮罩改深色（主題綠／棕），
   白字才讀得到，照片也能露得更多。 */
html[data-theme="brown"] body.newsx-dark-mode .newsx-middle-section-wrap {
  background-image:
    linear-gradient(100deg,
      rgba(24,18,14,.95) 0%,
      rgba(24,18,14,.90) 42%,
      rgba(24,18,14,.62) 74%,
      rgba(24,18,14,.32) 100%),
    url("header-bg.jpg");
}
html[data-theme="brown"] body.newsx-dark-mode .newsx-middle-section-wrap .newsx-site-title,
html[data-theme="brown"] body.newsx-dark-mode .newsx-middle-section-wrap a,
html[data-theme="brown"] body.newsx-dark-mode .newsx-middle-section-wrap span {
  color: #fff !important;
}

/* ---- 手機 ---- */
@media (max-width: 767px) {
  html[data-theme="brown"] .newsx-middle-section-wrap {
    min-height: 148px;
    background-position: center, right 30%;
    background-image:
      linear-gradient(90deg,
        rgba(247,241,228,.97) 0%,
        rgba(247,241,228,.93) 52%,
        rgba(247,241,228,.74) 78%,
        rgba(247,241,228,.42) 100%),
      url("header-bg.jpg");
  }
  html[data-theme="brown"] body.newsx-dark-mode .newsx-middle-section-wrap {
    background-image:
      linear-gradient(90deg,
        rgba(24,18,14,.97) 0%,
        rgba(24,18,14,.94) 52%,
        rgba(24,18,14,.78) 78%,
        rgba(24,18,14,.48) 100%),
      url("header-bg.jpg");
  }
}

/* ============================================================
   dark 模式（網站自己的深色模式，body.newsx-dark-mode）
   ------------------------------------------------------------
   網站的深色模式會把文字改成淺色；若我們仍鋪奶油底，
   就會變成「白字壓奶油」完全看不見。所以深色模式下
   整個主題跟著轉深，文字維持淺色。

   對比驗算：內文 13.89、標題 17.13、連結 10.09（皆 > 4.5）
   ============================================================ */
html[data-theme="brown"] body.newsx-dark-mode,
html[data-theme="brown"] body.newsx-dark-mode .site,
html[data-theme="brown"] body.newsx-dark-mode .site-main {
  background-color: #17120E !important;
  color: #EFE6D8 !important;
}
html[data-theme="brown"] body.newsx-dark-mode h1,
html[data-theme="brown"] body.newsx-dark-mode h2,
html[data-theme="brown"] body.newsx-dark-mode h3,
html[data-theme="brown"] body.newsx-dark-mode h4,
html[data-theme="brown"] body.newsx-dark-mode .site-main p,
html[data-theme="brown"] body.newsx-dark-mode .site-main li,
html[data-theme="brown"] body.newsx-dark-mode .site-main strong {
  color: #EFE6D8 !important;
}
html[data-theme="brown"] body.newsx-dark-mode a { color: #E0A070 !important; }
html[data-theme="brown"] body.newsx-dark-mode a:hover { color: #D89A6A !important; }

/* 區塊標題在深色模式改用主題深色，白字才清楚 */
html[data-theme="brown"] body.newsx-dark-mode .newsx-widget-title,
html[data-theme="brown"] body.newsx-dark-mode .newsx-widget-title-text {
  background-color: #6B3418 !important;
  color: #fff !important;
}
html[data-theme="brown"] body.newsx-dark-mode .newsx-widget-title-wrap {
  border-bottom-color: rgba(255, 255, 255, .22) !important;
}
html[data-theme="brown"] body.newsx-dark-mode .newsx-bottom-section-wrap {
  background-color: #120E0A !important;
}
html[data-theme="brown"] body.newsx-dark-mode .newsx-top-section-wrap {
  background-color: #6B3418 !important;
}
html[data-theme="brown"] body.newsx-dark-mode ::selection {
  background: rgba(224,160,112,.28);
  color: #fff;
}
/* 卡片壓圖文字在深色模式下維持白色（本來就對） */
html[data-theme="brown"] body.newsx-dark-mode .newsx-grid-over-media a,
html[data-theme="brown"] body.newsx-dark-mode .newsx-grid-excerpt p {
  color: #fff !important;
}

/* ---- dark 模式：內頁常見的三種「淺底」元素 ----
   1. .wp-block-column.has-background 是編輯器做的淺灰卡片，
      深色模式下若只把文字改淺，就會變成淺字壓淺底（實測 1.13）。
   2. span.has-highlight-color 是螢光筆（淺黃底），本來就配深字。
   3. mark 是本站在段落用的螢光筆（淺紅底），深色模式下要加深。 */
html[data-theme="brown"] body.newsx-dark-mode .site-main .wp-block-column.has-background,
html[data-theme="brown"] body.newsx-dark-mode .site-main .wp-block-group.has-background,
html[data-theme="brown"] body.newsx-dark-mode .site-main [class*="has-background"] {
  background-color: #241C16 !important;
  color: #EFE6D8 !important;
}

html[data-theme="brown"] body.newsx-dark-mode .site-main span.has-highlight-color {
  color: #2A2118 !important;   /* 淺黃底必須配深字 */
}

html[data-theme="brown"] body.newsx-dark-mode .site-main p mark,
html[data-theme="brown"] body.newsx-dark-mode .site-main li mark {
  background: rgba(224,160,112,.26) !important;
  color: #F6EADA !important;
}
/* 標題裡的紅色標籤維持紅底白字 */
html[data-theme="brown"] body.newsx-dark-mode h2 mark,
html[data-theme="brown"] body.newsx-dark-mode h3 mark {
  background-color: #8C1C13 !important;
  color: #fff !important;
}

/* ---- dark 模式：收尾修正 ----
   1. 編輯器在段落裡留下的行內底色（紫 #9b51e0、薄荷綠 #7bdcb5）
      是為淺底設計的，深色模式下配淺字會打架。一律改成半透明中性底＋淺字。
   2. 「奉獻回報／新人聯絡單」按鈕原本是白底，若字被改成淺色就消失（實測 1.24）。
      深色模式下一律用主題色底＋白字。 */
html[data-theme="brown"] body.newsx-dark-mode .site-main mark[style] {
  background: rgba(224,160,112,.22) !important;
  color: #F6EADA !important;
}
html[data-theme="brown"] body.newsx-dark-mode .site-main .btg-button,
html[data-theme="brown"] body.newsx-dark-mode body > .btg-button {
  background-color: #8F4223 !important;
  color: #fff !important;
}
html[data-theme="brown"] body.newsx-dark-mode .site-main a[href^="mailto:"] {
  color: #E0A070 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- dark 模式：行內淺底（編輯器留下的 span/mark inline 底色） ----
   實測「如何參與奉獻」頁有一段 <span style="background-color:#ccffcc">，
   深色模式下是淺字壓薄荷綠底，對比 1.10。
   一律改成半透明中性底 + 淺字，裡面的連結也跟著繼承。 */
/* 編輯器「成對」寫的 inline 樣式（color 在前、background 在後）
   是作者刻意配好的深字淺底，不要去動它；
   只有「單獨一個背景色」的才由我們接手改成深底淺字。 */
html[data-theme="brown"] body.newsx-dark-mode .site-main [style*="background-color"]:not([style^="color"]),
html[data-theme="brown"] body.newsx-dark-mode .site-main [class*="-background-color"]:not(.has-highlight-color) {
  background-color: rgba(224,160,112,.22) !important;
  color: #F6EADA !important;
}
/* 螢光筆（淺黃底）必須配深字，不能被上面的淺字規則蓋掉 */
html[data-theme="brown"] body.newsx-dark-mode .site-main .has-highlight-color,
html[data-theme="brown"] body.newsx-dark-mode .site-main .has-highlight-color span,
html[data-theme="brown"] body.newsx-dark-mode .site-main .has-highlight-color a {
  color: #2A2118 !important;
  background: #FBF3DB !important;
}
/* WordPress 區塊色票底（has-pale-yellow-background-color 之類）一律轉深 */
html[data-theme="brown"] body.newsx-dark-mode .site-main [class*="-background-color"]:not(.has-highlight-color) * {
  color: #F6EADA !important;
}
html[data-theme="brown"] body.newsx-dark-mode .site-main [style*="background-color"]:not([style^="color"]) a,
html[data-theme="brown"] body.newsx-dark-mode .site-main [style*="background:"]:not([style^="color"]) a {
  color: #F6EADA !important;
  text-decoration: underline;
}

/* 文章上下篇導覽（Previous / Next Article） */
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-navigation a,
html[data-theme="brown"] body.newsx-dark-mode .post-navigation a,
html[data-theme="brown"] body.newsx-dark-mode .nav-previous a,
html[data-theme="brown"] body.newsx-dark-mode .nav-next a,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-nav a {
  color: #E0A070 !important;
}
/* 分類／標籤連結 */
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-categories a,
html[data-theme="brown"] body.newsx-dark-mode .tagcloud a,
html[data-theme="brown"] body.newsx-dark-mode .newsx-tags a {
  color: #fff !important;
}

/* ---- 手機選單 ----
   選單展開後是深色條的子容器；主題原本會給它白底，
   配上我們的奶油字就變「白字壓白底」。
   讓條內的選單容器一律透明，文字永遠坐在深色條上。 */
html[data-theme="brown"] .newsx-bottom-section-wrap .newsx-menu-wrapper,
html[data-theme="brown"] .newsx-bottom-section-wrap .newsx-nav-menu,
html[data-theme="brown"] .newsx-bottom-section-wrap [class*="menu-wrapper"],
html[data-theme="brown"] .newsx-bottom-section-wrap [class*="nav-menu"] {
  background-color: transparent !important;
}

/* 文章上下篇導覽：主題色在深底上會太暗，改用淺色 */
html[data-theme="brown"] body.newsx-dark-mode .prev-post,
html[data-theme="brown"] body.newsx-dark-mode .next-post,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-navigation a,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-navigation span {
  color: #E0A070 !important;
}

/* 文章日期在奶油底上原本對比只有 2.68，加深一級 */
html[data-theme="brown"] .site-main time,
html[data-theme="brown"] .newsx-post-date,
html[data-theme="brown"] .newsx-entry-date,
html[data-theme="brown"] .newsx-grid-post-date {
  color: #4E5A66 !important;
}
html[data-theme="brown"] body.newsx-dark-mode .site-main time,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-date,
html[data-theme="brown"] body.newsx-dark-mode .newsx-entry-date {
  color: #C9C0B4 !important;
}

/* ============================================================
   手機漢堡選單面板（實測是白底，配上奶油字 = 白字壓白底）
   .newsx-mobile-menu-container 在淺色模式沿用主題的白底，
   但裡面的連結被深色條的規則染成奶油色。整塊改成深色條的顏色。
   ============================================================ */
html[data-theme="brown"] .newsx-mobile-menu-container,
html[data-theme="brown"] .newsx-mobile-menu-container .newsx-nav-menu,
html[data-theme="brown"] .newsx-nav-menu.newsx-mobile-menu {
  background-color: #4A3F36 !important;
}
html[data-theme="brown"] .newsx-mobile-menu-container a,
html[data-theme="brown"] .newsx-mobile-menu-container li,
html[data-theme="brown"] .newsx-mobile-menu-container span,
html[data-theme="brown"] .newsx-mobile-menu-toggle,
html[data-theme="brown"] .newsx-mobile-menu-toggle span,
html[data-theme="brown"] .newsx-mobile-menu-toggle svg {
  color: #F7F1E4 !important;
  fill: #F7F1E4;
}
html[data-theme="brown"] .newsx-mobile-menu-container li:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, .16) !important;
}
html[data-theme="brown"] .newsx-mobile-menu-container a:hover {
  color: #E8CE7A !important;
}

/* 事工卡片下方的分類標籤條（.category-meta）在深色模式仍是 #F9F9F9 白底，
   配上淺色連結等於白字壓白底，改成深色卡片底。 */
html[data-theme="brown"] body.newsx-dark-mode .category-meta,
html[data-theme="brown"] body.newsx-dark-mode .newsx-category-list .category-meta,
html[data-theme="brown"] body.newsx-dark-mode .newsx-category-list.newsx-s2 .category-meta {
  background-color: #241C16 !important;
}

/* 內頁主內容容器：主題的淺色規則（#fff / #f9f9f9）會蓋過深色模式，
   導致整頁奶油字壓白底（實測 1.24）。強制改成深色卡片底。 */
html[data-theme="brown"] body.newsx-dark-mode .content-area.primary,
html[data-theme="brown"] body.newsx-dark-mode .site-content .primary,
html[data-theme="brown"] body.newsx-dark-mode .newsx-default-page-wrap .primary,
html[data-theme="brown"] body.newsx-dark-mode .newsx-single-content-wrap,
html[data-theme="brown"] body.newsx-dark-mode .newsx-single-inner > .primary {
  background-color: #241C16 !important;
  color: #EFE6D8 !important;
}

/* 分享列（Share Article / 圖示）：深色模式下若容器是白底，
   奶油字會消失。統一給深色底。 */
html[data-theme="brown"] body.newsx-dark-mode .newsx-static-sharing,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-sharing,
html[data-theme="brown"] body.newsx-dark-mode .newsx-float-sharing .newsx-post-sharing {
  background-color: #241C16 !important;
}

/* ---- dark 模式：把所有「主題自訂器寫死成白色／淺色」的容器一次蓋掉 ----
   實測問題：重新載入後 .content-area/.primary/側欄卡片仍是 #fff，
   配上深色模式的奶油字 → 白底白字。這裡逐一把已知容器轉深。 */
html[data-theme="brown"] body.newsx-dark-mode .site-content,
html[data-theme="brown"] body.newsx-dark-mode .content-area,
html[data-theme="brown"] body.newsx-dark-mode .primary,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-content,
html[data-theme="brown"] body.newsx-dark-mode section.newsx-widget,
html[data-theme="brown"] body.newsx-dark-mode .newsx-sidebar section.newsx-widget,
html[data-theme="brown"] body.newsx-dark-mode .site-content :where(section.newsx-widget, .newsx-single-content-wrap, .newsx-default-page-wrap .primary),
html[data-theme="brown"] body.newsx-dark-mode .primary > .newsx-posts-feed .newsx-grid-item {
  background-color: #241C16 !important;
}

/* 分享列的標籤「Share Article」原本是深色字；我們把容器改成深底後，
   深字壓深底（1.12）反而看不見。容器深了，字就要淺。 */
html[data-theme="brown"] body.newsx-dark-mode .newsx-static-sharing,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-sharing,
html[data-theme="brown"] body.newsx-dark-mode .sharing-header,
html[data-theme="brown"] body.newsx-dark-mode .newsx-static-sharing * ,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-sharing * {
  color: #EFE6D8 !important;
}
html[data-theme="brown"] body.newsx-dark-mode .newsx-static-sharing svg,
html[data-theme="brown"] body.newsx-dark-mode .newsx-static-sharing svg * ,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-sharing svg {
  fill: #EFE6D8 !important;
  color: #EFE6D8 !important;
}

/* ============================================================
   dark 模式：主題自訂器把一整批容器寫死成 #ffffff。
   深色模式把文字改淺之後，這些容器就變成「白字壓白底」。
   這裡照著主題那份清單，逐一改成深色卡片底。
   ============================================================ */
html[data-theme="brown"] body.newsx-dark-mode .site-content :where(section.newsx-list-widget, section.newsx-grid-widget,
  section.newsx-social-icons-widget, section.newsx-featured-tabs-widget,
  section.newsx-featured-posts-widget, section.newsx-category-list-widget,
  .widget_tag_cloud, .widget_text, .widget_block .wp-block-table, .widget_search,
  .newsx-single-content-wrap, .newsx-default-page-wrap .primary),
html[data-theme="brown"] body.newsx-dark-mode .primary > .newsx-posts-feed .newsx-grid-item,
html[data-theme="brown"] body.newsx-dark-mode .primary > .newsx-posts-feed > .newsx-blog-pagination,
html[data-theme="brown"] body.newsx-dark-mode .newsx-fp-row-extra .newsx-posts-feed .newsx-grid-item,
html[data-theme="brown"] body.newsx-dark-mode .newsx-post-author-box,
html[data-theme="brown"] body.newsx-dark-mode .newsx-related-posts-wrap,
html[data-theme="brown"] body.newsx-dark-mode .newsx-newsletter-wrap,
html[data-theme="brown"] body.newsx-dark-mode .newsx-table-of-contents,
html[data-theme="brown"] body.newsx-dark-mode article.entry-comments,
html[data-theme="brown"] body.newsx-dark-mode .comment-respond,
html[data-theme="brown"] body.newsx-dark-mode .wp-block-group.has-background,
html[data-theme="brown"] body.newsx-dark-mode .newsx-sidebar .newsx-widget,
html[data-theme="brown"] body.newsx-dark-mode .newsx-category-list li,
html[data-theme="brown"] body.newsx-dark-mode table,
html[data-theme="brown"] body.newsx-dark-mode td,
html[data-theme="brown"] body.newsx-dark-mode th {
  background-color: #241C16 !important;
}
html[data-theme="brown"] body.newsx-dark-mode .site-content :where(section.newsx-list-widget, section.newsx-grid-widget, * {
  color: #EFE6D8;
}

/* 淺色主題的紅字標記（has-vivid-red-color）在奶油底上只有 3.68，加深到 5.2 */
html[data-theme="brown"] body:not(.newsx-dark-mode) .site-main .has-vivid-red-color,
html[data-theme="brown"] body:not(.newsx-dark-mode) .site-main mark.has-vivid-red-color {
  color: #A3201A !important;
}