@import url('../fonts/noto-sans-lao/font.css');
:root{--pmx-gold:var(--pmx-brand-gold);--pmx-blue:var(--pmx-brand-blue);--pmx-dark:var(--pmx-brand-navy);--pmx-gray:var(--pmx-brand-muted);--pmx-light:var(--pmx-brand-blue-soft);--pmx-border:var(--pmx-brand-border);--pmx-purple:var(--pmx-brand-blue)}
body{font-family:'Noto Sans Lao',sans-serif;background-color:#fbfdff;background-image:linear-gradient(#123c6909 1px,transparent 1px),linear-gradient(90deg,#123c6909 1px,transparent 1px),radial-gradient(ellipse at 10% 15%,#159cda12,transparent 50%),radial-gradient(ellipse at 90% 5%,#f7c8441c,transparent 45%);background-size:50px 50px,50px 50px,100% 100%,100% 100%}
.navbar{border-top:3px solid var(--pmx-gold);background:#ffffffed;backdrop-filter:blur(14px);box-shadow:none}
.nav-logo-text{font-family:'Noto Sans Lao',sans-serif;color:var(--pmx-blue);font-size:22px}
.nav-logo-icon{background:none;border-radius:0;object-fit:contain;width:44px;height:44px;box-shadow:none}
.nav-inner{min-height:78px;height:auto;padding-top:12px;padding-bottom:12px;gap:16px}
.nav-links a{font-size:14px;color:var(--pmx-dark)}
.page-hero,.article-hero,.post-card-thumb,.cta-box,.related-thumb{background:var(--pmx-blue)}
.page-hero{border-bottom:4px solid var(--pmx-gold)}
.post-card,.article-card,.sidebar-card{border-color:var(--pmx-border);box-shadow:none}
.post-card:hover{box-shadow:0 8px 22px #123c6910;border-color:var(--pmx-blue)}
.post-card img,.article-card img,.related-card img{box-shadow:none;filter:none}
.author-avatar{background:var(--pmx-brand-gold-soft);color:var(--pmx-dark)}
.fab-search,.back-top{background:var(--pmx-blue);color:#fff}
.fab-search:hover,.back-top:hover{background:var(--pmx-dark)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pmx-gold);outline-offset:3px}
@media(max-width:480px){.nav-inner{padding:12px 16px;gap:8px}.nav-logo-text{font-size:18px}.nav-links{gap:0}.nav-links a{padding:6px 8px;font-size:12px}.nav-logo{gap:8px}.nav-logo-icon{width:36px;height:36px}}

/* Give article text and list markers room at every screen size. */
.article-card{min-width:0}
.article-body{padding:36px clamp(24px,4vw,44px) 40px}
.article-content{overflow-wrap:anywhere}
.article-content ul,.article-content ol{padding-inline-start:1.65em;margin:16px 0 24px}
.article-content li{padding-inline-start:.3em;margin:8px 0}
.article-content li>ul,.article-content li>ol{margin:8px 0 12px}
.article-content h2,.article-content h3,.article-content h4{margin:28px 0 14px;line-height:1.65}
.article-content img,.article-content video{max-width:100%;height:auto}
@media(max-width:600px){.main-wrapper{padding:0 16px;margin:20px auto;gap:20px}.article-body{padding:28px 26px 32px}.article-content{font-size:16px;line-height:2}.article-title{line-height:1.6}.related-section{padding-left:26px;padding-right:26px}}