/*
 * Typography layer — loaded last on every page.
 * Headings: Lora (elegant, sturdy serif; clear Vietnamese diacritics).
 * Body: Be Vietnam Pro (purpose-built for Vietnamese, highly legible).
 * Only fonts, sizes, line-height and measure; no layout or behavior changes.
 */
:root {
  /* --serif is left to each theme (the shop theme uses it for menus/buttons);
     elegant serif is applied explicitly to section headings via --display. */
  --display: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elegant serif headings; slightly looser leading so Vietnamese stacked accents never collide */
h1, h2,
.article-hero h1, .article-body h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}
/* Product names, card titles, drawer titles: clean sans, easy to scan */
h3 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.45;
}

/* Long-form articles: comfortable reading size + measure */
.article-body {
  font-size: 18px;
  line-height: 1.8;
  color: #2b3426;
}
.article-body p,
.article-body li {
  max-width: 68ch;
  text-wrap: pretty;
}
.article-body h3 {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.5;
}
.article-deck { font-size: 19px; line-height: 1.75; }
.article-hero h1 { line-height: 1.15; letter-spacing: -0.5px; }
.article-takeaways li,
.expert-note p,
.article-callout,
.article-body details p { font-size: 17px; line-height: 1.75; }
.article-body summary { font-size: 18px; }
table { font-size: 16px; }
.button { font-size: 15px; letter-spacing: .2px; }

/* Prices and quantities: steady figures */
[class*="price"], [class*="Price"] { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .article-body { font-size: 17px; line-height: 1.75; }
  .article-deck { font-size: 17px; }
  .article-body h3 { font-size: 19px; }
}