/* Shared type + polish layer for every chaochud.com page. Loaded after each page's inline styles. */
:root{--sans:"Anuphan",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Noto Serif Thai","Anuphan",Georgia,serif}
body{font-family:var(--sans);text-rendering:optimizeLegibility}
input,select,textarea,button,.btn{font-family:var(--sans)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:#f6d5db;color:#111827}
:where(a,button,input,select,summary):focus-visible{outline:3px solid #e79aa8;outline-offset:2px;border-radius:6px}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
/* header: identical look on every page, 44px+ tap targets */
header.top .mark{font-family:var(--sans);font-weight:700}
header.top .nav-cta{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:10px;transition:background-color .2s ease}
header.top .nav-cta:hover{background:#000}
.btn{transition:background-color .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:translateY(1px)}
footer a{color:inherit}
footer a:hover{color:var(--ink,#111827)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.nav{display:flex;align-items:center;gap:6px}
.nav-link{font-weight:600;font-size:14px;text-decoration:none;color:var(--mute,#5b6472);min-height:44px;display:inline-flex;align-items:center;padding:0 12px}
.nav-link:hover{color:var(--ink,#111827)}