/* Nền chung cho mọi trang "chốn riêng của bạn": reset theo luật mobile-native, khung an toàn tai thỏ, chiều cao
   màn hình đúng trên điện thoại, lưới, hạt phim. Thứ tự nạp: fonts/fonts.css -> tokens.css -> base.css -> components.css.
   Cần thẻ meta (đặt trong <head> của mỗi trang):
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <meta name="theme-color" content="#0f0e0c" />   (trang chế độ "sang" đổi bằng JS cho khớp nền) */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* bỏ vệt xám khi chạm; mọi nút tự có trạng thái :active */
  background: var(--you-bg);
}
/* Trang dạng ứng dụng (phiếu, phòng, diorama): kéo quá đầu trang không tải lại trang. Trang dạng bài cuộn thì giữ. */
html.is-app, html.is-app body { overscroll-behavior: none; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--you-bg);
  color: var(--you-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* Ô nhập từ 16px: iPhone không phóng to trang khi chạm vào ô. */
input, textarea, select { font-size: max(16px, 1em); }
/* Chạm là ăn ngay (không chờ 300ms), giữ ngón tay không bôi đen chữ trên nút. Chữ nội dung vẫn bôi đen được. */
button, a, label, summary, [role="button"], [role="tab"], [role="option"], [role="switch"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
a, button, label, summary { -webkit-touch-callout: none; }
/* Ô nhập nằm trong label vẫn bôi đen, chọn chữ, dán được (không kế thừa user-select: none của nhãn). */
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cr-lamp); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--cr-lamp); color: var(--cr-lamp-ink); }
[hidden] { display: none !important; }

/* ---------- Bố cục ---------- */
.cr-stage { position: relative; min-height: 100svh; }                 /* màn đầu trang dạng bài cuộn: không giật khi thanh địa chỉ co */
.cr-app { position: relative; height: 100dvh; overflow: hidden; }     /* màn dạng ứng dụng: theo đúng phần đang thấy */
.cr-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.cr-section { padding-block: var(--section); }
.cr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (min-width: 768px) { .cr-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cr-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.cr-measure { max-width: var(--measure); }
@media (min-width: 768px) { .cr-measure { max-width: var(--measure-wide); } }

/* Vùng an toàn (tai thỏ, thanh vuốt). Cần viewport-fit=cover, nếu không env() luôn là 0. */
.safe-top { padding-top: max(var(--sp-4), env(safe-area-inset-top, 0px)); }
.safe-bottom { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px)); }
.safe-x { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }

/* ---------- Chữ ---------- */
.t-hero, .t-1, .t-2, .t-3 { font-family: var(--font-display); font-weight: 800; text-wrap: balance; overflow-wrap: anywhere; }
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); padding-top: .16em; }
.t-1 { font-size: var(--fs-1); line-height: .96; letter-spacing: var(--track-1); font-weight: 800; }
.t-2 { font-size: var(--fs-2); line-height: 1; letter-spacing: var(--track-2); font-weight: 700; }
.t-3 { font-size: var(--fs-3); line-height: var(--lh-snug); letter-spacing: var(--track-3); font-weight: 700; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--you-text); text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: 1.5; color: var(--you-muted); }
.t-whisper { font-family: var(--font-whisper); font-style: italic; font-weight: 400; font-size: var(--fs-whisper); line-height: var(--lh-whisper); letter-spacing: -.01em; text-wrap: pretty; }
.t-label { font-family: var(--font-label); font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--you-muted); font-weight: 450; }
/* .t-you chỉ dùng cho tên khách, nên lấy bộ font tên nhỏ (--font-you-name, cùng độ đậm với --you-name-weight). */
.t-you { font-family: var(--font-you-name); font-weight: var(--you-name-weight); letter-spacing: var(--you-name-track); line-height: var(--you-name-lh); font-style: var(--you-name-style); font-variation-settings: var(--you-name-vari); overflow-wrap: anywhere; text-wrap: balance; padding-top: .12em; }
.t-lamp { color: var(--cr-lamp); }
.t-muted { color: var(--you-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Hạt phim (như trang chủ). Máy yếu bỏ chế độ hoà màu overlay để đỡ tốn GPU khi cuộn. ---------- */
.cr-grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: var(--cr-grain);
}
[data-tier="low"] .cr-grain { mix-blend-mode: normal; opacity: calc(var(--grain-opacity) * .5); }
[data-mode="sang"] .cr-grain { mix-blend-mode: multiply; opacity: calc(var(--grain-opacity) * .8); }

/* ---------- Trạng thái chuẩn bị cho motion.js ----------
   Chỉ ẩn trước khi hiện khi trang có JS chuyển động (html.has-motion do motion.js gắn). Không JS: mọi thứ hiện sẵn. */
.has-motion [data-reveal] { opacity: 0; transform: translateY(var(--rise)); }
.has-motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }

/* Giảm chuyển động: ít hơn và nhẹ hơn, không phải bằng không. Giữ mờ hiện và đổi màu, bỏ trượt, bỏ vòng lặp trang trí. */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal].is-in { transition: opacity 200ms ease; }
}
[data-motion="reduce"] .has-motion [data-reveal].is-in,
[data-motion="reduce"].has-motion [data-reveal].is-in { transition: opacity 200ms ease; }

/* Gọi sớm font tên của khách. Trang đặt data-voice lên <html> bằng một script nhỏ trong <head> (trước các thẻ CSS),
   nên ngay lần dựng đầu tiên trình duyệt đã gặp hai chữ ẩn bằng font tên (--font-you-name, tệp 11–18 KB) và tải luôn,
   không chờ mã JS và phiếu tải xong. Chữ ẩn không chiếm chỗ, không bấm được, trình đọc màn hình bỏ qua ("/ ''"). */
html[data-voice] body::after {
  content: "Aấ" / "";
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  opacity: 0; pointer-events: none;
  font-family: var(--font-you-name); font-weight: var(--you-name-weight); font-style: var(--you-name-style);
}