/* 都會評析 metrolifereview.hk —— 品牌层（Bootstrap 5.3 之上的薄薄一层）
   角度：評測推薦 / 語調：審慎透明 / 模板分組：Magazine 資訊流
   主色：梅紅 #8c2f4a + 橄欖金 #9c7c22（準則編號与榜單計數高亮）
        —— 与站 1 墨青綠 #0f6b5c、站 9 磚紅 #a8402d、站 3 石板藍 #3b4f6b、站 6 靛紫 #513a94 都不同
   字体：标题与正文同为无衬线（Noto Sans HK），但**数据层**（評選準則編號、榜單索引、
        對比表、序号）改用襯線 tabular（Noto Serif HK）
        —— 第 5 套组合：站 1 sans/sans 无区分、站 9 serif/sans、站 3 sans/serif、
           站 6 serif/serif、本站 sans/sans + serif 数据层
   规则：能用 Bootstrap 类解决的一律不写自定义样式；这里只放
        ① 品牌变量覆盖 ② Bootstrap 没有的正文排版(prose) ③ 評選準則与榜單索引专属组件 */

:root{
  --bs-primary:#8c2f4a;
  --bs-primary-rgb:140,47,74;
  --brand-dark:#5c1c31;
  --brand-soft:#fbeff2;
  --brand-accent:#9c7c22;
  --brand-accent-soft:#f7f2e2;

  --bs-link-color:#8c2f4a;
  --bs-link-color-rgb:140,47,74;
  --bs-link-hover-color:#5c1c31;
  --bs-link-hover-color-rgb:92,28,49;

  --bs-body-color:#232026;
  --bs-body-color-rgb:35,32,38;
  --bs-secondary-color:rgba(35,32,38,.68);
  --bs-tertiary-color:rgba(35,32,38,.5);
  --bs-border-color:#e9dee2;
  --bs-tertiary-bg:#faf7f8;
  --bs-border-radius:.5rem;
  --bs-border-radius-sm:.25rem;

  --bs-body-font-family:"Noto Sans HK","PingFang HK","Hiragino Sans CNS","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bs-body-font-size:1.02rem;
  --bs-body-line-height:1.85;
  --brand-serif:"Noto Serif HK","Source Han Serif HK","Songti TC","PMingLiU",Georgia,serif;
}

/* 标题与正文同为无衬线；数据层（准则编号 / 榜单 / 表格 / 序号）走衬线 tabular */
h1,h2,h3,h4,h5,h6{font-family:var(--bs-body-font-family);font-weight:700;letter-spacing:-.01em}
.num,.crit-no,.rv-count,.hot-no,table td,table th{font-family:var(--brand-serif);font-variant-numeric:tabular-nums}
.brand-kicker{font-family:var(--brand-serif);font-size:.62rem;letter-spacing:.18em}

