/* =====================================================================
   PERSON (person.html) — bài viết từng người theo layout test/ok.html
   Nền cố định (ghim) + các "vật thể" (chữ/ảnh/infographic) bay ngang.
   ===================================================================== */
.person-page {
  /* Nền của TRANG (lộ ra ở mọi khoảng mà cảnh/outro/footer không phủ tới:
     mép trên khi chưa ghim, khe giữa các khối, vùng quá đà khi cuộn).
     Trước đây để #0d1512 gần-đen — dấu tích từ hồi cảnh còn là ảnh tối;
     nay cả trang là tranh nền sáng nên nó chỉ hiện ra thành vệt đen. */
  background: var(--cream);
  color: var(--ink);
}

/* =====================================================================
   HỆ THIẾT KẾ CỦA TRANG NHÂN VẬT — PHẲNG & GIẢN DỊ
   ---------------------------------------------------------------------
   CHỮ — cả trang chỉ dùng ĐÚNG HAI bộ, không hơn:
     · var(--serif)  Playfair Display  → mọi tiêu đề, trích dẫn, số liệu
     · var(--body)   Be Vietnam Pro    → đoạn văn, nhãn, chú thích
   (Trước đây tiêu đề dùng var(--display) = Anton IN HOA: một bộ sans nén,
    rất "áp phích", đặt cạnh tranh thuỷ mặc và chữ sans của đoạn văn thì
    thành ba giọng nói khác nhau. Anton nay chỉ còn ở nav/footer chung.)

   TẤM GIẤY — mọi khối CHỮ trôi qua cảnh đều nằm trên cùng một tấm giấy
   kem mờ: dày một mức, bo 2px, KHÔNG đổ bóng, KHÔNG làm mờ hậu cảnh
   (backdrop-filter), KHÔNG viền. Nhờ vậy chữ đọc được trên mọi nền —
   tranh sáng hay ảnh tối — mà không cần hai nhánh màu chữ như trước.
   Sửa một lần ở đây là đổi toàn bộ các tấm.
   ===================================================================== */
.scene,
.person-outro {
  --paper: rgba(255, 248, 232, 0.72);
  --paper-pad: 24px 36px;
  --paper-pad-sm: 10px 18px;
  --paper-radius: 2px;
  --paper-ink: #33423b;
  --paper-ink-dim: #6b5647;
}

/* ---------- DẢI LỤA (dùng cho phần intro) ---------------------------- */
:root {
  /* Màu nền của cả màn cuộn ngang. Đổi một chỗ này là đổi tông toàn cảnh. */
  --scene-cream: #FFF5F5;
  --silk-1: #b23a2e;
  --silk-2: #e07a3c;
  --silk-3: #f2c14e;
  --silk-hi: rgba(255, 240, 200, 0.55);
}
.silk {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: repeating-linear-gradient(
    105deg,
    var(--silk-1) 0,
    var(--silk-2) 60px,
    var(--silk-3) 120px,
    var(--silk-2) 180px,
    var(--silk-1) 240px
  );
  background-size: 480px 100%;
}
.silk::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.22) 0,
    rgba(255, 255, 255, 0.05) 40px,
    rgba(0, 0, 0, 0.22) 90px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.silk::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, var(--silk-hi), transparent);
  filter: blur(24px);
  opacity: 0.5;
  animation: silk-sheen 9s ease-in-out infinite;
}
@keyframes silk-sheen {
  0% {
    left: -50%;
  }
  100% {
    left: 120%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .silk::after {
    animation: none;
  }
}

/* ---------- INTRO ---------------------------------------------------- */
.person-intro {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
/* Ảnh nền màn intro (đè lên nền lụa khi có ảnh; z giữa lụa[0] và chữ[2]) */
.person-intro-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}
.person-intro-bg.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 8, 4, 0.35),
    rgba(18, 8, 4, 0.06) 55%,
    rgba(18, 8, 4, 0.18)
  );
}
.pi-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 4px 30px rgba(60, 10, 10, 0.5);
}
.pi-inner h1 {
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.86;
  margin: 14px 0 0;
}
.pi-inner p {
  max-width: 540px;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 245, 230, 0.95);
}
.pi-inner .scroll-hint {
  position: static;
  transform: none;
  margin-top: 36px;
  opacity: 0.85;
}

