:root{color-scheme:light;--ink:#20312d;--muted:#56675f;--forest:#173c34;--gold:#a5742c;--paper:#faf7f0;--line:#ded8c9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans Thai",Tahoma,sans-serif;line-height:1.8}
a{color:#215f50;text-underline-offset:.18em}
a:hover{color:#124737}
a:focus-visible,.table-scroll:focus-visible{outline:3px solid #a96d16;outline-offset:3px}
img{max-width:100%;height:auto}
.shell{width:min(100% - 2.5rem,1100px);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:10;padding:.5rem 1rem;background:#fff}
.skip-link:focus{top:1rem}
.site-header{background:var(--forest);color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.8rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-weight:700;line-height:1.2}
.brand img{border-radius:50%}
.brand small{display:block;font-size:.6rem;letter-spacing:.15em;font-weight:500;opacity:.8}
.site-header nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.site-header nav a{color:#fff;text-decoration:none;font-size:.93rem}
.site-header nav a:hover,.site-header nav a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
main{min-height:55vh;padding-bottom:5rem}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.55rem;color:var(--muted);font-size:.86rem;padding-block:1.5rem}
.breadcrumbs a{color:inherit}
.hub-intro,.article-intro{padding-block:2.3rem 2.6rem;border-bottom:1px solid var(--line)}
.eyebrow{font-size:.77rem;font-weight:700;letter-spacing:.08em;color:#80551d;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.25;letter-spacing:-.02em;margin-bottom:1rem}
h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.4;margin-bottom:.7rem}
.hub-intro>p:last-child,.deck{font-size:1.1rem;color:var(--muted);max-width:70ch}
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.25rem;padding-top:2rem}
.article-card{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.5rem;box-shadow:0 6px 24px rgb(28 48 40 / 4%)}
.article-card h2{font-size:1.35rem}
.article-card h2 a{text-decoration:none}
.article-card h2 a:hover{text-decoration:underline}
.article-card p{color:var(--muted)}
.article-card .eyebrow{color:#80551d}
.card-date{font-size:.82rem;margin-bottom:0}
.empty-state{padding:2.2rem;background:#fff;border:1px solid var(--line);border-radius:1rem;margin-top:2rem}
.article-shell{max-width:900px}
.preview-banner{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:1.2rem;padding:.75rem 1rem;background:#fff1cf;border:2px solid #a66b1c;border-radius:.55rem;color:#4e3311}
.preview-banner strong{font-weight:800}
.preview-banner span{font-size:.9rem}
.article-intro{padding-top:1rem}
.article-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;color:var(--muted);font-size:.85rem}
.direct-answer{margin-block:2rem;padding:1.5rem 1.7rem;background:#eaf1e9;border-left:4px solid #47806a;border-radius:.25rem .8rem .8rem .25rem}
.direct-answer h2{font-size:1.1rem}
.direct-answer p{font-size:1.13rem;margin-bottom:0;font-weight:500}
.source-video{padding-bottom:1.5rem;border-bottom:1px solid var(--line);font-size:.92rem}
.article-toc{max-width:760px;margin:1.4rem 0 2rem;padding:1.1rem 1.4rem;background:#fff;border:1px solid var(--line);border-radius:.8rem}
.article-toc h2{font-size:1.05rem;margin-bottom:.4rem}
.article-toc ol{margin:0;padding-left:1.4rem;columns:2;column-gap:2rem}
.article-toc li{break-inside:avoid;padding:.15rem 0}
.article-toc a{text-decoration:none}
.article-toc a:hover{text-decoration:underline}
.article-body{max-width:760px}
.article-body>section{padding-top:2.4rem}
.article-body p,.article-body li{font-size:1.02rem}
.article-body ol,.article-body ul{padding-left:1.6rem}
.article-body li{padding-bottom:.45rem}
.citations{white-space:nowrap;font-size:.8em}
.citations a{font-weight:700;text-decoration:none}
.block-sources{margin-top:-.1rem}
.data-table{max-width:100%;margin:1.2rem 0}
.table-caption{margin:0 0 .35rem;font-weight:700;line-height:1.5;color:var(--forest);overflow-wrap:anywhere}
.table-scroll-cue{display:none;margin:0 0 .35rem;color:var(--muted);font-size:.82rem;text-align:right}
.table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:.6rem;background:#fff}
.table-scroll table{border-collapse:collapse;width:max-content;min-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.table-scroll th,.table-scroll td{border-top:1px solid var(--line);padding:.8rem 1rem;text-align:left;vertical-align:top;min-width:10rem;max-width:22rem;overflow-wrap:anywhere}
.table-scroll th:first-child,.table-scroll td:first-child{width:3.5rem;min-width:3.5rem;max-width:3.5rem;padding-inline:.55rem}
.table-scroll th:nth-child(2),.table-scroll td:nth-child(2){width:11rem;min-width:11rem;max-width:11rem}
.table-scroll th{background:#eaf1e9;color:var(--forest)}
.table-scroll tbody tr:nth-child(even){background:#fbfaf6}
.video-chapter a{display:inline-block;padding:.55rem .8rem;border:1px solid var(--line);border-radius:.45rem;background:#fff;text-decoration:none}
.references{border-top:1px solid var(--line);margin-top:2rem}
.references ol{overflow-wrap:anywhere}
.related-product,.related-articles{margin-top:2.5rem;padding:1.4rem;border:1px solid var(--line);border-radius:.8rem;background:#fff}
.related-product h2,.related-articles h2{font-size:1.15rem}
.related-product p,.related-articles ul{margin-bottom:0}
.site-footer{background:var(--forest);color:#f4eee1;padding-block:2rem;font-size:.87rem}
.site-footer .shell{display:flex;align-items:start;justify-content:space-between;gap:1rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.site-footer a{color:#f4eee1}
@media(max-width:700px){
  .header-inner{align-items:flex-start;flex-direction:column}
  .site-header nav{gap:.2rem 1rem}
  .shell{width:min(100% - 2rem,1100px)}
  .hub-intro,.article-intro{padding-block:1.6rem 2rem}
  .article-meta{display:grid}
  .direct-answer{padding:1.2rem}
  .article-toc ol{columns:1}
  .table-scroll-cue{display:block}
  .site-footer .shell{display:block}
}

/* Editorial media */
.article-card{padding:0;overflow:hidden}
.article-card-content{padding:1.4rem 1.5rem 1.55rem}
.article-card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#132a27}
.article-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.article-card:hover .article-card-media img{transform:scale(1.025)}
.article-hero{margin:1.8rem 0 2rem}
.article-hero img,.article-figure img{display:block;width:100%;height:auto;background:#132a27}
.article-hero img{border-radius:1.15rem;box-shadow:0 18px 54px rgb(16 38 33 / 16%)}
.article-hero figcaption,.article-figure figcaption{max-width:70ch;margin:.7rem auto 0;color:var(--muted);font-size:.82rem;line-height:1.65;text-align:center}
.article-listen{margin:2rem 0 2.2rem;padding:1.1rem;background:linear-gradient(145deg,#132d29,#0e2125);border:1px solid rgb(222 181 105 / 42%);border-radius:1.15rem;color:#f5f0e5;box-shadow:0 16px 42px rgb(12 31 29 / 14%)}
.listen-heading{padding:.5rem .55rem .85rem}
.listen-heading .eyebrow{color:#e1b968;margin-bottom:.4rem}
.listen-heading h2{max-width:26ch;margin-bottom:.45rem;color:#fff7e8;font-size:clamp(1.3rem,3vw,1.75rem)}
.listen-heading>p:last-child{margin:0;color:#bfcec8}
.video-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid rgb(255 255 255 / 16%);border-radius:.75rem;background:#071310}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.45rem 1rem;margin:.85rem .55rem .15rem;color:#bfcec8;font-size:.84rem}
.video-meta a{color:#f0ca7c;font-weight:700}
.article-figure{margin:2.2rem 0}
.article-figure img{border-radius:.9rem;box-shadow:0 12px 34px rgb(25 45 39 / 13%)}
@media(prefers-reduced-motion:reduce){
  .article-card-media img{transition:none}
}
@media(max-width:700px){
  .article-card-content{padding:1.25rem}
  .article-hero{margin-inline:-.25rem}
  .article-hero img{border-radius:.8rem}
  .article-listen{margin-inline:-.25rem;padding:.75rem}
  .listen-heading{padding:.6rem .4rem .8rem}
  .video-meta{display:grid}
}