[data-ad-slot="native"]:not(:empty) {
            margin: 2rem 0;
            padding-top: 1.25rem;
            border-top: 1px solid var(--c-border, rgba(0, 0, 0, .08))
        }

        [data-ad-slot="native"]:not(:empty)::before {
            content: "Promoted";
            display: block;
            font-size: .62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .14em;
            color: var(--c-text4, #94a3b8);
            margin-bottom: .65rem
        }

        [data-ad-slot="sidebar"]:empty,
        [data-ad-slot="article-mid"]:empty {
            min-height: 0
        }

        [data-ad-slot] img[src=""],
        [data-ad-slot] img:not([src]) {
            display: none
        }

/* ── Header ad slot ───────────────────────────────────────────────────
   One position, two creatives: a 728x90 leaderboard for desktop and a
   320x50 banner for phones. Exactly one is ever visible.

   The two-class selectors below (.x9es-slot-headers.x9es-hdr-desktop) are
   deliberate. The base .x9es-slot-headers rule also sets `display`, so a
   single-class override ties on specificity and source order alone
   decides the winner. A duplicate stylesheet later in the document did
   exactly that: it re-declared display:grid, beat the media query, and
   the viewport split silently died — phones rendered BOTH creatives at
   once. Two classes cannot lose that way wherever the rule lands. */
.x9es-slot-headers{display:grid;place-items:center;width:100%;max-width:1280px;background:transparent;border-radius:.75rem;overflow:hidden;box-sizing:border-box;margin:1rem auto 1.5rem;padding:0 .5rem}
.x9es-slot-headers:empty{display:none}
.x9es-slot-headers .x9es-ad-inner{display:grid;place-items:center;width:100%;max-width:100%;grid-area:1/1}
.x9es-slot-headers .x9es-ad-inner>*{grid-area:1/1}
.x9es-slot-headers img{max-width:100%!important;height:auto!important;width:auto!important;display:block;margin:0 auto}
.x9es-slot-headers a{display:inline-block;max-width:100%;line-height:0}

/* The 728x90 box belongs to the DESKTOP creative only. Forcing it on
   every iframe stretched the 320x50 mobile banner to leaderboard width
   and then scaled it back down — a distorted ad in a slot that had a
   correctly-sized creative available. */
.x9es-hdr-desktop iframe{border:none;width:728px!important;height:90px!important;max-width:none!important}
.x9es-hdr-mobile  iframe{border:none;max-width:100%!important}

/* Desktop by default; the mobile slot only appears under the breakpoint. */
.x9es-slot-headers.x9es-hdr-mobile{display:none}

@media (max-width:767.98px){
  .x9es-slot-headers.x9es-hdr-desktop{display:none}
  .x9es-slot-headers.x9es-hdr-mobile:not(:empty){display:grid}

  /* No mobile creative booked for this domain: rather than drop the
     impression, fall back to the leaderboard scaled to fit. ads.js sets
     the flag and the exact scale, because the ratio the slot needs
     (available width / 728) is arithmetic CSS cannot do on its own.
     The old blanket scale(.5) was 364px wide — still overflowing a
     320px phone and wasting 60px on a 430px one. */
  html.x9es-hdr-nomobile .x9es-slot-headers.x9es-hdr-desktop{display:grid}
  /* …and when it does, the mobile slot stands down. Both slots hold a
     house unit now, so without this the phone would show the scaled
     leaderboard AND the mobile card stacked under it. Three classes and
     an element beat the :not(:empty) rule above on specificity, so it
     wins wherever the duplicated stylesheet puts it. */
  html.x9es-hdr-nomobile .x9es-slot-headers.x9es-hdr-mobile{display:none}
  html.x9es-hdr-nomobile .x9es-hdr-desktop .x9es-ad-inner{
    transform:scale(var(--x9es-hdr-scale,1));
    transform-origin:center center;
  }
}

        /* ── Home card headlines + column split (ported from the dynamic
           build). Fluid clamp() sizing and the 60:40 desktop split live here
           because inline styles cannot carry media queries. */
        .tn-title { font-size: clamp(1.2rem, 0.95rem + 1.25vw, 1.5rem); font-weight: 700; line-height: 1.3; font-family: var(--font-heading); }
        /* The card dek. Defined here as well as in news.html: without it the
           home page's descriptions had no line clamp at all, so one long
           article summary stretched its row and shoved the column out of
           alignment with the grid beside it. */
        .news-dek { color: var(--c-text2); font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); line-height: 1.6; font-family: var(--font-body); margin: 0;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .la-title { font-size: clamp(1rem, 0.92rem + 0.5vw, 1.125rem); font-weight: 700; line-height: 1.35; font-family: var(--font-heading); }
        @media (min-width: 1024px) {
            .tn-col-main { width: 60%; }
            .tn-col-side { width: 40%; }
        }
        #latest-articles article:last-of-type { border-bottom: 0 !important; }
        .news-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text3); }
        .news-meta-dot { width: 4px; height: 4px; border-radius: 9999px; background: var(--c-text4); display: inline-block; }