/* ---------- SCENE (ghim + bay ngang) --------------------------------
   .scene càng cao thì hiệu ứng càng dài/chậm (mỗi 100vh ≈ 1 nhịp).
------------------------------------------------------------------- */
.scene {
  position: relative;
  height: 2600vh; /* TEST: rất cao => cuộn CHẬM, mỗi vật thể lướt từ tốn */

  /* NÚM HẠ CẢ CẢNH XUỐNG. Mọi vật thể đều định vị bằng `top: X%` riêng
     (JSON "top"), nên muốn đẩy tất cả xuống thì phải sửa từng con số —
     trừ khi cộng thêm một khoảng chung ở đây. Tăng = xuống thấp, giảm /
     đặt 0 = trở lại đúng vị trí đã khai.

     Vì sao là margin-top chứ không phải translateY: GSAP đang giữ
     transform của .scene-object (x + opacity) suốt cả timeline — thêm
     translate ở CSS sẽ bị ghi đè ngay nhịp cuộn đầu tiên. */
  --scene-shift: 7vh;
}
.scene-sticky {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.scene-bg {
  position: absolute;
  inset: 0;
  /* MẶC ĐỊNH là màu kem — không còn ảnh nền. Cả cảnh coi đây là "bầu trời",
     các lớp núi phía trên đều nhoà dần về phía màu này (xem SCAPE_LAYERS). */
  background-color: var(--scene-cream);
  background-size: cover;
  background-position: center;
}
.scene-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 12, 10, 0.45) 0%,
    rgba(6, 12, 10, 0.12) 50%,
    rgba(6, 12, 10, 0.45) 100%
  );
}
/* Khi dùng MÀU nền phẳng: bỏ lớp phủ tối để màu hiện đúng */
.scene-bg--solid::after {
  display: none;
}

/* Trước đây phải có cả một nhánh .scene--light để đổi chữ sang màu tối khi
   nền sáng. Nay MỌI khối chữ đều nằm trên tấm giấy kem nên chữ luôn là mực
   tối — nhánh đó không còn lý do tồn tại và đã được bỏ hẳn. */

/* ---------- PHONG CẢNH NHIỀU LỚP (parallax ngang) --------------------
   animations.js dựng DOM vào .scene-scape theo mảng SCAPE_LAYERS:

     .scene-scape                     khung phủ kín màn ghim
       └ .pl        (một LỚP)         dải ngang dài vài trăm vw, GSAP kéo x
           └ img    (một BẢN SAO)     lặp lại đủ để không bao giờ hở mép

   Toạ độ dọc (top/bottom), bề ngang, khoảng cách giữa các bản sao và độ mờ
   đều do JS đặt inline từ SCAPE_LAYERS — sửa ở đó, đừng thêm .pl--xxx ở đây,
   nếu không hai nơi sẽ đá nhau.
------------------------------------------------------------------- */
.scene-scape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* trên .scene-bg (0), dưới .scene-object (2) */
}
.pl {
  position: absolute;
  left: 0;
  display: flex;
  align-items: flex-end; /* mọi bản sao cùng tì xuống một đường chân */
  /* KHÔNG đặt will-change ở đây: mỗi dải rộng vài trăm vw, ép trình duyệt
     giữ sẵn từng ấy layer là ngốn bộ nhớ GPU vô ích. GSAP đã tự dịch bằng
     translate3d nên lớp vẫn được tăng tốc trong lúc cuộn. */
}
.pl img {
  display: block;
  height: auto;
  flex: 0 0 auto;
  user-select: none;
}
/* Che mép cắt: ảnh ruộng/khối núi/sông đều bị CẮT CỤT ở rìa trái–phải, để
   nguyên thì chỗ cắt hiện ra thành một đường dọc thẳng băng trên nền kem.
   Mask làm hai mép tan dần -> đọc ra thành sương. Dùng cho lớp `fade: true`. */
