/* Trúc Lâm Tu Học, trang chủ. Hướng "Tranh treo": cả trang là một thế giới
   giấy dó, tranh được BỒI LỤA và treo lên chứ không trải full màn, chữ mực
   đứng yên trên giấy. Bao chọn hướng này bằng mắt (bản mẫu A, 30/08) và dặn
   nâng lên "choáng ngợp uy nghi hùng vỹ": phần uy nghi nằm ở cuộn tranh mở
   theo tay cuộn, vầng hào quang sáng dần, và hồi Trần Nhân Tông full màn.
   Chỉ chồng lên /assets/scrollcraft.css, không sửa engine. */

/* ============================================================== token ===== */
/* Bảng màu lấy từ chính bộ tranh thủy mặc của ứng dụng: giấy dó, mực nho,
   lụa bồi, và son đỏ của dấu triện. Không phải kem-mặc-định: đây là màu giấy
   của chính những bức tranh đang treo trên trang. */
:root {
  --sc-canvas:  #E9E3D2;
  --sc-surface: #DFD7C1;
  --sc-ink:     #26231C;
  --sc-ink-soft:#6A6050; /* 4.84:1 trên giấy; #6E6555 của bản mẫu đo ra 4.49, hụt chuẩn */
  --sc-accent:  #9E3B23;
  --sc-accent-ink: #8A3423; /* son sẫm hơn một nấc cho chữ link, 6.3:1 */
  --ink-body: #3A362C;
  --silk: #E0D6BC;
  --hair: rgb(38 35 28 / .28);
  --sc-font-display: "Alegreya", ui-serif, Georgia, serif;
  --sc-font-text: "Alegreya", ui-serif, Georgia, serif;
  /* Nhãn và chú thích 9-12px: serif cỡ đó bị nhòe, nhất là dấu tiếng Việt.
     Font hệ thống đứng dấu sạch. */
  --sc-font-micro: system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 40 12% 12%;
  --sc-track-tight: -0.015em;
  --sc-track-snug:  -0.008em;
  --sc-leading-none: 1.06;
  --gutter: clamp(1.4rem, 5.5vw, 6.5rem);
}

/* Khai lại trên subtree đêm. `color` phải khai cùng: color kế thừa theo giá trị
   đã tính, nên đổi token thôi thì chữ con vẫn giữ màu ngày. Đêm giữ vàng kim
   chứ không dùng son: son đỏ trên nền đen đọc ra một màu bùn. */
.night {
  --sc-canvas:  #090908;
  --sc-surface: #16150F;
  --sc-ink:     #F6F4E8;
  --sc-ink-soft:#B5AE99;
  --sc-accent:  #C2A35E;
  --sc-accent-ink: #D8BD7C;
  color: var(--sc-ink);
}

body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }
/* Vân giấy dó, z-index -1: nằm TRÊN màu nền nhưng DƯỚI mọi nội dung, nên nó
   chỉ nhuộm được phần giấy trống, không phủ sương lên tranh hay chữ. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: #9E3B23; color: #F3EBDA; }
:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: 2px; }

h1, h2, .sc-display { font-family: var(--sc-font-display); text-wrap: balance; }
p { text-wrap: pretty; }
.sc-display--sm { font-size: var(--sc-t-lg); line-height: 1.18; letter-spacing: var(--sc-track-snug); }

/* Chữ sáng trên nền tối cần bù quang học: nét serif mảnh đi khi nền tối,
   nên dày lên một nấc và nới hơi thở giữa chữ. */
.on-ink, .night { --sc-leading-body: 1.62; }
.on-ink p, .night p, .on-ink li, .night li { font-weight: 500; letter-spacing: 0.01em; }

/* ================================================================ bar ===== */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  background: none; pointer-events: none;
  color: #26231C; transition: color 240ms var(--sc-ease-out);
}
/* Thanh bar đè lên mọi hồi nên cần nền của riêng nó. Ban ngày là một dải giấy
   mờ, ban đêm đảo sang mực. */
.bar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5.5rem;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(233 227 210 / .92),
    rgb(233 227 210 / .60) 42%, rgb(233 227 210 / 0));
}
.is-night .bar::before {
  background: linear-gradient(to bottom, rgb(9 9 8 / .82),
    rgb(9 9 8 / .52) 42%, rgb(9 9 8 / 0));
}
.bar a { pointer-events: auto; color: inherit; }
.bar__mark { font-family: var(--sc-font-display); font-weight: 600; font-size: 17px;
  letter-spacing: var(--sc-track-snug); text-decoration: none; }
