/* =====================================================================
   HỒN VIỆT — FONT (fonts.css)

   ĐÂY LÀ NƠI DUY NHẤT ĐỂ ĐỔI CHỮ CHO TOÀN BỘ SITE.
   Mọi file CSS khác chỉ dùng biến var(--display) / var(--serif) / ...,
   không viết thẳng tên font. Muốn đổi chữ:

     B1. Vào fonts.google.com, chọn font + các độ đậm CẦN DÙNG.
     B2. Sửa dòng @import bên dưới (giữ nguyên &display=swap).
     B3. Sửa tên font trong biến tương ứng ở :root.
     ... hết. Không cần đụng vào file HTML nào.

   LƯU Ý TIẾNG VIỆT: font phải có bộ ký tự "vietnamese", nếu không dấu
   tiếng Việt sẽ rơi về font hệ thống, chữ bị lẫn hai kiểu. Kiểm tra:
     curl -s -A "Mozilla/5.0 Chrome/120" \
       "https://fonts.googleapis.com/css2?family=TÊN+FONT" | grep -c vietnamese
   Kết quả phải lớn hơn 0.

   !!! TUYỆT ĐỐI KHÔNG gõ chuỗi (sao)(gạch-chéo) trong khối chú thích này.
   CSS không hiểu dấu \ để "thoát" ký tự trong chú thích, nên chuỗi đó sẽ
   ĐÓNG chú thích sớm; phần chữ còn lại biến thành CSS hỏng và trình duyệt
   vứt luôn CẢ FILE (kể cả @import và :root) — toàn site rơi về font Times.

   Luôn để font dự phòng (Georgia, Arial...) đứng sau — lúc font Google
   chưa tải xong thì chữ vẫn hiện bằng font đó.
   ===================================================================== */

/* @import PHẢI nằm trên cùng file, trước mọi rule khác. */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Dancing+Script:wght@500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Noto+Serif+Display:wght@400..600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* BOREL — ĐÃ THÔI DÙNG. Từng là chữ thanh menu (chữ viết tay nối nét).
   Nay menu dùng chung Fraunces với tên thương hiệu nên cả thanh nav chỉ
   còn MỘT giọng chữ. Muốn thử lại: nạp Borel rồi tự khai báo @font-face
   với size-adjust: 110% và font-weight: 400 700 (Borel chỉ có một độ
   đậm, không khai dải thì .menu ở weight 500 sẽ bị tô đậm giả). */

/* =====================================================================
   PATRICK HAND — TỰ KHAI BÁO (không lấy qua @import ở trên)
   ---------------------------------------------------------------------
   Phải tự khai báo vì cần hai thứ mà Google Fonts không cho chỉnh:

   1) size-adjust: 112%
      Đo thực tế ở cỡ 100px: chiều cao chữ thường (x-height) của
      Patrick Hand là 46.8px, của Playfair Display (font cũ) là 51.6px
      -> Patrick Hand trông NHỎ HƠN khoảng 10% ở cùng font-size. Không
      bù lại thì mọi câu trích, câu dẫn trong site đều tự nhiên bé đi.
      size-adjust phóng ngay trong font nên KHÔNG phải sửa font-size ở
      ~50 rule đang dùng var(--serif).
      MUỐN CHỮ TO/NHỎ HƠN NỮA: chỉnh đúng con số này, đừng đi sửa lẻ tẻ.

   2) font-weight: 400 700  +  một bản font-style: italic
      Patrick Hand chỉ có MỘT file (400, đứng), trong khi nhiều rule đặt
      --serif ở 500/600/700 hoặc italic. Gặp vậy trình duyệt tự "bịa" nét
      đậm (tô dày viền chữ) và nét nghiêng (kéo xiên) — chữ viết tay bị
      nhoè và rung rất rõ. Khai báo CÙNG MỘT FILE cho cả dải 400-700 và
      cho cả italic thì trình duyệt coi như đã có sẵn dáng đó và thôi bịa.
      Đổi lại: đặt font-weight bao nhiêu thì chữ cũng một độ đậm — muốn
      nhấn mạnh hãy đổi màu/cỡ chữ, đừng tăng weight.

   Ba khối mỗi dáng = ba lát cắt bảng mã của Google (vietnamese /
   latin-ext / latin). Link lấy từ:
     https://fonts.googleapis.com/css2?family=Patrick+Hand
   ===================================================================== */