.pl--fade img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.scene-object {
  position: absolute;
  left: 0;
  /* Khoảng hạ chung cho cả cảnh — xem --scene-shift ở .scene.
     (Chế độ giảm chuyển động .scene--static khai `margin` rút gọn ở cuối
     file nên tự xoá khoảng này — ở đó vật thể xếp cột dọc, không cần.) */
  margin-top: var(--scene-shift, 0);
  will-change: transform, opacity;
  z-index: 2;
  opacity: 0; /* ẩn sẵn, tránh nháy chữ trước khi GSAP chạy (fallback vẫn hiện) */
}
/* Vị trí dọc của từng vật thể (ngang do JS điều khiển) */

/* ---------- TẤM TIÊU ĐỀ MỞ MÀN (.scene-title) ------------------------
   Nằm GIỮA khung và đứng yên — đây là điểm mở của cả màn cuộn ngang, nên
   nó phải đọc như một trang bìa, không phải như một vật thể đang trôi.

   Canh giữa bằng grid chứ KHÔNG bằng translate(-50%,-50%): GSAP còn phải
   nhấc tấm này lên (y) lúc mờ đi, mà transform tự đặt sẵn thì sẽ bị ghi đè.
------------------------------------------------------------------- */
.scene-title {
  position: absolute;
  inset: 0;
  z-index: 3; /* trên cả .scene-object (2) */
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
  will-change: transform, opacity;
}
.scene-title .st-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silk-1);
}
.scene-title h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 5.8vw, 96px);
  /* KHÔNG in hoa: chữ hoa Playfair ở cỡ này đọc như bia đá, mất chất kể
     chuyện. line-height nới hơn 0.9 cũ để dấu tiếng Việt không chạm nhau. */
  text-transform: none;
  letter-spacing: 0.004em;
  line-height: 1.02;
  color: var(--paper-ink);
  text-shadow: none; /* nền kem sáng — bóng đổ chỉ làm chữ bẩn */
}
/* Lớp che của một dòng chữ: con bên trong bắt đầu ở dưới mép rồi trồi lên. */
.scene-title .st-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em; /* chừa chỗ cho dấu tiếng Việt, kẻo bị cắt cụt */
}
.scene-title .st-line > span {
  display: block;
}
/* Đường kẻ bung ra từ tâm — cái làm động tác "mở" đọc ra thành mở. */
.scene-title .st-rule {
  display: block;
  width: min(220px, 34vw);
  height: 1px;
  background: var(--silk-1);
  opacity: 0.55;
}
.scene-title .st-hint {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5a655f;
}

/* ---------- ĐOẠN DẪN (obj-2) — tấm giấy kem -------------------------
   Chữ dẫn đặt trên một tấm nền kem mờ để luôn đọc được, dù cảnh phía sau
   là ảnh sáng hay tối. Vì nền sáng nên chữ phải là MỰC TỐI — mặc định
   .scene-object p đang là chữ kem (dành cho nền tối), nên ghi đè ở đây.
------------------------------------------------------------------- */
.obj-2 {
  top: 56%;
  /* 460 + đệm ngang 2×36: giữ nguyên bề ngang dòng chữ như trước khi có nền */
  max-width: 532px;
}
.obj-2 p {
  background: var(--paper);
  padding: var(--paper-pad);
  border-radius: var(--paper-radius);
  color: var(--paper-ink);
  text-shadow: none;
}
/* Nhãn toạ độ giờ nằm CHUNG thẻ với đoạn dẫn (xem person.html). Cho nó
   thành một dòng riêng phía trên tấm giấy, thụt vào bằng đúng đệm ngang
   của tấm giấy để hai mép chữ thẳng hàng nhau. */
