:root {
    --brand: #ef2b2d;
    --brand-deep: #b7151f;
    --brand-soft: #fff1f2;
    --brand-wash: #f6f7f9;
    --ink: #14151a;
    --muted: #70727c;
    --line: #e5e7ec;
    --nav: #15161b;
    --footer: #111217;
    --white: #ffffff;
    --shadow: 0 18px 44px rgba(20, 21, 26, 0.08);
    --radius-xl: 8px;
    --radius-lg: 6px;
    --radius-md: 4px;
    --page-width: 1240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Sarabun", sans-serif;
    color: var(--ink);
    background: var(--brand-wash);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

.top-ribbon {
    background: var(--brand);
    color: #fff;
    font-size: 13px;
}

.top-ribbon__inner,
.site-header__inner,
.site-nav__inner,
.page-shell,
.site-footer__inner {
    width: min(calc(100% - 40px), var(--page-width));
    margin: 0 auto;
}

.top-ribbon__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 34px;
}

.top-ribbon__label {
    font-weight: 400;
}

.top-ribbon__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header {
    background: linear-gradient(180deg, #ededed 0%, #ffffff 22%, #ffffff 100%);
    border-bottom: 1px solid #e5e5e5;
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(240px, 0.9fr) auto;
    align-items: center;
    gap: 26px;
    padding: 12px 0;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.site-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    flex: 0 0 auto;
}

.site-brand__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.site-brand__copy {
    min-width: 0;
}

.site-brand__copy strong {
    display: block;
    font-family: "Kanit", sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.72rem);
    font-weight: 400;
    line-height: 1.18;
    color: #383838;
}

.site-brand__copy small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.9rem;
}

.site-header__tools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.site-header__ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border: 1px solid #2e2e2e;
    background: #2c2c2c;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.site-header__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 0;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-weight: 400;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
}

.site-header__pill:hover,
.site-header__pill--live {
    color: var(--brand-deep);
    border-color: rgba(80, 174, 100, 0.38);
}

.site-header__pill:hover {
    background: #fafafa;
}

.site-header__dot {
    width: 8px;
    height: 8px;
    background: #dc3545;
    display: inline-block;
}

.site-header__social,
.site-footer__social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 18px;
}

.site-header__social span,
.site-footer__social span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.site-nav {
    background: var(--nav);
    color: #f5f5f5;
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
}

.site-nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    font-weight: 400;
    white-space: nowrap;
    font-size: 14px;
}

.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--brand);
}

.site-nav__search {
    display: flex;
    align-items: center;
    flex: 0 0 320px;
    max-width: 320px;
}

.site-nav__search input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #303030;
    background: #2a2a2a;
    color: #fff;
    outline: none;
}

.site-nav__search input::placeholder {
    color: #9b9b9b;
}

.site-nav__search button {
    width: 42px;
    height: 34px;
    border: 0;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}

.page-shell {
    padding: 18px 0 56px;
}

.breadcrumb-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 0.92rem;
}

.breadcrumb-row a:hover {
    color: var(--brand-deep);
}

.article-layout {
    display: grid;
}

.reader-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.82fr);
    gap: 24px;
    align-items: start;
}

.reader-main,
.reader-sidebar {
    min-width: 0;
}

.story-header,
.story-block,
.author-card,
.sidebar-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.story-header,
.story-block,
.sidebar-card {
    padding: 28px;
}

.story-header__top,
.story-meta,
.share-panel,
.share-panel__actions,
.tag-row,
.story-block__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.story-header {
    margin-bottom: 20px;
    border-top: 3px solid var(--brand);
    background: var(--white);
}

