/* =====================================================================
   HỆ THỐNG THIẾT KẾ (design system) — 04/10/2026
   Nạp SAU CÙNG ở mọi trang. Mọi giá trị cỡ chữ / khoảng cách / khung ảnh
   lấy từ các biến dưới đây. Tài liệu: docs/design-review/2026-10-04-2-he-thong-thiet-ke.md
   Web thật (Astro) dùng lại đúng các biến này.
   ===================================================================== */
:root{
  /* màu — "Kết hợp" (đã duyệt) */
  --c-bg:#46120a; --c-bg-deep:#2c0c08; --c-bg-deepest:#1c0705; --c-brick:#74302b; --c-terra:#993d30;
  --c-text:#f2e2d6; --c-text-2:#e2c4b8; --c-accent:#e0a526; --c-accent-text:#ecb547; --c-line:rgba(224,165,38,.32);

  /* chữ */
  --f-serif:'Cormorant Garamond',serif; --f-sans:'Be Vietnam Pro',sans-serif; --f-tib:'Noto Serif Tibetan',serif;
  --t-h3:28px;      /* tiêu đề trong khối (thẻ lớn, bảng tin) */
  --t-h4:22px;      /* tên dưới hình, tiêu đề mốc thời gian */
  --t-lead:18px;    /* câu dẫn */
  --t-body:16px;    /* chữ thân */
  --t-small:14px;   /* mô tả phụ dưới hình */
  --t-label:12px;   /* nhãn nhỏ in hoa — tối thiểu */
  --lh-body:1.75; --lh-tight:1.2; --ls-label:.28em;

  /* khoảng cách */
  --sp-section:128px; --sp-section-s:96px; --sp-block:64px; --sp-col:72px; --sp-photo:16px; --sp-gutter:48px;

  /* chuyển động */
  --ease:cubic-bezier(.2,.7,.2,1); --dur:1.2s;
}
@media(max-width:820px){
  :root{--t-h3:24px;--t-h4:20px;--t-lead:17px;--sp-section:88px;--sp-section-s:64px;--sp-block:44px;--sp-col:36px;--sp-photo:10px;--sp-gutter:20px}
}

/* ---------- 1. Khoảng cách khối: 3 bậc ---------- */
/* khối nội dung thường */
section:not(.holy):not(.seq):not(.wide):not(.duo):not(.ch):not(.lede):not(.close):not(.acts):not(.teaser):not(.echo):not(.offset):not(.spread):not(.story){padding-top:var(--sp-section)!important;padding-bottom:var(--sp-section)!important}
section.acts{padding-top:var(--sp-section)!important;padding-bottom:32px!important}
/* khối phụ / khối kết */
section.teaser,section.ch,section.close{padding-top:var(--sp-section-s)!important;padding-bottom:var(--sp-section)!important}
section.lede{padding-top:var(--sp-section-s)!important;padding-bottom:40px!important}
/* chuỗi ảnh liền mạch (Kyura/Palden/Việt Nam): giữ không đệm trên, nhịp giữa các nhóm = 96 */
section.wide,section.duo.end{margin-top:var(--sp-section-s)!important}
section.duo.end{padding-bottom:var(--sp-section)!important}
/* trong khối Truyền thừa trang chủ */
.founders .holders,.founders .rosary{margin-top:var(--sp-block)!important;padding-top:var(--sp-block)!important}
.fgrid{margin-top:var(--sp-block)!important}

/* ---------- 2. Chữ: thang cỡ cố định ---------- */
.body,p.body,.intro p,.about p,.ev p,.panel p,.mon .head p,.founders .intro,.txt .body,.terton p{font-size:var(--t-body)!important;line-height:var(--lh-body)!important}
.lead,.hero p,.lede p,.phero .lead{font-size:var(--t-lead)!important;line-height:var(--lh-body)!important}
.fname p,.hgrid p,.holy .name p{font-size:var(--t-small)!important;line-height:1.65!important}
.panel h3,.text-card .h3,.vn .t h3,.card h3,.holders h3.t{font-size:var(--t-h3)!important;line-height:var(--lh-tight)!important}
.fname h3,.hgrid h3,.hgrid h4,.holy .name h3,.holyname h3,.ev h3,.holyname,.tlp .holyname{font-size:var(--t-h4)!important;line-height:1.25!important}
/* nhãn nhỏ: MỘT kiểu duy nhất */
.eyebrow,.holders .sub,.rosary .sub,.card .n,.vn .t .n,.verse small,.dawn .verse small,.nums small,.stats small,.facts small,.kv small,
.idx a small,.close .note,.mala .mid span,.ev .yr small,.chain small,.places small{
  font-family:var(--f-sans)!important;font-size:var(--t-label)!important;font-weight:400!important;font-style:normal!important;
  letter-spacing:var(--ls-label)!important;text-transform:uppercase;color:var(--c-text-2)!important}
