:root{--bg:#090a0c;--panel:#12141a;--panel2:#171a20;--text:#f7f3e8;--muted:#bbb7ad;--gold:#e4b83f;--gold2:#f6dc7f;--line:#302d26;--green:#67cf8e;--max:1160px;--reading:780px;--radius:8px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;font-size:16px;line-height:1.8}img{display:block;max-width:100%}a{color:var(--gold2)}button{font:inherit}.container{width:min(var(--max),calc(100% - 32px));margin:auto}.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;color:#000;padding:8px 12px}.skip:focus{top:12px}.agebar{background:#19150b;color:var(--gold2);text-align:center;padding:7px 16px;font-size:.85rem;border-bottom:1px solid #55451e}.header{position:sticky;top:0;z-index:50;background:rgba(9,10,12,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{height:70px;display:flex;align-items:center;gap:24px}.brand{margin-right:auto}.brand img{width:196px;height:auto}.links{display:flex;gap:22px;align-items:center}.links a{text-decoration:none;color:#d8d4ca;font-size:.94rem}.links a:hover{color:var(--gold2)}.actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--gold);border-radius:6px;text-decoration:none;font-weight:700}.btn-primary{background:var(--gold);color:#111}.btn-ghost{color:var(--gold2)}.menu{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:6px;background:transparent;color:#fff;font-size:1.2rem}.blog-hero{padding:72px 0 58px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 10%,rgba(228,184,63,.14),transparent 35%)}.eyebrow{color:var(--gold2);font-size:.86rem;font-weight:700;margin:0 0 12px}.blog-hero h1,.article-head h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.3;margin:0 0 18px;max-width:980px}.blog-hero p{max-width:760px;color:var(--muted);font-size:1.08rem;margin:0}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:52px 0 78px}.post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 14px 36px rgba(0,0,0,.16)}.post-card:hover{transform:translateY(-4px);border-color:#816a34;box-shadow:0 18px 44px rgba(0,0,0,.3)}.post-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#060708;border-bottom:1px solid var(--line)}.post-card:first-child{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)}.post-card:first-child img{height:100%;aspect-ratio:auto;object-fit:contain;border-bottom:0;border-right:1px solid var(--line)}.post-card:first-child .post-copy{justify-content:center;padding:34px}.post-card:first-child .post-copy h2{font-size:1.55rem}.post-copy{padding:22px;display:flex;flex:1;flex-direction:column}.post-copy h2{font-size:1.15rem;line-height:1.5;margin:0 0 10px}.post-copy p{color:var(--muted);margin:0 0 18px;font-size:.93rem}.read{margin-top:auto;color:var(--gold2);font-weight:700}.article-head{padding:46px 0 34px}.crumbs{font-size:.9rem;color:#aaa69d;margin-bottom:24px}.crumbs a{color:#ccc7bc;text-decoration:none}.article-meta{color:#a9a59b;font-size:.9rem}.article-layout{display:grid;grid-template-columns:minmax(0,var(--reading)) 270px;gap:48px;align-items:start;padding-bottom:76px}.article-main{min-width:0}.cover{display:block;width:min(100%,680px);height:auto;aspect-ratio:1/1;object-fit:contain;background:#050607;border:1px solid #68572d;border-radius:var(--radius);padding:8px;margin:0 auto 42px;box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 0 1px rgba(228,184,63,.08)}.article-body{font-size:1.06rem}.article-body h2{font-size:1.7rem;line-height:1.45;margin:44px 0 12px;color:#fff}.article-body h3{font-size:1.3rem;margin:30px 0 8px}.article-body p{color:#d0ccc2;margin:0 0 20px}.article-body a{font-weight:700}.article-body ul,.article-body ol{color:#d0ccc2;padding-left:24px}.sidebar{position:sticky;top:100px}.sidebox{background:var(--panel);border:1px solid var(--line);padding:22px;border-radius:var(--radius);margin-bottom:14px}.sidebox h2{font-size:1.08rem;margin:0 0 12px;color:var(--gold2)}.sidebox a{display:block;color:#d1cdc3;text-decoration:none;padding:7px 0;border-bottom:1px solid #292a2d}.sidebox a:last-child{border-bottom:0}.responsible{border-left:4px solid var(--gold);background:#17181b;padding:24px;margin-top:42px}.responsible strong{color:var(--gold2)}.related{border-top:1px solid var(--line);padding:54px 0}.related h2{font-size:1.6rem;margin:0 0 22px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.related a{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;color:#eee9df;font-weight:700}.related a:hover{border-color:#67542a}.footer{border-top:1px solid var(--line);padding:48px 0 96px;background:#07080a}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:42px}.footer img{width:185px}.footer p{color:#9f9b92}.footer h2{font-size:1.05rem;color:var(--gold2)}.footer a{display:block;color:#bbb7ae;text-decoration:none;margin:7px 0}.copy{border-top:1px solid var(--line);padding-top:18px;margin-top:30px;color:#86837b;font-size:.84rem}.mobile-bar{display:none}
@media(max-width:920px){.links{display:none;position:absolute;left:0;right:0;top:70px;background:#0d0f12;border-bottom:1px solid var(--line);padding:18px 24px;flex-direction:column;align-items:flex-start}.links.open{display:flex}.menu{display:block}.actions .btn-ghost{display:none}.blog-grid{grid-template-columns:repeat(2,1fr)}.post-card:first-child{grid-column:span 2}.article-layout{grid-template-columns:1fr}.sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.container{width:min(100% - 24px,var(--max))}.nav{height:62px}.brand img{width:154px}.links{top:62px}.actions{display:none}.blog-hero{padding:48px 0 38px}.blog-grid{grid-template-columns:1fr;padding:34px 0 62px}.post-card:first-child{grid-column:auto;display:flex}.post-card:first-child img{height:auto;aspect-ratio:1/1;border-right:0;border-bottom:1px solid var(--line)}.post-card:first-child .post-copy{padding:22px}.post-card:first-child .post-copy h2{font-size:1.2rem}.article-head{padding:34px 0 24px}.article-head h1{font-size:2rem}.article-layout{gap:30px}.cover{width:100%;padding:5px;margin-bottom:30px}.article-body h2{font-size:1.45rem}.sidebar,.related-grid,.footer-grid{grid-template-columns:1fr}.footer{padding-bottom:100px}.mobile-bar{display:grid;position:fixed;z-index:60;left:0;right:0;bottom:0;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:#090a0c;border-top:1px solid #40371f}.mobile-bar .btn{padding:0 8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.post-card{transition:none}}
/* Stable image layout for the blog index and every article. */
.blog-grid{align-items:start}
.post-card,.post-card:first-child{grid-column:auto;display:flex;min-width:0;flex-direction:column;align-self:start}
.post-card img,.post-card:first-child img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1/1;object-fit:contain;background:#050607;border-right:0;border-bottom:1px solid var(--line)}
.post-card:first-child .post-copy{justify-content:flex-start;padding:22px}
.post-card:first-child .post-copy h2{font-size:1.15rem}
.article-layout{align-items:start}
.article-main{min-width:0}
.cover{display:block;box-sizing:border-box;width:min(100%,680px);height:auto;min-height:0;max-height:none;aspect-ratio:1/1;object-fit:contain;margin:0 auto 42px}
@media(max-width:920px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.post-card:first-child{grid-column:auto}.cover{width:min(100%,640px)}}
@media(max-width:620px){.blog-grid{grid-template-columns:minmax(0,1fr)}.post-card,.post-card:first-child{width:100%}.post-card img,.post-card:first-child img{height:auto;aspect-ratio:1/1}.cover{width:100%;height:auto;margin-bottom:30px}}