/* Shared site shell for every page: tokens, base, nav, buttons, footer, toast, phone IG bar.
   Nav/footer markup lives in tools/build_pages.py (python tools/build_pages.py rewrites it into every page). */
:root,.theme-dark{
  --ink:#070b16; --navy:#0c1426; --panel:#111a30; --line:#1f2a45; --line-2:#2c3a5c;
  --fg:#ecebe6; --fg-2:#c8cddb; --muted:#97a1b8; --dim:#7a849e;
  --gold:#d4ab5a; --gold-hi:#f3d796; --gold-lo:#9c742c;
  --up:#3fbf8a; --down:#e0645a; --up-fg:#9fe0c3; --down-fg:#f2b3ad; --blue-fg:#b9c3ff; --amber:#e0a24a; --term-y:#e8c25a; --term-c:#5fc8e6;
  /* rgb channels for translucent tints: rgb(var(--gold-rgb) / .14) */
  --ink-rgb:7 11 22; --gold-rgb:212 171 90; --gold-hi-rgb:243 215 150; --up-rgb:63 191 138; --down-rgb:224 100 90; --shade:0 0 0;
  --grad-gold:linear-gradient(180deg,#fbe7b5 0%,#e2bd6e 45%,#a87a2e 100%);
  --grad-text:var(--grad-gold);
  --panel-grad:linear-gradient(180deg,#18223d,#0f1830);
  --canvas:#0a1020;
  --f-brand:"Cinzel","Noto Serif Thai",Georgia,serif;
  --f-disp:"Noto Serif Thai","Cinzel",Georgia,serif;
  --f-body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --nav-h:68px;
  color-scheme:dark;
}
.theme-dark{color:var(--fg)}
/* light theme: warm ivory paper, navy ink, deeper gold (all text tokens >= 4.5:1 on --ink/--navy/--panel) */
:root[data-theme="light"]{
  --ink:#f6f1e6; --navy:#fffbf2; --panel:#ffffff; --line:#e2d8c3; --line-2:#c9bb9a;
  --fg:#0e1730; --fg-2:#2b3552; --muted:#47506a; --dim:#5a637c;
  --gold:#8a6414; --gold-hi:#7a560f; --gold-lo:#b8923f;
  --up:#147a4e; --down:#b8372b; --up-fg:#0f6b43; --down-fg:#a3311f; --blue-fg:#3b4bb5; --amber:#94590a; --term-y:#7a560f; --term-c:#0d6680;
  --ink-rgb:246 241 230; --gold-rgb:166 122 32; --gold-hi-rgb:166 122 32; --up-rgb:20 122 78; --down-rgb:184 55 43; --shade:90 72 40;
  --grad-text:linear-gradient(180deg,#b8892f 0%,#8a6414 50%,#5e430c 100%);
  --panel-grad:linear-gradient(180deg,#fffdf8,#f8f1e2);
  --canvas:#fffdf8;
  color-scheme:light;
}
/* high contrast: no low-contrast text, stronger borders, underlined links, bigger focus rings */
:root[data-contrast="high"]{--muted:var(--fg);--dim:var(--fg-2);--fg-2:var(--fg);--line:#6a7aa0;--line-2:#a3b0cf}
:root[data-theme="light"][data-contrast="high"]{--line:#7d6d4c;--line-2:#4a3f28;--gold-hi:#5e400a;--gold:#6e4d0c}
:root[data-contrast="high"] main a:not(.btn),:root[data-contrast="high"] footer a{text-decoration:underline!important;text-underline-offset:3px}
:root[data-contrast="high"] :focus-visible{outline:3px solid var(--gold-hi)!important;outline-offset:3px!important;box-shadow:0 0 0 6px var(--ink)!important}
/* text size: everything is sized in rem, so scaling the root scales the site */
:root[data-scale="115"]{font-size:115%}
:root[data-scale="130"]{font-size:130%}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font:1rem/1.75 var(--f-body);overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--gold-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-disp);font-weight:700;text-wrap:balance;line-height:1.3;margin:0}
.eyebrow{font:500 0.75rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.gold-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgb(var(--ink-rgb) / .86);border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(10px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font:700 1.1875rem var(--f-brand);letter-spacing:.14em;white-space:nowrap}
.brand svg{width:22px;height:22px}
.brand b{font-weight:700;color:var(--gold-hi)}
.menu{display:flex;gap:24px;margin-left:auto;font-size:0.9062rem}
.menu a{color:var(--muted);text-decoration:none;transition:color .2s;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:var(--fg)}
.menu a[aria-current]{box-shadow:inset 0 -2px 0 var(--gold);padding-bottom:3px}
.tools{display:flex;align-items:center;gap:16px}
.tools .ig-ico{display:inline-flex;color:var(--gold-hi)}
.lang{font:600 0.75rem var(--f-mono);letter-spacing:.08em;color:var(--muted);background:none;border:1px solid var(--line-2);border-radius:4px;padding:6px 9px;cursor:pointer}
.lang:hover{color:var(--fg);border-color:var(--gold)}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;color:var(--muted);background:none;border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font:600 0.8125rem/1 var(--f-body)}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{color:var(--fg);border-color:var(--gold)}
.a11y{position:relative}
.a11y-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:220px;display:grid;gap:10px;padding:14px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 16px 40px rgb(var(--shade) / .35);font-size:0.875rem}
.a11y-panel[hidden]{display:none}
.a11y-panel p{margin:0;color:var(--muted);font-size:0.8125rem}
.a11y-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.a11y-panel button{font:600 0.8125rem var(--f-body);color:var(--fg);background:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:7px 4px;cursor:pointer}
.a11y-panel button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:4px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:4px;font:600 0.9375rem var(--f-body);text-decoration:none;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:var(--grad-gold);color:#1a1205;box-shadow:0 8px 30px rgb(var(--gold-rgb) / .25),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{box-shadow:0 12px 40px rgb(var(--gold-rgb) / .4),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ig{background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);color:#fff}
.btn-line{border-color:var(--line-2);color:var(--fg);background:transparent}
.btn-line:hover{border-color:var(--gold)}
.btn-sm{padding:9px 18px;font-size:0.875rem}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px 32px;color:var(--muted);font-size:0.9062rem}
.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.foot>*{min-width:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main#top{min-height:calc(100vh - var(--nav-h))}
.foot h2,.foot h4{font:500 0.75rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
footer .risk{font-size:0.8438rem;color:var(--dim);border:1px solid var(--line);border-left:3px solid var(--down);border-radius:4px;padding:18px 22px;background:var(--navy);margin-top:40px}
footer .risk strong{color:var(--fg)}
footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:0.8125rem;color:var(--dim)}
footer .tr-links{display:flex;flex-wrap:wrap;gap:6px 18px}
footer .legal a{color:var(--dim);text-decoration:none}
footer .legal a:hover{color:var(--gold-hi)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:60;background:var(--panel);color:var(--fg);border:1px solid var(--gold);border-radius:6px;padding:12px 18px;font-size:0.875rem;box-shadow:0 12px 40px rgb(var(--shade) / .5);transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* phone: Instagram bar replaces the floating chat button */
.ig-bar{display:none}
@media (max-width:960px){
  :root{--nav-h:60px}
  .nav .wrap{flex-wrap:wrap;column-gap:14px}
  .tools{margin-left:auto;gap:14px}
  .menu{order:9;flex:0 0 100%;margin:0;padding:0 0 10px;gap:22px;overflow-x:auto;scrollbar-width:none;font-size:0.875rem}
  .menu::-webkit-scrollbar{display:none}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .ig-bar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);
    color:#fff;font:600 1rem var(--f-body);text-decoration:none;border:0;box-shadow:0 -8px 30px rgb(var(--shade) / .45)}
  .lp a.ig-bar,a.ig-bar{color:#fff}
  .ig-bar svg{width:20px;height:20px;flex:none}
  #intro:not([hidden])~.ig-bar{display:none}
  .ct-fab{display:none!important}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .nav .btn-sm{display:none}
  .tools{gap:8px}
  .tools .ig-ico{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}