.bar__cta { font-size: 13px; letter-spacing: 0.04em;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.is-night .bar { color: #F6F4E8; }
.is-night .bar a { text-shadow: 0 0 5px #0B0A08, 0 0 12px #0B0A08; }

/* ================================================================ nút ===== */
/* Khối son đỏ vuông cạnh, như một dấu triện lớn. Một kiểu duy nhất cả trang. */
.cta {
  display: inline-block; font-family: var(--sc-font-text); font-size: 15.5px;
  letter-spacing: 0.01em; padding: 13px 24px; border-radius: 2px;
  background: var(--sc-accent); color: #F3EBDA; text-decoration: none;
  transition: transform 180ms var(--sc-ease-out);
}
.cta:hover { transform: translateY(-1px); }
/* Nút theo máy: for-ios hiện cho iPhone, for-android cho Android, máy khác
   (và khi JS chết) thấy cả hai. Thanh bar chật nên chỉ giữ một link. */
.os-ios .for-android, .os-android .for-ios { display: none !important; }
html:not(.os-android) .bar .for-android { display: none; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem;
  margin-top: 2.1rem; }
.hero-copy .store .cta { margin-top: 0; }
.store-alt { flex-basis: 100%; margin: 0; font-size: 14px; }
.store-alt a { color: var(--sc-accent-ink); text-underline-offset: 3px; }
html:not(.os-ios):not(.os-android) .store-alt { display: none; }
.cta:active { transform: scale(0.97); }

/* Khung bồi lụa dùng chung cho mọi bức tranh treo trên giấy. */
.mount {
  background: var(--silk); border: 1px solid var(--hair);
  box-shadow: 0 2px 6px rgb(38 35 28 / .08), 0 18px 60px rgb(38 35 28 / .14);
}

/* ===================================================== ACT 1 · cuộn tranh == */
/* Bức tranh treo bồi lụa đứng bên phải, cao gần trọn màn. Trong khung, bức
   tranh dọc được phóng 148% và trôi theo --sc-p engine ghi lên section: ở đầu
   đoạn ghim thấy CHÂN tranh (lối đá, khóm trúc), cuộn tới đâu tranh mở lên
   tới đó, kết ở tôn tượng dưới tán bồ đề. Chữ bên trái đứng yên tuyệt đối. */
.scroll-panel {
  position: absolute; z-index: 2;
  top: 4.75rem; bottom: 3rem; right: var(--gutter);
  display: flex; gap: clamp(1.2rem, 2.4vw, 2.1rem);
}
/* Lạc khoản: dòng chữ dọc và dấu triện son, như đề trên tranh thật. */
.inscription {
  margin: 0; padding-top: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-size: 12.5px; letter-spacing: 0.14em; color: var(--sc-ink-soft);
}
.inscription i { font-style: normal; writing-mode: vertical-rl; }
.seal-dot { display: block; width: 15px; height: 15px; background: var(--sc-accent); }

.scroll-mount { height: 100%; padding: 15px 13px; }
.scroll-view { position: relative; height: 100%; overflow: clip; background: #E5DECB; }
/* Khung mở đầu ôm sát tôn tượng và vầng hào quang (scale 1.48, neo mép trên),
   cuộn tới đâu máy LÙI ra tới đó, kết ở trọn bức tranh nằm trong khung lụa.
   Ở scale 1.48 cửa sổ dọc là [0, 67.6%] còn hào quang và đài sen nằm trong
   [21%, 64%] chiều cao tranh, nên ở MỌI nấc cuộn đầu, trọn hào quang và đài
   sen đều trong khung; đã soi bằng ảnh chụp từng nấc. */
.scroll-view { aspect-ratio: 2 / 3; }
.scroll-art {
  /* max-width: none BẮT BUỘC: engine đặt img { max-width: 100% }, thiếu dòng
     này bức tranh bị engine ép cỡ và méo tỉ lệ. */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  transform: scale(calc(1.48 - 0.48 * var(--sc-p, 0)));
  transform-origin: 50% 0;
}
/* Vầng sáng của trang: quầng vàng mờ sau lưng bức tranh, sáng dần khi cuộn
   tranh mở tới tôn tượng. Bao dặn thẳng: vầng sáng sau lưng Phật tổ là cái
   tạo ra thần thánh và uy nghi. Đây là tiếng vọng của hào quang ra ngoài giấy. */
.hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(44% 40% at 72% 32%, rgb(200 164 96 / .5),
    rgb(200 164 96 / .16) 55%, transparent 76%);
  opacity: calc(0.15 + 0.85 * var(--sc-p, 0));
}

.hero-copy {
  position: absolute; z-index: 2;
  left: var(--gutter); top: 50%; transform: translateY(-54%);
  max-width: 33rem;
}
.hero-lunar { margin: 0; font-style: italic; font-size: 15.5px;
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.hero-title { margin: 1.1rem 0 0; font-weight: 500;
  font-size: clamp(3.4rem, 6vw, 5.3rem); line-height: 1.0;
  letter-spacing: var(--sc-track-tight); }
.hero-lede { margin: 1.35rem 0 0; font-size: 18px; line-height: 1.62;
  color: var(--ink-body); max-width: 41ch; }
.hero-copy .cta { margin-top: 2.1rem; }

/* Hàng bốn con số: một dòng mục lục trên một nét gạch, không hộp, không nền. */
.hero-shelf {
  position: absolute; z-index: 2;
  left: var(--gutter); bottom: clamp(2rem, 5.5vh, 3.25rem);
  width: min(46rem, 44vw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  margin: 0; padding: 1.05rem 0 0; list-style: none;
  border-top: 1px solid var(--hair);
}
.hero-shelf .n { font-size: 27px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; }
.hero-shelf b { display: block; margin: 5px 0 3px; font-family: var(--sc-font-micro);
  font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); }
.hero-shelf .t > span { display: block; font-family: var(--sc-font-micro);
  font-weight: 400; font-size: 11px; line-height: 1.45; color: var(--sc-ink-soft); }

/* ===================================================== ACT 2 · cuộn thư ==== */
/* Bức mưa sân chùa bồi thành một cuộn thư NGANG, và chính nó trôi theo tay
   cuộn: đọc bốn câu hồi ký trong lúc hành lang mưa đi qua trước mặt.
   Dải giữa của bức được chọn qua translate -50%, chỉnh bằng mắt trên ảnh chụp. */
#act-memoir .sc-stage {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 3.6vh, 2.4rem);
  padding: 5rem var(--gutter) 3rem;
}
.hand-panel { margin: 0; padding: 13px; }
.hand-view { position: relative; height: clamp(16rem, 46vh, 27rem); overflow: clip; }
/* 26.4% = (136 - 100) / 136: p=0 chạm mép trái tranh, p=1 chạm mép phải. */
.hand-art {
  position: absolute; top: 50%; left: 0; width: 136%; height: auto; max-width: none;
  transform: translate(calc(var(--sc-p, 0) * -26.4%), -50%);
}
.memoir { max-width: 62ch; }
.lede-line { font-size: var(--sc-t-base); line-height: 1.62; margin: 0 0 0.62em;
  color: var(--sc-ink); }
.lede-line:last-child { margin-bottom: 0; }

/* ============================================================ mối nối ===== */
/* Chỗ trang lật sáng thành tối hoặc ngược lại. Chỉ nối ở phía act ĐI TỚI:
   màn mới hiện ra TỪ màu của màn cũ. Bốn nấc alpha chứ không phải một dải
   tuyến tính, tuyến tính đọc ra một băng xám dán ngang. --seam khai bằng ba
   số r g b của màu màn CŨ. */
.seam-in, .seam-out { position: relative; }
.seam-in::before, .seam-in > .sc-stage::before, .seam-out > .sc-stage::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 2;
  height: clamp(6rem, 22vh, 16rem); pointer-events: none;
}
/* Bản cho hồi có sân khấu ghim: ::before của section nằm sai chỗ khi sân khấu
   được engine ghim, nên dải nối phải đặt lên .sc-stage. */
.seam-in::before, .seam-in > .sc-stage::before { top: 0;
  background: linear-gradient(to top, rgb(var(--seam) / 0),
    rgb(var(--seam) / .18) 26%, rgb(var(--seam) / .54) 55%,
    rgb(var(--seam) / .86) 78%, rgb(var(--seam) / 1)); }
.seam-out > .sc-stage::after { bottom: 0;
  background: linear-gradient(to bottom, rgb(var(--seam) / 0),
    rgb(var(--seam) / .18) 26%, rgb(var(--seam) / .54) 55%,
    rgb(var(--seam) / .86) 78%, rgb(var(--seam) / 1)); }

/* ============================================================ ACT 3 · vua == */
/* Nhịp hùng vỹ của trang: bức duy nhất được trải trọn màn, mọi bức khác đều
   bồi lụa. Máy đẩy vào rất chậm theo --sc-p của chính section flow. */
.act-king { padding-block: 0 clamp(3rem, 8vh, 6rem); background: var(--sc-canvas); }
.king-figure { margin: 0; width: 100%; }
.king-plate { height: 92vh; overflow: clip; }
.king-plate img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 55%; display: block;
  transform: scale(calc(1 + 0.06 * var(--sc-p, 0)));
  transform-origin: 50% 42%; }
/* Nhãn đứng đúng mép trái cột chữ dưới nó: hộp giữ cỡ chữ thân bài để 62ch ra
   đúng một con số, cỡ chữ nhỏ đặt lên span bên trong. Đặt 62ch thẳng lên hộp
   13px thì hộp co còn một phần ba và nhãn nhảy vào giữa trang. */
.king-cap { width: 100%; max-width: 62ch; margin: 0.6rem auto 0;
  padding-inline: var(--sc-gutter); }
.king-cap span { font-family: var(--sc-font-display); font-style: italic;
  font-size: 13px; color: var(--sc-ink-soft); }
.king-text { margin-top: clamp(2rem, 6vh, 4rem); max-width: 62ch; }
.king-text h2 { font-size: var(--sc-t-xl); line-height: 1.16;
  letter-spacing: var(--sc-track-snug); margin: 0 0 0.7em; }
.king-text p { font-size: var(--sc-t-base); line-height: 1.65; margin: 0 0 1em;
  color: var(--sc-ink); }

/* ========================================================== ACT 4 · kệ ===== */
/* Nhịp nghỉ: bức thư phòng bồi lụa treo cạnh danh mục, chữ mực trên giấy
   trống, không cần tấm che nào nữa. */
.act-study { padding: clamp(4rem, 10vh, 7rem) var(--gutter); }
.study-grid { max-width: 72rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.study-copy h2 { font-size: var(--sc-t-lg); margin: 0 0 0.6em; }
.wall-list { list-style: none; margin: 0 0 0.9em; padding: 0; }
.wall-list li { font-size: 16px; line-height: 1.5; margin: 0 0 0.45em;
  padding-left: 1em; position: relative; }
.wall-list li::before { content: "·"; position: absolute; left: 0.15em;
  color: var(--sc-accent-ink); }
.wall-note { font-size: 14px; line-height: 1.5; color: var(--ink-body); margin: 0; }
.study-mount { margin: 0; padding: 13px; }
.study-mount img { display: block; width: 100%; height: auto;
  border: 1px solid var(--hair); }

/* ========================================================= ACT 5 · lặng ==== */
/* Im lặng có chủ ý. Ngoài dòng chữ và vầng trăng, không gì khác trên màn. */
.act-night-fall { min-height: 120svh; background: #0B0A08;
  display: flex; align-items: center; justify-content: center; }
.night-inner { width: 100%; padding-inline: var(--gutter); text-align: center; }
.night-line { font-size: var(--sc-t-lg); color: #B5AE99; margin: 2.2rem 0 0; }
/* Trăng mọc là thứ DUY NHẤT chuyển động ở act này; chữ luôn hiện đủ.
   overflow clip BẮT BUỘC: trăng trồi lên bằng translateY, không clip thì nó
   trượt đè ngang dòng ngày âm bên dưới lúc giữa chừng; clip biến mép dưới
   của khung thành đường chân trời cho trăng nhô lên. */
.moon-wrap { overflow: clip; }
.moon-wrap svg { display: block; margin: 0 auto; width: 128px; height: 128px;
  transform: translateY(calc((1 - min(var(--sc-p, 0) * 1.6, 1)) * 22svh));
  opacity: min(var(--sc-p, 0) * 2.4, 1); }
.moon-date { font-size: 14px; color: #B5AE99; font-variant-numeric: tabular-nums;
  margin: 0.8rem 0 0; }

/* ========================================================== ACT 6 · đêm ==== */
/* Scrim là sibling của khối chữ, không là con hay pseudo của nó: vòng đo
   tương phản ẩn chữ để chụp nền, scrim con sẽ bị ẩn theo. */
.veil { position: absolute; z-index: 1; pointer-events: none; }
.veil--ink { inset: auto 0 0 0; height: min(72%, 38rem);
  background: linear-gradient(45deg, rgb(9 9 8 / .92), rgb(9 9 8 / .56) 44%, rgb(9 9 8 / .20) 72%, transparent 88%); }

.sc-copy--trail-bl {
  inset-inline: auto; left: var(--gutter); right: auto;
  bottom: clamp(3rem, 12vh, 8rem);
  width: min(34rem, 76vw);
  z-index: 2; color: #F6F4E8;
}
.sc-copy--trail-bl h2 { font-size: var(--sc-t-lg); line-height: 1.18; margin: 0 0 0.5em; }
.sc-copy--trail-bl .sc-body { font-size: var(--sc-t-base); line-height: 1.6;
  margin: 0 0 0.62em; }
.sc-copy--trail-bl .sc-body:last-of-type { margin-bottom: 1.1em; }
.night-quote { margin: 0; }
.night-quote p { font-family: var(--sc-font-display); font-style: italic;
  font-size: var(--sc-t-xl); line-height: 1.3; margin: 0; }
.night-quote p::before { content: "\201C"; color: #C2A35E; }
.night-quote p::after  { content: "\201D"; color: #C2A35E; }
.night-quote cite { display: block; font-style: normal; font-size: 13px;
  color: #B5AE99; margin-top: 0.7em; }

/* ================================================= ACT 7 · bình minh ======= */
/* padding-top 0 BẮT BUỘC: engine phát mỗi sc-section ~130px padding-block;
   để nguyên thì dải nối đen tan trên nền giấy trống thành một băng xám bẩn,
   thay vì tan vào chính vùng mây sáng của bức bình minh. */
.act-dawn { background: var(--sc-surface); padding-block: 0 clamp(3rem, 8vh, 6rem); }
.dawn-figure { margin: 0 0 clamp(2.5rem, 7vh, 5rem); position: relative;
  height: 62vh; overflow: clip; }
.dawn-figure img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%; display: block; }
.veil--dawn { inset: 0 auto 0 0; width: min(58%, 40rem);
  background: linear-gradient(135deg, rgb(238 231 214 / .78), rgb(238 231 214 / .26) 46%, transparent 72%); }
.dawn-line { position: absolute; top: clamp(3.5rem, 12vh, 6rem); left: var(--gutter);
  z-index: 2; font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  color: #26231C; margin: 0; max-width: 22ch; }

/* ===================================================== ACT 7 · colophon ==== */
/* Form đọc bộ biến riêng của nó; khai alias ở đây thay vì sửa contact CSS. */
.colophon {
  --bg: #F2ECDC; --ink: #26231C; --ink-soft: #6A6050;
  --accent: #9E3B23; --accent-ink: #8A3423;
  --line: rgb(38 35 28 / 18%);
  --serif: "Alegreya", ui-serif, Georgia, serif;
  max-width: 44rem;
}
.colophon h2 { margin: 2.4rem 0 0.6em; }
.colophon p { font-size: var(--sc-t-base); line-height: 1.65; margin: 0 0 1em; }
.colophon a:not(.cta) { color: var(--sc-accent-ink); text-underline-offset: 3px; }
.colophon-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; }
.cta-note { font-size: 14px; color: var(--sc-ink-soft); }
.colophon-alt { font-size: 15px; color: var(--sc-ink-soft); }

.contact-form { display: grid; gap: 0.9rem; margin: 1.2rem 0 1.6rem; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 14px;
  color: var(--sc-ink-soft); }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 15px; color: var(--sc-ink);
  padding: 0.6em 0.75em; border: 1px solid var(--line); border-radius: 2px;
  background: #F2ECDC;
}
.contact-form button {
  justify-self: start; font: inherit; font-size: 15.5px; cursor: pointer;
  padding: 13px 24px; border-radius: 2px;
  background: var(--sc-accent); color: #F3EBDA; border: 0;
  transition: transform 180ms var(--sc-ease-out);
}
.contact-form button:active { transform: scale(0.97); }
.contact-form .decoy { position: absolute; left: -9999px; }
.contact-status { font-size: 14px; color: var(--sc-ink-soft); margin: 0; }

.masthead { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.masthead p { font-size: 13px; line-height: 1.6; color: var(--sc-ink-soft);
  margin: 0 0 0.7em; }
.masthead-links a { margin-right: 0.2em; }
/* Đài sen kết trang vẽ bằng nét son: cùng một mực với dấu triện đầu trang. */
.seal { display: block; margin-top: 2.4rem; color: var(--sc-accent); }

/* ============================================================== mobile ===== */
@media (max-width: 860px) {
  /* Hero bỏ ghim: nhồi tranh, tít, nút và bốn con số vào đúng một màn 844px
     thì tranh chỉ còn một mẩu. Thả thành cột: tranh bồi lụa trước, chữ giữa,
     hàng số 2x2, cuộn một cái là gặp. Đây đúng là bố cục bản mẫu A mobile
     mà Bao đã duyệt. */
  #act-hero { height: auto !important; }
  #act-hero .sc-stage {
    position: static; height: auto; min-height: 100svh; overflow: visible;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 4rem var(--gutter) 2.5rem;
  }
  .hero-glow { display: none; }
  .scroll-panel { position: static; display: block; }
  .inscription { display: none; }
  /* Khách từ quảng cáo phải thấy nút tải ngay màn đầu: tranh giới hạn theo
     chiều cao màn (khung 2/3 nên rộng = 2/3 cao) để tít và nút còn chỗ. */
  .scroll-mount { height: auto; width: min(100%, 21rem, calc(27svh + 20px));
    margin-inline: auto; padding: 12px 10px; }
  .scroll-view { height: auto; width: auto; }
  .scroll-art { position: static; height: auto; width: 100%; transform: none; }
  .hero-copy { position: static; transform: none; max-width: none;
    text-align: center; margin-top: 1.2rem; }
  .store { justify-content: center; margin-top: 1.3rem; }
  .hero-title { font-size: 2.6rem; margin-top: 0.65rem; }
  .hero-lede { margin: 0.9rem auto 0; font-size: 15.5px; max-width: 36ch; }
  .hero-copy .cta { margin-top: 1.4rem; }
  .hero-shelf { position: static; width: auto; margin-top: 1.9rem;
    grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }

  /* Cuộn thư cũng bỏ ghim: bốn câu hồi ký ở 390px cao hơn nửa màn, ghim là
     tràn. Cuộn thư vẫn trôi theo --sc-p vì engine vẫn ghi p cho act đã thả. */
  #act-memoir { height: auto !important; }
  #act-memoir .sc-stage { position: static; height: auto; min-height: 0;
    padding: 1rem var(--gutter) 3rem; }
  .hand-view { height: clamp(11rem, 34vh, 15rem); }

  .king-plate { height: 62vh; }

  .study-grid { grid-template-columns: 1fr; gap: 2rem; }
  .study-mount { order: -1; max-width: 30rem; }
  .wall-list li { font-size: 15px; line-height: 1.4; }
  .wall-note { font-size: 13px; }

  .sc-copy--trail-bl { right: var(--gutter); width: auto; }
  /* Khối chữ đêm cao hơn trên màn dọc. height: auto BẮT BUỘC: luật CSS, đã có
     top, bottom VÀ height thì bottom bị bỏ, thiếu nó dải phủ nhảy lên đỉnh. */
  .veil--ink { inset: 0; height: auto;
    background: linear-gradient(to top, rgb(9 9 8 / .95), rgb(9 9 8 / .90) 36%,
      rgb(9 9 8 / .62) 60%, rgb(9 9 8 / .20) 80%, transparent 93%); }
  .lede-line { font-size: 15px; line-height: 1.55; margin-bottom: 0.5em; }

  .dawn-figure { height: 48vh; }
  .moon-wrap svg { width: 96px; height: 96px; }
}

/* =============================================================== no-js ===== */
/* JS chết thì mọi tranh đứng ở khung tĩnh đẹp nhất và mọi chữ phải hiện. */
.no-js [data-sc-cue], .no-js .sc-copy, .no-js [data-sc-in] {
  opacity: 1 !important; transform: none !important;
}
.no-js video[data-sc-scrub] { display: none; }
.no-js .scroll-art { transform: none !important; }
.no-js .hand-art { transform: translate(0, -50%) !important; }
.no-js .king-plate img { transform: none !important; }
.no-js .hero-glow { opacity: .8; }
.no-js .night-quote { position: static; }
.no-js .moon-wrap { margin-top: 2rem; }
.no-js .moon-wrap svg { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Khung tĩnh của cuộn tranh là trọn bức trong khung lụa. */
  .scroll-art { transform: none; }
  .hand-art { transform: translate(0, -50%); }
  .king-plate img { transform: none; }
  .hero-glow { opacity: .8; }
  .moon-wrap svg { transform: none; opacity: 1; }
  .cta:hover { transform: none; }
}