.story-header__top {
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.story-category {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 0;
    background: var(--brand);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 400;
}

.story-headline-note {
    color: var(--brand-deep);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.story-title,
.story-block__head h2,
.sidebar-card h2,
.author-card h2 {
    margin: 0;
    font-family: "Kanit", sans-serif;
    line-height: 1.16;
    color: #181f18;
}

.story-title {
    margin-top: 16px;
    font-size: clamp(1.1rem, 3.5vw, 1.85rem);
    font-weight: 400;
}

.story-summary {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.78;
}

.story-meta {
    margin-top: 18px;
    align-items: center;
    gap: 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    color: var(--muted);
}

.meta-item .bi {
    font-size: 0.82rem;
    opacity: 0.7;
}

.meta-sep {
    display: inline-block;
    margin: 0 10px;
    color: var(--line);
    font-size: 0.8rem;
    user-select: none;
}

.story-meta--subtle {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

.meta-pill,
.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    min-height: 38px;
}

.meta-pill {
    padding: 0 14px;
    border: 1px solid var(--line);
    background: #fafafa;
    color: var(--ink);
    font-size: 0.93rem;
    font-weight: 400;
}

.share-panel {
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.share-panel__label {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 400;
}

.share-panel__actions {
    align-items: center;
}

.share-button {
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    color: #fff;
    font-family: inherit;
    letter-spacing: 0.2px;
    text-decoration: none;
}

.share-button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #fff;
}

.share-button:active {
    transform: none;
    opacity: 1;
}

.share-button i {
    font-size: 1.1rem;
    line-height: 1;
}

.share-button--facebook {
    background: #1877f2;
}

.share-button--x {
    background: #111111;
}

.share-button--line {
    background: #00b900;
}

.share-button--copy {
    background: #6c757d;
    color: #fff;
}

.share-button--copy.copied {
    background: #198754;
}

.story-hero {
    margin: 0 0 20px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.story-hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.story-hero figcaption {
    padding: 14px 18px 18px;
    color: var(--muted);
    font-size: 0.9rem;
}

.story-hero__placeholder {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    color: #fff;
    background: linear-gradient(135deg, #14151a 0%, #2a1518 55%, #b7151f 100%);
}

.story-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0 12px;
    min-height: 32px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.9rem;
    font-weight: 400;
}

.story-hero__title {
    margin: 14px 0 0;
    font-family: "Kanit", sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.08;
}

.story-block {
    margin-bottom: 0px;
}

.story-block--body {
    padding-bottom: 24px;
}

.story-block__head {
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.story-block__eyebrow,
.author-card__eyebrow {
    margin: 0;
    color: var(--brand-deep);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-left: 10px;
    border-left: 4px solid var(--brand);
}

.article-body {
    color: #273128;
    font-size: 1.05rem;
    line-height: 1.92;
}

.article-body > :first-child {
    margin-top: 0;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body iframe,
.article-body figure {
    margin: 0 0 1.35rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin: 1.9rem 0 0.9rem;
    font-family: "Kanit", sans-serif;
    line-height: 1.24;
}

.article-body a {
    color: var(--brand-deep);
    text-decoration: underline;
}

.article-body blockquote {
    padding: 20px 22px;
    border-left: 4px solid var(--brand);
    border-radius: 0;
    background: #fafafa;
}

.article-body img,
.article-body video {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
}

.article-body img {
    display: block;
    margin: 0 auto 15px;
    border-radius: 4px;
}

/* object-fit + border-radius on <img> fails to clip in some browsers
   when a max-height cap is also in play (confirmed via devtools on a live
   standalone image) - clip on the wrapping <p> instead, which is reliable
   regardless of the img's own object-fit/sizing quirks. */
.article-body p:has(> img:only-child) {
    overflow: hidden;
    border-radius: 4px;
}

/* Article body content (from TinyMCE) carries inline
   style="max-width:NNNpx; width:auto; ..." on <img> tags, and NNN varies
   per image (720, 1080, whatever the editor happened to save) — inline
   styles beat this stylesheet, so whenever that cap is wider than the
   actual column, the image overflows it. Force it to never exceed its
   container at any screen size, regardless of the inline cap's value.
   Width itself is capped below 100% (rather than filling the column) so
   oversized photos don't dominate the article on wide screens; mobile
   gets a wider share since there's much less room to spare there. */
.article-body img {
    max-width: 555px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
}

.article-body video {
    max-width: 100% !important;
    width: 64% !important;
    height: auto !important;
}

@media (max-width: 680px) {
    .article-body img {
        width: 95% !important;
        max-width: 95% !important;
    }

    .article-body video {
        width: 95% !important;
    }
}

/* "Image grid" body layout (multi-photo grid inserted from the article
   editor). These rules only ever existed in the editor's own preview
   iframe — never shipped to this public stylesheet — so the grid had no
   styling here beyond whatever the editor inlined onto each element, and
   in particular no mobile collapse at all. Ported from
   edit_article.php's articleImageGridContentStyle for parity. */
.article-body .article-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 1rem 0;
}

.article-body .article-image-grid__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    overflow: hidden;
    text-align: center;
}

.article-body .article-image-grid__slot--wide {
    grid-column: 1 / -1;
    min-height: 240px;
}

.article-body .article-image-grid__slot--hero-left,
.article-body .article-image-grid__slot--hero-right,
.article-body .article-image-grid__slot--feature {
    min-height: 372px;
}

.article-body .article-image-grid__slot--filled {
    border: 0;
}

.article-body .article-image-grid__placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    font-size: .9rem;
    font-weight: 400;
}

/* Overrides the generic ".article-body img { height:auto !important }"
   above — grid-slot photos are meant to fill their tile and crop via
   object-fit, not shrink to their own aspect ratio. */
.article-body .article-image-grid__slot img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-height: inherit;
    margin: 0;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .article-body .article-image-grid {
        grid-template-columns: 1fr !important;
    }

    .article-body .article-image-grid__slot,
    .article-body .article-image-grid__slot--wide,
    .article-body .article-image-grid__slot--hero-left,
    .article-body .article-image-grid__slot--hero-right,
    .article-body .article-image-grid__slot--feature {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 220px !important;
    }
}

.article-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 0;
}

