[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 (.xbgu-slot-headers.xbgu-hdr-desktop) are
   deliberate. The base .xbgu-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. */
.xbgu-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}
.xbgu-slot-headers:empty{display:none}
.xbgu-slot-headers .xbgu-ad-inner{display:grid;place-items:center;width:100%;max-width:100%;grid-area:1/1}
.xbgu-slot-headers .xbgu-ad-inner>*{grid-area:1/1}
.xbgu-slot-headers img{max-width:100%!important;height:auto!important;width:auto!important;display:block;margin:0 auto}
.xbgu-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. */
.xbgu-hdr-desktop iframe{border:none;width:728px!important;height:90px!important;max-width:none!important}
.xbgu-hdr-mobile  iframe{border:none;max-width:100%!important}

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

@media (max-width:767.98px){
  .xbgu-slot-headers.xbgu-hdr-desktop{display:none}
  .xbgu-slot-headers.xbgu-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.xbgu-hdr-nomobile .xbgu-slot-headers.xbgu-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.xbgu-hdr-nomobile .xbgu-slot-headers.xbgu-hdr-mobile{display:none}
  html.xbgu-hdr-nomobile .xbgu-hdr-desktop .xbgu-ad-inner{
    transform:scale(var(--xbgu-hdr-scale,1));
    transform-origin:center center;
  }
}

        /* ── Editorial list rows (ported from the dynamic build) ──────────
           Class-driven rather than inline-styled: the previous static cards
           carried their layout in style="" attributes, which cannot express
           media queries, so the list could not respond to viewport at all.
           These are the same rules the dynamic sites use. */
        .news-row { display: flex; gap: 1.75rem; padding: 1.75rem 0; border-bottom: 1px solid var(--c-border); }
        .news-row:first-child { padding-top: 0.5rem; }
        .news-thumb { flex: 0 0 16rem; display: block; }
        .news-thumb-inner { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 0.75rem; overflow: hidden; background-color: var(--c-bg3); }
        .news-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
        .news-title { font-size: clamp(1.05rem, 0.82rem + 1.25vw, 1.45rem); font-weight: 700; line-height: 1.3; font-family: var(--font-heading); color: var(--c-text); margin: 0 0 0.5rem; }
        .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; }
        /* Tablet: trim the thumb so the headline isn't cramped. */
        @media (min-width: 641px) and (max-width: 860px) { .news-thumb { flex: 0 0 12.5rem; } .news-row { gap: 1.25rem; } }
        /* Phone: stack image over content. */
        @media (max-width: 640px) {
            .news-row { flex-direction: column; gap: 1rem; padding: 1.25rem 0; }
            .news-thumb { flex: 0 0 auto; width: 100%; }
        }
        .news-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--theme-primary); margin-bottom: 0.85rem; }
        .news-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--theme-primary); display: inline-block; }
        .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; }

        /* ── Date archive (ported from the dynamic build) ─────────────────
           <details>/<summary> so year groups expand with no JavaScript;
           the ::before triangle replaces the native marker, which cannot
           be styled consistently across browsers. */
        .archive-widget { display:flex; flex-direction:column; }
        .archive-year { border-bottom:1px solid var(--c-border); }
        .archive-year:last-child { border-bottom:none; }
        .archive-year-sum { display:flex; align-items:center; justify-content:space-between; gap:.75rem; cursor:pointer; padding:.7rem 0; list-style:none; font-family:var(--font-body); font-weight:800; font-size:.95rem; color:var(--c-text); user-select:none; }
        .archive-year-sum::-webkit-details-marker { display:none; }
        .archive-year-sum::before { content:'\25B8'; flex-shrink:0; font-size:.7rem; color:var(--c-text3); transition:transform .2s ease; }
        .archive-year[open] > .archive-year-sum::before { transform:rotate(90deg); }
        .archive-year-label { flex:1; }
        .archive-year-count { font-size:.7rem; font-weight:700; color:var(--c-text3); letter-spacing:.04em; }
        .archive-months { list-style:none; margin:0 0 .5rem; padding:0 0 0 1.1rem; }
        .archive-months li { margin:0; }
        .archive-months a { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.4rem 0; text-decoration:none; color:var(--c-text2,var(--c-text3)); font-family:var(--font-body); font-size:.9rem; font-weight:600; transition:color .15s ease; }
        .archive-months a:hover { color:var(--theme-primary); }
        .archive-mon-count { font-size:.7rem; font-weight:700; color:var(--c-text3); }

        /* Facet index (/category/, /tag/, /author/). A dense two-column
           list rather than cards: these pages exist to be scanned and
           clicked through, and a long tail of tags would otherwise scroll
           for pages as cards. */

        /* Index hero. Deliberately shorter than the home page's — a
           listing has content directly beneath it, so the band introduces
           the page rather than filling the first screen. */
        /* Padding comes from .xbgu-hero-band, shared with the home page.
           Only the trailing gap is the index's own, because a listing
           starts right underneath it. */
        .xbgu-index-hero { margin-bottom: 0; }

        /* Own grid rather than Tailwind's flex utilities: the art column
           needs a height ceiling, and a 4:3 box at two-fifths of a 1280px
           container was 370px tall next to four lines of copy — the band
           was mostly empty space. 16:9, capped, and the copy sits at the
           top of the row instead of floating in the middle of it. */
        .xbgu-hero-row { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
        @media (min-width: 1024px) {
            .xbgu-hero-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
        }
        .xbgu-hero-copy { min-width: 0; }
        .xbgu-hero-art {
            position: relative;
            width: 100%;
            max-width: 560px;
            aspect-ratio: 16 / 9;
            max-height: 300px;
            margin-left: auto;
            border-radius: 1.25rem;
            overflow: hidden;
            background-color: var(--c-bg3);
            box-shadow: 0 18px 40px -24px var(--c-shadow);
        }
        .xbgu-hero-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
        .xbgu-hero-wash { position:absolute; inset:0;
                         background:linear-gradient(to top right, rgba(0,0,0,.12), rgba(0,0,0,0)); }
        /* Phones: no art. The copy is the page's heading and the listing
           starts right under it — a decorative band would push the first
           headline off the first screen. */
        @media (max-width: 639.98px) { .xbgu-hero-art { display: none; } }
        /* Tablets: full width but shallow, so it introduces rather than
           dominates. */
        @media (min-width: 640px) and (max-width: 1023.98px) {
            .xbgu-hero-art { max-width: 100%; max-height: 220px; margin-left: 0; }
        }
        .xbgu-hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem;
                            margin-bottom:1.1rem; font-size:.68rem; font-weight:800; text-transform:uppercase;
                            letter-spacing:.14em; color:var(--theme-accent);
                            background-color:var(--c-bg2); border:1px solid var(--c-border); border-radius:5px; }
        .xbgu-hero-eyebrow:empty { display:none; }
        .xbgu-hero-dot { width:.5rem; height:.5rem; border-radius:9999px; background-color:var(--theme-primary); flex-shrink:0; }
        .xbgu-hero-title { font-family:var(--font-heading); font-weight:700; letter-spacing:-.02em;
                          line-height:1.08; font-size:2.25rem; margin:0 0 .85rem; color:var(--c-text);
                          text-transform:capitalize; }
        @media (min-width:640px){ .xbgu-hero-title { font-size:3rem; } }
        @media (min-width:1024px){ .xbgu-hero-title { font-size:3.75rem; } }
        .xbgu-hero-desc { font-family:var(--font-body); font-size:1rem; line-height:1.65;
                         color:var(--c-text2); max-width:58ch; margin:0 0 1.1rem; }
        .xbgu-hero-meta { margin:0; }

        /* Category index cards. Five sections in a two-column list left
           most of the page empty; as cards they carry a count, the newest
           headline and a call to browse. */
        .facet-cards { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
        @media (min-width:640px){ .facet-cards { grid-template-columns:1fr 1fr; } }
        @media (min-width:1024px){ .facet-cards { grid-template-columns:repeat(3, 1fr); } }
        .facet-card { display:flex; flex-direction:column; gap:.4rem; padding:1.4rem 1.5rem;
                      border:1px solid var(--c-border); border-radius:.9rem; text-decoration:none;
                      background-color:var(--c-surface); font-family:var(--font-body);
                      transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
        .facet-card:hover { border-color:var(--theme-primary); transform:translateY(-2px);
                            box-shadow:0 8px 24px -12px var(--c-shadow); }
        .facet-card-count { font-size:.65rem; font-weight:800; text-transform:uppercase;
                            letter-spacing:.12em; color:var(--c-text4); }
        .facet-card-name { font-family:var(--font-heading); font-size:1.35rem; font-weight:700;
                           line-height:1.2; color:var(--c-text); text-transform:capitalize; }
        .facet-card-latest { font-size:.85rem; line-height:1.5; color:var(--c-text3); }
        .facet-card-go { margin-top:.5rem; font-size:.68rem; font-weight:800; text-transform:uppercase;
                         letter-spacing:.11em; color:var(--theme-primary); }
        .facet-index { display:grid; grid-template-columns:1fr; gap:.15rem; margin-bottom:2rem; }
        @media (min-width:640px){ .facet-index { grid-template-columns:1fr 1fr; column-gap:2rem; } }
        .facet-item { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
                      padding:.7rem 0; border-bottom:1px solid var(--c-border); text-decoration:none;
                      font-family:var(--font-body); transition:color .15s ease; }
        .facet-item:hover { color:var(--theme-primary); }
        .facet-main { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
        .facet-name { font-size:.95rem; font-weight:600; color:var(--c-text); text-transform:capitalize; }
        .facet-item:hover .facet-name { color:var(--theme-primary); }
        .facet-sub { font-size:.76rem; line-height:1.45; color:var(--c-text3); font-weight:400;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .facet-count { font-size:.7rem; font-weight:700; color:var(--c-text3); flex-shrink:0; }

        .facet-intro { font-family:var(--font-body); font-size:.95rem; line-height:1.65;
                       color:var(--c-text2); margin:0 0 2rem; max-width:60ch; }

        /* Author card — the persona block at the top of /author/<slug>/. */
        .author-card { display:flex; gap:1.25rem; align-items:flex-start; padding:1.5rem 0 2rem;
                       border-bottom:1px solid var(--c-border); margin-bottom:.5rem; }
        .author-avatar { flex:0 0 64px; width:64px; height:64px; border-radius:9999px;
                         display:flex; align-items:center; justify-content:center;
                         background:var(--c-bg2); color:var(--theme-primary);
                         font-family:var(--font-heading); font-size:1.4rem; font-weight:700; }
        .author-meta { min-width:0; }
        .author-name { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; margin:0 0 .2rem; color:var(--c-text); }
        .author-role { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--theme-primary); margin-bottom:.5rem; }
        .author-bio { font-size:.92rem; line-height:1.6; color:var(--c-text2); margin:0; font-family:var(--font-body); }