/* ============================================================ News article pages (generated by scripts/build-news.mjs) Both languages ship in the markup so crawlers can read each one; these rules show whichever matches . The site's existing language toggle only sets that attribute, so nothing else is needed. ============================================================ */ .i18n-th, .i18n-en { display: none; } html[lang="th"] .i18n-th { display: revert; } html[lang="en"] .i18n-en { display: revert; } /* before the toggle script runs, English is the document default */ html:not([lang="th"]) .i18n-en { display: revert; } .na { padding-block: clamp(2.5rem, 6vw, 5rem); background: #fff; } .na-wrap { max-width: 780px; } .na-crumb { font-family: 'Raleway', sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7c8bab; margin-bottom: 1.6rem; } .na-crumb a { color: #7c8bab; } .na-crumb a:hover { color: #D4AF37; } .na-cat { font-family: 'Raleway', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #D4AF37; margin-bottom: .9rem; } .na h1 { font-family: 'Raleway', sans-serif; font-weight: 700; color: #0A1D3D; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.18; margin: 0 0 1.1rem; } .na-date { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-family: 'Montserrat', sans-serif; font-size: .85rem; color: #5a6472; padding-bottom: 1.5rem; border-bottom: 1px solid #E4E8EF; margin-bottom: 2rem; } .na-by { color: #7c8bab; } .na-cover { margin: 0 0 2rem; } .na-cover img { width: 100%; height: auto; border-radius: 6px; display: block; } .na-teaser { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: #1A1A1A; padding-left: 1.1rem; border-left: 3px solid #D4AF37; margin: 0 0 2.2rem; } .na-body { font-family: 'Montserrat', sans-serif; font-size: 1rem; line-height: 1.85; color: #1A1A1A; } .na-body p { margin: 0 0 1.35rem; } .na-body h2 { font-family: 'Raleway', sans-serif; font-weight: 700; color: #0A1D3D; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin: 2.4rem 0 1rem; } .na-body h3 { font-family: 'Raleway', sans-serif; font-weight: 700; color: #0A1D3D; font-size: 1.12rem; margin: 2rem 0 .8rem; } .na-body h4 { font-family: 'Raleway', sans-serif; font-weight: 600; color: #0A1D3D; margin: 1.6rem 0 .6rem; } .na-body ul, .na-body ol { margin: 0 0 1.35rem; padding-left: 1.4rem; } .na-body li { margin-bottom: .5rem; } .na-body a { color: #0A1D3D; border-bottom: 1px solid rgba(212,175,55,.6); } .na-body a:hover { color: #D4AF37; } .na-body blockquote { margin: 1.8rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 3px solid #D4AF37; color: #5a6472; font-style: italic; } .na-body figure { margin: 2rem 0; } .na-body figure img { width: 100%; height: auto; border-radius: 6px; display: block; } .na-body code { background: #F7F8FA; padding: .12em .4em; border-radius: 3px; font-size: .92em; } .na-back { display: inline-block; margin-top: 2.8rem; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #0A1D3D; border-bottom: 1px solid rgba(212,175,55,.6); padding-bottom: .2rem; } .na-back:hover { color: #D4AF37; } html[lang="th"] .na h1, html[lang="th"] .na-body h2, html[lang="th"] .na-body h3, html[lang="th"] .na-body h4 { font-family: 'Noto Sans Thai', 'Raleway', sans-serif; } html[lang="th"] .na-body, html[lang="th"] .na-teaser { font-family: 'Noto Sans Thai', 'Montserrat', sans-serif; } html[lang="th"] .na-cat, html[lang="th"] .na-crumb, html[lang="th"] .na-back { letter-spacing: .02em; text-transform: none; font-size: .86rem; }