/* Overrides the generic .article-body iframe rule above (which assumes 16:9) for
   vertical YouTube Shorts embeds inserted from the article editor's embedsocial
   button, which are authored at width=315 height=560 (9:16). Attribute selector
   also matches embeds already published before the .yt-shorts-embed class existed. */
.article-body iframe.yt-shorts-embed,
.article-body iframe[width="315"][height="560"] {
    width: 315px;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    margin: 0 auto;
}

.article-body audio {
    width: 100%;
}

.article-body img.lightbox-trigger {
    cursor: zoom-in;
}

.lightbox-modal .modal-dialog {
    max-width: min(96vw, 1100px);
}

.lightbox-modal .modal-content {
    background: transparent;
    border: 0;
}

.lightbox-modal .modal-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lightbox-image {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: -44px;
    right: 0;
    z-index: 2;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.3rem;
    z-index: 2;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.65);
}

.lightbox-nav--prev {
    left: 8px;
}

.lightbox-nav--next {
    right: 8px;
}

.lightbox-counter {
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 10px 0 0;
}

@media (max-width: 680px) {
    .lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

.tag-row {
    margin-top: 22px;
    gap: 8px;
}

/* Prevent AdSense Auto Ads from injecting extra units into the article column.
   This keeps the main reading area free of automatic placements. */
.reader-main .google-auto-placed {
  display: none !important;
}

.tag {
    padding: 4px 12px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand-deep);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    min-height: auto;
}

.tag:hover {
    background: var(--brand);
    color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.gallery-photo,
.related-card,
.attachment-item {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #ffffff;
}

.gallery-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gallery-photo figcaption {
    padding: 12px 14px 16px;
    color: var(--muted);
    font-size: 0.92rem;
}

.attachment-list {
    display: grid;
    gap: 12px;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.attachment-item strong {
    display: block;
    margin-bottom: 4px;
}

.attachment-item span {
    color: var(--muted);
    font-size: 0.92rem;
}

.author-card {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px 28px;
    margin-bottom: 20px;
    border-top: 3px solid var(--brand);
}

.author-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 0;
    background: var(--brand);
    color: #fff;
    font-family: "Kanit", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
}

.author-card__body h2 {
    margin-top: 6px;
    font-size: 1.55rem;
}

.author-card__body p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.75;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.related-card {
    display: grid;
    color: var(--ink);
    transition: border-color 180ms ease, background 180ms ease;
}

.related-card:hover,
.related-card__media,
.related-card__fallback {
    width: 100%;
}

.related-card__media img,
.related-card__fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.related-card__fallback,
.sidebar-story__thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #15161b, #b7151f);
    color: #fff;
    font-family: "Kanit", sans-serif;
}

