/* LangTai shared design system — translator (/), developer (/developer), privacy (/privacy).
 * White first; pastels are light and reflections only. Glass lives on the header and a few
 * floating surfaces; anything people read or type on is near-opaque. */

/* Thai glyphs come from self-hosted IBM Plex Sans Thai (OFL); Latin falls through to the system sans. */
@font-face { font-family: 'LangTai Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-sans-thai-400-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'LangTai Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-sans-thai-500-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'LangTai Thai'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-sans-thai-600-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'LangTai Thai'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ibm-plex-sans-thai-700-thai.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --white: #FFFFFF;
  --paper: #FAFAFC;
  --ink: #1D1D1F;
  --ink-2: #62666D;           /* 5.8:1 on #FFF, 5.6:1 on #FAFAFC */
  --ink-3: #8A8E95;           /* decorative only (never body text) */
  --pink: #F8DCE8;
  --yellow: #FFF1BF;
  --sky: #DDEEFF;
  --sky-wash: #F4F9FF;        /* the faintest blue, for the translation pane */
  --accent: #1257A8;          /* logo blue: links + focus, 7.3:1 on white */
  --south: #0E7C79;           /* language dot only */
  --danger: #B42318;
  --line: rgba(29, 29, 31, .09);
  --line-2: rgba(29, 29, 31, .16);
  --line-input: rgba(29, 29, 31, .32);
  --shadow-1: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 20px rgba(29, 29, 31, .05);
  --shadow-2: 0 2px 6px rgba(29, 29, 31, .05), 0 18px 48px rgba(29, 29, 31, .09);
  --r-panel: 24px;
  --r-card: 20px;
  --r-btn: 14px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'LangTai Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
  --wrap: 1160px;
  --measure: 680px;
  --gutter: 24px;
  color-scheme: light;
}
@media (max-width: 400px) { :root { --gutter: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--sky); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
}
.skip:focus-visible { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header (64px, frosted) ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20; height: 64px;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
}
.site-head.is-scrolled { border-bottom-color: var(--line); }
.site-head .wrap { height: 100%; display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; border-radius: 12px; }
.brand .logo { width: 34px; height: 31px; flex: none; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.wordmark .tai { color: var(--accent); }
.head-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.head-link:hover { color: var(--ink); background: rgba(29, 29, 31, .04); }
.head-link[aria-current="page"] { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease), color .15s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(29, 29, 31, .12), 0 6px 16px rgba(29, 29, 31, .12); }
.btn-dark:hover { background: #343437; }
.btn-quiet { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { background: var(--paper); border-color: var(--line-input); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--white); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 18px; padding-bottom: 22px; }
.foot-note { color: var(--ink-2); font-size: 14px; margin-right: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; text-decoration: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- glass (limited surfaces only) ---------- */
.glass {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 1px rgba(29, 29, 31, .04), 0 18px 44px rgba(29, 29, 31, .08);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .62); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
}

/* ---------- reveal on enter (opt-in: only when site-boot.js adds .motion) ---------- */
.motion .reveal { opacity: 0; transform: translate3d(0, var(--rise, 16px), 0);
  transition: opacity var(--dur, .6s) var(--ease) var(--delay, 0s), transform var(--dur, .6s) var(--ease) var(--delay, 0s); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- page transition (cross-document view transitions where supported) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: lt-vt-out .16s var(--ease) both; }
::view-transition-new(root) { animation: lt-vt-in .22s var(--ease) both; }
@keyframes lt-vt-out { to { opacity: 0; } }
@keyframes lt-vt-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion .reveal { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}