.btn-primary{--bs-btn-bg:#8c2f4a;--bs-btn-border-color:#8c2f4a;--bs-btn-hover-bg:#5c1c31;--bs-btn-hover-border-color:#5c1c31;--bs-btn-active-bg:#5c1c31;--bs-btn-active-border-color:#5c1c31}
.btn-outline-primary{--bs-btn-color:#8c2f4a;--bs-btn-border-color:#8c2f4a;--bs-btn-hover-bg:#8c2f4a;--bs-btn-hover-border-color:#8c2f4a;--bs-btn-active-bg:#8c2f4a;--bs-btn-active-border-color:#8c2f4a}
.bg-brand-dark{background-color:var(--brand-dark)!important}
.bg-brand-soft{background-color:var(--brand-soft)!important}
.text-accent{color:var(--brand-accent)!important}

/* 区块标题：衬线双竖线前缀，跟站 1 竖杠、站 9 下划线、站 3 方块、站 6 § 号都不同 */
.sec-title{font-size:1.28rem;font-weight:700;margin:0;display:flex;align-items:baseline;gap:.5rem}
.sec-title::before{content:"//";font-family:var(--brand-serif);font-size:.95rem;color:var(--brand-accent);font-weight:700;letter-spacing:-.06em}

.thumb-16x9{background:var(--bs-tertiary-bg);overflow:hidden}
.thumb-16x9 img{width:100%;height:100%;object-fit:cover}

.navbar .nav-link{font-weight:600}
.navbar .nav-link.active{color:var(--bs-primary)!important;box-shadow:inset 0 -3px 0 var(--brand-accent)}

/* ③-1 招牌模組：評選準則說明（設定包站 11，置於榜單索引之上） */
.crit-card{background:#fff;border:1px solid var(--bs-border-color);border-top:3px solid var(--bs-primary);padding:1rem 1.1rem;position:relative}
.crit-card-note{border-top-color:var(--brand-accent);background:var(--brand-accent-soft)}
.crit-no{font-size:1.5rem;font-weight:700;color:var(--brand-accent);line-height:1;display:block;margin-bottom:.35rem}
.crit-name{font-size:1.02rem;font-weight:700;margin:0 0 .35rem}
.crit-text{font-size:.86rem;line-height:1.75;color:var(--bs-secondary-color);margin:0}
/* 文章页顶部的准则声明条 */
.crit-banner{border:1px solid var(--bs-border-color);border-left:4px solid var(--bs-primary);background:var(--brand-soft);padding:.8rem 1rem;font-size:.86rem;line-height:1.7}
.crit-banner-tag{display:inline-block;font-family:var(--brand-serif);font-size:.7rem;letter-spacing:.1em;color:#fff;background:var(--bs-primary);padding:.1rem .5rem;margin-bottom:.35rem}

/* ③-2 榜單索引：領域入口牆 + 下方展开面板
   格子只是本页锚点，点击由 site.js 接管，不会连去 /tag/ 这类静态站不存在的路径 */
.rv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (min-width:576px){.rv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rv-cell{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem;background:#fff;border:1px solid var(--bs-border-color);border-bottom:3px solid var(--bs-border-color);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.rv-cell:hover{border-color:var(--bs-primary);border-bottom-color:var(--brand-accent);box-shadow:0 .25rem .75rem rgba(92,28,49,.08);text-decoration:none;color:inherit}
.rv-cell.active{border-color:var(--bs-primary);border-bottom-color:var(--brand-accent);background:var(--brand-soft)}
.rv-cell.rv-empty{opacity:.55}
.rv-name{font-weight:700;font-size:.98rem;line-height:1.4}
.rv-note{font-size:.72rem;color:var(--bs-tertiary-color);line-height:1.4}
.rv-count{font-size:.75rem;color:var(--brand-accent);font-weight:700;margin-top:.15rem}

.rv-item{display:block;height:100%;padding:.55rem .7rem;border-bottom:1px solid var(--bs-border-color);text-decoration:none;color:inherit}
.rv-item:hover{background:var(--bs-tertiary-bg);color:var(--bs-primary);text-decoration:none}
.rv-item-title{display:block;font-size:.96rem;line-height:1.55}
.rv-item-meta{font-size:.72rem;color:var(--bs-tertiary-color);display:flex;justify-content:space-between;gap:.5rem;margin-top:.15rem}

/* 熱門查閱：编号行式清单（Magazine 分组的资讯流感） */
.hot-row{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .2rem;border-bottom:1px solid var(--bs-border-color);text-decoration:none;color:inherit}
.hot-row:hover{color:var(--bs-primary);text-decoration:none}
.hot-no{font-size:1rem;font-weight:700;color:var(--brand-accent);min-width:1.8rem}
.hot-title{flex:1 1 auto;font-size:.96rem;line-height:1.5}
.hot-cat{font-size:.72rem;color:var(--bs-tertiary-color);white-space:nowrap}

/* 首頁 ABOUT 區塊（靜態站冇 /about/ 獨立頁，改做區塊 + 錨點） */
.about-list{list-style:none;padding:0;margin:0;font-size:.9rem;line-height:1.8;color:var(--bs-secondary-color)}
.about-list li{padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.about-list li::before{content:"—";position:absolute;left:0;color:var(--brand-accent);font-family:var(--brand-serif)}

/* ② 正文排版：Bootstrap 不提供 prose，文章正文由 CMS 输出裸标签，这段必须自己写 */
.article-body{line-height:1.95}
.article-body h2{font-size:1.3rem;margin:2.1rem 0 .9rem;padding-left:.8rem;border-left:5px solid var(--bs-primary)}
.article-body h3{font-size:1.1rem;margin:1.6rem 0 .7rem;padding-left:.6rem;border-left:3px solid var(--brand-accent)}
.article-body p{margin:0 0 1.1rem}
.article-body ul,.article-body ol{margin:0 0 1.1rem;padding-left:1.4rem}
.article-body li{margin-bottom:.45rem}
.article-body img{max-width:100%;height:auto;margin:.6rem 0}
.article-body blockquote{margin:1.2rem 0;padding:.8rem 1rem;background:var(--brand-accent-soft);border-left:4px solid var(--brand-accent)}
.article-body a{text-decoration:underline}
/* 評測對比表係本站每篇嘅必備結構，畀足存在感 */
.article-body .table>thead th{background:var(--brand-soft);white-space:nowrap;font-weight:700}
.article-body .table td,.article-body .table th{vertical-align:middle}

.article-body h2[id],.article-body h3[id],[id^="sec-"]{scroll-margin-top:78px}