/* The pages around the front page (how-to, contact, advertise, privacy, terms, 404), set in the same journal as it:
   the five CI tones, the CI wordmark (the mask file, never retyped), a running head in Cormorant italic joined to a
   dimension line, Noto Serif Thai for headings and IBM Plex Sans Thai for reading, a faint paper grain. */
:root {
  --paper:#F7F5F1; --panel:#FFFDF9; --ink:#1C1C1C; --muted:#4F4C47; --soft:#A7A39C; --line:rgb(167 163 156 / .5);
  --tint:rgb(217 210 200 / .38); --accent:#1C1C1C;
  --serif:"Noto Serif Thai","Cormorant Garamond",Georgia,serif;
  --display:"Cormorant Garamond","Noto Serif Thai",Georgia,serif;
  --sans:"IBM Plex Sans Thai","Inter",system-ui,-apple-system,sans-serif;
  --ui:"Inter","IBM Plex Sans Thai",system-ui,sans-serif;
  --grain:url("/assets/img/grain.png");
  --ease:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box; }
html { color-scheme:light; background:var(--paper); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--grain), var(--paper); font-family:var(--sans); font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible { outline:1px solid var(--ink); outline-offset:4px; }
::selection { background:#D9D2C8; color:#1C1C1C; }

/* ---------- running head ---------- */
.legal-bar {
  position:sticky; top:0; z-index:20;
  min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px max(20px, calc((100vw - 1120px) / 2)); padding-top:calc(10px + env(safe-area-inset-top, 0px));
  background:rgb(247 245 241 / .9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* the brand link keeps its text "RAYA" for screen readers; what shows is the CI wordmark row of the lockup */
.legal-brand { --w:96px; display:inline-flex; align-items:center; min-height:44px; font-size:0; color:var(--ink); text-decoration:none; }
.legal-brand::before {
  content:""; display:block; width:var(--w); height:calc(var(--w) * 86 / 556); background:currentColor;
  -webkit-mask:url("/assets/brand/raya-lockup-mask.png") no-repeat calc(var(--w) * -2 / 556) calc(var(--w) * -696 / 556) / calc(var(--w) * 560 / 556) auto;
          mask:url("/assets/brand/raya-lockup-mask.png") no-repeat calc(var(--w) * -2 / 556) calc(var(--w) * -696 / 556) / calc(var(--w) * 560 / 556) auto;
}
.legal-end { display:flex; align-items:center; gap:10px; }
.legal-back { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:.9rem; color:var(--muted); text-decoration:none; }
.legal-back:hover { color:var(--ink); }
.legal-app {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px;
  border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--paper);
  font:500 .9rem/1 var(--sans); text-decoration:none; transition:background-color .3s var(--ease);
}
.legal-app:hover { background:#3D3D3D; border-color:#3D3D3D; }
/* the front page's menu on every page around it (the owner, 27 Oct 2026: "ทำไมพอเข้าไปแท็บอื่น มันเหลือแค่นี้"): the
   links in the bar on a desk, a menu button on a phone. The menu is a <details>, so it opens without a script. */
.legal-nav { display:none; }
.legal-nav a { position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:.95rem; font-weight:500; text-decoration:none; }
.legal-nav a::after { content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.legal-nav a:hover::after, .legal-nav a:focus-visible::after, .legal-nav a[aria-current="page"]::after { transform:scaleX(1); }
.legal-menu > summary { list-style:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--ink); cursor:pointer; }
.legal-menu > summary::-webkit-details-marker { display:none; }
.legal-burger-lines { position:relative; display:block; width:16px; height:7px; }
.legal-burger-lines i { position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform .35s var(--ease), top .35s var(--ease); }
.legal-burger-lines i:first-child { top:0; } .legal-burger-lines i:last-child { top:6px; }
.legal-menu[open] .legal-burger-lines i:first-child { top:3px; transform:rotate(45deg); }
.legal-menu[open] .legal-burger-lines i:last-child { top:3px; transform:rotate(-45deg); }
/* the sheet hangs from the bar's lower edge (absolute in the sticky bar: a fixed child would be held inside the bar by its
   blur) and runs a screen tall; the page under it does not scroll while it is open */
html:has(.legal-menu[open]) { overflow:hidden; }
.legal-sheet { position:absolute; left:0; right:0; top:100%; height:100dvh; z-index:-1; overflow-y:auto;
  padding:28px 20px calc(120px + env(safe-area-inset-bottom, 0px)); background:var(--grain), var(--paper); border-top:1px solid var(--line); }
.legal-menu-list { list-style:none; margin:0 0 28px; padding:0; border-top:1px solid var(--ink); }
.legal-menu-list a { display:flex; align-items:baseline; gap:1.1rem; padding:14px 0; border-bottom:1px solid var(--line); font:300 1.75rem/1.3 var(--serif); text-decoration:none; }
.legal-menu-list a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; }
.legal-menu-n { font:italic 400 1rem/1 var(--display); color:var(--soft); min-width:1.6rem; }
.legal-sheet .legal-action { margin-top:0; }
@media (min-width:1024px) {
  .legal-nav { display:flex; gap:clamp(1.4rem, 2.6vw, 2.6rem); }
  .legal-menu, .legal-back { display:none; }
}
.legal-end > * { flex-shrink:0; }
@media (max-width:359px) { .legal-bar { gap:8px; } .legal-end { gap:6px; } }
.legal-foot-nav { display:flex; flex-wrap:wrap; gap:0 24px; }
.legal-foot-nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.legal-foot-nav a:hover, .legal-foot-nav a[aria-current="page"] { color:var(--ink); }
.lang-switch {
  display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  font:500 .78rem/1 var(--ui); letter-spacing:.06em; color:var(--ink); text-decoration:none;
}
.lang-switch:lang(th) { font-family:var(--sans); letter-spacing:0; }
.lang-switch:hover { border-color:var(--ink); }

/* ---------- page ---------- */
.legal-main { width:min(100% - 40px, 760px); margin:0 auto; padding:clamp(52px, 8vw, 104px) 0 96px; }
/* the running head of a journal page: an italic name and a dimension line (ระยะ) */
.legal-eyebrow {
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
  font:italic 400 1.2rem/1 var(--display); letter-spacing:.01em; color:var(--ink);
}
.legal-eyebrow::after {
  content:""; width:46px; height:9px; opacity:.55;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat;
}
h1 { margin:0; font:300 clamp(2.4rem, 7.2vw, 4.4rem)/1.24 var(--serif); letter-spacing:0; }
.legal-lede { margin:24px 0 48px; max-width:43rem; color:var(--muted); font-size:1.08rem; line-height:1.85; }
/* a guide's direct answer to its own question, before the lede that says how the page works (AEO, 12 Oct 2026) */
.legal-answer { margin:24px 0 0; max-width:43rem; font-size:1.08rem; line-height:1.85; }
.legal-answer + .legal-lede { margin-top:12px; }
.legal-meta { margin:0; padding:14px 0; border-block:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.legal-section { padding:38px 0; border-bottom:1px solid var(--line); }
.legal-lede + .legal-section, .legal-lede + .legal-warning + .legal-section { border-top:1px solid var(--ink); }
.legal-section h2 { margin:0 0 14px; font:300 clamp(1.45rem, 1.25rem + .8vw, 1.85rem)/1.45 var(--serif); }
.legal-section h3 { margin:28px 0 6px; font-size:1.02rem; font-weight:500; line-height:1.6; } /* numbered clauses under a programme (/partners/) */
.legal-section p { margin:10px 0; }
.legal-section ul { margin:14px 0; padding-left:0; list-style:none; }
.legal-section ul:not(.legal-channels) li { position:relative; padding-left:1.25rem; }
.legal-section ul:not(.legal-channels) li::before { content:""; position:absolute; left:0; top:.92em; width:.55rem; height:1px; background:var(--soft); }
.legal-section li + li { margin-top:8px; }
.legal-warning { margin:36px 0 8px; padding:22px 24px; border-left:2px solid var(--ink); background:var(--tint); }
.legal-warning strong { display:block; margin-bottom:6px; font:400 1.15rem/1.5 var(--serif); }
.legal-action {
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; margin-top:20px; padding:0 26px;
  border-radius:999px; background:var(--ink); color:var(--paper); font-weight:500; text-decoration:none;
  transition:background-color .3s var(--ease);
}
.legal-action::after { content:""; width:22px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.legal-action:hover { background:#3D3D3D; }
.legal-action:hover::after { width:30px; }

/* 404: three ways on — home, the app, แจ้งปัญหา (tests/report.mjs holds the order and the ?from= link) */
.nf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.nf-actions .legal-action { margin-top:0; }
.nf-pill {
  display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px;
  border:1px solid var(--line); border-radius:999px; color:var(--ink); font-weight:500; text-decoration:none;
  transition:border-color .3s var(--ease);
}
.nf-pill:hover { border-color:var(--ink); }
.nf-path { margin:22px 0 0; color:var(--muted); font:.8rem/1.6 ui-monospace, Menlo, monospace; word-break:break-all; }
@media (max-width:600px) { .nf-actions { flex-direction:column; align-items:stretch; } }

/* contact channels: a ruled list, not a grid of boxes */
.legal-section .legal-channels { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
.legal-section .legal-channels li { margin:0; }
.legal-channels a { display:flex; align-items:center; gap:16px; min-height:76px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding .3s var(--ease); }
.legal-channels a:hover { padding-left:6px; }
.legal-channels svg { flex:none; width:22px; height:22px; color:var(--muted); }
.legal-channels span { display:flex; flex-direction:column; line-height:1.45; }
.legal-channels b { font-weight:500; }
.legal-channels small { color:var(--muted); font-size:.88rem; }

/* ---------- foot ---------- */
.legal-foot {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; width:min(100% - 40px, 1120px); margin:auto;
  padding:28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); color:var(--muted); font-size:.9rem;
}
.legal-foot > a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.legal-foot > a:hover { color:var(--ink); }
.legal-social { display:flex; gap:8px; margin-left:auto; }
.legal-social a { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--muted); transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.legal-social a:hover { color:var(--paper); background:var(--ink); border-color:var(--ink); }

@media (max-width:600px) {
  .legal-section .legal-channels { grid-template-columns:1fr; }
  .legal-bar { min-height:60px; }
  .legal-brand { --w:84px; }
  .legal-back { display:none; } /* the wordmark is the way home on a phone; the bar keeps room for the app and the language */
  .legal-app { padding:0 16px; }
  .legal-foot-nav { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 16px; width:100%; }
  .legal-main { width:min(100% - 40px, 760px); padding-top:44px; }
  .legal-social { margin-left:0; width:100%; }
}

/* ---------- dark: follows the device, or the moon button's choice on the front page / app (raya.theme, set in each page's head) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper:#1C1C1C; --panel:#232220; --ink:#F7F5F1; --muted:#D9D2C8; --soft:#A7A39C; --line:rgb(167 163 156 / .32); --tint:rgb(61 61 61 / .45); --accent:#F7F5F1; color-scheme:dark; }
  :root:not([data-theme="light"]) .legal-bar { background:rgb(28 28 28 / .9); }
  :root:not([data-theme="light"]) .legal-app:hover, :root:not([data-theme="light"]) .legal-action:hover { background:#D9D2C8; border-color:#D9D2C8; }
}
:root[data-theme="dark"] { --paper:#1C1C1C; --panel:#232220; --ink:#F7F5F1; --muted:#D9D2C8; --soft:#A7A39C; --line:rgb(167 163 156 / .32); --tint:rgb(61 61 61 / .45); --accent:#F7F5F1; color-scheme:dark; }
:root[data-theme="dark"] .legal-bar { background:rgb(28 28 28 / .9); }
:root[data-theme="dark"] .legal-app:hover, :root[data-theme="dark"] .legal-action:hover { background:#D9D2C8; border-color:#D9D2C8; }

/* English pages read in the Latin faces: Inter for text, Cormorant for headings */
html[lang="en"] { --serif:var(--display); --sans:var(--ui); }
html[lang="en"] h1 { font-weight:300; letter-spacing:-.01em; }

/* the 404's first pill reads หน้าแรก, which the dictionary gives as "home page" for the sentences that link it mid-line;
   as a button on /en/404.html it starts with a capital */
html[lang="en"] #nf-home span { display:inline-block; }
html[lang="en"] #nf-home span::first-letter { text-transform:uppercase; }