.chain small{letter-spacing:.06em!important;text-transform:none}   /* tên Việt dưới tên Tổ: chữ thường cho dễ đọc */
.eyebrow + .h2,.eyebrow + h2{margin-top:14px!important}

/* ---------- 3. Khung ảnh: 2 kiểu ---------- */
/* (a) ảnh thường: trần — không viền, không bóng */
.tlp img,.close .ph,.ph:not(.holy .ph):not(.print){border:0!important;box-shadow:none!important}
.tlp img{border:0!important;box-shadow:none!important}
/* (b) hình thánh & thangka: viền chỉ vàng mảnh, đồng nhất */
.holy .ph,.tk-img,.niche,.pniche,.hp{border-color:var(--c-line)!important}
/* khoảng hở giữa ảnh: một giá trị */
.seq,.grid,.duo,.gal,.gal .row,.agrid,.cards{gap:var(--sp-photo)!important}

/* ---------- 4. Thành phần ---------- */
/* liên kết dạng chữ gạch chân (một kiểu) */
.link,.more,.rosary a,.acts .head a,.places .back{font-family:var(--f-sans)!important;font-size:var(--t-label)!important;letter-spacing:.22em!important;text-transform:uppercase;
  color:var(--c-text)!important;border-bottom:1px solid var(--c-accent)!important;text-decoration:none}
.link:hover,.more:hover,.rosary a:hover,.acts .head a:hover{color:var(--c-accent-text)!important}
/* câu trích / tâm nguyện: nghiêng, không ngoặc kép */
.about blockquote,.intro blockquote{font-size:22px!important;line-height:1.5!important}
/* tên hình thánh trong lưới 2 cột trên điện thoại: nhỏ hơn 1 bậc, ngắt cân */
@media(max-width:820px){.holy .name h3,.holyname h3{font-size:18px!important;text-wrap:balance}}

/* ---------- 5. Thang cỡ chữ có chân (Cormorant) ----------
   92 tên Thầy (trang chủ) · 52 h1 · 37 h2 · 36 câu thơ trên ảnh · 44 con số · 28 h3 · 22 h4/ghi chú nghiêng · 20 tên nhỏ · 17 chuỗi Tổ */
.founders h2,.mon h2,.acts h2,.about h2,section.mon .head h2,.intro h2{font-size:clamp(28px,2.6vw,40px)!important;line-height:1.18!important}
@media(max-width:820px){.founders h2,.mon h2,.acts h2,.about h2,.intro h2{font-size:clamp(24px,6.6vw,28px)!important}}
.band p,.verse,.dawn .verse{font-size:clamp(24px,2.5vw,36px)!important}
.nums div,.facts div,.ev .yr{font-size:44px!important}
@media(max-width:820px){.nums div,.facts div,.ev .yr{font-size:34px!important}}
.mala-note,.open .t p.msg{font-size:22px!important}
.pin b{font-size:20px!important}
/* ghi chú bản phác (chỉ có ở bản phác) — vẫn đủ tương phản để đọc */
.note,.draft,.pastgrid p[style*="rose"],.text-card p[style*="rose"]{color:#dcae9f!important}

/* ---------- 6. Kỹ thuật hiện đại (modern-web-guidance) ---------- */
/* chuyển trang mượt kiểu "lật trang sách": trang cũ mờ dần, trang mới hiện lên (trình duyệt chưa hỗ trợ → chuyển trang bình thường) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.45s cubic-bezier(.4,0,.2,1) both vt-out}
  ::view-transition-new(root){animation:.6s cubic-bezier(.2,.7,.2,1) .08s both vt-in}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}
/* chữ dự phòng cùng cỡ mắt với font web → không nhảy chữ khi font tải xong */
/* font-size-adjust: bỏ — làm lệch ngắt dòng tên các vị lúc font đang tải; web thật tự lưu font + size-adjust trong @font-face */
/* mục lục trang Hoạt động: dòng phụ đề dưới tên nhóm = chú thích nghiêng, mềm (chủ dự án 04/10) */
.idx a small{font-family:var(--f-serif)!important;font-style:italic!important;font-size:16px!important;letter-spacing:.01em!important;text-transform:none!important;margin-top:4px!important;color:var(--c-text-2)!important}