/* Stylesheet for the pre-rendered pages (articles/, glossary/), built by
   tools/build-static-pages.js so search engines can index every article and
   glossary term. Kept small and standalone: the app's main.css assumes the
   single-page layout. Same palette and fonts as the site, dark only. */
:root{
  --bg:#070b18; --panel:#111b30; --card:#182544; --text:#edeff6; --muted:#a9b0c4; --dim:#7d859c;
  --line:rgba(237,239,246,0.1); --orange:#f2a65a; --orange-soft:#ffd9a0;
  --blue:#7ec4f2; --yellow:#f2d94a; --purple:#b98af2; --pink:#f28ad0; --green:#7fd8a0; --teal:#6fd6cf;
}
*{ box-sizing:border-box; }
html{ scrollbar-color:rgba(150,165,200,0.34) transparent; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Chakra Petch','Sarabun',system-ui,sans-serif; line-height:1.75;
  background-image:radial-gradient(ellipse 80% 50% at 70% -10%, rgba(70,100,200,0.18), transparent 70%);
}
a{ color:var(--orange-soft); }
.sp-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1080px; margin:0 auto; padding:18px 20px; border-bottom:1px solid var(--line); }
.sp-logo{ font-weight:700; font-size:18px; text-decoration:none; color:var(--text); }
.sp-logo b{ color:var(--orange); }
.sp-nav{ display:flex; gap:18px; font-size:14px; }
.sp-nav a{ color:var(--muted); text-decoration:none; }
.sp-nav a:hover{ color:var(--text); }
main{ max-width:1080px; margin:0 auto; padding:28px 20px 60px; }
.sp-crumbs{ font-size:13px; color:var(--dim); }
.sp-crumbs a{ color:var(--dim); text-decoration:none; }
.sp-cat{ font-size:13px; font-weight:700; margin-top:18px; display:block; }
h1{ font-size:clamp(26px, 5vw, 36px); line-height:1.25; margin:6px 0 2px; }
.sp-en{ color:var(--muted); font-style:italic; margin:0 0 4px; }
.sp-date{ font-size:13px; color:var(--dim); margin:0 0 12px; }
.sp-lede{ font-size:17px; color:var(--muted); margin:0 0 22px; }
.sp-body{ font-size:16px; }
/* cover photo with its credit (licence terms), and TeX formulas typeset by KaTeX */
.sp-cover{ margin:14px 0 18px; }
.sp-cover img{ display:block; height:auto; margin:0 auto; border-radius:12px; background:#0a0f1e; }
/* computer / tablet: smaller photo on the right, text beside it (as in the app) */
@media (min-width:601px){ .sp-cover{ float:right; width:36%; margin:8px 0 12px 26px; } }
.sp-myth, .sp-open, .sp-section{ clear:both; }
.sp-cover figcaption{ margin-top:6px; font-size:12px; color:var(--dim); }
.sp-cover figcaption a{ color:inherit; }
.sp-cover figcaption .cap{ display:block; color:var(--muted); font-size:13px; }
texb{ display:block; margin:14px 0; overflow-x:auto; text-align:center; }
/* formulas (.fx) follow the app's "แสดงสูตร" setting, off by default;
   .nofx is the plain-language text that stands in for them */
body:not(.fx-on) .fx, body.fx-on .nofx{ display:none !important; }
.sp-fx{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; margin:0 0 14px; cursor:pointer; }
.sp-body h3{ font-size:19px; margin:28px 0 8px; }
.sp-body ul{ padding-left:0; list-style-position:inside; }
.sp-body li{ margin:5px 0; }
.sp-myth{ margin:26px 0; padding:16px 20px; border-radius:12px; background:rgba(242,166,90,0.08); border:1px solid rgba(242,166,90,0.3); }
.sp-myth b:first-child{ display:block; color:var(--orange-soft); margin-bottom:4px; }
.sp-open{ display:inline-block; margin:8px 0 26px; padding:10px 18px; border-radius:10px; background:var(--orange); color:#1a1005; font-weight:700; text-decoration:none; }
.sp-section{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line); }
.sp-section h2{ font-size:18px; margin:0 0 10px; }
.sp-terms{ display:flex; flex-wrap:wrap; gap:6px 20px; padding:0; list-style:none; }
.sp-terms a{ text-decoration:underline; text-decoration-color:rgba(242,166,90,0.5); text-underline-offset:3px; }
.sp-terms span{ color:var(--muted); font-size:14px; margin-left:4px; }
.sp-list{ padding:0; list-style:none; display:grid; gap:10px; }
.sp-list a{ font-weight:600; text-decoration:none; }
.sp-list span{ display:block; color:var(--muted); font-size:14px; }
.sp-letters{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:14px 0 20px; }
.sp-letters a{ padding:2px 8px; border-radius:6px; text-decoration:none; color:var(--muted); }
.sp-letters a.on{ color:var(--orange-soft); font-weight:700; background:rgba(255,255,255,0.06); }
.sp-term{ padding:12px 0; border-top:1px solid var(--line); scroll-margin-top:16px; }
.sp-term h2{ font-size:17px; margin:0; display:inline; }
.sp-term h2 a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(242,166,90,0.5); text-underline-offset:3px; }
.sp-term .th{ color:var(--muted); margin-left:10px; }
.sp-term p{ margin:4px 0 0; }
.sp-term:target{ background:rgba(242,166,90,0.08); border-radius:8px; padding-left:8px; }
footer{ max-width:1080px; margin:0 auto; padding:20px; font-size:13px; color:var(--dim); border-top:1px solid var(--line); }
/* several photos side by side (GENERAL_FIGURE_SETS), as in the app */
.sp-set .row{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.sp-set .item img{ width:100%; border-radius:10px; }
.sp-set .item b{ display:block; margin-top:6px; font-size:13px; }
.sp-set .item span{ display:block; font-size:12px; color:var(--muted); line-height:1.5; }
.sp-set .item small{ display:block; font-size:11px; color:var(--dim); line-height:1.5; }
.sp-set .item small a{ color:inherit; }

/* Thai words the browser would break mid-word (js/01a-thai-keep.js) */
t-nw{ white-space:nowrap; }