/* dataspace — shared visual system.
   Black field, white type, hairline structure. Latin labels run in Barlow caps with wide tracking;
   Thai headings fall through to Bai Jamjuree, body to IBM Plex Sans Thai. */
:root{
  --bg:#000; --surface:#0b0c0e; --raise:#131519; --ink:#f4f5f6; --muted:#a1a7ae; --faint:#6d737a;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.38);
  --accent:#f4f5f6; --signal:#7fb2ff;
  --ban:#ff6a5c; --cond:#f2b544; --ok:#43d18f; --unv:#b0a4ff; --info:#93b4d4; --tp:#4fd0dc;
  --f-display:"Barlow","Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-thai-display:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scrollbar-color:#3a3d42 var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--ink)}
::selection{background:var(--ink);color:#000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2f34;border:2px solid var(--bg);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#4a4e55}
a{color:var(--ink);text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
input,textarea,select,button{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}

/* Latin caps label: wordmark, nav, small headers */
.caps{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-weight:600}

/* Top bar shared by inner pages */
.topbar{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar .in{max-width:1180px;margin:0 auto;height:56px;display:flex;align-items:center;gap:20px;
  padding-inline:var(--gutter) max(16px,env(safe-area-inset-right,0px))}
.wordmark{font-family:var(--f-display);font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:.9rem;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.topbar nav{display:flex;gap:22px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{font-family:var(--f-display);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);white-space:nowrap;padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Page heading block for inner pages */
.pagehead{padding-block:44px 22px;display:grid;gap:10px}
.pagehead h1{font-family:var(--f-thai-display);font-weight:600;font-size:clamp(2rem,6vw,3.2rem);line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance}
.pagehead p{margin:0;color:var(--muted);max-width:68ch}

/* Ghost button, the one control shape across the site */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 22px;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--f-thai-display);font-weight:600;font-size:.92rem;letter-spacing:.02em;text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.ghost:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.ghost.solid{background:var(--ink);color:#000;border-color:var(--ink)}
.ghost.solid:hover{background:transparent;color:var(--ink)}
.ghost:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--ink);border-color:var(--line-strong)}

.sitefoot{border-top:1px solid var(--line);margin-top:56px;padding-block:22px 8px;color:var(--faint);font-size:.8rem;display:grid;gap:6px}
.sitefoot a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}