:root{
  --bg:#fcf9f2; --surface:#f1eee7; --surface-low:#f6f3ec; --line:#d9d5cb;
  --ink:#1c1c18; --ink-2:#41484c; --navy:#002532; --navy-2:#0d3b4c;
  --ocean:#0a6d7d; --gold:#745b1b; --gold-bg:#ffdf99; --red:#a8200d; --red-bg:#ffdad4;
  --font-th:'Sarabun',system-ui,sans-serif; --font-head:'Montserrat','Sarabun',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--font-th);font-size:18px;line-height:1.8;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--ocean);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--ocean);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;z-index:10}
.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 20px}

/* header: mirrors the React Navbar */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(252,249,242,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 3px rgba(0,37,50,.04)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;height:76px}
.brand{display:flex;flex-shrink:0}
.brand img{height:44px;width:44px;object-fit:contain}
.links{display:flex;align-items:center;justify-content:center;gap:32px;flex:1}
.desktop-nav{display:flex;align-items:center}
.site-header a,.dd summary{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap;transition:color .2s}
.site-header a:hover,.dd summary:hover,.dd[open] summary{color:var(--navy)}
.site-header nav a,.dd summary{font-family:Manrope,var(--font-th)}
html[lang="th"] .site-header nav a,html[lang="th"] .dd summary{font-family:var(--font-th)}
.dd{position:relative}
.dd summary,.m-menu summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker,.m-menu summary::-webkit-details-marker{display:none}
.dd summary{display:flex;align-items:center;gap:7px}
.dd[open] svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:196px;background:#fff;border:1px solid #c1c7cc;border-radius:8px;box-shadow:0 12px 32px rgba(0,37,50,.10);padding:6px}
.dd-menu a{display:block;padding:10px 14px;border-radius:4px;color:var(--ink);font-size:15px}
.dd-menu a:hover{background:var(--surface);color:var(--navy)}
.lang{display:flex;border:1px solid #c1c7cc;border-radius:9999px;overflow:hidden;width:fit-content}
.lang a{padding:7px 14px;color:var(--ink-2);font:700 13px Manrope,var(--font-th)}
.lang a[data-lang="th"]{font-family:var(--font-th)}
.lang a:hover{text-decoration:none}
.lang a[aria-current="true"],.lang a[aria-current="true"]:hover{background:var(--navy);color:#fff}
.m-menu{display:none}
.m-menu summary{display:flex;flex-direction:column;gap:5px;padding:8px;width:40px}
.m-menu summary span{display:block;height:2px;background:var(--navy);border-radius:2px}
.m-panel{position:absolute;left:0;right:0;top:76px;background:var(--bg);border-top:1px solid #c1c7cc;padding:16px 20px 24px}
.m-panel .lang{margin-bottom:16px}
.m-panel a,.m-group{display:block;padding:12px 0;font-size:16px;font-weight:600;color:var(--ink-2);border-bottom:1px solid rgba(193,199,204,.33)}
.m-panel .m-sub{padding-left:20px;font-size:15px}
@media (max-width:1024px){.desktop-nav{display:none}.m-menu{display:block}}
@media (max-width:480px){.bar{padding:0 20px}}

/* article */
.article{padding-top:32px;padding-bottom:72px}
.crumbs{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.crumbs a{color:var(--ink-2)}
h1{font-family:var(--font-head);color:var(--navy);font-size:clamp(28px,5vw,40px);line-height:1.35;font-weight:700;letter-spacing:-.01em}
.byline{font-size:15px;color:var(--ink-2);margin:14px 0 28px;line-height:1.6}
h2{font-family:var(--font-head);color:var(--navy);font-size:clamp(23px,3.4vw,28px);line-height:1.4;margin:48px 0 14px;font-weight:700}
h3{font-family:var(--font-head);color:var(--navy-2);font-size:20px;line-height:1.45;margin:28px 0 8px;font-weight:600}
.prose p,.prose li{max-width:68ch}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 20px 1.3em}
.prose li{margin-bottom:6px}
strong{font-weight:700}

.callout-title{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--navy);margin-bottom:8px}
.tldr,.toc,.checklist,.callout{border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:0 0 24px;background:var(--surface-low)}
.tldr{background:var(--gold-bg);border-color:#e4c378}
.tldr ul{margin:0 0 0 1.2em}
.toc ol{margin:0 0 0 1.4em;font-size:16px}
.callout p,.callout ul{margin-bottom:8px}.callout ul{margin-left:1.2em}
.callout-scam{background:var(--red-bg);border-color:#e8a79c}.callout-scam .callout-title{color:var(--red)}
.callout-owner{background:#fff;border:1px dashed var(--outline,#71787c)}
.checklist ul{list-style:none;margin:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.checklist .box{flex:none;width:18px;height:18px;margin-top:7px;border:2px solid var(--navy-2);border-radius:3px;background:#fff}

/* tables */
.tbl{margin:0 0 28px}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.55}
caption{text-align:left;font-weight:700;padding:12px 14px;color:var(--navy)}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{background:var(--surface);border-top:0;font-weight:700;color:var(--navy);white-space:nowrap}
tbody th{font-weight:600}
figcaption{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.fig-title{font-family:var(--font-head);font-weight:700;color:var(--navy);margin-bottom:10px}

/* steps */
.steps{list-style:none;margin:0 0 28px!important;counter-reset:s}
.steps>li{display:flex;gap:16px;margin-bottom:20px!important;max-width:none!important}
.step-n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 16px var(--font-head);margin-top:4px}
.steps h3{margin:0 0 4px}
.step-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;color:var(--ink-2)}
.step-meta dt{display:inline;font-weight:700;color:var(--navy)}.step-meta dt::after{content:': '}.step-meta dd{display:inline}

/* figures */
.chart,.timeline,.ladder{border:1px solid var(--line);border-radius:8px;padding:18px 16px;margin:0 0 28px;background:#fff}
.chart svg{width:100%;height:auto;display:block}
.c-label{font:600 13px var(--font-th);fill:var(--ink)}.c-val{font:700 12px var(--font-head);fill:var(--navy)}.c-bar{fill:var(--ocean)}
.chart details{margin-top:10px;font-size:15px}.chart summary{cursor:pointer;color:var(--ocean);font-weight:600}
.chart details table{margin-top:8px}
.timeline ol,.ladder ol{list-style:none;margin:0!important}
.timeline li{display:grid;grid-template-columns:minmax(110px,30%) 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);max-width:none!important}
.timeline li:first-child{border-top:0}
.ladder li{padding:10px 14px;margin-bottom:6px!important;background:var(--surface-low);border:1px solid var(--line);border-radius:6px;max-width:none!important}
.ladder em{display:block;font-size:14px;color:var(--ink-2);font-style:normal}

/* faq / refs / related */
.faq details{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:8px}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--navy)}
.faq details p{padding:0 16px;margin-bottom:14px}
.related{list-style:none;margin:0!important}
.related li{margin-bottom:12px!important}.related a{font-weight:700}.related span{display:block;font-size:15px;color:var(--ink-2)}
.refs{font-size:15px;line-height:1.6;word-break:break-word}
.disclaimer{font-size:14px;color:var(--ink-2);line-height:1.6;margin-top:28px}

/* index */
.index{padding-top:48px;padding-bottom:80px}.lead{color:var(--ink-2);margin:12px 0 32px}
.cards{list-style:none;display:grid;gap:16px}
.cards a{display:block;padding:20px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;color:var(--ink)}
.cards a:hover{background:var(--surface-low);border-color:var(--navy-2)}
.cards h2{font-size:21px;margin:0 0 6px}.cards p{font-size:16px;color:var(--ink-2);line-height:1.6}.meta{display:block;font-size:13px;color:var(--ink-2);margin-top:8px}

/* blog tabs: Articles / Events (each tab is its own page) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:32px}
.tabs a{padding:10px 18px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--ink-2);text-decoration:none;font:700 16px/1.4 var(--font-head)}
.tabs a:hover{color:var(--navy)}
.tabs a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}

/* events index */
.ev-cards{list-style:none;display:grid;gap:16px}
.ev-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;color:var(--ink)}
.ev-card:hover{background:var(--surface-low);border-color:var(--navy-2)}
.ev-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px}
.ev-when{font:700 14px/1.5 var(--font-head);color:var(--ocean)}
.ev-card h2{font-size:21px;margin:4px 0 8px}
.ev-card p{font-size:16px;color:var(--ink-2);line-height:1.6}
.ev-card .ev-when{color:var(--ocean);font-size:14px}
.ev-card .ev-where{margin-top:8px;font-size:15px;color:var(--navy-2);font-weight:600}
.ev-more{display:inline-block;margin-top:12px;font-weight:700;color:var(--ocean)}
@media (max-width:560px){.ev-card{grid-template-columns:1fr;gap:14px}}

/* event page */
.wrap-wide{max-width:1120px}
.event{padding-top:32px;padding-bottom:72px}
.ev-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "poster" "body";gap:24px}
.ev-head{grid-area:head}.ev-poster{grid-area:poster}.ev-body{grid-area:body}
.ev-poster img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ev-meta time{font-weight:700;color:var(--navy)}
.ev-btn{display:inline-flex;align-items:center;gap:8px;background:#c62828;color:#fff;padding:12px 28px;border-radius:9999px;font-weight:700;font-size:17px;line-height:1.4;text-decoration:none}
.ev-btn:hover{background:#a31f1f;color:#fff}
.ev-text{margin-bottom:24px}
.ev-text p{margin:0 0 16px;max-width:62ch}
.ev-text a{word-break:break-all}
.ev-tags{font-size:15px;color:var(--ocean)}
.ev-back{margin-top:28px;font-size:16px}
@media (min-width:900px){
  .ev-layout{grid-template-columns:minmax(0,460px) minmax(0,1fr);grid-template-areas:"poster head" "poster body";grid-template-rows:auto 1fr;column-gap:48px;row-gap:28px}
  .ev-poster{position:sticky;top:100px;align-self:start}
  .ev-head h1{font-size:clamp(28px,3.2vw,36px)}
}

.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:32px 0;font-size:14px;color:var(--ink-2)}
.site-footer a{color:var(--ink-2)}

@media (max-width:560px){
  body{font-size:17px}.timeline li{grid-template-columns:1fr;gap:2px}
  .step-n{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}