/* DoTarot legal pages (9 Oct 2026). Same "Museum Folio" tokens as the app (styles.css),
   same type scale (foundation.css), honours the app's saved theme and language.
   Static, no framework, ~5 KB. */
:root{color-scheme:light;
  --bg:#F3EFE5;--surface:#FBF8F1;--elevated:#FFFDF8;--sunken:#E9E3D5;--ink:#1A2023;--ink-2:#3A4245;--muted:#5A605D;
  --rule:#CDC5B2;--rule-2:#E0D9C8;--accent:#2B655C;--accent-subtle:#DCE8E1;--caution:#9B3D38;--gold:#765609;--gold-subtle:#F1E5C2;
  --display:"Marcellus","Noto Serif Thai",Georgia,serif;--serif:"Noto Serif Thai","Marcellus",Georgia,serif;
  --body:"Anuphan","Noto Sans Thai",system-ui,sans-serif;--mono:"IBM Plex Mono","Anuphan",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4.5vw,48px);--tap:44px;
  --t-h1:clamp(2rem,1.45rem + 2.2vw,3.1rem);--t-h2:clamp(1.3rem,1.15rem + .7vw,1.65rem);--t-h3:clamp(1.08rem,1.02rem + .3vw,1.2rem);
  --t-lead:clamp(1.08rem,1rem + .4vw,1.25rem);--t-body:clamp(1rem,.97rem + .15vw,1.0625rem);--t-small:.9375rem;--t-label:.8125rem;
  --lh-head:1.22}
html:lang(th){--lh-head:1.45}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#111618;--surface:#182022;--elevated:#202A2C;--sunken:#0B0F10;--ink:#E1E4DD;--ink-2:#B2BAB5;--muted:#969F9C;--rule:#2F3B3D;--rule-2:#243032;--accent:#78B9AC;--accent-subtle:#1C3531;--caution:#E08C82;--gold:#D8B660;--gold-subtle:#332B16}
  :root:not([data-theme="light"]) .brand img{filter:invert(1)}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#111618;--surface:#182022;--elevated:#202A2C;--sunken:#0B0F10;--ink:#E1E4DD;--ink-2:#B2BAB5;--muted:#969F9C;--rule:#2F3B3D;--rule-2:#243032;--accent:#78B9AC;--accent-subtle:#1C3531;--caution:#E08C82;--gold:#D8B660;--gold-subtle:#332B16}
:root[data-theme="dark"] .brand img{filter:invert(1)}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-body);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* one language visible at a time; both are in the document so links and search work offline */
html:lang(th) [lang="en"]:not(.keep),html:lang(en) [lang="th"]:not(.keep){display:none!important}
a{color:inherit;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:9}.skip:focus{top:12px}
.top{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:10px var(--gutter)}
.brand img{height:36px;width:auto}
.top nav{display:flex;gap:2px 18px;flex-wrap:wrap;margin-left:auto}
.top nav a{text-decoration:none;color:var(--ink-2);font-size:var(--t-small);min-height:var(--tap);display:inline-flex;align-items:center}
.prefs{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.prefs button{min-width:var(--tap);min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--ink);font:500 .8rem/1 var(--body);cursor:pointer}
.prefs button+button{border-left:1px solid var(--rule)}
.prefs button:hover{background:var(--sunken)}
.prefs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle}
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,5vw,72px);max-width:1180px;margin:0 auto;padding:0 var(--gutter) 72px}
.legal-head{padding:clamp(24px,5vh,56px) 0 8px;max-width:46rem}
.eyebrow{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font-family:var(--serif);font-weight:500;font-size:var(--t-h1);line-height:var(--lh-head);margin:0 0 12px;text-wrap:balance}
html:lang(en) h1{font-family:var(--display);font-weight:400}
.meta{margin:0;color:var(--muted);font-size:var(--t-small)}
.draft{margin:20px 0 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--caution) 45%,transparent);border-left-width:4px;border-radius:10px;background:var(--surface);color:var(--ink);font-size:var(--t-small);line-height:1.65}
.draft strong{color:var(--caution)}
.summary{margin:28px 0 8px;padding:20px 22px;border-radius:14px;background:var(--surface);border:1px solid var(--rule-2)}
.summary h2{margin:0 0 8px;font-size:var(--t-h3)}
.summary ul{margin:0;padding-left:1.2em}.summary li{margin:4px 0}
.toc{font-size:var(--t-small);margin:24px 0 0}
.toc h2{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px}.toc li{break-inside:avoid;margin:2px 0}
.toc a{text-decoration:none;color:var(--ink-2)}.toc a:hover{color:var(--accent);text-decoration:underline}
.legal-body{max-width:46rem}
.legal-body section{padding-top:8px}
h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:var(--lh-head);margin:44px 0 10px;text-wrap:balance}
h3{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.5;margin:24px 0 6px}
p,li{text-wrap:pretty}
p{margin:0 0 12px}
ul,ol{margin:0 0 14px;padding-left:1.3em}li{margin:4px 0}
.table{overflow-x:auto;margin:12px 0 18px;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.6}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--rule-2)}
th{font-weight:500;color:var(--ink-2);background:var(--sunken)}
tr:last-child td{border-bottom:0}
td code,p code,li code{font-family:var(--mono);font-size:.84em;background:var(--sunken);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
mark.todo{background:var(--gold-subtle);color:var(--ink);padding:1px 5px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.todo::before{content:"⚑ ";color:var(--gold)}
.note{font-size:var(--t-small);color:var(--ink-2);border-left:2px solid var(--gold);padding:2px 0 2px 14px;margin:12px 0}
.legal-foot{grid-column:1 / -1;max-width:46rem;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);font-size:var(--t-small);color:var(--muted)}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
.legal-foot nav a{min-height:var(--tap);display:inline-flex;align-items:center;color:var(--ink-2)}
.legal-foot nav a[aria-current="page"]{color:var(--ink);font-weight:500;text-decoration:none}
@media (min-width:1100px){
  .legal{grid-template-columns:minmax(0,46rem) minmax(200px,260px);justify-content:center}
  .legal-head{grid-column:1}
  .toc{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:24px;margin-top:clamp(24px,5vh,56px);padding-left:20px;border-left:1px solid var(--rule)}
  .toc ol{columns:1}
  .legal-body{grid-column:1}
}
@media (max-width:640px){.toc ol{columns:1}.top nav{margin-left:0;order:3;width:100%}.prefs{margin-left:auto}th,td{padding:8px 10px}}
@media print{.top,.toc,.prefs,.skip{display:none}body{background:#fff;color:#000}.legal{display:block}html:lang(th) [lang="en"],html:lang(en) [lang="th"]{display:none!important}}