.obj-2 .tag {
  display: block;
  margin: 0 0 10px 36px;
}
.obj-4 {
  top: 40%;
}
.obj-5 {
  top: 30%;
}
.obj-6 {
  top: 58%;
  max-width: 560px;
}

/* Vật thể chứa nội dung bài viết trong scene (test layout) */
/* MỌI khối chữ do CMS dựng (text / title / head / quote) đều là một tấm
   giấy kem giống hệt nhau — cùng độ dày, cùng bo góc, không viền, không
   kính mờ. Đây là "phẳng": chỉ có chữ và nền chữ, không có lớp giả vật lý.
   (max-width nới thêm 60px so với bản cũ vì đệm ngang 36px ăn vào bề rộng —
   box-sizing: border-box khai ở base.css.) */
/* Khối chữ nhiều đoạn: cms.js dựng mỗi đoạn thành một <p>, mà
   .scene-object p đang margin:0 (hồi mỗi khối chỉ có đúng một đoạn) —
   không có khoảng này thì hai đoạn dính liền thành một mảng chữ. */
.scene-object.s-art p + p {
  margin-top: 0.9em;
}
.scene-object.s-art {
  /* --s-art-w: bề ngang riêng của một khối, do cms.js đặt từ trường "w"
     trong JSON (đơn vị vw). Không khai thì giữ bề ngang mặc định. */
  max-width: var(--s-art-w, min(52vw, 620px));
  padding: var(--paper-pad);
  border-radius: var(--paper-radius);
  background: var(--paper);
  color: var(--paper-ink);
}
/* ---------- HIỆN VẬT GHIM VÀO KHỐI CHỮ (.s-pin) ---------------------
   Dựng từ mảng "objects" của một khối chữ. Vì .scene-object đã là
   position:absolute nên tấm chữ chính là khung toạ độ — ghim vào bốn góc
   của nó là xong, không cần position:relative ở đâu cả.

   TREO RA NGOÀI MÉP, KHÔNG ĐÈ LÊN CHỮ. transform đẩy hiện vật ra ngoài
   khoảng 40% bề ngang của chính nó, nên nó ôm lấy góc tấm giấy — vẫn
   "quanh khối chữ" như mong muốn mà không ăn mất một dòng nào. Muốn nó
   nằm hẳn trên chữ thì giảm hai số trong translate() xuống.

   LƯU Ý VỀ CHỒNG LỚP: hiện vật ghim LUÔN nằm TRÊN nền giấy, không thể
   cho xuống dưới. Nền kem là background của chính tấm chữ, mà con thì
   luôn vẽ sau background của cha — kể cả z-index âm. Muốn hiện vật chui
   ra từ SAU tấm giấy thì phải dùng type:"image" riêng (.s-obj, z-index 1).
------------------------------------------------------------------- */
.scene-object .s-pin {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 20px rgba(78, 52, 34, 0.22));
}
/* 58% chứ không phải 40%: hiện vật nào cũng có phần rủ ra ngoài khối
   chính (tua rua hạt cườm, chân khung cửi) mà bbox vẫn tính vào bề ngang,
   nên đẩy ra ít là mấy sợi tua đó rơi đúng lên dòng chữ đầu tiên. */
/* BỐN GÓC — hiện vật nép vào một góc tấm giấy. */
.s-pin--top-right    { right: 0; top: 0;    transform: translate( 58%, -52%); }
.s-pin--top-left     { left: 0;  top: 0;    transform: translate(-58%, -52%); }
.s-pin--bottom-right { right: 0; bottom: 0; transform: translate( 58%,  52%); }
.s-pin--bottom-left  { left: 0;  bottom: 0; transform: translate(-58%,  52%); }

/* BỐN CẠNH — hiện vật đứng giữa một cạnh. Dùng khi vật thể to và muốn nó
   đối trọng với cả khối chữ, chứ không chỉ điểm xuyết ở một góc. */