@font-face {
  font-family: "Patrick Hand"; font-style: normal; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8UcLLubg58xGL.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Patrick Hand"; font-style: normal; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8UMLLubg58xGL.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Patrick Hand"; font-style: normal; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8XsLLubg58w.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cùng file, đăng ký thêm dưới dáng nghiêng -> chặn nét nghiêng giả */
@font-face {
  font-family: "Patrick Hand"; font-style: italic; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8UcLLubg58xGL.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Patrick Hand"; font-style: italic; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8UMLLubg58xGL.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Patrick Hand"; font-style: italic; font-weight: 400 700;
  font-display: swap; size-adjust: 112%;
  src: local("Patrick Hand"),
       url(https://fonts.gstatic.com/s/patrickhand/v25/LDI1apSQOAYtSuYWp8ZhfYe8XsLLubg58w.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- BỘ CHÍNH: dùng cho index, region, person, project, map ---------- */

  /* Tiêu đề lớn, băng chữ chạy, tên thương hiệu.
     TRƯỚC ĐÂY LÀ ANTON — chữ nén, in hoa, giọng áp phích thể thao: to và
     dứt khoát, nhưng lạc hẳn với tông "mộc, gần thiên nhiên, truyền
     thống" của site, nhất là khi đứng ngay dưới thanh menu viết tay.
     Fraunces mềm và ấm hơn, lại có TRỤC QUANG HỌC nên càng phóng to nét
     càng thanh — cùng họ với --editorial, nhờ vậy cả site rút từ 7 bộ
     chữ xuống còn 4 giọng: Fraunces (tít) · Borel (menu) ·
     Patrick Hand (câu trích viết tay) · Be Vietnam Pro (giao diện).
     MUỐN TRẢ VỀ ANTON: đổi lại dòng dưới thành
       --display: "Anton", "Be Vietnam Pro", sans-serif;
     và sửa font-weight của .display trong base.css về 400. */
  --display: "Fraunces", Georgia, serif;

  /* Chữ viết tay, thân mật — dùng cho câu trích, câu dẫn, tít phụ.
     CẢNH BÁO QUAN TRỌNG: Patrick Hand chỉ có DUY NHẤT một dáng (400,
     đứng) — không có nét đậm, không có nét nghiêng thật. Nhiều rule trong
     site đang đặt --serif ở 500/600/700 hoặc italic; gặp những chỗ đó
     trình duyệt sẽ TỰ BỊA nét đậm/nghiêng (làm dày viền chữ, kéo xiên cả
     chữ) khiến chữ viết tay nhoè và rung. Vì vậy phía dưới có tắt
     font-synthesis. Muốn chỗ nào đậm thật thì đổi font, đừng tăng weight. */
  --serif: "Patrick Hand", "Bradley Hand", "Segoe Print", Georgia, cursive;

  /* Chữ giao diện: nút, nhãn, eyebrow, chú thích. Dùng 400/500/600/700. */
  --body: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;

  /* Chữ viết tay, chỉ dùng cho lời đề tựa ở trang chủ (home.css). */
  --script: "Dancing Script", var(--serif);

  /* Chữ "xã luận": đoạn dẫn cỡ lớn ở trang chủ (.story-lede .lede-1).
     Fraunces là serif có TRỤC QUANG HỌC (opsz) — cỡ càng lớn nét càng
     thanh, nên câu dẫn to đọc mềm và ấm hơn Playfair. Có bộ vietnamese.
     Dùng kèm font-optical-sizing: auto để trục opsz tự chạy theo cỡ chữ. */
  --editorial: "Fraunces", Georgia, serif;

  /* Chữ cho MENU trên thanh nav — CÙNG Fraunces với tên thương hiệu, nên
     cả thanh nav đọc như một giọng; phân biệt hai phần bằng ĐỘ ĐẬM
     (tên thương hiệu 700, menu 500) chứ không bằng font khác.
     LƯU Ý CỠ CHỮ: Fraunces có x-height thấp (43.6 ở cỡ 100px, so với
     53.6 của Noto Serif Display trước đây) nên ở cùng px trông nhỏ hơn
     hẳn — .menu trong base.css đã nâng cỡ chữ để bù. */
  --menu: "Fraunces", Georgia, serif;

  /* Chữ CÓ CHÂN để ĐỌC DÀI: thân bài chảy thành cột ở region-v2.
     Tách hẳn khỏi --menu (trước đây dùng chung, nên đổi chữ menu là vô
     tình đổi luôn chữ thân bài). Noto Serif Display là font có chân duy
     nhất trong bộ đủ nhẹ để đọc cả cột dài mà không bị vỡ nét ở cỡ nhỏ. */
  --reading: "Noto Serif Display", Georgia, serif;

  /* --- BỘ "BLOOM": riêng cho khu Dự án (projects-bloom + project-listing)
     Cố ý khác bộ chính để khu này có không khí riêng. Muốn hợp nhất về
     một bộ chữ duy nhất thì trỏ hai biến này sang --display / --body. */
  --bloom-display: "Fraunces", Georgia, serif;
  --bloom-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}