.related-card__body {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.related-card__body strong {
    font-size: 1.05rem;
    line-height: 1.5;
}

.related-card__body span:last-child {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.related-card__kicker {
    color: var(--brand-deep);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.taboola-widget {
    margin-top: 24px;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.thumbnails-31x-SC .syndicatedItem .video-title {
    max-height: 72.0px;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18.0px;
    line-height: 24.0px;
    font-weight: 400;
    text-decoration: none;
    padding: 0;
}

.reader-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.sidebar-card {
    padding: 0;
}

.sidebar-card__header {
    background: var(--brand);
    color: #fff;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 400;
}

.sidebar-card__body {
    padding: 14px;
}

.sidebar-card__lead,
.sidebar-card p {
    color: var(--muted);
    line-height: 1.78;
}

.sidebar-story-list {
    display: flex;
    flex-direction: column;
}

.sidebar-story {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    transition: background 150ms ease;
}

.sidebar-story:last-child {
    border-bottom: none;
}

.sidebar-story:hover {
    background: transparent;
}

.sidebar-story__thumb img,
.sidebar-story__thumb-fallback {
    width: 88px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.sidebar-story__thumb-fallback {
    background: var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--muted);
}

.sidebar-story__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
}

.sidebar-story__body strong {
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.48;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-story:hover .sidebar-story__body strong {
    color: var(--brand-deep);
}

.sidebar-story__body span {
    color: var(--muted);
    font-size: 0.78rem;
}

.sidebar-search {
    display: flex;
    align-items: center;
}

.sidebar-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--line);
    border-right: 0;
    padding: 0 12px;
    outline: none;
    background: #fff;
}

.sidebar-search button {
    width: 46px;
    height: 40px;
    border: 0;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}

.sidebar-card--accent {
    border: 1px solid var(--line);
    border-radius: 0px;
    overflow: hidden;
}

.sidebar-card__body--tags {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.sidebar-tag-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1.5px solid var(--brand);
    background: transparent;
    color: var(--brand-deep);
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.sidebar-cta:hover {
    background: var(--brand);
    color: #fff;
}

.site-footer {
    margin-top: 40px;
    background: var(--footer);
    color: rgba(255, 255, 255, 0.84);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.7fr)) minmax(220px, 0.9fr);
    gap: 28px;
    padding: 38px 0 42px;
}

.site-footer__inner h2 {
    margin: 0 0 10px;
    color: #fff;
    font-family: "Kanit", sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
}

.site-footer__inner p {
    margin: 0;
    line-height: 1.75;
}

.site-footer__links {
    display: grid;
    gap: 8px;
    align-content: start;
}

.site-footer__links h3,
.site-footer__subscribe h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}

.site-footer__links a:hover {
    color: #fff;
}

.site-footer__brand {
    display: grid;
    gap: 12px;
}

.site-footer__subscribe {
    display: grid;
    gap: 12px;
    align-content: start;
}

.site-footer__subscribe-row {
    display: grid;
    gap: 10px;
}

.site-footer__subscribe-row input {
    height: 40px;
    border: 1px solid #303030;
    background: #1f1f1f;
    color: #fff;
    padding: 0 12px;
    outline: none;
}