.s-pin--right        { right: 0; top: 50%;  transform: translate( 58%, -50%); }
.s-pin--left         { left: 0;  top: 50%;  transform: translate(-58%, -50%); }
.s-pin--top          { left: 50%; top: 0;   transform: translate(-50%, -52%); }
.s-pin--bottom       { left: 50%; bottom: 0;transform: translate(-50%,  52%); }

/* VẬT THỂ ẢNH — hiện vật của từng nghề, do cms.js dựng từ scene_items
   (type: "image"). Khác .s-art ở chỗ KHÔNG có tấm nền kính mờ: hiện vật đã
   được tách nền trong suốt nên phải nổi thẳng trên nền kem của cảnh.
   Bề ngang do JS đặt inline theo trường `w` (vw). */
.scene-object.s-obj {
  /* Luôn nằm SAU các khối chữ. Không đặt thì thứ tự chồng lớp là thứ tự
     trong DOM, mà cảnh này lúc nào cũng có 6–7 vật thể cùng trên màn: hiện
     vật lúc thì lướt sau tấm chữ, lúc thì trèo lên che mất chữ. Chữ là nội
     dung chính, hiện vật là minh hoạ — cho nó đi sau, luôn luôn. */
  z-index: 1;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  max-width: none;
  gap: 10px;
}
.scene-object.s-obj img {
  display: block;
  width: 100%;
  height: auto;
  /* Bóng đổ rất nhạt và LỆCH XUỐNG: hiện vật là ảnh cắt rời dán lên nền
     phẳng, không có bóng thì trông như sticker. Đậm hơn nữa là lộ ngay ra
     đường viền cắt. */
  filter: drop-shadow(0 18px 26px rgba(78, 52, 34, 0.22));
}
.scene-object.s-obj .s-obj-cap {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
  /* background: var(--paper); */
  padding: var(--paper-pad-sm);
  border-radius: var(--paper-radius);
  margin-top: 12px;
}

/* Tít trong cảnh — cùng bộ serif với tít mở màn, chỉ nhỏ hơn một bậc. */
.scene-object h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 52px);
  text-transform: none;
  letter-spacing: 0.004em;
  line-height: 1.08;
  margin: 0;
  color: var(--paper-ink);
  text-shadow: none;
}
.scene-object.s-art h2 {
  font-size: clamp(26px, 3vw, 44px);
}
/* Tiểu mục — vẫn là điểm nhấn ĐỎ SON của trang, nhưng nói bằng giọng
   serif chứ không còn hét bằng Anton in hoa. */
.scene-object .s-head {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: none;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: 0.004em;
  line-height: 1.14;
  margin: 0;
  color: var(--silk-1);
  text-shadow: none;
}
.scene-object p {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--paper-ink);
  margin: 0;
}
/* Nhãn toạ độ — cũng phải có nền, nếu không nó là dòng chữ đỏ duy nhất
   nằm trần trên tranh. inline-block để tấm giấy ôm đúng bề ngang chữ. */
.scene-object .tag {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--silk-1);
  background: var(--paper);
  padding: var(--paper-pad-sm);
  border-radius: var(--paper-radius);
}

/* Thẻ ảnh */
.scene-object .card {
  margin: 0;
  width: min(28vw, 340px);
  border-radius: var(--paper-radius);
  overflow: hidden;
  border: 0;
  /* bóng nhạt & lệch xuống, cùng công thức với hiện vật cắt rời — đủ để
     tấm ảnh không dính bẹp vào tranh, chưa tới mức thành thẻ nổi 3D */
  box-shadow: 0 18px 40px rgba(78, 52, 34, 0.18);
}
.scene-object .card img {
  width: 100%;
  display: block;
}
.scene-object .card figcaption {
  background: var(--paper);
  padding: 14px 18px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-ink);
}

/* Infographic */
.info-card {
  display: flex;
  gap: 34px;
  padding: var(--paper-pad);
  border-radius: var(--paper-radius);
  background: var(--paper);
  color: var(--paper-ink);
}
.info-card .stat b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1;
  display: block;
}
.info-card .stat b span {
  color: var(--silk-1);
}
.info-card .stat small {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--paper-ink-dim);
  max-width: 12ch;
}

