/* ══ base ════════════════════════════════════════════════
   reset + ตัวอักษรพื้นฐาน

   กติกาตัวอักษร (สำคัญ):
   - ไทย = Anuphan เสมอ   mono ไม่มีสระ/วรรณยุกต์ไทย ถ้าใส่จะ
     fallback เป็นฟอนต์ระบบกลางประโยค แถมโดนถ่างจนวรรณยุกต์เพี้ยน
   - mono ใช้ได้เฉพาะ "ตัวเลข" (.num) กับ "อังกฤษล้วน" (.lat)
   - หัวข้อไทยต้อง line-height >= 1.24 ไม่งั้นสระบนชนบรรทัดบน
   ═══════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs1); line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--green); outline-offset:3px; border-radius:4px}

/* หัวข้อใช้ Anuphan (ฟอนต์เดียวกับเนื้อความ) — ไทยกับอังกฤษอยู่ด้วยกันได้
   Bricolage เก็บไว้ใช้แค่ชื่อบนหัวเว็บ (.mark) */
h1,h2,h3{margin:0; text-wrap:balance; font-family:var(--body)}
h1{font-size:var(--fs5); font-weight:700; line-height:1.26; letter-spacing:-.02em}
h2{font-size:var(--fs4); font-weight:700; line-height:1.28; letter-spacing:-.015em}
h3{font-size:var(--fs3); font-weight:700; line-height:1.35; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}

/* ข้อความไทย — ต้องกลับไปใช้ Anuphan และคลาย line-height ให้วรรณยุกต์ */
.th{font-family:var(--body); letter-spacing:0; line-height:1.4}
h1.th,h2.th,h3.th{font-weight:700; line-height:1.3; letter-spacing:-.005em}

/* อังกฤษล้วน — ถ่างตัวอักษรได้ */
.lat{
  font-family:var(--mono); font-size:var(--fs-2);
  letter-spacing:.14em; text-transform:uppercase;
}
/* ตัวเลข — เรียงคอลัมน์ตรงกัน */
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
}