/* ========================================================================= Nương Typography — Fraunces × Be Vietnam Pro Type scale lifted from Stage 1 design tokens (mảng dấu tiếng Việt đầy đủ). Fonts load qua Google Fonts CDN ở của mỗi page; chuyển self-host khi sẵn sàng commission shoot Trạm Tấu. ========================================================================= */ /* Font-family helpers ---------------------------------------------------- */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } /* Italic display — chuyên cho moment trữ tình, tên người, tên vườn */ .italic-display { font-family: var(--font-display); font-style: italic; } .italic-display-moss { font-family: var(--font-display); font-style: italic; color: var(--moss-deep); } /* Tabular numbers — luôn dùng cho tiền, ngày giờ, số kg */ .num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } /* ─── Type scale ────────────────────────────────────────────────────────── */ /* display-1 · hero, masthead, footer wordmark Fraunces 600 · 96 / 0.95 · tracking -0.02em */ .h-display-1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); } /* display-2 · subhead, idea statement, founder pack Fraunces italic 400 · 64 / 1.0 · tracking -0.015em */ .h-display-2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(44px, 6vw, 64px); line-height: 1.0; letter-spacing: -0.015em; color: var(--moss-deep); } /* h1 · section opener Fraunces 500 · 44 / 1.1 · tracking -0.01em */ .h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.5vw, 44px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); } /* h2 · subsection heading Fraunces 500 · 32 / 1.15 · tracking -0.01em */ .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3.5vw, 32px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } /* h3 · card title, mini block heading Be Vietnam Pro 600 · 22 / 1.3 · tracking -0.005em */ .h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(20px, 2.5vw, 22px); line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); } /* h4 · small headline / list item lead Be Vietnam Pro 500 · 17 / 1.4 */ .h4 { font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--ink); } /* body-lg · lead paragraph Be Vietnam Pro 400 · 17 / 1.7 */ .body-lg { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.7; color: rgba(43, 43, 43, .9); } /* body-md · default body Be Vietnam Pro 400 · 15 / 1.65 */ .body-md { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.65; color: rgba(43, 43, 43, .85); } /* body-sm · fine print, legal Be Vietnam Pro 400 · 13 / 1.6 */ .body-sm { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.6; color: rgba(43, 43, 43, .75); } /* caption · meta, timestamp, mono label Be Vietnam Pro 500 · 11 / 1.5 · tracking +0.08em · UPPER */ .caption { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-4); } /* mono-label · "01 / 02" section markers, "TRẠM TẤU · 14.05" timestamps */ .mono-label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog-4); } /* Base body / html style — gọi một lần ở app shell */ html, body { background: var(--cream); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Vietnamese rule — heading dùng text-wrap balance, body dùng pretty */ h1, h2, h3, h4, .h-display-1, .h-display-2, .h1, .h2, .h3, .h4 { text-wrap: balance; } p, .body-lg, .body-md, .body-sm { text-wrap: pretty; }