/* Trích dẫn — tấm giấy riêng (.obj-6 không phải .s-art nên phải tự khai) */
.scene-object .quote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.42;
  color: var(--paper-ink);
  background: var(--paper);
  padding: var(--paper-pad);
  border-radius: var(--paper-radius);
  text-shadow: none;
}
/* .s-art đã là giấy rồi — trích dẫn bên trong không chồng thêm tấm nữa */
.s-art .quote {
  background: none;
  padding: 0;
}
.scene-object .quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--silk-1);
}

/* Fallback khi tắt hiệu ứng chuyển động: xếp dọc, đọc bình thường */
.scene--static {
  height: auto;
}
.scene--static .scene-sticky {
  height: auto;
  position: static;
  padding: 80px 0;
}
.scene--static .scene-bg {
  position: fixed;
}
/* Bản rút gọn (tắt hiệu ứng / không có ScrollTrigger): mọi thứ xếp dọc,
   nên tấm tiêu đề cũng phải thôi phủ toàn khung mà trở về dòng chảy bình
   thường — để nguyên inset:0 là nó đè lên toàn bộ nội dung bên dưới. */
.scene--static .scene-scape {
  display: none; /* cảnh nền chỉ có nghĩa khi còn parallax */
}
.scene--static .scene-title {
  position: relative;
  inset: auto;
  min-height: 0;
  margin: 0 auto 72px;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.scene--static .scene-object {
  position: relative;
  left: auto;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  max-width: min(90vw, 720px);
  margin: 0 auto 60px;
  padding: 0 6vw;
}

/* ---------- NỘI DUNG BÀI VIẾT (body Markdown) -----------------------
   Khối này đang bị comment trong person.html. Vẫn chỉnh cho sáng màu để
   lúc bật lại nó không thành một tảng đen giữa trang tranh. */
.person-body {
  background: var(--cream);
  padding: 100px 0 120px;
}
.pb-inner {
  max-width: 760px;
}
.pb-inner:empty {
  display: none;
}
.pb-inner h2 {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: none;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.18;
  color: var(--silk-1);
  margin: 64px 0 22px;
}
.pb-inner h2:first-child {
  margin-top: 0;
}
.pb-inner h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--orange);
  margin: 44px 0 16px;
}
.pb-inner p {
  font-size: 18px;
  line-height: 1.85;
  color: #33423b;
  margin: 0 0 22px;
}
.pb-inner strong {
  color: var(--ink);
}

/* ---------- OUTRO ---------------------------------------------------- */
.person-outro {
  background: var(--green);
  color: var(--cream);
  text-align: center;
  padding: 130px 0;
}
/* Lời kết dùng đúng bộ chữ của cảnh — nếu để var(--display) thì cuộn hết
   một trang serif rồi bất ngờ đụng Anton in hoa ở cuối. */
.person-outro h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 84px);
  text-transform: none;
  letter-spacing: 0.004em;
  margin: 12px 0 20px;
  line-height: 1.06;
}
.person-outro p {
  max-width: 520px;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(251, 239, 239, 0.8);
}

@media (max-width: 820px) {
  .scene-object .card {
    width: 70vw;
  }
  .info-card {
    flex-direction: column;
    gap: 16px;
  }
  .obj-2,
  .obj-6 {
    max-width: 80vw;
  }
  /* màn hẹp: bớt đệm ngang cho dòng chữ đủ dài */
  .scene,
  .person-outro {
    --paper-pad: 20px 22px;
  }
  /* Màn hẹp: khối chữ nào cũng kẹp lại 84vw, kể cả khối tự khai "w" rộng
     hơn — 60vw của màn rộng đọc thành một cột quá dài trên điện thoại. */
  .scene-object.s-art {
    max-width: min(var(--s-art-w, 84vw), 84vw);
  }
}