.site-footer__subscribe-row button {
    height: 40px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 400;
    cursor: pointer;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 20px 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.empty-state {
    padding: 40px 28px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.empty-state h3 {
    margin: 0 0 12px;
    font-family: "Kanit", sans-serif;
    font-size: 2rem;
    font-weight: 400;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

@media (max-width: 1120px) {
    .site-header__inner,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .reader-grid {
        grid-template-columns: 1fr;
    }

    .reader-sidebar {
        position: static;
    }

    .site-header__tools {
        align-items: flex-start;
    }

    .site-nav__search {
        flex: 0 0 240px;
        max-width: 240px;
    }
}

@media (max-width: 880px) {
    .gallery-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .story-header__top,
    .share-panel,
    .site-footer__inner {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .story-header__top,
    .share-panel {
        display: flex;
    }

    .site-nav__inner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 0;
    }

    .site-nav__search {
        flex: none;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .top-ribbon__inner,
    .site-header__inner,
    .site-nav__inner,
    .page-shell,
    .site-footer__inner {
        width: min(calc(100% - 24px), var(--page-width));
    }

    .site-nav__inner {
        gap: 12px;
    }

    .story-header,
    .story-block,
    .author-card {
        padding: 20px;
        border-radius: 0;
    }


    .author-card,
    .sidebar-story {
        grid-template-columns: 1fr;
    }

    .site-brand__logo {
        width: 62px;
    }

    .site-header__tools {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .sidebar-card__body {
        padding: 12px;
    }

    .site-header__ad {
        min-height: 48px;
    }
}

/* POPLIFE article polish: red/black news tone, stronger hierarchy, cleaner media. */
.breadcrumb-row {
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 400;
}

.reader-grid {
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.78fr);
    gap: 28px;
}

.story-header,
.story-block,
.author-card,
.sidebar-card,
.story-hero,
.empty-state {
    border-color: var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.story-header {
    padding: clamp(22px, 3vw, 36px);
    border-top: 5px solid var(--brand);
}

.story-category,
.sidebar-card__header,
.sidebar-search button,
.site-footer__subscribe-row button {
    background: var(--brand);
}

.story-category {
    min-height: 30px;
    padding: 0 13px;
    font-family: "Kanit", sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.story-title {
    max-width: 980px;
    margin-top: 18px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 400;
    line-height: 1.13;
}

.story-summary {
    max-width: 850px;
    color: #555862;
    font-size: 1.08rem;
    line-height: 1.82;
}

.story-meta {
    font-size: 0.92rem;
}

.story-hero {
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.story-hero img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.story-hero figcaption {
    background: #fff;
    font-size: 0.88rem;
}

.story-hero__placeholder {
    min-height: 420px;
    background: linear-gradient(135deg, #14151a 0%, #2a1518 55%, #b7151f 100%);
}

.story-block {
    padding: clamp(22px, 3vw, 34px);
}

.story-block__head h2,
.sidebar-card h2,
.author-card h2 {
    color: var(--ink);
    font-weight: 400;
}

.article-body {
    color: #252832;
    font-size: 1.08rem;
    line-height: 1.95;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--ink);
    font-weight: 400;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body iframe,
.article-body figure {
    margin-bottom: 1.45rem;
}

.article-body blockquote {
    border-left-color: var(--brand);
    background: var(--brand-soft);
    color: #333640;
}

.article-body a {
    color: var(--brand-deep);
    font-weight: 400;
    text-underline-offset: 3px;
}

.article-body img {
    max-width: min(100%, 720px) !important;
    border-radius: var(--radius-md);
}

.article-body p:has(> img:only-child) {
    border-radius: var(--radius-md);
}

.article-body video {
    width: min(100%, 760px) !important;
    margin: 0 auto 1.45rem;
}

.share-panel {
    margin-top: 26px;
}

.share-button,
.sidebar-cta {
    border-radius: var(--radius-md);
}

.tag {
    border-color: rgba(239, 43, 45, 0.42);
    color: var(--brand-deep);
    font-weight: 400;
}

.related-grid {
    gap: 18px;
}

.related-card {
    border-radius: var(--radius-lg);
    background: #fff;
}

.related-card:hover {
    border-color: rgba(239, 43, 45, 0.45);
}

.related-card__body strong {
    color: var(--ink);
    font-family: "Kanit", sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
}

.related-card__fallback,
.sidebar-story__thumb-fallback {
    background: linear-gradient(135deg, #15161b, #b7151f);
}

.reader-sidebar {
    gap: 20px;
    top: 22px;
}

.sidebar-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sidebar-card__header {
    padding: 12px 16px;
    font-family: "Kanit", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.sidebar-story {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 13px;
    padding: 14px 16px;
}

.sidebar-story__thumb img,
.sidebar-story__thumb-fallback {
    width: 96px;
    border-radius: var(--radius-md);
}

.sidebar-story__body strong {
    color: var(--ink);
    font-family: "Kanit", sans-serif;
    font-size: 0.94rem;
    font-weight: 400;
}

.sidebar-story:hover {
    background: #fafafa;
}

.sidebar-story:hover .sidebar-story__body strong,
.breadcrumb-row a:hover {
    color: var(--brand-deep);
}

.site-footer {
    background: var(--footer);
}

@media (max-width: 680px) {
    .story-title {
        font-size: 1.72rem;
    }

    .story-summary,
    .article-body {
        font-size: 1rem;
    }

    .story-header,
    .story-block,
    .author-card {
        padding: 20px;
        border-radius: var(--radius-lg);
    }

    .sidebar-story {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .share-panel__actions {
        width: 100%;
    }

    .share-button {
        flex: 1 1 130px;
    }
}

.in-article-ad {
    width: 100%;
    margin: 28px 0;
    overflow: hidden;
}

.in-article-ad__label {
    margin-bottom: 8px;
    color: #757575;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* The article polish block above re-declares a two-column .reader-grid after
   the 1120px breakpoint, so restore the single-column layout for tablets/phones. */
@media (max-width: 1120px) {
    .reader-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}